/*
Theme Name: RRK Cinematic
Theme URI: https://rrkproduct.com
Author: RRK Product
Author URI: https://rrkproduct.com
Description: A custom WooCommerce-ready theme for RRK Product — cinematic color grading LUTs for filmmakers. Built around a film-scope aesthetic: charcoal backgrounds, timecode-driven structure, and a before/after grade signature moment.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rrk-cinematic
Tags: e-commerce, woocommerce, one-column, custom-menu, custom-logo, translation-ready
*/

/* -----------------------------------------------------------
   DESIGN TOKENS
   Palette named for what it does in the grading world:
   - bg / bg-alt / panel: three value-steps of "underexposed" charcoal
   - fg / fg-muted: film-base off-white, and a stepped-down neutral
   - teal / amber: a restrained nod to the shadows/highlights split-tone
     LUT colorists actually push, used sparingly as accents, not everywhere
   - red: vectorscope trace color, used only for alerts/emphasis dots
------------------------------------------------------------ */
:root{
  --rrk-bg: #0B0C0D;
  --rrk-bg-alt: #131415;
  --rrk-panel: #1B1D1E;
  --rrk-fg: #F0EDE6;
  --rrk-fg-muted: #A39C90;
  --rrk-teal: #3E6B66;
  --rrk-teal-bright: #63a49c;
  --rrk-amber: #C77B4A;
  --rrk-red: #C1443C;
  --rrk-line: rgba(240,237,230,0.11);
  --rrk-glow-1: rgba(62,107,102,0.16);
  --rrk-glow-2: rgba(199,123,74,0.09);
  --rrk-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 16px 40px rgba(0,0,0,0.35);

  --rrk-font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --rrk-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rrk-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --rrk-radius: 3px;
  --rrk-container: 1180px;
}

/* -----------------------------------------------------------
   LIGHT MODE
   Not a straight invert — daylight-balanced rather than "cream paper":
   a cool near-white with deepened teal/amber/red so accents keep
   enough contrast against a light background.
------------------------------------------------------------ */
:root[data-theme="light"]{
  --rrk-bg: #EEEFE9;
  --rrk-bg-alt: #E3E4DC;
  --rrk-panel: #FFFFFF;
  --rrk-fg: #181B1A;
  --rrk-fg-muted: #5B6059;
  --rrk-teal: #2F5551;
  --rrk-teal-bright: #2B6560;
  --rrk-amber: #A85F2E;
  --rrk-red: #A8362F;
  --rrk-line: rgba(24,27,26,0.10);
  --rrk-glow-1: rgba(47,85,81,0.07);
  --rrk-glow-2: rgba(168,95,46,0.06);
  --rrk-shadow: 0 1px 2px rgba(24,27,26,0.04), 0 14px 32px rgba(24,27,26,0.07);
}
:root[data-theme="light"] .rrk-header{ background:rgba(238,239,233,0.86); }
:root[data-theme="light"] body::before{ opacity:0.02; mix-blend-mode:multiply; }
:root[data-theme="light"] .rrk-placeholder-flat{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 40px),
    linear-gradient(160deg, #cfcecb 0%, #a9a7a2 55%, #8d8b86 100%);
}
:root[data-theme="light"] .rrk-placeholder-graded{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 40px),
    linear-gradient(160deg, #bcd6d2 0%, #7fa39d 45%, #d8a06f 130%);
}

/* Theme toggle control */
.rrk-theme-toggle{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--rrk-line); background:transparent; color:var(--rrk-fg-muted);
  border-radius:999px; padding:6px 12px;
  font-family:var(--rrk-font-mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  transition:color .2s ease, border-color .2s ease;
}
.rrk-theme-toggle:hover{ color:var(--rrk-fg); border-color:var(--rrk-fg-muted); }
.rrk-theme-toggle .rrk-theme-icon{ font-size:0.85rem; line-height:1; }

/* -----------------------------------------------------------
   RESET & BASE
------------------------------------------------------------ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background-color:var(--rrk-bg);
  background-image:
    radial-gradient(1100px 560px at 12% -8%, var(--rrk-glow-1), transparent 60%),
    radial-gradient(900px 480px at 100% 4%, var(--rrk-glow-2), transparent 55%);
  background-attachment:fixed;
  color:var(--rrk-fg);
  font-family:var(--rrk-font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Fine film-grain texture over the whole page — a deliberate nod to the
   subject (footage grain), not decoration for its own sake. Very low
   opacity, blended so it never fights with text contrast. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--rrk-font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--rrk-fg);
}
h1{ font-size:clamp(2.2rem, 5vw, 4rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size:1.25rem; }

p{ margin:0 0 1.2em; color:var(--rrk-fg-muted); }

.rrk-container{
  max-width:var(--rrk-container);
  margin:0 auto;
  padding:0 24px;
}

.rrk-eyebrow{
  font-family:var(--rrk-font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rrk-teal-bright);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.rrk-eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--rrk-red);
  box-shadow:0 0 0 3px rgba(193,68,60,0.18);
}

/* Buttons */
.rrk-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:var(--rrk-radius);
  font-family:var(--rrk-font-mono);
  font-size:0.85rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.rrk-btn:hover{ transform:translateY(-1px); }
.rrk-btn-primary{ background:var(--rrk-fg); color:var(--rrk-bg); }
.rrk-btn-primary:hover{ background:var(--rrk-teal-bright); color:var(--rrk-bg); }
.rrk-btn-ghost{ border-color:var(--rrk-line); color:var(--rrk-fg); }
.rrk-btn-ghost:hover{ border-color:var(--rrk-fg-muted); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--rrk-teal-bright);
  outline-offset:3px;
}

/* -----------------------------------------------------------
   SITE HEADER
------------------------------------------------------------ */
.rrk-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,12,13,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rrk-line);
  box-shadow:0 1px 24px rgba(0,0,0,0.18);
}
.rrk-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.rrk-logo{
  font-family:var(--rrk-font-display);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
}
.rrk-logo img{ height:28px; width:auto; }
.rrk-logo-img{ height:40px; width:auto; display:block; }
.rrk-logo .rrk-logo-dot{ color:var(--rrk-amber); }

.rrk-nav ul{ display:flex; gap:32px; align-items:center; }
.rrk-nav a{
  font-family:var(--rrk-font-mono);
  font-size:0.82rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--rrk-fg-muted);
  transition:color .2s ease;
}
.rrk-nav a:hover{ color:var(--rrk-fg); }

.rrk-header-cart{ display:flex; align-items:center; gap:18px; }
.rrk-cart-count{
  font-family:var(--rrk-font-mono); font-size:0.78rem;
  border:1px solid var(--rrk-line); border-radius:999px;
  padding:4px 10px;
}

.rrk-menu-toggle{ display:none; background:none; border:0; color:var(--rrk-fg); }

@media (max-width: 860px){
  .rrk-nav{ position:fixed; inset:64px 0 0 0; background:var(--rrk-bg); transform:translateY(-110%); transition:transform .3s ease; padding:32px 24px; }
  .rrk-nav.is-open{ transform:translateY(0); }
  .rrk-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .rrk-menu-toggle{ display:block; }
}

/* -----------------------------------------------------------
   HERO — Before/After Grade Scrubber (signature element)
------------------------------------------------------------ */
.rrk-hero{ padding:72px 0 96px; border-bottom:1px solid var(--rrk-line); }
.rrk-hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
}
@media (max-width: 960px){ .rrk-hero-grid{ grid-template-columns:1fr; gap:44px; } }

.rrk-hero-copy p.rrk-lede{ font-size:1.1rem; color:var(--rrk-fg-muted); max-width:46ch; }
.rrk-hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.rrk-hero-meta{
  display:flex; gap:28px; margin-top:44px; padding-top:28px; border-top:1px solid var(--rrk-line);
  font-family:var(--rrk-font-mono); font-size:0.78rem; color:var(--rrk-fg-muted);
}
.rrk-hero-meta strong{ display:block; color:var(--rrk-fg); font-size:1rem; font-family:var(--rrk-font-display); }

.rrk-scrubber{
  position:relative; border-radius:8px; overflow:hidden;
  aspect-ratio:16/10; border:1px solid var(--rrk-line);
  background:var(--rrk-panel);
  box-shadow:var(--rrk-shadow);
}
.rrk-scrubber::after{
  content:"";
  position:absolute; inset:0; z-index:5; pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,0.35);
}
.rrk-scrubber-frame{ position:absolute; inset:0; }
.rrk-scrubber-frame img{ width:100%; height:100%; object-fit:cover; }
.rrk-scrubber-before{ z-index:1; }
.rrk-scrubber-after{ z-index:2; clip-path:inset(0 50% 0 0); }

/* Placeholder frame art — REPLACE with real before/after screenshots via
   the theme customizer or by editing front-page.php once you have footage stills. */
.rrk-placeholder-flat{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 40px),
    linear-gradient(160deg, #4a4a48 0%, #2c2c2b 55%, #1c1c1b 100%);
  filter:saturate(0.55) contrast(0.9);
}
.rrk-placeholder-graded{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 40px),
    linear-gradient(160deg, #2c4a48 0%, #17302c 45%, #C77B4A 130%);
  filter:saturate(1.15) contrast(1.08);
}

.rrk-scrubber-handle{
  position:absolute; top:0; bottom:0; left:50%; z-index:3;
  width:2px; background:var(--rrk-fg); cursor:ew-resize;
  transform:translateX(-1px);
}
.rrk-scrubber-handle::after{
  content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:var(--rrk-fg); color:var(--rrk-bg);
  display:flex; align-items:center; justify-content:center; font-size:0.7rem; letter-spacing:0.1em;
}
.rrk-scrubber-label{
  position:absolute; z-index:4; bottom:14px;
  font-family:var(--rrk-font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  background:rgba(14,15,16,0.7); padding:5px 10px; border-radius:3px; color:var(--rrk-fg);
}
.rrk-scrubber-label.is-before{ left:14px; }
.rrk-scrubber-label.is-after{ right:14px; color:var(--rrk-teal-bright); }

.rrk-timecode{
  position:absolute; top:14px; left:14px; z-index:4;
  font-family:var(--rrk-font-mono); font-size:0.72rem; color:var(--rrk-fg-muted);
  background:rgba(14,15,16,0.7); padding:5px 10px; border-radius:3px;
}

/* -----------------------------------------------------------
   TRUST / COMPATIBILITY BAR
------------------------------------------------------------ */
.rrk-compat{ padding:28px 0; border-bottom:1px solid var(--rrk-line); }
.rrk-compat-inner{ display:flex; align-items:center; gap:36px; flex-wrap:wrap; justify-content:space-between; }
.rrk-compat-label{ font-family:var(--rrk-font-mono); font-size:0.75rem; color:var(--rrk-fg-muted); text-transform:uppercase; letter-spacing:0.06em; }
.rrk-compat-list{ display:flex; gap:28px; flex-wrap:wrap; }
.rrk-compat-list li{ font-family:var(--rrk-font-display); font-size:0.95rem; color:var(--rrk-fg-muted); }

/* -----------------------------------------------------------
   SECTION HEADINGS with timecode-style markers
   (justified here: an editing timeline is genuinely timecoded,
   so 00:00:xx labels carry real sequence meaning, not decoration)
------------------------------------------------------------ */
.rrk-section{ padding:88px 0; border-bottom:1px solid var(--rrk-line); }
.rrk-section-head{ display:flex; align-items:baseline; gap:20px; margin-bottom:48px; flex-wrap:wrap; justify-content:space-between; }
.rrk-tc{
  font-family:var(--rrk-font-mono); font-size:0.8rem; color:var(--rrk-fg-muted);
  border:1px solid var(--rrk-line); padding:4px 10px; border-radius:3px; white-space:nowrap;
}

/* Product grid wrapper — the actual grid lives on ul.products (WooCommerce
   overrides below); this is just a spacing wrapper, not a second grid,
   to avoid nested-grid sizing conflicts. */
.rrk-products{ width:100%; }

/* How it works — numbered steps ARE a real sequence here (buy -> download -> apply) */
.rrk-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:900px){ .rrk-steps{ grid-template-columns:1fr; } }
.rrk-step{ border-top:2px solid var(--rrk-line); padding-top:20px; }
.rrk-step-index{ font-family:var(--rrk-font-mono); color:var(--rrk-amber); font-size:0.85rem; }

/* Testimonial */
.rrk-quote{ max-width:70ch; }
.rrk-quote blockquote{ font-family:var(--rrk-font-display); font-size:1.6rem; font-weight:500; color:var(--rrk-fg); margin:0 0 20px; }
.rrk-quote cite{ font-family:var(--rrk-font-mono); font-size:0.8rem; color:var(--rrk-fg-muted); font-style:normal; }

/* FAQ */
.rrk-faq details{ border-bottom:1px solid var(--rrk-line); padding:18px 0; }
.rrk-faq summary{ cursor:pointer; font-family:var(--rrk-font-display); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.rrk-faq summary::-webkit-details-marker{ display:none; }
.rrk-faq summary::after{ content:"+"; font-family:var(--rrk-font-mono); color:var(--rrk-fg-muted); }
.rrk-faq details[open] summary::after{ content:"–"; }
.rrk-faq p{ margin-top:12px; }

/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
.rrk-footer{ padding:64px 0 32px; background:var(--rrk-bg-alt); }
.rrk-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .rrk-footer-grid{ grid-template-columns:1fr 1fr; } }
.rrk-footer h4{ font-family:var(--rrk-font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--rrk-fg-muted); margin-bottom:16px; }
.rrk-footer ul li{ margin-bottom:10px; }
.rrk-footer-company{ margin-top:24px; padding-top:20px; border-top:1px solid var(--rrk-line); }
.rrk-footer-company ul li{ color:var(--rrk-fg-muted); font-size:0.88rem; }
.rrk-footer a{ color:var(--rrk-fg-muted); transition:color .2s ease; }
.rrk-footer a:hover{ color:var(--rrk-fg); }
.rrk-footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--rrk-line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--rrk-font-mono); font-size:0.72rem; color:var(--rrk-fg-muted);
}

/* -----------------------------------------------------------
   GENERIC PAGE / SINGLE / LEGAL PAGES
------------------------------------------------------------ */
.rrk-page-header{ padding:64px 0 32px; border-bottom:1px solid var(--rrk-line); }
.rrk-page-header .rrk-updated{ font-family:var(--rrk-font-mono); font-size:0.78rem; color:var(--rrk-fg-muted); }
.rrk-content{ padding:56px 0 88px; max-width:74ch; margin:0 auto; }
.rrk-content h2{ margin-top:1.6em; }
.rrk-content ul, .rrk-content ol{ margin:0 0 1.2em; padding-left:1.3em; color:var(--rrk-fg-muted); }
.rrk-content li{ list-style:disc; margin-bottom:0.4em; }
.rrk-content a{ color:var(--rrk-teal-bright); text-decoration:underline; text-underline-offset:3px; }

/* 404 */
.rrk-404{ padding:120px 0; text-align:center; }
.rrk-404 .rrk-tc-big{ font-family:var(--rrk-font-mono); font-size:0.95rem; color:var(--rrk-red); }

/* -----------------------------------------------------------
   WOOCOMMERCE OVERRIDES (kept in this file so a single stylesheet ships;
   the plugin's own stylesheet is dequeued in functions.php via the
   woocommerce_enqueue_styles filter, so these rules are the only CSS
   the shop/product templates get — no float/percentage conflicts.)
------------------------------------------------------------ */

/* Constrains the shop/single-product/cart/checkout content width — this is
   the wrapper added in functions.php around woocommerce_before/after_main_content. */
.rrk-shop-wrap{ padding:56px 0 88px; }
.rrk-shop-wrap .woocommerce-products-header{ margin-bottom:8px; }
.rrk-shop-wrap h1.woocommerce-products-header__title{ font-family:var(--rrk-font-display); }
.rrk-shop-wrap .woocommerce-result-count,
.rrk-shop-wrap .woocommerce-ordering{ font-family:var(--rrk-font-mono); font-size:0.8rem; color:var(--rrk-fg-muted); }

.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:28px;
  list-style:none;
  margin:32px 0 0 !important;
  padding:0 !important;
}
.woocommerce ul.products.columns-1{ grid-template-columns:1fr !important; }
.woocommerce ul.products.columns-2{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
@media (max-width:900px){ .woocommerce ul.products{ grid-template-columns:1fr !important; } }

.woocommerce ul.products li.product{
  float:none !important; width:auto !important; margin:0 !important;
  border:1px solid var(--rrk-line); border-radius:6px; padding:20px;
  background:var(--rrk-panel);
  box-shadow:var(--rrk-shadow);
  display:flex; flex-direction:column;
  position:relative;
}
.woocommerce ul.products li.product a{ display:flex; flex-direction:column; flex:1; }
.woocommerce ul.products li.product a img{
  width:100% !important; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:4px; margin:0 0 16px; display:block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--rrk-font-display); font-size:1.1rem; color:var(--rrk-fg); margin:0 0 8px;
}
.woocommerce ul.products li.product .price{
  font-family:var(--rrk-font-mono); color:var(--rrk-fg-muted); font-size:0.9rem; margin-top:auto; padding-top:6px;
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--rrk-fg); }
.woocommerce ul.products li.product .price del{ opacity:0.6; }
.woocommerce ul.products li.product .onsale{
  font-family:var(--rrk-font-mono); font-size:0.7rem; text-transform:uppercase;
  background:var(--rrk-amber); color:var(--rrk-bg); border-radius:999px;
  min-height:auto; min-width:auto; line-height:1; padding:6px 10px;
  position:absolute; top:16px; right:16px; left:auto; margin:0;
}
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button{
  position:static; margin-top:14px; width:100%; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--rrk-fg) !important; color:var(--rrk-bg) !important; border-radius:3px !important;
  font-family:var(--rrk-font-mono) !important; text-transform:uppercase; letter-spacing:0.02em; font-size:0.74rem !important;
  padding:12px 16px !important; border:none !important;
}

/* Single product image gallery — this styling replaces layout rules that
   used to live in WooCommerce's own stylesheet (now dequeued above), so
   the gallery/thumbnail slider needs its own rules here or it falls back
   to an unstyled browser list. */
.woocommerce-product-gallery{ position:relative; max-width:560px; }
.woocommerce-product-gallery .flex-viewport{
  margin:0 0 14px; border-radius:6px; overflow:hidden;
  background:var(--rrk-panel); border:1px solid var(--rrk-line);
}
.woocommerce-product-gallery__wrapper{ margin:0; padding:0; list-style:none; }
.woocommerce-product-gallery__image{ list-style:none; margin:0; }
.woocommerce-product-gallery__image img{
  width:100%; height:auto; max-height:520px; object-fit:contain;
  background:var(--rrk-bg-alt); display:block; margin:0 auto;
}
.woocommerce-product-gallery ol.flex-control-nav,
.woocommerce-product-gallery ul.flex-control-thumbs{
  display:flex !important; flex-wrap:wrap; gap:10px;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
.woocommerce-product-gallery ol.flex-control-nav li,
.woocommerce-product-gallery ul.flex-control-thumbs li{
  width:74px; height:74px; list-style:none !important; margin:0 !important;
}
.woocommerce-product-gallery ul.flex-control-thumbs img{
  width:100%; height:100%; object-fit:cover; border-radius:4px; cursor:pointer;
  opacity:0.55; transition:opacity .2s ease, border-color .2s ease;
  border:1px solid var(--rrk-line);
}
.woocommerce-product-gallery ul.flex-control-thumbs img.flex-active,
.woocommerce-product-gallery ul.flex-control-thumbs img:hover{
  opacity:1; border-color:var(--rrk-fg-muted);
}
.woocommerce div.product{
  position:relative;
  display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start;
}
@media (max-width:860px){ .woocommerce div.product{ gap:24px; } }

/* The "Sale!" badge is an unwrapped sibling element (not nested inside the
   gallery) in WooCommerce's markup — take it out of normal flow entirely
   so it can't consume a layout slot next to the gallery/summary, and pin
   it over the top-left corner of the main image instead, as intended. */
.woocommerce div.product > span.onsale,
.woocommerce div.product > .onsale{
  position:absolute; top:14px; left:14px; z-index:6;
  font-family:var(--rrk-font-mono); font-size:0.7rem; text-transform:uppercase;
  background:var(--rrk-amber); color:var(--rrk-bg); border-radius:999px;
  padding:6px 12px; margin:0; min-height:auto; min-width:auto; line-height:1;
}

.woocommerce div.product .woocommerce-product-gallery{
  flex:0 0 560px; max-width:100%;
}
.woocommerce div.product .summary.entry-summary{
  flex:1 1 320px; min-width:280px; max-width:640px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--rrk-teal-bright) !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--rrk-fg); font-family:var(--rrk-font-mono); }
.woocommerce .quantity input.qty{ background:var(--rrk-panel); border:1px solid var(--rrk-line); color:var(--rrk-fg); border-radius:3px; padding:10px; }
.woocommerce table.shop_table{ border-color:var(--rrk-line); }
.woocommerce table.shop_table th{ font-family:var(--rrk-font-mono); text-transform:uppercase; font-size:0.72rem; color:var(--rrk-fg-muted); }
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--rrk-panel) !important; border-top-color:var(--rrk-teal) !important; color:var(--rrk-fg) !important;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select{
  background:var(--rrk-bg-alt); border:1px solid var(--rrk-line); color:var(--rrk-fg); border-radius:3px;
  width:100%; padding:12px 14px; margin-top:4px; font-family:var(--rrk-font-body); font-size:0.95rem;
}
.woocommerce-checkout #payment{ background:var(--rrk-panel); border-radius:6px; }
.select2-container .select2-selection--single{ background:var(--rrk-bg-alt) !important; border-color:var(--rrk-line) !important; height:44px !important; }

/* -----------------------------------------------------------
   CLASSIC CHECKOUT FORM (via [woocommerce_checkout] shortcode)
   Needed because these layout rules used to live in WooCommerce's
   default stylesheet, which is dequeued above.
------------------------------------------------------------ */
.woocommerce-checkout #customer_details{
  display:flex; flex-wrap:wrap; gap:32px; margin-bottom:0;
}
/* All 3 LUT products are virtual/downloadable, so WooCommerce never needs
   a shipping address — this just stops the empty shipping column from
   reserving blank space when that's the case. */
.woocommerce-checkout #customer_details .col-2:empty{ display:none; }

/* Two-column checkout: customer details left, order review + payment
   right — right column stays visible while scrolling the form. */
.rrk-checkout-layout{
  display:flex; gap:56px; align-items:flex-start;
}
.rrk-checkout-left{ flex:1 1 58%; min-width:0; }
.rrk-checkout-right{
  flex:1 1 38%; min-width:320px;
  position:sticky; top:96px;
}
@media (max-width:900px){
  .rrk-checkout-layout{ flex-direction:column; gap:32px; }
  .rrk-checkout-right{ position:static; width:100%; }
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  flex:1 1 340px; min-width:280px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:flex; flex-wrap:wrap; gap:0 20px;
}
.woocommerce-checkout .form-row{
  flex:1 1 100%; margin:0 0 18px !important; padding:0 !important;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{
  flex:1 1 calc(50% - 10px);
}
.woocommerce-checkout .form-row label{
  display:block; font-family:var(--rrk-font-mono); font-size:0.75rem;
  text-transform:uppercase; letter-spacing:0.03em; color:var(--rrk-fg-muted);
  margin-bottom:2px;
}
.woocommerce-checkout .form-row label .required{ color:var(--rrk-red); text-decoration:none; }
.woocommerce-checkout h3{ margin-top:0; }
.woocommerce-checkout #order_review_heading{ margin-top:8px; }

/* Payment method list */
.woocommerce-checkout ul.wc_payment_methods{
  list-style:none; margin:0 0 20px; padding:0;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
  border:1px solid var(--rrk-line); border-radius:6px; background:var(--rrk-panel);
  padding:14px 16px; margin-bottom:10px;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label{
  font-family:var(--rrk-font-body); font-size:0.95rem; color:var(--rrk-fg);
  text-transform:none; letter-spacing:normal;
}
.woocommerce-checkout ul.wc_payment_methods .payment_box{
  margin-top:12px; padding:14px; background:var(--rrk-bg-alt);
  border-radius:4px; font-size:0.88rem; color:var(--rrk-fg-muted);
}
.woocommerce-checkout ul.wc_payment_methods .payment_box:before{ display:none; }

/* Terms checkbox + place order button */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ margin:20px 0; }
.woocommerce-checkout #place_order{ width:100%; padding:16px !important; font-size:0.85rem !important; }

/* Order review table on the checkout page */
.woocommerce-checkout table.shop_table{ margin-bottom:20px; }
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{ padding:10px 12px; border-color:var(--rrk-line); }

@media (max-width:700px){
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{ flex:1 1 100%; }
}