/* =====================================================================
   QUICK CUSTOMIZATION  —  START HERE
   =====================================================================
   Most things you will ever want to change are in THIS file:
     1. Fonts
     2. Colors
     3. Background images (desktop AND phone versions)
     4. Logo size, header color and a few sizes

   You do NOT need to open style.css for these changes.
   Just edit the values after the colon ( : ) and save.
   ===================================================================== */


/* =====================================================================
   1. FONTS
   =====================================================================
   HOW TO CHANGE A FONT (3 easy steps):
     a) Go to https://fonts.google.com and pick a font.
     b) Click "Get font" -> "Get embed code" -> choose "@import".
        Copy ONLY the line that starts with @import and paste it below,
        replacing the old @import line.  (@import must stay at the very
        top of this file, above everything else.)
     c) Change the font name in section 1B below to match.
   ===================================================================== */

/* 1A. Font download line (from Google Fonts). Replace this to change fonts. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/* ---------------------------------------------------------------------
   CUSTOM FONT FILES (optional - skip this if you use Google Fonts)
   If you have your own font file instead:
     - Put the file in the  assets/fonts/  folder
     - Below, find the block that starts with @font-face. It is switched
       OFF right now because it is wrapped in a comment.
     - To switch it ON, delete the line above it that has just a slash
       and a star, and the line below it that has just a star and a slash.
     - Change the name and file path to match your font, then use that
       name in section 1B.
   --------------------------------------------------------------------- */
/*
@font-face {
  font-family: "My Custom Font";
  src: url("../assets/fonts/my-font.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
*/

:root {

  /* 1B. Which font is used where.
     Keep the quote marks, and keep the ", serif" / ", sans-serif" at the
     end (it is the backup font if yours can't load).                    */
  --font-heading: "Playfair Display", serif;    /* big titles            */
  --font-body:    "DM Sans", sans-serif;        /* paragraphs, buttons   */


  /* ===================================================================
     2. COLORS
     ===================================================================
     Use any color code, e.g. #d4aa4f  (you can pick one at
     https://htmlcolorcodes.com).                                      */

  --ink:    #17120f;   /* main dark text color                         */
  --paper:  #f5efe3;   /* main light page background (cream)           */
  --paper2: #fbf8f1;   /* slightly lighter cream (some sections)       */
  --wine:   #4b1116;   /* dark red                                     */
  --wine2:  #6c1d20;   /* lighter dark red                             */
  --gold:   #d4aa4f;   /* gold (buttons, lines, highlights)            */
  --gold2:  #f1d58a;   /* light gold (small labels, hover color)       */
  --green:  #3f5634;   /* green (product details text)                 */
  --brown:  #765037;   /* brown (small headings)                       */
  --muted:  #6f6658;   /* grey-brown for paragraph text                */
  --line:   rgba(38, 27, 18, .13);  /* thin divider lines              */
  --white:  #fff;


  /* ===================================================================
     3. BACKGROUND IMAGES
     ===================================================================
     EASIEST WAY: replace the picture file itself.
       Put your new image in  assets/images/  and give it the SAME NAME
       as the old one (for example  hero-background.webp).  Done!

     OR use a different file name: change the name inside url("...")
     below.  Keep the  ../assets/images/  part in front of the name.

     TWO VERSIONS OF EACH PICTURE
       - "desktop" = wide landscape photo (laptops, big screens)
       - "mobile"  = tall, smaller photo (phones and small tablets)
       The mobile one loads faster on phone data. Make it a portrait
       crop (about 800 x 1000 px) with the main subject in the middle.

     TIPS: .webp, .jpg and .png all work. Keep each file under ~250 KB
           for a fast site (free tool: https://squoosh.app).            */

  /* 3A. Top of the page (the first big screen) */
  --hero-bg-image:         url("../assets/images/hero-background.webp");
  --hero-bg-image-mobile:  url("../assets/images/hero-background-mobile.webp");

  /* 3B. "Our story" section (big picture with text on top) */
  --story-bg-image:        url("../assets/images/story-background.webp?v=2");
  --story-bg-image-mobile: url("../assets/images/story-background-mobile.webp?v=2");

  /* 3C. How dark the picture is behind the text.
     In rgba(R, G, B, OPACITY) the LAST number is the darkness.
     0 = no dark tint, 1 = fully black. Smaller = brighter picture.    */
  --hero-overlay:
    linear-gradient(90deg, rgba(17,10,7,.80) 0%, rgba(17,10,7,.48) 42%, rgba(17,10,7,.10) 100%);

  --story-overlay:
    linear-gradient(90deg, rgba(10,7,5,.84) 0%, rgba(10,7,5,.50) 52%, rgba(10,7,5,.22) 100%);

  /* Same, for phones (text sits on top, so the tint runs top to bottom) */
  --hero-overlay-mobile:
    linear-gradient(180deg, rgba(17,10,7,.60) 0%, rgba(17,10,7,.55) 45%, rgba(17,10,7,.82) 100%);

  --story-overlay-mobile:
    linear-gradient(180deg, rgba(10,7,5,.55) 0%, rgba(10,7,5,.62) 50%, rgba(10,7,5,.82) 100%);

  /* 3C-2. "Bring Daddy's Crop home" (buy) section - storage / warehouse picture */
  --buy-bg-image:        url("../assets/images/storage-background.webp");
  --buy-bg-image-mobile: url("../assets/images/storage-background-mobile.webp");
  --buy-overlay:
    linear-gradient(90deg, rgba(20,12,8,.78) 0%, rgba(20,12,8,.55) 50%, rgba(20,12,8,.35) 100%);
  --buy-overlay-mobile:
    linear-gradient(180deg, rgba(20,12,8,.72) 0%, rgba(20,12,8,.55) 50%, rgba(20,12,8,.78) 100%);
  --buy-bg-position: center center;

  /* 3D. Which part of the picture stays visible when it gets cropped.
     Options: center, top, bottom, left, right (or two, like "center top")
     or percentages like "40% center".                                 */
  --hero-bg-position:  center center;
  --story-bg-position: center center;
  --hero-bg-position-mobile:  50% center;
  --story-bg-position-mobile: 50% center;


  /* ===================================================================
     4. LOGO, HEADER AND SIZES
     ===================================================================  */

  --logo-height:      52px;                 /* logo height in the top bar */
  --topbar-bg:        rgba(20, 12, 9, .78); /* top bar color (last number = see-through amount) */

  --container-width:  min(1240px, 92vw);    /* how wide the page content is */
  --hero-min-height:  100vh;                /* 100vh = full screen height   */
  --story-min-height: 100vh;                /* "Our story" section height   */
  --section-padding:  120px;                /* space above/below sections (desktop). Smaller automatically on tablet/phone */

  /* How much the rice bag grows when you hover over it with the mouse.
     1 = no zoom, 1.06 = 6% bigger, 1.15 = 15% bigger.                  */
  --bag-hover-zoom:   1.06;
}


/* =====================================================================
   5. PHONE & SMALL-TABLET VERSIONS (screens narrower than 900 px)
   These switch the background pictures to the "mobile" versions above.
   ===================================================================== */
@media (max-width: 900px) {
  :root {
    --hero-bg-image:    var(--hero-bg-image-mobile);
    --story-bg-image:   var(--story-bg-image-mobile);
    --buy-bg-image:     var(--buy-bg-image-mobile);
    --buy-overlay:      var(--buy-overlay-mobile);
    --hero-overlay:     var(--hero-overlay-mobile);
    --story-overlay:    var(--story-overlay-mobile);
    --hero-bg-position: var(--hero-bg-position-mobile);
    --story-bg-position: var(--story-bg-position-mobile);
    --logo-height:      44px;
    --hero-min-height:  auto;
    --story-min-height: 80vh;
  }
}
/* =====================================================================
   DADDY'S CROP — MAIN STYLES
   =====================================================================
   Fonts, colors, background images and key sizes are NOT edited here.
   Change them in  css/customize.css  instead (they are used below as
   var(--something)).

   WHAT'S IN THIS FILE (in page order):
     1.  Basic page setup
     2.  Top bar, logo and menu (with the phone menu button)
     3.  Hero (first screen)
     4.  Intro text
     5.  Our story (big background picture)
     6.  Product
     7.  Unpolished vs polished (+ tap-to-enlarge viewer)
     8.  Packaging details
     9.  FAQ
     10. Buy section
     11. Contact / wholesale enquiries
     12. Floating Buy + WhatsApp buttons
     13. Footer
     14. Tablet layout   (screens up to 1100 px)
     15. Phone layout    (screens up to 900 px, and again up to 600 px)
     16. Special cases   (phone turned sideways, reduced motion)
   ===================================================================== */


/* =====================================================================
   1. BASIC PAGE SETUP
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
body.no-scroll{overflow:hidden}

/* Makes keyboard users see where they are */
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* When a menu link jumps to a section, leave room for the top bar */
section[id]{scroll-margin-top:72px}

/* Keeps page content centered and not too wide */
.container{width:var(--container-width);margin:auto}

/* Small gold label text used above headings */
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);font-weight:700}

/* Rounded buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;min-height:44px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transition:.25s;cursor:pointer;background:transparent;color:inherit}
.btn.primary{background:var(--gold);color:#25170d;border-color:var(--gold)}
.btn.dark{border-color:rgba(38,27,18,.28);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.btn img{width:20px;height:20px;flex:none}


/* =====================================================================
   2. TOP BAR, LOGO AND MENU
   Logo file: assets/images/logo.webp   |   Logo size: customize.css
   ===================================================================== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:10px 4vw;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  display:flex;justify-content:space-between;align-items:center;
  color:#fff;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:var(--logo-height);width:auto}

/* Menu links at top-right */
.nav{display:flex;gap:26px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.nav a{opacity:.85;transition:.25s;padding:8px 0}
.nav a:hover{opacity:1;color:var(--gold2)}

/* The 3-line menu button (only shown on phones - see section 15) */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* =====================================================================
   3. HERO (FIRST SCREEN)
   Background picture: customize.css -> --hero-bg-image
   ===================================================================== */
.hero{
  min-height:var(--hero-min-height);
  position:relative;
  display:grid;place-items:center;
  overflow:hidden;
  color:#fff;
  background:#170f0b;
  padding-top:70px;
}
/* The background picture layer (dark tint + picture) */
.hero-bg{
  position:absolute;inset:0;
  background-image:var(--hero-overlay),var(--hero-bg-image);
  background-size:cover;
  background-position:var(--hero-bg-position);
  background-repeat:no-repeat;
}
/* Soft dark fade at the top and bottom edges */
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 40%,rgba(0,0,0,.45));
  z-index:1;pointer-events:none;
}
/* Floating gold dots layer (drawn by js/hero-particles.js) */
#hero3d{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55}

.hero-inner{position:relative;z-index:4;width:var(--container-width);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy{padding-top:5vh}
.hero h1{font:600 clamp(4rem,8vw,8.7rem)/.9 var(--font-heading);letter-spacing:-.05em;margin:18px 0 0;max-width:8ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero p{max-width:560px;font-size:1.02rem;line-height:1.8;color:rgba(255,255,255,.88);margin:24px 0 0;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Logo placed near the sun on larger screens. */
@media(max-width:900px){
  .hero-inner .hero-product img{width:min(180px,42vw)}
}
@media(min-width:901px){
  .hero-inner .hero-product{align-self:start;min-height:0;padding-top:0}
  .hero-inner .hero-product img{width:clamp(140px,15vw,220px)}
  .hero-inner .hero-product::before{width:260px}
}
.hero-product{display:flex;justify-content:center;align-items:center;position:relative;min-height:620px}
.hero-product::before{
  content:"";position:absolute;width:520px;max-width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(231,188,90,.28),transparent 68%);
  filter:blur(5px);
}
.hero-product img{
  position:relative;width:min(420px,70vw);
  filter:drop-shadow(0 34px 45px rgba(0,0,0,.42));
  transform:none;
  transition:transform .45s ease;
}


/* =====================================================================
   4. INTRO TEXT
   ===================================================================== */
.intro{
  padding:var(--section-padding) 0 calc(var(--section-padding) - 20px);
  background:var(--paper2);
}
.intro-grid{display:grid;grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
.intro-grid > div{width:100%;max-width:900px}
.intro-grid > div:last-child{max-width:680px}
.intro-grid .mini-rule{justify-content:center}
/* Large headline style (also used by other sections) */
.display{font:600 clamp(3rem,5.5vw,6rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:0}
.bodycopy{font-size:1rem;line-height:1.85;color:var(--muted)}
.mini-rule{display:flex;align-items:center;gap:14px;color:var(--brown);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}
.mini-rule::before{content:"";width:40px;height:1px;background:var(--gold);flex:none}


/* =====================================================================
   5. OUR STORY (BIG BACKGROUND PICTURE WITH TEXT)
   Background picture: customize.css -> --story-bg-image
   ===================================================================== */
.story{position:relative;color:#fff;background:#19130f}
/* Tall scroll track: the stage inside stays pinned while the steps change */
.story-track{height:calc(var(--steps) * 62vh + 38vh);position:relative}
.story-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;
  padding:clamp(78px,11vh,104px) 0 clamp(18px,3vh,30px);
  overflow:hidden;
  background-color:#19130f;
}
.story-stage::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--story-overlay),var(--story-bg-image);
  background-size:cover;background-position:var(--story-bg-position);background-repeat:no-repeat;
  transform:scaleX(-1);pointer-events:none;
}
/* Soft dark edges around the picture */
.story-stage::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 55% 48%,transparent 30%,rgba(0,0,0,.4) 100%);
  pointer-events:none;
}
.story-stage>*{position:relative;z-index:2}
.story-head{padding-left:0;flex:none}
.story-head .eyebrow{margin-bottom:10px}
.story-head h2{font:600 clamp(2.4rem,4.6vw,4.6rem)/.95 var(--font-heading);letter-spacing:-.04em;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.4)}

.process{flex:1;min-height:0;position:relative;margin-top:clamp(10px,2vh,24px)}
.pstep{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;
  padding:12px 0;
  opacity:0;visibility:hidden;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;
}
.pstep.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s}
.pstep-count{font-size:.78rem;letter-spacing:.22em;color:rgba(255,255,255,.65);font-weight:700;margin-bottom:6px}
.pstep-count span{font:600 clamp(3.6rem,7vw,6.4rem)/1 var(--font-heading);letter-spacing:-.04em;color:var(--gold);margin-right:6px}
.pstep h3{font:600 clamp(1.7rem,3vw,2.8rem)/1.05 var(--font-heading);letter-spacing:-.02em;margin:0 0 12px;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.pstep-tag{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold2);border:1px solid rgba(241,213,138,.4);border-radius:999px;padding:7px 14px;margin-bottom:18px}
.pstep p{max-width:460px;line-height:1.75;color:rgba(255,255,255,.9);font-size:1.05rem;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.pstep-media{justify-self:stretch;align-self:stretch;width:100%;height:100%;max-height:none;max-width:100%;min-height:0;min-width:0;display:flex}
.pstep-media img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;border:0;border-radius:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 100%),linear-gradient(to bottom,#000 0%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 0%,#000 100%),linear-gradient(to bottom,#000 0%,#000 100%);
  mask-composite:intersect;
}

.process-nav{flex:none;display:flex;gap:8px;padding-left:0;margin-top:clamp(10px,2vh,20px)}
.pdot{flex:0 0 clamp(26px,4vw,52px);height:5px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.28);cursor:pointer;transition:background .3s,flex-basis .3s}
.pdot.is-active{background:var(--gold);flex-basis:clamp(44px,7vw,84px)}
.pdot:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}


/* =====================================================================
   6. PRODUCT
   ===================================================================== */
.product{
  padding:var(--section-padding) 0;
  background:
    radial-gradient(circle at 85% 30%,rgba(212,170,79,.12),transparent 28%),
    var(--paper2);
}
.product-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}
.product-visual{position:relative;display:flex;justify-content:center;align-items:center}
.product-visual::before{content:"";position:absolute;width:390px;max-width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(212,170,79,.22),transparent 68%)}
.product-visual img{position:relative;width:min(440px,90%);filter:drop-shadow(0 30px 40px rgba(45,30,18,.18));transition:transform .45s ease}
.product-copy .eyebrow{color:var(--brown)}
.product-copy h2{font:600 clamp(3rem,5.6vw,6rem)/.95 var(--font-heading);letter-spacing:-.05em;margin:14px 0 0}
.product-copy p{color:var(--muted);line-height:1.8}
/* The 4 small boxes (Product / Package shown / Processing / Format) */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:32px;border:1px solid var(--line)}
.spec{background:var(--paper2);padding:18px}
.spec b{display:block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#7a705f;margin-bottom:5px}
.spec span{font:500 1.1rem var(--font-heading);color:var(--green)}


/* =====================================================================
   7. UNPOLISHED VS POLISHED
   Click / tap the chart to open it full-size (js/main.js)
   ===================================================================== */
.compare{padding:var(--section-padding) 0 0;background:var(--paper);color:var(--ink)}
.compare .eyebrow{color:var(--brown);margin-bottom:14px}
.compare-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}
.compare h2{font:600 clamp(3rem,5.7vw,6rem)/.94 var(--font-heading);letter-spacing:-.05em;margin:0;max-width:8ch}
.compare p{max-width:440px;line-height:1.8;color:var(--muted)}
.compare-frame{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:zoom-in;color:inherit}
.compare-frame img{display:block;width:100%;height:auto;border-radius:0}
.compare > .container{width:100%}
.compare-head{width:var(--container-width);margin-left:auto;margin-right:auto}
/* "Tap to enlarge" label on the corner of the chart */
.zoom-hint{
  position:absolute;right:26px;bottom:26px;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:rgba(20,12,9,.82);color:#fff;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.zoom-hint svg{width:15px;height:15px}

/* Full-screen chart viewer */
.lightbox{
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:rgba(10,7,5,.96);color:#fff;
}
.lightbox::backdrop{background:rgba(10,7,5,.9)}
.lightbox-scroll{width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;padding:64px 16px 24px;-webkit-overflow-scrolling:touch}
.lightbox-scroll img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;border-radius:10px}
.lightbox-close{
  position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;
}


/* =====================================================================
   8. PACKAGING DETAILS
   ===================================================================== */
.package-details{padding:clamp(28px,4vw,48px) 0 0;background:var(--paper);scroll-margin-top:90px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.back-image{position:relative;display:flex;justify-content:center;grid-column:1 / -1}
.back-image img{
  display:block;width:100%;height:auto;
}
.details-copy{grid-column:1 / -1}
.package-details > .details-grid{width:100%}
.package-details .details-grid{gap:clamp(20px,3vw,36px)}
.details-copy{width:var(--container-width);margin-left:auto;margin-right:auto}
.details-copy h2{font:600 clamp(3rem,5vw,5.5rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:0 0 18px}
.details-copy .eyebrow{color:var(--brown);margin-bottom:14px}
.details-copy p{line-height:1.8;color:var(--muted);margin:0;max-width:980px}
/* The 4 numbered facts (01, 02, 03, 04) */
.fact-list{display:grid;gap:12px;margin-top:30px}
.fact{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.fact b{width:30px;height:30px;border-radius:50%;background:rgba(212,170,79,.15);display:grid;place-items:center;color:var(--brown);flex:none}
.fact span{line-height:1.55}


/* =====================================================================
   9. FAQ (click a question to open the answer — no script needed)
   ===================================================================== */
.faq{padding:var(--section-padding) 0;background:var(--paper2)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq h2{font:600 clamp(2.8rem,4.6vw,5rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:12px 0 0}
.faq .eyebrow{color:var(--brown)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;min-height:44px;
  font:500 1.2rem var(--font-heading);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:rgba(212,170,79,.18);display:grid;place-items:center;color:var(--brown);font:500 1.3rem var(--font-body)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0 0 24px;padding-right:50px;line-height:1.8;color:var(--muted)}


/* =====================================================================
   10. BUY SECTION (dark red)
   ===================================================================== */
.buy{padding:calc(var(--section-padding) - 10px) 0;background:var(--buy-overlay),var(--buy-bg-image) var(--buy-bg-position)/cover no-repeat,#2a1c12;color:#fff}
.buy-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.buy h2{font:600 clamp(3rem,5vw,6rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:0}
.buy p{max-width:520px;color:rgba(255,255,255,.78);line-height:1.8}
.market-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.market{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;min-height:46px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,transform .25s}
.market img{width:28px;height:28px;border-radius:8px;display:block}
.buy-bag{display:flex;justify-content:center}
.buy-bag img{width:min(360px,80%);filter:drop-shadow(0 35px 55px rgba(0,0,0,.35));transition:transform .45s ease}


/* =====================================================================
   11. CONTACT / WHOLESALE ENQUIRIES
   The form opens WhatsApp with the message already typed (js/main.js)
   ===================================================================== */
.contact{padding:var(--section-padding) 0;background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact .eyebrow{color:var(--brown)}
.contact h2{font:600 clamp(2.8rem,4.8vw,5.2rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:12px 0 18px}
.contact-copy p{color:var(--muted);line-height:1.8;max-width:480px}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.contact-actions .btn.whatsapp{background:#25D366;border-color:#25D366;color:#06210f;font-weight:700}
.contact-details{display:grid;gap:14px;font-size:.95rem;line-height:1.6}
.contact-details b{display:block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#7a705f;margin-bottom:2px}

.enquiry{background:var(--paper2);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 20px 50px rgba(45,30,18,.08)}
.enquiry h3{font:600 1.5rem var(--font-heading);margin:0 0 4px}
.enquiry .hint{margin:0 0 22px;font-size:.85rem;color:var(--muted)}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#7a705f;font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;
  border:1px solid rgba(38,27,18,.2);border-radius:12px;
  background:#fff;color:var(--ink);
  font:inherit;font-size:16px; /* 16px stops phones zooming in on tap */
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.enquiry .btn{width:100%;margin-top:6px}


/* =====================================================================
   12. FLOATING BUTTONS (stay on screen while you scroll)
   Buy rail: right edge, vertically centered.  WhatsApp: bottom-right.
   Icons: assets/icons/ (amazon, flipkart, blinkit, zepto, whatsapp .svg)
   ===================================================================== */
.buy-float{
  position:fixed;
  top:50%;
  right:18px;
  transform:translate3d(0,-50%,0);
  z-index:120;
  width:58px;
  padding:7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(22,14,10,.82);
  box-shadow:0 18px 45px rgba(0,0,0,.24);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.buy-float-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  margin:4px auto 10px;
  color:var(--gold2);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.buy-float-links{display:grid;gap:7px}
.buy-float a{
  width:44px;
  height:44px;
  display:block;
  border-radius:13px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .22s ease,border-color .22s ease;
}
.buy-float a img{width:100%;height:100%;display:block}
.buy-float .buy-float-now{
  margin-top:7px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:.5rem;
  line-height:1.2;
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  z-index:130;
  width:58px;
  height:58px;
  border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.whatsapp-float img{width:100%;height:100%;display:block}


/* =====================================================================
   13. FOOTER
   ===================================================================== */
footer{padding:60px 0 28px;background:#130b08;color:rgba(255,255,255,.62);font-size:.85rem;line-height:1.7}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.footer-brand img{height:56px;width:auto;margin-bottom:14px}
.footer-brand p{margin:0;max-width:300px}
footer h4{margin:0 0 14px;color:#fff;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:var(--gold2)}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.45)}


/* =====================================================================
   HOVER EFFECTS — only on devices with a mouse (so touch screens
   don't get "stuck" zoomed after a tap)
   ===================================================================== */
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .hero-product img:hover{transform:scale(1.03)}
  .product-visual img:hover,.buy-bag img:hover{transform:scale(var(--bag-hover-zoom))}
  .market:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
  .buy-float a:hover{transform:translateX(-4px) scale(1.08);border-color:rgba(212,170,79,.6)}
  .whatsapp-float:hover{transform:scale(1.1);box-shadow:0 14px 34px rgba(0,0,0,.45)}
}


/* =====================================================================
   14. TABLET LAYOUT (screens up to 1100 px)
   ===================================================================== */
@media(max-width:1100px){
  :root{--section-padding:90px}
  .intro-grid{gap:50px}
  .product-grid{gap:50px}
  .details-grid{gap:44px}
  .faq-grid,.contact-grid{gap:44px}
  .hero-inner{gap:20px}
  .hero-product{min-height:540px}
  .hero-product img{width:min(360px,70vw)}
  .nav{gap:18px}
}


/* =====================================================================
   15. PHONE LAYOUT (screens up to 900 px)
   ===================================================================== */
@media(max-width:900px){
  :root{--section-padding:76px}

  /* --- Menu becomes a button that opens a dropdown --- */
  .nav-toggle{display:none}
  .js .nav-toggle{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    padding:6px 4vw 18px;
    background:rgba(20,12,9,.97);
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:.82rem;
  }
  .js .nav:not(.is-open){display:none}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:1}
  .nav a:last-child{border-bottom:0}

  /* --- Two columns become one (with tighter gaps between the stacked parts) --- */
  .hero-inner,.intro-grid,.product-grid,.details-grid,.buy-inner,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .intro-grid{gap:22px}
  .product-grid{gap:34px}
  .details-grid{gap:36px}
  .buy-inner{gap:34px}
  .faq-grid{gap:22px}
  .contact-grid{gap:38px}

  /* Hero */
  .hero{padding-top:84px;padding-bottom:30px}
  .hero-copy{text-align:center;padding-top:2vh}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-product{min-height:0;padding:10px 0}
  .hero-product img{width:min(320px,68vw)}

  /* Our story */
  .story-stage{padding-bottom:86px}  /* keep clear of the floating Buy / WhatsApp buttons */
  .story-head,.pstep,.process-nav{padding-left:0}
  .story-head h2{font-size:clamp(2.1rem,9vw,3rem)}
  .pstep{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;align-content:start;padding:0}
  .pstep-media{order:-1;height:100%;max-height:none;width:100%;aspect-ratio:auto;justify-self:stretch;min-height:0}
  .pstep-media img{border-radius:0}
  .pstep-text{min-height:0}
  .pstep-count span{font-size:clamp(2.2rem,7vh,3.6rem)}
  .pstep h3{font-size:clamp(1.45rem,6.4vw,1.9rem);margin-bottom:10px}
  .pstep-tag{margin-bottom:12px}
  .pstep p{font-size:clamp(.85rem,2vh,.98rem);line-height:1.5}

  /* Section headings a bit smaller so they don't dominate */
  .display,.product-copy h2,.compare h2,.details-copy h2,.buy h2,.faq h2,.contact h2{
    font-size:clamp(2.5rem,9vw,4.2rem);
  }

  .compare-head{display:block}
  .compare p{margin-top:20px}
  .compare h2{max-width:none}
  .product-visual{order:-1}
  .back-image img{width:100%}

  /* Chart viewer: show the chart bigger than the screen so text is readable; swipe to look around */
  .lightbox-scroll{align-items:flex-start;justify-content:flex-start}
  .lightbox-scroll img{max-width:none;max-height:none;width:1100px;margin:0}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}

  /* Floating buttons: Buy at the bottom-right, WhatsApp at the bottom-left */
  .buy-float{
    top:auto;
    right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    transform:none;
    width:auto;
    padding:6px;
    border-radius:16px;
  }
  .buy-float-label,.buy-float-now{display:none}
  .buy-float-links{display:flex}
  .buy-float a{width:40px;height:40px;border-radius:11px}
  .whatsapp-float{right:auto;left:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
  /* Room at the very bottom so the floating buttons never cover the footer text */
  footer{padding-bottom:calc(28px + 78px)}
}

/* ---- Small phones (up to 600 px) ---- */
@media(max-width:600px){
  :root{--section-padding:64px}
  .container{width:min(100% - 36px,var(--container-width))}
  .hero-inner{width:min(100% - 36px,var(--container-width))}

  .hero h1{font-size:clamp(3rem,15vw,4.4rem);letter-spacing:-.035em}
  .hero p{font-size:.98rem}
  .display,.product-copy h2,.compare h2,.details-copy h2,.buy h2,.faq h2,.contact h2{
    font-size:clamp(2.2rem,10.5vw,3.2rem);letter-spacing:-.035em;
  }
  .eyebrow{font-size:.68rem;letter-spacing:.2em}

  .hero-actions .btn{flex:1 1 auto}
  .spec-grid{grid-template-columns:1fr 1fr}
  .spec{padding:14px}
  .spec span{font-size:1rem}
  .zoom-hint{right:16px;bottom:16px}
  .market{flex:1 1 calc(50% - 6px)}
  .form-row{grid-template-columns:1fr}
  .enquiry{padding:22px 18px}
  .faq-item summary{font-size:1.08rem}
  .faq-item p{padding-right:0}
  .contact-actions .btn{flex:1 1 100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:6px}
}


/* =====================================================================
   16. SPECIAL CASES
   ===================================================================== */
/* Phone turned sideways (short screens): tighter layout */
@media(max-height:520px){
  .hero{min-height:auto;padding-top:84px;padding-bottom:40px}
  .buy-float-label,.buy-float-now{display:none}
  .buy-float{padding:6px}
  .buy-float-links{gap:5px}
  .buy-float a{width:38px;height:38px}
}

/* People who set "reduce motion" on their device get no movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}


/* =====================================================================
   OUR STORY FALLBACK: no JavaScript, or "reduce motion" -> simple stacked list
   ===================================================================== */
/* Responsive process composition: generous photo area and readable copy. */
.story-stage > .container{width:92%;max-width:none}
.story-head h2{font-size:clamp(2.1rem,3.5vw,4.4rem);line-height:1.05;max-width:12ch}
.pstep-text{min-width:0;max-width:560px}
.pstep h3{font-size:clamp(1.6rem,2.6vw,3rem);line-height:1.12;overflow-wrap:break-word}
.pstep p{font-size:clamp(.95rem,1.15vw,1.15rem);line-height:1.65}
@media(min-width:901px){
  .story-stage > .process{position:absolute;inset:clamp(90px,12vh,116px) 4% 64px;width:auto;margin:0}
  .pstep{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;padding:0}
  .pstep-text{padding-top:100px}
  .pstep-media{width:100%;height:100%;align-self:stretch;justify-self:stretch}
  .story-head{pointer-events:none}
  .story-stage > .process-nav{margin-top:auto}
}
@media(max-width:900px){
  .story-stage{padding-top:80px;padding-bottom:84px}
  .story-head h2{max-width:none;font-size:clamp(1.8rem,4.5vw,2.8rem)}
  .pstep-text{max-width:none}
  .pstep h3{font-size:clamp(1.35rem,3.5vw,2rem);margin-bottom:8px}
  .pstep-count{margin-bottom:4px}
  .pstep-count span{font-size:clamp(2rem,5vh,3rem)}
  .pstep-tag{font-size:.62rem;padding:6px 10px;margin-bottom:8px;letter-spacing:.1em}
  .pstep p{font-size:clamp(.82rem,1.8vh,1rem);line-height:1.45}
}
@media(max-height:600px) and (max-width:900px){
  .story-stage{padding-top:64px;padding-bottom:60px}
  .pstep{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:20px}
  .pstep-media{order:0}
  .story-head h2{font-size:1.7rem}
}
html:not(.js) .story-track,.reduce-motion .story-track{height:auto}
html:not(.js) .story-stage > .process,.reduce-motion .story-stage > .process{position:relative;inset:auto;width:92%;margin:24px auto 0}
html:not(.js) .story-stage,.reduce-motion .story-stage{position:relative;height:auto;overflow:visible;padding-bottom:70px}
html:not(.js) .process,.reduce-motion .process{display:grid;gap:56px}
html:not(.js) .pstep,.reduce-motion .pstep{position:static;opacity:1;visibility:visible;transform:none}
html:not(.js) .pstep-media,.reduce-motion .pstep-media{height:auto;max-height:none;width:min(420px,100%)}
html:not(.js) .process-nav,.reduce-motion .process-nav{display:none}
@media(max-width:900px){
  html:not(.js) .pstep,.reduce-motion .pstep{grid-template-rows:auto auto}
}
.shop-heading{max-width:760px;margin-bottom:44px}.shop-heading h2,.shop-page h1{font:600 clamp(2.8rem,6vw,5rem)/1.05 var(--font-heading);margin:16px 0}.shop-heading p,.shop-page p{color:var(--muted);line-height:1.8}
.shop-products{display:grid;grid-template-columns:1fr 1fr;gap:32px}.rice-card{background:var(--paper2);padding:32px;border:1px solid var(--line);border-radius:20px}.rice-card img{height:360px;width:100%;object-fit:contain;display:block;margin-bottom:28px}.rice-card h3{font:600 2rem var(--font-heading);margin:12px 0}.rice-card p{line-height:1.7;color:var(--muted)}.rice-badge{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.shop-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.shop-controls label{display:grid;gap:7px;font-size:.85rem}.shop-controls select,.shop-controls input{padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit}.shop-controls input{width:84px}.shop-button{display:inline-block;padding:13px 22px;border:0;border-radius:8px;background:var(--wine);color:white;font:600 .9rem var(--font-body);cursor:pointer;text-decoration:none}.shop-button:disabled{opacity:.5;cursor:not-allowed}.shop-detail-link{display:inline-block;margin:12px 16px;color:var(--brown);text-underline-offset:5px}.shop-cart-toggle{position:fixed;top:88px;right:20px;z-index:90;background:var(--ink);box-shadow:0 6px 20px #0002}.shop-page{padding:80px 0;min-height:100vh;background:var(--paper);color:var(--ink)}.shop-page header{display:flex;justify-content:space-between;gap:20px;align-items:center}.shop-page a{color:var(--brown)}.rice-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px}.rice-detail>img{width:100%;max-height:660px;object-fit:contain}.rice-detail li{margin:12px 0;line-height:1.6}
.cart-dialog{width:min(580px,calc(100% - 32px));max-height:85vh;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink)}.cart-dialog::backdrop{background:#0009}.cart-header{display:flex;justify-content:space-between;align-items:center}.cart-close{font-size:1.8rem;border:0;background:none;cursor:pointer;color:inherit}.cart-item{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}.cart-item img{width:64px;height:90px;object-fit:contain}.cart-item h3{margin:0 0 6px;font-size:1rem}.cart-actions{display:flex;gap:10px;align-items:center;margin-top:12px}.cart-actions button{padding:7px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper2);color:inherit;cursor:pointer}.cart-note{color:var(--muted);font-size:.9rem;line-height:1.7}.shop-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);padding:14px 24px;background:var(--ink);color:white;border-radius:10px;z-index:120;box-shadow:0 8px 30px #0003}.shop-button:focus-visible,.cart-actions button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:700px){.shop-products,.rice-detail{grid-template-columns:1fr;gap:24px}.rice-card{padding:24px}.rice-card img{height:300px}.shop-cart-toggle{top:78px;right:12px}.shop-page{padding:32px 0}.rice-detail>img{max-height:430px}}
/* One shopping control; marketplace links remain in the Buy section. */
.buy-inner{grid-template-columns:1fr;gap:0}
.shop-page header{flex-direction:column;align-items:flex-start;gap:24px}
.rice-switcher{display:flex;flex-wrap:wrap;gap:10px}
.shop-page .rice-switcher a{display:block;padding:12px 22px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--brown);min-height:44px}
.shop-page .rice-switcher a[aria-current="page"]{background:var(--green);border-color:var(--green);color:white;font-weight:600}
.rice-switcher a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.rice-catalog{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.rice-catalog>h2{font:600 clamp(2rem,4vw,3rem) var(--font-heading);margin:12px 0 28px}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.shop-page .catalog-card{display:block;padding:28px;background:var(--paper2);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink)}
.catalog-card img{display:block;width:100%;height:240px;object-fit:contain;margin-bottom:24px}
.catalog-card h3{font:600 1.5rem var(--font-heading);margin:12px 0}
.catalog-card p{margin:0 0 16px}.catalog-action{color:var(--brown);font-weight:600;font-size:.9rem}
.shop-page .catalog-card[aria-current="page"]{border:2px solid var(--green);background:#3f563409}
.catalog-card[aria-current="page"] .catalog-action{color:var(--green)}
.catalog-card:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.product-catalog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start;margin-top:36px}
.product-catalog-layout .rice-catalog{margin:0;padding:0;border:0;position:sticky;top:24px}
.product-catalog-layout .rice-catalog>h2{font-size:1.7rem;margin:10px 0 20px}
.product-catalog-layout .catalog-grid{grid-template-columns:1fr;gap:14px}
.product-catalog-layout .catalog-card{padding:16px}
.product-catalog-layout .catalog-card img{height:140px;margin-bottom:16px}
.product-catalog-layout .catalog-card h3{font-size:1.15rem}
.product-catalog-layout .catalog-card p{font-size:.85rem;margin-bottom:10px}
.product-catalog-layout .rice-detail{margin-top:0;gap:32px;min-width:0}
.product-catalog-layout .rice-detail h1{font-size:clamp(2.3rem,4vw,4rem)}
.shop-page header>a:first-child{font:600 1.7rem var(--font-heading);color:var(--ink);text-decoration:none}
.product-catalog-layout .rice-catalog>.eyebrow{color:#947025;margin-bottom:22px;font-weight:700}
.catalog-name{font:600 1.15rem var(--font-heading)}
.product-catalog-layout .catalog-card{padding:18px;border-radius:10px}
@media(min-width:701px) and (max-width:1000px){
  .product-catalog-layout{grid-template-columns:170px minmax(0,1fr);gap:24px}
  .product-catalog-layout .rice-detail{grid-template-columns:1fr}
  .product-catalog-layout .rice-detail>img{max-height:360px}
}
@media(max-width:700px){
  .product-catalog-layout{grid-template-columns:1fr;gap:32px}
  .product-catalog-layout .rice-catalog{position:static}
  .product-catalog-layout .catalog-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
  .product-catalog-layout .catalog-card img{height:110px}
}
.buy-float{display:block;position:fixed;top:50%;right:18px;bottom:auto;transform:translateY(-50%);padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.buy-float .buy-float-label,.buy-float .buy-float-now{display:none}
.buy-float .buy-float-links{display:flex;flex-direction:column;gap:10px}
.buy-float a{width:48px;height:48px;border-radius:50%;box-shadow:0 5px 16px #0003;border:1px solid #ffffff30;overflow:hidden}
.shop-cart-toggle{top:auto;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));min-height:48px;border-radius:999px;padding:14px 24px;background:var(--wine);border:1px solid #ffffff30}
.whatsapp-float{left:24px;right:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:68px;height:68px}
.rice-card{display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.rice-card:hover{border-color:#d4aa4f88;box-shadow:0 14px 40px #7650370d}
.rice-card>form{margin-top:auto}.rice-card>form>.shop-button{width:100%;min-height:48px}
.shop-controls select,.shop-controls input{min-height:44px}.shop-controls select{min-width:130px}
.shop-detail-link{margin:18px 0 0;text-align:center}.shop-heading{margin-bottom:36px}
.cart-dialog{padding:28px;overscroll-behavior:contain}.cart-header{position:sticky;top:-28px;background:var(--paper);z-index:1;padding:8px 0}.cart-header h2{font:600 2rem var(--font-heading)}
.cart-actions button{min-width:44px;min-height:44px}.cart-dialog>.shop-button{width:100%;text-align:center;margin-top:10px}.cart-enquiry{background:var(--green)}.cart-browse{display:block;margin-top:18px;text-align:center;color:var(--brown);text-underline-offset:4px}
.cart-dialog [hidden]{display:none}
.rice-detail h2{font:600 1.6rem var(--font-heading);margin-top:32px}.rice-detail>img{filter:drop-shadow(0 18px 24px #17120f18)}
.shop-page header{padding-right:0;flex-wrap:wrap}.shop-page header a{font-size:.9rem;text-underline-offset:5px}.shop-page{padding-bottom:110px}
section[id]{scroll-margin-top:90px}.shop-toast{max-width:calc(100% - 32px);text-align:center;bottom:96px}
@media(max-width:700px){
  .shop-cart-toggle{top:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:12px 20px}
  .whatsapp-float{left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:64px;height:64px}
  .buy-float{right:10px}
  .buy-float a{width:42px;height:42px}
  .buy-float .buy-float-links{gap:8px}
  .rice-card img{height:280px}.rice-card h3{font-size:1.7rem}.shop-heading h2{font-size:2.8rem}
  .cart-dialog{padding:20px}.cart-header{top:-20px}.rice-detail{margin-top:30px}.rice-detail>img{max-height:360px}
  .shop-page h1{font-size:2.6rem}.footer{padding-bottom:100px}
}
@media(prefers-reduced-motion:reduce){.rice-card{transition:none}}
/* Keep information graphics at a readable size on wide displays. */
.js .story-track{height:auto}
.js .story-stage{position:relative;top:auto;height:100svh;min-height:600px}
.process-controls{width:92%;margin:12px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;flex:none;z-index:3}
.process-controls button{min-height:44px;padding:10px 18px;border:1px solid #f1d58a66;border-radius:999px;background:#17120fbb;color:var(--gold2);font:600 .8rem var(--font-body);cursor:pointer}
.process-controls button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.process-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.continuous-process .process{overflow:hidden}
.continuous-process .pstep,.continuous-process .pstep.is-active{opacity:1;visibility:visible;transition:none;will-change:transform}
.js .story-stage>.process-nav{margin-top:12px}
@media(min-width:901px){.js .story-stage>.process{bottom:136px}.js .process-controls{margin-top:auto}}
@media(max-width:900px){.js .story-stage{min-height:620px;padding-bottom:100px}.process-controls{gap:8px}.process-controls button{padding:10px 14px}}
@media(max-width:900px){
  .story-stage{padding-top:78px;padding-bottom:94px}
  .story-stage > .container{width:calc(100% - 36px)}
  .story-head h2{font-size:clamp(1.65rem,6.8vw,2.2rem);line-height:1.1}
  .story-head .eyebrow{font-size:.62rem;margin-bottom:6px}
  .story-stage .process{margin-top:14px}
  .story-stage .pstep{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:0}
  .story-stage .pstep-media{order:-1;display:flex;justify-content:center;width:100%;height:100%;min-height:0;max-height:100%;overflow:hidden}
  .story-stage .pstep-media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:0}
  .story-stage .pstep-media{align-items:center}
  .story-stage .pstep-text{padding:0;max-width:none}
  .story-stage .pstep-count{margin-bottom:4px}
  .story-stage .pstep-count span{font-size:clamp(1.7rem,4.6svh,2.5rem)}
  .story-stage .pstep h3{font-size:clamp(1.2rem,5vw,1.65rem);line-height:1.15;margin-bottom:7px}
  .story-stage .pstep-tag{font-size:.57rem;letter-spacing:.08em;padding:5px 9px;margin-bottom:7px}
  .story-stage .pstep p{font-size:.86rem;line-height:1.45}
  .story-stage .process-nav{margin-top:12px;gap:6px}
  .story-stage .pdot{flex:1 1 0;min-width:0}
  .story-stage .pdot.is-active{flex:1.6 1 0}
}
.compare{padding-top:clamp(44px,6vw,80px)}
.compare > .container,.package-details > .details-grid{width:min(1240px,92%)}
.compare-head{width:100%;align-items:center;gap:36px;margin-bottom:24px}
.compare h2{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.08;max-width:none;letter-spacing:-.035em}
.compare-head p{font-size:1rem;line-height:1.7;margin:0;max-width:460px}
.compare-frame{max-width:1120px;margin-inline:auto}
.compare-frame img{object-fit:contain;width:100%;height:auto}
.package-details{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(36px,4vw,56px)}
.package-details .details-grid{gap:24px}
.details-copy{width:100%;max-width:none}
.details-copy h2{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.08;letter-spacing:-.035em}
.details-copy p{max-width:780px;font-size:1rem;line-height:1.7}
.back-image{width:100%;max-width:1120px;margin-inline:auto}
.back-image img{width:100%;height:auto;object-fit:contain}
@media(max-width:700px){
  .compare > .container,.package-details > .details-grid{width:100%}
  .compare-head,.details-copy{width:calc(100% - 36px);margin-inline:auto}
  .compare-head{display:block;margin-bottom:20px}
  .compare-head p{margin-top:16px}
  .compare h2 br{display:none}
  .compare-head .eyebrow,.details-copy .eyebrow{font-size:.65rem}
  .compare .zoom-hint{right:12px;bottom:12px;font-size:.58rem;padding:8px 10px}
}

#checkout-form{display:grid;gap:12px}#checkout-form label{display:grid;gap:5px}#checkout-form input,#checkout-form textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #b9aa94;border-radius:6px;font:inherit} [data-payment-status]{overflow-wrap:anywhere}