/*
Theme Name: field theme
Description: 1:1 port of the field.ae static design — colors, fonts, layout identical to the original.
Author: field (ported)
Version: 1.0.0
Text Domain: field
*/

  :root{
    --bg:#FAF3EB;
    --bg-accent:#F1E3D2;
    --surface:#FFFFFF;
    --surface-2:#F1E7DA;
    --ink:#0E3316;
    --ink-soft:#3E5B44;
    --ink-faint:#8B9A8E;
    --line:#E5DACB;
    --line-strong:#D2C3AC;
    --accent:#0E3316;
    --accent-ink:#F8F0E8;
    --rose:#C98D8A;
    --rose-soft:#F1DEDC;
    --gold:#BB9A57;
    --gold-soft:#ECE0C6;
    --select-bg:#D9C38F;
    --slate:#7F9098;
    --danger:#A6432B;
    --shadow: 0 18px 40px -24px rgba(14,51,22,0.35);
    --font-display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
    --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
    --radius: 3px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0E1B12;
      --bg-accent:#1B3322;
      --surface:#152A1B;
      --surface-2:#1B3322;
      --ink:#F1ECDC;
      --ink-soft:#C3D0C6;
      --ink-faint:#7F9186;
      --line:#2C4030;
      --line-strong:#3A5540;
      --accent:#D7E4D8;
      --accent-ink:#0E1B12;
      --rose:#D9A6A3;
      --rose-soft:#3A2624;
      --gold:#D6BD86;
      --gold-soft:#3A3223;
      --select-bg:#6B5A3A;
      --slate:#93A4AC;
      --danger:#E39179;
      --shadow: 0 18px 40px -20px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0E1B12; --bg-accent:#1B3322; --surface:#152A1B; --surface-2:#1B3322;
    --ink:#F1ECDC; --ink-soft:#C3D0C6; --ink-faint:#7F9186;
    --line:#2C4030; --line-strong:#3A5540;
    --accent:#D7E4D8; --accent-ink:#0E1B12;
    --rose:#D9A6A3; --rose-soft:#3A2624; --gold:#D6BD86; --gold-soft:#3A3223; --select-bg:#6B5A3A; --slate:#93A4AC;
    --danger:#E39179; --shadow: 0 18px 40px -20px rgba(0,0,0,0.55);
  }

  *{ box-sizing:border-box; }
  body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.5; }
  h1,h2,h3,.display{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.015em; text-wrap:balance; color:var(--ink); }
  .eyebrow{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:14px; letter-spacing:0.01em; text-transform:none; color:var(--ink-soft); }
  button{ font-family:var(--font-body); cursor:pointer; }
  input,select,textarea{ font-family:var(--font-body); }
  .num{ font-variant-numeric: tabular-nums; }
  a{ color:inherit; }
  ::selection{ background:var(--select-bg); }
  img{ display:block; max-width:100%; }

  .wrap{ max-width:1180px; margin:0 auto; padding-inline:24px; }

  /* ---------- header ---------- */
  .site-header{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--bg-accent); }
  .header-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; row-gap:6px; padding-block:13px; }
  .header-left{ display:flex; align-items:center; justify-self:start; }
  .header-right{ display:flex; align-items:center; gap:14px; justify-self:end; }
  .brand{ display:flex; align-items:center; justify-self:center; cursor:pointer; }
  .brand img.wordmark{ height:40px; width:auto; flex:none; object-fit:contain; }
  .nav-left, .nav-right{ display:none; }
  .nav-links{ display:none; }
  .nav-left button, .nav-right button, .nav-links button{ background:none; border:none; padding:0; color:var(--ink-soft); font-size:14px; letter-spacing:0.01em; border-bottom:1px solid transparent; font-family:var(--font-display); font-style:italic; font-weight:400; }
  .nav-left button:hover, .nav-right button:hover, .nav-links button:hover{ color:var(--ink); border-bottom-color:var(--rose); }
  .header-ornament-row{ display:none; }
  .menu-btn{ display:flex; background:none; border:none; padding:6px; width:34px; height:34px; align-items:center; justify-content:center; flex-direction:column; gap:4px; flex:none; }
  .menu-btn span{ display:block; width:18px; height:1.5px; background:var(--ink); }
  @media (min-width:861px){
    .menu-btn{ display:none; }
    .nav-left{ display:flex; gap:26px; }
    .nav-right{ display:flex; gap:26px; }
    .header-right{ gap:26px; }
    .brand img.wordmark{ height:56px; }
    .header-ornament-row{ display:flex; align-items:center; grid-column:1 / -1; gap:10px; padding-bottom:4px; color:var(--ink-soft); }
    .header-ornament-row .orn-line{ flex:1; height:1px; background:currentColor; opacity:0.5; }
    .header-ornament-row .orn-diamond{ flex:none; width:8px; height:8px; border:1px solid currentColor; opacity:0.5; transform:rotate(45deg); margin:6px; }
  }
  .cart-btn{ position:relative; display:flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); border:none; padding:10px 16px; border-radius:var(--radius); font-size:13px; font-weight:600; letter-spacing:0.02em; }
  .cart-btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .cart-count{ background:var(--rose); color:#3A1A18; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; position:absolute; top:-6px; right:-6px; }

  /* ---------- buttons ---------- */
  .btn{ border:none; padding:13px 22px; border-radius:var(--radius); font-size:14px; font-weight:600; letter-spacing:0.01em; }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ opacity:0.92; }
  .btn-primary:disabled{ opacity:0.4; cursor:default; }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
  .btn-ghost:hover{ border-color:var(--ink); }

  /* ---------- signature carousel (hero) ---------- */
  .signature-hero{ padding-top:26px; }
  .signature-head{ margin-bottom:14px; }
  .signature-head h1{ font-size:clamp(22px,3vw,32px); margin:6px 0 0; }
  .carousel{ position:relative; }
  .carousel-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--radius); }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .carousel-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; aspect-ratio:16/9; background:var(--surface-2); }
  .carousel-slide img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .carousel-caption{ position:absolute; left:0; right:0; bottom:0; padding-block:24px 18px; background:linear-gradient(to top, rgba(9,32,14,0.78), rgba(9,32,14,0) 75%); }
  .carousel-caption-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding-inline:18px; max-width:1180px; margin-inline:auto; }
  .carousel-caption .eyebrow{ color:#E7D9B8; }
  .carousel-caption h3{ color:#fff; font-size:clamp(19px,2.6vw,26px); margin:4px 0 5px; }
  .carousel-caption p{ color:rgba(255,255,255,0.82); font-size:12.5px; max-width:40ch; margin:0; }
  .carousel-buy{ display:flex; align-items:center; gap:12px; }
  .carousel-price{ font-family:var(--font-display); font-size:18px; color:#fff; white-space:nowrap; }
  .carousel-price .price-was{ color:rgba(255,255,255,0.6); }
  .stepper-light{ border:1px solid rgba(255,255,255,0.5); border-radius:var(--radius); display:flex; align-items:center; overflow:hidden; }
  .stepper-light button{ background:rgba(255,255,255,0.14); color:#fff; border:none; width:28px; height:28px; font-size:15px; }
  .stepper-light button:disabled{ opacity:0.35; }
  .stepper-light .qty{ width:26px; text-align:center; font-size:12.5px; color:#fff; }
  .carousel-dots{ display:flex; justify-content:center; gap:7px; margin-top:12px; }
  .dot{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); border:none; padding:0; }
  .dot.active{ background:var(--accent); width:20px; border-radius:4px; transition:width 0.2s ease; }
  .carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.88); border:none; width:36px; height:36px; border-radius:50%; font-size:19px; color:var(--ink); display:flex; align-items:center; justify-content:center; }
  .carousel-arrow.left{ left:14px; }
  .carousel-arrow.right{ right:14px; }

  /* ---------- bunch hero (top, primary) ---------- */
  .bunch-hero{ padding-block:2px 12px; background:var(--bg-accent); }
  .bunch-hero-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:56px; align-items:start; }
  .bunch-hero-grid h1{ font-size:clamp(29px,9.1vw,39px); line-height:1.1; margin:8px 0 0; font-weight:350; }
  .bunch-hero-grid .lead{ font-size:13.5px; color:var(--ink-soft); max-width:46ch; margin:14px 0 20px; }
  .bunch-hero-grid h1 .line1{ font-family:'Lora', var(--font-display); font-weight:500; }
  .bunch-hero-grid h1 em{ font-family:'Lora', var(--font-display); font-style:italic; font-weight:400; opacity:0.8; display:inline-block; transform:skewX(-7deg); }
  .hero-break{ display:none; }
  @media (min-width:861px){
    .bunch-hero .wrap.bunch-hero-grid{ max-width:1220px; padding-inline:90px; }
    .bunch-hero{ padding-block:44px 56px; }
    .bunch-hero-grid{ grid-template-columns:1fr 380px; gap:80px; }
    .bunch-hero-grid h1{ font-size:72px; line-height:0.98; margin:18px 0 0; max-width:620px; font-weight:400; }
    .bunch-hero-grid .lead{ font-size:14.5px; line-height:1.5; max-width:460px; margin:18px 0 0; }
    .bunch-hero-grid .hero-ctas{ margin-top:22px; }
    .bunch-hero-grid .carousel.portrait{ width:380px; max-width:380px; height:400px; margin-left:0; }
    .bunch-hero-grid .carousel.portrait .carousel-track{ height:100%; }
    .bunch-hero-grid .carousel.portrait .carousel-slide{ aspect-ratio:unset; height:100%; }
    .hero-break{ display:block; }
  }
  .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
  .carousel.portrait{ border-radius:var(--radius); overflow:hidden; max-width:272px; margin-left:auto; }
  .carousel.portrait .carousel-slide{ aspect-ratio:4/5; }
  .carousel.portrait .carousel-caption{ padding-block:16px 14px; }
  .carousel.portrait .carousel-caption-inner{ padding-inline:14px; gap:8px; }
  .carousel.portrait .carousel-caption .eyebrow{ font-size:11px; }
  .carousel.portrait .carousel-caption h3{ font-size:17px; margin:3px 0 3px; }
  .carousel.portrait .carousel-caption p{ font-size:11px; }
  .carousel.portrait .carousel-price{ font-size:15px; }
  .carousel.portrait .stepper-light button{ width:24px; height:24px; font-size:13px; }
  .carousel.portrait .stepper-light .qty{ width:22px; font-size:11px; }

  /* ---------- section heads ---------- */
  .mode-section{ padding-block:48px 8px; }
  #bunches.mode-section{ padding-block:20px 8px; }
  #bunches .section-head{ margin-bottom:12px; }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
  .section-head h2{ font-size:25px; margin-top:6px; }

  /* ---------- category filter chips ---------- */
  .filter-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:18px; scrollbar-width:none; }
  .filter-row::-webkit-scrollbar{ display:none; }
  .filter-row{ padding-right:36px; scroll-padding-inline:12px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); }
  .filter-chip{ flex:none; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:20px; white-space:nowrap; }
  .filter-chip[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .filter-search-btn{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; padding:0; }
  .filter-search-btn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .filter-search-btn svg{ width:15px; height:15px; }
  .filter-bar{ display:flex; align-items:flex-start; gap:8px; }
  .search-bar{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line-strong); border-radius:20px; padding:9px 15px; margin:2px 0 18px; }
  .search-bar svg{ width:15px; height:15px; color:var(--ink-faint); flex:none; }
  .search-bar input{ flex:1; min-width:0; border:none; background:none; outline:none; font-size:13px; color:var(--ink); font-family:var(--font-body); }
  .search-bar input::placeholder{ color:var(--ink-faint); }
  .search-clear{ background:none; border:none; color:var(--ink-faint); font-size:16px; line-height:1; padding:0 2px; flex:none; }

  /* ---------- product grid ---------- */
  .prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:26px; }
  .prod-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
  .prod-photo{ aspect-ratio:4/5; background:var(--surface-2); display:flex; align-items:center; justify-content:center; position:relative; }
  .prod-photo img{ width:100%; height:100%; object-fit:cover; }
  .prod-photo .swatch-big{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(0,0,0,0.1); }
  .prod-body{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:9px; }
  .prod-cat{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rose); font-weight:600; }
  .prod-name{ font-size:13.5px; font-weight:600; line-height:1.3; }
  .prod-meta{ font-size:11.5px; color:var(--ink-faint); }
  .prod-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
  .prod-price{ font-family:var(--font-display); font-size:17px; }
  .prod-price small{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-faint); }
  .prod-tier-note{ font-size:10.5px; color:var(--gold); margin-top:-4px; }

  /* ---------- badges (bestseller / discount / new) ---------- */
  .badge-pill{ position:absolute; top:10px; left:10px; z-index:2; font-size:13px; font-weight:700; letter-spacing:0.03em; padding:7px 14px; border-radius:20px; color:#fff; background:var(--ink); }
  .badge-bestseller{ background:var(--gold); color:var(--ink); }
  .badge--20pct,.badge-pill[class*="pct"]{ background:var(--rose); color:#fff; }
  .badge-new{ background:var(--accent); color:var(--accent-ink); }
  .price-was{ font-family:var(--font-body); font-size:11px; color:var(--ink-faint); text-decoration:line-through; margin-left:6px; }
  .stepper{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; }
  .stepper button{ background:var(--surface-2); border:none; width:28px; height:28px; font-size:15px; color:var(--ink); }
  .stepper button:disabled{ opacity:0.35; cursor:default; }
  .stepper .qty{ width:26px; text-align:center; font-size:12.5px; }

  /* ---------- signature grid ---------- */
  .kit-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
  .kit-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
  .kit-photo{ background:var(--surface-2); }
  .kit-photo img{ width:100%; height:auto; display:block; }
  .kit-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; }
  .kit-tag{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); font-weight:600; }
  .kit-name{ font-family:var(--font-display); font-size:19px; }
  .kit-desc{ font-size:13px; color:var(--ink-soft); margin:0; }
  .kit-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
  .kit-price{ font-family:var(--font-display); font-size:18px; }

  /* ---------- cart drawer ---------- */
  .scrim{ position:fixed; inset:0; background:rgba(14,51,22,0.4); z-index:49; opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
  .scrim.open{ opacity:1; pointer-events:auto; }
  .drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,100vw); z-index:50; background:var(--surface); border-left:1px solid var(--line); transform:translateX(100%); transition:transform 0.28s ease; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
  .drawer.open{ transform:translateX(0); }
  .drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }
  .drawer-head h3{ font-size:18px; }
  .icon-btn{ background:none; border:none; font-size:20px; color:var(--ink-soft); line-height:1; padding:4px; }
  .drawer-body{ flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
  .drawer-empty{ color:var(--ink-faint); font-size:13.5px; padding:40px 0; text-align:center; }
  .line-item{ display:flex; gap:10px; align-items:center; }
  .line-item .li-thumb{ width:34px; height:34px; border-radius:6px; object-fit:cover; flex:none; }
  .line-item .swatch{ width:20px; height:20px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,0.12); }
  .line-item .li-name{ font-size:13px; font-weight:600; flex:1; }
  .li-qty-note{ font-size:11px; color:var(--ink-faint); }
  .line-item .li-price{ font-size:12.5px; color:var(--ink-faint); }
  .li-remove{ background:none; border:none; color:var(--ink-faint); font-size:16px; padding:2px 4px; }
  .li-remove:hover{ color:var(--danger); }
  .freq-row{ border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
  .freq-row label{ font-size:12px; color:var(--ink-faint); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
  .freq-row select{ padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-size:13.5px; }
  .cross-sell{ border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
  .cross-sell-label{ font-size:12px; color:var(--ink-faint); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
  .cross-sell-items{ display:flex; flex-direction:column; gap:10px; }
  .cross-sell-item{ display:flex; gap:10px; align-items:center; }
  .cross-sell-item .li-thumb{ width:34px; height:34px; border-radius:6px; object-fit:cover; flex:none; }
  .cross-sell-item .swatch{ width:20px; height:20px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,0.12); }
  .cross-sell-name{ font-size:13px; flex:1; }
  .cross-sell-price{ font-size:12.5px; color:var(--ink-faint); }
  .cross-sell-add{ background:none; border:1px solid var(--line-strong); color:var(--ink); width:26px; height:26px; border-radius:50%; font-size:15px; flex:none; display:flex; align-items:center; justify-content:center; }
  .cross-sell-add:hover{ border-color:var(--ink); }
  .drawer-foot{ border-top:1px solid var(--line); padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
  .subtotal-row{ display:flex; justify-content:space-between; font-size:15px; font-weight:600; }
  .subtotal-row.promo-line{ font-size:13px; font-weight:500; color:var(--rose); }

  /* ---------- promo code ---------- */
  .promo-row{ border-top:1px solid var(--line); padding:14px 20px 0; display:flex; flex-direction:column; gap:6px; }
  .promo-input-row{ display:flex; gap:8px; }
  .promo-input-row input{ flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-size:13px; }
  .promo-input-row input:disabled{ opacity:0.6; }
  .promo-btn{ flex:none; padding:10px 16px; font-size:12.5px; }
  .promo-msg{ font-size:11.5px; color:var(--danger); }
  .promo-msg-ok{ color:var(--ink-soft); }

  /* ---------- checkout form ---------- */
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:11.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint); }
  .field input, .field select, .field textarea{ padding:11px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-size:13.5px; }
  .field textarea{ resize:vertical; min-height:60px; }
  .form-grid{ display:flex; flex-direction:column; gap:14px; }
  .field-row{ display:flex; gap:14px; }
  .field-row .field{ flex:1; min-width:0; }
  @media (max-width:420px){ .field-row{ flex-direction:column; } }
  .confirm-box{ text-align:center; padding:30px 10px 10px; display:flex; flex-direction:column; gap:14px; align-items:center; width:100%; }
  .confirm-box .mark{ width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:22px; }
  .confirm-title{ font-family:var(--font-display); font-size:clamp(28px,8vw,34px); margin:0; }

  .receipt{ width:100%; display:flex; flex-direction:column; }
  .receipt-row{ display:flex; align-items:flex-start; gap:12px; padding:16px 2px; text-align:left; }
  .receipt-icon{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink); }
  .receipt-icon svg{ width:15px; height:15px; }
  .receipt-vline{ width:1px; align-self:stretch; background:var(--line); flex:none; }
  .receipt-row-content{ flex:1; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
  .receipt-row-title{ font-weight:700; color:var(--ink); font-size:15px; margin-bottom:3px; }
  .receipt-divider{ height:1px; background:var(--line); width:100%; }
  .receipt-divider-full{ margin-top:4px; }
  .receipt-footnote{ font-size:13px; color:var(--ink-soft); padding:16px 2px 2px; margin:0; text-align:center; }
  .back-link{ background:none; border:none; color:var(--ink-soft); font-size:12.5px; text-align:left; padding:0; text-decoration:underline; text-underline-offset:3px; }

  /* ---------- how it works ---------- */
  .how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .how-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
  .how-card .eyebrow{ color:var(--gold); }
  .how-card h3{ font-size:17px; margin:8px 0 6px; }
  .how-card p{ font-size:13px; color:var(--ink-soft); }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--line); margin-top:64px; padding-block:32px; }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
  .footer-brand{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:13px; }
  .footer-contact a{ color:var(--ink-soft); border-bottom:1px solid transparent; }
  .footer-contact a:hover{ color:var(--ink); border-bottom-color:var(--rose); }
  .footer-note{ font-size:11.5px; color:var(--ink-faint); }
  .footer-logo{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:18px; }
  .footer-logo img.wordmark{ height:30px; width:auto; flex:none; object-fit:contain; }
  .footer-tagline{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:13px; letter-spacing:0.01em; color:var(--ink-soft); }
  .footer-social-row{ display:flex; align-items:center; gap:14px; margin-top:4px; }
  .footer-social{ display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:color 0.15s ease; }
  .footer-social:hover{ color:var(--ink); }
  .footer-social svg{ width:18px; height:18px; display:block; }

  @media (max-width:860px){
    .how-grid{ grid-template-columns:1fr; }
    .menu-btn{ display:flex; }
    .nav-links{ display:none; }
    .nav-links.open{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--bg); border-bottom:1px solid var(--line);
      padding:6px 24px 14px;
    }
    .nav-links.open button{ padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; width:100%; text-align:left; }
    .nav-links.open button:last-child{ border-bottom:none; }
    .drawer{ width:100vw; }
    .carousel-arrow{ display:none; }
    .carousel-slide{ aspect-ratio:4/5; }
    .bunch-hero-grid{ grid-template-columns:1fr; gap:26px; }
    .carousel.portrait{ max-width:100%; margin-left:0; }
    .carousel.portrait .carousel-track{ gap:10px; }
    .carousel.portrait .carousel-slide{ flex:0 0 calc(50% - 5px); scroll-snap-align:start; }
    .carousel.portrait .carousel-caption{ padding-block:8px 8px; }
    .carousel.portrait .carousel-caption-inner{ flex-direction:column; align-items:flex-start; gap:4px; padding-inline:8px; }
    .carousel.portrait .carousel-caption .eyebrow{ display:none; }
    .carousel.portrait .carousel-caption p{ display:none; }
    .carousel.portrait .carousel-caption h3{ font-size:12.5px; margin:0; }
    .carousel.portrait .carousel-price{ font-size:12.5px; }
    .carousel.portrait .stepper-light button{ width:22px; height:22px; font-size:12px; }
    .carousel.portrait .stepper-light .qty{ width:18px; font-size:11px; }
    .carousel.portrait .carousel-buy{ gap:6px; }

    /* main catalog grid: 2 cards per row on mobile, matching the top carousel */
    .prod-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .prod-body{ padding:9px 10px 11px; gap:6px; }
    .prod-cat{ font-size:9.5px; }
    .prod-name{ font-size:12px; }
    .prod-meta{ font-size:10.5px; }
    .prod-bottom{ flex-wrap:wrap; row-gap:6px; }
    .prod-price{ font-size:14px; white-space:nowrap; }
    .prod-price small{ font-size:9.5px; }
    .price-was{ font-size:9.5px; display:block; margin-left:0; margin-top:1px; }
    .prod-tier-note{ font-size:9.5px; }
    .stepper button{ width:24px; height:24px; font-size:13px; }
    .stepper .qty{ width:20px; font-size:11px; }
    .badge-pill{ top:6px; left:6px; font-size:10.5px; padding:5px 10px; }

    /* iOS Safari auto-zooms the page when a focused input's font-size is under 16px —
       bump form fields to 16px on mobile only, so desktop sizing is untouched. */
    .field input, .field select, .field textarea,
    .freq-row select, .promo-input-row input, .search-bar input{ font-size:16px; }
  }

  /* dark-mode fix: carousel arrows readable (zip bug: cream glyph on white chip) */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .carousel-arrow{ background:rgba(14,27,18,0.72); color:#F1ECDC; }
  }
  :root[data-theme="dark"] .carousel-arrow{ background:rgba(14,27,18,0.72); color:#F1ECDC; }

  /* product cards link to the server-rendered detail page */
  .prod-link{ color:inherit; text-decoration:none; display:block; }
  .prod-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  /* product detail page layout (classes reused from the catalog) */
  .detail-back{ display:inline-block; margin:18px 0 4px; font-size:13px; color:var(--ink-faint); text-decoration:none; }
  .detail-back:hover{ color:var(--ink); }
  .product-detail{ display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:42px; align-items:start; padding-bottom:90px; }
  .product-detail .prod-photo{ border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; }
  .detail-eyebrow{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rose); font-weight:600; }
  .detail-name{ font-family:var(--font-display); font-size:32px; line-height:1.12; margin:10px 0 14px; }
  .detail-price-row{ margin:0 0 18px; }
  .detail-specs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
  .spec-chip{ font-size:11.5px; border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--ink-soft); }
  .detail-desc{ font-size:14px; line-height:1.65; color:var(--ink-soft); max-width:60ch; }
  .detail-desc p{ margin:0 0 12px; }
  /* add-to-cart row on the detail page: stepper + button (template's own JS writes field-cart-v2) */
  .detail-order{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
  .product-detail .btn{ display:inline-block; text-decoration:none; }
  .detail-cart{ margin-top:22px; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; max-width:520px; }
  .detail-cart-head{ font-size:15px; font-weight:600; margin:0 0 6px; }
  .detail-cart-line{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14px; padding:7px 0; border-top:1px solid var(--line); }
  .detail-cart-line:first-of-type{ border-top:0; }
  .detail-cart-name{ flex:1; }
  .detail-cart-step{ display:inline-flex; align-items:center; gap:2px; flex:none; }
  .detail-cart-qbtn{ background:none; border:0; color:var(--ink-faint); font-size:13px; line-height:1; padding:2px 5px; cursor:pointer; }
  .detail-cart-qbtn:hover:not(:disabled){ color:var(--ink); }
  .detail-cart-qbtn:disabled{ opacity:.35; cursor:default; }
  .detail-cart-remove{ background:none; border:0; padding:0; font-size:12.5px; color:var(--ink-faint); text-decoration:underline; cursor:pointer; }
  .detail-cart-remove:hover{ color:var(--danger); }
  .detail-cart-total{ display:flex; justify-content:space-between; font-size:14.5px; font-weight:600; padding-top:10px; margin-top:4px; border-top:1px solid var(--ink-faint); }
  .detail-cart-cta{ margin-top:12px; }
  /* 404.php: notice above the fold, theme's own classes */
  .notfound{ padding:56px 0 32px; }
  .notfound .btn{ display:inline-block; text-decoration:none; margin-top:14px; }
  /* hero caption: title block always on top, price+stepper always under it
     (the locked row layout wrapped/unwrapped as the price text grew with qty -- jumping rows) */
  .carousel.portrait .carousel-caption-inner{ flex-direction:column; align-items:flex-start; }
  @media (max-width:860px){
    .product-detail{ grid-template-columns:1fr; gap:22px; }
    .detail-name{ font-size:26px; }
  }

  /* qty stepper: the number is a typed field (select-all on focus), same look as the span */
  input.qty{ border:0; background:transparent; padding:0; color:inherit; }
  input.qty:focus{ outline:none; }
  /* overflow:hidden (locked rule, for corner-clipping the old span layout) clips the
     focus rings of the typed input and the buttons -- a11y win, and the radius is 3px
     so the unclipped corner pixels are invisible */
  .stepper{ overflow:visible; }
  .stepper-light{ overflow:visible; }
  /* drawer cart lines: small -/+ steppers (bump removes at qty<=0, minus disabled at 1) */
  .li-qty{ display:inline-flex; align-items:center; gap:2px; flex:none; }
  .li-qbtn{ background:none; border:0; color:var(--ink-faint); font-size:13px; line-height:1; padding:2px 5px; cursor:pointer; }
  .li-qbtn:hover:not(:disabled){ color:var(--ink); }
  .li-qbtn:disabled{ opacity:.35; cursor:default; }
  .li-qnum{ font-size:12.5px; min-width:16px; text-align:center; }
  /* share cart: quiet text link in the drawer foot, gold while "Link copied" shows */
  .share-cart{ display:block; width:100%; margin:10px 0 0; background:none; border:0; padding:0; font-size:12.5px; color:var(--ink-faint); text-decoration:underline; cursor:pointer; }
  .share-cart:hover{ color:var(--ink); }
  .share-cart:disabled{ color:var(--gold); text-decoration:none; cursor:default; }
  /* product-page mini-cart uses the same pattern (detail-cart-remove look + spacing) */
  .detail-cart-share{ display:block; margin-top:10px; }
  /* hero carousel: image + title link to the product page, like catalog cards */
  .carousel-slide a.prod-link{ display:block; height:100%; }

  /* checkout: privacy consent + honeypot */
  .field-consent{ border:0; padding:0; }
  .consent-label{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--ink-soft); text-transform:none; letter-spacing:0; font-weight:400; cursor:pointer; }
  .consent-label input{ width:16px; height:16px; margin:2px 0 0; accent-color:var(--rose); flex:none; }
  .consent-label a{ text-decoration:underline; text-underline-offset:2px; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  /* category chips: swipeable row + control bar at all widths */
  .chip-carousel{ position:relative; }
  .filter-row{ position:relative; }  /* så offsetLeft regnes fra raden */
  .chip-control{ display:flex; align-items:center; justify-content:center; gap:10px; padding-top:4px; }
  .chip-arrow{ width:36px; height:36px; padding:0; border:0; background:none; color:var(--ink);
    opacity:.5; display:flex; align-items:center; justify-content:center;
    font-size:20px; line-height:1; cursor:pointer; }
  .chip-arrow:disabled{ opacity:.18; cursor:default; }
  .chip-arrow:not(:disabled):hover{ opacity:.85; }
  .chip-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
  .chip-dots{ display:flex; align-items:center; gap:6px; }
  .chip-dot{ width:7px; height:7px; border-radius:50%; padding:0; border:0; cursor:pointer;
    background:var(--line-strong); opacity:.4; transition:opacity .15s; }
  .chip-dot[aria-current="true"]{ opacity:1; background:var(--ink); }
  .chip-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  @media (max-width:860px){
    .chip-dot{ width:5px; height:5px; }
    .chip-dots{ gap:4px; }
  }