/* ==========================================================================
   zaveromart.css — brand layer for Active eCommerce CMS
   --------------------------------------------------------------------------
   Loads LAST, after aiz-core.css and the layout's inline token block.
   Rule: never edit aiz-core.css (12k lines, overwritten by vendor updates).
   Everything here is either a token the CMS has no setting for, or a
   component correction toward the Amazon/eBay marketplace grammar.

   Colours the ADMIN owns (do not hardcode here — they come from
   Admin > Website Setup > Appearance and are injected as CSS vars):
     --primary        #131A22  navy chrome     -> "Buy Now", headers
     --secondary-base #FFB700  CTA amber       -> "Add to Cart"
   ========================================================================== */

/* --- 1. Design tokens — MEASURED from amazon.com, not approximated ----------
   Values extracted from the live DOM and 2.08 MB of served CSS. Three of these
   contradict every colour guide online: links have migrated from teal #007185
   to blue #2162A1; the published hover yellows #F7CA00/#FA8900 appear zero
   times in current CSS; and the current price is near-black, with red reserved
   for was-prices and savings.

   Note on --primary: it stays DARK. The theme uses var(--primary) 79 times and
   .bg-primary across 59 views — discount badges, circular icons, the sub-nav —
   all paired with .text-white. Repurposing it as a CTA colour would break
   contrast site-wide, so the two money buttons are styled explicitly instead.
   -------------------------------------------------------------------------- */
:root{
  /* chrome — four distinct darks, previously collapsed into one */
  --zv-chrome:        #131921;  /* nav belt (row 1)                   */
  --zv-chrome-2:      #232F3E;  /* sub-nav (row 2) + footer body      */
  --zv-chrome-3:      #37475A;  /* back-to-top bar                    */
  --zv-legal:         #131A22;  /* footer legal strip ONLY            */

  /* surfaces */
  --zv-field:         #E3E6E6;  /* warm grey page ground              */
  --zv-surface:       #F3F5F7;  /* filter rail, table stripes         */
  --zv-hairline:      #DDDDDD;  /* borders — shadows are rare         */
  --zv-ink:           #0F1111;  /* reading text                       */
  --zv-muted:         #565959;  /* small print                        */

  /* action — Add to Cart and Buy Now are genuinely different colours */
  --zv-cta:           #FFD814;  /* Add to Cart                        */
  --zv-cta-hover:     #FFCE12;
  --zv-cta-border:    #FCD200;
  --zv-buy:           #FFA41C;  /* Buy Now                            */
  --zv-buy-border:    #FF8F00;
  --zv-search:        #FEBD69;  /* search submit                      */
  --zv-badge:         #F08804;  /* cart count numeral                 */

  /* commerce semantics */
  --zv-link:          #2162A1;  /* teal #007185 is legacy             */
  --zv-link-hover:    #C7511F;
  --zv-price:         #0F1111;  /* the CURRENT price is near-black    */
  --zv-price-emph:    #B12704;  /* was-price, savings                 */
  --zv-deal:          #CC0C39;  /* deal badges only                   */
  --zv-success:       #007600;  /* In Stock                           */
  --zv-star:          #FFA41C;  /* ratings — nowhere else             */
  --zv-warn:          #C7511F;

  --zv-radius:        8px;
  --zv-radius-pill:   100px;
  /* Inter: engineered for 12–16px UI, true tabular numerals for the composite
     price. Amazon itself renders in Arial — Ember is a live A/B test only. */
  --zv-font: Inter, "Helvetica Neue", Arial, sans-serif;
}

/* --- 2. Typography -------------------------------------------------------
   Replaces the theme's Public Sans. Source Sans 3 is a humanist UI face with
   true tabular numerals — the same species as Amazon's Ember and eBay's
   Market Sans, and deliberately not one of the AI-website default faces.     */
body,
.btn,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6{
  font-family: var(--zv-font);
  font-feature-settings: "tnum" 1;
}

body{
  color: var(--zv-ink);
  font-size: 14px;          /* marketplace UI default, not 16 */
  line-height: 1.5;
}

/* Digits must line up wherever they are compared. */
.product-price, .price, .cart-total, .order-total,
table td, table th, .aiz-pagination{
  font-variant-numeric: tabular-nums;
}

/* --- 3. Shape ------------------------------------------------------------
   The theme mixes rounded-0 through rounded-4. Normalise: hairline borders
   instead of soft shadows, 8px on surfaces, pills on actions.               */
.card, .aiz-card, .modal-content, .dropdown-menu{
  border-radius: var(--zv-radius);
  border: 1px solid var(--zv-hairline);
  box-shadow: none;
}

.btn{
  border-radius: var(--zv-radius-pill);
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}

/* The two money buttons keep their pill shape even where markup says rounded-0. */
.btn-primary.buy-now,
.btn-secondary-base.add-to-cart,
.btn-primary.add-to-cart{
  border-radius: var(--zv-radius-pill);
}

/* CTA amber must read as a money action: dark text, never white. */
.btn-secondary-base{
  color: var(--zv-ink);
}
.btn-secondary-base:hover,
.btn-secondary-base:focus{
  color: var(--zv-ink);
}

/* --- 4. Trust signals ----------------------------------------------------- */
.rating .las,
.rating .la-star,
.star-rating,
.product-rating{
  color: var(--zv-star);
}

.in-stock, .text-success{
  color: var(--zv-success) !important;
  font-weight: 600;
}

/* Price red is a marketplace convention: it means "this is the number". */
.product-price,
.price-box .price,
.text-primary.product-price{
  color: var(--zv-price);
}

.stroked-price, .old-price, del{
  color: var(--zv-muted);
  font-weight: 400;
}

/* --- 5. Links ------------------------------------------------------------
   Blue means clickable and free. Underline appears on hover only, the way
   every large marketplace does it.                                          */
a{
  color: var(--zv-link);
  text-decoration: none;
}
a:hover{
  color: var(--zv-link-hover);
  text-decoration: underline;
}

/* Product titles are links but must read as text until hovered. */
.product-title, .product-name,
.product-title a, .product-name a{
  color: var(--zv-ink);
}
.product-title a:hover, .product-name a:hover{
  color: var(--zv-link-hover);
}

/* --- 6. Chrome ------------------------------------------------------------ */
.top-navbar, .navbar-light .top-bar{
  background: var(--zv-chrome);
}
.navbar .nav-link, .top-navbar .nav-link{
  color: #F0F2F4;
}

footer, .footer{
  background: var(--zv-chrome);
  color: #F0F2F4;
}
footer a, .footer a{
  color: #D5D9D9;
}
footer a:hover, .footer a:hover{
  color: #FFFFFF;
}

/* --- 7. Density -----------------------------------------------------------
   Shoppers came to compare, not to admire whitespace. Tighten the product
   grid and let more results sit above the fold.                             */
.aiz-category-products .card-body,
.product-box .card-body{
  padding: 12px 14px 14px;
}

/* --- 8. Accessibility -----------------------------------------------------
   The theme removes focus outlines in places. Put them back — keyboard
   users and screen-reader users navigate the checkout too.                   */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid #7AB3E8;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 9. Mobile ------------------------------------------------------------
   LeadVio failure #6: grid and flex children default to min-width:auto, so a
   wide table stretches its whole track instead of scrolling inside its box.
   This single rule prevents most horizontal-overflow bugs on phones.         */
.row > *,
.d-grid > *,
.d-flex > *{
  min-width: 0;
}

.table-responsive,
.aiz-table-wrap{
  overflow-x: auto;
}

/* --- 10. Admin sidebar groups --------------------------------------------
   The stock sidebar is 28 flat top-level menus, including four separate
   settings menus. zaveromart_sidenav.blade.php recomposes the same blocks
   under eight labelled groups; these are the group headings.               */
.zv-nav-group{
  list-style: none;
  padding: 18px 20px 6px;
  margin: 0;
  pointer-events: none;          /* a label, not a target */
}
.zv-nav-group span{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b7280;
}
.zv-nav-group + .aiz-side-nav-item{
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 4px;
}
/* First group needs no divider above it. */
.aiz-side-nav-list > .zv-nav-group:first-child{
  padding-top: 6px;
}

/* ==========================================================================
   11. MARKETPLACE HEADER — the 3-row anatomy
   --------------------------------------------------------------------------
   The stock markup already has three rows; it just wears them wrong (white
   chrome, a recessive search field, no submit control). Re-skinning here
   rather than rewriting nav.blade.php keeps the 800-line partial diffable
   against future vendor updates.

     row 1  .top-navbar          utility: language, currency, seller entry
     row 2  header .logo-bar-area  logo + DOMINANT search + account/cart
     row 3  .bg-primary.h-50px   category nav (already navy — lightened to
                                  chrome-2 so it separates from row 2)
   ========================================================================== */

/* --- row 1: utility strip ------------------------------------------------- */
.top-navbar.bg-white{
  background: var(--zv-chrome) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-navbar,
.top-navbar a,
.top-navbar .nav-link,
.top-navbar .dropdown-toggle{
  color: #D5D9D9 !important;
  font-size: 12.5px;
}
.top-navbar a:hover,
.top-navbar .nav-link:hover{
  color: #FFFFFF !important;
  text-decoration: none;
}

/* --- row 2: logo + search + account --------------------------------------- */
header.bg-white,
header .logo-bar-area{
  background: var(--zv-chrome) !important;
  border-bottom: 0 !important;
}
header .logo-bar-area{
  padding-block: 6px;
}
header .logo-bar-area a,
header .logo-bar-area .nav-link,
header .logo-bar-area span{
  color: #F0F2F4;
}
header .logo-bar-area a:hover{
  color: #FFFFFF;
}

/* Cart and account counters stay legible on navy. */
header .logo-bar-area .badge,
header .cart-count{
  background: var(--zv-secondary-base, #FFB700);
  color: var(--zv-ink);
  font-weight: 700;
}

/* --- the search bar is the hero ------------------------------------------
   On a marketplace the search field, not a banner, is the primary object on
   the page. Give it the width and let it sit white against the navy.        */
.front-header-search{
  background: transparent !important;
  max-width: 820px;
}
.front-header-search .search-input-box{
  flex: 1 1 auto;
}
.front-header-search .search-input-box .form-control{
  height: 40px;
  font-size: 15px;
  border: 0 !important;
  border-radius: var(--zv-radius) 0 0 var(--zv-radius);
  background: #FFFFFF;
  color: var(--zv-ink);
}
.front-header-search .search-input-box .form-control::placeholder{
  color: #6c7378;
  opacity: 1;
}
.front-header-search .search-input-box .form-control:focus{
  box-shadow: 0 0 0 3px rgba(255,183,0,.55);
}
/* The decorative magnifier is redundant now there is a real button. */
.front-header-search .search-input-box > svg{
  display: none;
}

.zv-search-go{
  flex: 0 0 auto;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 0 var(--zv-radius) var(--zv-radius) 0;
  background: var(--zv-secondary-base, #FFB700);
  color: var(--zv-ink);
  font-family: var(--zv-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}
.zv-search-go:hover{ background: #F5A400; }
.zv-search-go:focus-visible{
  outline: 3px solid #7AB3E8;
  outline-offset: 2px;
}

/* --- row 3: category nav -------------------------------------------------
   Ships as .bg-primary, which is now the same navy as row 2 — the two rows
   would read as one slab. Lift it to chrome-2 so the boundary is visible.   */
.bg-primary.h-50px{
  background: var(--zv-chrome-2) !important;
}
.bg-primary.h-50px a{
  color: #F0F2F4;
  font-size: 13.5px;
}
.bg-primary.h-50px a:hover{
  color: #FFFFFF;
  text-decoration: none;
}
/* "All Categories" is the anchor of the row — give it its own ground. */
.bg-primary.h-50px .all-category{
  background: rgba(0,0,0,.22) !important;
}

/* --- small screens --------------------------------------------------------
   Below lg the category row is hidden by the theme, so the search must not
   compete with the logo for width. Let it wrap to its own line.             */
@media (max-width: 991.98px){
  .front-header-search{ max-width: 100%; }
  .zv-search-go{ padding: 0 14px; font-size: 13px; }
}


/* ==========================================================================
   12. HEADER HEIGHT — Amazon's 60 + 39
   --------------------------------------------------------------------------
   Measured: amazon.com is a 60px nav belt over a 39px sub-nav, fixed at every
   viewport. Ours shipped at ~35 + 72 + 50 = 157px.

   The height is driven by `py-20px` on the logo anchor, NOT by the bar itself.
   Do not put display:flex on .logo-bar-area — its child is .container, and
   making that a flex item collapses the row and spills it into the sub-nav.
   Constrain heights instead and let the existing inner .d-flex do the work.
   ========================================================================== */

/* row 0 — utility strip, slim and quiet */
.top-navbar.bg-white{ height: 28px !important; min-height: 28px; overflow: hidden; }
.top-navbar .nav-link,
.top-navbar a,
.top-navbar .dropdown-toggle{
  font-size: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* row 1 — the nav belt */
header .logo-bar-area{ height: 60px; border-bottom: 0 !important; }
header .logo-bar-area > .container{ height: 60px; }
header .logo-bar-area > .container > .d-flex{ height: 60px; }

/* The real culprit: 20px of vertical padding around the logo. */
header .logo-bar-area a.py-20px{ padding-top: 0 !important; padding-bottom: 0 !important; }
header .logo-bar-area img[src*="zaveromart-logo"]{
  height: 44px; width: auto; max-width: none; display: block;
}

/* Keep the search bar inside the belt and stop it spilling downward. */
.front-header-search{ max-height: 60px; }
.front-header-search .search-input-box .form-control,
.zv-search-go{ height: 40px; }

/* row 2 — the sub-nav */
.bg-primary.h-50px{ height: 39px !important; }
.bg-primary.h-50px a{ font-size: 14px; padding-top: 0 !important; padding-bottom: 0 !important; }
.bg-primary.h-50px .all-category .px-3{ height: 39px; display: flex; align-items: center; }
.bg-primary.h-50px .nav-cart-box{ height: 39px; }

/* Instant 1px outline on hover — Amazon uses zero transition here, which is
   what makes a dense bar of small targets feel responsive rather than laggy. */
.top-navbar a:hover,
header .logo-bar-area a:hover,
.bg-primary.h-50px a:hover{
  outline: 1px solid #FFFFFF; outline-offset: -1px; transition: none;
}

/* ==========================================================================
   13. MOBILE FIXES — targets, accordions, overflow
   ========================================================================== */

/* The theme's hamburger is a 16x16 SVG with p-0, which strips .btn padding —
   a 16px target against the 44px minimum. Restore a real hit area without
   changing the icon. */
header .logo-bar-area button[data-target=".aiz-top-menu-sidebar"]{
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* Any small icon-only control in the header gets the same floor. */
@media (max-width: 991.98px){
  header .logo-bar-area a.p-2,
  header .logo-bar-area button{
    min-width: 44px;
    min-height: 44px;
  }
}

/* Footer accordions: the theme styles a collapsed panel but never opens it —
   .aiz-accordion appears in 1 stylesheet and 0 scripts. zaveromart.js toggles
   .zv-open on the wrap; the open height is driven from that class rather than
   an inline style, so specificity settles it instead of source order. */
.aiz-accordion-panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.aiz-accordion-wrap.zv-open .aiz-accordion-panel{
  max-height: 900px !important;
}

/* Decision: the footer does not collapse on mobile.
   The theme ships .aiz-accordion markup with CSS but no handler, and its
   collapsed rule resisted both inline styles and higher-specificity
   overrides. Rather than keep fighting the cascade for a feature nobody
   asked for, the columns are simply open — which is what Amazon's mobile
   footer does anyway. The headings stay as headings, and every footer link
   is reachable with one tap instead of two.
   The JS accordion handler is left in place: if a panel is ever wanted
   collapsible again, adding .zv-collapsible to the wrap restores it. */
@media (max-width: 991.98px){
  .aiz-accordion-wrap:not(.zv-collapsible) .aiz-accordion-panel{
    max-height: none !important;
    overflow: visible !important;
  }
  .aiz-accordion-wrap:not(.zv-collapsible) .aiz-accordion{
    cursor: default;
    pointer-events: none;
  }
  .aiz-accordion-wrap:not(.zv-collapsible) .aiz-accordion::after{
    display: none;
  }
}
.aiz-accordion{
  width: 100%;
  text-align: left;
  position: relative;
  min-height: 44px;
  cursor: pointer;
}
.aiz-accordion::after{
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.aiz-accordion-wrap.zv-open .aiz-accordion::after{
  transform: translateY(-30%) rotate(-135deg);
}

/* Tables the theme renders bare get a scroll box from zaveromart.js. */
.zv-scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Contact links inherit the surrounding colour rather than turning link-blue
   inside the dark footer. */
.zv-contact-link{ color: inherit; text-decoration: none; }
.zv-contact-link:hover{ color: inherit; text-decoration: underline; }

/* ==========================================================================
   15. EMPTY STATES
   --------------------------------------------------------------------------
   /categories, /flash-deals, /brands and /blog each returned 200 with a
   heading and nothing beneath it, so a visitor could not tell a working page
   from a broken one. Quiet, centred, one way out.
   ========================================================================== */
.zv-empty{
  text-align: center;
  padding: 56px 20px 64px;
  max-width: 460px;
  margin: 0 auto;
}
.zv-empty-icon{
  width: 44px; height: 44px;
  color: var(--zv-hairline);
  margin: 0 auto 16px;
  display: block;
}
.zv-empty-title{
  font-size: 17px;
  font-weight: 700;
  color: var(--zv-ink);
  margin: 0 0 6px;
}
.zv-empty-body{
  font-size: 14px;
  line-height: 20px;
  color: var(--zv-muted);
  margin: 0 0 18px;
}
.zv-empty-cta{
  display: inline-block;
  padding: 9px 20px;
  border-radius: var(--zv-radius-pill);
  background: var(--secondary-base, #FFA41C);
  border: 1px solid #E6930C;
  color: var(--zv-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.zv-empty-cta:hover{
  background: #F5A400;
  color: var(--zv-ink);
  text-decoration: none;
}

/* ==========================================================================
   16. FORM ERRORS
   --------------------------------------------------------------------------
   Validation failures previously surfaced only as a toast reading "Something
   Went wrong" — which said neither what was wrong nor where. Errors now sit
   under the field they belong to.
   ========================================================================== */
.zv-field-error{
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 17px;
  color: #B12704;
}
.zv-field-error::before{
  content: "";
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B12704' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
}

/* ==========================================================================
   17. MONEY BUTTONS & PRICE — the measured Amazon treatment
   --------------------------------------------------------------------------
   Amazon uses TWO different warm colours stacked, not one button: Add to Cart
   #FFD814, Buy Now #FFA41C. Both take near-black text.

   !important is required on the colour because the theme's markup carries
   `text-white`, and aiz-core defines `.text-white{color:#fff!important}` —
   white on #FFD814 is about 1.7:1, unreadable. This is a markup problem the
   cascade cannot solve politely.
   ========================================================================== */
.btn-secondary-base,
.btn-secondary-base.add-to-cart{
  background: var(--zv-cta);
  border-color: var(--zv-cta-border);
  color: var(--zv-ink) !important;
}
.btn-secondary-base:hover,
.btn-secondary-base:focus{
  background: var(--zv-cta-hover);
  border-color: var(--zv-cta-border);
  color: var(--zv-ink) !important;
}

.btn-primary.buy-now{
  background: var(--zv-buy);
  border-color: var(--zv-buy-border);
  color: var(--zv-ink) !important;
}
.btn-primary.buy-now:hover,
.btn-primary.buy-now:focus{
  background: #F59A0B;
  border-color: var(--zv-buy-border);
  color: var(--zv-ink) !important;
}

/* Price: the current figure is near-black. Red is demoted to what it actually
   signals — the old price and the saving. */
.product-price,
.price-box .price,
.text-primary.product-price{
  color: var(--zv-price);
  font-feature-settings: "tnum" 1;
}
.stroked-price,
.old-price,
del{
  color: var(--zv-muted);
  font-weight: 400;
}
.discount-percentage,
.savings,
.badge-discount{
  color: var(--zv-price-emph);
}

/* Stars and stock use Amazon's values, not approximations. */
.rating .las,
.rating .la-star,
.star-rating,
.product-rating{ color: var(--zv-star); }

.in-stock,
.text-success{ color: var(--zv-success) !important; font-weight: 600; }

/* Amazon ships essentially no tracking. Strip the uppercase letter-spacing
   the theme applies to storefront labels; the admin sidebar keeps its own. */
.aiz-main-wrapper .text-uppercase,
.aiz-main-wrapper .fs-11,
.aiz-main-wrapper .fs-12{ letter-spacing: normal; }

/* ==========================================================================
   18. HEADER ANATOMY — search segments, two-line labels, cart badge
   --------------------------------------------------------------------------
   Measured: the search bar is one 40px bar of three welded segments with only
   the OUTER corners rounded — a 52px category facade, the input, and a 45px
   coloured submit. The real <select> is wider than its facade and sits
   transparently over it, so the native dropdown opens usefully.
   ========================================================================== */
.front-header-search .d-flex.position-relative{
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #FFFFFF;
}

/* --- category facade ----------------------------------------------------- */
.zv-search-cat{
  position: relative;
  flex: 0 0 auto;
  min-width: 52px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #F3F3F3;
  border-right: 1px solid #CDCDCD;
  color: var(--zv-ink);
}
.zv-search-cat-face{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 0 8px;
  white-space: nowrap;
  pointer-events: none;   /* the select underneath takes the click */
}
.zv-search-cat select{
  position: absolute;
  inset: 0;
  width: 190px;           /* wider than the facade, deliberately */
  height: 40px;
  opacity: 0;
  cursor: pointer;
  font-size: 14px;
}
.zv-search-cat:focus-within{
  box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.2);
}

/* --- input + submit ------------------------------------------------------ */
.front-header-search .search-input-box .form-control{
  border-radius: 0 !important;
  box-shadow: none;
}
.zv-search-go{
  flex: 0 0 45px;
  width: 45px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--zv-search);
  color: var(--zv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.zv-search-go svg{ width: 20px; height: 20px; }
.zv-search-go:hover{ background: #F3A847; }
/* Amazon's current focus ring is a crisp double ring, not the old soft glow. */
.front-header-search .d-flex.position-relative:focus-within{
  box-shadow: 0 0 0 2px #F90, 0 0 0 3px rgba(255,153,0,.5);
}

/* --- the two-line label, the header's signature -------------------------- */
.zv-two{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 6px;
}
.zv-two:hover{ text-decoration: none; outline: 1px solid #FFF; outline-offset: -1px; }
.zv-two-1{ font-size: 12px; font-weight: 400; line-height: 14px; color: #CCCCCC; }
.zv-two-2{ font-size: 14px; font-weight: 700; line-height: 15px; color: #FFFFFF; }
.zv-two:hover .zv-two-1,
.zv-two:hover .zv-two-2{ color: #FFFFFF; }

/* --- cart count: a bare numeral over the glyph, never a circle ----------- */
.nav-cart-box .cart-count,
.nav-cart-box .badge{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--zv-badge) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}


/* Header is FULL-BLEED with content capped at 1480px — the contrast between
   edge-to-edge chrome and constrained content is the strongest structural
   signal in this grammar. Bootstrap's .container caps at 1140px, which was
   squeezing the search bar down to 21% of the viewport against Amazon's ~54%. */
header .logo-bar-area > .container,
.bg-primary.h-50px > .container{
  max-width: 1480px;
  width: 100%;
}
/* Give the search the width it is supposed to have. */
.front-header-search{ flex: 1 1 auto; max-width: none; }
.zv-utility{ flex: 0 0 auto; }
.zv-utility .list-inline-item{ margin-right: 0; }

/* --- give the search bar its measured share of the belt -------------------
   Amazon devotes ~54% of header width to search; ours was at 25% because the
   surrounding elements were all oversized against their reference slots:
   logo 211 vs 114, cart 169 vs 84, account 264 vs 148. Search is the primary
   navigation on a marketplace and its width has to say so.
   -------------------------------------------------------------------------- */
.front-header-search{
  flex: 1 1 0%;          /* basis 0 so it absorbs every spare pixel */
  min-width: 260px;
}

/* Cart: icon + bare count only. The running total is not what Amazon shows
   in the belt, and it was costing ~110px. */
.zv-cart .nav-box-text,
.zv-cart .cart-total-text{ display: none !important; }
.zv-cart .nav-cart-box > a{ padding-left: 10px !important; padding-right: 10px !important; }

/* Language and currency compact to their codes. */
.zv-utility .dropdown-toggle{ padding-left: 6px !important; padding-right: 6px !important; }
.zv-utility .list-inline-item{ margin-right: 4px !important; }

/* The account avatar circle is decorative; the two-line label carries the
   meaning and the tap target. */
.nav-user-info .nav-user-img{ display: none !important; }
.nav-user-info{ margin-left: 0 !important; }

/* Brand: slightly tighter in the belt so the wordmark does not crowd search. */
header .logo-bar-area .zv-wordmark{ font-size: 21px; }
header .logo-bar-area .zv-brand{ gap: 9px; }
header .logo-bar-area .zv-brand-tag{ display: none; }   /* kept in the footer */

/* ==========================================================================
   19. HEADER — full bleed, no side gaps
   --------------------------------------------------------------------------
   Measured at 1920: content was inset 235px each side because the header used
   a .container capped at 1480, which centres. Amazon's header is genuinely
   edge-to-edge with ~18px of padding; only the page content below is capped.
   ========================================================================== */
header .logo-bar-area > .container,
.bg-primary.h-50px > .container{
  max-width: none !important;
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}

/* ==========================================================================
   20. BRAND MARK — Amazon-style wordmark, no containing box
   ========================================================================== */
.zv-brand{ display:inline-flex; align-items:center; gap:10px; line-height:1; text-decoration:none; flex:0 0 auto; }

/* The glyph cycles package -> cart -> tag, flipping on its vertical axis. */
.zv-mark{ position:relative; width:30px; height:30px; flex:0 0 30px; color:var(--zv-buy); }
.zv-mark-stage{ position:absolute; inset:0; transform-style:preserve-3d; }
.zv-g{
  position:absolute; inset:0; width:30px; height:30px;
  opacity:0; transform:rotateY(-90deg);
  animation:zvGlyph 10.5s cubic-bezier(.45,.05,.25,1) infinite;
  backface-visibility:hidden;
}
@keyframes zvGlyph{
  0%      { opacity:0; transform:rotateY(-90deg) scale(.86); }
  4%,29%  { opacity:1; transform:rotateY(0deg)   scale(1);   }
  33%     { opacity:0; transform:rotateY(90deg)  scale(.86); }
  100%    { opacity:0; transform:rotateY(90deg)  scale(.86); }
}
.zv-g-1{ animation-delay:0s } .zv-g-2{ animation-delay:3.5s } .zv-g-3{ animation-delay:7s }

.zv-brand-text{ display:inline-flex; flex-direction:column; align-items:flex-start; }
.zv-wordmark{
  position:relative; overflow:hidden;
  font-family:Sora,"Segoe UI",Arial,sans-serif;
  font-weight:700; font-size:23px; letter-spacing:-1.1px;
  color:#FFFFFF;
}
/* A slow highlight crosses the wordmark — the only motion on the type. */
.zv-sweep{
  position:absolute; top:0; bottom:0; left:-45%; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,164,28,.55),transparent);
  transform:skewX(-20deg); animation:zvSweep 10.5s ease-in-out infinite; pointer-events:none;
}
@keyframes zvSweep{ 0%,70%{left:-45%} 92%,100%{left:118%} }

.zv-brand-tag{
  margin-top:3px; font-size:8px; font-weight:700; letter-spacing:2.4px; color:#9AA3AD;
  font-family:Inter,Arial,sans-serif;
}
.zv-brand--dark .zv-wordmark{ color:#131921; }
.zv-brand--dark .zv-mark{ color:#E07C00; }
.zv-brand--dark .zv-brand-tag{ color:#565959; }

@media (prefers-reduced-motion: reduce){
  .zv-g,.zv-sweep{ animation:none }
  .zv-g-1{ opacity:1; transform:none } .zv-g-2,.zv-g-3{ opacity:0 }
}

/* ==========================================================================
   21. FIXES — category chevron, cart, row-2 weight, dropdown motion
   ========================================================================== */

/* The belt sets light-on-dark text, which made the category facade white on
   its own near-white ground — the "All" and its chevron were invisible. */
.zv-search-cat,
.zv-search-cat .zv-search-cat-face,
.zv-search-cat .zv-search-cat-face *{
  color:#0F1111 !important;
  stroke:#0F1111;
}
.zv-search-cat-face{ font-size:12.5px; font-weight:400; gap:3px; }
.zv-search-cat-face svg{ width:11px; height:11px; flex:none; }

/* Cart: glyph + bare orange numeral + the word, never a running total. */
.zv-cart-link{
  display:inline-flex; align-items:flex-end; gap:2px; padding:0 8px;
  text-decoration:none; color:#FFFFFF; white-space:nowrap;
}
.zv-cart-link:hover{ color:#FFFFFF; text-decoration:none; outline:1px solid #FFF; outline-offset:-1px; }
.zv-cart-glyph{ position:relative; display:inline-block; width:32px; height:30px; }
.zv-cart-glyph svg{ width:32px; height:30px; display:block; }
.zv-cart-count{
  position:absolute; top:-4px; right:-1px;
  min-width:14px; text-align:center;
  font-size:16px; font-weight:700; line-height:16px;
  color:var(--zv-badge);
  background:none; border:0; border-radius:0; padding:0;
}
.zv-cart-word{ font-size:14px; font-weight:700; line-height:18px; }

/* Row 2 links sit at 400 on Amazon; the theme shipped them at 700. */
.bg-primary.h-50px a.header_menu_links,
.bg-primary.h-50px .list-inline-item a{ font-weight:400 !important; }

/* Dropdowns had `transition: all` with no duration, so nothing eased.
   Bootstrap toggles display, which cannot transition — animate on .show. */
.dropdown-menu{ border:1px solid var(--zv-hairline); border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.dropdown-menu.show{ animation:zvDropIn .18s cubic-bezier(.2,0,.2,1); }
@keyframes zvDropIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* Language selector: keep the flag visible and compact. */
#lang-change img, .zv-utility img{ width:18px; height:12px; object-fit:cover; margin-right:5px; vertical-align:-1px; }
.zv-code{ font-size:12.5px; font-weight:400; }

/* ==========================================================================
   22. THE "ALL" SIDE MENU
   --------------------------------------------------------------------------
   Amazon's hamburger panel: a 365px drawer sliding from the left over a dimmed
   page, with a dark greeting header and titled sections. 250ms on the panel
   transform and the overlay fade — the durations measured on the reference.
   ========================================================================== */
.zv-all-btn{
  display:inline-flex; align-items:center; gap:7px;
  height:39px; padding:0 11px 0 4px; margin-right:4px;
  background:transparent; border:0; cursor:pointer;
  color:#FFFFFF; font-family:inherit; font-size:14px; font-weight:700;
}
.zv-all-btn svg{ width:18px; height:18px; }
.zv-all-btn:hover{ outline:1px solid #FFF; outline-offset:-1px; }
.zv-all-btn:focus-visible{ outline:3px solid #7AB3E8; outline-offset:-2px; }

.zv-sidemenu-overlay{
  position:fixed; inset:0; z-index:1090;
  background:rgba(0,0,0,.55);
  opacity:0; transition:opacity 250ms ease-in-out;
}
.zv-sidemenu-overlay[hidden]{ display:none; }
.zv-sidemenu-overlay.zv-in{ opacity:1; }

.zv-sidemenu{
  position:fixed; top:0; bottom:0; left:0; z-index:1100;
  width:365px; max-width:88vw;
  background:#FFFFFF;
  transform:translateX(-100%);
  transition:transform 250ms ease-in-out;
  display:flex; flex-direction:column;
  box-shadow:0 0 22px rgba(0,0,0,.35);
}
.zv-sidemenu.zv-in{ transform:translateX(0); }

.zv-sidemenu-head{
  flex:0 0 auto; height:60px;
  background:var(--zv-chrome-2); color:#FFFFFF;
  display:flex; align-items:center; gap:11px; padding:0 20px;
  font-size:18px; font-weight:700;
}
.zv-sidemenu-head svg{ width:24px; height:24px; }
.zv-sidemenu-head a{ color:#FFFFFF; text-decoration:none; }

.zv-sidemenu-close{
  position:absolute; top:14px; right:-46px;
  width:34px; height:34px; padding:0;
  background:transparent; border:0; cursor:pointer; color:#FFFFFF;
}
.zv-sidemenu-close svg{ width:26px; height:26px; }

.zv-sidemenu-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.zv-sm-section{ padding:14px 0; border-bottom:1px solid #DDDDDD; }
.zv-sm-section:last-child{ border-bottom:0; }
.zv-sm-section h3{
  margin:0 0 4px; padding:0 20px;
  font-size:18px; font-weight:700; color:var(--zv-ink);
}
.zv-sm-section ul{ list-style:none; margin:0; padding:0; }
.zv-sm-section a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 20px; min-height:44px;
  font-size:14px; color:var(--zv-ink); text-decoration:none;
}
.zv-sm-section a:hover{ background:#EDEDED; color:var(--zv-ink); text-decoration:none; }
.zv-sm-section a svg{ width:15px; height:15px; flex:none; color:#565959; }
.zv-sm-more{ font-size:13px !important; color:var(--zv-link) !important; }

body.zv-menu-open{ overflow:hidden; }

@media (max-width: 575.98px){
  .zv-sidemenu-close{ right:6px; top:13px; }
}

/* The belt paints its descendants light-on-dark, which was overriding the cart
   count back to near-white. The count is the one element in the belt that must
   NOT inherit that, so it is pinned explicitly. */
header .logo-bar-area .zv-cart-count,
.zv-cart .zv-cart-count{
  color: var(--zv-badge) !important;
}

/* ==========================================================================
   23. HEADER BUG FIXES
   ========================================================================== */

/* The close button sat at right:-46px so it would hang outside the drawer.
   With the panel parked off-screen at left:-365 that put the X back on screen,
   floating permanently over the logo. It is now hidden with the panel and only
   appears once the drawer is actually open. */
.zv-sidemenu-close{
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-in-out 0ms;
}
.zv-sidemenu.zv-in .zv-sidemenu-close{
  opacity: 1;
  pointer-events: auto;
  transition-delay: 120ms;   /* appears after the panel has travelled */
}

/* Cart count: centred over the basket rather than clipped to its top-right.
   Amazon sets the numeral above the cart body, horizontally centred on it. */
.zv-cart-glyph{ position: relative; display: inline-block; width: 34px; height: 32px; }
.zv-cart-glyph svg{ width: 34px; height: 32px; display: block; }
.zv-cart-count{
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  min-width: 0;
  padding: 0 2px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
}

/* The theme gives .logo-bar-area `padding: 6px 0`. Combined with height:60px
   and border-box, that pushed every child down 6px — the whole belt read as
   bottom-heavy against Amazon's — and left the 60px container overflowing a
   48px content box. Zero the vertical padding so align-items:center actually
   centres on the belt's midline. */
header .logo-bar-area{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Brand and cart were still 2px high: the logo anchor is a block whose height
   comes from line-height rather than its content, and the cart wrapper was not
   itself a centring context. Make both centre on the belt's midline. */
header .logo-bar-area a.py-20px{
  display: flex !important;
  align-items: center;
  height: 100%;
}
header .logo-bar-area .zv-cart{
  display: flex !important;
  align-items: center;
  /* No height:100% here — it resolved against an indefinite parent height and
     pushed the link to the top of the belt (measured -14px off centre). The
     row's own align-items:center does the work once the wrapper is a flex box. */
}
/* The glyph and the word stay bottom-aligned to each other, as on Amazon,
   while the link as a whole centres on the belt. */
.zv-cart-link{ align-items: flex-end; }

/* The cart's glyph and word are bottom-aligned to each other (Amazon's
   arrangement), which leaves the link's optical centre 2px above the belt's
   midline. Nudge it back so every belt element shares one centre line. */
header .logo-bar-area .zv-cart-link{ transform: translateY(2px); }

/* ==========================================================================
   24. HERO BANNER SYSTEM
   --------------------------------------------------------------------------
   The detail that makes the reference look finished: the hero's colour does
   not stop at the image. It continues BELOW it and fades into the page, so
   when the card grid overlaps the hero you catch the tint in the gutters
   between cards — and it re-tints as the slide changes.

   Implemented as a stack of tint layers, one per slide, cross-fading. A CSS
   variable cannot carry this: custom properties do not animate without
   @property, and gradients do not interpolate reliably.

   Geometry follows the measured reference: 2.5:1 image area, content capped,
   page grey visible either side, and a bleed zone below that the grid will
   sit over.
   ========================================================================== */
.zv-hero{
  position: relative;
  isolation: isolate;
  /* The bleed is padding, so the grid can be pulled up over it later without
     the hero's own box collapsing. */
  padding-bottom: var(--zv-hero-bleed, 210px);
  background: var(--zv-field);
}

/* --- the tint layers ------------------------------------------------------ */
.zv-hero-tints{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.zv-hero-tint{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 700ms ease-in-out;
  /* Solid behind the image, then a long fall into the page colour. The stop
     positions are what make the bleed read as light falling off rather than a
     band of colour ending. */
  background:linear-gradient(
    180deg,
    var(--zv-t) 0%,
    var(--zv-t) 58%,
    color-mix(in srgb, var(--zv-t) 55%, var(--zv-field)) 76%,
    color-mix(in srgb, var(--zv-t) 22%, var(--zv-field)) 89%,
    var(--zv-field) 100%
  );
}
.zv-hero-tint.is-on{ opacity:1; }

/* Fallback for engines without color-mix: a simpler two-stop fall. */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .zv-hero-tint{
    background:linear-gradient(180deg, var(--zv-t) 0%, var(--zv-t) 60%, var(--zv-field) 100%);
  }
}

/* --- the slide frame ------------------------------------------------------ */
.zv-hero-frame{
  position:relative; z-index:1;
  max-width:1500px; margin:0 auto;
  aspect-ratio:2.5 / 1;
  overflow:hidden;
}
.zv-hero-track{ position:relative; width:100%; height:100%; }

.zv-hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding:0 clamp(24px, 7vw, 96px);
  background:var(--zv-wash);
  opacity:0; visibility:hidden;
  transition:opacity 700ms ease-in-out, visibility 0s linear 700ms;
}
.zv-hero-slide.is-on{
  opacity:1; visibility:visible;
  transition:opacity 700ms ease-in-out, visibility 0s linear 0s;
}

.zv-hero-copy{ max-width:46ch; color:#FFFFFF; }
.zv-hero-eyebrow{
  margin:0 0 10px; font-size:clamp(12px,1.15vw,15px); font-weight:600;
  color:rgba(255,255,255,.82);
}
.zv-hero-title{
  margin:0 0 22px;
  font-family:Sora,Inter,Arial,sans-serif;
  font-weight:700; letter-spacing:-.5px;
  font-size:clamp(24px,3.4vw,50px); line-height:1.1;
  color:#FFFFFF; text-wrap:balance;
}
.zv-hero-cta{
  display:inline-block; padding:11px 26px;
  background:var(--zv-cta); border:1px solid var(--zv-cta-border);
  border-radius:100px;
  font-size:14px; font-weight:700; color:var(--zv-ink); text-decoration:none;
}
.zv-hero-cta:hover{ background:var(--zv-cta-hover); color:var(--zv-ink); text-decoration:none; }
.zv-hero-cta:focus-visible{ outline:3px solid #7AB3E8; outline-offset:2px; }

/* --- arrows: always visible, never hover-revealed ------------------------- */
.zv-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:84px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  color:rgba(255,255,255,.9);
}
.zv-hero-arrow svg{ width:26px; height:26px; }
.zv-hero-arrow:hover{ color:#FFFFFF; }
.zv-hero-arrow:focus-visible{ outline:3px solid #7AB3E8; outline-offset:-3px; }
.zv-hero-prev{ left:4px; } .zv-hero-next{ right:4px; }

/* --- dots ----------------------------------------------------------------- */
.zv-hero-dots{
  position:absolute; z-index:3; left:0; right:0;
  top:calc(100% - var(--zv-hero-bleed, 210px) - 26px);
  display:flex; justify-content:center; gap:8px;
}
.zv-hero-dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer;
  transition:background 200ms ease, transform 200ms ease;
}
.zv-hero-dot.is-on{ background:#FFFFFF; transform:scale(1.25); }
.zv-hero-dot:focus-visible{ outline:2px solid #7AB3E8; outline-offset:3px; }

/* --- the overlap hook -----------------------------------------------------
   Whatever comes next on the homepage pulls up over the bleed. Adding
   .zv-overlaps-hero to that section is all it takes; the gutters between its
   cards will then reveal the tint, which is the effect being copied. */
.zv-overlaps-hero{
  position:relative; z-index:2;
  margin-top:calc(-1 * var(--zv-hero-bleed, 210px));
}

@media (max-width: 991.98px){
  .zv-hero{ --zv-hero-bleed:120px; }
  .zv-hero-frame{ aspect-ratio:16 / 9; }
  .zv-hero-arrow{ width:34px; height:60px; }
}
@media (max-width: 575.98px){
  .zv-hero{ --zv-hero-bleed:80px; }
  .zv-hero-frame{ aspect-ratio:4 / 3; }
  .zv-hero-dots{ top:calc(100% - var(--zv-hero-bleed) - 18px); }
}

@media (prefers-reduced-motion: reduce){
  .zv-hero-tint,.zv-hero-slide{ transition:none; }
}

/* ==========================================================================
   25. HERO BLEND — correcting the seam
   --------------------------------------------------------------------------
   Two faults, both visible as a hard rectangle around the hero:

   1. The page was WHITE while the hero and its fade ended in #E3E6E6. A grey
      fade against a white page is a seam by construction. The measured
      reference paints the whole page field #E3E6E6, so the hero has nothing to
      butt against — the colour simply runs out.

   2. The bleed was a synthetic gradient below the image. On the reference the
      IMAGE ITSELF continues down behind the card grid; only ~230px of a 600px
      hero is ever visible, and the gutters between cards reveal real artwork
      getting lighter, not a manufactured band. So the artwork now extends
      through the bleed zone and fades out inside itself.
   ========================================================================== */
body,
.aiz-main-wrapper{
  background: var(--zv-field) !important;
}

/* The frame no longer clips at the image edge: artwork runs on through the
   bleed so anything overlapping it later shows real image in its gutters. */
.zv-hero-frame{
  aspect-ratio: auto;
  height: calc(var(--zv-hero-visible, 430px) + var(--zv-hero-bleed, 210px));
  overflow: visible;
}
.zv-hero-track{ position: relative; height: 100%; }

.zv-hero-slide{
  background-image: var(--zv-art, none), var(--zv-wash);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  align-items: flex-start;
  padding-top: clamp(28px, 5vw, 76px);
}

/* The artwork dissolves into the page inside its own box — no separate band,
   which is what made the old version read as two stacked rectangles. */
.zv-hero-slide::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--zv-hero-bleed, 210px) + 90px);
  background: linear-gradient(180deg,
      rgba(227,230,230,0) 0%,
      color-mix(in srgb, var(--zv-field) 55%, transparent) 46%,
      color-mix(in srgb, var(--zv-field) 88%, transparent) 74%,
      var(--zv-field) 100%);
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .zv-hero-slide::after{
    background: linear-gradient(180deg, rgba(227,230,230,0) 0%, var(--zv-field) 100%);
  }
}

/* The tint layers now only carry the SIDES — the strip of colour either side of
   the capped frame — so a wide screen does not show grey shoulders against a
   coloured band. They fade on the same curve. */
.zv-hero-tint{
  background: linear-gradient(180deg,
      var(--zv-t) 0%,
      var(--zv-t) 34%,
      color-mix(in srgb, var(--zv-t) 45%, var(--zv-field)) 62%,
      var(--zv-field) 88%);
  opacity: 0;
}
.zv-hero-tint.is-on{ opacity: 1; }

/* Copy sits in the visible band, not vertically centred on the whole box. */
.zv-hero-copy{ max-width: 42ch; }

/* Arrows track the visible band rather than the full padded height. */
.zv-hero-arrow{ top: calc(var(--zv-hero-visible, 430px) / 2); }
.zv-hero-dots{ top: calc(var(--zv-hero-visible, 430px) - 34px); }

@media (max-width: 991.98px){
  .zv-hero{ --zv-hero-visible: 300px; }
}
@media (max-width: 575.98px){
  .zv-hero{ --zv-hero-visible: 240px; }
}

/* ==========================================================================
   26. HERO — the sides stay grey
   --------------------------------------------------------------------------
   The correction: on the reference the banner colour NEVER reaches the page
   margins. Outside the content column the page stays a fixed #E3E6E6, top to
   bottom, whatever slide is showing. Our tint layer spanned the full viewport,
   so the slide colour washed the shoulders too — the thing being marked with
   an X.

   Tint is therefore confined to exactly the frame's box. Everything outside it
   is page field and never changes.

   Sizing now matches the measurement: source 3000x1200 displayed 1500x600 at
   2.5:1, hero frame 1500 (slightly wider than the 1480 content column, as on
   the reference), and the artwork carries its own falloff because each tint is
   sampled from the image's own bottom edge.
   ========================================================================== */
.zv-hero-tints{
  left: 50%;
  right: auto;
  width: min(1500px, 100%);
  transform: translateX(-50%);
}

/* Per-slide ink. A bright field cannot take white type: the teal artwork gives
   white 2.37:1, and dark 7.99:1. The reference switches ink the same way. */
.zv-hero-slide.ink-dark .zv-hero-title{ color: var(--zv-ink); }
.zv-hero-slide.ink-dark .zv-hero-eyebrow{ color: rgba(15,17,17,.72); }

/* Artwork sits behind the copy at its natural size; the wash only shows when a
   slide has no image yet. */
.zv-hero-slide.has-art{
  background-image: var(--zv-art);
  background-size: cover;
  background-position: center top;
}

/* ==========================================================================
   27. HERO — fade reach, tint extent, headline lines
   --------------------------------------------------------------------------
   Three faults, measured:

   1. The fade band was 300px on a 640px frame — 47% of the artwork, starting
      at y=340. It washed out the products themselves. It now covers the bleed
      zone plus a short lead-in, and ramps late so the subject stays clean.

   2. The tint layer inherited the hero's padding box, so it ran 210px PAST the
      frame and painted a flat band underneath. Its height is now pinned to the
      frame.

   3. Headlines are per-line spans. "\n" inside translate() was silently
      stripped, which is how "Today's Deals,refreshed daily" and "keeps upwith
      you" shipped.
   ========================================================================== */

/* 1 — a shorter, later fade */
.zv-hero-slide::after{
  height: calc(var(--zv-hero-bleed, 210px) + 24px);
  background: linear-gradient(180deg,
      rgba(227,230,230,0) 0%,
      color-mix(in srgb, var(--zv-field) 14%, transparent) 34%,
      color-mix(in srgb, var(--zv-field) 46%, transparent) 62%,
      color-mix(in srgb, var(--zv-field) 82%, transparent) 84%,
      var(--zv-field) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .zv-hero-slide::after{
    background: linear-gradient(180deg, rgba(227,230,230,0) 0%, rgba(227,230,230,.5) 65%, var(--zv-field) 100%);
  }
}

/* 2 — tint stops exactly where the frame stops */
.zv-hero-tints{
  height: calc(var(--zv-hero-visible, 430px) + var(--zv-hero-bleed, 210px));
  bottom: auto;
}

/* 3 — headline lines */
.zv-hero-title span{ display: block; }
.zv-hero-title{ margin-bottom: 26px; }

/* ==========================================================================
   28. HERO — no buttons, copy in the visible band
   --------------------------------------------------------------------------
   Two corrections from the reference:

   1. None of its hero slides carry a button. The whole banner is the link.
      Ours now matches: the CTA is gone and an invisible hit area covers the
      VISIBLE band only, so it can never sit beneath the card grid and steal
      clicks meant for a card.

   2. The copy sits high because the card grid starts from the middle of the
      banner and would cover anything lower. The measurement is ~230px of
      visible height on a 600px hero — ours was showing 430px, which is why the
      copy could afford to sit low. Corrected to 240 visible / 360 behind, and
      the copy is centred in the visible band rather than the whole frame.
   ========================================================================== */
.zv-hero{
  --zv-hero-visible: 240px;
  --zv-hero-bleed: 360px;
}

/* Centre the copy within the visible band: padding equal to the bleed keeps
   the flex centring above the overlap line. */
.zv-hero-slide{
  align-items: center;
  padding-top: 0;
  padding-bottom: var(--zv-hero-bleed, 360px);
}

/* Invisible link over the visible band only. */
.zv-hero-hit{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--zv-hero-visible, 240px);
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}
.zv-hero-hit:focus-visible{
  outline: 3px solid #7AB3E8;
  outline-offset: -4px;
}
/* Copy sits above the hit area so text stays selectable. */
.zv-hero-copy{ position: relative; z-index: 3; pointer-events: none; }

/* Headline scales down a little now the band is shorter. */
.zv-hero-title{ font-size: clamp(22px, 2.9vw, 42px); margin-bottom: 0; }
.zv-hero-eyebrow{ margin-bottom: 8px; }

/* A gentler fade: with cards covering most of the lower hero, only the very
   bottom edge needs to dissolve. */
.zv-hero-slide::after{ height: calc(var(--zv-hero-bleed, 360px) * 0.55); }

@media (max-width: 991.98px){
  .zv-hero{ --zv-hero-visible: 190px; --zv-hero-bleed: 200px; }
}
@media (max-width: 575.98px){
  .zv-hero{ --zv-hero-visible: 160px; --zv-hero-bleed: 130px; }
}

/* ==========================================================================
   29. HOMEPAGE CARD GRID
   --------------------------------------------------------------------------
   The measured system: flat white rectangles on a grey field, separated by a
   constant 20px, each with a bold heading, a body of imagery, and a small blue
   link at the bottom. Zero radius, zero shadow, zero border.

   NO HOVER STATE. The reference gives its homepage cards no lift, no shadow,
   no scale and no border change — adding one is the fastest way to stop
   reading as this species of site.

   The gutter is constant at every width; cards flex, the gutter never does.
   Card padding is 20px 0 15px — note ZERO horizontal padding on the card
   itself; inner content carries its own 20px margin.
   ========================================================================== */
.zv-homegrid{
  position: relative;
  z-index: 2;
  padding: 0 18px 20px;
}
.zv-homegrid-inner{
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  gap: 20px;                       /* constant, never flexes */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zv-card{
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0 15px;            /* zero horizontal — inner content indents */
  height: 420px;                   /* fixed-height row system, as measured */
  display: flex;
  flex-direction: column;
}

.zv-card-title{
  margin: 0 20px 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 27.3px;
  color: var(--zv-ink);
}

.zv-card-body{ flex: 1 1 auto; margin: 0 20px; min-height: 0; }

/* --- four-up quadrant ----------------------------------------------------- */
.zv-quad{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 100%;
}
.zv-quad-cell{
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-decoration: none;
  color: var(--zv-ink);
}
.zv-quad-cell:hover{ color: var(--zv-ink); text-decoration: none; }
.zv-quad-img{
  flex: 1 1 auto;
  background: var(--zv-field);
  overflow: hidden;
  min-height: 0;
  display: block;
}
.zv-quad-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.zv-quad-label{
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--zv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- single large image --------------------------------------------------- */
.zv-card-single{ display: block; height: 100%; text-decoration: none; }
.zv-card-img{
  display: block;
  height: 100%;
  background: var(--zv-field);
  overflow: hidden;
}
.zv-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- the bottom link: always last, always left-aligned -------------------- */
.zv-card-link{
  flex: 0 0 auto;
  margin: 12px 20px 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--zv-link);
  text-decoration: none;
  align-self: flex-start;
}
.zv-card-link:hover{ color: var(--zv-link-hover); text-decoration: underline; }

/* --- breakpoints follow the measured column counts ------------------------ */
@media (max-width: 1239.98px){
  .zv-homegrid-inner{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1219px; }
}
@media (max-width: 991.98px){
  .zv-homegrid-inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zv-card{ height: 380px; }
}
@media (max-width: 575.98px){
  .zv-homegrid-inner{ grid-template-columns: minmax(0, 1fr); }
  .zv-card{ height: auto; min-height: 300px; }
}

/* --- quadrant cells without artwork --------------------------------------
   Four empty grey squares read as broken, not as pending. Until category
   artwork exists the label fills the tile instead. Geometry is unchanged, so
   dropping images in later shifts nothing. */
.zv-quad-cell.is-textonly{ background: var(--zv-field); }
.zv-quad-fill{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  line-height: 17px;
  font-weight: 400;
  color: var(--zv-ink);
}

/* --- link-list card body (fewer than four children) ---------------------- */
.zv-card-list{ list-style: none; margin: 0; padding: 0; }
.zv-card-list li{ margin-bottom: 8px; }
.zv-card-list a{ font-size: 14px; line-height: 20px; color: var(--zv-link); text-decoration: none; }
.zv-card-list a:hover{ color: var(--zv-link-hover); text-decoration: underline; }

/* --- no hover state, and no transition to carry one -----------------------
   The reference is deliberately near-motionless: its homepage cards have no
   lift, no shadow, no scale, no border change. The CMS core applies
   `transition: all` to every anchor, so a hover state would arrive by
   inheritance even though none was written. Neutralised explicitly. */
.zv-card,
.zv-card a,
.zv-card a *{
  transition: none !important;
  transform: none !important;
}
.zv-card:hover{
  background: #FFFFFF;
  box-shadow: none;
  border: 0;
}
.zv-quad-cell:hover,
.zv-quad-cell:hover .zv-quad-fill,
.zv-card-single:hover{
  background: var(--zv-field);
  color: var(--zv-ink);
  text-decoration: none;
  opacity: 1;
}
.zv-quad-cell:hover .zv-quad-label{ text-decoration: underline; }
.zv-quad-cell:hover .zv-quad-fill{ text-decoration: underline; }

/* ==========================================================================
   30. HERO / GRID OVERLAP — the bleed was being counted twice
   --------------------------------------------------------------------------
   Two faults, both invisible until a grid was actually laid over the hero:

   1. The bleed existed twice. The frame is already `visible + bleed` tall, so
      its lower 360px IS the bleed — but `.zv-hero` also carried
      `padding-bottom: var(--zv-hero-bleed)`, adding a second, empty 360px band
      below the artwork that no tint layer ever reached. The grid landed in that
      dead band, so its gutters showed plain page grey instead of hero colour.
      Removed: the bleed lives inside the frame, never below it.

   2. `--zv-hero-bleed` was declared on `.zv-hero`, so the card grid — a
      SIBLING, not a descendant — could not see it and silently fell back to the
      210px default while the real value was 360px. Custom properties do not
      leak sideways. Hoisted to :root, which is the only scope both the hero and
      whatever overlaps it can read.

   Net effect: the grid now pulls up exactly to the end of the visible band, and
   the hero's own tint is what shows between the cards.
   ========================================================================== */
:root{
  --zv-hero-visible: 240px;
  --zv-hero-bleed: 360px;
}
.zv-hero{ padding-bottom: 0; }

@media (max-width: 991.98px){
  :root{ --zv-hero-visible: 190px; --zv-hero-bleed: 200px; }
}
@media (max-width: 575.98px){
  :root{ --zv-hero-visible: 160px; --zv-hero-bleed: 130px; }
}

/* The grid section's own top padding would reopen the gap the overlap closes. */
.zv-homegrid.zv-overlaps-hero{ padding-top: 0; }

/* ==========================================================================
   31. MOBILE — three defects the card grid exposed
   --------------------------------------------------------------------------
   None of these are the grid's own; laying it out at 375px is simply what made
   them measurable.

   1. The DESKTOP CART WAS RENDERING ON PHONES. Its markup carries Bootstrap's
      `d-none d-lg-block`, but §18's `header .logo-bar-area .zv-cart{display:flex
      !important}` outranks `.d-none` on specificity, so the belt cart appeared
      at every width and pushed the header 16px past the viewport. The override
      is real — the cart does need to beat the theme's own layout rules — so it
      is kept and simply gated to lg and up, which is what the markup always
      intended.

   2. The vendor's fixed bottom nav wraps its items in a Bootstrap row whose
      negative gutters have nothing to cancel them, so it measured 401px wide in
      a 391px viewport. Gutters zeroed.

   3. The card's bottom link is 19px tall — fine on a mouse, under the 44px
      minimum for a thumb. Padded on small screens only, so the desktop card
      keeps its measured 15px bottom padding and nothing shifts.
   ========================================================================== */
@media (max-width: 991.98px){
  header .logo-bar-area .zv-cart{ display: none !important; }
}

.aiz-mobile-bottom-nav > .row,
.aiz-mobile-bottom-nav .row.gutters-5{
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 991.98px){
  .zv-card-link{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
  }
  .zv-quad-cell{ min-height: 44px; }
}

/* ==========================================================================
   32. HOMEPAGE BANDS — corrections from auditing the real homepage
   --------------------------------------------------------------------------
   §29 built the card from the spec sheet. Measuring the live homepage
   band-by-band turned up four things the spec did not say:

   1. THE HEADING IS NOT A FIXED RESERVE. A one-line heading puts the image
      area at y=57; a two-line heading pushes it to y=85, and cards sitting
      side by side in the same row do NOT align their image tops. What is
      pinned is the bottom link, at y=383 in every card. Forcing the image
      tops into alignment would be the obvious "improvement" and would be
      wrong. The flex column already behaves this way; the heading just needs
      its natural height and a 10px gap, not 12px.

   2. Quad cells are a 13px gutter, and their labels are 12px/400/18px.

   3. Images BLEED past their box and are clipped — a quad cell's image is
      164px wide in a 119px cell, and a single-image card's is 379px wide in a
      291px card, starting at x=-44. That overflow is what makes the imagery
      look generous rather than boxed.

   4. The page is not one long grid. It is five rows of four, with a
      horizontal SHELF between the later rows (see §33).
   ========================================================================== */
.zv-card-title{ margin: 0 20px 10px; }

/* Rows after the first still need their own vertical rhythm. */
.zv-homegrid + .zv-homegrid{ padding-top: 0; }

.zv-quad{ gap: 13px; }
.zv-quad-label{ font-size: 12px; line-height: 18px; margin-top: 4px; }

/* The bleed-and-clip that makes the imagery read as generous. */
.zv-quad-img,
.zv-card-img{ overflow: hidden; }
.zv-quad-img img,
.zv-card-img img{
  width: 138%;
  height: 100%;
  max-width: none;
  margin-left: -19%;
  object-fit: cover;
  display: block;
}

/* Single-image body: one large image filling the whole flexed body. */
.zv-card-single{ display: block; height: 100%; }
.zv-card-fill{
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 12px; text-align: center;
  font-size: 15px; line-height: 20px; color: var(--zv-ink);
}

/* ==========================================================================
   33. THE SHELF BAND
   --------------------------------------------------------------------------
   Measured: a 1225-wide white band 282px tall. Heading 21px/700/31.5px inset
   20px at y=20; scrolling viewport starts at y=52, 220px tall; tiles 155x210
   with 5px padding; arrows overlay the ends.

   Native overflow scrolling rather than a transform carousel: it keeps
   keyboard, trackpad and touch working for free, and the arrows are a
   convenience on top rather than the only way through.
   ========================================================================== */
.zv-shelf{ padding: 0 18px 20px; }
.zv-shelf-inner{
  max-width: 1480px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0 10px;
}

.zv-shelf-title{
  margin: 0 20px 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 31.5px;
  color: var(--zv-ink);
}

.zv-shelf-viewport{ position: relative; margin: 0 20px; }

.zv-shelf-track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  height: 220px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* The reference shows no scrollbar under its shelves. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zv-shelf-track::-webkit-scrollbar{ display: none; }

.zv-shelf-tile{
  flex: 0 0 155px;
  height: 210px;
  padding: 5px;
  scroll-snap-align: start;
}
.zv-shelf-tile a{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--zv-ink);
  transition: none !important;
}
.zv-shelf-tile a:hover{ color: var(--zv-ink); text-decoration: none; }
.zv-shelf-tile a:hover .zv-shelf-label{ text-decoration: underline; }

.zv-shelf-img{
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  background: var(--zv-field);
  overflow: hidden;
}
.zv-shelf-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.zv-shelf-fill{
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 6px; text-align: center;
  font-size: 12px; line-height: 16px; color: var(--zv-ink);
}
.zv-shelf-label{
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrows overlay the ends; JS hides them when the track does not overflow. */
.zv-shelf-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 76px;
  padding: 0;
  border: 1px solid var(--zv-hairline, #D5D9D9);
  background: rgba(255,255,255,.94);
  color: var(--zv-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.zv-shelf-arrow svg{ width: 20px; height: 20px; }
.zv-shelf-arrow[hidden]{ display: none; }
.zv-shelf-prev{ left: -10px; }
.zv-shelf-next{ right: -10px; }
.zv-shelf-arrow:focus-visible{ outline: 3px solid #7AB3E8; outline-offset: 2px; }

@media (max-width: 991.98px){
  .zv-shelf-arrow{ display: none; }
  .zv-shelf-tile{ flex-basis: 135px; }
}

/* The bottom link sits 383px down a 420px card, not flush against the padding
   box: the reference leaves ~5px of slack under it. Line-height is 16.9px,
   not the 19px §29 assumed. */
.zv-card-link{ line-height: 16.9px; margin-bottom: 5px; }

/* ==========================================================================
   34. CARD BODY TYPES
   --------------------------------------------------------------------------
   The reference does not use one card shape. Within a single row it mixes a
   one-image card, a 2x2 card and a hero-plus-three card, and that variation is
   most of what stops the grid reading like a template. Three types, all
   measured at 291x420:

     single    image fills the body and bleeds past the card edges
     quad      2x2, cells 119 wide with a 13px gutter, image over a 12px label
     hero-row  hero block 165 tall (145 image + label) at y=85, then three
               cells 81 wide / 95 tall at y=262, 4px gutters

   Every cell is the same component at a different size, so one set of rules
   covers image bleed, the no-artwork fallback and the label.
   ========================================================================== */

/* --- the shared cell ------------------------------------------------------ */
.zv-quad-cell,
.zv-hero-cell,
.zv-trio-cell{
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-decoration: none;
  color: var(--zv-ink);
}
.zv-quad-cell:hover,
.zv-hero-cell:hover,
.zv-trio-cell:hover{ color: var(--zv-ink); text-decoration: none; }
.zv-quad-cell:hover .zv-cell-label,
.zv-hero-cell:hover .zv-cell-label,
.zv-trio-cell:hover .zv-cell-label{ text-decoration: underline; }

.zv-cell-img{
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  background: var(--zv-field);
  overflow: hidden;                 /* the bleed is clipped here */
}
/* Images run wider than their cell and are cropped — that overflow is what
   makes the imagery read as generous rather than boxed. */
.zv-cell-img img{
  width: 138%;
  height: 100%;
  max-width: none;
  margin-left: -19%;
  object-fit: cover;
  display: block;
}
.zv-cell-fill{
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 6px; text-align: center;
  font-size: 12px; line-height: 16px; color: var(--zv-ink);
}
.zv-cell-label{
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- quad ----------------------------------------------------------------- */
.zv-quad{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 13px;
  height: 100%;
}

/* --- hero-row ------------------------------------------------------------- */
.zv-card--hero-row .zv-card-body{ display: flex; flex-direction: column; }
.zv-hero-cell{ flex: 1 1 auto; min-height: 0; }
.zv-trio{
  flex: 0 0 95px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.zv-trio-cell{ min-height: 0; }
.zv-trio-cell .zv-cell-label{ font-size: 11px; line-height: 16px; }

/* --- single --------------------------------------------------------------- */
.zv-card-single{ display: block; height: 100%; text-decoration: none; }
.zv-card-img{ display: block; height: 100%; background: var(--zv-field); overflow: hidden; }
.zv-card-img img{
  width: 130%; height: 100%; max-width: none; margin-left: -15%;
  object-fit: cover; display: block;
}
.zv-card-fill{
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 12px; text-align: center;
  font-size: 15px; line-height: 20px; color: var(--zv-ink);
}

/* No hover state anywhere in a card. The CMS core applies `transition: all` to
   every anchor, so this has to be written rather than merely not written. */
.zv-card, .zv-card a, .zv-card a *{ transition: none !important; transform: none !important; }
.zv-card:hover{ background: #FFFFFF; box-shadow: none; border: 0; }

@media (max-width: 991.98px){
  .zv-quad-cell, .zv-hero-cell, .zv-trio-cell{ min-height: 44px; }
}

/* ==========================================================================
   35. THE FOOTER — five bands, measured
   --------------------------------------------------------------------------
   This is what sits where the card grid ends, and on the reference it is five
   distinct bands rather than one block. Measured values:

     back-to-top  #37475A, 49px tall, 13px/400/19px white, centred
     link columns #232F3E, four columns in a 1000px centred block, 268px tall,
                  headings 16px/700/16.8px white, links 14px/400/16.8px #DDD
     locale line  68px, centred chips
     directory    a wide, dense index band
     legal        #131A22, 12px/18px

   The three chrome colours were already tokens (§1) — this band is what they
   were sampled for.
   ========================================================================== */
.zv-footer{ margin-top: 20px; }

/* --- 1: back to top ------------------------------------------------------- */
.zv-backtotop{
  display: block;
  height: 49px;
  line-height: 49px;
  background: var(--zv-chrome-3, #37475A);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.zv-backtotop:hover{ background: #485769; color: #FFFFFF; text-decoration: none; }
.zv-backtotop:focus-visible{ outline: 3px solid #7AB3E8; outline-offset: -3px; }

/* --- 2: link columns ------------------------------------------------------ */
.zv-footer-cols{ background: var(--zv-chrome-2, #232F3E); padding: 40px 18px 32px; }
.zv-footer-cols-inner{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.zv-footer-col h3{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 16.8px;
  color: #FFFFFF;
}
.zv-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.zv-footer-col li{ margin-bottom: 9px; }
.zv-footer-col a{
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: #DDDDDD;
  text-decoration: none;
}
.zv-footer-col a:hover{ color: #DDDDDD; text-decoration: underline; }

/* --- 3: locale line ------------------------------------------------------- */
.zv-footer-locale{
  background: var(--zv-chrome-2, #232F3E);
  border-top: 1px solid #3A4553;
  padding: 22px 18px;
}
.zv-footer-locale-inner{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.zv-locale-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #848688;
  border-radius: 3px;
  background: transparent;
  color: #DDDDDD;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.zv-locale-chip svg{ width: 15px; height: 15px; }
.zv-locale-chip:hover{ border-color: #DDDDDD; color: #FFFFFF; text-decoration: none; }
.zv-locale-chip.is-static{ cursor: default; }

/* --- 4: department directory ---------------------------------------------- */
.zv-footer-directory{ background: var(--zv-chrome-2, #232F3E); padding: 26px 18px 34px; }
.zv-footer-directory-inner{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 20px;
}
.zv-dir-cell{ display: block; text-decoration: none; }
.zv-dir-name{
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #DDDDDD;
}
.zv-dir-hint{
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 15px;
  color: #999999;
}
.zv-dir-cell:hover .zv-dir-name{ text-decoration: underline; color: #FFFFFF; }

/* --- 5: legal strip ------------------------------------------------------- */
.zv-footer-legal{ background: var(--zv-legal, #131A22); padding: 22px 18px 26px; }
.zv-footer-legal-inner{ max-width: 1000px; margin: 0 auto; text-align: center; }
.zv-footer-legal ul{
  list-style: none; margin: 0 0 8px; padding: 0;
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.zv-footer-legal a{ font-size: 12px; line-height: 18px; color: #DDDDDD; text-decoration: none; }
.zv-footer-legal a:hover{ text-decoration: underline; color: #FFFFFF; }
.zv-footer-legal p{ margin: 0; font-size: 12px; line-height: 18px; color: #999999; }

@media (max-width: 991.98px){
  .zv-footer-cols-inner{ grid-template-columns: repeat(2, 1fr); }
  .zv-footer-directory-inner{ grid-template-columns: repeat(3, 1fr); }
  /* Room for the fixed mobile bottom nav. */
  .zv-footer-legal{ padding-bottom: 84px; }
}
@media (max-width: 575.98px){
  .zv-footer-cols-inner{ grid-template-columns: 1fr; }
  .zv-footer-directory-inner{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   36. CARD BODY GEOMETRY — two corrections from measuring the real cards
   --------------------------------------------------------------------------
   1. THE BODY DOES NOT STRETCH TO THE FOOTER, and how far short it stops
      depends on the card type. Letting it flex into all remaining space —
      the obvious implementation — left the quad's cells 18px too tall and the
      hero block 15px too tall. Measured bottoms: quad ~351, hero-row 357,
      single ~361, against a footer pinned at 383.

   2. THE QUAD'S ROW GAP IS NOT ITS COLUMN GUTTER. Columns are 13px apart,
      rows 26px. A uniform `gap: 13px` looks right in isolation and wrong
      beside the reference.
   ========================================================================== */
.zv-quad{ column-gap: 13px; row-gap: 26px; }

.zv-card--quad .zv-card-body{ margin-bottom: 20px; }
.zv-card--hero-row .zv-card-body{ margin-bottom: 14px; }
.zv-card--single .zv-card-body{ margin-bottom: 10px; }

/* Footer tap targets. The link text is 14px and the rows are 15-17px tall,
   which is fine under a mouse and under the 44px minimum for a thumb. Padded
   on small screens only, so the desktop footer keeps its measured rhythm. */
@media (max-width: 991.98px){
  .zv-footer-col li{ margin-bottom: 0; }
  .zv-footer-col a,
  .zv-footer-legal a{
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .zv-footer-legal ul{ flex-direction: column; gap: 0; align-items: center; }
  .zv-dir-cell{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
  }
  .zv-locale-chip{ min-height: 44px; }
}

/* ==========================================================================
   37. SIGN-IN PROMPT — the band above back-to-top
   --------------------------------------------------------------------------
   White, hairline above, everything centred: a heading, a yellow pill button
   and a small "New customer?" line under it. It closes the page's white
   content area, and the dark chrome starts immediately below it.

   Provenance, honestly: this band could not be measured on the live site —
   that session serves the international homepage, which does not include it.
   Proportions are taken from the reference screenshot; the type scale and the
   button colour are tokens that WERE measured (card-title 21px/700, and
   --zv-cta #FFD814, the same yellow as Add to Cart).
   ========================================================================== */
.zv-signin-prompt{
  background: #FFFFFF;
  border-top: 1px solid var(--zv-hairline, #D5D9D9);
  padding: 38px 18px 26px;
}
.zv-signin-inner{
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.zv-signin-prompt h2{
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
  line-height: 27.3px;
  color: var(--zv-ink);
}

/* The pill. Same yellow as Add to Cart, so the page has one money colour. */
.zv-signin-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 310px;
  min-height: 31px;
  padding: 4px 18px;
  border: 1px solid #FCD200;
  border-radius: 100px;
  background: var(--zv-cta, #FFD814);
  color: var(--zv-ink) !important;   /* markup elsewhere carries .text-white */
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  text-decoration: none;
}
.zv-signin-btn:hover{
  background: #FFCE12;               /* the real hover; the published #F7CA00 is dead */
  color: var(--zv-ink) !important;
  text-decoration: none;
}
.zv-signin-btn:focus-visible{ outline: 3px solid #7AB3E8; outline-offset: 2px; }

.zv-signin-new{
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--zv-ink);
}
.zv-signin-new a{ color: var(--zv-link); text-decoration: underline; }
.zv-signin-new a:hover{ color: var(--zv-link-hover); }

@media (max-width: 991.98px){
  /* 44px thumb target, without changing the desktop pill's measured height. */
  .zv-signin-btn{ min-height: 44px; }
  .zv-signin-new a{ display: inline-block; min-height: 44px; line-height: 44px; }
}

/* Product tiles on a shelf carry a price under the label. Near-black, tabular
   figures, and never red — red is reserved for was-prices and savings. */
.zv-shelf-price{
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  color: var(--zv-price, #0F1111);
  font-feature-settings: "tnum";
}
.zv-shelf-tile{ height: auto; min-height: 210px; }

/* ==========================================================================
   38. PRODUCT PAGE — title, breadcrumb, buy box
   --------------------------------------------------------------------------
   Three defects found by measuring our page against the spec:

   1. THERE WAS NO <h1> ON THE PRODUCT PAGE AT ALL. The product name was an
      <h2 class="fs-16 fw-700">. Wrong semantically — the product name IS the
      page heading, and its absence hurts screen readers and search — and wrong
      visually: the measured value is 18px/400/24px, not 16px bold. A product
      title is long-form text; bolding it makes the page shout.

   2. NO BREADCRUMB. See §zv-breadcrumb below.

   3. THE BUY BUTTONS WERE SIDE BY SIDE, SQUARE AND 150px WIDE. The reference
      STACKS them full-width as pills — softer yellow above warmer orange. The
      small difference between the two is the point: it separates two good
      actions without implying either is dangerous. Two square buttons side by
      side read as "confirm / cancel".
   ========================================================================== */

/* --- title ---------------------------------------------------------------- */
.zv-pdp-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: var(--zv-ink, #0F1111);
}

/* --- breadcrumb: muted grey, NOT a link colour ---------------------------- */
.zv-breadcrumb{ padding: 10px 18px 0; }
.zv-breadcrumb-inner{ max-width: 1480px; margin: 0 auto; }
.zv-breadcrumb ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
}
.zv-breadcrumb li{ display: inline-flex; align-items: center; }
.zv-breadcrumb a,
.zv-breadcrumb span{
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: var(--zv-ink-muted, #565959);
  text-decoration: none;
}
.zv-breadcrumb a:hover{ color: var(--zv-link-hover, #C7511F); text-decoration: underline; }
.zv-breadcrumb-sep{ margin: 0 7px; color: var(--zv-ink-muted, #565959); }
.zv-breadcrumb li:last-child span{ color: var(--zv-ink-muted, #565959); }

/* --- buy box buttons: stacked, full width, pill --------------------------- */
.zv-buybox-btn{
  display: block;
  width: 100%;
  max-width: 260px;
  min-height: 32px;
  padding: 5px 16px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  border-radius: 100px;              /* the pill rollout has shipped */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--zv-ink, #0F1111) !important;   /* markup elsewhere carries .text-white */
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 5px 0 rgba(213, 217, 217, .5);
  transition: none !important;
}
.zv-buybox-cart{ background: var(--zv-cta, #FFD814); border-color: #FCD200; }
.zv-buybox-cart:hover{ background: #FFCE12; }        /* the real hover; #F7CA00 is dead */
.zv-buybox-buy{ background: var(--zv-buy, #FFA41C); border-color: #FF8F00; }
.zv-buybox-buy:hover{ background: #FA8900; }
.zv-buybox-btn:focus-visible{ outline: 3px solid #7AB3E8; outline-offset: 2px; }
.zv-buybox-btn:disabled{ background: #F0F2F2; border-color: #D5D9D9; cursor: default; }

/* --- gallery: the main image was rendering at 1350px ---------------------- */
.product-gallery .carousel-box img{
  max-width: 100%;
  max-height: 435px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

@media (max-width: 991.98px){
  .zv-buybox-btn{ max-width: none; min-height: 44px; }
}

/* The hover magnifier appears and disappears INSTANTLY on the reference — no
   transition, no easing, no lens animation. The theme leaves `transition: all`
   on it, which makes the zoom drift in and feel slow. (Note the oversized
   .zoomImg is correct: that IS the magnified layer, and its inline max-width
   must keep winning, so this only touches timing.) */
.product-gallery img.zoomImg,
.zoomWindow, .zoomContainer{ transition: none !important; }

/* Breadcrumb links are 14px tall — the one place this build does not reach the
   44px thumb minimum, deliberately. A trail of four 44px rows becomes a stack
   of bars taller than the product title it is meant to sit quietly above, and
   the reference keeps its mobile breadcrumb as small inline text too. Padded to
   ~34px as a compromise: materially easier to hit, still a trail. */
@media (max-width: 991.98px){
  .zv-breadcrumb a,
  .zv-breadcrumb li > span[aria-current]{
    display: inline-block;
    padding: 10px 0;
  }
}

/* ==========================================================================
   39. SEARCH RESULTS — filter rail, result title, pagination
   --------------------------------------------------------------------------
   Measured spec §4.5/§4.6. Four differences from what the theme ships:

   1. THE RAIL IS A FIXED 274px, not a 25% Bootstrap column. At 1920 a 25%
      column is 480px — nearly twice the reference — and the extra width is
      what makes a filter rail start to feel like a control panel.

   2. NO ACCORDIONS BY DEFAULT. The theme collapses every filter group behind
      a toggle. The reference shows them open: bold label, list of blue text
      links, repeat. Its restraint is the point — you can see the whole shape
      of the filter set without clicking anything.

   3. NO CHIPS, NO BOXES, NO COUNTS IN PILLS. The theme renders product-type
      filters as `.badge.rounded-3` pills. Plain text links instead.

   4. THE RESULT TITLE IS NEAR-BLACK AND LEFT-ALIGNED. The theme sets it
      13px/400 centred; the reference is 18px/400/24px `#0F1111` — and
      notably NOT a link colour, even though it is a link. Centring a
      variable-length product title also gives a listing a ragged left edge,
      which is why every catalogue that scans well is left-aligned.
   ========================================================================== */

/* --- 1: rail width -------------------------------------------------------- */
@media (min-width: 1200px){
  .aiz-filter-sidebar.sidebar-xl{
    flex: 0 0 274px;
    max-width: 274px;
  }
  /* The results column takes whatever is left, rather than a fixed 75%. */
  .product-listing-row > .col-xl-3{
    flex: 0 0 274px;
    max-width: 274px;
    padding-right: 12px;
  }
  .product-listing-row > .col-xl-9{
    flex: 1 1 auto;
    max-width: none;
  }
}

/* --- 2: filter groups open, toggles inert at desktop ---------------------- */
@media (min-width: 1200px){
  .aiz-filter-sidebar .collapse{ display: block !important; height: auto !important; }
  .aiz-filter-sidebar .filter-section{ cursor: default; pointer-events: none; }
  /* The chevron implies a control that no longer does anything. */
  .aiz-filter-sidebar .filter-section::after,
  .aiz-filter-sidebar .filter-section .las,
  .aiz-filter-sidebar .filter-section .la{ display: none !important; }
}

/* Group heading and link, to the measured values. */
.aiz-filter-sidebar .filter-section{
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 16px;
  color: var(--zv-ink, #0F1111) !important;
}
.aiz-filter-sidebar .collapse a,
.aiz-filter-sidebar .collapse label{
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--zv-link, #2162A1);
}

/* --- 3: no chips ---------------------------------------------------------- */
.aiz-filter-sidebar .badge.badge-inline{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  color: var(--zv-link, #2162A1) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* --- 4: result title ------------------------------------------------------ */
.product-listing-row h3.text-truncate-2{
  height: auto !important;
  min-height: 48px;
  text-align: left !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
}
.product-listing-row h3.text-truncate-2 a{
  color: var(--zv-ink, #0F1111) !important;   /* a link, but not link-coloured */
}
.product-listing-row h3.text-truncate-2 a:hover{ color: var(--zv-link-hover, #C7511F) !important; }

/* Price left-aligned under it, not centred. */
.product-listing-row .card-body .justify-content-center,
.product-listing-row .p-2 .justify-content-center,
.product-listing-row .p-md-3 .justify-content-center{ justify-content: flex-start !important; }

/* --- pagination: 48px items, current page OUTLINED not filled ------------- */
.zv-pagination{ display: flex; justify-content: center; margin-top: 24px; }
.zv-pagination ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
}
.zv-page{ display: block; }
.zv-page a,
.zv-page span{
  display: block;
  min-width: 48px;
  height: 48px;
  line-height: 46px;
  padding: 0 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--zv-ink, #0F1111);
  text-decoration: none;
  border: 1px solid transparent;
  background: #FFFFFF;
}
.zv-page a:hover{ background: #F7F8F8; color: var(--zv-ink, #0F1111); text-decoration: none; }

/* The marker: a 1px near-black outline plus bold — never a filled block. */
.zv-page.is-current span{
  border: 1px solid var(--zv-ink, #0F1111);
  font-weight: 700;
  background: #FFFFFF;
}
.zv-page.is-disabled span{ color: #6F7373; cursor: default; }
.zv-page.is-gap span{ border: 0; background: transparent; }

/* Prev/Next are wider than a numeral, and the strip's OUTER edges round. */
.zv-page:first-child a, .zv-page:first-child span,
.zv-page:last-child a, .zv-page:last-child span{ padding: 0 12px; }
.zv-page:first-child a, .zv-page:first-child span{ border-radius: 8px 0 0 8px; }
.zv-page:last-child a, .zv-page:last-child span{ border-radius: 0 8px 8px 0; }

.zv-page a:focus-visible{ outline: 3px solid #7AB3E8; outline-offset: -3px; }

/* The results column must take the REMAINING space, not size itself from its
   content. `flex: 1 1 auto` gives it a content-based flex basis — the product
   grid inside is wide, 274 + that basis exceeds the row, and with flex-wrap the
   column wrapped onto its own line below the rail. A zero basis plus min-width:0
   makes it fill what is left and lets the grid inside shrink. */
@media (min-width: 1200px){
  .product-listing-row > .col-xl-9{
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ==========================================================================
   40. CART
   --------------------------------------------------------------------------
   The cart had the same two defects the product page had: it served the
   generic site title and carried NO <h1>. A cart is a page shoppers return to
   and bookmark — it has to say what it is in the tab and to a screen reader.

   Its empty state was a frowning face and a heading, with no way onward. That
   is the one screen where a shopper most needs a route back into the
   catalogue, so it now has one.

   And the "Proceed to Checkout" button wore `.btn-primary`, which on this
   build is the dark chrome navy — a near-black rectangle reading as a neutral
   form submit rather than the action the page exists for. It is the money
   button, so it wears the money colour.
   ========================================================================== */
.zv-page-title{
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  color: var(--zv-ink, #0F1111);
}

.zv-cart-empty{ padding: 28px 16px !important; }
.zv-cart-empty h2{
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  line-height: 27.3px;
  color: var(--zv-ink, #0F1111);
}
.zv-cart-empty p{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 20px;
  color: var(--zv-ink-muted, #565959);
}
.zv-cart-empty .zv-buybox-btn{ margin: 0 auto; }

/* The proceed CTA spans the summary panel rather than the 260px buy-box width. */
.zv-cart-proceed{
  max-width: none;
  font-weight: 700;
  min-height: 36px;
}

/* Present to assistive tech and to search, absent to the eye. Used for the
   homepage heading, where a visible h1 would fight the hero that actually
   carries the page. Not `display:none` — that hides it from screen readers too,
   which defeats the point. */
.zv-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The account area's page heading. Its pages previously used <h5> and <b> —
   things that look like headings without being ones. */
.zv-panel-title{
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  color: var(--zv-ink, #0F1111);
}

/* ==========================================================================
   41. THE MONEY PATH — cart, checkout, confirmation
   --------------------------------------------------------------------------
   These three pages had their semantics fixed (title, h1, noindex) but never
   their design: they were still wearing stock Bootstrap cards on a grey field,
   which is the one stretch of the site a buyer cannot avoid.

   PROVENANCE, because it differs from every other section here. The measured
   spec covers the header, hero, cards, product page, search and footer — it
   does NOT cover the cart. Measuring the reference's cart needs a signed-in
   account with items in it, which is the owner's account, not something to
   drive. So this is the ALREADY-MEASURED SYSTEM APPLIED to a new surface —
   grey field, flat white panels at zero radius, near-black prices, 13px blue
   links, the yellow pill for the money button — rather than new measurements.
   Stated plainly so nobody later reads these numbers as observed fact.
   ========================================================================== */

/* --- the two columns ------------------------------------------------------ */
.zv-cart-items > .bg-white{
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px !important;
}

/* --- one line item -------------------------------------------------------- */
.zv-cart-line{
  padding: 16px 0;
  border-top: 1px solid var(--zv-hairline, #D5D9D9);
  margin: 0;
}
.zv-cart-line:first-of-type{ border-top: 0; }

/* The product name is the line's anchor: same treatment as a search result —
   near-black, not a link colour, even though it is a link. */
.zv-cart-line a[href*="/product/"]{
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: var(--zv-ink, #0F1111) !important;
}
.zv-cart-line a[href*="/product/"]:hover{ color: var(--zv-link-hover, #C7511F) !important; }

/* Line total: near-black and bold. Red is for was-prices only, never a total. */
.zv-cart-line .text-primary,
.zv-cart-line .fw-700{
  color: var(--zv-price, #0F1111) !important;
  font-feature-settings: "tnum";
}

/* Remove / secondary actions are small blue text, not buttons. */
.zv-cart-line .las.la-trash,
.zv-cart-line a[onclick*="removeFromCart"]{
  color: var(--zv-link, #2162A1) !important;
  font-size: 13px;
}

/* --- the summary panel ---------------------------------------------------- */
.zv-cart-summary{
  border: 1px solid var(--zv-hairline, #D5D9D9) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF;
}
.zv-cart-summary .card-header{
  background: #FFFFFF;
  border-bottom: 0;
  padding: 20px 20px 4px !important;
}
.zv-cart-summary .card-header h3{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 24px;
  color: var(--zv-ink, #0F1111) !important;
}
.zv-cart-summary .card-body{ padding: 4px 20px 20px !important; }

/* The totals table: quiet labels, near-black figures, tabular so they align. */
.zv-cart-summary table td{
  border: 0 !important;
  padding: 6px 0 !important;
  font-size: 14px;
  line-height: 20px;
}
.zv-cart-summary table td:first-child{ color: var(--zv-ink-muted, #565959); }
.zv-cart-summary table td:last-child{
  text-align: right;
  color: var(--zv-price, #0F1111);
  font-feature-settings: "tnum";
}
/* The grand total is the one figure that earns weight. */
.zv-cart-summary table tr:last-child td{
  font-size: 18px;
  font-weight: 700;
  padding-top: 12px !important;
  border-top: 1px solid var(--zv-hairline, #D5D9D9) !important;
}

@media (max-width: 991.98px){
  .zv-cart-items > .bg-white{ padding: 14px !important; }
  .zv-cart-line{ padding: 14px 0; }
}

/* --- checkout steps ------------------------------------------------------- */
/* Three stacked panels — shipping, delivery, payment — on the grey field. Flat
   white, hairline border, zero radius, same as every other panel in the system.
   The inline 2rem gap the theme set is replaced by the 20px the rest of the
   build uses, so checkout does not have its own private rhythm. */
.zv-checkout-step{
  border: 1px solid var(--zv-hairline, #D5D9D9) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
  background: #FFFFFF;
}
.zv-checkout-step .card-header{
  background: #FFFFFF;
  border-bottom: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 14px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 18px/700 — the panel-heading step of the scale, not the 19px the theme used. */
.zv-checkout-step .card-header span{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 24px;
  color: var(--zv-ink, #0F1111);
}
.zv-checkout-step .card-body{ padding: 20px !important; }

/* Inputs on the money path get the same field treatment as the rest of the
   build rather than Bootstrap's default rounded control. */
.zv-checkout-step .form-control,
.zv-checkout-step select.form-control{
  border-radius: 3px;
  border: 1px solid var(--zv-hairline, #D5D9D9);
  min-height: 40px;
  font-size: 14px;
}
.zv-checkout-step .form-control:focus{
  border-color: #007185;
  box-shadow: 0 0 0 3px rgba(0, 113, 133, .18);
}

/* The submit at the end of checkout is a money button, like Add to Cart. */
.zv-checkout-step ~ * .btn-primary[type="submit"],
#checkout-form button[type="submit"].btn-primary{
  background: var(--zv-cta, #FFD814) !important;
  border-color: #FCD200 !important;
  color: var(--zv-ink, #0F1111) !important;
  border-radius: 100px !important;
  font-weight: 400;
  min-height: 36px;
  box-shadow: 0 2px 5px 0 rgba(213, 217, 217, .5);
}

/* --- order confirmation --------------------------------------------------- */
/* The one page in the build that is allowed to feel like relief. Kept quiet
   anyway: the confirmation headline uses the system's success green rather
   than Bootstrap's, and the panel matches every other panel. */
.zv-confirm-title{
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 36px;
  color: var(--zv-success, #007600) !important;
}
.zv-confirm-panel{
  border: 1px solid var(--zv-hairline, #D5D9D9) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF;
}
.zv-confirm-panel .card-body{ padding: 20px !important; }

/* ==========================================================================
   42. THE ACCOUNT AREA — side nav, panels, tables
   --------------------------------------------------------------------------
   Same situation as §41: semantics were fixed here (one h1 per page, real
   titles, noindex) and the design never was. Every page was stock Bootstrap
   cards inside a stock sidebar.

   Provenance is the same as §41 and is NOT repeated per rule: the measured
   spec does not cover the account area, so this is the already-measured system
   applied to a new surface, not new observation.

   Targeting note: this hooks `.aiz-user-panel` and `.aiz-user-sidenav`, which
   are single stable structural classes for the region rather than the long
   Bootstrap chains §41 deliberately avoided. One class that names the thing is
   a fair hook; `.card.rounded-0.border.shadow-none` is not.
   ========================================================================== */

/* --- the side nav: quiet, flat, and it says where you are ----------------- */
.aiz-user-sidenav-wrap{
  background: #FFFFFF;
  border: 1px solid var(--zv-hairline, #D5D9D9);
  border-radius: 0;
  box-shadow: none;
}
.aiz-user-sidenav .sidemnenu a{
  display: block;
  padding: 10px 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--zv-link, #2162A1);
  text-decoration: none;
  border-radius: 0;
}
.aiz-user-sidenav .sidemnenu a:hover{
  color: var(--zv-link-hover, #C7511F);
  text-decoration: underline;
  background: transparent;
}
/* The current page is near-black and bold — the same marker the pagination
   uses. A filled highlight would read as a button. */
.aiz-user-sidenav .sidemnenu a.active,
.aiz-user-sidenav .sidemnenu li.active > a{
  color: var(--zv-ink, #0F1111) !important;
  font-weight: 700;
  background: transparent !important;
}

/* --- panels inside the account ------------------------------------------- */
.aiz-user-panel .card{
  border: 1px solid var(--zv-hairline, #D5D9D9) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF;
}
.aiz-user-panel .card-header{
  background: #FFFFFF;
  border-bottom: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 14px 20px !important;
}
.aiz-user-panel .card-header h5,
.aiz-user-panel .card-header h3,
.aiz-user-panel .aiz-titlebar b{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 24px;
  color: var(--zv-ink, #0F1111) !important;
}
.aiz-user-panel .card-body{ padding: 20px !important; }

/* --- tables: hairlines, no zebra, figures that line up -------------------- */
.aiz-user-panel table{ font-size: 14px; }
.aiz-user-panel table thead th{
  border-top: 0 !important;
  border-bottom: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 10px 12px !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--zv-ink-muted, #565959);
  text-transform: none;
}
.aiz-user-panel table td{
  border-top: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 14px 12px !important;
  vertical-align: middle;
  color: var(--zv-ink, #0F1111);
}
/* Money columns get tabular figures so they align down the column. */
.aiz-user-panel table td:last-child,
.aiz-user-panel table td .fw-700{
  font-feature-settings: "tnum";
  color: var(--zv-price, #0F1111);
}
.aiz-user-panel table a{ color: var(--zv-link, #2162A1); }
.aiz-user-panel table a:hover{ color: var(--zv-link-hover, #C7511F); }

/* Status pills stay, but as quiet text rather than saturated blocks — an
   order's status is information, not a call to action. */
.aiz-user-panel .badge{
  border-radius: 3px;
  font-weight: 400;
  font-size: 12px;
  padding: 4px 8px;
}

@media (max-width: 991.98px){
  .aiz-user-panel .card-body{ padding: 14px !important; }
  .aiz-user-sidenav .sidemnenu a{ min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   43. THE SELLER CENTER
   --------------------------------------------------------------------------
   Same story again: titles, h1s and noindex were fixed here; the design was
   not. Provenance as §41 — the measured spec does not cover a seller panel, so
   this is the system applied, not new observation.

   The one judgement worth writing down: the dashboard shipped FOUR LARGE
   `bg-primary` CARDS. On this build `--primary` is the dark chrome navy
   (#131921) by deliberate decision, because the theme uses it across 59 views
   paired with white text. That makes a seller's first screen four heavy dark
   blocks competing with the chrome above them. Stat panels are information, so
   they are flat white with near-black figures like every other panel here, and
   the numbers carry the weight instead of the background.
   ========================================================================== */

/* --- sidebar: the chrome family, not a third colour ----------------------- */
.aiz-sidebar{
  background: var(--zv-chrome-2, #232F3E) !important;
  border-right: 0;
}
.aiz-sidebar .aiz-side-nav-link{
  color: #DDDDDD !important;
  font-size: 14px;
  border-radius: 0;
}
.aiz-sidebar .aiz-side-nav-link:hover{
  background: rgba(255, 255, 255, .06) !important;
  color: #FFFFFF !important;
}
.aiz-sidebar .aiz-side-nav-item.active > .aiz-side-nav-link,
.aiz-sidebar .aiz-side-nav-link.active{
  background: rgba(255, 255, 255, .10) !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* --- panels --------------------------------------------------------------- */
.aiz-main-content .card{
  border: 1px solid var(--zv-hairline, #D5D9D9) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF;
}
.aiz-main-content .card-header{
  background: #FFFFFF;
  border-bottom: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 14px 20px !important;
}
.aiz-main-content .card-header h5,
.aiz-main-content .card-header h6,
.aiz-main-content .card-header .h6{
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--zv-ink, #0F1111) !important;
}
.aiz-main-content .card-body{ padding: 20px !important; }

/* The four dark stat blocks become quiet panels; the figure is the point. */
.aiz-main-content .card.bg-primary{
  background: #FFFFFF !important;
  border: 1px solid var(--zv-hairline, #D5D9D9) !important;
}
.aiz-main-content .card.bg-primary *,
.aiz-main-content .card.bg-primary .text-white{
  color: var(--zv-ink, #0F1111) !important;
}
.aiz-main-content .card.bg-primary .fs-30,
.aiz-main-content .card.bg-primary h1,
.aiz-main-content .card.bg-primary h2,
.aiz-main-content .card.bg-primary h3{
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 36px;
  color: var(--zv-price, #0F1111) !important;
  font-feature-settings: "tnum";
}

/* --- tables, matching the account area ------------------------------------ */
.aiz-main-content table{ font-size: 14px; }
.aiz-main-content table thead th{
  border-top: 0 !important;
  border-bottom: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 10px 12px !important;
  font-size: 13px; font-weight: 700;
  color: var(--zv-ink-muted, #565959);
}
.aiz-main-content table td{
  border-top: 1px solid var(--zv-hairline, #D5D9D9) !important;
  padding: 14px 12px !important;
  vertical-align: middle;
}
.aiz-main-content table a{ color: var(--zv-link, #2162A1); }

/* The seller's own page heading, same scale as the customer panel. */
.aiz-main-content .zv-panel-title{ margin-bottom: 20px; }