/* =====================================================================
   YAXIN Industrial Supplies — base.css
   Shared foundation: design tokens, reset, header, navigation, footer
   and global responsive rules used by every page.
   Page-specific rules live in pages.css (loaded after this file).
   ===================================================================== */

/* ===================== Design tokens ===================== */
:root {
  --red: #e2211c;
  --red-dark: #b81a16;
  --red-light: #fdecec;
  --dark: #1f2328;
  --gray: #6a737c;
  --line: #e9ecef;
  --bg: #f6f7f8;
  --white: #ffffff;
  --star: #f5a623;
}

/* ===================== Reset & base ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: hidden is needed, because the cart popup hangs 12px past the right
   edge of its anchor and would otherwise give the page a horizontal scrollbar.

   It has to be on body only — never on html. Setting it on html looks harmless
   (a horizontal clip should not affect a vertically-sticky box) but it silently
   destroys the whole masthead: the viewport propagates its overflow from html,
   and while the viewport takes over the scrolling, html is left computing a
   non-visible overflow of its own. That makes html a scroll container, and
   position: sticky pins to the nearest scroll container. Since html itself never
   scrolls, the header resolved to static and slid away with the page — measured
   headerTop === -scrollY at every depth (-200/-600/-1500 on 1920/1600/1280).
   body is the safe place: a clip there is on the block-flow box, not on the
   scrollport, so sticky keeps working. */
body {
  max-width: 100%; overflow-x: hidden;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--dark);
  background: var(--bg);
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, svg { display: block; }
button { font-family: inherit; }
.container { width: 100%; margin: 0 auto; padding: 0 clamp(16px, 2.5vw, 40px); }

/* ===================== Header ===================== */
/* Both the header and the nav are pinned to the top, so together they form one
   fixed masthead. The header holds the top slot; the nav sticks immediately
   below it via --header-h.

   --header-h is published here (and only here) because the header is the element
   that actually sizes itself. Every other consumer — the nav's sticky offset, the
   side-nav's sticky top, scroll-margin targets — references this one token, so
   the masthead stays in sync at every viewport width instead of drifting when the
   clamp() resolves differently.

/* Masthead layering. Everything here is one arrangement, so read it as a whole:
   the header pins the top slot, the nav pins under it, and the cart popup has to
   clear the nav even though the popup lives up in the header.

   The header takes z-index 110 because without one it is not merely "unlayered",
   it is *underneath the page*: position: sticky alone creates no stacking
   context, so the header paints in the positioned-descendants layer at z auto,
   and any later sibling that is positioned paints over it. Measured on all
   three pages — .slide-inner, .prod-img and .main-img (none of which carry any
   z-index) covered 6/48 and even 0/48 of the header's sample points once the
   page was scrolled. That is why this value is not optional.

   110 sits above the nav's 100 and above every content surface. It is a thin
   margin over the nav on purpose: the nav must stay below the header, since the
   header owns the top slot, and 110 > 100 also keeps the popup band correct
   (see the next paragraph).

   The cart popup cannot simply raise itself from in here. While the header is a
   stacking context, the popup's own z-index is compared against its siblings
   *inside* the header, never against the nav — measured 6/6 blocked in the band
   where popup and nav meet, i.e. the original bug. So .cart-wrap claims its own
   stacking context at 180. That wrapper is a sibling of the nav rather than an
   ancestor of it, so 180 really does outrank the nav's 100 from there. The
   header's 110 is the last tie-break: both the wrap and the nav are positioned
   with a z-index, and 110 > 100 puts the whole header subtree above the nav root
   regardless of DOM order. */
:root { --header-h: clamp(64px, 6.5vw, 76px); }
.header {
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 110;
}
.header .container {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(16px, 3vw, 32px); height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: 10px; }
/* Badge sits AFTER the wordmark (see the HTML order): text left, mark right.
   Measured off the reference mock: 42px square, ~10px corner radius, and the
   letter inside is large — ~60% of the badge height (cap ≈ 25px), so 30px type
   with line-height locked to 1 keeps the glyph optically centred instead of
   drifting on the default 1.5 line box. */
.logo-mark {
  width: 42px; height: 42px; background: var(--red); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 30px; line-height: 1;
}
.logo-text { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; }
.logo-text span { color: var(--red); }

.search-box {
  display: flex; width: 100%; max-width: 720px; justify-self: center;
  background: #f5f5f6; border: none; border-radius: 8px; overflow: hidden;
}
.search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 12px 18px; font-size: 16px; color: var(--dark);
}
.search-box input::placeholder { color: #9aa0a6; }
.search-box button {
  background: transparent; color: #75797e; border: none; padding: 0 20px;
  cursor: pointer; line-height: 0; transition: color .2s, background .2s;
}
.search-box button:hover { background: #ff4470; color: #fff; }

.header-actions { display: flex; align-items: center; gap: 24px; justify-self: end; }
.header-action { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; position: relative; }
/* 会员昵称入口（MY ACCOUNT 位）：过长时截断，不撑破头部布局 */
.header-action .acct-name {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  .header-action .acct-name { max-width: 96px; }
}
.header-action .badge {
  position: absolute; top: -8px; right: -12px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
/* Hamburger that lives inside the header actions (mobile only) */
.nav-toggle2 { display: none; background: none; border: none; color: #4a5057; padding: 6px; cursor: pointer; line-height: 0; }

/* ===================== Cart popup ===================== */
/* Anchored to the Cart action in the header. Closed by default; .open shows it.
   The wrapper is shared markup on all three pages and only needs position
   context, so most styling lives on .cart-panel itself.

   Layering: the panel has to clear the sticky nav, which it overlaps, and it
   does that via the wrapper. The wrapper carries the stacking context (180) and
   the panel rides inside it; putting the value on the panel instead would work
   only while the panel has no positioned ancestor with a z-index, and the
   header is exactly that — with the header at z-index 110 the panel's own 180 is
   caged inside it and the nav's 100 wins the overlap, measured at 6/6 blocked
   points in the band where popup and nav meet. The wrapper is a sibling of the
   nav, not an ancestor of it, so its 180 genuinely outranks the nav's 100.

   180 beats the header (110), the nav (100) and every content surface. It stays
   below the nav's own mega-menu (200) and the mobile drawer (300/260/255). The
   mega and the panel do not overlap at any width tested (the mega is
   left-aligned to a Column-1 nav item, the panel hangs off the far-right Cart
   action), so that ordering is a tie-break rather than a live conflict; the
   drawer staying on top is correct, since an open drawer is the more modal
   surface, and 180 < 290 also keeps the drawer's mask over the panel. */
.cart-wrap { position: relative; z-index: 180; display: flex; align-items: center; }
.cart-panel {
  position: absolute; top: calc(100% + 10px); right: -12px;
  width: 340px; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
  padding: 16px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cart-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Phones: the 340px panel would run past the left edge of a 375px screen.
   left/right are measured from the viewport here (position: fixed), because
   .cart-wrap is only as wide as the Cart button and an absolute panel would
   inherit that sliver as its containing block.
   top clears the whole fixed masthead — header plus nav — since at this width the
   nav is a separate sticky row under the header, both permanently on screen. */
@media (max-width: 480px) {
  .cart-panel {
    position: fixed; width: auto;
    left: 12px; right: 12px;
    top: calc(var(--header-h) + 46px + 8px);
  }
  .cart-panel::before { display: none; }
}
/* Small arrow pointing at the Cart label */
.cart-panel::before {
  content: ''; position: absolute; top: -6px; right: 22px;
  width: 11px; height: 11px; background: var(--white);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.cart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; font-weight: 600; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cart-head .cart-count { font-size: 12px; font-weight: 400; color: var(--gray); }
/* The list shows five rows before it scrolls.
   Row height is measured, not assumed: the .cart-name is a two-line clamp at
   13px/1.35 (= ~36px) sitting above a 24px stepper row, so the meta column, not
   the 56px thumb, is the tall child. Measured row is 92px including the 12px top
   and bottom padding. Deriving the cap from a --cart-row token keeps it honest if
   the type scale or the thumb ever changes; 92px * 5 = 460px. */
.cart-list {
  --cart-row: 92px;
  max-height: calc(var(--cart-row) * 5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A thin, unobtrusive scrollbar — the default Windows bar is far too heavy
   against a 340px panel. */
.cart-list::-webkit-scrollbar { width: 6px; }
.cart-list::-webkit-scrollbar-track { background: transparent; }
.cart-list::-webkit-scrollbar-thumb {
  background: #d9dde1; border-radius: 3px;
}
.cart-list::-webkit-scrollbar-thumb:hover { background: #c2c8ce; }
/* Firefox */
.cart-list { scrollbar-width: thin; scrollbar-color: #d9dde1 transparent; }
.cart-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.cart-item:last-child { border-bottom: none; }
.cart-thumb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px;
  background: linear-gradient(160deg, #f8f9fa, #eef1f3);
  display: flex; align-items: center; justify-content: center; padding: 9px;
}
.cart-thumb svg { width: 100%; height: 100%; }
.cart-meta { flex: 1; min-width: 0; }
.cart-name {
  font-size: 13px; line-height: 1.35; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Quantity stepper: [-] [n] [+] . The number in the middle is a real input so it
   can be typed into, which means the buttons must not steal its focus ring. */
.qty-step {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--white);
}
.qty-btn {
  width: 22px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #6b7178; line-height: 0;
  transition: background .15s, color .15s;
}
.qty-btn:hover { background: var(--red-light); color: var(--red); }
.qty-btn:active { background: #f6c9c7; }
.qty-btn svg { width: 11px; height: 11px; }
/* Disabled only at the floor (qty 1) and ceiling; the button stays visible so
   the stepper keeps its symmetry rather than reflowing. */
.qty-btn[disabled] { color: #cfd4d9; cursor: not-allowed; }
.qty-btn[disabled]:hover { background: none; color: #cfd4d9; }
.qty-input {
  width: 30px; height: 24px; border: none; padding: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text); background: none; outline: none;
  -moz-appearance: textfield;
}
/* Hide the native number spinners — the +/- buttons replace them. */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { background: var(--red-light); }
.cart-price { color: var(--red); font-size: 14px; font-weight: 600; white-space: nowrap; }
.cart-del {
  background: none; border: none; color: #b8bcc0; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px; transition: color .15s;
}
.cart-del:hover { color: var(--red); }
.cart-empty { padding: 28px 0; text-align: center; font-size: 14px; color: var(--gray); }
.cart-foot { padding-top: 14px; border-top: 1px solid var(--line); }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; margin-bottom: 12px;
}
.cart-total b { font-size: 17px; font-weight: 600; color: var(--red); }
.cart-checkout {
  display: block; width: 100%; text-align: center;
  background: var(--red); color: #fff; border: none; border-radius: 6px;
  padding: 11px 0; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.cart-checkout:hover { background: var(--red-dark); }

/* ===================== Nav (minimal, Xiaomi-style) ===================== */
/* Sits directly under the sticky header to complete the fixed masthead, so its
   sticky offset is the header's own height rather than 0. Both stay pinned while
   the page scrolls; the nav's top edge never moves relative to the header.

   z-index is REQUIRED here, and it is load-bearing: it makes the nav a stacking
   context, which is what lifts the Category mega-menu (z-index 200, a nav
   descendant) above the sibling sections further down the page (.carousel,
   .side-nav, .hero). Removing it was measured to drop every mega-menu hit test
   to 0/20 on all three pages — the menu still renders but the page behind it
   swallows the pointer. Do not strip this.

   100 puts the nav above all page content but below the header (110), which is
   the right order: the header owns the top slot and the nav tucks under it. The
   cart popup is not inside the nav and is not affected by this value; it clears
   the nav from .cart-wrap (180) instead. */
.nav {
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--header-h); z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.nav .container { display: flex; align-items: center; }
.nav-links { display: flex; }
.nav-toggle {
  display: none; background: none; border: none; color: #4a5057;
  padding: 10px 6px; cursor: pointer; line-height: 0;
}
.nav a {
  color: #4a5057; font-size: 15px; font-weight: 500; padding: 14px 22px;
  display: block; transition: color .2s; position: relative;
}
.nav a:hover, .nav a.active { color: var(--red); }

/* Category mega dropdown */
.nav-item { position: relative; }
.nav-item > a {
  position: relative; display: block; cursor: pointer; text-align: center;
  background: var(--red-light); color: var(--red) !important; font-weight: 600 !important;
  height: 100%; width: 300px; padding: 14px 0; font-size: 17px !important;
  box-sizing: border-box;
}
.nav-item > a:hover { background: #fbdcdb; }
.nav-item .cat-menu-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.nav-item .caret {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  transition: transform .2s;
}
.nav-item:hover .caret { transform: translateY(-50%) rotate(180deg); }
.nav-item:hover > a { background: #fbdcdb; }

.mega {
  position: absolute; top: 100%; left: 0; z-index: 200; width: 100%;
  display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--red);
  border-radius: 0 0 10px 10px; box-shadow: 0 16px 40px rgba(0,0,0,.13);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Level 2 — the five big categories. Each one owns a level 3 flyout panel
   (.mega-sub) that slides in to its right on hover or keyboard focus. */
.mega-item { position: relative; }
.mega .mega-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  font-size: 14px; font-weight: 400; color: #4a5057; position: static;
  white-space: nowrap; transition: color .15s, background .15s;
}
.mega .mega-link::after { display: none; }
.mega .mega-link:hover { color: var(--red); background: var(--red-light); }
/* The label takes the slack so the chevron always sits flush right, and long
   names ellipsise instead of pushing the chevron out of the 300px column. */
.mega-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mega-arrow {
  flex-shrink: 0; width: 14px; height: 14px; color: #c2c8ce;
  transition: color .15s, transform .15s;
}
.mega-item:hover .mega-arrow { color: var(--red); transform: translateX(2px); }
.mega-ico {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
  background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.mega-ico svg { width: 16px; height: 16px; }
.mega .mega-link:hover .mega-ico { background: var(--red); color: #fff; }

/* Level 3 — product-type flyout. left:100% keeps it flush with the category
   row so the pointer never crosses a gap; the -11px top lift lines its red
   top border up with the panel's own. */
.mega-sub {
  position: absolute; left: 100%; top: -11px; z-index: 210;
  display: flex; flex-direction: column; min-width: 190px; padding: 8px 0;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--red);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.13);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mega-item:hover > .mega-sub,
.mega-item:focus-within > .mega-sub {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.mega-sub a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 400;
  color: #4a5057; white-space: nowrap; position: static;
  transition: color .15s, background .15s;
}
.mega-sub a::after { display: none; }
.mega-sub a:hover { color: var(--red); background: var(--red-light); }

/* Narrow desktop. The bar switches on at 769px (the drawer owns everything
   below), but with five top-level items the row needs ~908px to sit
   comfortably — adding NEWS pushed it past the viewport in the 769–840px band,
   where the page scrolled sideways by up to 37px. Pulling the gutters in from
   22px to 15px frees 70px and keeps all five items on one line with room to
   spare; the Category trigger keeps its 300px so the dropdown is unchanged. */
@media (max-width: 900px) {
  .nav a { padding-left: 15px; padding-right: 15px; }
}

/* Mobile drawer (left side, 1/3 of page). It now carries the five top-level
   links only — HOME / ABOUT US / OUR SERVICES / NEWS / CONTACT US. The Category
   tree is no longer nested in here: on phones it renders under the masthead as
   .cat-mobile (see below), which keeps a three-level menu out of a 160px
   column. */
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 33.333vw; min-width: 160px;
  background: #fff; z-index: 300; overflow-y: auto;
  transform: translateX(-105%); transition: transform .28s ease;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  display: block; padding: 15px 20px; font-size: 15px; color: #4a5057;
  border-bottom: 1px solid var(--line); transition: color .2s, background .2s;
}
.nav-drawer a:hover, .nav-drawer a.active { color: var(--red); background: var(--red-light); }
/* ===================== Phone Category tree ===================== */
/* The Category menu on phones. It used to live inside the hamburger drawer,
   three levels deep in a 160px column; it now sits in normal flow directly
   under the masthead — where the search box is the header's last row.
   Placement is deliberately *outside* the header: the header is sticky (top: 0)
   and an accordion up to ~460px tall inside it would swallow the viewport and
   invalidate --header-h, the token the cart popup and the sticky nav measure
   themselves against. Sitting under it, the tree simply scrolls away.

   Markup is built by initMobileCategory() from the desktop mega, so the five
   groups and their product types can never drift from the header menu. The
   tree is closed on load — only the red "Category" bar shows — and the bar is
   its toggle: one tap reveals the five groups (all of them collapsed), another
   tap closes the panel. Tapping a group row discloses its product types, and
   only one stays open at a time — the same single-open rule the products-page
   sidebar uses. Hidden above 768px, where the nav bar already carries this
   tree on hover. */
.cat-mobile { display: none; }
.catm-title {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 0; font-family: inherit; text-align: center; cursor: pointer;
  padding: 13px 44px; background: var(--red-light); color: var(--red);
  font-size: 15.5px; font-weight: 600; border-bottom: 1px solid #f6d3d1;
}
/* The label is centred; the two glyphs are pinned to the edges instead of
   taking flex space, so they cannot push it off-centre (they differ in width). */
.catm-title svg { flex-shrink: 0; position: absolute; top: 50%; transform: translateY(-50%); }
.catm-title > svg:first-child { left: 20px; }
.catm-title .catm-caret { right: 20px; margin-left: 0; transition: transform .2s; }
.cat-mobile.open .catm-title .catm-caret { transform: translateY(-50%) rotate(180deg); }
/* The five groups live behind this body: closed until the title bar is tapped,
   which is the only thing on the strip a visitor sees at rest. */
.catm-body { display: none; }
.cat-mobile.open .catm-body { display: block; }
.catm-item { border-bottom: 1px solid var(--line); }
.catm-item:last-child { border-bottom: none; }
.catm-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; font-size: 14px; color: #444b52; background: var(--white);
}
.catm-link .catm-ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
  background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.catm-link .catm-ico svg { width: 15px; height: 15px; }
.catm-link .catm-arrow {
  margin-left: auto; color: #b6bcc2; line-height: 0;
  transition: transform .2s, color .2s;
}
.catm-item.open > .catm-link { color: var(--red); font-weight: 600; }
.catm-item.open > .catm-link .catm-ico { background: var(--red); color: #fff; }
.catm-item.open > .catm-link .catm-arrow { transform: rotate(180deg); }
/* display:none rather than a max-height transition: the tallest group (Home
   Fans) is ten rows, and a transition ceiling that has to be guessed is exactly
   how the sidebar's list got clipped before it was raised to 520px. */
.catm-sub { display: none; }
.catm-item.open > .catm-sub { display: block; }
.catm-sub a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 20px 10px 30px; font-size: 13px;
  color: #6a737c; background: #fafbfc; border-top: 1px solid #f1f3f5;
  line-height: 1.4;
}
.catm-sub a:hover { color: var(--red); background: var(--red-light); }
/* Level-3 rows — the product types under an open group — each keep a small
   right chevron in front of the label, on both the desktop flyout and the phone
   tree. currentColor keeps it in step with the hover colour; dimmed at rest, it
   reads as a marker rather than a third control in a row that is already a
   link. Drawn with borders, so no extra markup and nothing to keep in sync. */
.mega-sub a::before,
.catm-sub a::before {
  content: ''; flex-shrink: 0; width: 5px; height: 5px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .45; transition: opacity .15s;
}
.mega-sub a:hover::before,
.catm-sub a:hover::before { opacity: 1; }
/* The old title bar used to be the link through to the shop; the toggle took
   that job over, so the panel carries the through-link itself. */
.catm-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; font-size: 13.5px; font-weight: 600;
  color: var(--red); background: var(--white); border-top: 1px solid var(--line);
}
.catm-all:hover { background: var(--red-light); }

@media (max-width: 768px) {
  .cat-mobile { display: block; background: var(--white); border-bottom: 1px solid var(--line); }
}
.nav-mask {
  /* inset:0 sizes a fixed layer to the ICB, which can be wider than a narrow
     phone's layout viewport; the mask then pushes the document wide and mobile
     browsers answer by shrinking the whole page. Pin it to 100vw/100vh and
     clip the overflow instead, so it can never widen the page. */
  position: fixed; left: 0; top: 0;
  width: 100vw; height: 100vh; max-width: 100%; overflow: hidden;
  background: rgba(0,0,0,.45); z-index: 290;
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.nav-mask.show { opacity: 1; pointer-events: auto; }

/* ===================== Breadcrumbs ===================== */
.breadcrumbs { font-size: 13px; color: var(--gray); padding: 14px 0; }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs .sep { margin: 0 8px; color: #c3c9cf; }

/* ===================== Footer ===================== */
.footer { background: var(--dark); color: #aab2ba; }
.footer-main {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 40px);
}
.footer h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.footer p, .footer li { font-size: 14px; margin-bottom: 10px; }
.footer li a:hover { color: #fff; }
.footer .logo-text { color: #fff; font-size: 22px; }
/* Social row under the blurb: filled brand glyphs in a circle, so it reads as a
   set of marks rather than one more column of footer links. */
.footer-social {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 18px;
}
.footer-social-label { font-size: 14px; }
.footer-social-links { display: flex; align-items: center; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .09); color: #fff;
  transition: background .2s, transform .2s;
}
.footer-social a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; display: block; }
.footer-bottom {
  border-top: 1px solid #33383e; padding: 18px 0; font-size: 13px;
  display: flex; justify-content: space-between;
}

/* ===================== Price ===================== */
/* One convention for every price on the site: the currency sign and the cents
   are smaller, never bold and never italic; the integer part is semibold. The
   figure inherits each block's own font-size, and the sign is written as <em>
   (it used to be <span class="cur">) with the decimals in a <b>, so their .62em
   scales with that font-size. Lives here (not in a page file) because
   index/products/detail all show prices. */
/* em is italic by default and the sign must stay upright. Every <em> on the
   site is a currency sign — no other markup uses the tag — so normalise it
   once here instead of repeating font-style in each price rule below. */
em { font-style: normal; }

.price em,
.prod-price em,
.price-now em,
.price-was em,
.rel-price em,
.mini-price em,
.cart-price em,
.cart-total b em { font-size: .62em; font-weight: 400; }

/* The cents <b> gets the same treatment as the sign: <b> is bold by default,
   so the weight has to be stated rather than inherited. Listed per container
   instead of as a lone `b` rule because <b> is used for real emphasis elsewhere
   (.acct-stat b.money, .od-sum b, the about-page stats) — those must stay bold.
   `> b` is needed where the price itself sits inside a bold <b>, so the rule
   out-specifies that container's own font-size/weight. */
.price b,
.prod-price b,
.price-now b,
.price-was b,
.rel-price b,
.mini-price b,
.cart-price b,
.cart-total b > b { font-size: .62em; font-weight: 400; }

.price,
.prod-price,
.price-now,
.price-was,
.rel-price,
.mini-price,
.cart-price,
.cart-total b { font-weight: 600; }

/* Sold-count caption, sitting opposite a price on the card grids
   (homepage .price row and list-page .prod-price row). */
.sold { color: var(--gray); font-size: 13px; font-weight: 400; white-space: nowrap; }

/* Card media: products that ship a photo fill the tile edge to edge;
   the rest keep the inline SVG icon. Shared by both card grids. */
.prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================== Shared responsive ===================== */
@media (max-width: 768px) {
  /* Header collapses to two rows: logo + actions, then full-width search.
     height: auto below means the header no longer measures --header-h, so the
     token is republished to a value that actually covers the two-row box. It is
     a magic number, but a safe one: the cart popup is its only remaining
     consumer at this width, and it positions from the viewport top. Anything
     under-measured would put the popup under the header's second row. */
  :root { --header-h: 100px; }
  .header .container {
    grid-template-columns: auto 1fr; grid-template-areas: "logo actions" "search search";
    height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px;
  }
  .header .logo { grid-area: logo; }
  .header .search-box { grid-area: search; max-width: none; }
  .header-actions { grid-area: actions; justify-self: end; gap: 18px; }
  .nav-toggle2 { display: flex; }
  /* Masthead is only one bar here. The desktop nav bar is replaced by the
     drawer, and display: none takes it out of layout entirely — which also
     means the sticky masthead is just the header, height --header-h.
     position: static is redundant next to display: none, but it is kept as a
     guard: a display:none element has a zeroed getBoundingClientRect(), and if
     this rule ever stops applying while the sticky one does not, the nav would
     reappear on top of the header instead of under it. Static keeps the two
     stacked in normal flow in that case. */
  .nav { display: none; position: static; top: auto; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 400px) {
  .header-action span { display: none; }
  .container { padding: 0 14px; }
}