/* Self-hosted Open Sans (latin variable, 400–800) one file, no third-party origin */
    @font-face{
      font-family:"Open Sans";
      font-style:normal;
      font-weight:400 800;
      font-display:swap;
      src:url(/assets/fonts/open-sans-latin.woff2) format("woff2");
      unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
    }
    h1,h2,h3,h4,p,ul,figure{margin:0}
    .section-head{text-align:center;max-width:46rem;margin:0 auto clamp(1.5rem,3vw,2.5rem)}
    .section-head h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.2;color:var(--green-900);font-weight:800}
    .section-head h2 b{color:var(--red);font-weight:inherit}
    .section-head p{color:var(--muted);margin-top:.6rem}
    .eyebrow{display:inline-block;color:var(--green-700);font-weight:700;letter-spacing:.08em;
      text-transform:uppercase;font-size:.8125rem;margin-bottom:.5rem}

    /* ---------- Breadcrumb strip ---------- */
    .crumb-strip{background:linear-gradient(180deg,var(--cream) 0%,#fdfbf6 100%);border-bottom:1px solid var(--line)}
    .crumb-strip .wrap{padding-block:.9rem}
    .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;font-size:.85rem;color:var(--muted)}
    .breadcrumb a{color:var(--green-700);font-weight:600}
    .breadcrumb a:hover{color:var(--red)}
    .breadcrumb svg{width:1em;height:1em;color:var(--line)}
    .breadcrumb [aria-current]{color:var(--ink);font-weight:600}

    /* ---------- Product detail layout ---------- */
    .pdp{padding-block:clamp(1.75rem,3.5vw,2.75rem)}
    .pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.25rem);align-items:start}

    /* Gallery */
    .gallery{position:sticky;top:6rem;display:grid;grid-template-columns:84px 1fr;gap:1rem}
    .gallery-thumbs{display:flex;flex-direction:column;gap:.7rem}
    .gallery-thumbs button{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--cream);
      padding:0;transition:border-color .2s,transform .2s}
    .gallery-thumbs button img{aspect-ratio:1;object-fit:cover;width:100%}
    .gallery-thumbs button:hover{transform:translateY(-2px)}
    .gallery-thumbs button.is-active{border-color:var(--green-600);box-shadow:0 0 0 2px rgba(47,158,68,.18)}
    .gallery-main{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
      background:var(--cream);box-shadow:var(--shadow)}
    .gallery-main img{width:100%;aspect-ratio:1/1;object-fit:cover}
    .gallery-badges{position:absolute;top:1rem;left:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:2}
    /* The button is `gallery-wish wish-btn`; .wish-btn (the product-card heart) is defined
       further down and pins itself top-LEFT, which landed it on top of the "100% Pure"
       badge. An over-constrained abs-positioned box resolves in favour of `left`, so
       `right` alone was being ignored — reset it and out-specify the card rule here. */
    .gallery-main .gallery-wish{top:1rem;right:1rem;left:auto;width:2.6rem;height:2.6rem;z-index:4}
    .gbadge{font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:.4rem .75rem;border-radius:50px;
      color:#fff;box-shadow:0 4px 12px rgba(20,36,20,.18)}
    .gbadge--green{background:var(--green-700)}
    .gbadge--gold{background:var(--gold);color:#3a2a00}
    .gallery-wish{position:absolute;top:1rem;right:1rem;z-index:2;width:2.6rem;height:2.6rem;border-radius:50%;
      background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(20,36,20,.18);display:grid;place-items:center;
      color:#7a8a78;transition:transform .18s,color .18s}
    .gallery-wish svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
    .gallery-wish:hover{transform:scale(1.1);color:var(--red)}
    .gallery-wish.is-active{color:var(--red)}
    .gallery-wish.is-active svg{fill:var(--red);stroke:var(--red)}

    /* Info column */
    .pdp-info h1{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.14;color:var(--green-900);font-weight:800;
      letter-spacing:-.01em}
    .pdp-tagline{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
    .pdp-tagline span{font-size:.78rem;font-weight:600;color:var(--green-900);background:var(--cream);
      border:1px solid var(--line);border-radius:50px;padding:.4rem .9rem}

    /* Price block */
    .price-box{margin-top:1.4rem;border:1px solid var(--line);border-radius:16px;padding:1.35rem;
      background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);box-shadow:var(--shadow-sm)}
    .price-now{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
    .price-now-main{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
    .price-now .amt{font-size:2.5rem;font-weight:800;color:var(--green-900);line-height:1;letter-spacing:-.02em}
    .price-now .unit{font-size:.92rem;color:var(--muted);font-weight:700}
    .save-badge{font-size:.78rem;font-weight:700;color:#fff;background:var(--red);border-radius:50px;
      padding:.4rem .85rem;box-shadow:0 4px 12px rgba(203,47,36,.25)}
    .price-now .vat,.vat{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--green-700);
      font-weight:600;margin-top:.7rem}
    .vat svg{width:1rem;height:1rem;flex:none;color:var(--green-600)}
    .price-box .pack-label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
      color:var(--muted);margin:1.25rem 0 .65rem;padding-top:1.25rem;border-top:1px dashed var(--line)}
    .pack-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
    .pack-opt{position:relative;cursor:pointer}
    .pack-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
    .pack-opt .card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
      gap:.1rem;border:1.5px solid var(--line);border-radius:14px;padding:1.4rem .65rem .85rem;background:#fff;
      height:100%;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s;overflow:hidden}
    .pack-opt .card:hover{border-color:var(--green-600);transform:translateY(-2px)}
    /* tag ribbon across the top */
    .pack-opt .tag{position:absolute;top:0;left:0;right:0;font-size:.6rem;font-weight:800;letter-spacing:.03em;
      text-transform:uppercase;color:var(--muted);background:var(--cream);padding:.28rem .3rem;border-bottom:1px solid var(--line)}
    .pack-opt .tag--pop{color:#fff;background:var(--green-600);border-bottom-color:transparent}
    .pack-opt .tag--best{color:#3a2a00;background:var(--gold);border-bottom-color:transparent}
    /* check indicator */
    .pack-opt .pack-check{position:absolute;top:2rem;right:.6rem;width:1.35rem;height:1.35rem;border-radius:50%;
      border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;color:#fff;
      transition:background .18s,border-color .18s,transform .18s}
    .pack-opt .pack-check svg{width:.8rem;height:.8rem;opacity:0;transition:opacity .15s}
    .pack-opt .size{display:block;font-weight:800;color:var(--ink);font-size:1.05rem;margin-top:.35rem}
    .pack-opt .pp{display:block;font-weight:800;color:var(--green-900);font-size:1.2rem;line-height:1.1;margin-top:.2rem}
    .pack-opt .ppk{display:block;font-size:.7rem;color:var(--muted);font-weight:600;margin-top:.15rem}
    .pack-opt input:checked + .card{border-color:var(--green-600);background:rgba(47,158,68,.06);
      box-shadow:0 0 0 2px rgba(47,158,68,.22),var(--shadow-sm)}
    .pack-opt input:checked + .card .pack-check{background:var(--green-600);border-color:var(--green-600);transform:scale(1.05)}
    .pack-opt input:checked + .card .pack-check svg{opacity:1}
    .pack-opt input:focus-visible + .card{outline:3px solid var(--gold);outline-offset:2px}

    .qty-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.2rem}
    .qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
    .qty button{width:2.6rem;height:2.9rem;display:grid;place-items:center;color:var(--green-700);font-size:1.25rem;
      font-weight:700;transition:background .15s}
    .qty button:hover{background:var(--cream)}
    .qty input{width:3rem;height:2.9rem;text-align:center;border:0;border-inline:1.5px solid var(--line);
      font:inherit;font-weight:700;color:var(--ink)}
    .qty input:focus{outline:none}
    .qty-cta .btn--green{flex:1;justify-content:center;min-width:11rem;padding-block:.95rem}

    /* Trust strip */
    .trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-top:1.4rem}
    .trust-strip li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;
      border:1px solid var(--line);border-radius:10px;padding:.85rem .5rem;background:var(--cream)}
    .trust-strip .ico{width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--green-600);
      display:grid;place-items:center;color:var(--green-700)}
    .trust-strip .ico svg{width:1.1rem;height:1.1rem}
    .trust-strip b{font-size:.74rem;color:var(--green-900);line-height:1.25}

    /* ---------- Detail body (tabs-like sections) ---------- */
    .pdp-body{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.5rem,3.5vw,2.75rem);align-items:start}
    .panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(1.25rem,2.5vw,2rem);
      box-shadow:var(--shadow-sm)}
    .panel + .panel{margin-top:1.5rem}
    .panel h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--green-900);font-weight:800;line-height:1.2}
    .panel h2 b{color:var(--red);font-weight:inherit}
    .panel .rule{display:block;width:54px;height:3px;border-radius:3px;background:var(--green-600);margin:.6rem 0 1.1rem}
    .panel p{color:var(--muted);margin-top:1rem;line-height:1.75}
    .panel p:first-of-type{margin-top:0}

    .benefits{display:grid;gap:.7rem;margin-top:1.3rem}
    .benefits li{display:flex;align-items:flex-start;gap:.7rem;font-size:.95rem;color:var(--ink);font-weight:600}
    .benefits .tick{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(47,158,68,.12);
      color:var(--green-700);display:grid;place-items:center;margin-top:.05rem}
    .benefits .tick svg{width:.95rem;height:.95rem}

    .uses-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
    .uses-row span{font-size:.82rem;font-weight:600;color:var(--green-900);background:var(--cream);
      border:1px solid var(--line);border-radius:50px;padding:.45rem .95rem}

    /* Spec sheet */
    .spec-card h3{font-size:1.05rem;color:var(--green-900);font-weight:800;margin-bottom:.25rem}
    .spec-card .rule{display:block;width:46px;height:3px;border-radius:3px;background:var(--green-600);margin:.55rem 0 1.1rem}
    .spec-list{display:grid;gap:0}
    .spec-list li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--line);
      font-size:.9rem}
    .spec-list li:last-child{border-bottom:0}
    .spec-list .k{color:var(--muted);font-weight:600}
    .spec-list .v{color:var(--ink);font-weight:700;text-align:right}
    .cert-head{font-size:1.05rem;color:var(--green-900);font-weight:800;margin-top:1.5rem}
    .cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.2rem}
    .cert-grid li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
      border:1px solid var(--line);border-radius:12px;padding:.85rem .4rem;background:#fff;
      transition:border-color .18s,transform .18s,box-shadow .18s}
    .cert-grid li:hover{border-color:var(--green-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
    .cert-grid img{width:3rem;height:3rem;object-fit:contain}
    .cert-grid b{font-size:.76rem;color:var(--green-900);line-height:1.1}
    .spec-help{margin-top:1.25rem;background:linear-gradient(110deg,var(--green-900),var(--green-700));color:#fff;
      border-radius:12px;padding:1.25rem}
    .spec-help b{display:block;font-size:1rem}
    .spec-help p{color:#dbe7db;font-size:.86rem;margin:.4rem 0 .9rem;line-height:1.6}
    .spec-help .btn{width:100%;justify-content:center}

    /* ---------- FAQ ---------- */
    .faq-list{max-width:52rem;margin:0 auto;display:grid;gap:.8rem}
    .faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
      transition:box-shadow .2s,border-color .2s}
    .faq-item[open]{border-color:var(--green-600);box-shadow:var(--shadow)}
    .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
      gap:1rem;padding:1.05rem 1.25rem;font-weight:700;color:var(--green-900);font-size:1.02rem}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary .chev{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--cream);
      display:grid;place-items:center;color:var(--green-700);transition:transform .25s,background .2s}
    .faq-item[open] summary .chev{transform:rotate(180deg);background:var(--green-600);color:#fff}
    .faq-item .ans{padding:0 1.25rem 1.15rem;color:var(--muted);line-height:1.7}

    /* ---------- Related products ---------- */
    .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--gap)}
    .pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;
      overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
    .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-600)}
    .pcard-thumb{display:block;background:var(--cream);overflow:hidden}
    .pcard-thumb img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
    .pcard-body{padding:.9rem;display:flex;flex-direction:column;gap:.45rem;flex:1;text-align:center}
    .pcard-body h3{font-size:.98rem;color:var(--green-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pcard-body h3 a{color:inherit}
    .pcard-body h3 a:hover{color:var(--red)}
    .avail{font-size:.72rem;color:var(--muted)}
    .pack-sizes{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-bottom:.55rem}
    .pack-sizes span{font-size:.7rem;border:1px solid var(--line);border-radius:6px;padding:.2rem .55rem;
      color:var(--muted);background:var(--cream)}
    .pcard .btn{margin-top:auto;justify-content:center;width:100%;padding:.6rem 1rem;font-size:.875rem}
    .wish-btn{position:absolute;top:.55rem;left:.55rem;z-index:3;width:2.15rem;height:2.15rem;
      border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(20,36,20,.18);
      display:grid;place-items:center;color:#7a8a78;transition:transform .18s,color .18s,background .18s}
    .wish-btn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
    .wish-btn:hover{transform:scale(1.12);color:var(--red);background:#fff}
    .wish-btn.is-active{color:var(--red)}
    .wish-btn.is-active svg{fill:var(--red);stroke:var(--red)}

    /* ---------- CTA band ---------- */
    .band-wrap{padding-block:clamp(2rem,4vw,3.25rem)}
    .band{background:linear-gradient(110deg,var(--green-900),var(--green-700));color:#fff;
      border-radius:var(--radius);padding:clamp(1.75rem,4vw,3rem);display:flex;flex-wrap:wrap;
      gap:1.5rem;align-items:center;justify-content:space-between}
    .band h2{font-size:clamp(1.5rem,3vw,2rem)}
    .band p{color:#dbe7db;margin-top:.5rem;max-width:34rem}
    .band-actions{display:flex;flex-wrap:wrap;gap:.75rem}
    .band .btn--ghost{color:#fff}
    .band .btn--ghost:hover{background:rgba(255,255,255,.12)}
    @keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}

    /* ---------- Responsive ---------- */
    @media (max-width:980px){
      .pdp-grid{grid-template-columns:1fr;gap:2rem}
      /* Stacked, the gallery had the full page width and the square photo grew to ~790px
         tall — it filled a tablet screen and pushed the pack sizes and Add to Cart below
         the fold. Cap it so the photo stays a sensible size and the buy box stays close,
         and centre it on the page now that it no longer spans the full width. */
      .gallery{position:static;max-width:34rem;margin-inline:auto}
      .detail-grid{grid-template-columns:1fr}
    }
    
    /* ---------- Mobile buy-box ----------
       Three phone-only problems this fixes:
       1. A product with no extra gallery images still rendered a one-item thumbnail strip
          under the photo — a switcher with nothing to switch to. Hide it (multi-image
          products keep theirs; the .is-lone class is set in the Blade view).
       2. "Save 8%" wrapped onto its own line below the price. Keep the row on one line and
          shrink the amount enough that the badge fits beside it.
       3. The quantity stepper sat at its natural width beside a wrapped Add to Cart button.
          Stack them: a compact, centred stepper on its own row, then a full-width Add to
          Cart beneath it. */
    @media (max-width:860px){
      .gallery-thumbs.is-lone{display:none}
      /* ...and give its 84px column back, or the main photo gets squeezed into it —
         it rendered at 82px on iPad Mini/Air (561-860px, where the strip is hidden but
         the gallery was still two columns). */
      .gallery.is-lone{grid-template-columns:1fr}

      .price-now{flex-wrap:nowrap;align-items:center;gap:.6rem}
      .price-now-main{min-width:0}
      .price-now .amt{font-size:1.9rem}
      .save-badge{flex:none;white-space:nowrap}

      .qty-cta{flex-direction:column;align-items:center;gap:.8rem}
      /* compact stepper, centred on its row (not stretched to the column width) */
      .qty{display:inline-flex;width:auto;align-self:center}
      .qty button{width:2.4rem;height:2.5rem;font-size:1.1rem}
      .qty input{width:2.8rem;height:2.5rem}
      /* the CTA still spans the full width — it is the primary action */
      .qty-cta .btn{flex:none;width:100%;min-width:0;align-self:stretch}
    }

    @media (max-width:560px){
      .gallery{grid-template-columns:1fr}
      .gallery-thumbs{flex-direction:row;order:2}
      .gallery-thumbs button{width:64px}
      .pack-options{grid-template-columns:1fr}
      .trust-strip{grid-template-columns:repeat(2,1fr)}
      .cert-grid{grid-template-columns:repeat(2,1fr)}
      .prod-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}
    }