/* ==========================================================================
   Notting Hill Vape — core theme
   NHV-02. Design tokens first, then components.

   RULE: no colour, font or spacing literal below the :root block, and none
   in any .twig file. If you need a new value, add a token here first.

   This file is the FOUNDATION (tokens, page, header) and belongs to NHV-02.
   Each homepage block owns its own stylesheet under blocks/ so the blocks can
   be deployed independently — see the <link> tags in common/header.twig.
   Reference: _docs/NHV-02 - Notting Hill Vape Core Theme/DESIGN-STYLE.md
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --nhv-navy:          #102F42;  /* header, footer, primary dark ground     */
  --nhv-navy-light:    #184E6A;  /* raised panels on navy, hover ground     */
  --nhv-navy-deep:     #0B2230;  /* pressed states, dropdown ground         */
  --nhv-espresso:      #251503;  /* product-card caption ground, sampled from the
                                    live category page. A warm near-black — NOT a
                                    navy; it is the one brown surface in the set. */
  --nhv-taupe:         #C4BAA9;  /* product names on --nhv-espresso              */
  --nhv-rule-warm:     #E3DED4;  /* hairline on a LIGHT ground. Warm rather than
                                    a neutral grey, so it sits with the cream and
                                    copper instead of fighting them.            */
  --nhv-grey-link:     #8B9198;  /* muted grey for links and meta text on the
                                    footer ground — 5.94:1 there, comfortably AA */
  --nhv-footer-ground: #02131B;  /* footer ground — the darkest surface on the
                                    site, sampled from the live footer        */
  --nhv-navy-panel:    #0F212D;  /* module-heading panel on a navy band — sits
                                    a touch proud of --nhv-navy-deep behind it */
  --nhv-navy-border:   #2A3B4B;  /* SOLID border on navy panels. Distinct from
                                    --nhv-rule, which is a translucent cream
                                    hairline and takes its cast from whatever is
                                    behind it; this one is fixed.              */
  --nhv-copper:        #A3795B;  /* primary accent: buttons, active nav     */
  --nhv-copper-muted:  #946F5E;  /* hover grounds, borders — NOT small text */
  --nhv-copper-text:   #B49172;  /* muted copper for SMALL TEXT on navy.
                                    #A3795B is 3.61:1 and #946F5E is 3.11:1,
                                    both below AA for body copy. This is
                                    4.80:1 and keeps the copper hue.        */
  --nhv-gold:          #FDC22D;  /* highlight: Specials, sale flashes       */
  --nhv-red:           #DD0E1C;  /* destructive / clearance only            */
  --nhv-sale-red:      #A32B1F;  /* SALE badge. Deliberately NOT --nhv-red: that
                                    is a pure alert red and reads as an error next
                                    to the copper. This shares its red channel with
                                    --nhv-copper (#A3795B), so it lands as the
                                    copper's saturated sibling. 7.06:1 with
                                    --nhv-cream-bright.                      */
  --nhv-stock-green:   #1E6B45;  /* "In Stock". Deliberately deep rather than a
                                    bright supermarket green: 6.47:1 on white,
                                    within a whisker of --nhv-sale-red's 7.19:1,
                                    so availability and unavailability carry the
                                    same weight instead of one shouting.     */
  --nhv-brand-mat:     #3F3F3F;  /* The mat the brand artwork is printed on, so a
                                    panel beside a logo continues it rather than
                                    butting against it. MEASURED, not chosen:
                                    118 of the 129 brand JPEGs (91%) use exactly
                                    this, and all but three of the rest are
                                    within four points of it. Close to
                                    --nhv-metal-ground (#434343) but not equal —
                                    at a shared edge that difference shows as a
                                    seam, so the exact value earns its own token.
                                    9.45:1 with --nhv-cream.                 */

  /* --- Neutrals --------------------------------------------------------- */
  --nhv-cream:         #FBF3D1;  /* primary text ON navy                    */
  --nhv-cream-bright:  #FFFDF5;  /* headings on navy                        */
  --nhv-sand:          #F6F0E8;  /* light section ground                    */
  --nhv-white:         #FFFFFF;
  --nhv-ink:           #333333;  /* primary text on light                   */
  --nhv-ink-soft:      #6B6B6B;  /* muted text on light                     */
  --nhv-rule:          rgba(251, 243, 209, 0.15); /* hairline on navy       */
  --nhv-navy-veil:     rgba(16, 47, 66, 0.55);   /* navy at 55% — scrims over
                                                    imagery, e.g. slider arrows */
  --nhv-navy-transparent: rgba(16, 47, 66, 0);  /* navy at zero alpha — the far end
                                    of gradients over imagery. Spelling it out beats
                                    `transparent`, which some engines interpolate
                                    through black and leaves a grey smear.        */
  --nhv-metal-ground:  #434343;  /* mean of bg-hp-block.jpg — the fallback behind
                                    the tile section if the texture fails to load,
                                    so light content never lands on white.      */
  --nhv-brand-ground:  #3E3E3E;  /* brand-strip ground. NOT arbitrary: the brand
                                    logos are JPGs with #3F3F3F baked in, so the
                                    strip must match or every logo reads as a
                                    grey tile. The live site uses #3E3E3E.     */

  /* --- Type ------------------------------------------------------------- */
  --nhv-font-body:     "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --nhv-font-display:  "Sora", var(--nhv-font-body);

  --nhv-fs-micro:      11px;
  --nhv-fs-small:      12px;
  --nhv-fs-nav:        13px;
  --nhv-fs-base:       15px;
  --nhv-fs-lead:       16px;

  --nhv-fw-normal:     400;
  --nhv-fw-semi:       600;
  --nhv-fw-bold:       700;

  /* --- Layout ----------------------------------------------------------- */
  --nhv-container:     1400px;
  --nhv-gutter:        15px;
  --nhv-section-pad:   12px;   /* vertical breathing room for full-bleed bands.
                                  Deliberately tight: the band reads as a frame
                                  around the cards, not a section of its own.
                                  Halved under 600px. 0 would make the band
                                  coincide exactly with the cards.            */
  --nhv-row-top:       35px;   /* utility bar    */
  --nhv-row-main:      120px;  /* logo + search  */
  --nhv-row-nav:       42px;   /* category nav   */

  --nhv-radius:        0;      /* the brand is square-edged                 */
  --nhv-radius-sm:     2px;    /* the one exception: module-heading panels,
                                  matching the live site                     */
  --nhv-transition:    150ms ease;
}

/* ==========================================================================
   Page
   ========================================================================== */

/* Full-bleed blocks are pulled to the viewport edges with calc(50% - 50vw).
   100vw counts the vertical scrollbar but the document's content box does not,
   so the bleed overshoots by exactly the scrollbar width (~15px) and the page
   gains a horizontal scroll. Clipping the body removes it.
   `clip` rather than `hidden`: hidden on an ancestor silently breaks
   position:sticky descendants, which we will want for a sticky header later.
   `hidden` stays as the fallback for browsers without clip. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Visible to screen readers, not to the eye. Used for labels on inputs that show
   only a placeholder, and for the newsletter honeypot.

   Deliberately NOT display:none — that would hide it from assistive technology
   too, and some bots skip display:none fields, which defeats the honeypot. */
.nhv-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Block headings — the site-wide standard
   ==========================================================================

   Every homepage/module block gets the same heading panel unless a block
   deliberately states otherwise. Two selectors, one treatment:

     .nhv-block-head   our own blocks, where the panel wraps an <h2>
     #content > h3     core modules (Featured, Bestsellers, Specials…), which
                       render a bare <h3> as a direct child of #content

   The `>` matters: product names inside our carousels are also h3, but nested,
   so they are not caught. */

.nhv-block-head,
#content > h3 {
  display: block;
  text-align: left;
  margin: 0 0 15px;
  padding: 15px;
  color: var(--nhv-cream);
  background-color: var(--nhv-navy-panel);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 50%);
  border: 1px solid var(--nhv-navy-border);
  border-radius: var(--nhv-radius-sm);
}

/* The type. For a core module the h3 IS the panel, so it appears in both rules. */
.nhv-block-title,
#content > h3 {
  font-family: var(--nhv-font-display);
  font-size: 22px;
  font-weight: var(--nhv-fw-bold);
  line-height: 1.3;
  color: var(--nhv-cream);
  text-transform: none;
}

.nhv-block-title { margin: 0; }

/* Optional second line, if a block wants one. */
.nhv-block-sub {
  margin: 4px 0 0;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-copper-text);
}

/* ==========================================================================
   Breadcrumbs
   ==========================================================================

   The default theme draws these as grey "tabs": a 1px box, and a rotated square
   ::after on every <li> forming an arrow. Off-brand in font, colour and shape, and
   it appears on every category, product, article and information page — so it is
   worth doing properly once here rather than per block.

   CSS-only on purpose. Breadcrumbs are emitted by a dozen core templates we have
   not overridden; styling them centrally keeps every page consistent, where
   overriding two templates would leave the rest looking different. */

.breadcrumb {
  /* 10px of air off the header — flush against it the trail reads as part of the
     nav bar rather than as the start of the page. */
  margin: 10px 0 22px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--nhv-rule-warm);
  border-radius: 0;
  background: transparent;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.breadcrumb > li {
  padding: 0;
  text-shadow: none;
  white-space: nowrap;
}

/* Kill the rotated-square arrow the default theme puts on every item. */
.breadcrumb > li:after { display: none; }

/* One chevron BETWEEN items, never a trailing one. FontAwesome is already loaded
   for the header icons, so this costs nothing extra. */
.breadcrumb > li + li:before {
  content: '\f105';
  font-family: FontAwesome;
  font-size: 12px;
  color: var(--nhv-copper-muted);
  padding: 0 10px;
  letter-spacing: normal;
}

.breadcrumb > li > a {
  color: var(--nhv-copper);
  text-decoration: none;
  transition: color var(--nhv-transition);
}
.breadcrumb > li > a:hover,
.breadcrumb > li > a:focus { color: var(--nhv-navy); text-decoration: none; }
.breadcrumb > li > a:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

/* The last crumb is the current page. Core still renders it as a link, so it is
   styled as text and made unclickable rather than inviting a pointless navigation.
   A real aria-current would need every core template changed. */
.breadcrumb > li:last-child > a {
  color: var(--nhv-navy);
  font-weight: var(--nhv-fw-semi);
  pointer-events: none;
  cursor: default;
}

.breadcrumb i.fa-home { font-size: 13px; }
.breadcrumb > li:first-child > a { color: var(--nhv-copper); }
.breadcrumb > li:first-child > a:hover { color: var(--nhv-navy); }

@media (max-width: 600px) {
  .breadcrumb { font-size: var(--nhv-fs-micro); }
  .breadcrumb > li + li:before { padding: 0 6px; }
  /* Long product and article titles would otherwise force a horizontal scroll. */
  .breadcrumb > li:last-child {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   Core product cards
   Applies to every core grid — Featured, category, search, manufacturer — which
   still use the default theme's .product-thumb markup.
   ========================================================================== */

/* The price has to sit at the same height on every card in a row. Product names
   run to one, two or three lines and descriptions vary too, which was pushing the
   price up and down across a row. Reserving a fixed number of lines for each, and
   clamping to that same number, pins the price for short and long text alike.

   :not(.price) matters — core marks the price up as <p class="price"> inside the
   same .caption, so a bare `p` selector would clamp the price itself. */
.product-thumb .caption h4 {
  min-height: 2.8em;
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-thumb .caption > p:not(.price) {
  min-height: 4.2em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ratings are optional per store setting; when they are on, an unrated product
   would otherwise leave a gap where a rated one has stars. */
.product-thumb .caption .rating { min-height: 1.4em; }

/* A missing image collapses to ~20px instead of 228px, which drags that card's
   price 208px out of line with the rest of the row. Product thumbnails are square
   (theme_nhv_image_product is 228x228), so reserving a 1:1 box means a broken or
   slow image holds its place and the row stays aligned regardless.
   object-fit guards the case where a source is not actually square. */
.product-thumb .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.product-thumb .caption .price { margin-bottom: 0; }

/* ==========================================================================
   Header
   ========================================================================== */

.nhv-header {
  background: var(--nhv-navy);
  color: var(--nhv-cream);
  font-family: var(--nhv-font-body);
}

.nhv-header a { color: var(--nhv-cream); text-decoration: none; transition: color var(--nhv-transition); }
.nhv-header a:hover,
.nhv-header a:focus { color: var(--nhv-copper); text-decoration: none; }

.nhv-container {
  max-width: var(--nhv-container);
  margin: 0 auto;
  padding: 0 var(--nhv-gutter);
}

/* --- Bootstrap's .container, brought into line ------------------------------
   The header uses .nhv-container: fluid, capped at --nhv-container (1400px).
   Every content page uses Bootstrap's .container, which is a FIXED width that
   steps 750 / 970 / 1170px. So from 1200px up the page content sat 230px
   narrower than the header above it, and the two disagreed visibly at the
   shoulders.

   width:auto is the important half. Bootstrap sets an explicit `width` at each
   breakpoint; a max-width alone would be capped by those and change nothing.
   Same specificity as Bootstrap's rules, and this file loads after
   bootstrap.min.css, so it wins at every breakpoint without !important.

   This is deliberately global. Twenty-four templates use .container — product,
   category, checkout, account, information, the lot — and the point is that all
   of them line up with the header rather than only the two that were noticed. */
.container {
  width: auto;
  max-width: var(--nhv-container);
  padding-left: var(--nhv-gutter);
  padding-right: var(--nhv-gutter);
}

/* --- Row 1: utility bar --------------------------------------------------- */

.nhv-utility {
  min-height: var(--nhv-row-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nhv-gutter);
  border-bottom: 1px solid var(--nhv-rule);
}

.nhv-social { display: flex; align-items: center; gap: 12px; }
.nhv-social a { font-size: var(--nhv-fs-nav); line-height: 1; }

.nhv-phone {
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nhv-phone i { margin-right: 6px; color: var(--nhv-copper); }

.nhv-utility-right { display: flex; align-items: center; gap: 14px; font-size: var(--nhv-fs-small); }

/* --- Row 2: logo, quick links, search ------------------------------------- */

.nhv-main {
  min-height: var(--nhv-row-main);
  display: flex;
  align-items: center;
  gap: 24px;
}

.nhv-logo { flex: 0 0 auto; }
.nhv-logo img { max-height: 96px; width: auto; display: block; }
.nhv-logo-text {
  font-family: var(--nhv-font-display);
  font-size: 24px;
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-cream-bright);
  margin: 0;
}

.nhv-quick { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }

.nhv-quick-item { display: flex; align-items: center; gap: 9px; }
.nhv-quick-item i { font-size: 22px; color: var(--nhv-cream); }
.nhv-quick-label { display: flex; flex-direction: column; line-height: 1.25; }
.nhv-quick-title {
  font-size: var(--nhv-fs-base);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-cream);
}
.nhv-quick-sub {
  font-size: var(--nhv-fs-micro);
  color: var(--nhv-copper-text);
}

/* Search: category select + input + submit, flush, square */
.nhv-search { flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0; }

.nhv-search-cat {
  flex: 0 0 auto;
  background: var(--nhv-white);
  color: var(--nhv-ink);
  border: 0;
  border-right: 1px solid #DDD;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-small);
  padding: 0 10px;
  height: 38px;
  max-width: 150px;
  border-radius: var(--nhv-radius);
}

.nhv-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border: 0;
  padding: 0 12px;
  background: var(--nhv-white);
  color: var(--nhv-ink);
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  border-radius: var(--nhv-radius);
}
.nhv-search-input::placeholder { color: var(--nhv-ink-soft); }

.nhv-search-btn {
  flex: 0 0 auto;
  width: 52px;
  height: 38px;
  border: 0;
  background: var(--nhv-copper);
  color: var(--nhv-cream-bright);
  cursor: pointer;
  border-radius: var(--nhv-radius);
  transition: background var(--nhv-transition);
}
.nhv-search-btn:hover { background: var(--nhv-copper-muted); }

/* --- Row 3: category nav + cart ------------------------------------------- */

.nhv-nav {
  min-height: var(--nhv-row-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nhv-gutter);
  border-top: 1px solid var(--nhv-rule);
}

.nhv-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  /* The nav is meant to be a curated single row. If too many categories are
     flagged "Top" it wraps rather than overflowing — ugly, but never broken.
     The fix is curation in admin, not more CSS. */
  flex: 1 1 auto;
  min-width: 0;
}

.nhv-nav-list > li > a {
  display: block;
  padding: 5px 10px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-nav);
  font-weight: var(--nhv-fw-semi);
  text-transform: uppercase;
  white-space: nowrap;
}

.nhv-nav-list > li.nhv-nav-featured > a { color: var(--nhv-gold); }
.nhv-nav-list > li.nhv-nav-featured > a:hover { color: var(--nhv-cream-bright); }

.nhv-nav-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; margin-left: auto; }

.nhv-nav-secondary { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nhv-nav-secondary > li > a {
  display: block;
  padding: 5px 8px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  text-transform: uppercase;
  white-space: nowrap;
}

.nhv-cart { display: flex; align-items: center; gap: 10px; }
.nhv-cart-total { font-size: var(--nhv-fs-small); font-weight: var(--nhv-fw-bold); white-space: nowrap; }
.nhv-cart-btn {
  width: 40px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nhv-copper);
  color: var(--nhv-cream-bright);
  border: 0;
  border-radius: var(--nhv-radius);
  transition: background var(--nhv-transition);
}
.nhv-cart-btn:hover { background: var(--nhv-copper-muted); color: var(--nhv-cream-bright); }

/* Dropdown (cart contents / account) on navy */
.nhv-header .dropdown-menu {
  background: var(--nhv-navy-deep);
  border: 1px solid var(--nhv-rule);
  border-radius: var(--nhv-radius);
}
.nhv-header .dropdown-menu > li > a { color: var(--nhv-cream); padding: 7px 16px; }
.nhv-header .dropdown-menu > li > a:hover { background: var(--nhv-navy-light); color: var(--nhv-cream-bright); }

/* --- Mobile toggle -------------------------------------------------------- */

.nhv-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--nhv-rule);
  color: var(--nhv-cream);
  padding: 6px 12px;
  border-radius: var(--nhv-radius);
  font-size: var(--nhv-fs-nav);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
  .nhv-quick-label { display: none; }
  .nhv-quick { gap: 14px; }
}

@media (max-width: 991px) {
  .nhv-main { flex-wrap: wrap; gap: 14px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .nhv-search { order: 3; flex-basis: 100%; }
  .nhv-quick { margin-left: auto; }
  .nhv-nav-list { display: none; }
  .nhv-menu-toggle { display: inline-block; }
  .nhv-nav { padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 767px) {
  .nhv-utility { flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .nhv-logo img { max-height: 70px; }
  .nhv-nav-secondary { display: none; }
}

/* ==========================================================================
   Header — remaining components
   ========================================================================== */

.nhv-utility-bar,
.nhv-nav-bar { background: var(--nhv-navy); }

/* Currency / language forms sit in the utility bar */
.nhv-utility-right form { margin: 0; }
.nhv-utility-right .btn-link,
.nhv-utility-right .btn-group > .btn {
  color: var(--nhv-cream);
  font-size: var(--nhv-fs-small);
  padding: 2px 6px;
  text-decoration: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.nhv-utility-right .btn-link:hover { color: var(--nhv-copper); }

/* --- Cart -----------------------------------------------------------------
   common.js rewrites the button's innerHTML to:
       <span id="cart-total"><i class="fa fa-shopping-cart"></i> £0.00</span>
   so #cart-total and its <i> are the only reliable hooks. Style those, never
   the transient wrapper markup.                                              */

.nhv-cart { position: relative; }

.nhv-cart-btn {
  width: auto;
  min-height: 32px;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
.nhv-cart-btn:hover { background: transparent; }

#cart-total {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-cream);
  white-space: nowrap;
}
#cart-total i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  background: var(--nhv-copper);
  color: var(--nhv-cream-bright);
  font-size: 15px;
  transition: background var(--nhv-transition);
}
.nhv-cart-btn:hover #cart-total i { background: var(--nhv-copper-muted); }

/* Fill the nav row.

   The copper block sat 32px tall in a 42px row with a 10px gap beneath it. The
   cause was not the heights: core's stylesheet.css sets `#cart { margin-bottom:
   10px }`, and align-self stretches an item's MARGIN box — so the border box
   stayed 32px, pinned to the top, with the margin holding the gap open below.
   Zeroing that margin is the actual fix; the stretches then do what they say.

   Stretch is applied to the cart only, not to .nhv-nav-right's align-items, so
   the secondary links beside it stay vertically centred. Every level needs it:
   each is a flex item of the one above.

   #cart-total and its <i> are the only stable hooks here — common.js rewrites
   the button's innerHTML after every cart action — so the sizing goes on those
   two rather than on any wrapper inside the button. */
.nhv-nav .nhv-nav-right { align-self: stretch; }
.nhv-nav #cart { align-self: stretch; margin: 0; }
.nhv-nav .nhv-cart-btn { align-self: stretch; height: auto; min-height: 0; }
.nhv-nav #cart-total { align-self: stretch; }
.nhv-nav #cart-total i { align-self: stretch; height: auto; }

/* The dropdown panel.

   background-color is the fix for a real bug: these rules set cream text on the
   assumption of a dark panel, but the panel itself was never given one, so the
   menu kept the #EEE ground it inherits and every line measured 1.04:1 —
   invisible. It now takes the same navy panel as the filter and category
   modules, where --nhv-cream measures 14.77:1. */
/* #cart ul.nhv-cart-menu, not .nhv-cart-menu. Core's stylesheet.css carries
   `#cart .dropdown-menu` at (1,1,0), which beat a lone class — which is why the
   existing `.nhv-header .dropdown-menu` navy rule never applied here either, and
   why this panel had been light all along. (1,1,1) settles it without relying on
   file order. */
#cart ul.nhv-cart-menu {
  min-width: 360px;
  right: 0;
  left: auto;
  padding: 12px;
  background-color: var(--nhv-navy-panel);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
  border: 1px solid var(--nhv-navy-border);
  border-radius: var(--nhv-radius-sm);
  box-shadow: 0 14px 34px rgba(2, 19, 27, 0.4);
}

.nhv-cart-table,
.nhv-cart-totals { margin-bottom: 8px; color: var(--nhv-cream); }
.nhv-cart-table > tbody > tr > td,
.nhv-cart-totals > tbody > tr > td {
  border-top-color: var(--nhv-navy-border);
  vertical-align: middle;
  padding: 6px;
  font-size: var(--nhv-fs-small);
}
.nhv-cart-table a { color: var(--nhv-cream); }
.nhv-cart-table a:hover,
.nhv-cart-table a:focus { color: var(--nhv-copper-text); }
.nhv-cart-table a:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

/* Option and recurring lines sit under the name; taupe separates them from it
   without dropping below AA (9.85:1 on this ground). */
.nhv-cart-table small { color: var(--nhv-taupe); }

.nhv-cart-table .img-thumbnail {
  width: 48px;
  padding: 2px;
  background: var(--nhv-cream-bright);
  border-color: var(--nhv-navy-border);
  border-radius: var(--nhv-radius-sm);
}

/* Bootstrap's btn-danger is a saturated red that fights the palette. */
.nhv-cart-table .btn-danger {
  color: var(--nhv-cream);
  background: transparent;
  border: 1px solid var(--nhv-navy-border);
  border-radius: var(--nhv-radius-sm);
}
.nhv-cart-table .btn-danger:hover,
.nhv-cart-table .btn-danger:focus {
  color: var(--nhv-cream-bright);
  background: var(--nhv-sale-red);
  border-color: var(--nhv-sale-red);
}

.nhv-cart-totals > tbody > tr > td { color: var(--nhv-cream); }
.nhv-cart-totals strong { color: var(--nhv-taupe); font-weight: var(--nhv-fw-normal); }

/* The two actions were plain links in a paragraph, which gave the most important
   step in the cart no more weight than the product names above it. */
.nhv-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding-top: 10px;
  text-align: center;
}
.nhv-cart-actions a {
  display: block;
  padding: 9px 10px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-micro);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--nhv-radius-sm);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nhv-cart-actions a:first-child {
  color: var(--nhv-cream);
  background: transparent;
  border: 1px solid var(--nhv-cream);
}
.nhv-cart-actions a:first-child:hover,
.nhv-cart-actions a:first-child:focus { color: var(--nhv-navy); background: var(--nhv-cream); }
.nhv-cart-actions a:last-child {
  color: var(--nhv-navy);
  background: var(--nhv-gold);
  border: 1px solid var(--nhv-gold);
}
.nhv-cart-actions a:last-child:hover,
.nhv-cart-actions a:last-child:focus { color: var(--nhv-navy); background: var(--nhv-cream-bright); border-color: var(--nhv-cream-bright); }
.nhv-cart-actions a:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }
.nhv-cart-actions strong { font-weight: inherit; }

.nhv-cart-empty { color: var(--nhv-cream); margin: 12px 0; }

@media (max-width: 479px) {
  .nhv-cart-menu { min-width: 280px; }
  .nhv-cart-actions { grid-template-columns: 1fr; }
}

/* --- Category dropdowns ---------------------------------------------------- */

.nhv-nav-list > li { position: relative; }

.nhv-nav-sub {
  min-width: 220px;
  padding: 6px 0;
  margin: 0;
}
.nhv-nav-sub > li > a {
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-small);
  padding: 6px 16px;
  display: block;
  white-space: nowrap;
}
.nhv-nav-sub-all { border-top: 1px solid var(--nhv-rule); margin-top: 4px; }
.nhv-nav-sub-all > a {
  font-family: var(--nhv-font-display);
  font-weight: var(--nhv-fw-semi);
  text-transform: uppercase;
  font-size: var(--nhv-fs-micro);
  color: var(--nhv-copper);
}

/* The search scope is not wired yet — make that visible rather than pretend. */
.nhv-search-cat[disabled] { opacity: 1; cursor: default; color: var(--nhv-ink-soft); }