/* Zen Bliss components, ported from the live Shopify theme (Dawn 16, assets/zb.css of 2026-10-09) for WordPress.
   Port rules (docs/BUILD-CONVENTIONS.md rule 2, spec-design-layout 0 and 5.1): every rem converted to px at Dawn's
   10px root; selectors unchanged; the subscribe toggle (.zb-opt) and the Smile / TrustedSite offsets dropped.
   Dawn classes this file relies on (.page-width, .button, .rte, ...) are defined in zb-shims.css.
   WooCommerce-only additions are at the end, after "Port additions". */
:root{
  --zb-green:#1f6b17;--zb-green-900:#0f3a0c;--zb-green-100:#dcebd8;--zb-mist:#eef4ef;--zb-sky:#dbe7f1;
  --zb-gold:#b8892f;--zb-star:#e0a62b;--zb-ink:#14201a;--zb-ink-2:#4d5b51;--zb-ink-3:#77847b;--zb-line:#dde5dd;--zb-tile:#fdfdfd;
  --zb-r:16px;--zb-r-sm:10px;--zb-shadow:0 12px 30px -12px rgba(15,58,12,.18);
}
.zb-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zb-green);margin-bottom:10px}
.zb-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.zb-sec-head h2{margin:0}
.zb-sec-head p{color:var(--zb-ink-2);max-width:58ch;margin:8px 0 0}
.zb-link{font-weight:700;color:var(--zb-green);white-space:nowrap;text-decoration:none}
.zb-link:hover{text-decoration:underline}
.zb-notice{background:var(--zb-mist);border-left:3px solid var(--zb-gold);border-radius:0 12px 12px 0;padding:12px 16px;font-size:14px;color:var(--zb-ink-2)}

/* ---- hero ---- */
.zb-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:48px 0 40px}
.zb-hero h1{margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.1}
.zb-hero__lede{font-size:18px;color:var(--zb-ink-2);max-width:46ch;margin:18px 0 24px}
.zb-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.zb-proof{list-style:none;margin:24px 0 0;padding:0;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--zb-ink-2)}
.zb-proof li{display:flex;align-items:center;gap:8px}
.zb-proof li::before{content:"\2713";color:var(--zb-green);font-weight:700}
.zb-proof li.zb-proof--stars::before{content:none}
.zb-proof b{color:var(--zb-ink)}
.zb-stage{position:relative;background:var(--zb-sky);border-radius:28px;padding:28px;display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:end;min-height:420px}
.zb-stage__tile{position:relative;background:var(--zb-tile);border-radius:18px;padding:10%;display:grid;place-items:center;box-shadow:0 24px 50px -24px rgba(15,58,12,.4)}
.zb-stage__tile--big{min-height:360px}
.zb-stage__tile img{max-width:100%;height:auto}
.zb-stage__tag{position:absolute;top:22px;left:22px;background:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;color:var(--zb-green-900);box-shadow:var(--zb-shadow)}
.zb-stage__side{display:grid;gap:12px}
.zb-stage__tile--side .zb-stage__tag{top:14px;left:14px;padding:6px 10px;font-size:11px}
/* Desktop side column is narrow (about 130px at 1024px wide): the label stays on one line (10px below 1200px) and the image starts below it. */
@media (min-width:990px){.zb-stage__tile--side{padding-top:48px}.zb-stage__tile--side .zb-stage__tag{white-space:nowrap}}
@media (min-width:990px) and (max-width:1199px){.zb-stage__tile--side .zb-stage__tag{top:12px;left:10px;font-size:10px;padding:5px 7px;letter-spacing:-.01em}}
.zb-stage__chip{background:#fff;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700;line-height:1.3;box-shadow:var(--zb-shadow)}
.zb-stage__chip small{display:block;font-weight:500;color:var(--zb-ink-2)}
@media (max-width:989px){.zb-hero{grid-template-columns:1fr;padding:36px 0 32px}.zb-stage{min-height:0;grid-template-columns:1fr 1fr;padding:18px}.zb-stage__tile--big{grid-column:1/3;min-height:260px}
/* Owner 2026-10-18: the side product looked tiny in the left half on phones. Full width, image up to 200px tall, label like the main tile. */
.zb-stage__side{grid-column:1/3}.zb-stage__tile--side{min-height:220px;padding:8% 10%}.zb-stage__tile--side img{max-height:200px;width:auto}.zb-stage__tile--side .zb-stage__tag{top:18px;left:18px;padding:7px 12px;font-size:12px}.zb-stage__chip{justify-self:start}}

/* ---- product card ---- */
.zb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.zb-grid--3{grid-template-columns:repeat(3,1fr)}
.zb-card{background:#fff;border:1px solid var(--zb-line);border-radius:var(--zb-r);overflow:hidden;display:flex;flex-direction:column}
.zb-card__media{position:relative;aspect-ratio:1;background:var(--zb-tile);overflow:hidden}
.zb-card__media a{position:absolute;inset:10%;display:flex;align-items:center;justify-content:center}
.zb-card__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.zb-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--zb-green-100);color:var(--zb-green-900);z-index:1}
.zb-bestfor{position:absolute;bottom:12px;left:12px;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--zb-line);border-radius:999px;padding:4px 10px;color:var(--zb-ink-2);z-index:1}
.zb-card__body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.zb-card__body h3{margin:0;font-size:17px}
.zb-card__body h3 a{text-decoration:none;color:inherit}
.zb-card__rev{font-size:13px;color:var(--zb-ink-3)}
.zb-card__price{font-weight:700;font-variant-numeric:tabular-nums}
.zb-card__price small{display:block;font-weight:500;color:var(--zb-green);font-size:12px}
.zb-card__form,.zb-card__form form{display:flex;flex-direction:column;gap:8px;flex:1}
.zb-card__cta{margin-top:auto;padding-top:6px}
.zb-card__cta .button{width:100%;position:relative}
@media (max-width:989px){.zb-grid,.zb-grid--3{grid-template-columns:repeat(2,1fr);gap:12px}.zb-card__body{padding:12px}}

/* ---- help me choose (stepped wizard) ---- */
.zb-wiz{max-width:760px;margin:0 auto;display:grid;gap:20px}
.zb-wiz__head h2{margin:0}
.zb-wiz__card{background:#fff;border:1px solid var(--zb-line);border-radius:18px;padding:clamp(20px,4vw,36px);display:grid;gap:22px;box-shadow:var(--zb-shadow)}
.zb-wiz__progress{height:6px;background:var(--zb-green-100);border-radius:999px;overflow:hidden}
.zb-wiz__progress i{display:block;height:100%;background:var(--zb-green);width:0;transition:width .3s ease}
.zb-wiz__step{display:grid;gap:18px}
.zb-wiz [hidden]{display:none!important}
.zb-wiz__qhead{display:grid;gap:6px}
.zb-wiz__qhead h3{margin:0;font-size:clamp(22px,4vw,28px);line-height:1.2}
.zb-wiz__qhead p{margin:0;color:var(--zb-ink-2)}
.zb-wiz__eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--zb-gold);font-weight:700}
.zb-wiz__bullets{margin:0;padding-left:18px;color:var(--zb-ink-2);font-size:15px;display:grid;gap:4px}
.zb-wiz__meta{font-size:14px;color:var(--zb-ink-2)}
.zb-wiz__opts{display:grid;gap:10px}
@media (min-width:560px){.zb-wiz__opts--two{grid-template-columns:1fr 1fr}}
.zb-wiz__opt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;text-align:left;width:100%;background:#fff;border:1.5px solid var(--zb-line);border-radius:14px;padding:14px 16px;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s}
.zb-wiz__opt:hover{border-color:var(--zb-green)}
.zb-wiz__opt[aria-checked="true"]{border-color:var(--zb-green);background:var(--zb-mist)}
.zb-wiz__opt:focus-visible{outline:3px solid var(--zb-green);outline-offset:2px}
.zb-wiz__ico{width:38px;height:38px;border-radius:10px;background:var(--zb-mist);display:grid;place-items:center;font-size:18px}
.zb-wiz__opt b{display:block;font-size:16px;line-height:1.25}
.zb-wiz__opt small{display:block;color:var(--zb-ink-2);font-size:13px;margin-top:3px;line-height:1.4}
.zb-wiz__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.zb-wiz__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.zb-wiz__link{background:none;border:0;font:inherit;font-size:14px;color:var(--zb-ink-2);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.zb-wiz__email{display:grid;gap:16px}
.zb-wiz__email label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.zb-wiz__email input[type="email"]{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--zb-line);border-radius:12px;background:#fff;color:var(--zb-ink)}
.zb-wiz__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.zb-wiz__chip{font-size:13px;background:var(--zb-mist);color:var(--zb-ink);border-radius:999px;padding:4px 12px}
.zb-wiz__results{display:grid;gap:16px}
.zb-pick{display:grid;grid-template-columns:1fr;gap:16px;border:1.5px solid var(--zb-line);border-radius:16px;padding:18px;background:#fff}
.zb-pick--primary{border-color:var(--zb-green)}
@media (min-width:560px){.zb-pick{grid-template-columns:160px 1fr}}
.zb-pick img{width:100%;max-width:200px;height:auto;aspect-ratio:1;object-fit:contain;background:var(--zb-tile);border-radius:12px;justify-self:center}
.zb-pick__body{display:grid;gap:8px;min-width:0;align-content:start}
.zb-pick__badge{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--zb-green);color:#fff;width:max-content}
.zb-pick__badge--alt{background:var(--zb-mist);color:var(--zb-green)}
.zb-pick h3{margin:0;font-size:18px}
.zb-pick__var{font-size:14px;color:var(--zb-ink-2)}
.zb-pick__price{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
.zb-pick__why{font-size:15px;color:var(--zb-ink-2);margin:0}
.zb-wiz__note{background:var(--zb-mist);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--zb-ink-2);margin:0}
.zb-next{background:#fff;border:1.5px dashed var(--zb-green);border-radius:14px;padding:14px;display:grid;gap:6px;justify-items:start}
.zb-next b{font-size:15px}
.zb-next span{font-size:13px;color:var(--zb-ink-2)}
.zb-hidden{display:none!important}
@media (prefers-reduced-motion:reduce){.zb-wiz__progress i{transition:none}}

/* ---- sticky bars (phones only) ---- */
.zb-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--zb-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -10px 30px -16px rgba(0,0,0,.25)}
.zb-sticky__r{font-size:13px;color:var(--zb-ink-2);min-width:0}
.zb-sticky .button,.zb-sticky a.button{flex:none;white-space:nowrap}   /* "Shop sale" / "Shop everything" on one line (visual pass 2026-10-12) */
.zb-sticky__r b{display:block;color:var(--zb-ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:749px){.zb-sticky{display:flex}body.zb-has-sticky{padding-bottom:72px}}

/* ---- collection tools ---- */
.zb-hmc-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--zb-sky);border-radius:var(--zb-r);padding:14px 18px;margin:4px 0 22px}
.zb-hmc-banner div{display:grid}
.zb-hmc-banner b{font-size:15px}
.zb-hmc-banner span{font-size:13px;color:var(--zb-ink-2)}
.zb-hmc-banner .button{margin-left:auto}
.zb-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.zb-chips a{border:1px solid var(--zb-line);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--zb-ink-2);text-decoration:none}
.zb-chips a[aria-current]{background:var(--zb-green);border-color:var(--zb-green);color:#fff}

/* ---- product page: buy box additions ---- */
.zb-pdp-sub{font-size:14px;color:var(--zb-ink-2);font-weight:600;margin:0 0 8px}
.zb-pdp-tag{font-size:18px;font-weight:700;color:var(--zb-green-900);margin:0 0 10px}
.zb-who{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;font-size:14px;color:var(--zb-ink-2)}
.zb-who li{display:flex;gap:8px;align-items:flex-start}
.zb-who li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--zb-gold);margin-top:8px;flex:none}
.zb-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.zb-facts div{background:var(--zb-mist);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.zb-facts b{font-size:14px}
.zb-facts span{font-size:11px;color:var(--zb-ink-3);line-height:1.3}
.zb-trust{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--zb-ink-2)}
.zb-trust li::before{content:"\2713";color:var(--zb-green);font-weight:700;margin-right:8px}
.zb-helpers{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;margin-bottom:14px}
.zb-fbt{background:#fff;border:1px solid var(--zb-line);border-radius:var(--zb-r);padding:14px;display:grid;gap:10px;margin:14px 0}
.zb-fbt__row{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;font-size:13px}
.zb-fbt__row img{width:56px;height:56px;object-fit:contain;background:var(--zb-tile);border-radius:10px;padding:4px}
.zb-fbt__row b{display:block;font-size:13px}
.zb-fbt__row span{color:var(--zb-ink-3);font-size:12px}
.zb-fbt__tot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--zb-line);padding-top:10px;font-weight:800}
@media (max-width:749px){.zb-facts{grid-template-columns:1fr 1fr}}

/* ---- product page: details section ---- */
.zb-details{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.zb-prose{max-width:72ch;color:var(--zb-ink-2);font-size:16px}
.zb-prose h2{font-size:24px;color:var(--zb-ink);margin:28px 0 10px}
.zb-prose h2:first-child{margin-top:0}
.zb-prose p{margin:0 0 14px}
.zb-steps{margin:0;padding-left:20px;color:var(--zb-ink-2);font-size:15px;display:grid;gap:8px}
.zb-timeline{display:grid;border-left:2px solid var(--zb-green-100);margin-left:8px}
.zb-timeline div{position:relative;padding:0 0 18px 22px}
.zb-timeline div::before{content:"";position:absolute;left:-.70px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--zb-green);border:2px solid #fff;box-shadow:0 0 0 2px var(--zb-green-100)}
.zb-timeline b{display:block;font-size:14px}
.zb-timeline span{font-size:14px;color:var(--zb-ink-2)}
.zb-supp{border:2px solid var(--zb-ink);border-radius:8px;padding:14px 16px;background:#fff}
.zb-supp h3{font-size:20px;border-bottom:4px solid var(--zb-ink);padding-bottom:6px;margin:0 0 6px}
.zb-supp table{width:100%;border-collapse:collapse;font-size:14px}
.zb-supp td{padding:7px 0;border-bottom:1px solid var(--zb-line);vertical-align:top}
.zb-supp td:first-child{color:var(--zb-ink-2);width:45%}
.zb-supp td:last-child{font-weight:700;text-align:right}
.zb-supp tr:last-child td{border-bottom:0}
.zb-supp small{display:block;margin-top:8px;font-size:12px;color:var(--zb-ink-3)}
.zb-feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.zb-feat div{font-size:14px;color:var(--zb-ink-2)}
.zb-feat b{display:block;color:var(--zb-ink)}
.zb-warn{background:#fff8ec;border:1px solid #f0dcb0;border-radius:var(--zb-r);padding:18px 20px}
.zb-warn h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#8a6418;margin:0 0 10px}
.zb-warn ul{margin:0;padding-left:18px;font-size:14px;color:var(--zb-ink-2);display:grid;gap:6px}
.zb-faq details{background:#fff;border:1px solid var(--zb-line);border-radius:var(--zb-r);padding:0 20px;margin-bottom:10px}
.zb-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;font-weight:700;font-size:16px}
.zb-faq summary::-webkit-details-marker{display:none}
.zb-faq summary::after{content:"+";color:var(--zb-green);font-size:22px}
.zb-faq details[open] summary::after{content:"\2013"}
.zb-faq details p{color:var(--zb-ink-2);padding-bottom:18px;margin:0;max-width:62ch}
@media (max-width:989px){.zb-details{grid-template-columns:1fr}.zb-feat{grid-template-columns:1fr}}

/* ---- lab reports ---- */
.zb-batches{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.zb-batch{background:var(--zb-mist);border-radius:12px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:6px;font-size:13px;align-items:center}
.zb-batch b{font-size:14px}
.zb-batch span{color:var(--zb-ink-3)}
.zb-coa{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--zb-line);font-size:14px}
.zb-coa th{text-align:left;background:var(--zb-mist);padding:12px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--zb-ink-2)}
.zb-coa td{padding:12px 14px;border-top:1px solid var(--zb-line);vertical-align:top}
.zb-coa .zb-pend{color:var(--zb-ink-3);font-size:13px}
.zb-tw{overflow-x:auto}
@media (max-width:749px){.zb-batches{grid-template-columns:1fr}}

/* ---- Port additions (WooCommerce) ---- */
/* Card strength line: the Liquid printed these values as an inline style in rem; same look, moved here. */
.zb-card__sub{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--zb-ink-3)}
/* Rating line (do_action zb_card_rating): Woo stars + "N reviews"; hidden when no review exists, like Judge.me. */
.zb-card__rev{display:flex;align-items:center;gap:6px;line-height:1.2}
.zb-card__rev:empty{display:none}
/* The stars are self-contained here: Kadence scopes WooCommerce's star rules to a `.woocommerce` ancestor, which static
   pages such as the homepage do not have, so the screen-reader sentence inside the stars showed as text (seen live 2026-10-18). Glyphs are Kadence's star font
   (U+E900 empty, U+E901 filled), not WooCommerce's "S": the Kadence stylesheet supplies the @font-face on every page. */
.zb-card__rev .star-rating,.zb-rating .star-rating{float:none;margin:0;overflow:hidden;position:relative;display:inline-block;height:1em;line-height:1;font-size:13px;width:5em;font-family:"star";color:var(--zb-star,#e0a62b);letter-spacing:normal;word-break:normal;white-space:normal}
.zb-card__rev .star-rating::before,.zb-rating .star-rating::before{content:"\e900\e900\e900\e900\e900";color:var(--zb-line,#dde5dd);float:left;top:0;left:0;position:absolute}
.zb-card__rev .star-rating span,.zb-rating .star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}
.zb-card__rev .star-rating span::before,.zb-rating .star-rating span::before{content:"\e901\e901\e901\e901\e901";top:0;position:absolute;left:0}
/* Quick add: Woo's AJAX states. The drawer opens after the add (zb-site.js), so Woo's "View cart" link is not shown. */
.zb-card .added_to_cart{display:none}
.zb-card .zb-card__cta a.button.loading{opacity:1;color:transparent;pointer-events:none}
.zb-card .zb-card__cta a.button.loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--zb-btn-text,#fff);border-right-color:transparent;border-radius:50%;animation:zb-spin .7s linear infinite}
@keyframes zb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.zb-card .zb-card__cta a.button.loading::after{animation-duration:2s}}
/* [zb_products columns="2|5"]; 3 and 4 use the classes above. Below 990px every grid has 2 columns. */
@media (min-width:990px){.zb-grid--2{grid-template-columns:repeat(2,1fr)}.zb-grid--5{grid-template-columns:repeat(5,1fr)}}
/* FAQ contract markup (zb_render_faq): the answer sits in .zb-faq__answer instead of a bare <p>. */
.zb-faq__answer{color:var(--zb-ink-2);padding-bottom:18px;max-width:62ch}
.zb-faq .zb-faq__answer p{padding-bottom:0;margin:0 0 10px}
.zb-faq .zb-faq__answer > :last-child{margin-bottom:0}
/* Collection page sections (templates/collection.json): tools 16px top; grid 24/36 (18/27 on phones); "Good to know" 52/52 (39 on phones). */
.zb-collection__tools{padding-top:16px}
.zb-collection__grid{padding:18px 0 27px}
.zb-collection__extra{padding:39px 0}
.zb-collection__spacer{height:22px}
@media (min-width:750px){.zb-collection__grid{padding:24px 0 36px}.zb-collection__extra{padding:52px 0}}
/* seo_html wraps its tables in <div style="overflow-x:auto">; wp_kses_post drops overflow-x, so restore it here. */
.zb-prose > div{max-width:100%;overflow-x:auto}