/*
Theme Name: Breazy
Description: WooCommerce storefront for breazy.com. Confident consumer brand direction.
Version: 2.0.0
Requires PHP: 8.0
Text Domain: breazy
*/

/* ============================================================================
   DESIGN SYSTEM

   Direction: confident consumer brand. Ink navy structures the page, one blue
   means "interactive", one orange means "a deal" and nothing else is coloured.

   Built against three measured failures of the previous storefront and three
   found in the direction study:
     - the old theme carried 66 stray hexes and 21 border-radius values, and 48%
       of its type was 14px or smaller;
     - the direction study's own card overflowed its container at every desktop
       width, and used 24 arbitrary font sizes rather than a scale.
   So: a closed palette, three radii, and an eight-step scale with nothing below
   13px, and that reserved for uppercase labels.

   The category-specific move is the STRENGTH SCALE. Nicotine strength is the
   axis this catalogue turns on - 0/3/6/12/50mg, on 91% of live products - so it
   is treated as a first-class typographic object with its own tabular voice,
   rather than buried in a prose meta line.
   ========================================================================== */

:root{
  /* ---- ink: structure ---- */
  --ink:#0B1B2B;            /* headings, primary surfaces */
  --ink-2:#14293D;
  --ink-3:#1E3A52;
  --body:#25333F;           /* body copy - never #333 */
  --muted:#5B6B79;
  --faint:#8496A4;

  /* ---- ground ---- */
  --paper:#FFFFFF;
  --haze:#F2F5F8;           /* product wells, page bands */
  --line:#D9E1E8;
  --line-2:#EAF0F4;

  /* ---- brand blue: the PROMINENT accent -----------------------------
     Sampled from the wordmark: #16A4F5 is 5,628px of the logo, #276D96 is
     1,834px. #16A4F5 is only 2.74:1 on white, so it can never carry white
     text or stand alone as a UI edge. It earns its prominence as a FILL with
     ink type on it (6.35:1), and --brand-ink is the darkened version of the
     same hue used wherever blue has to be text (4.71:1).                  */
  --brand:#16A4F5;          /* prominent accent: chips, borders, washes, rules */
  --brand-fill:#0879BA;     /* any surface carrying WHITE text - 4.71:1 AA    */
  --brand-ink:#0879BA;      /* the same blue where it must be legible text    */
  --brand-deep:#276D96;     /* logo's darker blue - the secondary accent      */
  --brand-wash:#E7F5FE;
  --brand-edge:#7FCDF9;

  /* Legacy aliases kept so no component silently loses its colour. */
  --blue:var(--brand);
  --blue-ink:var(--brand-ink);
  --blue-wash:var(--brand-wash);

  /* ---- deals: orange, and only deals ---- */
  --deal:#D8380F;
  --deal-2:#FF4B1F;
  --deal-wash:#FFF0EA;

  /* ---- state ---- */
  --ok:#0E7C4A;
  --warn:#9A6700;
  --gone:#98A6B2;

  /* ---- type ----------------------------------------------------------
     Eight steps. Everything on the page uses one of these; there is no
     12.5/13.5/14.5 tier. Nothing below --fs-1, and that is uppercase
     labels only.                                                        */
  /* ---- brand typefaces ----------------------------------------------
     azo-sans-web is the storefront's own face, served through Adobe Fonts.
     Adobe licences per-domain, so the BigCommerce kit will not serve here -
     define BREAZY_TYPEKIT_ID in wp-config.php to switch it on. Until then Jost
     stands in: geometric with a single-storey a, so it holds the same shape as
     Azo Sans rather than falling back to something unrelated.
     Roboto Condensed is the display face the live store already loads.    */
  --sans:"azo-sans-web","Jost","Helvetica Neue",Arial,system-ui,sans-serif;
  --display:"Roboto Condensed","azo-sans-web","Jost",Arial,sans-serif;
  /* Monospace removed site-wide by request. The token stays so every rule that
     referenced it keeps working; it now resolves to the body face, and
     font-variant-numeric:tabular-nums still keeps figures aligned. */
  --mono:var(--sans);

  --fs-nav:15px; /* navigation only - its own step, not part of the content scale */
  --fs-1:13px;   /* uppercase labels, spec strip */
  --fs-2:15px;   /* secondary text, meta */
  --fs-3:17px;   /* body, product names - the old store's failure was here */
  --fs-4:20px;   /* card price, sub-headings */
  --fs-5:26px;   /* section titles */
  --fs-6:34px;   /* page titles, PDP price */
  --fs-7:clamp(38px,4.6vw,58px);   /* hero */
  --fs-8:clamp(48px,6vw,76px);     /* deal shout */

  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh:1.55;

  /* ---- rhythm: one 8px scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  /* ---- three radii, no more ---- */
  --r-0:0;
  --r-1:4px;
  --r-pill:999px;
  --r-panel:14px;           /* ported BigCommerce content panels only */

  --container:1320px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:var(--fs-3);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{
  color:var(--ink);line-height:var(--lh-tight);margin:0;text-wrap:balance;
  font-family:var(--display);letter-spacing:-.005em;
}

a{color:var(--blue-ink);text-decoration:none}
a:hover{color:var(--blue-ink);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--r-1);
}

img{max-width:100%;height:auto}

.bz-container{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.bz-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:var(--s3) var(--s4);
}
.bz-skip:focus{left:0;color:#fff}

/* ---------------------------------------------------------------- buttons */
.bz-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--brand-fill);border:1px solid var(--brand-fill);color:#fff;
  border-radius:var(--r-1);
  font-family:var(--sans);font-size:var(--fs-2);font-weight:700;
  letter-spacing:.01em;line-height:1;
  padding:14px var(--s5);min-height:48px;
  cursor:pointer;text-align:center;
  transition:background-color .15s ease,border-color .15s ease;
}
.bz-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover{
  background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;text-decoration:none;
}
.bz-button--ghost{
  background:transparent;color:var(--ink);border-color:var(--line);
}
.bz-button--ghost:hover{background:var(--haze);border-color:var(--ink);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================================
   STATUTORY WARNING + HEADER
   The nicotine warning is required by law. It is designed as the top edge of
   the page rather than bolted on, which is what the old storefront did with a
   13px line of header text.
   ========================================================================== */

/* Matches the live storefront exactly. Its .header-warning p is:
     font-size:2.2rem; line-height:2.2rem  (html is 14px, so 30.8px)
     font-weight:600; color:#333; padding:15px; text-align:center
     and no background at all - it sits on white.
   Under 768px it drops to 1rem/1rem (14px). Two lines, split on a <br>. */
.bz-warning{background:var(--paper);padding:15px}
.bz-warning p{
  width:100%;display:block;text-align:center;position:relative;
  margin:0;padding:15px;
  font-family:var(--sans);
  font-size:30.8px;line-height:30.8px;font-weight:600;
  color:#333;
  /* 21 CFR 1143.3 requires the nicotine warning to sit inside a rectangular
     border, so the rule is compliance rather than decoration. */
  border:3px solid #000;
}
@media (max-width:768px){
  .bz-warning{padding:10px}
  .bz-warning p{font-size:14px;line-height:1.3;padding:10px;border-width:2px}
}

.bz-promo{
  background:var(--deal);color:#fff;
  font-size:var(--fs-2);font-weight:700;text-align:center;
  padding:var(--s2) var(--s4);
}
.bz-promo a{color:#fff;text-decoration:underline}
.bz-promo .mono{letter-spacing:.08em}

.bz-header{background:var(--paper);border-bottom:1px solid var(--line)}
.bz-header__inner{
  display:grid;
  /* Equal side columns so the search sits on the container's centre line
     rather than centred in the leftover space between logo and cart, which
     the logo and cart being different widths would throw off. */
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--s5);
  padding-top:var(--s4);padding-bottom:var(--s4);
}
.bz-header__logo{justify-self:start}
.bz-header__inner > .bz-search{justify-self:center}
.bz-header__inner > .bz-utility{justify-self:end}
.bz-header__logo img{display:block;max-height:52px;width:auto}

/* Header search, sized to the live storefront: a 420x40 field with a hairline
   brand border and the magnifier sitting inside it, not a filled button block
   twice the width. On phones the field collapses and only the icon remains,
   which is what the live header does at that size. */
.bz-search{
  display:flex;align-items:center;min-width:0;
  /* The header lays its columns out with grid, so a flex-basis alone did not
     hold: the track stretched the field to 852px. Cap the width itself. */
  flex:0 0 auto;width:420px;max-width:100%;
  position:relative;
}
.bz-search__field{
  flex:1 1 auto;min-width:0;height:40px;
  border:1px solid var(--brand-fill);border-radius:5px;
  padding:0 42px 0 14px;
  font:inherit;font-size:14px;color:var(--body);background:var(--paper);
}
.bz-search__field::placeholder{color:#666;font-style:italic}
.bz-search__field:focus{outline:2px solid var(--brand);outline-offset:1px}
.bz-search__submit{
  position:absolute;right:1px;top:1px;bottom:1px;width:40px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--brand);cursor:pointer;padding:0;
  border-radius:0 5px 5px 0;
}
.bz-search__submit:hover{color:var(--brand-fill)}
.bz-search__icon{display:block}

@media (max-width:860px){
  /* Icon only: the field collapses to the control, and expands on focus. */
  .bz-search{flex:0 0 auto}
  .bz-search__field{
    width:40px;padding:0;border-color:transparent;background:transparent;
    color:transparent;cursor:pointer;
  }
  .bz-search__field::placeholder{color:transparent}
  .bz-search__field:focus{
    width:min(60vw,320px);padding:0 42px 0 14px;
    border-color:var(--brand-fill);background:var(--paper);color:var(--body);cursor:text;
  }
  .bz-search__field:focus::placeholder{color:#666}
}

.bz-utility{display:flex;align-items:center;gap:var(--s5);font-size:var(--fs-2);white-space:nowrap}
.bz-utility a{color:var(--ink);font-weight:600}
/* Cart button, matching the live storefront: a solid orange box carrying the
   cart icon, an uppercase label and a count pill. The live fill is #BF4B08;
   white on it measures 5.06:1, so it passes AA unchanged. */
.bz-cart{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:#BF4B08;color:#fff !important;
  padding:11px 14px;border-radius:var(--r-1);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:var(--fs-2);line-height:1;
}
.bz-cart:hover{background:#A64007;color:#fff !important;text-decoration:none}
.bz-cart__icon{
  width:20px;height:20px;flex:none;display:block;
  background:url("assets/header-cart-button-icon.png") no-repeat center/contain;
}
.bz-cart__label{white-space:nowrap}
.bz-cart__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;
  background:#fff;color:#BF4B08;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:var(--fs-1);font-weight:700;
}

/* ---- primary nav ---- */
.bz-nav{background:var(--paper);border-bottom:1px solid var(--line)}
.bz-nav__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;justify-content:center;overflow:visible;
}
/* The live storefront sets the nav in uppercase on white. Uppercase is wider
   than sentence case at the same size, so the step drops to 13.5px and the
   horizontal padding tightens - together those keep all nine items on one row
   at the container width, which is the constraint that matters here. */
.bz-nav__list > li > a,.bz-nav__item > a{
  display:block;padding:16px 15px;color:var(--ink);
  font-size:14.5px;font-weight:500;letter-spacing:.045em;text-transform:uppercase;
  line-height:1.2;white-space:nowrap;
}
.bz-nav__list > li > a:hover,.bz-nav__item > a:hover,
.bz-nav__item--has-children:hover > a,
.bz-nav__item--has-children:focus-within > a{
  background:transparent;color:var(--brand-ink);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--brand);
}

/* ============================================================================
   THE STRENGTH SCALE
   Nicotine strength is the axis this catalogue turns on - 91% of live products
   are variable on it, and it is the first thing a returning customer checks.
   It gets its own tabular voice and a fixed slot on every card, so 3mg sits
   directly above 3mg down a column. This is the part of the design that is
   specific to vaping rather than to consumer retail in general.
   ========================================================================== */

.bz-strength{
  display:flex;flex-wrap:wrap;gap:var(--s1);
  font-family:var(--mono);font-size:var(--fs-1);font-variant-numeric:tabular-nums;
}
.bz-strength__val{
  display:inline-block;padding:2px 6px;border-radius:var(--r-1);
  background:var(--haze);color:var(--ink-3);border:1px solid var(--line);
  font-weight:600;line-height:1.4;
}
.bz-strength__val--zero{background:var(--brand-wash);border-color:var(--brand-edge);color:#0873B0}
.bz-strength__val--gone{color:var(--gone);border-style:dashed;text-decoration:line-through}

/* ============================================================================
   PRODUCT CARD

   Rebuilt against two defects measured in the direction study:
     1. its price/button row overflowed the card by 29px at 1280 and 21px at
        1440 - the most repeated component on the store, broken at every
        desktop width. Fixed by giving the card an explicit grid, min-width:0
        on every child that can hold long content, and no overflow:hidden
        anywhere that can clip a control.
     2. all variant data collapsed into one unaligned prose line, so a row of
        cards could not be compared down a column - the core task on a store
        that is 91% variable. Fixed with fixed slots: strength, size, price,
        deal price, stock. Every card has every slot, empty if it has to be, so
        rows align.
   ========================================================================== */

ul.products{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:var(--s5);
}

.bz-card,
ul.products li.product{
  display:grid;
  grid-template-rows:auto auto auto auto auto 1fr auto;  /* fixed anatomy */
  gap:var(--s2);
  min-width:0;                       /* long names must not blow out the grid */
  margin:0;padding:var(--s4);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-1);
  position:relative;
}
.bz-card > *,ul.products li.product > *{min-width:0}
.bz-card:hover{border-color:var(--ink)}

.bz-card__media{
  display:block;background:var(--haze);border-radius:var(--r-1);
  aspect-ratio:1;padding:var(--s4);
}
.bz-card__media img{
  width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;   /* dissolves the white studio ground into the well */
}
.bz-card__placeholder{display:block;width:100%;height:100%}

.bz-card__brand{
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:0;
}
.bz-card__title{
  font-size:var(--fs-3);font-weight:600;line-height:var(--lh-snug);margin:0;
}
.bz-card__title a{color:var(--ink)}
.bz-card__title a:hover{color:var(--blue-ink)}

.bz-card__spec{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);
  font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* Price row: grid, not flex-with-margins, so nothing can push a sibling out. */
.bz-card__pricing{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:end;
}
.bz-card__price{
  font-size:var(--fs-4);font-weight:700;color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums;
}
.bz-card__price del{
  color:var(--muted);font-weight:400;font-size:var(--fs-2);margin-right:var(--s2);
}
.bz-card__price ins{text-decoration:none;color:var(--deal)}
.bz-card__deal{
  font-family:var(--mono);font-size:var(--fs-1);font-weight:600;color:var(--deal);
}
.bz-card__stock{font-size:var(--fs-1);color:var(--muted);font-family:var(--mono)}
.bz-card__stock--out{color:var(--gone)}

.bz-card__cta,
ul.products li.product .button{
  width:100%;margin:0;                    /* never wider than the card */
}

.bz-card__flag{
  position:absolute;top:var(--s4);left:var(--s4);z-index:1;
  background:var(--deal);color:#fff;
  font-size:var(--fs-1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:var(--s1) var(--s2);border-radius:var(--r-1);
}

/* ============================================================================
   CATEGORY
   ========================================================================== */

.bz-archive__head{
  display:flex;align-items:flex-start;gap:var(--s5);
  padding-top:var(--s6);padding-bottom:var(--s4);
}
.bz-page-title{font-size:var(--fs-6);font-weight:700;margin:0 0 var(--s2)}

.bz-archive__toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;
  padding:var(--s3) 0;margin-bottom:var(--s5);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:var(--fs-2);
}
.woocommerce-result-count{margin:0!important;color:var(--muted);font-family:var(--mono);font-size:var(--fs-1)}
.woocommerce-ordering{margin:0!important}
.woocommerce-ordering select{
  border:1px solid var(--line);border-radius:var(--r-1);
  padding:10px var(--s3);font:inherit;font-size:var(--fs-2);background:var(--paper);color:var(--ink);
}

.bz-archive__copy{
  margin-top:var(--s3);max-width:none;font-size:var(--fs-3);
  position:relative;overflow:hidden;
}
/* Collapsed height shows the opening heading plus two lines of body copy;
   3.6em cut the first body line in half. */
.bz-archive__copy:not(.is-open){max-height:6.4em}
/* Fade the cut edge so the collapse reads as deliberate, not as a crop. */
.bz-archive__copy:not(.is-open)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper));
  pointer-events:none;
}
.bz-archive__copy.is-open{max-height:none}
.bz-archive__copy > *:first-child{margin-top:0}
/* Category copy is mostly plain prose - 131 descriptions use <p>, 105 <h2>,
   91 carry links. Only headings and paragraphs had rules, so links, lists and
   emphasis fell back to browser defaults. */
.bz-archive__copy h2{
  font-family:var(--display);font-size:var(--fs-5);font-weight:700;
  color:var(--ink);margin:var(--s6) 0 var(--s3);line-height:var(--lh-snug);
}
.bz-archive__copy h3{
  font-family:var(--display);font-size:var(--fs-4);font-weight:700;
  color:var(--ink);margin:var(--s5) 0 var(--s2);line-height:var(--lh-snug);
}
.bz-archive__copy h4{font-size:var(--fs-3);font-weight:700;color:var(--ink);margin:var(--s4) 0 var(--s2)}
.bz-archive__copy p{margin:0 0 var(--s3);line-height:1.75}
.bz-archive__copy strong,.bz-archive__copy b{color:var(--ink);font-weight:700}
.bz-archive__copy a{color:var(--brand-ink);text-decoration:underline}
.bz-archive__copy a:hover{color:var(--brand-fill)}
.bz-archive__copy ul,.bz-archive__copy ol{margin:0 0 var(--s4);padding-left:var(--s5);line-height:1.75}
.bz-archive__copy li{margin:0 0 var(--s2)}
.bz-archive__copy img{max-width:100%;height:auto;border-radius:var(--r-1)}
/* Imported copy carries runs of empty spacer paragraphs. */
.bz-archive__copy p:empty{display:none}

.woocommerce-pagination ul{
  list-style:none;display:flex;gap:var(--s2);padding:0;margin:var(--s7) 0 0;flex-wrap:wrap;
}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:block;padding:10px var(--s4);border:1px solid var(--line);
  border-radius:var(--r-1);color:var(--ink);font-weight:600;
}
.woocommerce-pagination .current{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff}

/* ============================================================================
   LAYOUT
   ========================================================================== */

.bz-main{min-height:50vh}
.bz-content{padding-top:var(--s6);padding-bottom:var(--s8)}
.bz-logo img{display:block}

/* ============================================================================
   HOME
   ========================================================================== */

/* The live storefront introduces the homepage with one centred line on white,
   directly under the promotion. A filled band competed with the banner's
   artwork for the same attention, so the ground stays white and the headline
   carries it on its own. */
.bz-hero{
  background:var(--paper);color:var(--ink);
  /* No bottom padding: the section that follows brings its own, and the two
     together left 96px under the headline against 48px above it. */
  padding:var(--s7) 0 0;
  text-align:center;
}
/* Match the gap below the headline to the gap above it. */
.bz-hero + .bz-section{padding-top:var(--s7)}
.bz-hero__title{
  color:var(--ink);font-size:clamp(22px,2.4vw,32px);font-weight:700;
  letter-spacing:-.01em;max-width:none;margin:0 auto;
  text-wrap:balance;
}

.bz-section{padding:var(--s8) var(--s5)}
.bz-section__title{
  font-size:var(--fs-5);font-weight:700;margin:0 0 var(--s5);
  display:flex;align-items:baseline;gap:var(--s3);
}

.bz-product-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s5);
}
.bz-product-row .bz-card{display:grid;grid-template-rows:auto auto auto auto auto}

.bz-brand-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3);
}
.bz-brand-grid__item a{
  display:flex;align-items:center;justify-content:center;min-height:64px;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-1);
  text-align:center;font-weight:700;color:var(--ink);font-size:var(--fs-2);
}
.bz-brand-grid__item a:hover{border-color:var(--ink);background:var(--haze);text-decoration:none}

/* ============================================================================
   SINGLE PRODUCT
   ========================================================================== */

.bz-product__top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--s8);align-items:start;margin-bottom:var(--s8);
}
@media (max-width:900px){ .bz-product__top{grid-template-columns:1fr;gap:var(--s6)} }

.bz-product__media{min-width:0}
.bz-product__media .woocommerce-product-gallery{
  margin:0;width:100%!important;float:none!important;
  background:var(--haze);border-radius:var(--r-1);padding:var(--s5);
}
.bz-product__media img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.woocommerce-product-gallery__wrapper{margin:0}
.flex-control-thumbs{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:var(--s2);margin:var(--s3) 0 0;padding:0;
}
.flex-control-thumbs li{margin:0}
.flex-control-thumbs img{border:1px solid var(--line);border-radius:var(--r-1);cursor:pointer;background:var(--paper)}
.flex-control-thumbs img.flex-active{border-color:var(--ink);border-width:2px}

.bz-product__summary{min-width:0}
.bz-product__title{font-size:var(--fs-6);font-weight:700;margin:0 0 var(--s2)}
.bz-product__brand{margin:0 0 var(--s3);font-size:var(--fs-1);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.bz-product__brand a{color:var(--faint)}
.bz-product__rating{margin-bottom:var(--s3)}
.bz-product__price{margin:0 0 var(--s3);font-size:var(--fs-6);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bz-product__price .price{font-size:inherit;color:inherit}
.bz-product__price del{color:var(--muted);font-weight:400;font-size:var(--fs-4);margin-right:var(--s2)}
.bz-product__price ins{text-decoration:none;color:var(--deal)}
.bz-product__sku{margin:0 0 var(--s3);color:var(--muted);font-family:var(--mono);font-size:var(--fs-1)}
.bz-product__sku span{font-weight:700}
.bz-product__stock{margin-bottom:var(--s4);font-size:var(--fs-2)}
.bz-product__stock .stock.in-stock{color:var(--ok);font-weight:700}
.bz-product__stock .stock.out-of-stock{color:var(--deal);font-weight:700}

/* Variation picker: real controls, generous targets. */
.bz-product__cart form.cart{display:flex;flex-direction:column;gap:var(--s4)}
.bz-product__cart table.variations{width:100%;border-collapse:collapse;margin:0}
.bz-product__cart table.variations tr{display:block;margin-bottom:var(--s4)}
.bz-product__cart table.variations th,
.bz-product__cart table.variations td{display:block;padding:0;text-align:left;width:auto}
.bz-product__cart table.variations th{
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s2);
}
.bz-product__cart select{
  width:100%;min-height:52px;
  border:2px solid var(--line);border-radius:var(--r-1);
  padding:var(--s3) var(--s4);font:inherit;font-size:var(--fs-3);
  background:var(--paper);color:var(--ink);
}
.bz-product__cart select:focus{border-color:var(--blue)}
.bz-product__cart .reset_variations{font-size:var(--fs-1);color:var(--muted)}
.bz-product__cart .woocommerce-variation-price{
  font-size:var(--fs-5);font-weight:700;color:var(--ink);margin:0;
}
.bz-product__cart .woocommerce-variation-availability{font-size:var(--fs-2)}
.bz-product__cart .woocommerce-variation-add-to-cart{
  display:flex;gap:var(--s3);align-items:stretch;flex-wrap:wrap;
}
.bz-product__cart .quantity{display:inline-flex}
.bz-product__cart .quantity input{
  width:88px;min-height:48px;
  /* Was a hairline box on white with no label - it read as decoration rather
     than a control. Darker edge, explicit ink, and a visible caption. */
  border:2px solid var(--ink-3,#5A6B7B);border-radius:var(--r-1);
  background:var(--paper);color:var(--ink);
  padding:var(--s3);font:inherit;font-size:var(--fs-4);font-weight:700;
  text-align:center;font-variant-numeric:tabular-nums;
}
.bz-product__cart .quantity input:focus{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand-fill);
}
/* Keep the native stepper arrows - they are the affordance that says "editable". */
.bz-product__cart .quantity input[type="number"]{-moz-appearance:auto;appearance:auto}
.bz-product__cart .quantity input::-webkit-outer-spin-button,
.bz-product__cart .quantity input::-webkit-inner-spin-button{
  -webkit-appearance:inner-spin-button;opacity:1;
}
.bz-product__cart .quantity::before{
  content:"Qty";align-self:center;margin-right:var(--s2);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.bz-product__cart .single_add_to_cart_button{flex:1 1 220px;min-height:48px;font-size:var(--fs-3)}

.bz-product__excerpt{margin-top:var(--s4);font-size:var(--fs-2);color:var(--muted)}

.bz-product__description{margin-bottom:var(--s8);max-width:none}
.bz-product__description-body h2{font-size:var(--fs-5);margin:var(--s6) 0 var(--s3)}
.bz-product__description-body h3{font-size:var(--fs-4);margin:var(--s5) 0 var(--s2)}
.bz-product__description-body p{margin:0 0 var(--s3)}
.bz-product__description-body img{border-radius:var(--r-1)}

.related.products > h2,.up-sells > h2{font-size:var(--fs-5);font-weight:700;margin:0 0 var(--s5)}

/* ============================================================================
   PAGES, BLOG
   ========================================================================== */

/* Prose wants a 78ch measure; grids inside these pages do not. Constrain the
   text-level children instead of the container, so the flavour and guide grids
   can use the full width. */
.bz-page__body,.bz-post__body{max-width:none;font-size:var(--fs-3)}
.bz-page__body > p,.bz-page__body > h2,.bz-page__body > h3,.bz-page__body > h4,
.bz-page__body > ul,.bz-page__body > ol,.bz-page__body > blockquote,
.bz-post__body > p,.bz-post__body > h2,.bz-post__body > h3,.bz-post__body > h4,
.bz-post__body > ul,.bz-post__body > ol,.bz-post__body > blockquote{max-width:78ch}
.bz-flavors,.bz-guide{max-width:none;width:100%}
.bz-page__body h2,.bz-post__body h2{font-size:var(--fs-5);margin:var(--s6) 0 var(--s3)}
.bz-page__body h3,.bz-post__body h3{font-size:var(--fs-4);margin:var(--s5) 0 var(--s2)}
.bz-page__body p,.bz-post__body p{margin:0 0 var(--s4)}
.bz-post__meta{color:var(--muted);font-size:var(--fs-2);margin:0 0 var(--s5);font-family:var(--mono)}
.bz-post__media{margin-bottom:var(--s5)}
.bz-post__media img{border-radius:var(--r-1)}

.bz-post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s6)}
.bz-post-card__media{display:block;margin-bottom:var(--s3)}
.bz-post-card__media img{border-radius:var(--r-1);width:100%;height:auto}
.bz-post-card__title{font-size:var(--fs-4);font-weight:700;margin:0 0 var(--s1);line-height:var(--lh-snug)}
.bz-post-card__title a{color:var(--ink)}
.bz-post-card__meta{color:var(--muted);font-size:var(--fs-1);margin:0 0 var(--s2);font-family:var(--mono)}
.bz-post-card__excerpt{font-size:var(--fs-2);color:var(--muted)}

.bz-404{max-width:60ch}

/* ============================================================================
   FOOTER
   ========================================================================== */

/* White ground. Every colour below had been chosen to sit on the navy ink, so
   each one is re-picked against white rather than left to fail. */
.bz-footer{background:var(--paper);color:var(--body);margin-top:var(--s9);border-top:1px solid var(--line)}
.bz-footer a{color:var(--ink)}
.bz-footer a:hover{color:var(--brand-ink);text-decoration:underline}
.bz-footer__heading{
  color:var(--ink);font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 var(--s3);
}
.bz-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bz-footer__col a{font-size:var(--fs-2)}
/* Both statutory warnings, full width along the bottom of the footer.
   Shown in full: 21 CFR 1143.3 and California Prop 65 both require the text to
   be displayed, so it must not sit behind a disclosure control. */
.bz-footer__warnings{
  border-top:1px solid var(--line);
  padding:var(--s6) 0 var(--s5);
}
.bz-footer__warning-text{
  margin:0 0 var(--s5);
  max-width:none;                       /* full width, as on the live site */
  font-size:var(--fs-2);line-height:1.7;
  font-style:italic;
  color:var(--body);                    /* 8.6:1 on white */
}
.bz-footer__warning-text:last-of-type{margin-bottom:0}
.bz-footer__warning-text a{
  color:var(--brand-ink);text-decoration:underline;font-style:italic;font-size:inherit;
}
.bz-footer__warning-text a:hover{color:var(--brand-fill)}
.bz-footer__copy{
  margin:var(--s5) 0 0;color:var(--muted);font-size:var(--fs-1);
}

@media (max-width:1080px){
  .bz-footer__grid{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
}
@media (max-width:640px){
  .bz-footer__grid{grid-template-columns:1fr;gap:var(--s5)}
}

/* ============================================================================
   PRODUCT PAGE - OVERRIDE WOOCOMMERCE DEFAULTS

   woocommerce.css ships its own price colour (#77a464, an olive green) and a
   pale disabled-button style, both of which were winning on specificity and
   making the buy block look like it belonged to a different site. These rules
   put the block back on the theme's palette and tighten the spacing, which had
   opened up when the stock line was removed.
   ========================================================================== */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .bz-product__price,
.woocommerce div.product .bz-product__price .price,
.woocommerce div.product .woocommerce-variation-price .price{
  color:var(--ink) !important;
  font-family:var(--sans);
  font-size:var(--fs-6);
  font-weight:700;
  line-height:1.1;
  margin:0;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{
  color:var(--muted) !important;font-weight:400;font-size:var(--fs-4);margin-right:var(--s2);
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{
  color:var(--deal) !important;text-decoration:none;background:none;
}

/* Disabled Add to cart: a clear, deliberate state rather than a washed-out
   lavender that reads as a rendering fault. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button[disabled],
.woocommerce div.product form.cart .wc-variation-selection-needed .button{
  background:var(--haze) !important;
  border-color:var(--line) !important;
  color:var(--muted) !important;
  cursor:not-allowed;opacity:1 !important;
}

/* Buy block rhythm: one scale, no orphaned gaps where the stock line used to be. */
.bz-product__summary{display:flex;flex-direction:column;gap:var(--s4)}
.bz-product__summary > *{margin:0}
.bz-product__title{margin:0}
.bz-product__price{margin:0}
.bz-product__cart form.cart{gap:var(--s4);margin:0}
.bz-product__cart table.variations{margin:0}
.bz-product__cart table.variations tr:last-child{margin-bottom:0}
.woocommerce div.product form.cart{margin:0}
.woocommerce div.product form.cart .variations{margin-bottom:0}
.woocommerce div.product .woocommerce-variation{margin:0}
.woocommerce div.product .woocommerce-variation-price{margin:0 0 var(--s2)}
/* Empty containers left by removed stock/availability must not add height. */
.woocommerce-variation:empty,
.woocommerce-variation-availability:empty,
.woocommerce div.product .woocommerce-variation-description:empty{display:none}

/* The option label sits in the theme's label voice, not WooCommerce's. */
.bz-product__cart table.variations th,
.bz-product__cart table.variations label{
  color:var(--faint) !important;
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

.bz-product__description{margin-top:var(--s7)}
.bz-product__description .bz-section__title{margin-bottom:var(--s5)}


/* Mono is off site-wide: neutralise the utility class and any inherited stack. */
.mono,
.bz-crumbs,
.woocommerce-result-count,
.bz-card__spec,
.bz-strength{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
}

/* ---- Flavors page ------------------------------------------------------
   Taken from the live stylesheet's .page--flavors rules, WITH their media
   context. An earlier pass applied the @media (max-width:600px) block to
   desktop by mistake, which is why the tiles never matched: the 42px inline
   icon, the calc(100% - 50px) title, the hidden count and the bottom rule are
   all MOBILE styles.

   Desktop (no media query):
     .brand-list-link          display:block; text-align:center; margin-bottom:20px
     .brand-list-link div      margin-top:10px
     .brand-image-holder       height:106px; margin:auto; position:relative
     .brand-list-item img      absolute, centred, max-height:106px; max-width:154px
     .brand-list-brand-title   14px/17px; text-align:left; padding-left:15px;
                               margin-top:29px; margin-bottom:5px; #3d3a3a
     .brand-list-brand-count   12px; opacity:.3; text-align:left; padding-left:15px
   No border on desktop - the rule is mobile-only.                          */
.bz-flavors{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(154px,1fr));
  gap:0;
}
.bz-flavors__item{
  display:block;text-align:center;
  margin:0 0 20px;padding:0;
  border:0;border-radius:0;background:none;
  color:#3d3a3a;
}
.bz-flavors__item:hover{text-decoration:none}
.bz-flavors__item > div{margin-top:10px}
/* Image holder: 106px tall, image absolutely centred inside it. */
.bz-flavors__item > div:first-of-type{
  height:106px;margin:auto;position:relative;vertical-align:middle;margin-top:0;
}
.bz-flavors__item img{
  margin:0 auto;max-height:106px;max-width:154px;width:auto;height:auto;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:0;
}
.bz-flavors__item > div:nth-of-type(2){
  padding-left:15px;margin-top:29px;margin-bottom:5px;
  font-size:14px;line-height:17px;font-weight:400;letter-spacing:0;
  text-align:left;color:#3d3a3a;display:block;width:auto;
}
.bz-flavors__item > div:nth-of-type(3){
  padding-left:15px;margin-top:10px;
  font-size:12px;line-height:18px;letter-spacing:0;
  text-align:left;color:#3d3a3a;opacity:.3;
}
.bz-flavors__item:hover > div:nth-of-type(2){color:var(--brand-ink)}

/* The live mobile treatment, reproduced at its own breakpoint. */
@media (max-width:600px){
  .bz-flavors{display:grid;grid-template-columns:1fr;gap:0}
  .bz-flavors__item{
    margin:0 10px;padding-bottom:16px;margin-bottom:0;
    border-bottom:1px solid rgba(151,151,151,.2);
  }
  .bz-flavors__item > div:first-of-type{
    height:42px;width:42px;display:inline-block;
  }
  .bz-flavors__item img{
    width:100%;height:auto;max-height:none;max-width:none;
    position:static;transform:none;margin:0 auto;
  }
  .bz-flavors__item > div:nth-of-type(2){
    display:inline-block;width:calc(100% - 50px);vertical-align:middle;margin-top:0;
  }
  .bz-flavors__item > div:nth-of-type(3){display:none}
}

.bz-flavors-heading{
  font-family:var(--display);
  font-size:var(--fs-4);font-weight:700;color:var(--ink);
  margin:var(--s7) 0 var(--s4);
}

/* Reviews are disabled in functions.php; these catch anything a plugin prints. */
.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating,
.woocommerce #reviews,
.woocommerce #review_form_wrapper,
.woocommerce-Reviews,
.bz-product__rating,
.bz-card__rating,
li.reviews_tab{display:none !important}

/* ============================================================================
   VARIATION BUTTONS + SHIPPING NOTE
   Matching the live product page: a "Flavor: (Required)" label above a row of
   bordered option buttons, then the "Shipped & Sold By breazy" line.
   ========================================================================== */

.bz-variant-select--hidden{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.bz-variant-group{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.bz-variant{
  appearance:none;cursor:pointer;
  background:var(--paper);
  border:1px solid var(--ink);
  border-radius:var(--r-1);
  color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-3);font-weight:400;line-height:1.2;
  padding:12px 18px;min-height:46px;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.bz-variant:hover{border-color:var(--brand-fill);color:var(--brand-ink)}
.bz-variant.is-selected{
  background:var(--brand-fill);border-color:var(--brand-fill);color:#fff;font-weight:600;
}
.bz-variant.is-unavailable{
  border-color:var(--line);color:var(--gone);
  text-decoration:line-through;cursor:not-allowed;
}

/* The live label reads "Flavor:  (Required)". */
.bz-product__cart table.variations th::after{
  content:" (Required)";
  color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;
}

.bz-shipnote{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin:var(--s4) 0 0;font-size:var(--fs-3);color:var(--ink);
}
.bz-shipnote__truck{width:34px;height:auto;display:block;opacity:.75}
.bz-shipnote__logo{height:26px;width:auto;display:block}

/* ============================================================================
   NAVIGATION DROPDOWNS  (restored)

   These rules were removed by an earlier block-deletion edit, which left every
   submenu permanently expanded and pushed the homepage down the page. Appended
   here rather than spliced, so nothing else can take them with it.
   ========================================================================== */

.bz-nav__list{position:relative}
.bz-nav__item{position:relative}

.bz-nav__sub{
  position:absolute;top:100%;left:0;z-index:60;
  min-width:248px;margin:0;padding:var(--s2) 0;
  list-style:none;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  border-radius:0 0 var(--r-1) var(--r-1);
  box-shadow:0 12px 28px -12px rgba(11,27,43,.35);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.bz-nav__item--has-children:hover > .bz-nav__sub,
.bz-nav__item--has-children:focus-within > .bz-nav__sub{
  opacity:1;visibility:visible;transform:translateY(0);
}
.bz-nav__sub li{margin:0}
.bz-nav__sub a{
  display:block;padding:var(--s2) var(--s4);
  color:var(--ink);font-size:var(--fs-2);font-weight:600;
  text-transform:none;letter-spacing:0;white-space:nowrap;
}
.bz-nav__sub a:hover,.bz-nav__sub a:focus{
  background:var(--brand-wash);color:var(--brand-ink);text-decoration:none;
}
.bz-nav__sub li:first-child a{
  font-weight:700;color:var(--brand-ink);
  border-bottom:1px solid var(--line-2);margin-bottom:var(--s1);padding-bottom:var(--s3);
}
.bz-nav__item--has-children > a::after{
  content:"";display:inline-block;vertical-align:middle;
  width:5px;height:5px;margin-left:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

@media (max-width:1280px){
  .bz-nav__list{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start}
}
/* Breakpoint matches the drawer (860px). Submenus render inline and open on a
   tap, not on :focus-within - a touch on the parent navigates rather than
   focusing, so focus-within never fired and the dropdowns simply did nothing. */
@media (max-width:860px){
  .bz-nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent;padding:0;min-width:0;
    display:none;
  }
  .bz-nav__item--has-children.is-open > .bz-nav__sub{display:block}
  /* The caret turns to point down once the group is open. */
  .bz-nav__item--has-children.is-open > a::after{transform:rotate(135deg) translate(-2px,-2px)}
  .bz-nav__sub a{color:var(--ink);padding-left:var(--s6)}
  .bz-nav__sub li:first-child a{color:var(--brand-ink);border-bottom-color:var(--line-2)}
}

/* ============================================================================
   RESTORED COMPONENTS

   A run of block-deletion edits removed these rules as collateral. Appended in
   one place so they cannot be partially spliced away again.
   ========================================================================== */

/* ---- homepage category tiles ---- */
.bz-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.bz-tile--wide{grid-column:span 3}
.bz-tile:not(.bz-tile--wide){grid-column:span 2}
.bz-tile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-1);background:var(--ink);
  aspect-ratio:16/9;isolation:isolate;
}
.bz-tile:not(.bz-tile--wide){aspect-ratio:4/3}
.bz-tile__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.bz-tile:hover .bz-tile__img{transform:scale(1.04)}
/* Brand light blue rather than the navy ink. The label sits in the densest
   part of the gradient, which is weighted toward --brand-fill (#0879BA) so the
   white type still clears AA - #16A4F5 alone measures 2.74:1 against white. */
.bz-tile__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(8,121,186,.92) 0%,rgba(22,164,245,.78) 34%,
    rgba(22,164,245,.28) 66%,rgba(22,164,245,0) 100%);
}
.bz-tile__label{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s5);
  color:#fff;font-family:var(--display);
  /* One size across every tile. The wide tiles previously ran a larger clamp
     than the narrow ones (~42px against ~30px at desktop), so the two rows read
     as different treatments rather than one set. */
  font-size:clamp(26px,2.7vw,40px);font-weight:700;letter-spacing:-.01em;
  line-height:1.1;text-wrap:balance;
  display:flex;align-items:flex-end;gap:var(--s3);
}
.bz-tile__label::after{
  content:"";flex:none;width:10px;height:10px;margin-bottom:.45em;
  border-right:2px solid var(--deal);border-top:2px solid var(--deal);
  transform:rotate(45deg);transition:transform .2s ease;
}
.bz-tile:hover .bz-tile__label::after{transform:rotate(45deg) translate(3px,-3px)}
.bz-tile:hover{text-decoration:none}
@media (max-width:900px){
  .bz-tiles{grid-template-columns:repeat(2,1fr)}
  .bz-tile--wide,.bz-tile:not(.bz-tile--wide){grid-column:span 1;aspect-ratio:4/3}
}
@media (max-width:520px){ .bz-tiles{grid-template-columns:1fr} }

/* ---- hero + homepage SEO copy ---- */
.bz-hero__sub{
  margin:0;color:rgba(255,255,255,.72);
  font-size:var(--fs-4);font-weight:600;letter-spacing:.02em;
}
.bz-seo{background:var(--haze);padding:var(--s8) 0;margin-top:var(--s7)}
.bz-seo__title{font-family:var(--display);font-size:var(--fs-5);font-weight:700;margin:0 0 var(--s4)}
.bz-seo__body{max-width:76ch;font-size:var(--fs-3);color:var(--body)}
.bz-seo__body p{margin:0 0 var(--s4)}
.bz-seo__body p:last-child{margin-bottom:0}

/* ---- category header ---- */
.bz-archive__heading{flex:1 1 auto;min-width:0}
.bz-archive__icon{
  width:120px;height:120px;flex:none;background:var(--haze);
  border-radius:var(--r-1);display:flex;align-items:center;justify-content:center;padding:var(--s3);
}
.bz-archive__icon img{max-width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.bz-archive__more{
  margin-top:var(--s2);padding:0;border:0;background:none;
  color:var(--brand-ink);font:inherit;font-size:var(--fs-2);font-weight:700;
  text-decoration:underline;cursor:pointer;
}
@media (max-width:640px){ .bz-archive__icon{width:88px;height:88px} }

/* ---- brands index ---- */
.bz-brands__count{color:var(--muted);font-size:var(--fs-1);margin:0 0 var(--s5)}
.bz-brands{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4);
}
.bz-brands__item{margin:0;min-width:0}
.bz-brands__link{
  display:grid;grid-template-rows:auto auto auto;gap:var(--s2);
  padding:var(--s4);height:100%;
  border:1px solid var(--line);border-radius:var(--r-1);
  background:var(--paper);color:var(--ink);text-align:center;
}
.bz-brands__link:hover{border-color:var(--brand);text-decoration:none}
.bz-brands__logo{
  display:flex;align-items:center;justify-content:center;
  height:88px;background:var(--haze);border-radius:var(--r-1);padding:var(--s3);
}
.bz-brands__logo img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.bz-brands__initial{font-family:var(--display);font-size:var(--fs-6);font-weight:700;color:var(--brand-deep)}
.bz-brands__name{font-weight:700;font-size:var(--fs-3);line-height:var(--lh-snug)}
.bz-brands__meta{color:var(--muted);font-size:var(--fs-1)}

/* ---- blog cards, search form, footer text ---- */
.bz-post-card__media{display:block;margin-bottom:var(--s3)}
.bz-post-card__media img{border-radius:var(--r-1);width:100%;height:auto}
.bz-post-card__title{font-size:var(--fs-4);font-weight:700;margin:0 0 var(--s1);line-height:var(--lh-snug)}
.bz-post-card__title a{color:var(--ink)}
.bz-post-card__meta{color:var(--muted);font-size:var(--fs-1);margin:0 0 var(--s2)}
.bz-post-card__excerpt{font-size:var(--fs-2);color:var(--muted)}
.bz-searchform{display:flex;max-width:520px;margin-top:var(--s4)}
.bz-searchform input[type="search"]{
  flex:1 1 auto;min-width:0;min-height:52px;padding:var(--s3) var(--s4);
  border:2px solid var(--ink);border-right:0;border-radius:var(--r-1) 0 0 var(--r-1);font:inherit;
}
.bz-searchform button{
  border:2px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:0 var(--r-1) var(--r-1) 0;padding:0 var(--s5);
  font:inherit;font-weight:700;cursor:pointer;
}
.bz-footer__intro,.bz-footer__hours{
  color:var(--muted);font-size:var(--fs-2);line-height:1.6;margin:0 0 var(--s3);
}
.bz-footer__hours{margin-top:var(--s3);margin-bottom:0}
.bz-footer__hours strong{color:var(--ink)}

/* ---- page / post / product wrappers ---- */
.bz-page,.bz-post,.bz-product{padding-block:var(--s7) var(--s8)}
.bz-post-card{min-width:0}

/* ============================================================================
   HOMEPAGE TAIL + FOOTER LAYOUT

   The base .bz-footer__grid rule was lost in an earlier edit, leaving only its
   two media-query overrides -- which reset grid-template-columns but never set
   display:grid, so the whole footer stacked into one column. Restored here with
   the magazine and SEO blocks it sits below.
   ========================================================================== */

/* ---- footer: five columns, service column wider for the intro + hours ---- */
.bz-footer__grid{
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:var(--s6) var(--s5);
  align-items:start;
  padding-block:var(--s8) var(--s7);
}
.bz-footer__col{min-width:0}
@media (max-width:1100px){
  .bz-footer__grid{grid-template-columns:1.4fr repeat(2,1fr)}
}

/* ---- Breazy Magazine ----
   Five cards on one row. Fixed columns rather than auto-fill so the row never
   breaks into a 4+1 orphan, and the media/title/excerpt sit on shared grid rows
   so every card's baseline lines up regardless of title length. */
.bz-section__title a{color:inherit;text-decoration:none}
.bz-section__title a:hover{color:var(--brand-ink);text-decoration:underline}

.bz-post-list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s5);
}
.bz-post-card{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:var(--s3);
  min-width:0;
}
.bz-post-card__media{
  display:block;margin:0;
  aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-1);background:var(--haze);
}
.bz-post-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bz-post-card__media img.bz-post-card__ph{object-fit:contain;padding:14%}
.bz-post-card:hover .bz-post-card__media img{transform:scale(1.04)}
.bz-post-card__title{
  margin:0;font-size:var(--fs-3);font-weight:700;line-height:var(--lh-snug);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bz-post-card__title a{color:var(--ink);text-decoration:none}
.bz-post-card__title a:hover{color:var(--brand-ink);text-decoration:underline}
.bz-post-card__excerpt{
  margin:0;font-size:var(--fs-2);color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:1100px){ .bz-post-list{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){  .bz-post-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){  .bz-post-list{grid-template-columns:1fr} }

/* ---- homepage SEO copy ----
   Two measured columns instead of one narrow one: the band is full-bleed, so a
   single 76ch column left most of it empty. */
/* The live storefront closes on this copy plainly: white ground, one column,
   running the full container width. An earlier two-column split was solving a
   problem the shorter, truncated copy had - at full length it reads straight
   down like the rest of the page. */
.bz-seo{background:var(--paper);padding:var(--s7) 0 var(--s5);margin-top:var(--s6)}
/* The footer already contributes 88px above itself; the band's own bottom
   padding only has to separate the copy from that, not repeat it. */
.bz-seo__title{
  font-family:var(--display);font-size:var(--fs-5);font-weight:700;
  margin:0 0 var(--s5);letter-spacing:-.01em;
}
.bz-seo__body{max-width:none;font-size:var(--fs-3);color:var(--body);line-height:1.65}
.bz-seo__body p{margin:0 0 var(--s4);break-inside:avoid}
.bz-seo__body p:last-child{margin-bottom:0}


/* ---- homepage product rows ----
   Five across, matching the live storefront's carousel and the magazine row
   below it. A curated category that no longer has five items in stock renders
   a short row rather than stretching its cards out of rhythm. */
ul.products.bz-row{
  grid-template-columns:repeat(5,1fr);
  justify-content:start;
}
@media (max-width:1100px){ ul.products.bz-row{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){  ul.products.bz-row{grid-template-columns:repeat(2,1fr)} }

/* Row width follows the count the live storefront carries in each carousel:
   five featured products, six deals -- so neither wraps to an orphan row. */
ul.products.bz-row--5{grid-template-columns:repeat(5,1fr)}
ul.products.bz-row--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1240px){ ul.products.bz-row--6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1100px){ ul.products.bz-row--5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
  ul.products.bz-row--5,
  ul.products.bz-row--6{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   PROMO BANNER

   The weekly promotion, run from the Promo Banners admin screen. Desktop and
   mobile carry different crops of the artwork, so the breakpoint lives in a
   <picture> element rather than in this stylesheet; what is here is only the
   frame around it.
   ========================================================================== */

.bz-banner{padding:var(--s5) 0 0}
.bz-banner__link{display:block;border-radius:var(--r-1);overflow:hidden}
.bz-banner__link:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.bz-banner__img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-1);
}
/* The artwork is the promotion; nothing should sit on top of it or crop it. */
.bz-banner picture{display:block}

@media (max-width:700px){
  .bz-banner{padding-top:var(--s4)}
}

/* ---- brands index: two sections, as the live storefront lists them ---- */
.bz-brands__heading{
  font-family:var(--display);font-size:var(--fs-5);font-weight:700;
  margin:var(--s7) 0 var(--s5);display:flex;align-items:center;gap:var(--s3);
}
.bz-brands__heading:first-of-type{margin-top:var(--s5)}
.bz-brands__az{
  font-family:var(--sans);font-size:var(--fs-1);font-weight:700;
  letter-spacing:.1em;color:#fff;background:var(--brand-fill);
  padding:4px 9px;border-radius:var(--r-1);
}

/* ---- homepage favourite-brands row ---- */
.bz-brandrow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4);
}
.bz-brandrow__item{min-width:0}
.bz-brandrow__link{
  display:flex;align-items:center;justify-content:center;
  height:104px;padding:var(--s4);
  background:var(--haze);border:1px solid var(--line);border-radius:var(--r-1);
}
.bz-brandrow__link:hover{border-color:var(--brand)}
.bz-brandrow__link img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.bz-brandrow__all{
  font-family:var(--sans);font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--brand-fill);padding:3px 10px;border-radius:var(--r-pill);
}
.bz-brandrow__all:hover{background:var(--brand-deep);text-decoration:none;color:#fff}
@media (max-width:900px){ .bz-brandrow{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .bz-brandrow{grid-template-columns:repeat(2,1fr)} }

/* ---- breadcrumbs ----
   The markup is <nav class="bz-crumbs"><div class="bz-container"><ol>. With no
   rule on the list it rendered as a numbered block list ("1. Home 2. ..."), and
   the inner container added a second helping of gutter inside a page that is
   already inside one. */
.bz-crumbs{padding:var(--s4) 0 0}
.bz-crumbs .bz-container{max-width:none;padding-left:0;padding-right:0}
.bz-crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase;
}
.bz-crumbs li{display:flex;align-items:center;color:var(--muted)}
.bz-crumbs li + li::before{
  content:"/";margin:0 8px;color:var(--line-2);text-transform:none;
}
.bz-crumbs a{color:var(--brand-ink);font-weight:600}
.bz-crumbs a:hover{text-decoration:underline}
.bz-crumbs [aria-current="page"]{color:var(--muted)}

/* ---- flavours page: intro line and the copy that closes the page ---- */
.bz-flavors__intro{font-size:var(--fs-3);color:var(--muted);margin:0 0 var(--s6)}
.bz-flavors__copy{margin-top:var(--s7);max-width:none}
.bz-flavors__copy h2{font-family:var(--display);font-size:var(--fs-5);font-weight:700;margin:var(--s6) 0 var(--s3)}
.bz-flavors__copy h2:first-child{margin-top:0}
.bz-flavors__copy p{margin:0 0 var(--s4);font-size:var(--fs-3);line-height:1.65}

/* ============================================================================
   WOOCOMMERCE CLEARFIX vs CSS GRID

   woocommerce.css clears floats with `content:" "; display:table` on
   ::before/::after. Those were harmless when the loop was floated, but in a
   GRID container each pseudo-element becomes a grid ITEM: ::before takes the
   first cell and ::after takes one at the end, so every product row started a
   column late and the first tile appeared to be missing.

   This has to be killed rather than worked around -- there is no way to opt a
   pseudo-element out of grid placement. It only bites where WooCommerce's own
   `.woocommerce` wrapper is present, which is why the homepage rows were
   unaffected and the category grids were not.
   ========================================================================== */

ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after{
  content:none!important;
  display:none!important;
}

/* ============================================================================
   VAPE GUIDE

   Rebuilt against the live page's measurements: icon tiles 100x110 artwork on a
   ~145px tall centred tile, tutorial tiles a 343x238 shot above the title. The
   row counts divide evenly here rather than reproducing live's 3-3-2 and 2-1,
   which orphan a tile at the end of each group.
   ========================================================================== */

.bz-guide-products{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);
  margin:0 0 var(--s8);
}
.bz-guide-product{
  display:grid;grid-template-rows:auto 1fr auto;gap:var(--s3);
  min-width:0;text-align:center;
}
.bz-guide-product__media{
  display:block;background:var(--haze);border:1px solid var(--line);
  border-radius:var(--r-1);overflow:hidden;aspect-ratio:1/1;
}
.bz-guide-product__media img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.bz-guide-product__title{margin:0;font-size:var(--fs-2);font-weight:700;line-height:var(--lh-snug)}
.bz-guide-product__title a{color:var(--ink)}
.bz-guide-product__title a:hover{color:var(--brand-ink)}
.bz-guide-product__cta{
  display:block;padding:9px var(--s3);border-radius:var(--r-1);
  background:var(--brand-fill);color:#fff;font-size:var(--fs-1);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.bz-guide-product__cta:hover{background:var(--brand-deep);color:#fff;text-decoration:none}

.bz-guide{display:grid;gap:var(--s5);margin:0 0 var(--s8)}
.bz-guide--terms{grid-template-columns:repeat(4,1fr)}
.bz-guide--systems{grid-template-columns:repeat(3,1fr)}
.bz-guide--tutorials{grid-template-columns:repeat(3,1fr)}

.bz-guide__item{
  display:grid;grid-template-rows:auto auto;gap:var(--s3);
  justify-items:center;text-align:center;min-width:0;
  padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-1);
  background:var(--paper);color:var(--ink);
}
.bz-guide__item:hover{border-color:var(--brand);text-decoration:none}
.bz-guide__icon{display:flex;align-items:center;justify-content:center;height:110px}
.bz-guide__icon img{max-height:110px;max-width:100px;width:auto;height:auto;object-fit:contain}
.bz-guide__shot{display:block;width:100%;border-radius:var(--r-1);overflow:hidden;background:var(--haze)}
.bz-guide__shot img{width:100%;height:auto;display:block;aspect-ratio:343/238;object-fit:cover}
.bz-guide__label{
  font-size:var(--fs-2);font-weight:700;line-height:var(--lh-snug);
  letter-spacing:.04em;text-transform:uppercase;
}
.bz-guide--tutorials .bz-guide__label{text-transform:none;letter-spacing:0;font-size:var(--fs-3)}

@media (max-width:1100px){
  .bz-guide-products{grid-template-columns:repeat(3,1fr)}
  .bz-guide--terms{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .bz-guide-products,
  .bz-guide--terms,
  .bz-guide--systems,
  .bz-guide--tutorials{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   CATEGORY FILTERS

   Size / Type / Brand / Price down the left of the grid, in the live
   storefront's order, each option carrying its count.
   ========================================================================== */

.bz-archive__body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s6);align-items:start}
.bz-archive__body > .bz-archive__results:only-child{grid-column:1 / -1}
.bz-archive__results{min-width:0}

.bz-filters{min-width:0;font-size:var(--fs-2)}
.bz-filters__refine{padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.bz-filters__heading{
  font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);margin:0 0 var(--s2);
}
.bz-filters__none{color:var(--muted);margin:0}
.bz-filters__applied{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.bz-filters__applied a{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--brand);border-radius:var(--r-pill);
  background:var(--brand-wash);color:var(--brand-ink);font-size:var(--fs-1);font-weight:600;
}
/* The chip removes its own filter, so it reads as a dismiss control. */
.bz-filters__applied a::after{content:"\00d7";font-size:15px;line-height:1}
.bz-filters__applied a:hover{text-decoration:none;background:var(--brand);color:#fff}
.bz-filters__clear{display:inline-block;margin-top:var(--s3);font-size:var(--fs-1);font-weight:700;text-decoration:underline}

.bz-filters__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;
  padding:var(--s3) 0;border:0;border-bottom:1px solid var(--line);background:none;
  font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
}
.bz-filters__toggle-state{font-size:var(--fs-1);font-weight:600;color:var(--brand-ink);white-space:nowrap}

.bz-filters__list{display:none}
.bz-filters__list.is-open{display:block}
.bz-filters__group{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.bz-filters__group-title{
  font-size:var(--fs-2);font-weight:700;margin:0 0 var(--s3);color:var(--ink);
}
.bz-filters__group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.bz-filters__group a{color:var(--body);display:inline-block;line-height:1.4}
.bz-filters__group a:hover{color:var(--brand-ink)}
.bz-filters__group li.is-on a{color:var(--brand-ink);font-weight:700}
.bz-filters__count{color:var(--faint);font-size:var(--fs-1)}

.bz-filters__price{display:flex;align-items:center;gap:var(--s2)}
.bz-filters__price label{flex:1 1 0;min-width:0}
.bz-filters__price input{
  width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-1);font:inherit;font-size:var(--fs-2);
}
.bz-filters__price button{
  flex:none;padding:9px 14px;border:0;border-radius:var(--r-1);
  background:var(--brand-fill);color:#fff;font:inherit;font-weight:700;cursor:pointer;
}
.bz-filters__price button:hover{background:var(--brand-deep)}

@media (max-width:1000px){
  .bz-archive__body{grid-template-columns:1fr}
  /* On a narrow screen the rail would push the grid below the fold, so it
     starts collapsed and the toggle opens it. */
  .bz-filters__list{display:none}
  .bz-filters__list.is-open{display:block}
}

/* ============================================================================
   BLOG INDEX

   Three across, square artwork, title and excerpt - the live storefront's
   card. It shows no date, so neither does this.
   ========================================================================== */

.bz-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s5);margin-top:var(--s5)}
.bz-blog__card{display:grid;grid-template-rows:auto 1fr;gap:var(--s4);min-width:0}
.bz-blog__media{
  display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-1);background:var(--haze);
}
.bz-blog__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.bz-blog__media img.bz-blog__ph{object-fit:contain;padding:16%}
.bz-blog__card:hover .bz-blog__media img{transform:scale(1.04)}
.bz-blog__body{min-width:0}
.bz-blog__title{
  margin:0 0 var(--s2);font-size:var(--fs-4);font-weight:700;line-height:var(--lh-snug);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bz-blog__title a{color:var(--ink)}
.bz-blog__title a:hover{color:var(--brand-ink)}
.bz-blog__excerpt{
  margin:0;font-size:var(--fs-2);color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

.bz-blog__aside-title{font-family:var(--display);font-size:var(--fs-4);font-weight:700;margin:0 0 var(--s4)}
.bz-blog__recommended ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.bz-blog__recommended a{color:var(--brand-ink);font-size:var(--fs-3);font-weight:600}
.bz-blog__search .bz-searchform{max-width:none;margin-top:0}

@media (max-width:1000px){ .bz-blog__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .bz-blog__grid{grid-template-columns:1fr}
  .bz-blog__aside{grid-template-columns:1fr;gap:var(--s6)}
}

/* ---- content pages: a readable measure -------------------------------
   The live storefront centres page copy at 974px rather than running it the
   full container width. Legal and support pages are read top to bottom, so
   they get a measure; product and category copy deliberately does not. */
/* The measure is applied to the prose elements themselves, NOT to
   .bz-page__body - constraining the wrapper also squeezed the full-width
   components that live inside it (the flavour grid dropped from eight tiles a
   row to five). */
.bz-page__body > p,
.bz-page__body > h2,
.bz-page__body > h3,
.bz-page__body > h4,
.bz-page__body > ul,
.bz-page__body > ol,
.bz-page__body > table,
.bz-page__body > div:not([class]) > p,
.bz-page__body > div:not([class]) > h2,
.bz-page__body > div:not([class]) > h3,
.bz-page__body > div:not([class]) > ul,
.bz-page__body > div:not([class]) > ol,
.bz-page__body .cms-page > p,
.bz-page__body .cms-page > h2,
.bz-page__body .cms-page > h3,
.bz-page__body .cms-page > ul,
.bz-page__body .cms-page > ol{max-width:900px}
.bz-page__body h2{font-family:var(--display);font-size:var(--fs-5);font-weight:700;margin:var(--s7) 0 var(--s3)}
.bz-page__body h3{font-size:var(--fs-4);font-weight:700;margin:var(--s6) 0 var(--s2)}
.bz-page__body h4{font-size:var(--fs-3);font-weight:700;margin:var(--s5) 0 var(--s2)}
.bz-page__body p{margin:0 0 var(--s4);font-size:var(--fs-3);line-height:1.7}
.bz-page__body ul,.bz-page__body ol{margin:0 0 var(--s4);padding-left:var(--s5);font-size:var(--fs-3);line-height:1.7}
.bz-page__body li{margin:0 0 var(--s2)}
.bz-page__body p a,
.bz-page__body li a,
.bz-page__body td a{color:var(--brand-ink);text-decoration:underline}
.bz-page__body strong{color:var(--ink)}
.bz-page__body img{max-width:100%;height:auto;border-radius:var(--r-1)}
.bz-page__body hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
/* Imported copy is full of empty spacer paragraphs; collapse the runs. */
.bz-page__body p:empty{display:none}
.bz-page__body table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:var(--fs-2)}
.bz-page__body th,.bz-page__body td{border:1px solid var(--line);padding:var(--s3);text-align:left;vertical-align:top}
.bz-page__body th{background:var(--haze);font-weight:700}

/* ---- blog: grid left, search + recommended in a right column ---- */
.bz-blog__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start;margin-top:var(--s5)}
.bz-blog__main{min-width:0}
.bz-blog__aside{
  min-width:0;position:sticky;top:var(--s5);
  display:flex;flex-direction:column;gap:var(--s6);
  margin-top:0;padding-top:0;border-top:0;
}
@media (max-width:1000px){
  .bz-blog__layout{grid-template-columns:1fr}
  .bz-blog__aside{position:static}
}

/* ---- footer logo ---- */
.bz-footer__brand{padding-top:var(--s7)}
.bz-footer__brand img{display:block;width:150px;height:auto}

/* ============================================================================
   ACCOUNT PAGES

   WooCommerce ships its own form furniture; this gives it the theme's controls
   and stops the login form from stretching the full container width.
   ========================================================================== */

.woocommerce-account .bz-content{max-width:1000px}
.woocommerce-account .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.woocommerce-account h2{font-family:var(--display);font-size:var(--fs-5);font-weight:700;margin:0 0 var(--s4)}
.woocommerce-account form.login,
.woocommerce-account form.register{
  border:1px solid var(--line);border-radius:var(--r-1);
  padding:var(--s5);background:var(--paper);margin:0;
}
.woocommerce form .form-row{margin:0 0 var(--s4);padding:0;display:block}
.woocommerce form .form-row label{display:block;font-weight:600;margin-bottom:6px;font-size:var(--fs-2)}
.woocommerce form .form-row .required{color:var(--deal);text-decoration:none;border:0}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"]{
  width:100%;padding:11px var(--s3);
  border:1px solid var(--line);border-radius:var(--r-1);
  font:inherit;font-size:var(--fs-2);background:var(--paper);color:var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-account input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
/* WooCommerce's show/hide password control renders as a bare box otherwise. */
.woocommerce form .password-input{display:block;position:relative}
.woocommerce form .show-password-input{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  cursor:pointer;opacity:.5;
}
.woocommerce form .show-password-input::after{content:"\1F441";font-size:14px}
.woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:8px;font-weight:400}
.woocommerce-account .button,
.woocommerce-account button[type="submit"]{
  display:inline-block;padding:12px var(--s5);border:0;border-radius:var(--r-1);
  background:var(--brand-fill);color:#fff;font:inherit;font-weight:700;cursor:pointer;
}
.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover{background:var(--brand-deep);color:#fff;text-decoration:none}
.woocommerce-LostPassword{margin:var(--s3) 0 0;font-size:var(--fs-2)}
/* Signed-in view: the account nav beside its panel. */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:10px var(--s3);border-radius:var(--r-1);color:var(--ink);font-weight:600;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--haze);text-decoration:none}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{background:var(--brand-wash);color:var(--brand-ink)}
@media (min-width:781px){
  .woocommerce-account.logged-in .woocommerce{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6);align-items:start}
}
@media (max-width:780px){ .woocommerce-account .u-columns{grid-template-columns:1fr} }

/* ============================================================================
   MOBILE HEADER

   Desktop is untouched: every rule below sits inside the small-screen query.
   ========================================================================== */

.bz-burger{display:none}

@media (max-width:860px){
  /* Live's mobile header is two rows: hamburger / logo / cart across the top,
     then the search field full width beneath it. */
  .bz-header__inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "burger logo cart"
      "search search search";
    row-gap:var(--s3);column-gap:var(--s3);
    padding-top:var(--s3);padding-bottom:var(--s3);
    align-items:center;
  }
  .bz-burger{grid-area:burger}
  .bz-header__logo{grid-area:logo;justify-self:center}
  .bz-utility{grid-area:cart;justify-self:end}
  .bz-search{grid-area:search}

  .bz-burger{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);
  }
  .bz-burger__bars,
  .bz-burger__bars::before,
  .bz-burger__bars::after{
    display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
    transition:transform .18s ease,opacity .18s ease;
  }
  .bz-burger__bars{position:relative}
  .bz-burger__bars::before,
  .bz-burger__bars::after{content:"";position:absolute;left:0}
  .bz-burger__bars::before{top:-7px}
  .bz-burger__bars::after{top:7px}
  .bz-burger[aria-expanded="true"] .bz-burger__bars{background:transparent}
  .bz-burger[aria-expanded="true"] .bz-burger__bars::before{transform:translateY(7px) rotate(45deg)}
  .bz-burger[aria-expanded="true"] .bz-burger__bars::after{transform:translateY(-7px) rotate(-45deg)}

  /* Larger logo: it is the only brand mark on the screen at this size. */
  .bz-header__logo img{max-height:44px}

  /* Account links move into the drawer. The cart drops the orange button for
     a plain brand-blue icon, as live has it at this width. */
  .bz-utility{gap:var(--s2)}
  .bz-utility > a:not(.bz-cart){display:none}
  .bz-cart{
    background:none;color:var(--brand) !important;
    padding:0;width:40px;height:40px;justify-content:center;position:relative;
  }
  .bz-cart:hover{background:none}
  /* The icon asset is a WHITE png drawn for the orange button; on the
     transparent mobile control it was white on white. Use it as an alpha mask
     so it paints in currentColor instead. */
  .bz-cart__icon{
    width:26px;height:26px;background:none;
    -webkit-mask:url("assets/header-cart-button-icon.png") no-repeat center/contain;
    mask:url("assets/header-cart-button-icon.png") no-repeat center/contain;
    background-color:currentColor;
  }
  .bz-cart__label{display:none}
  .bz-cart__count{
    position:absolute;top:-2px;right:-2px;
    min-width:17px;height:17px;font-size:10px;
    background:#BF4B08;color:#fff;
  }

  /* Full width on its own row, so the collapse-to-icon behaviour is off here. */
  .bz-search{flex:1 1 auto;max-width:none;width:100%}
  .bz-search__field{
    width:100%;padding:0 42px 0 14px;
    border-color:var(--brand-fill);background:var(--paper);color:var(--body);cursor:text;
  }
  .bz-search__field::placeholder{color:#666}

  /* Primary nav as a drawer rather than a sideways-scrolling row. */
  .bz-nav{display:none;border-top:1px solid var(--line)}
  .bz-nav.is-open{display:block}
  .bz-nav__list{
    flex-direction:column;flex-wrap:nowrap;overflow:visible;
    justify-content:flex-start;padding:var(--s2) 0;
  }
  .bz-nav__list > li{width:100%}
  .bz-nav__list > li > a,.bz-nav__item > a{
    padding:12px var(--s2);border-bottom:1px solid var(--line-2);
  }
  .bz-nav__item--has-children > a::after{float:right;margin-top:7px}
  body.bz-nav-open{overflow:hidden}
}

/* ============================================================================
   MOBILE PRODUCT GRID

   Two across instead of one, no CTA, and the whole card is the tap target.
   Desktop is untouched - everything here is inside the query.
   ========================================================================== */

@media (max-width:760px){
  ul.products{grid-template-columns:repeat(2,1fr);gap:var(--s4)}

  ul.products li.product{position:relative;padding:var(--s3)}

  /* The card is the link. The title's anchor is stretched over the whole card
     rather than wrapping the card in a second <a>, which would nest anchors. */
  ul.products li.product .bz-card__title a::after{
    content:"";position:absolute;inset:0;z-index:1;
  }

  /* Choosing a variation belongs on the product page at this width; the button
     was taller than the photo and pushed the next card off the screen. */
  ul.products li.product .bz-card__cta,
  ul.products li.product .button,
  ul.products li.product .added_to_cart{display:none}

  /* Type scaled for a ~160px card. */
  ul.products li.product .bz-card__brand{font-size:11px;letter-spacing:.06em}
  ul.products li.product .bz-card__title{font-size:var(--fs-2);line-height:1.3}
  ul.products li.product .bz-card__price{font-size:var(--fs-3)}
  ul.products li.product .bz-strength{gap:3px}
  ul.products li.product .bz-strength__val{padding:1px 5px;font-size:11px}
  ul.products li.product .bz-card__spec{font-size:11px}
}

/* WooCommerce sizes loop items with a percentage width and floats them, for
   its own float-based layout. The grid track already sizes each item, and the
   percentage was shrinking every card inside its track - 75px inside a 155px
   track on mobile, which is why the cards sat narrow and left-aligned with a
   gap beside them. Same class of defect as the clearfix pseudo-elements. */
ul.products li.product{
  width:auto!important;
  float:none!important;
  margin-left:0;margin-right:0;
}

/* ---- stacking: the header must sit above page furniture ----
   WooCommerce gives the gallery's zoom trigger z-index:99, which painted it
   over the navigation dropdowns. The header gets its own stacking context
   above the document, and the trigger drops back into the page. */
.bz-header{position:relative;z-index:200}
.woocommerce-product-gallery__trigger{z-index:2}




/* ============================================================================
   RICH TEXT COMPONENTS  (.bz-rich)

   One system for every body of imported copy: product descriptions, category
   descriptions, the long-form copy beneath category grids, and content pages.
   Previously these were three separate blocks written at different times, so
   the same component rendered differently depending on where it appeared.

   The authored markup ships its own <style> block, which the importer strips
   (embedding author CSS is unsafe, and the 69 distinct blocks were variations
   on one house style). That house style is expressed here once, in theme
   tokens, so it matches the rest of the site rather than approximating it.

   Scoping to .bz-rich is required, not cosmetic: the source uses generic names
   (.hero, .details, .notice, .card, .feature-card) that collide with the theme.
   ========================================================================== */

.bz-rich{
  --rich-edge:#cfe7f6;--rich-wash:#f2f9fe;--rich-wash-2:#e6f4fd;
  color:var(--body);
}
/* Authored copy sets its own colours inline - including panels with a dark
   ground and white text. Colour is therefore set ONCE above and inherited;
   forcing it on descendants overrode those inline values and produced dark
   text on a dark panel. Explicit colours below appear only where this
   stylesheet also owns the background. */

/* ---- panels: the pale gradient container ---- */
.bz-rich .breazy-section,
.bz-rich .breazy-read-more,
.bz-rich .breazy-seo-wrap,
.bz-rich .hero,
.bz-rich .breazy-hero{
  margin:0 0 var(--s5);padding:var(--s6);
  background:linear-gradient(180deg,var(--rich-wash) 0%,var(--rich-wash-2) 100%);
  border:1px solid var(--rich-edge);border-radius:18px;
}
.bz-rich .breazy-product-wrapper,
.bz-rich .breazy-product-wrap,
.bz-rich .breazy-content-wrap,
.bz-rich .breazy-seo-inner,
.bz-rich .breazy-product-section{max-width:none;margin:0}

/* ---- cards ---- */
.bz-rich .breazy-card,
.bz-rich .breazy-product-card,
.bz-rich .breazy-faq-card,
.bz-rich .breazy-info-card,
.bz-rich .breazy-compare-card,
.bz-rich .breazy-product-block,
.bz-rich .flavor-card{
  margin:0 0 var(--s4);padding:var(--s5);
  background:var(--paper);
  border:1px solid var(--rich-edge);border-radius:16px;
  box-shadow:0 6px 20px rgba(38,144,190,.07);
}
.bz-rich .breazy-card:last-child,
.bz-rich .breazy-product-card:last-child,
.bz-rich .breazy-faq-card:last-child,
.bz-rich .breazy-info-card:last-child{margin-bottom:0}

/* Feature cards carry a brand accent bar down their leading edge. */
.bz-rich .feature-card,
.bz-rich .breazy-feature-card{
  margin:0;padding:var(--s4) var(--s4) var(--s4) var(--s5);
  background:var(--paper);
  border:1px solid var(--rich-edge);
  border-left:4px solid var(--brand);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(38,144,190,.07);
}

/* ---- headings inside rich text ---- */
.bz-rich .breazy-card h2,
.bz-rich .breazy-product-card h2,
.bz-rich .breazy-compare-card h2,
.bz-rich .breazy-info-card h2,
.bz-rich .hero h2,
.bz-rich .breazy-hero h2,
.bz-rich .breazy-section > h2{
  margin:0 0 var(--s3);font-family:var(--display);
  font-size:var(--fs-5);font-weight:700;line-height:1.2;
  color:var(--brand-ink);letter-spacing:-.005em;
}
.bz-rich h2:not([style*="color"]),
.bz-rich h3:not([style*="color"]),
.bz-rich h4:not([style*="color"]){font-family:var(--display);font-weight:700}
.bz-rich .breazy-card h3,
.bz-rich .breazy-product-card h3,
.bz-rich .feature-card h3,
.bz-rich .feature-card h4,
.bz-rich .breazy-feature-title,
.bz-rich .breazy-faq-card-title,
.bz-rich .breazy-info-card-title,
.bz-rich .faq-question{
  margin:0 0 var(--s2);font-family:var(--display);
  font-size:var(--fs-3);font-weight:700;
  line-height:var(--lh-snug);
}
.bz-rich .breazy-card h3:not([style*="color"]),
.bz-rich .breazy-product-card h3:not([style*="color"]),
.bz-rich .feature-card h3:not([style*="color"]),
.bz-rich .breazy-faq-card-title:not([style*="color"]),
.bz-rich .breazy-info-card-title:not([style*="color"]){color:var(--brand-ink)}
.bz-rich .breazy-faq-title,
.bz-rich .breazy-read-more-title{
  margin:0 0 var(--s5);text-align:center;font-family:var(--display);
  font-size:var(--fs-6);font-weight:700;color:var(--ink);line-height:1.15;
}

/* ---- body copy ---- */
.bz-rich p,
.bz-rich .breazy-faq-card-body,
.bz-rich .breazy-info-card-body,
.bz-rich .faq-answer{margin:0 0 var(--s3);font-size:var(--fs-2);line-height:1.75}
.bz-rich p:last-child{margin-bottom:0}
.bz-rich strong,.bz-rich b{font-weight:700}
.bz-rich a{color:var(--brand-ink);font-weight:600}
.bz-rich a:hover{color:var(--brand-fill)}

/* ---- eyebrow pill (section badge) ---- */
.bz-rich .breazy-intro-pill,
.bz-rich .breazy-flavor-pill,
.bz-rich .breazy-badge{
  display:inline-block;padding:7px 16px;margin:0 6px 8px 0;
  background:var(--brand-fill);color:#fff;
  border-radius:var(--r-pill);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.bz-rich .breazy-intro-pills{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0 0;padding:0;list-style:none}
.bz-rich .breazy-copy-intro{margin:0 0 var(--s5)}

/* ---- grids ---- */
.bz-rich .feature-grid,
.bz-rich .flavor-grid,
.bz-rich .breazy-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s4);margin:0 0 var(--s5);
}

/* ---- spec / detail lists: pill rows ---- */
.bz-rich .breazy-specs,
.bz-rich .breazy-product-details,
.bz-rich .breazy-feature-list,
.bz-rich .breazy-compatible-list,
.bz-rich .compatibility,
.bz-rich .details{margin:0 0 var(--s4);padding:0;list-style:none}
.bz-rich .breazy-specs ul,
.bz-rich .breazy-product-details ul,
.bz-rich .breazy-feature-list ul,
.bz-rich .breazy-compatible-list ul,
.bz-rich .compatibility ul,
.bz-rich .details ul{margin:0;padding:0;list-style:none}
.bz-rich .breazy-specs li,
.bz-rich .breazy-product-details li,
.bz-rich .breazy-feature-list li,
.bz-rich .breazy-compatible-list li,
.bz-rich .compatibility li,
.bz-rich .details li{
  margin:0 0 var(--s2);padding:12px 16px;
  background:var(--rich-wash);border:1px solid var(--rich-edge);
  border-radius:10px;color:var(--body);font-size:var(--fs-2);line-height:1.6;
}
.bz-rich .breazy-specs li:last-child,
.bz-rich .breazy-product-details li:last-child,
.bz-rich .details li:last-child{margin-bottom:0}

/* ---- plain lists keep their markers ---- */
.bz-rich ul:not([class]),.bz-rich ol:not([class]){margin:0 0 var(--s4);padding-left:22px;line-height:1.75}
.bz-rich ul:not([class]) li,.bz-rich ol:not([class]) li{margin:0 0 8px;font-size:var(--fs-2)}

/* ---- tables (21 product descriptions and 3 category blocks carry one) ---- */
.bz-rich table{
  width:100%;border-collapse:separate;border-spacing:0;
  margin:0 0 var(--s5);font-size:var(--fs-2);
  border:1px solid var(--rich-edge);border-radius:12px;overflow:hidden;
}
.bz-rich table th,.bz-rich table td{
  padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rich-edge);color:var(--body);
}
.bz-rich table thead th{
  background:var(--rich-wash-2);color:var(--brand-ink);
  font-family:var(--display);font-weight:700;font-size:var(--fs-2);
}
.bz-rich table tr:last-child td{border-bottom:0}
.bz-rich table tr:nth-child(even) td{background:var(--rich-wash)}

/* ---- comparison rows (a table expressed as a grid in the source) ---- */
.bz-rich .breazy-compare-grid{display:grid;gap:10px;width:100%}
.bz-rich .breazy-compare-row{
  display:grid;grid-template-columns:200px repeat(auto-fit,minmax(180px,1fr));
  gap:10px;align-items:stretch;
}
.bz-rich .breazy-compare-feature{
  padding:14px 16px;background:var(--rich-wash-2);
  border:1px solid var(--rich-edge);border-radius:10px;
  color:var(--ink);font-weight:700;font-size:var(--fs-2);
}
.bz-rich .breazy-compare-item{
  padding:14px 16px;background:var(--paper);
  border:1px solid var(--rich-edge);border-radius:10px;
}
.bz-rich .breazy-compare-label{
  display:block;margin-bottom:4px;color:var(--brand-ink);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.bz-rich .breazy-compare-text{font-size:var(--fs-2);line-height:1.6;color:var(--body)}

/* ---- notices and statutory warnings ---- */
.bz-rich .breazy-warning,
.bz-rich .breazy-disclaimer,
.bz-rich .disclaimer{
  margin:var(--s4) 0 0;padding:16px 18px;
  background:#fff5f5;border-left:4px solid var(--deal);
  border-radius:0 10px 10px 0;
  font-size:var(--fs-1);line-height:1.7;color:var(--body);
}
.bz-rich .breazy-notice,
.bz-rich .breazy-note,
.bz-rich .notice{
  margin:var(--s4) 0;padding:16px 18px;
  background:var(--rich-wash);border-left:4px solid var(--brand);
  border-radius:0 10px 10px 0;
  font-size:var(--fs-2);line-height:1.7;color:var(--body);
}

/* ---- the read-more accordion the source markup builds from a checkbox ---- */
.bz-rich .breazy-read-more-wrap{margin-top:var(--s4)}
.bz-rich .breazy-read-more-checkbox{display:none}
.bz-rich .breazy-read-more-toggle{
  display:inline-block;padding:12px 22px;
  background:var(--brand-fill);color:#fff !important;
  border-radius:var(--r-pill);font-weight:700;text-decoration:none;cursor:pointer;
}
.bz-rich .breazy-read-more-toggle:hover{background:var(--brand-deep)}
.bz-rich .breazy-read-more-content{display:none;margin-top:var(--s5)}
.bz-rich .breazy-read-more-checkbox:checked ~ .breazy-read-more-content{display:block}
.bz-rich .breazy-read-more-checkbox:checked ~ label .show-more{display:none}
.bz-rich .breazy-read-more-checkbox:not(:checked) ~ label .show-less{display:none}

/* ---- Word/Excel paste residue carried in from the source ---- */
.bz-rich .p1,.bz-rich .p2,.bz-rich .p3,
.bz-rich .li1,.bz-rich .li3,.bz-rich .ul1{margin:0 0 var(--s3);font:inherit;color:var(--body)}
.bz-rich .Apple-converted-space{display:inline}
.bz-rich p:empty,.bz-rich div:empty:not([class]){display:none}
.bz-rich img{max-width:100%;height:auto;border-radius:10px}

@media (max-width:760px){
  .bz-rich .breazy-section,
  .bz-rich .breazy-read-more,
  .bz-rich .hero,
  .bz-rich .breazy-hero{padding:var(--s4);border-radius:14px}
  .bz-rich .breazy-card,
  .bz-rich .breazy-product-card,
  .bz-rich .breazy-faq-card,
  .bz-rich .breazy-compare-card{padding:var(--s4)}
  .bz-rich .feature-grid,
  .bz-rich .flavor-grid,
  .bz-rich .breazy-grid{grid-template-columns:1fr}
  .bz-rich .breazy-compare-row{grid-template-columns:1fr}
  .bz-rich .breazy-faq-title,
  .bz-rich .breazy-read-more-title{font-size:var(--fs-5);text-align:left}
  .bz-rich table{display:block;overflow-x:auto}
}

/* ============================================================================
   CART & CHECKOUT  (WooCommerce Blocks)

   The block cart and checkout ship their own button and form styling and do not
   read the theme's tokens, so the primary actions rendered as dark slate boxes
   with underlined link text. Brought onto the brand.
   ========================================================================== */

/* ---- page furniture ---- */
.woocommerce-cart .bz-content,
.woocommerce-checkout .bz-content{padding-bottom:var(--s8)}
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{margin-top:var(--s5)}

.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-cart__submit-container + *,
.wc-block-components-checkout-step__title{
  font-family:var(--display)!important;color:var(--ink)!important;font-weight:700!important;
}
.wc-block-components-sidebar .wc-block-components-title,
.wc-block-components-totals-item__label{color:var(--ink)}

/* ---- primary actions: brand fill, white label, never a link ---- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button{
  background:var(--brand-fill)!important;
  border:0!important;border-radius:var(--r-1)!important;
  color:#fff!important;text-decoration:none!important;
  font-family:var(--sans)!important;font-weight:700!important;
  font-size:var(--fs-3)!important;letter-spacing:.01em;
  min-height:54px;padding:14px var(--s5)!important;
  box-shadow:none!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-deep)!important;color:#fff!important;text-decoration:none!important;
}
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;
}
/* Secondary/link buttons stay quiet. */
.wc-block-components-button.is-link{color:var(--brand-ink)!important;font-weight:600}

/* ---- panels: summary, totals, order review ---- */
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-panel,14px);
}
/* The summary block sits INSIDE the sidebar card - giving it its own border
   drew a second rounded box within the first. */
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-order-summary{background:transparent;border:0;border-radius:0}
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar{padding:var(--s5)}
.wc-block-components-totals-wrapper{border-top-color:var(--line)!important}
.wc-block-components-totals-footer-item{
  font-family:var(--display);font-weight:700;color:var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount{
  font-size:var(--fs-5);font-weight:700;color:var(--ink);
}

/* ---- form controls, matched to the account forms ---- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-select__container,
.wc-blocks-components-select__container{
  border-radius:var(--r-1)!important;
  border-color:var(--line)!important;
  font-family:var(--sans)!important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select__container:focus-within{
  outline:2px solid var(--brand)!important;outline-offset:1px;
  border-color:var(--brand-fill)!important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-checkout-step__heading-content{color:var(--muted)}

/* ---- cart line items ---- */
.wc-block-cart-items__header{
  font-family:var(--sans);font-size:var(--fs-1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* The two columns are cards of equal weight. Blocks ships the item list as a
   bare table, so its row rules stopped short of the panel edge and the total
   column sat hard against it. */
.wc-block-cart .wc-block-cart__main{
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-panel,14px);
  padding:var(--s5) var(--s5) var(--s4);
  margin:0;
}
.wc-block-cart .wc-block-cart-items{width:100%;border-collapse:collapse;margin:0}
.wc-block-cart .wc-block-cart-items th,
.wc-block-cart .wc-block-cart-items td{padding-left:0;padding-right:0}
.wc-block-cart .wc-block-cart-items__header th{padding-bottom:var(--s3);border-bottom:0}
.wc-block-cart .wc-block-cart-items thead{border-bottom:1px solid var(--line)}
.wc-block-cart .wc-block-cart-items thead tr{border:0}
/* Every cell in a row carries the divider, so it spans the full width. */
.wc-block-cart .wc-block-cart-items__row td{
  padding-top:var(--s4);padding-bottom:var(--s4);border-bottom:0;
}
.wc-block-cart .wc-block-cart-items__row{border-bottom:1px solid var(--line-2)}
.wc-block-cart .wc-block-cart-items__row:last-child{border-bottom:0}
.wc-block-cart .wc-block-cart-item__image{width:88px;padding-right:var(--s4)}
.wc-block-cart .wc-block-cart-item__image img{width:72px;height:auto;border-radius:var(--r-1)}
.wc-block-cart .wc-block-cart-item__total{
  text-align:right;white-space:nowrap;vertical-align:top;
  font-weight:700;color:var(--ink);
}
.wc-block-cart .wc-block-cart-item__prices{margin:2px 0 0}
.wc-block-cart .wc-block-components-product-details{margin:6px 0 0;font-size:var(--fs-1);color:var(--muted)}
.wc-block-cart .wc-block-cart-item__quantity{margin-top:var(--s3)}

/* Sidebar: same card, and it follows the list rather than floating in space. */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar{
  padding:var(--s5);align-self:start;
}
.wc-block-cart .wc-block-cart__sidebar{align-self:start}
.wc-block-cart .wc-block-cart__submit-container{margin-top:var(--s4);padding:0}
.wc-block-cart .wc-block-components-totals-item{padding-left:0;padding-right:0}
.wc-block-cart-item__product .wc-block-components-product-name{
  color:var(--ink)!important;font-weight:700;text-decoration:none;
}
.wc-block-cart-item__product .wc-block-components-product-name:hover{color:var(--brand-ink)!important}
.wc-block-cart-item__image img{border-radius:var(--r-1)}
.wc-block-components-quantity-selector{border-radius:var(--r-1);border-color:var(--line)}
.wc-block-components-quantity-selector__button{color:var(--ink)}

/* ---- notices ---- */
.wc-block-components-notice-banner{border-radius:var(--r-1)}
.wc-block-components-notice-banner.is-error{border-color:var(--deal)}

/* Components whose background this stylesheet owns keep an explicit colour;
   everything else inherits so authored inline colours survive. */
.bz-rich .breazy-specs li,
.bz-rich .breazy-product-details li,
.bz-rich .details li,
.bz-rich .breazy-compare-item,
.bz-rich .breazy-compare-text,
.bz-rich table td{color:var(--body)}
.bz-rich .breazy-compare-feature,
.bz-rich table thead th{color:var(--ink)}

/* ============================================================================
   CONTACT PAGE + FAQ ACCORDION
   ========================================================================== */

.bz-contact__head{max-width:640px;margin:0 0 var(--s7)}
.bz-contact__lede{font-size:var(--fs-3);color:var(--muted);margin:var(--s2) 0 0;line-height:1.6}
.bz-contact__layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:start}
.bz-contact__main{min-width:0}

/* ---- form ---- */
.bz-contact__form{margin:0}
.bz-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s4)}
.bz-contact__field{margin:0;display:flex;flex-direction:column;gap:6px}
.bz-contact__field--wide{grid-column:1 / -1}
.bz-contact__field label{font-size:var(--fs-2);font-weight:600;color:var(--ink)}
.bz-contact__req{color:var(--deal);margin-left:2px}
.bz-contact__field input,
.bz-contact__field textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-1);
  background:var(--paper);color:var(--ink);
  font:inherit;font-size:var(--fs-2);
}
.bz-contact__field textarea{resize:vertical;min-height:150px;line-height:1.6}
.bz-contact__field input:focus,
.bz-contact__field textarea:focus{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand-fill);
}
.bz-contact__submit{
  margin-top:var(--s5);padding:14px var(--s6);
  border:0;border-radius:var(--r-1);
  background:var(--brand-fill);color:#fff;
  font:inherit;font-size:var(--fs-3);font-weight:700;cursor:pointer;
}
.bz-contact__submit:hover{background:var(--brand-deep)}
/* Honeypot: present for bots, never shown to people or screen readers. */
.bz-contact__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bz-contact__ok,.bz-contact__err{
  margin:0 0 var(--s5);padding:14px 18px;border-radius:var(--r-1);
  font-size:var(--fs-2);font-weight:600;
}
.bz-contact__ok{background:#e8f5ec;border-left:4px solid #0f7a37;color:#0f5f2c}
.bz-contact__err{background:#fdecea;border-left:4px solid var(--deal);color:#8f2d0b}

/* ---- aside cards ---- */
.bz-contact__aside{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.bz-contact__card{
  padding:var(--s5);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-panel,14px);
}
.bz-contact__card--quiet{background:var(--haze);border-color:var(--line-2)}
.bz-contact__card-title{
  margin:0 0 var(--s4);font-family:var(--display);
  font-size:var(--fs-4);font-weight:700;color:var(--ink);
}
.bz-contact__method{margin:0 0 var(--s4);font-size:var(--fs-2);line-height:1.6;color:var(--body)}
.bz-contact__method:last-of-type{margin-bottom:0}
.bz-contact__label{
  display:block;font-size:var(--fs-1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;
}
.bz-contact__method a{color:var(--brand-ink);font-weight:700}
.bz-contact__note{
  margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-2);
  font-size:var(--fs-1);color:var(--muted);line-height:1.6;
}
.bz-contact__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bz-contact__links a{color:var(--brand-ink);font-weight:600;font-size:var(--fs-2)}

/* ---- FAQ accordion (native <details>, no JavaScript) ---- */
.bz-faq{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--line)}
.bz-faq__title{font-family:var(--display);font-size:var(--fs-5);font-weight:700;color:var(--ink);margin:0}
.bz-faq__sub{color:var(--muted);margin:var(--s2) 0 var(--s5);font-size:var(--fs-2)}
.bz-faq__list{
  max-width:820px;border:1px solid var(--line);
  border-radius:var(--r-panel,14px);overflow:hidden;background:var(--paper);
}
.bz-faq__item + .bz-faq__item{border-top:1px solid var(--line-2)}
.bz-faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);cursor:pointer;list-style:none;
  font-family:var(--display);font-size:var(--fs-3);font-weight:700;color:var(--ink);
  line-height:var(--lh-snug);
}
.bz-faq__q::-webkit-details-marker{display:none}
.bz-faq__q:hover{background:var(--haze);color:var(--brand-ink)}
.bz-faq__q:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
/* Chevron drawn from a border so it needs no asset and follows currentColor. */
.bz-faq__q::after{
  content:"";flex:none;width:9px;height:9px;margin-right:2px;
  border-right:2px solid var(--brand-fill);border-bottom:2px solid var(--brand-fill);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.bz-faq__item[open] > .bz-faq__q{color:var(--brand-ink);background:var(--brand-wash,#f2f9fe)}
.bz-faq__item[open] > .bz-faq__q::after{transform:rotate(225deg) translateY(-2px)}
.bz-faq__a{padding:0 var(--s5) var(--s5)}
.bz-faq__a p{margin:0;font-size:var(--fs-2);line-height:1.75;color:var(--body)}
.bz-faq__more{margin:var(--s5) 0 0}
.bz-faq__more a{color:var(--brand-ink);font-weight:700;text-decoration:underline}

@media (max-width:900px){
  .bz-contact__layout{grid-template-columns:1fr;gap:var(--s6)}
}
@media (max-width:600px){
  .bz-contact__grid{grid-template-columns:1fr}
  .bz-faq__q{padding:var(--s4);font-size:var(--fs-2)}
  .bz-faq__a{padding:0 var(--s4) var(--s4)}
}

/* ---- cart & checkout sidebar: exactly one box ----
   Blocks nests several wrappers inside the sidebar (the cart and checkout use
   DIFFERENT summary-block classes), and any of them carrying a border draws a
   second rounded box inside the card. Rather than name each one, every
   descendant surface is flattened and the card is drawn once on the sidebar
   itself; the dividers are then put back deliberately. */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar > div,
.wc-block-components-sidebar > div > div,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary,
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
/* One divider between each totals row, aligned to the card's inner edge. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-totals-wrapper{
  border-top:1px solid var(--line)!important;
  padding-left:0;padding-right:0;
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-of-type{border-top:0!important}
/* The order-summary item list sits above the totals and needs its own rule. */
.wc-block-components-sidebar .wc-block-components-order-summary__content{padding:0}
.wc-block-components-sidebar .wc-block-components-order-summary-item{
  padding:var(--s4) 0;border-bottom:1px solid var(--line-2);
}
.wc-block-components-sidebar .wc-block-components-order-summary-item:last-child{border-bottom:0}
/* Submit sits outside the card on the cart, so it keeps its own radius. */
.wc-block-cart__submit-container .wc-block-cart__submit-button{border-radius:var(--r-1)!important}

/* ---- cart & checkout: card padding, and a real gutter between the two cards ----
   Two separate bugs produced the seam:
   1. Woo splits the layout 65%/35% with no gap, so the two rounded cards touch
      edge to edge and their adjacent borders read as one broken double line.
   2. The card padding never applied. `wc-block-cart__sidebar` and
      `wc-block-components-sidebar` sit on the SAME element, so a descendant
      selector between them matches nothing and Woo's own padding-left-only rule
      won — leaving content and dividers flush against the border.
   Widths are handed to flex so `gap` can draw the gutter honestly. */
.wc-block-components-sidebar-layout{
  display:flex;
  gap:var(--s5);
  align-items:flex-start;
}
.wc-block-components-sidebar-layout > .wc-block-components-main{
  width:auto!important;
  flex:1 1 auto;
  padding-right:var(--s5)!important;
}
.wc-block-components-sidebar-layout > .wc-block-components-sidebar{
  width:auto!important;
  flex:0 0 360px;
  padding:var(--s5)!important;
  align-self:flex-start;
}
/* Woo has no breakpoint of its own here — it relies on JS size classes — so the
   stack is declared explicitly rather than left to chance. */
@media (max-width:860px){
  .wc-block-components-sidebar-layout{flex-direction:column;gap:var(--s4)}
  .wc-block-components-sidebar-layout > .wc-block-components-main,
  .wc-block-components-sidebar-layout > .wc-block-components-sidebar{
    flex:1 1 auto;width:100%!important;
  }
  .wc-block-components-sidebar-layout > .wc-block-components-main{padding-right:var(--s4)!important}
}

/* ---- cart items table: one row rule, not three cell rules ----
   Woo borders each <td> individually, so a row's line was drawn as three
   segments (image / product / total) in three different colours, breaking at
   every column boundary. The table itself added a fourth line. Borders are
   cleared table-wide and re-drawn once per row, where they belong. */
.wc-block-cart-items,
.wc-block-cart-items td,
.wc-block-cart-items th,
.wc-block-cart-items tbody,
.wc-block-cart-items tfoot{border:0!important}
.wc-block-cart-items thead th{border-bottom:1px solid var(--line)!important}
.wc-block-cart-items .wc-block-cart-items__row{border-bottom:1px solid var(--line-2)!important}
.wc-block-cart-items .wc-block-cart-items__row:last-child{border-bottom:0!important}

/* Checkout's layout sets flex-wrap:wrap, so a main column with an `auto` basis
   claims the whole row and pushes the sidebar onto the next line. A zero basis
   makes it yield the sidebar's track first, then fill what's left; min-width:0
   stops long field content from forcing an overflow back into a wrap. */
.wc-block-components-sidebar-layout > .wc-block-components-main{
  flex:1 1 0!important;
  min-width:0;
}

/* ---- theme components nested inside imported rich text ----
   `.bz-rich a` (0,1,1) outranks a component's own class rule (0,1,0), so any
   themed anchor sitting inside imported copy had its label repainted with the
   prose link colour. On the guide CTAs that is invisible text: --brand-ink and
   --brand-fill are the SAME hex (#0879BA), i.e. 1:1 contrast. Only the :hover
   rules (0,2,0) were winning, which is why a hovered button showed its label.
   Each component's intended colour is restated here at (0,2,1) so it wins.
   98.7% of imported anchors carry no class at all and keep the prose styling. */
.bz-rich a.bz-guide-product__cta,
.bz-rich a.bz-guide-product__cta:hover,
.bz-rich a.bz-guide-product__cta:focus{color:#fff}
.bz-rich a.bz-flavors__item{color:#3d3a3a;font-weight:inherit}
.bz-rich a.bz-guide__item{color:var(--ink);font-weight:inherit}
.bz-rich a.bz-guide-product__media{color:inherit;font-weight:inherit}
.bz-rich a.bz-guide-product__title,
.bz-rich .bz-guide-product__title a{color:var(--ink)}

/* ---- contrast fixes found by a rendered WCAG sweep ----
   1. The "100+" pill declares color:#fff, but it sits inside a section title,
      and `.bz-section__title a{color:inherit}` (0,2,0) outranks
      `.bz-brandrow__all` (0,1,0) — so it inherited the title's navy and drew
      #0B1B2B on #0879BA = 3.69:1. Restated at (0,3,0).
   2. --faint (#8496A4) is only 3.05:1 on white. That is fine for large or
      decorative text but not for these 11-13px uppercase labels, which are
      real content (the brand name on every product card, and facet counts).
      --muted (#5B6B79) is the same family at 5.49:1. */
.bz-section__title a.bz-brandrow__all,
.bz-section__title a.bz-brandrow__all:hover,
.bz-section__title a.bz-brandrow__all:focus{color:#fff}
.bz-card__brand{color:var(--muted)}
.bz-filters__count{color:var(--muted)}

/* ============================================================
   PLAIN PRODUCT DESCRIPTIONS  (.bz-rich--plain)
   722 of 1,616 products have no authored structure - just prose and a spec
   list. Live is equally bare, so nothing was lost in migration; but beside a
   BigCommerce-carded product they read as unstyled. This gives that shape a
   deliberate treatment using the theme's own type and palette.
   Every selector is a CHILD combinator so authored cards, which nest their
   content inside <div>s, are never touched.
   ============================================================ */

/* Prose gets a readable measure and the body size, not the 15px meta size.
   The spec panel below deliberately stays full width. */
.bz-rich--plain > p{
  max-width:72ch;
  font-size:var(--fs-3);
  line-height:1.72;
  margin:0 0 var(--s4);
}

/* Section headings. A hairline rule separates spec blocks from the prose
   without adding the weight of a full card. */
.bz-rich--plain > h2,
.bz-rich--plain > h1{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-5);line-height:var(--lh-snug);
  color:var(--ink);
  margin:var(--s6) 0 var(--s4);
  padding-bottom:var(--s2);
  border-bottom:2px solid var(--rich-edge);
}
.bz-rich--plain > h1:first-child,
.bz-rich--plain > h2:first-child{margin-top:0}
.bz-rich--plain > h3,
.bz-rich--plain > h4{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-4);line-height:var(--lh-snug);
  color:var(--brand-deep);
  margin:var(--s5) 0 var(--s3);
}

/* The spec list becomes a panel: two columns of hairline-separated rows.
   Authored lists (which live inside divs) keep their own styling. */
.bz-rich--plain > ul{
  list-style:none;
  margin:0 0 var(--s5);
  padding:var(--s2) var(--s5);
  border:1px solid var(--rich-edge);
  border-radius:var(--r-1);
  background:var(--rich-wash);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s6);
}
.bz-rich--plain > ul > li{
  position:relative;
  margin:0;
  padding:10px 0 10px 20px;
  font-size:var(--fs-2);
  line-height:1.55;
  border-bottom:1px solid var(--rich-edge);
}
.bz-rich--plain > ul > li::before{
  content:"";
  position:absolute;left:2px;top:1.15em;
  width:6px;height:6px;border-radius:50%;
  background:var(--brand-fill);
}
/* Close the panel cleanly: drop the rule under the final row. In a two-column
   grid that is the last item, plus the second-to-last when it sits in the left
   column (i.e. the last row is full). */
.bz-rich--plain > ul > li:last-child,
.bz-rich--plain > ul > li:nth-last-child(2):nth-child(odd){border-bottom:0}

/* Imported spec items end with a trailing <br> inside their span, which adds a
   phantom half-line to every row. */
.bz-rich--plain > ul > li br:last-child{display:none}

/* Ordered lists keep numbering but pick up the same panel treatment. */
.bz-rich--plain > ol{
  margin:0 0 var(--s5);padding-left:20px;
  font-size:var(--fs-2);line-height:1.75;
}
.bz-rich--plain > ol > li{margin:0 0 var(--s2)}

@media (max-width:720px){
  .bz-rich--plain > ul{grid-template-columns:1fr;padding:var(--s2) var(--s4)}
  /* Single column: only the true last item ends the panel. */
  .bz-rich--plain > ul > li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--rich-edge)}
  .bz-rich--plain > ul > li:last-child{border-bottom:0}
  .bz-rich--plain > p{font-size:var(--fs-2)}
}

/* The older generic list rules `.bz-rich ul:not([class])` (0,2,1) and
   `.bz-rich ul:not([class]) li` (0,2,2) outrank the plain-panel rules above,
   which reintroduced a 22px left padding and an 8px margin under every row.
   Doubling the class matches their specificity exactly, so source order decides
   and these win. */
.bz-rich.bz-rich--plain > ul{
  padding:var(--s2) var(--s5);
  margin:0 0 var(--s5);
  line-height:1.55;
}
.bz-rich.bz-rich--plain > ul > li{
  margin:0;
  padding:10px 0 10px 20px;
  font-size:var(--fs-2);
}
.bz-rich.bz-rich--plain > ul > li:last-child,
.bz-rich.bz-rich--plain > ul > li:nth-last-child(2):nth-child(odd){border-bottom:0}
@media (max-width:720px){
  .bz-rich.bz-rich--plain > ul{padding:var(--s2) var(--s4)}
  .bz-rich.bz-rich--plain > ul > li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--rich-edge)}
  .bz-rich.bz-rich--plain > ul > li:last-child{border-bottom:0}
}

/* ============================================================
   FIXES FROM THE STYLESHEET AUDIT
   ============================================================ */

/* Nav dropdowns were unreachable between 861px and 1280px. The rule at
   style.css:1004 makes the nav list a horizontal scroller to fit narrow
   desktops, but a scroll container clips absolutely-positioned children —
   overflow-y computes to `auto`, not `visible`, once overflow-x is set — so the
   submenus were painted and then cut off. Below 861px the drawer takes over and
   submenus render inline, which is why only this band broke. The list wraps
   here instead of scrolling, which fits the same nav without trapping it. */
@media (min-width:861px) and (max-width:1280px){
  .bz-nav__list{overflow:visible;flex-wrap:wrap;justify-content:center}
}

/* Account links inside the drawer: desktop keeps them in the header bar. */
.bz-nav__account{display:none}
@media (max-width:860px){
  .bz-nav__account{
    display:flex;flex-direction:column;gap:var(--s3);
    padding:var(--s4) 0 var(--s2);
    border-top:1px solid var(--line);
    margin-top:var(--s3);
  }
  .bz-nav__account a{
    font-family:var(--display);font-weight:700;
    font-size:var(--fs-2);letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink);
  }
}

/* The footer held three columns all the way to 320px, crushing them to roughly
   115/82/82px and overflowing long link labels. */
@media (max-width:640px){
  .bz-footer__grid{grid-template-columns:1fr;gap:var(--s5)}
}

/* The flavour-tile product count was drawn at opacity .3 over #3d3a3a, which
   composites to about #c5c4c4 on white — 1.74:1 at 12px, effectively
   unreadable, on all 52 tiles of /pages/vape-flavors/. */
.bz-flavors__item > div:nth-of-type(3){opacity:1;color:var(--muted)}

/* An applied-filter chip painted white on --brand (#16A4F5) at hover: 2.74:1.
   The palette comment at the top of this file marks that blue as one that can
   never carry white text; --brand-fill is the token that can (4.71:1). */
.bz-filters__applied a:hover{background:var(--brand-fill);color:#fff}

/* Category copy: this stylesheet does not own the background under imported
   copy, so it must not set colour on descendants there. `.bz-archive__copy` and
   `.bz-rich` sit on the SAME element (woocommerce/archive-product.php), and the
   .bz-rich half already had its colour removed for exactly this reason — the
   .bz-archive__copy half was missed, so a <strong> inheriting white from an
   inline-styled ancestor was repainted navy. On /collections/smok that turned
   the words "vape juice" into a dark blot on a blue gradient. */
.bz-archive__copy strong,
.bz-archive__copy b{color:inherit}

/* Below-grid category copy had no rules at all, so its headings ran flush into
   the surrounding paragraphs across the 35 categories that carry it. */
.bz-archive__below h2,
.bz-archive__below h3,
.bz-archive__below h4{
  font-family:var(--display);font-weight:700;color:var(--ink);
  line-height:var(--lh-snug);
}
.bz-archive__below h2{font-size:var(--fs-5);margin:var(--s6) 0 var(--s3)}
.bz-archive__below h3{font-size:var(--fs-4);margin:var(--s5) 0 var(--s2)}
.bz-archive__below h4{font-size:var(--fs-3);margin:var(--s4) 0 var(--s2)}
.bz-archive__below h2:first-child,
.bz-archive__below h3:first-child{margin-top:0}

/* WooCommerce core's pagination selector is (0,3,4) and outranked the theme's
   (0,2,0), leaving the current page as pale purple on lavender. Matching its
   shape wins the cascade honestly rather than reaching for !important. */
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current{
  background:var(--brand-fill);
  border-color:var(--brand-fill);
  color:#fff;
}

/* Blocks sets font-weight on the cart header's <th> children, so a rule on the
   header row never reached them. */
table.wc-block-cart-items .wc-block-cart-items__header th{
  font-size:var(--fs-1);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ---- authored read-more inside category copy ----
   BigCommerce's copy carries its own read-more: a hidden checkbox, a label, and
   a `.breazy-read-more-content` block that is display:none until the checkbox is
   checked. The theme reproduced that faithfully — but this copy already sits
   inside the category description's own Read More, so the FAQs ended up behind
   TWO controls and were invisible even once the description was expanded.
   The outer toggle is the one shoppers see, so the inner content is simply
   shown and its now-redundant control removed. Four category descriptions use
   this pattern; on /collections/vape-juice it was hiding 10 FAQ cards. */
.bz-rich .breazy-read-more-content,
.bz-rich .breazy-read-more-checkbox:not(:checked) ~ .breazy-read-more-content{
  display:block;
  margin-top:var(--s5);
}
.bz-rich .breazy-read-more-toggle,
.bz-rich .breazy-read-more-wrap > label{display:none}

/* ---- out-of-stock variation swatches ----
   Sold-out options stay clickable so WooCommerce can still show its own
   out-of-stock notice and the shopper can see what they wanted — but they must
   never read as buyable. Greyed, de-emphasised, and carrying a grey ×.
   Distinct from .is-unavailable, which means the combination does not exist. */
.bz-variant{display:inline-flex;align-items:center;gap:8px}
.bz-variant__x{
  font-size:1.15em;line-height:1;font-weight:400;
  color:var(--faint);
}
.bz-variant.is-oos{
  border-color:var(--line);
  color:var(--muted);
  background:var(--haze);
}
.bz-variant.is-oos .bz-variant__label{text-decoration:line-through;text-decoration-thickness:1px}
.bz-variant.is-oos:hover{
  border-color:var(--line);
  color:var(--muted);
}
/* Selected AND sold out: keep the selection legible, keep the × visible. */
.bz-variant.is-oos.is-selected{
  background:var(--muted);border-color:var(--muted);color:#fff;
}
.bz-variant.is-oos.is-selected .bz-variant__x{color:#fff}
.bz-variant.is-oos.is-selected .bz-variant__label{text-decoration:line-through}

/* Legend, shown only when a group actually has sold-out options. */
.bz-variant-legend{
  display:inline-flex;align-items:center;gap:6px;
  width:100%;margin-top:var(--s2);
  font-size:var(--fs-1);color:var(--muted);
}

/* ---- product tile image: never let the artwork resize the card ----
   `height:100%` on the image resolves against a container whose own height
   comes from `aspect-ratio`, i.e. an indefinite height — so the browser falls
   back to the image's intrinsic ratio. For a square thumbnail that lands back
   on the same number and looks fine; for the 8 products whose thumbnail is
   portrait (Cafe Racer Lucky Bastard is 128x320) it computed 218 x 320/128 =
   545px, and because the well is a grid item with `min-height:auto` the
   oversized content stretched the whole card to 898px.
   Centering with flex and bounding the image by max-width/max-height means any
   aspect ratio is letterboxed inside the square well instead of resizing it. */
.bz-card__media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:hidden;
}
.bz-card__media img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}

/* ---- add-to-cart sizing depends on which way its container flexes ----
   `.bz-product__cart .single_add_to_cart_button{flex:1 1 220px}` was written for
   variable products, where the button sits in `.woocommerce-variation-add-to-cart`
   (flex-direction: row) and 220px is a sensible WIDTH basis beside the quantity
   field. A simple product has no variation wrapper: the button is a direct child
   of form.cart, which flexes in COLUMN direction — so flex-basis became a
   HEIGHT and flex-grow stretched it to 220px tall.
   Each context now gets the axis it actually meant. */
.bz-product__cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  flex:1 1 220px;
}
.bz-product__cart form.cart > .single_add_to_cart_button{
  flex:0 0 auto;
  width:100%;
  min-height:52px;
}

/* ---- product gallery: click the picture to open it ----
   With hover-zoom removed, the whole image is the affordance: cursor:zoom-in
   signals it, and WooCommerce's lightbox opens on the image's own link. The
   floating magnifier button is redundant once the image itself is the target,
   and it was the element that used to paint over the variation dropdown. */
.woocommerce-product-gallery__trigger{display:none!important}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a,
.woocommerce-product-gallery__image img{cursor:zoom-in}
.woocommerce-product-gallery__image > a{display:block}
/* No leftover magnified layer if the zoom script is ever re-enabled. */
.woocommerce-product-gallery img.zoomImg{display:none!important}

/* ---- support page contact strip ----
   Sits above the FAQ accordion and reuses the .bz-faq styling below it, so the
   support page and the contact page read as one family. No postal address:
   Breazy is online-only and does not take collections, which the FAQ itself
   says a few items down. */
.bz-support__lede{
  font-size:var(--fs-3);color:var(--muted);
  max-width:64ch;margin:0 0 var(--s5);
}
.bz-support__meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s4);
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--r-1);
  background:var(--haze);
}
.bz-support__meta-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.bz-support__meta-label{
  font-family:var(--display);font-size:var(--fs-1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.bz-support__meta-item a{color:var(--brand-ink);font-weight:600;word-break:break-word}
.bz-support__meta-item a:hover{color:var(--brand-fill)}
@media (max-width:600px){
  .bz-support__meta{padding:var(--s4);gap:var(--s3)}
}

/* ---- homepage product rows: four across ----
   The Featured Vape Products row carries two products from each of four house
   brands, so it is laid out four to a line and wraps to a second full line of
   four rather than leaving an orphan card. Appended after the five/six-wide
   rules so it wins on source order at equal specificity -- and its own
   breakpoint overrides are appended after it for the same reason, otherwise a
   phone would inherit four columns from this rule instead of two.
   Steps down on the same breakpoints as the rows above. */
ul.products.bz-row--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ ul.products.bz-row--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){  ul.products.bz-row--4{grid-template-columns:repeat(2,1fr)} }

/* ---- favorite brands: second row ----
   The section now stacks two logo rows (house brands above the storefront's
   own six). `.bz-brandrow` zeroes its own margin, so without this the two grids
   would sit flush against each other and read as one twelve-cell block. Applied
   to the adjacent sibling only, so a single-row use is unchanged. */
.bz-brandrow + .bz-brandrow{margin-top:var(--s4)}