/*
Theme Name: ZampleBox
Description: Faithful WooCommerce rebuild of the zamplebox.com BigCommerce storefront.
Version: 0.1.0
Text Domain: zamplebox
*/

/* ===================================================================
   NEVER SPLICE THIS FILE BY REGEX OR LINE INDEX - APPEND ONLY.
   On breazy, block-deletion edits silently removed 28 template classes'
   worth of rules and collapsed the entire footer. Recovery is always:
   append the restored block at the end, then re-run the class audit
   (parse class="..." out of every .php, diff against \.(zb-[a-z0-9_-]+)
   in comment-stripped CSS).
   Check for class-name collisions BEFORE adding a component.
   =================================================================== */

:root{
  /* Brand, measured from the live compiled CSS - not guessed.
     --brand #40a839 is only 3.05:1 on white, so it must NEVER carry white
     text or stand alone as a UI edge. Every surface with white text uses
     --brand-fill (#2f7a2a, 5.33:1 AA). Same split-token fix breazy needed
     for #16A4F5. */
  --brand:#40a839;
  --brand-fill:#2f7a2a;
  --brand-wash:#eef5ec;
  --accent:#391271;          /* purple, 14.01:1 on white */
  --pink:#fc9fc7;            /* 1.92:1 - decorative only, never text */

  --ink:#1a1a1a;             /* 17.40:1 */
  --body:#3d4548;
  --muted:#5b6b73;           /* 5.49:1 - correct token for small labels */
  --faint:#a5a5a5;           /* 2.46:1 - NEVER real content text */
  --line:#ddd;
  --haze:#f2f2f2;
  --white:#fff;

  --radius:4px;              /* live uses 4px x44, by far the dominant value */
  --fs-base:14px;            /* live: 14px x96, the dominant size */
}

*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--body);
  font:var(--fs-base)/1.5 "Josefin Sans",AvenirNext,Arial,Helvetica,sans-serif}

/* -------------------------------------------------------------------
   WooCommerce float-layout furniture vs CSS grid. This breaks grids in
   TWO ways and both must be neutralised, or product grids silently lose
   their first tile and every card renders narrow.

   1. woocommerce.css sets `content:" "; display:table` on
      ul.products::before/::after. In a GRID container each pseudo becomes
      a grid ITEM, so ::before eats the first cell and every row starts a
      column late.
   2. ul.products li.product carries a percentage `width` and `float:left`
      for Woo's own float layout. Inside a grid track the track already
      sizes the item, so the percentage shrinks every card within its track.

   Both cost real debugging time on breazy. They are here from line one.
   ------------------------------------------------------------------- */
ul.products::before,
ul.products::after,
.col2-set::before,
.col2-set::after{content:none!important;display:none!important}
ul.products li.product{width:auto!important;float:none!important;
  margin-left:0;margin-right:0}

/* ===================================================================
   LAYOUT + HEADER + FOOTER
   Every number below was MEASURED off https://zamplebox.com at 1440px
   with getComputedStyle/getBoundingClientRect - not read out of the
   BigCommerce stylesheet. Reading the stylesheet is how breazy got
   mobile rules applied to desktop twice.
   =================================================================== */

/* Live: .container max-width 1242px, padding 0 36px, centred.
   Content width is therefore 1170px. */
.zb-container{max-width:1242px;margin-inline:auto;padding-inline:36px}

/* Live body: 16px/24px, #333, AvenirNext-Medium with an Arial fallback.
   There is no @font-face for AvenirNext on the live site, so this stack
   resolves to Avenir Next only on Apple devices and Arial everywhere
   else - reproduced verbatim, pending the licensing decision. */
body{background:#fff;color:#333;font:16px/24px AvenirNext-Medium,Arial,Helvetica,sans-serif}

/* Live h2: 35.2px/44px, AvenirNext-Heavy 700, UPPERCASE, #333 */
.zb-h2,.zb-main h2{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:35.2px;line-height:44px;font-weight:700;text-transform:uppercase;
  color:#333;margin:29.216px 0}

/* --- Header: three stacked rows, 105 + 81 + 56 = 242px --- */
.zb-header{background:#fff;position:relative;z-index:200}

/* Row 1 - announcement bar. Live bg #111, 105px tall. */
.zb-header__announce{background:#111;color:#fff;font-size:14px;line-height:20px}
.zb-header__announce .zb-container{min-height:105px;display:flex;align-items:center;
  justify-content:center;text-align:center}
.zb-header__announce a{color:#fff;text-decoration:underline}

/* Row 2 - logo / search / account. Live 81px tall; the inner row is 65px
   (the logo's own height) sitting at y=121. */
.zb-header__main{height:81px}
.zb-header__main .zb-container{display:flex;align-items:center;gap:24px;height:81px}
.zb-logo{flex:0 0 auto;display:block;line-height:0}
.zb-logo img{display:block;width:210px;height:65px;max-height:100%;object-fit:contain}

/* Live search field: 735x45, bg #fafafa, 1px #eaeaea, radius 4px, 16px text.
   It is a flex child in a row that also holds the logo and the account
   links, so it needs a basis AND a cap - on breazy the equivalent field
   stretched to 852px because only flex-basis was set. */
.zb-search{flex:1 1 735px;max-width:735px;position:relative}
.zb-search input[type="search"],.zb-search input[type="text"]{
  width:100%;height:45px;background:#fafafa;border:1px solid #eaeaea;
  border-radius:4px;padding:0 44px 0 14px;font-size:16px;color:#333}
.zb-search input::placeholder{color:#707070}
.zb-search button{position:absolute;right:0;top:0;height:45px;width:44px;
  background:none;border:0;cursor:pointer;color:#707070}

.zb-utility{flex:0 0 auto;display:flex;align-items:center;gap:16px;
  margin-left:24px;height:42px}
.zb-utility a{color:#111;font-size:14px;text-decoration:none}
.zb-utility a:hover{color:var(--brand-fill)}

/* Row 3 - primary nav. Live 56px tall, white, links 16px UPPERCASE #111
   with 16px/12px padding. */
.zb-nav{background:#fff;height:56px;border-top:1px solid var(--line)}
.zb-nav__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;
  margin:0;padding:0;height:56px;max-width:1242px;margin-inline:auto;
  padding-inline:36px}
.zb-nav__item{display:inline-block}
.zb-nav__item > a{display:block;padding:16px 12px;color:#111;font-size:16px;
  line-height:24px;text-transform:uppercase;text-decoration:none}
.zb-nav__item > a:hover,.zb-nav__item.current-menu-item > a{color:var(--brand-fill)}

/* --- Footer: white, 5px #111 rule on top, four 302px columns --- */
.zb-footer{background:#fff;border-top:5px solid #111;color:#333}
.zb-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);
  max-width:1242px;margin-inline:auto;padding:65px 18px 0}
.zb-footer__col{min-width:0}
.zb-footer__list{list-style:none;margin:0;padding:0}
.zb-footer__list li{margin-bottom:8px}
.zb-footer__list a{color:#333;font-size:14px;text-decoration:none}
.zb-footer__list a:hover{color:var(--brand-fill);text-decoration:underline}
.zb-footer__legal{max-width:1242px;margin-inline:auto;padding:24px 18px 40px;
  font-size:12px;line-height:18px;color:var(--muted)}
.zb-footer__warning{margin-top:8px}
.zb-footer__warning strong{color:#333}

/* --- Hero: live .home-video-top is full-bleed 1440x650 --- */
.zb-hero{position:relative;min-height:650px;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;background:#111}
.zb-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zb-hero__inner{position:relative;z-index:1;max-width:1242px;padding-inline:36px;color:#fff}
.zb-hero__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:48px;line-height:1.1;font-weight:700;text-transform:uppercase;
  color:#fff;margin:0 0 24px}
/* --brand is 3.05:1 and must never carry white text - the CTA uses the
   darkened fill. */
.zb-btn{display:inline-block;background:var(--brand-fill);color:#fff;
  font-size:16px;font-weight:700;text-transform:uppercase;text-decoration:none;
  padding:14px 32px;border-radius:4px;border:0;cursor:pointer}
.zb-btn:hover{background:#276b22;color:#fff}

.zb-main{min-height:200px}
.zb-title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;color:#333}

/* Mobile header.
   Breakpoint is 800/801px because that is what the live PapaThemes stylesheet
   uses (386 rules at min-width:801px, 118 at max-width:800px) - matching it
   keeps the two storefronts switching layout at the same width.

   The earlier attempt told .zb-container to wrap but left .zb-header__main at
   its measured height:81px, so the wrapped rows overflowed a fixed-height
   parent and the search box and utility links painted on top of the nav. A
   measured height is a DESKTOP measurement; it has to be released here.

   It also tried to keep all eight nav items on one scrollable row. Live does
   not do that - it hides the nav behind a toggle - so this does too. */
.zb-menu-toggle{display:none}

@media (max-width:800px){
  .zb-header__main{height:auto}
  .zb-header__main .zb-container{flex-wrap:wrap;height:auto;gap:12px;
    padding-block:12px;row-gap:12px}
  .zb-logo{order:2}
  .zb-logo img{width:170px;height:auto}
  .zb-utility{order:3;margin-left:auto}
  .zb-search{flex:1 1 100%;order:4;max-width:none}

  .zb-menu-toggle{order:1;display:inline-flex;align-items:center;gap:8px;
    background:none;border:0;padding:6px 8px 6px 0;cursor:pointer;color:#111;
    font-family:inherit;font-size:12px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em}
  /* Three bars drawn from one element: the middle is the box, the outer two
     are its pseudo-elements, so the markup stays a plain button. */
  .zb-menu-toggle__icon,
  .zb-menu-toggle__icon::before,
  .zb-menu-toggle__icon::after{display:block;width:22px;height:2px;
    background:#111;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
  .zb-menu-toggle__icon{position:relative}
  .zb-menu-toggle__icon::before,
  .zb-menu-toggle__icon::after{content:"";position:absolute;left:0}
  .zb-menu-toggle__icon::before{top:-7px}
  .zb-menu-toggle__icon::after{top:7px}
  .zb-menu-open .zb-menu-toggle__icon{background:transparent}
  .zb-menu-open .zb-menu-toggle__icon::before{transform:translateY(7px) rotate(45deg)}
  .zb-menu-open .zb-menu-toggle__icon::after{transform:translateY(-7px) rotate(-45deg)}

  /* The drawer. Collapsed with max-height rather than display:none so it can
     animate, and hidden from assistive tech and tab order while closed. */
  .zb-nav{min-height:0;max-height:0;overflow:hidden;visibility:hidden;
    border-top:0;transition:max-height .22s ease}
  .zb-menu-open .zb-nav{max-height:80vh;overflow-y:auto;visibility:visible;
    border-top:1px solid var(--line)}
  .zb-nav__list{flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    min-height:0;height:auto;padding:0}
  .zb-nav__item{display:block}
  .zb-nav__item > a{padding:14px 16px;border-bottom:1px solid var(--line)}

  .zb-footer__grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:640px){
  .zb-footer__grid{grid-template-columns:1fr}
  .zb-hero{min-height:420px}
  .zb-hero__title{font-size:32px}
}

/* ===================================================================
   CATEGORY / SHOP ARCHIVE + PRODUCT CARD
   Measured on https://zamplebox.com/e-juice at 1440px:
     .page-sidebar   305px at x=111
     .page-content   914px at x=416
     .productGrid    889px, flex, 4 across
     li.product      222 x 475, 222px pitch, NO gutter
     card image      196 x 167, object-fit:contain
     card title      12.8px/19.2px AvenirNext-Heavy, UPPERCASE, centred, #333
     card price      16px/24px, #707070, weight 400
     card CTA        14px/600, #40a839 text on transparent, radius 4px, 8px 6px
   =================================================================== */

.zb-shop{display:flex;gap:0;max-width:1242px;margin-inline:auto;padding-inline:36px}
.zb-shop__side{flex:0 0 305px;max-width:305px;min-width:0}
.zb-shop__main{flex:1 1 0;min-width:0;padding-left:13px}

/* The grid is a flex row of fixed-pitch cards, exactly like live. */
ul.products,.zb-grid{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
ul.products li.product,.zb-card{flex:0 0 25%;max-width:25%;padding:0;margin:0;
  min-height:475px;position:relative;text-align:center}

.zb-card__media{display:flex;align-items:center;justify-content:center;
  height:167px;margin:28px 13px 0;overflow:hidden}
/* Bound the image on BOTH axes and let it letterbox. A height:100% against a
   container with an indefinite height falls back to the intrinsic ratio, which
   silently stretches non-square thumbnails and can double a card's height. */
.zb-card__media img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;display:block}

.zb-card__title,ul.products li.product h2.woocommerce-loop-product__title{
  font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:12.8px;
  line-height:19.2px;font-weight:400;text-transform:uppercase;text-align:center;
  color:#333;margin:0 0 12px;padding:0 13px}
.zb-card__title a{color:#333;text-decoration:none}

ul.products li.product .price,.zb-card__price{font-family:AvenirNext-Medium,Arial,Helvetica,sans-serif;
  font-size:16px;line-height:24px;font-weight:400;color:#707070;margin:0 0 12px;
  display:block;text-align:center}
ul.products li.product .price del{opacity:.6;margin-right:6px}
ul.products li.product .price ins{text-decoration:none}

/* Live CTA is brand-green TEXT on a transparent ground. NOTE: #40a839 is
   3.05:1 on white, so at 14px/600 this FAILS WCAG AA on the live site too.
   Reproduced verbatim because the brief is an exact match; flagged in
   CLAUDE.md for a decision (--brand-fill #2f7a2a would be 5.33:1 and read
   almost identically). */
ul.products li.product a.button,.zb-card__cta{display:inline-block;
  background:transparent;color:var(--brand);font-size:14px;font-weight:600;
  text-transform:uppercase;text-decoration:none;padding:8px 6px;
  border:0;border-radius:4px;line-height:16px}
ul.products li.product a.button:hover,.zb-card__cta:hover{color:var(--brand-fill);
  background:var(--brand-wash)}

/* Whole card is the tap target, via a stretched pseudo on the title anchor -
   never a second nested <a>. Do not raise anything above it with z-index or
   you punch a dead hole in the target. */
ul.products li.product{position:relative}
.zb-card__title a::after{content:"";position:absolute;inset:0}
ul.products li.product a.button{position:relative;z-index:2}

.zb-archive__head{padding:24px 0 8px}
.zb-archive__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:35.2px;line-height:44px;font-weight:700;text-transform:uppercase;
  color:#333;margin:0 0 8px}
.zb-archive__count{color:var(--muted);font-size:14px}

.zb-filters__head{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:16px;text-transform:uppercase;color:#333;margin:24px 0 12px}

@media (max-width:1100px){
  ul.products li.product,.zb-card{flex-basis:33.3333%;max-width:33.3333%}
}
@media (max-width:900px){
  .zb-shop{flex-direction:column}
  .zb-shop__side{flex-basis:auto;max-width:none}
  .zb-shop__main{padding-left:0}
}
@media (max-width:760px){
  ul.products li.product,.zb-card{flex-basis:50%;max-width:50%;min-height:0}
  ul.products li.product a.button{display:none}
}

/* ===================================================================
   CARD PARITY CORRECTIONS (measured diff vs live, 2026-09-14)
   Four misses from the first pass:
     card 213px not 222  - the shop container was too narrow
     3 per row not 4     - consequence of the above
     title 16px not 12.8 - WooCommerce core outranked the theme
     price wrong size+colour - same cause

   WooCommerce core ships `.woocommerce ul.products li.product .price`
   at (0,3,3); the theme's `ul.products li.product .price` is (0,1,3) and
   loses. Match core's SHAPE rather than reaching for !important - the
   same fix breazy needed for pagination.
   =================================================================== */

/* Live category layout at 1440: sidebar 305 at x=111, content 914 at x=416,
   grid 889 at x=429. Total span 111 -> 1330 = 1219px, centred. That produces
   889/4 = 222.25px cards. */
.zb-shop{max-width:1219px;padding-inline:0}
.zb-shop__main{padding-left:13px;padding-right:12px}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .zb-card__title{
  font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:12.8px;line-height:19.2px;font-weight:400;text-transform:uppercase;
  text-align:center;color:#333;margin:0 0 12px;padding:0 13px}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount{
  font-family:AvenirNext-Medium,Arial,Helvetica,sans-serif;
  font-size:16px;line-height:24px;font-weight:400;color:#707070}

.woocommerce ul.products li.product a.button{
  background:transparent;color:var(--brand);font-size:14px;font-weight:600;
  text-transform:uppercase;padding:8px 6px;border-radius:4px;line-height:16px}
.woocommerce ul.products li.product a.button:hover{
  background:var(--brand-wash);color:var(--brand-fill)}

@media (max-width:1280px){
  .zb-shop{max-width:100%;padding-inline:36px}
}

/* WooCommerce core sets `.woocommerce ul.products li.product{margin:0 3.8% 2.992em 0}`
   at (0,3,3) for its own float grid. The early guard block resets margin at
   (0,1,3) and loses, so every card carried a 3.8% right margin - 222px + 34px
   of margin meant only THREE fitted a 889px row instead of four. Third instance
   of the same lesson on this theme: when a rule fights WooCommerce, match its
   selector shape, do not out-shout it with !important. */
.woocommerce ul.products li.product{margin:0 0 2.992em 0;width:auto;float:none}

/* ===================================================================
   TWO MEASURED BUGS, FIXED (2026-09-14)

   1. Card images rendered 196x196 inside a 167px well and were being
      CROPPED top and bottom (overflow:hidden hid it, so it looked fine).
      Cause: the <img> is wrapped in an <a>, so THAT anchor is its
      containing block - and the anchor has no definite height, which
      makes `max-height:100%` resolve against nothing and do nothing.
      A percentage max-height needs a parent with a definite height.
      Fix: give the anchor the well's box. Also restate width/height at
      WooCommerce's own specificity, because
      `.woocommerce ul.products li.product img{width:100%;height:auto}`
      is (0,3,3) and beats the theme's (0,1,1).

   2. The search field measured 731px against live's 735. The header row
      is a flex container with `gap:24px` AND `.zb-utility` carried its
      own `margin-left:24px` - the spacing was applied twice, and the
      flexible field absorbed the 4px.
   =================================================================== */

.zb-card__media a{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:0}

.woocommerce ul.products li.product .zb-card__media img,
.woocommerce ul.products li.product img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;display:block}

/* gap already provides the 24px; the extra margin double-spaced it */
.zb-utility{margin-left:0}

/* Live's card <img> ELEMENT is 196x167 and lets object-fit:contain letterbox
   the artwork inside it; the painted result is identical but the box differs,
   so match the box too. Safe now that .zb-card__media a has a DEFINITE height
   (167px) - height:100% against an indefinite parent is what makes a browser
   fall back to the intrinsic ratio and blow the card up. */
.woocommerce ul.products li.product .zb-card__media img{
  width:100%;height:100%;object-fit:contain}

/* ===================================================================
   BLOG, POST AND PAGE
   Prose gets its measure from the ELEMENTS, never from a max-width on
   the page wrapper: constraining the wrapper also squeezes any
   full-width component living inside it (on breazy that dropped a tile
   grid from 8 across to 5 and underlined every tile title).
   =================================================================== */

.zb-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:24px 0 40px}
.zb-blog__card{min-width:0}
.zb-blog__media{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--haze);
  border-radius:var(--radius)}
.zb-blog__media img{width:100%;height:100%;object-fit:cover;display:block}
.zb-blog__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:16px;line-height:22px;font-weight:700;text-transform:uppercase;
  margin:12px 0 6px}
.zb-blog__title a{color:#333;text-decoration:none}
.zb-blog__title a:hover{color:var(--brand-fill)}
.zb-blog__excerpt{font-size:14px;line-height:21px;color:var(--muted);margin:0}

.zb-post{padding-block:24px 56px}
.zb-post__title,.zb-page__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:35.2px;line-height:44px;font-weight:700;color:#333;margin:0 0 20px}
.zb-post__media{margin:0 0 24px}
.zb-post__media img{max-width:100%;height:auto;display:block}
.zb-page{padding-block:24px 56px}

/* One rich-text system for post bodies, page bodies and category copy, so the
   same authored markup looks identical wherever it appears. Scoping to
   .zb-rich is mandatory: imported markup uses generic names (.hero, .details,
   .notice, .card) that would otherwise collide with the theme. */
.zb-rich{color:var(--body);font-size:16px;line-height:26px}
.zb-rich > p,.zb-rich > ul,.zb-rich > ol,.zb-rich > h2,.zb-rich > h3,.zb-rich > h4{max-width:72ch}
.zb-rich h2{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:24px;
  line-height:32px;color:#333;margin:32px 0 12px}
.zb-rich h3{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:19px;
  line-height:27px;color:#333;margin:24px 0 10px}
.zb-rich p{margin:0 0 16px}
.zb-rich ul,.zb-rich ol{margin:0 0 16px;padding-left:22px}
.zb-rich li{margin-bottom:6px}
/* Underline links in PROSE only - a blanket .zb-rich a would underline tiles
   and cards that also live inside this wrapper. */
.zb-rich p a,.zb-rich li a,.zb-rich td a{color:var(--brand-fill);text-decoration:underline}
.zb-rich img{max-width:100%;height:auto}
.zb-rich table{border-collapse:collapse;width:100%;margin:0 0 20px}
.zb-rich th,.zb-rich td{border:1px solid var(--line);padding:8px 10px;text-align:left}

.zb-blog__intro{margin-bottom:8px}

@media (max-width:900px){.zb-blog__grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:600px){.zb-blog__grid{grid-template-columns:1fr}}

/* /brands index */
.zb-brands{list-style:none;margin:24px 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 24px}
.zb-brands__item a{color:#333;text-decoration:none;font-size:15px;line-height:24px;
  display:block;padding:6px 0;border-bottom:1px solid var(--line)}
.zb-brands__item a:hover{color:var(--brand-fill)}
.zb-brands__count{color:var(--muted);font-size:13px}

/* The nav was `height:56px` (live's measurement) while .zb-nav__list is
   flex-wrap:wrap - so as soon as the items wrapped to a second row they
   overflowed the fixed height and collided with the page heading below.
   A measured value is a MINIMUM here, not a fixed box: live only ever shows
   one row at 1440, but narrower viewports legitimately need two. */
.zb-nav{height:auto;min-height:56px}
.zb-nav__list{height:auto;min-height:56px}

/* ===================================================================
   SINGLE PRODUCT
   Measured on https://zamplebox.com/e-juice/slush-berry-slush/ at 1440:
     wrapper 1194 at x=123   gallery 597 (left)   summary 597 (right)
     main image 521x521 object-fit:contain
     brand link 14px #40a839
     title 32px/46.4px AvenirNext-Heavy 700 #000, margin 0 0 16px
     price 16px/24px #333 AvenirNext-Medium 400
     select 48px tall, 1px #ccc, radius 4, padding 12px 48px 12px 16px
     qty 40x60 centred
     add-to-cart #40a839 / white, 16px 600 UPPERCASE, padding 14px 36px, r4
     tabs DESCRIPTION / CUSTOMER REVIEWS, 54px tall
   =================================================================== */

.zb-product{max-width:1194px;margin-inline:auto;padding-block:24px 48px}
.zb-product__cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0}
.zb-product__gallery{flex:0 0 50%;max-width:50%;min-width:0}
.zb-product__summary{flex:0 0 50%;max-width:50%;min-width:0;padding:0 12px 0 24px}

.zb-product__gallery .woocommerce-product-gallery{width:100%!important;float:none!important;
  margin:0 0 24px}
.zb-product__gallery .woocommerce-product-gallery__image img{width:100%;height:auto;
  max-width:521px;object-fit:contain;display:block;margin-inline:auto}
/* The floating magnifier is redundant once the image itself opens the
   lightbox, and it is the element that used to paint over the variation
   dropdown. Zoom support is off; the whole image is the target. */
.zb-product__gallery .woocommerce-product-gallery__trigger{display:none!important}
.zb-product__gallery .woocommerce-product-gallery__image a{cursor:zoom-in}
img.zoomImg{display:none!important}

.zb-product__brand{margin:0 0 4px;font-size:14px;line-height:21px}
.zb-product__brand a{color:var(--brand);text-decoration:none}
.zb-product__brand a:hover{color:var(--brand-fill);text-decoration:underline}

.zb-product__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:32px;line-height:46.4px;font-weight:700;color:#000;margin:0 0 16px}

.zb-product__price,.zb-product__price .price{font-family:AvenirNext-Medium,Arial,Helvetica,sans-serif;
  font-size:16px;line-height:24px;font-weight:400;color:#333;margin:0 0 16px}
.zb-product__price del{opacity:.6;margin-right:6px}
.zb-product__price ins{text-decoration:none}

/* Variation selects */
.zb-product .variations{width:100%;margin:0 0 16px;border:0}
.zb-product .variations tr,.zb-product .variations td,.zb-product .variations th{
  display:block;width:100%;border:0;padding:0;text-align:left}
.zb-product .variations th.label label{display:block;font-size:16px;font-weight:400;
  color:#000;margin:0 0 8px}
.zb-product .variations select{width:100%;height:48px;border:1px solid #ccc;
  border-radius:4px;font-size:16px;padding:12px 48px 12px 16px;background:#fff;
  color:#333;margin-bottom:16px;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707070' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.zb-product .reset_variations{font-size:13px;color:var(--muted)}

/* Quantity */
.zb-product .quantity input.qty{width:40px;height:60px;text-align:center;font-size:16px;
  border:1px solid #ccc;border-radius:4px;color:#333}

/* Add to cart.
   NOTE white on #40a839 is 3.05:1 and fails WCAG AA - it does on the live
   site too. Reproduced verbatim because the brief is an exact match;
   --brand-fill #2f7a2a is 5.33:1 if a fix is ever wanted. Flagged in CLAUDE.md. */
.zb-product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px}
.zb-product .single_add_to_cart_button{background:var(--brand);color:#fff;font-size:16px;
  font-weight:600;text-transform:uppercase;border:0;border-radius:4px;padding:14px 36px;
  cursor:pointer;line-height:1.2}
.zb-product .single_add_to_cart_button:hover{background:var(--brand-fill);color:#fff}
/* flex-basis follows the container's MAIN AXIS: a basis written for a row
   becomes a HEIGHT in a column. A variable product puts the button inside
   .woocommerce-variation-add-to-cart (row); a simple product has it as a direct
   child of form.cart. Scope per context or simple products get a 220px-tall
   button. */
.woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  width:100%}
.woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:0 0 auto}
.zb-product form.cart > .single_add_to_cart_button{flex:0 0 auto}

/* Tabs */
.zb-product__tabs{max-width:1194px;margin-inline:auto;padding-block:16px 8px}
.zb-product__tabs .wc-tabs{display:flex;gap:48px;list-style:none;margin:0;padding:0;
  border-bottom:1px solid var(--line)}
.zb-product__tabs .wc-tabs li{margin:0}
.zb-product__tabs .wc-tabs li a{display:block;padding:15px 0;font-size:16px;font-weight:700;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif}
.zb-product__tabs .wc-tabs li.active a{color:#333;box-shadow:inset 0 -3px 0 0 var(--brand)}
.zb-product__tabs .woocommerce-Tabs-panel{padding-top:24px;font-size:16px;line-height:24px;
  color:#333}
.zb-product__tabs .woocommerce-Tabs-panel h2{display:none}

@media (max-width:900px){
  .zb-product__gallery,.zb-product__summary{flex:0 0 100%;max-width:100%;padding:0}
  .zb-product__summary{padding-top:24px}
  .zb-product__title{font-size:26px;line-height:34px}
  .zb-product__tabs .wc-tabs{gap:24px}
}

/* The add-to-cart button rendered WooCommerce purple (#7F54B3) at
   `.woocommerce:where(...) button.button.alt` - `:where()` contributes ZERO
   specificity, so that rule is effectively (0,3,1) and beat the theme's
   `.zb-product .single_add_to_cart_button` (0,2,0). Fourth instance of the same
   lesson: match WooCommerce's shape, do not shout over it. This is (0,4,1). */
.woocommerce .zb-product button.single_add_to_cart_button.button,
.woocommerce .zb-product .single_add_to_cart_button.button.alt{
  background:var(--brand);color:#fff;font-size:16px;font-weight:600;
  text-transform:uppercase;border:0;border-radius:4px;padding:14px 36px;line-height:1.2}
.woocommerce .zb-product button.single_add_to_cart_button.button:hover,
.woocommerce .zb-product .single_add_to_cart_button.button.alt:hover{
  background:var(--brand-fill);color:#fff}

/* Kill the float woocommerce.css puts on the gallery (it carries .images). */
.zb-product__gallery .woocommerce-product-gallery,
.woocommerce .zb-product div.images{width:100%!important;float:none!important;margin:0 0 24px}

/* ===================================================================
   FRONT PAGE  (measured bands at 1440px)
     hero 650 full-bleed video   heading 64px AvenirNext-Heavy 900 white
     CTA 302x68, #40a839, white, 32px, padding 10px 24px, radius 0, UPPERCASE
     #how_it_works h2 38.4px     #subscription_plans bg #ececec
     product rows h2 36px
   =================================================================== */
.zb-hero{position:relative;min-height:650px;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;background:#111}
.zb-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zb-hero__scrim{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.zb-hero__inner{position:relative;z-index:1;max-width:1242px;padding-inline:36px}
.zb-hero__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:64px;line-height:1.08;font-weight:900;color:#fff;margin:0 0 28px;
  text-transform:uppercase}
/* Live's CTA is white on #40a839 (3.05:1) with square corners - reproduced
   verbatim; see the contrast note in CLAUDE.md. */
.zb-hero__cta{display:inline-block;background:var(--brand);color:#fff;
  font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:32px;
  font-weight:700;text-transform:uppercase;text-decoration:none;
  padding:10px 24px;border-radius:0;min-width:302px}
.zb-hero__cta:hover{background:var(--brand-fill);color:#fff}

.zb-home__how{padding-block:56px}
.zb-home__how h2,.zb-home__how h1{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:38.4px;line-height:1.2;text-transform:uppercase;color:#333;
  margin:0 0 24px;text-align:center}
.zb-home__plans{background:#ececec;padding-block:48px}
.zb-home__plans h2{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:38.4px;line-height:1.2;text-transform:uppercase;color:#333;
  margin:0 0 24px;text-align:center}

.zb-home__row{padding-block:32px}
.zb-home__rowtitle{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:36px;line-height:1.2;font-weight:700;text-transform:uppercase;
  color:#333;margin:0 0 24px;text-align:center}
/* The homepage rows reuse the card component, so they inherit every fix made
   for the archive grid (clearfix kill, float/width reset, 4-up pitch). */
.zb-home__row ul.products{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}

@media (max-width:900px){
  .zb-hero{min-height:420px}
  .zb-hero__title{font-size:36px}
  .zb-hero__cta{font-size:22px;min-width:0}
  .zb-home__how h2,.zb-home__plans h2,.zb-home__rowtitle{font-size:26px}
}

/* Hero CTA measured 302x68 on live; 32px text with 10px/24px padding only
   reaches 44px, so the button's height comes from its line-height. */
.zb-hero__cta{line-height:48px}

/* --- How it works --- */
.zb-how{max-width:1242px;margin-inline:auto;padding-inline:36px}
.zb-how__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:38.4px;
  line-height:1.2;text-transform:none;color:#333;margin:0 0 12px;text-align:center}
.zb-green{color:var(--brand-fill)}
.zb-how__lead{text-align:center;font-size:20px;line-height:30px;color:#333;margin:0 0 8px}
.zb-how__sub{text-align:center;font-size:16px;line-height:24px;color:var(--muted);margin:0 0 40px}
.zb-how__row{display:flex;flex-wrap:wrap;align-items:center;gap:40px;margin-bottom:48px}
.zb-how__row--flip{flex-direction:row-reverse}
.zb-how__media{flex:1 1 380px;min-width:0}
.zb-how__media img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.zb-how__copy{flex:1 1 380px;min-width:0}
.zb-how__copy h3{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:28px;
  line-height:34px;color:#333;margin:0 0 16px}
.zb-list{list-style:none;margin:0 0 16px;padding:0}
.zb-list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:16px;line-height:24px}
.zb-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--brand)}
.zb-how__kicker{font-size:20px;line-height:28px;color:#333;margin:0 0 20px}
.zb-btn{display:inline-block;background:var(--brand);color:#fff;font-weight:700;
  text-transform:uppercase;text-decoration:none;padding:12px 28px;border-radius:var(--radius);
  font-size:16px}
.zb-btn:hover{background:var(--brand-fill);color:#fff}

/* --- Subscription plans (bg #ececec on live) --- */
.zb-plans__title{font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:38.4px;
  line-height:1.2;text-transform:uppercase;color:#333;margin:0 0 8px;text-align:center}
.zb-plans__sub{text-align:center;font-size:18px;color:var(--muted);margin:0 0 28px}
.zb-plans__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1000px;margin-inline:auto}
.zb-plan{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:#333;border:1px solid var(--line)}
.zb-plan:hover{border-color:var(--brand)}
.zb-plan__media{display:block;aspect-ratio:1/1;background:var(--haze);overflow:hidden}
.zb-plan__media img{width:100%;height:100%;object-fit:contain;display:block}
.zb-plan__body{display:block;padding:16px;text-align:center}
.zb-plan__name{display:block;font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;
  font-size:20px;text-transform:uppercase;margin-bottom:6px}
.zb-plan__spec{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.zb-plan__unit{display:block;font-size:15px;margin-bottom:4px}
.zb-plan__unit em{font-style:normal;color:var(--muted);font-size:13px}
.zb-plan__total{display:block;font-size:15px}
.zb-plan__total strong{font-size:22px;font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif}

@media (max-width:820px){
  .zb-how__row,.zb-how__row--flip{flex-direction:column;gap:24px}
  .zb-plans__grid{grid-template-columns:1fr;max-width:420px}
}

/* Live lays the how-it-works rows out on a Bootstrap 5/7 split of a 1170
   container (~41.7% / 58.3%). Letting the media column flex freely made the
   images ~580px wide and pushed the band from live's 1674px to 2709px. */
.zb-how__media{flex:0 0 41.7%;max-width:41.7%}
.zb-how__copy{flex:1 1 auto}
@media (max-width:820px){
  .zb-how__media{flex:0 0 100%;max-width:100%}
}

/* Two bugs in the how-it-works rows, both measured:

   1. `.zb-how__copy{flex:1 1 auto}` let the copy column size to its CONTENT,
      so media(41.7%) + copy(auto) + 40px gap exceeded 100% and rows 1 and 3
      WRAPPED - the copy dropped to its own line at the full 1098px and the
      band grew to 2984px against live's 1674px. A flex main column needs a
      ZERO basis to shrink; this is the same trap that put WooCommerce's
      checkout sidebar on its own row on breazy.

   2. `.zb-how__media img{width:100%}` UPSCALED small sources: a 299x482 image
      was being stretched to 458x738. Bound it instead of forcing it. */
.zb-how__copy{flex:1 1 0;min-width:0}
.zb-how__media img{width:auto;max-width:100%;height:auto;margin-inline:auto}

/* ===================================================================
   CART + CHECKOUT
   WooCommerce ships these as BLOCKS, which ignore theme tokens entirely and
   render their primary actions as dark slate boxes with underlined link text.
   Every lesson below was paid for on breazy:

   - `.wc-block-cart__sidebar .wc-block-components-sidebar` matches NOTHING:
     both classes sit on the SAME element, so it must be COMPOUND (.a.b).
     Written as a descendant it silently never applies.
   - Woo splits the layout 65/35 with NO gap, so the two rounded cards abut and
     their adjacent borders read as a broken seam. Hand widths to flex and let
     `gap` draw the gutter.
   - `.wc-block-cart-items` borders every <td> separately, so one row's rule is
     drawn as three segments that break at each column boundary. Clear borders
     table-wide and redraw once on the ROW.
   - Checkout's layout is `flex-wrap: wrap`, so a main column with
     `flex-basis:auto` claims the whole row and punts the sidebar to the next
     line. It needs a ZERO basis.
   - Woo has no CSS breakpoint here (it uses JS size classes), so the mobile
     stack must be declared explicitly.
   `!important` is genuinely required: wc-blocks.css wins otherwise.
   =================================================================== */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link){
  background:var(--brand)!important;color:#fff!important;border:0!important;
  border-radius:4px!important;font-weight:600!important;text-transform:uppercase!important;
  text-decoration:none!important;font-size:16px!important;padding:14px 28px!important}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover{background:var(--brand-fill)!important}

/* Compound, not descendant - both classes are on the same element. */
.wc-block-cart__sidebar.wc-block-components-sidebar,
.wc-block-checkout__sidebar.wc-block-components-sidebar{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px!important}
/* Styling BOTH the sidebar AND the order-summary block draws a second rounded
   box inside the first - only the sidebar gets the card. */
.wp-block-woocommerce-cart-order-summary-block{border:0;padding:0;background:none}

/* Give the two columns a real gutter instead of letting them abut. */
.wc-block-cart .wc-block-cart__main{flex:1 1 0;min-width:0}
.wc-block-cart .wc-block-cart__sidebar{flex:0 0 360px;max-width:360px}
.wc-block-cart .wp-block-woocommerce-cart{display:flex;gap:32px;flex-wrap:wrap}
.wc-block-checkout__main{flex:1 1 0!important;min-width:0}
.wc-block-checkout__sidebar{flex:0 0 360px;max-width:360px}

/* Row dividers on the ROW, never per-cell. */
.wc-block-cart-items td,.wc-block-cart-items th{border:0!important}
.wc-block-cart-items__row{border-bottom:1px solid var(--line)}
.wc-block-cart-items thead{border-bottom:1px solid var(--line)}

.wc-block-components-product-name{color:#333!important;text-decoration:none!important;
  font-family:AvenirNext-Heavy,Arial,Helvetica,sans-serif;font-size:14px}
.wc-block-components-totals-item__value,.wc-block-formatted-money-amount{color:#333}
.wc-block-components-text-input input,.wc-block-components-country-input select,
.wc-block-components-state-input select{border:1px solid #ccc!important;border-radius:4px!important;
  font-size:16px!important}

/* Woo uses JS size classes rather than media queries, so state the stack. */
@media (max-width:900px){
  .wc-block-cart .wp-block-woocommerce-cart{flex-direction:column}
  .wc-block-cart .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar{flex:1 1 100%;max-width:none}
}

/* Classic (non-block) cart/checkout, in case either page is switched back. */
.woocommerce .cart .button,.woocommerce .checkout-button,
.woocommerce #place_order{background:var(--brand)!important;color:#fff!important;
  text-transform:uppercase;font-weight:600;border-radius:4px;padding:14px 28px}

/* Search form + 404 */
.zb-404{padding-block:32px 64px}
.zb-404__links{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.zb-404__links a{color:var(--brand-fill);text-decoration:none;font-weight:600}
.zb-404__links a:hover{text-decoration:underline}
.search-form{display:flex;gap:8px;margin:16px 0;max-width:520px}
.search-form input[type="search"]{flex:1 1 0;min-width:0;height:45px;background:#fafafa;
  border:1px solid #eaeaea;border-radius:4px;padding:0 14px;font-size:16px}
.search-form button,.search-form input[type="submit"]{background:var(--brand-fill);color:#fff;
  border:0;border-radius:4px;padding:0 20px;font-weight:600;text-transform:uppercase;cursor:pointer}

/* Long category copy: intro visible, the rest behind a toggle, mirroring the
   live storefront's .panel + "Read more..." accordion. */
.zb-rich__panel[hidden]{display:none}
.zb-rich__more{display:inline-block;margin:4px 0 8px;padding:0;background:none;
  border:0;cursor:pointer;font-family:inherit;font-size:16px;line-height:26px;
  color:var(--brand-fill);text-decoration:underline}
.zb-rich__more:hover{color:#276b22}
.zb-rich__more .zb-rich__more-close{display:none}
.zb-rich__more[aria-expanded="true"] .zb-rich__more-open{display:none}
.zb-rich__more[aria-expanded="true"] .zb-rich__more-close{display:inline}



/* ---------------------------------------------------------------------
   Live-parity product summary (added 17 Sep 2026)
   Live shows: stock pill + brand row, star/review row, green price,
   option BUTTONS (not selects), -/+ qty stepper, full-width green CTA
   and a four-icon trust strip. #40a839 fails contrast with white text,
   so every white-on-green surface here uses --brand-fill.
   --------------------------------------------------------------------- */
.zb-product__meta{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.zb-product__stock{display:inline-block;background:var(--brand-fill);color:#fff;
  font-size:13px;line-height:1;font-weight:700;padding:7px 10px;border-radius:3px}
.zb-product__stock.is-out{background:#8a8a8a}
.zb-product__brand{margin:0;font-size:14px;line-height:21px;font-weight:700;background:none;padding:0}
.zb-product__brand,.zb-product__brand a{color:var(--brand-fill);text-decoration:none;text-transform:none;letter-spacing:0}
.zb-product__brand a:hover{text-decoration:underline}
.zb-product__rating{display:flex;align-items:center;gap:8px;margin:10px 0 6px;
  font-size:14px;line-height:20px;color:var(--muted)}
.zb-product__stars{letter-spacing:3px;font-size:17px;color:#e3e3e3}
.zb-product__stars i{font-style:normal}
.zb-product__stars i.is-on{color:#f5a623}
.zb-product__sep{color:#ccc}
.zb-product__review-link{color:var(--brand-fill);font-weight:600;text-decoration:none}
.zb-product__review-link:hover{text-decoration:underline}
.zb-product__price,.zb-product__price .price,.zb-product__price .amount{color:var(--brand-fill)}

/* Variation rows: label above, buttons below (the select stays in the DOM,
   hidden, so WooCommerce variation matching keeps working). */
.zb-product .variations,.zb-product .variations tbody,.zb-product .variations tr,
.zb-product .variations td,.zb-product .variations th{display:block;width:100%}
.zb-product .variations tr{margin:0 0 18px}
.zb-product .variations th.label,.zb-product .variations td.label{padding:0 0 10px}
.zb-product .variations th.label label{font-size:16px;font-weight:700;color:#333}
.zb-product .variations th.label label:after{content:"*";color:#d0021b;margin-left:4px}
.zb-product .variations select.zb-select-hidden{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;overflow:hidden}
.zb-swatches{display:flex;flex-wrap:wrap;gap:10px}
.zb-swatch{min-width:62px;padding:12px 16px;border:1px solid #ccc;border-radius:var(--radius);
  background:#fff;color:#333;font-size:15px;line-height:1;cursor:pointer;transition:border-color .15s}
.zb-swatch:hover{border-color:#333}
.zb-swatch.is-active{border-color:#000;box-shadow:inset 0 0 0 1px #000;font-weight:600}
.zb-swatch.is-unavailable{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* Quantity stepper + CTA */
.zb-product .quantity{display:inline-flex;align-items:stretch;border:1px solid #ddd;
  border-radius:var(--radius);overflow:hidden}
.zb-product .quantity input.qty{width:46px;height:56px;border:0;text-align:center;font-size:16px}
.zb-qty-btn{width:38px;border:0;background:var(--haze);color:#333;font-size:18px;line-height:1;cursor:pointer}
.zb-qty-btn:hover{background:#e6e6e6}
.woocommerce .zb-product .single_add_to_cart_button.button.alt,
.zb-product .single_add_to_cart_button{background:var(--brand-fill);color:#fff;border:0;
  text-transform:uppercase;font-weight:700;font-size:16px;letter-spacing:.02em;
  padding:19px 36px;border-radius:var(--radius);flex:1 1 260px;min-width:240px}
.woocommerce .zb-product .single_add_to_cart_button.button.alt:hover,
.zb-product .single_add_to_cart_button:hover{background:#26621f;color:#fff}
.zb-product .single_add_to_cart_button.disabled,
.zb-product .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed}

/* Trust strip */
.zb-trust{display:flex;gap:20px;list-style:none;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid #eee}
.zb-trust__item{flex:1 1 0;text-align:center;font-size:13px;line-height:17px;color:#333}
.zb-trust__item svg{display:block;margin:0 auto 8px;color:var(--brand-fill)}

@media (max-width:781px){
  .zb-product .single_add_to_cart_button{width:100%;flex:1 1 100%}
  .zb-trust{flex-wrap:wrap;gap:16px}
  .zb-trust__item{flex:1 1 40%}
}