/* ============================================================
   everythingreps — Global theme system (WordPress / GeneratePress)
   Layout · type · buttons · header · mega · mobile drawer · footer
   Recreated from the everythingreps prototype design system.
   ============================================================ */

/* ---- GeneratePress base resets so our system shows through ---- */
body { background: hsl(var(--paper)); color: hsl(var(--ink)); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.generate-back-to-top, .nav-above-header, .main-navigation:not(.er-keep) { /* default GP nav hidden — we render our own */ }
.site-content { padding-top: 0; }
/* push content below the fixed topbar + header */
.site { padding-top: calc(var(--topbar-h) + var(--header-h)); }
/* Homepage: hero slides up UNDER the transparent header (only the announcement bar offsets). */
body.home .site { padding-top: var(--topbar-h); }

/* WordPress admin bar (logged-in): it's a fixed 32px bar (46px ≤782px) that
   our fixed topbar/header don't account for. WP already adds html{margin-top}
   which offsets the in-flow .site content, so ONLY the fixed bars need nudging. */
body.admin-bar .topbar { top: 32px; }
body.admin-bar .hdr { top: calc(var(--topbar-h) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
  body.admin-bar .hdr { top: calc(var(--topbar-h) + 46px); }
  body.admin-bar .appbar[data-er-appbar] { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* WP would switch the admin bar to position:absolute here, which let it slide
     UNDER our fixed app bar (header hidden) and left a ~46px dead band from the
     html{margin-top:46px} that the top:0 app bar didn't account for. Keep the
     admin bar pinned and keep the 46px offset so the two bars stack cleanly. */
  body.admin-bar #wpadminbar { position: fixed !important; }
  body.admin-bar .topbar { top: 46px; }
  body.admin-bar .hdr { top: calc(var(--topbar-h) + 46px); }
  body.admin-bar .appbar[data-er-appbar] { top: 46px; }
}
a { color: hsl(var(--ink)); text-decoration: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); color: hsl(var(--ink)); }
img { max-width: 100%; height: auto; }

/* ---- layout helpers ---- */
.wrap, .er-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; box-sizing: border-box; }
.section { padding: clamp(40px, 5vw, 72px) 0; }
.section--tight { padding: clamp(28px, 4vw, 52px) 0; }
.eyebrow { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0 0 14px; }
.sec-head { max-width: 640px; margin: 0 0 clamp(28px, 4vw, 44px); }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.0; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.sec-head p { color: hsl(var(--muted-foreground)); font-size: 1.02rem; line-height: 1.6; margin: 14px 0 0; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--duration-base) var(--ease-out-quart), border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-instant); font-family: var(--font-sans); line-height: 1; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: scale(0.985); }
.btn--solid { background: hsl(var(--ink)); color: #fff; box-shadow: var(--shadow-sm); }
.btn--solid:hover { background: hsl(var(--ink) / 0.88); box-shadow: var(--shadow-md); color: #fff; }
.btn--outline { background: transparent; color: hsl(var(--ink)); border-color: hsl(var(--ink) / 0.22); }
.btn--outline:hover { border-color: hsl(var(--ink) / 0.45); background: hsl(var(--ink) / 0.03); }
.btn--light { background: #fff; color: hsl(var(--cta-dark)); }
.btn--light:hover { background: hsl(0 0% 100% / 0.9); box-shadow: var(--shadow-md); }
.btn--dark, .btn--dark:hover, .btn--dark:focus, .btn--dark:visited { background: #000; color: #fff; text-decoration: none; }
.btn--dark:hover { background: hsl(0 0% 12%); box-shadow: var(--shadow-md); }
.btn--block { width: 100%; }
.btn--sm { height: 42px; padding: 0 16px; font-size: 0.86rem; }

/* ====== TOP BAR ====== */
/* Hide GeneratePress's own top-bar widget area (we render our own .topbar). */
.top-bar { display: none !important; }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: var(--topbar-h); display: flex; align-items: center; justify-content: center; gap: 9px; background: #000; color: #fff; border-bottom: 1px solid hsl(0 0% 100% / 0.08); }
.topbar span { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.topbar svg { width: 15px; height: 15px; flex: none; }

/* ====== HEADER ====== */
.hdr { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; }
.hdr .hdr__logo { height: 42px !important; width: auto !important; max-width: 200px; display: block; filter: brightness(0); }
.mnav__head img { height: 26px !important; width: auto !important; max-width: 130px; }
.hdr__inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
.hdr__brand { justify-self: center; grid-column: 2; color: inherit; text-decoration: none; flex: none; }
.hdr__nav { display: flex; gap: 22px; margin: 0; justify-self: start; grid-column: 1; align-items: center; }
.hdr__nav a { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 500; text-decoration: none; color: inherit; opacity: 0.72; transition: opacity var(--duration-fast) var(--ease-out-quart); position: relative; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out-quart); }
.hdr__nav a:hover { opacity: 1; }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__nav a .chev { width: 13px; height: 13px; margin-left: 3px; opacity: 0.6; vertical-align: middle; transition: transform var(--duration-fast) var(--ease-out-quart); }
.hdr__nav a[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 22px; min-width: 0; }
.hdr__nav--right { gap: 22px; align-items: center; }
.hdr__ext { opacity: 1 !important; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border: 1px solid currentColor; border-radius: var(--radius-full); font-weight: 600; letter-spacing: 0.1em; line-height: 1; font-size: 0.78rem; text-transform: uppercase; transition: background var(--duration-base) var(--ease-out-quart), color var(--duration-base), border-color var(--duration-base); }
.hdr__ext::after { content: none !important; }
.hdr__ext .hdr__ext-arrow { width: 12px; height: 12px; flex: none; }
.hdr--solid .hdr__ext { color: hsl(var(--ink)); border-color: hsl(var(--ink) / 0.28); }
.hdr--solid .hdr__ext:hover { background: hsl(var(--ink)); color: #fff; border-color: hsl(var(--ink)); }
.hdr__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: none; background: transparent; color: inherit; position: relative; cursor: pointer; transition: background var(--duration-fast) var(--ease-out-quart); }
.icon-btn:hover { background: hsl(var(--ink)); }
.icon-btn:hover svg { color: hsl(var(--paper)); }
.icon-btn svg { width: 20px; height: 20px; transition: color var(--duration-fast); }
.icon-btn.is-current { background: hsl(var(--ink)); }
.icon-btn.is-current svg { color: #fff; }
.icon-btn--solidhover:hover { background: hsl(var(--ink)); }
.cart-count { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: hsl(var(--ink)); color: #fff; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; border: 2px solid hsl(var(--surface)); }
.cart-count[hidden] { display: none; }
.hamburger { display: none; }
.hdr--solid { background: hsl(var(--surface) / 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: hsl(var(--line) / 0.7); box-shadow: var(--shadow-sm); color: hsl(var(--ink)); }

/* ---- transparent header over the dark hero (homepage), solid on scroll ---- */
.hdr--over { background: transparent; color: #fff; border-bottom-color: transparent; }
.hdr--over .hdr__logo { filter: brightness(0) invert(1); }
.hdr--over .cart-count { border-color: hsl(var(--cta-dark)); background: #fff; color: hsl(var(--cta-dark)); }
.hdr--over .icon-btn:hover { background: #fff; }
.hdr--over .icon-btn:hover svg { color: hsl(var(--cta-dark)); }
.hdr--over .hdr__ext { color: #fff; border-color: hsl(0 0% 100% / 0.55); }
.hdr--over .hdr__ext:hover { background: #fff; color: hsl(var(--ink)); border-color: #fff; }
.hdr--over .hdr__nav a::after { background: #fff; }

/* ---- mega menu ---- */
.mega { position: absolute; top: 100%; left: 0; right: 0; background: hsl(var(--surface)); border-top: 1px solid hsl(var(--line) / 0.55); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity var(--duration-base) var(--ease-out-quart), transform var(--duration-slow) var(--ease-out-quint); }
.mega.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mega[hidden] { display: block; } /* JS toggles .is-open; keep in flow for animation */
.mega__inner { display: flex; flex-wrap: wrap; gap: 30px; padding: 32px 0 22px; align-items: flex-start; }
.mega__col { flex: 1 1 0; min-width: 0; }
.mega__col h5 { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0 0 12px; }
.mega__col a { display: block; padding: 6px 0; color: hsl(var(--ink)); text-decoration: none; font-size: 0.92rem; opacity: 0.82; transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-out-quart); }
.mega__col a:hover { opacity: 1; transform: translateX(3px); }
.mega__all { margin-top: 9px; display: inline-flex !important; align-items: center; gap: 5px; font-weight: 600; font-size: 0.82rem !important; opacity: 1 !important; white-space: nowrap; color: hsl(var(--ink)); }
.mega__all svg { width: 13px; height: 13px; }
.mega__feat { position: relative; display: block; flex: 0 0 clamp(240px, 24%, 320px); padding: 16px; border-radius: var(--radius-lg); background: hsl(var(--section-alt)); border: 1px solid hsl(var(--line) / 0.6); text-decoration: none; color: hsl(var(--ink)); transition: border-color var(--duration-base), box-shadow var(--duration-base); }
.mega__feat:hover { border-color: hsl(var(--ink) / 0.25); box-shadow: var(--shadow-sm); }
.mega__feat-media { aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; }
.mega__feat-media .ph { height: 100%; width: 100%; background: linear-gradient(135deg, hsl(214 60% 90%), hsl(214 48% 82%)); }
.mega__feat-img { height: 100%; width: 100%; object-fit: cover; object-position: center; display: block; }
.mega__feat-tag { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: hsl(var(--muted-foreground)); }
.mega__feat-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; margin-top: 4px; }
.mega__feat-sub { color: hsl(var(--muted-foreground)); font-size: 0.82rem; margin-top: 2px; }
.mega__feat-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.86rem; margin-top: 14px; white-space: nowrap; }
.mega__feat-cta svg { width: 14px; height: 14px; }
.mega__foot { flex: 0 0 100%; display: flex; gap: 28px; margin-top: 12px; padding-top: 16px; border-top: 1px solid hsl(var(--line) / 0.55); flex-wrap: wrap; }
.mega__foot span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.mega__foot svg { width: 15px; height: 15px; }

/* ---- mobile drawer ---- */
.overlay { position: fixed; inset: 0; z-index: 120; background: hsl(222 44% 8% / 0.5); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out-quart); }
.overlay.is-open { opacity: 1; pointer-events: auto; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 121; width: min(86vw, 380px); background: hsl(var(--surface)); padding: 20px 24px 40px; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out-expo); overflow-y: auto; display: flex; flex-direction: column; }
.mnav.is-open { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mnav > a, .mnav__list a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.03em; color: hsl(var(--ink)); text-decoration: none; padding: 13px 0; border-bottom: 1px solid hsl(var(--line) / 0.5); }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__ext { color: hsl(var(--muted-foreground)) !important; font-size: 1.05rem !important; }

/* ====== FOOTER ====== */
.ft { background: #0d0f14; color: hsl(0 0% 100% / 0.6); padding: clamp(48px, 6vw, 76px) 0 36px; margin-top: clamp(48px, 7vw, 96px); }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.ft__brand-col { max-width: 280px; }
.ft__tag { font-size: 0.92rem; line-height: 1.55; margin: 18px 0 0; color: hsl(0 0% 100% / 0.55); }
.ft__col h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.ft__col a { display: block; padding: 7px 0; color: hsl(0 0% 100% / 0.6); font-size: 0.92rem; text-decoration: none; transition: color var(--duration-fast); }
.ft__col a:hover { color: #fff; }
.ft__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid hsl(0 0% 100% / 0.1); font-size: 0.82rem; color: hsl(0 0% 100% / 0.45); }
.ft__pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft__pay .pay { width: 50px; height: 32px; border: 1px solid hsl(0 0% 100% / 0.4); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; box-sizing: border-box; }
.ft__pay .pay svg { width: 100%; height: 100%; display: block; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .hdr__nav, .hdr__nav--right { display: none; }
  .hamburger { display: inline-flex; }
  .hdr__inner { grid-template-columns: auto 1fr auto; }
  .hdr__brand { justify-self: start; grid-column: 2; padding-left: 8px; }
}
@media (max-width: 768px) {
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap, .er-shell { padding: 0 18px; }
  /* #5: keep the three link columns side by side (like the mockup) instead of
     stacking; the brand/logo block is dropped on phones to match the mockup. */
  .ft__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ft__brand-col { display: none; }
  .ft__col h4 { font-size: 0.72rem; margin-bottom: 12px; }
  .ft__col a { font-size: 0.82rem; padding: 6px 0; }
  .ft__bottom { flex-direction: column; align-items: flex-start; }
}

/* ====== SLIDE-OUT MINI CART DRAWER (matches prototype CartDrawer) ====== */
.er-cdrawer-scrim { position: fixed; inset: 0; background: hsl(var(--cta-dark) / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out-quart); }
.er-cdrawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.er-cdrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: hsl(var(--surface)); z-index: 210; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out-quart); box-shadow: -20px 0 60px hsl(var(--cta-dark) / 0.18); }
.er-cdrawer.is-open { transform: translateX(0); }
/* offset below the WP admin bar when logged in */
body.admin-bar .er-cdrawer { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .er-cdrawer { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .er-cdrawer { top: 46px; } }
.er-cdrawer__sync { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.er-cdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1px solid hsl(var(--line) / 0.7); flex: none; }
.er-cdrawer__head h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; margin: 0; }
.er-cdrawer .icon-btn { color: hsl(var(--ink)); }
.er-cdrawer .icon-btn:hover { background: hsl(var(--ink)); }
.er-cdrawer .icon-btn:hover svg { color: #fff; }
.er-cdrawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.er-cdrawer__foot { border-top: 1px solid hsl(var(--line) / 0.7); padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px)); flex: none; }
.er-cdrawer .ci { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid hsl(var(--line) / 0.5); }
.er-cdrawer .ci__media { width: 78px; height: 64px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: hsl(var(--surface-muted)); }
.er-cdrawer .ci__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-cdrawer .ci__info { flex: 1; min-width: 0; }
.er-cdrawer .ci__brand { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 600; }
.er-cdrawer .ci__name { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; margin: 2px 0 8px; }
.er-cdrawer .ci__row { display: flex; align-items: center; justify-content: space-between; }
.er-cdrawer .qty { display: inline-flex; align-items: center; border: 1px solid hsl(var(--line) / 0.9); border-radius: var(--radius-full); }
.er-cdrawer .qty button { width: 30px; height: 30px; border: none; background: transparent; color: hsl(var(--ink)); display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.er-cdrawer .qty button:hover { background: hsl(var(--ink) / 0.07); }
.er-cdrawer .qty button svg { width: 14px; height: 14px; }
.er-cdrawer .qty span { min-width: 26px; text-align: center; font-weight: 600; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.er-cdrawer .ci__price { font-weight: 700; font-size: 0.98rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.er-cdrawer .ci__rm { background: none; border: none; color: hsl(var(--muted-foreground)); font-size: 0.76rem; padding: 0; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; }
.er-cdrawer .ci__rm:hover { color: hsl(0 72% 48%); }
.er-cdrawer .ci__rm svg { width: 12px; height: 12px; }
.er-cdrawer .cart-empty { text-align: center; padding: 60px 20px; }
.er-cdrawer .cart-empty svg { width: 40px; height: 40px; color: hsl(var(--ink) / 0.2); margin: 0 auto 16px; display: block; }
.er-cdrawer .cart-empty h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 6px; }
.er-cdrawer .cart-empty p { color: hsl(var(--muted-foreground)); font-size: 0.9rem; margin: 0; }
.er-cdrawer .sub-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.er-cdrawer .sub-row span { color: hsl(var(--muted-foreground)); font-size: 0.9rem; }
.er-cdrawer .sub-row.total span, .er-cdrawer .sub-row.total b { font-size: 1.05rem; color: hsl(var(--ink)); }
.er-cdrawer .sub-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.er-cdrawer__secure { display: flex; align-items: center; justify-content: center; gap: 7px; color: hsl(var(--muted-foreground)); font-size: 0.78rem; margin-top: 14px; }
.er-cdrawer__secure svg { width: 14px; height: 14px; }
.er-cdrawer.is-busy { pointer-events: none; }
.er-cdrawer.is-busy .er-cdrawer__body { opacity: 0.55; transition: opacity var(--duration-fast); }


/* ====== CART DRAWER +/- and X ICONS ======
   The qty <button> is display:flex and its width can collapse, so the SVG
   (a flex item) shrank to 0 — invisible but still clickable. flex:none stops
   the shrink; stroke pins the colour since <button> ignores inherited color.
   (Icon sizes come from the cart-drawer component above.) */
.er-cdrawer .icon-btn svg,
.er-cdrawer .qty button svg { flex: none !important; stroke: hsl(var(--ink)) !important; }
.er-cdrawer .icon-btn:hover svg { stroke: #fff !important; }


/* ====== HEADER SEARCH SHEET (mirrors prototype SearchSheet) ====== */
.er-search-scrim { position: fixed; inset: 0; background: hsl(var(--cta-dark) / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 205; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out-quart); }
.er-search-scrim.is-open { opacity: 1; pointer-events: auto; }
.search-sheet { position: fixed; top: 0; left: 0; right: 0; z-index: 210; background: hsl(var(--surface)); box-shadow: var(--shadow-lg); transform: translateY(-100%); transition: transform var(--duration-slow) var(--ease-out-quart); padding-bottom: 18px; display: flex; flex-direction: column; max-height: 100vh; max-height: 100dvh; }
.search-sheet.is-open { transform: translateY(0); }
/* The sheet is a fixed panel and body scroll is locked while it's open, so the
   result list must scroll INSIDE the sheet. Otherwise a long list sits below the
   fold and the scroll gesture does nothing (the reported "scrolls but nothing
   moves" on phones). Cap the sheet to the viewport, pin the bar, scroll the body. */
.search-sheet .wrap { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.search-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.admin-bar .search-sheet { top: 32px; max-height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) { body.admin-bar .search-sheet { top: 46px; max-height: calc(100dvh - 46px); } }
@media screen and (max-width: 600px) { body.admin-bar .search-sheet { top: 46px; } }
.search-sheet__bar { display: flex; align-items: center; gap: 14px; height: 78px; margin: 0; flex: none; }
.search-sheet__bar .s-ic { width: 22px; height: 22px; color: hsl(var(--muted-foreground)); flex: none; }
.search-input { flex: 1; min-width: 0; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0; margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; color: hsl(var(--ink)); }
.search-input:focus { outline: none; }
.search-input::placeholder { color: hsl(var(--ink) / 0.3); }
/* universal pagination (blog, archives, search) — matches the prototype .pager */
.nav-links, .wp-block-query-pagination, .pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.navigation.pagination, .paging-navigation, nav.pagination, .wp-block-query-pagination { margin: clamp(32px,5vw,52px) 0 0; }
.nav-links .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid hsl(var(--line) / 0.85); background: hsl(var(--card)); color: hsl(var(--ink)); font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.nav-links .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover { border-color: hsl(var(--ink)); }
.nav-links .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers.current { background: hsl(var(--ink)); border-color: hsl(var(--ink)); color: #fff; }
.nav-links .page-numbers.dots { border: none; background: none; min-width: 22px; color: hsl(var(--muted-foreground)); }
/* close (X) button — force size + stroke so GP's svg{max-width:100%} can't collapse it */
.search-sheet__bar .icon-btn { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: hsl(var(--ink)); background: transparent; border: none; cursor: pointer; }
.search-sheet__bar .icon-btn:hover { background: hsl(var(--ink)); }
.search-sheet__bar .icon-btn:hover svg { stroke: #fff !important; }
.search-sheet__bar .icon-btn svg { width: 20px !important; height: 20px !important; min-width: 20px; max-width: none !important; flex: none !important; stroke: hsl(var(--ink)) !important; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-body { padding-top: 2px; }
.search-hint { color: hsl(var(--muted-foreground)); font-size: 0.92rem; padding: 8px 0 16px; margin: 0; }
.search-hint--label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 4px 0 14px; }
.search-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 2px 0 18px; }
.search-chips__lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-right: 4px; }
.search-chip { height: 34px; padding: 0 15px; border-radius: var(--radius-full); border: 1px solid hsl(var(--line) / 0.8); background: hsl(var(--surface)); color: hsl(var(--ink)); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.search-chip:hover { border-color: hsl(var(--ink)); background: hsl(var(--ink)); color: #fff; }
.search-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 14px; }
.sr { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radius-lg); border: 1px solid hsl(var(--line) / 0.7); cursor: pointer; text-decoration: none; color: hsl(var(--ink)); transition: border-color var(--duration-fast), background var(--duration-fast); }
.sr:hover { border-color: hsl(var(--ink) / 0.3); background: hsl(var(--ink) / 0.02); }
.sr__media { width: 64px; height: 50px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: hsl(var(--surface-muted)); }
.sr__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr__name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em; }
.sr__price { font-size: 0.85rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; margin-top: 3px; }
@media (max-width: 768px) { .search-res { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .search-res { grid-template-columns: 1fr; } }

/* ---- floating WhatsApp button (site-wide) ---- */
.er-wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #25d366; color: #fff; box-shadow: 0 6px 20px hsl(145 63% 30% / 0.4), 0 2px 6px rgba(0,0,0,0.15); transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.er-wa-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px hsl(145 63% 30% / 0.5), 0 3px 8px rgba(0,0,0,0.18); color: #fff; }
.er-wa-fab svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.er-wa-fab__pulse { position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: 0; animation: er-wa-pulse 2.4s ease-out infinite; }
@keyframes er-wa-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .er-wa-fab__pulse { animation: none; display: none; } }
@media (max-width: 600px) { .er-wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } }

/* ---- fix: .section 的 padding 覆盖 .wrap 左右 gutter，导致 PDP 在窄视口贴边 ---- */
/* 恢复原站 .er-shell.wrap 几何：左右 28px（桌面）/ 18px（≤560px），1280px 居中 */
.wrap.section.pdp-wrap { padding-left: 28px; padding-right: 28px; }
@media (max-width: 560px) {
	.wrap.section.pdp-wrap { padding-left: 18px; padding-right: 18px; }
}

/* ---- fix: faq 页对齐原站 main.faqp（无 inside-article 内边距，band 直接全宽）---- */
.page-id-28 .inside-article { padding: 0; }

/* ---- fix: contact(17)/refund(25) 页对齐原站（无 inside-article 内边距，band/section 直接全宽）---- */
body.page-id-17 .inside-article, body.page-id-25 .inside-article { padding: 0; }

/* ---- fix: band 型页面 entry-content 紧贴 acct-band（原站无 entry-content 层，GP 默认 margin-top 34px 造成下坠）---- */
.inside-article:has(> section.acct-band) > .entry-content { margin-top: 0; }

/* ---- fix: 所有 WP 页面内容区无 inside-article 内边距（原站无此层，通用生效；Woo 页走各自模板不受影响）---- */
body.page:not(.woocommerce) .inside-article { padding: 0; }
/* ---- fix: 默认页（带 entry-header 的 terms/exchanges/login-register/new-products 等）保留原站容器内边距 40/30 ---- */
body.page .inside-article:has(> .entry-header) { padding: 40px !important; }
@media (max-width: 768px) { body.page .inside-article:has(> .entry-header) { padding: 30px !important; } }
/* ---- fix: 默认页 main 间距对齐原站（main.site-main margin-top 20px；桌面另有 right 20px）---- */
body.page main:has(> article .entry-header) { margin-top: 20px; }
@media (min-width: 769px) { body.page main:has(> article .entry-header) { margin-right: 20px; } }
/* ---- fix: 默认页 h1 字号对齐原站（固定 42px / 1.2 / 无下外边距）---- */
body.page .entry-title { font-size: 42px !important; line-height: 1.2 !important; margin-bottom: 0 !important; }

/* ---- fix: new-products(24) 移动端商品列表单列（原站该页走 Woo 默认 block 布局，li 全宽）---- */
@media (max-width: 768px) {
	body.page-id-24 ul.products { display: block !important; }
	body.page-id-24 ul.products li.product { width: 100% !important; max-width: 100%; float: none !important; margin: 0 0 14px !important; }
}

/* PhotoSwipe root (footer.php) renders 58px static block on pages that do not
   enqueue WooCommerce's photoswipe.css (only product pages load it). Hide it
   unless opened — mirrors PS4's own default display:none. */
.pswp:not(.pswp--open) { display: none !important; }