/* ============================================================================
   BREAZY - BASE
   Loaded on every page: design tokens, document defaults, buttons, the
   statutory warning, header, navigation, product card, breadcrumbs, footer
   and the rich-text system for imported copy.

   Direction: confident consumer brand. Ink navy structures the page, one blue
   means "interactive", one orange means "a deal" and nothing else is coloured.
   A closed palette, three radii, and an eight-step type scale with nothing
   below 13px (and that reserved for uppercase labels).
   ========================================================================== */

: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 only 2.74:1 on white, so it can
     never carry white text or stand alone as a UI edge: it is a FILL with ink
     type on it, and --brand-fill / --brand-ink is the darkened version of the
     same hue used wherever blue carries white text or must be read (4.71:1). */
  --brand:#16A4F5;          /* chips, borders, washes, rules */
  --brand-fill:#0879BA;     /* any surface carrying WHITE text */
  --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;

  /* 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;

  /* ---- typefaces ----
     azo-sans-web was the old storefront's face (Adobe Fonts, licensed per
     domain, never served here). Jost stands in: geometric with a single-storey
     a. Roboto Condensed is the display face. Both are self-hosted from
     assets/fonts. Monospace is off site-wide: the token resolves to the body
     face and font-variant-numeric keeps figures aligned. */
  --sans:"azo-sans-web","Jost","Helvetica Neue",Arial,system-ui,sans-serif;
  --display:"Roboto Condensed","azo-sans-web","Jost",Arial,sans-serif;
  --mono:var(--sans);

  /* ---- type scale ---- */
  --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 */
  --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;
}

/* ---------------------------------------------------------------- document */
*,*::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}

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

.bz-page-title{font-size:var(--fs-6);font-weight:700;margin:0 0 var(--s2)}
.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-section__title a{color:inherit;text-decoration:none}
.bz-section__title a:hover{color:var(--brand-ink);text-decoration:underline}

/* ---------------------------------------------------------------- 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}
}

/* Search form used on the blog, the search page and the 404. */
.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;
}

/* ============================================================================
   STATUTORY WARNING
   Matches the live storefront exactly: 30.8px/30.8px, weight 600, #333,
   centred, on white. 21 CFR 1143.3 requires the nicotine warning to sit inside
   a rectangular border, so the rule is compliance rather than decoration.
   Under 768px it drops to 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;
  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}
}

/* ============================================================================
   HEADER
   Logo left, search on the container's centre line, account + cart right,
   primary navigation beneath. The header gets its own stacking context above
   the document so nothing in the page (WooCommerce's gallery trigger has
   z-index:99) can paint over the navigation dropdowns.
   ========================================================================== */
.bz-header{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:200}
.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. */
  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. On phones the field
   collapses and only the icon remains, which is what the live header does. */
.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("../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;position:relative;
  display:flex;flex-wrap:nowrap;justify-content:center;overflow:visible;
}
/* Uppercase on white, as live. Uppercase is wider than sentence case at the
   same size, so the step drops to 14.5px and the horizontal padding tightens -
   together those keep all nine items on one row at the container width. */
.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);
}
/* Narrow desktops: the list wraps rather than scrolling sideways. A scroll
   container clips absolutely-positioned children (overflow-y computes to auto
   once overflow-x is set), which would cut the dropdowns off in this band. */
@media (min-width:861px) and (max-width:1280px){
  .bz-nav__list{flex-wrap:wrap;justify-content:center}
}

/* ---- dropdowns ---- */
.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);
}
/* 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 fires on a phone. */
@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)}
}

/* Account links inside the drawer: desktop keeps them in the header bar. */
.bz-nav__account{display:none}

/* ============================================================================
   MOBILE HEADER
   Live's mobile header is two rows: hamburger / logo / cart across the top,
   then the search field full width beneath it. The primary nav becomes a
   drawer the burger opens. Desktop is untouched: everything sits inside the
   small-screen query.
   ========================================================================== */
.bz-burger{display:none}

@media (max-width:860px){
  .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("../header-cart-button-icon.png") no-repeat center/contain;
    mask:url("../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}

  .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 STRENGTH SCALE
   Nicotine strength is the axis this catalogue turns on - 91% of products are
   variable on it. It gets its own tabular voice and a fixed slot on every
   card, so 3mg sits directly above 3mg down a column.
   ========================================================================== */
.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}

/* ============================================================================
   PRODUCT CARD
   Fixed anatomy - photo, brand, name, strength, spec, pricing, CTA - and every
   card emits every slot even when empty, so a row of cards can be compared
   straight down a column. Explicit grid, min-width:0 on every child that can
   hold long content, and no overflow:hidden anywhere that can clip a control.
   ========================================================================== */
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)}

/* WooCommerce sizes loop items with a percentage width and floats them for its
   own float-based layout; the grid track already sizes each item. */
ul.products li.product{
  width:auto!important;
  float:none!important;
  margin-left:0;margin-right:0;
}

/* The well is square; the artwork is centred and bounded inside it so any
   aspect ratio is letterboxed rather than resizing the card. (`height:100%`
   against an aspect-ratio container is indefinite, and a 128x320 portrait
   thumbnail once stretched a whole card to 898px.) */
.bz-card__media{
  display:flex;align-items:center;justify-content:center;
  min-height:0;overflow:hidden;
  background:var(--haze);border-radius:var(--r-1);
  aspect-ratio:1;padding:var(--s4);
}
.bz-card__media img{
  width:auto;height:auto;max-width:100%;max-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%}

/* --faint is 3.05:1 on white: fine for decoration, not for the brand name on
   every card. --muted is the same family at 5.49:1. */
.bz-card__brand{
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);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__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);
}

/* Mobile grid: two across, no CTA, and the whole card is the tap target. */
@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.css clears floats with `content:" "; display:table` pseudo
   elements. In a GRID container each one becomes a grid ITEM, so every product
   row started a column late. There is no way to opt a pseudo-element out of
   grid placement, so they are removed. */
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;
}

/* ============================================================================
   POST CARDS
   Five on one row on the homepage magazine strip; the same card serves the
   search page and the fallback archive. Media/title/excerpt sit on shared grid
   rows so every card's baseline lines up regardless of title length.
   ========================================================================== */
.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;border-radius:var(--r-1);
  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__meta{color:var(--muted);font-size:var(--fs-1);margin:0 0 var(--s2)}
.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} }

/* ============================================================================
   BREADCRUMBS
   <nav class="bz-crumbs"><div class="bz-container"><ol>. The inner container
   sits inside a page that is already inside one, so its gutter is removed.
   ========================================================================== */
.bz-crumbs{padding:var(--s4) 0 0}
.bz-crumbs .bz-container{max-width:none;padding-left:0;padding-right:0}
.bz-crumbs{font-variant-numeric:tabular-nums}
.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)}

/* ============================================================================
   FOOTER
   White ground. Five columns, the service column wider for the intro + hours.
   Both statutory warnings run full width along the bottom, 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{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__brand{padding-top:var(--s7)}
.bz-footer__brand img{display:block;width:150px;height:auto}
.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}
.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)}
.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)}
.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:1100px){
  .bz-footer__grid{grid-template-columns:1.4fr repeat(2,1fr)}
}
@media (max-width:640px){
  .bz-footer__grid{grid-template-columns:1fr;gap:var(--s5)}
}