/* ===================================================================
   THEME.CSS — Editorial Minimal
   ===================================================================
   A warm, typography-driven design system.
   Single file for simplicity; sections annotated for navigation.

   Sections:
     1. TOKENS       — CSS variables (color / type / space / motion)
     2. RESET        — normalize + base
     3. TYPOGRAPHY   — headings / links / text utilities
     4. LAYOUT       — container / page wrapper
     5. NAVBAR       — fixed top nav + mobile takeover
     6. SEARCH       — overlay
     7. FOOTER       — multi-column footer
     8. BUTTONS
     9. FORMS        — fields / inputs
    10. UTILITIES    — spacing / visibility helpers
    11. COMPONENTS   — tag / divider / pagination (reused by later phases)
   =================================================================== */


/* ==============================================================
   1. TOKENS
   ============================================================== */
:root {
  /* ---- Color palette: Apple-style cool minimal + tech blue ---- */
  --color-bg:           #FAFAFA;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F2F2F4;
  --color-text:         #1D1D1F;
  --color-text-muted:   #6E6E73;
  --color-text-subtle:  #A1A1A6;
  --color-divider:      #E5E5E7;
  --color-divider-str:  #C7C7CC;
  --color-inverse:      #FFFFFF;
  --color-inverse-bg:   #1D1D1F;

  /* Tech-blue accent (Apple system blue) */
  --color-accent:       #0071E3;
  --color-accent-hover: #0058B4;
  --color-accent-soft:  #E8F2FD;

  --color-sale:         #E82127;
  --color-sale-soft:    #FDEBEC;
  --color-rating:       #F5A524;

  --color-success:      #30A85F;
  --color-success-soft: #E6F6EC;
  --color-error:        #E82127;
  --color-warning:      #C28B00;

  /* ---- Typography (all-sans; --font-serif kept as alias for legacy refs) ---- */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif:   var(--font-display);   /* alias: pages still referencing --font-serif get the tech display stack */
  --font-mono:    "SF Mono", Menlo, Consolas, monospace;

  --fs-hero:  clamp(48px, 8vw, 96px);
  --fs-h1:    clamp(36px, 5vw, 64px);
  --fs-h2:    clamp(28px, 3.5vw, 44px);
  --fs-h3:    clamp(22px, 2.5vw, 30px);
  --fs-lead:  18px;
  --fs-body:  15px;
  --fs-small: 13px;
  --fs-micro: 11px;

  --lh-hero:    1.02;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --letter-tight:       -0.02em;
  --letter-heading:     -0.01em;
  --letter-body:        0;
  --letter-wide:        0.1em;
  --letter-ultra-wide:  0.22em;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-pad: clamp(16px, 3.5vw, 48px);
  --nav-h: 64px;
  --topbar-h: 32px;
  --nav-total-h: calc(var(--nav-h) + var(--topbar-h));

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-med:     300ms;
  --dur-slow:    600ms;

  /* ---- Borders (Apple uses larger corner radii) ---- */
  --r-0: 0;    --r-sm: 6px;   --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;
  --b-hairline: 1px solid var(--color-divider);
  --b-strong:   1px solid var(--color-divider-str);

  /* ---- Shadows (cool, cleaner — Apple-style soft) ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.10);

  /* ---- Z-index ---- */
  --z-nav:    100;
  --z-overlay: 500;
  --z-modal:  1000;
}


/* ==============================================================
   2. RESET
   ============================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--letter-body);
  animation: pageFadeIn var(--dur-med) var(--ease-out);
}

@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

img, svg, video {
  max-width: 100%;
  display: block;
  height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection {
  background: var(--color-text);
  color: var(--color-bg);
}


/* ==============================================================
   3. TYPOGRAPHY (Apple-style: all-sans, bold display weights)
   ============================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.024em; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.018em; }

/* Override legacy italic-serif <em> emphasis used across old templates.
   Apple style: no italic, just blue accent at same weight as parent. */
h1 em, h2 em, h3 em,
.hp-hero-title em, .auth-visual h2 em, .fb-hero h1 em,
.sl-hero h1 em, .hp-cta-title em, .ct-empty-title em {
  font-style: normal;
  color: var(--color-accent);
  font-weight: inherit;
  font-family: inherit;
}

p { margin: 0 0 var(--s-4); }

a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-divider-str);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--color-text); }

a.link-plain { text-decoration: none; color: inherit; }
a.link-plain:hover { color: var(--color-accent); }

.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }


/* ==============================================================
   4. LAYOUT
   ============================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.page-wrapper {
  padding-top: var(--nav-total-h);
  min-height: calc(100vh - var(--nav-total-h));
}
/* Pages own their top/bottom padding via their own section classes,
   so full-width-only pages (homepage) don't get an empty padded shell. */


/* ==============================================================
   5. NAVBAR (+ Topbar above)
   ============================================================== */

/* Utility topbar — shipping / returns / support ticker
   Same dark as nav so they read as one unified chrome block. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-nav) + 1);
  height: var(--topbar-h);
  background: var(--color-inverse-bg);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--letter-wide);
  font-weight: 500;
  white-space: nowrap;
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  width: 100%;
  justify-content: center;
}
.topbar-inner span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-inner svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .topbar-inner { font-size: 10px; gap: var(--s-3); }
  .topbar-inner span:nth-child(n+3) { display: none; }
}

.site-nav {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  z-index: var(--z-nav);
  background: var(--color-inverse-bg);
  color: var(--color-inverse);
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6);
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: var(--letter-heading);
  color: var(--color-inverse) !important;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.nav-brand img { height: 28px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  justify-self: center;
}
.nav-links a {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  padding: 4px 0;
}
.nav-links a:hover { color: var(--color-inverse); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-self: end;
}

.nav-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  text-decoration: none !important;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
  background: transparent;
}
.nav-icon-btn:hover { color: var(--color-inverse); }

.nav-cart-count {
  position: absolute;
  top: 2px; right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  background: var(--color-accent);
  color: var(--color-inverse);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Language switcher */
.nav-lang { position: relative; }
.nav-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 8px 10px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-lang-trigger:hover { color: var(--color-inverse); }

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  padding: var(--s-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.nav-lang.open .nav-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-lang-menu a {
  display: block;
  padding: 10px var(--s-4);
  color: var(--color-text) !important;
  font-size: 13px;
  text-decoration: none !important;
  letter-spacing: 0;
  transition: background var(--dur-fast);
}
.nav-lang-menu a.is-active {
  color: var(--color-accent) !important;
  font-weight: 500;
}
.nav-lang-menu a:hover { background: var(--color-surface-alt); }

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  position: relative;
  cursor: pointer;
  justify-self: start;
}
.nav-hamburger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1px;
  background: var(--color-inverse);
  transition: transform var(--dur-fast) var(--ease-out),
              top var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-hamburger span:nth-child(1) { top: 13px; }
.nav-hamburger span:nth-child(2) { top: 18px; }
.nav-hamburger span:nth-child(3) { top: 23px; }

body.nav-open { overflow: hidden; }
body.nav-open .nav-hamburger span:nth-child(1) { top: 18px; transform: rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

/* Mobile full-screen menu */
.nav-mobile-menu {
  position: fixed;
  top: var(--nav-total-h);
  left: 0; right: 0; bottom: 0;
  background: var(--color-inverse-bg);
  color: var(--color-inverse);
  padding: var(--s-7) var(--container-pad);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  overflow-y: auto;
  z-index: calc(var(--z-nav) - 1);
}
body.nav-open .nav-mobile-menu { transform: translateX(0); }
.nav-mobile-menu a {
  display: block;
  color: var(--color-inverse) !important;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  padding: var(--s-3) 0;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: color var(--dur-fast);
}
.nav-mobile-menu a:hover { color: var(--color-accent) !important; }

.nav-mobile-lang {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.nav-mobile-lang a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.nav-mobile-lang a.is-active {
  background: var(--color-inverse);
  color: var(--color-inverse-bg) !important;
}

/* Breakpoints */
@media (max-width: 960px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex; }
  .nav-brand { justify-self: center; }
  /* Keep search, account, cart visible on mobile — only language moves to the mobile menu */
  .nav-actions .nav-lang { display: none !important; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 var(--s-4); gap: var(--s-3); }
  .nav-brand { font-size: 18px; }
  .nav-actions { gap: var(--s-1); }
  .nav-actions #nav-search-trigger { display: none !important; }
}


/* ==============================================================
   6. SEARCH OVERLAY
   ============================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(26,26,26,0.88);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  animation: fadeIn var(--dur-fast) var(--ease-out);
}
.search-overlay.is-open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.search-overlay-inner {
  width: min(560px, 90vw);
  background: var(--color-bg);
  padding: var(--s-6);
  position: relative;
  border: 1px solid var(--color-divider);
}
.search-overlay form { display: flex; gap: var(--s-3); margin: 0; }
.search-overlay input {
  flex: 1;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--color-text);
  background: transparent;
  font-size: 22px;
  font-family: var(--font-serif);
  outline: none;
  color: var(--color-text);
}
.search-overlay button[type=submit] {
  padding: 14px 24px;
  background: var(--color-inverse-bg);
  color: var(--color-inverse);
  font-size: 11px;
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.search-overlay-close {
  position: absolute;
  top: 8px; right: 14px;
  color: var(--color-text-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
}


/* ==============================================================
   7. FOOTER
   ============================================================== */
.site-footer {
  background: var(--color-inverse-bg);
  color: var(--color-inverse);
  padding: var(--s-9) 0 var(--s-6);
  /*margin-top: var(--s-10);*/
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}

.footer-brand-logo {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--color-inverse) !important;
  text-decoration: none !important;
  display: inline-block;
  margin-bottom: var(--s-4);
  letter-spacing: var(--letter-heading);
}
.footer-brand-logo img { max-height: 40px; width: auto; filter: invert(1) brightness(2); }

.footer-brand-desc {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  line-height: 1.7;
  max-width: 360px;
  margin: 0 0 var(--s-5);
}

.footer-social {
  display: flex;
  gap: var(--s-2);
}
.footer-social a {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none !important;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.footer-social a:hover {
  color: var(--color-inverse);
  border-color: var(--color-inverse);
}

.footer-col-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  color: var(--color-inverse);
  margin: 0 0 var(--s-4);
  font-family: var(--font-sans);
}
.footer-links li { margin: 0 0 var(--s-3); }
.footer-links a {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  text-decoration: none !important;
  transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--color-inverse); }

.footer-bottom {
  max-width: var(--container-max);
  margin: var(--s-7) auto 0;
  padding: var(--s-5) var(--container-pad) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.footer-pay {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.footer-pay span {
  font-size: 10px;
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 10px;
}
.footer-copy {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: var(--letter-wide);
}

@media (max-width: 960px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ==============================================================
   8. BUTTONS
   ============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  text-decoration: none !important;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast),
              box-shadow var(--dur-fast);
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 980px; /* Apple-style pill */
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-inverse-bg);
  color: var(--color-inverse) !important;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-inverse) !important;
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-inverse) !important;
  box-shadow: var(--shadow-xs);
}
.btn-accent:hover {
  background: var(--color-accent-hover);
  color: var(--color-inverse) !important;
  box-shadow: var(--shadow-md);
}

.btn-outline {
  border-color: var(--color-text);
  color: var(--color-text) !important;
}
.btn-outline:hover {
  background: var(--color-text);
  color: var(--color-inverse) !important;
}

.btn-outline-inverse {
  border-color: rgba(255,255,255,0.6);
  color: var(--color-inverse) !important;
}
.btn-outline-inverse:hover {
  background: var(--color-inverse);
  color: var(--color-inverse-bg) !important;
  border-color: var(--color-inverse);
}

.btn-ghost {
  padding: 0 0 6px 0;
  border-bottom: 1px solid var(--color-text);
  color: var(--color-text) !important;
}
.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

.btn-ghost-inverse {
  padding: 0 0 6px 0;
  border-bottom: 1px solid var(--color-inverse);
  color: var(--color-inverse) !important;
}
.btn-ghost-inverse:hover {
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

.btn-link {
  padding: 0;
  border: 0;
  color: var(--color-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.btn-full { width: 100%; }
.btn-sm   { padding: 9px 18px; font-size: 12px; }
.btn-lg   { padding: 15px 32px; font-size: 15px; }


/* ==============================================================
   COMMERCE — product card, rating, sale badge, price
   ============================================================== */

/* Product card (shared) — Apple-style: clean white, rounded, soft shadow on hover */
.prod-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
  text-decoration: none !important;
  color: var(--color-text) !important;
}
.prod-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.prod-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  overflow: hidden;
  padding: 12px;
}
.prod-card-img img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px); height: calc(100% - 24px);
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}
.prod-card:hover .prod-card-img img { transform: scale(1.03); }
.prod-card-img-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-subtle);
}
.prod-card-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.prod-card-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.prod-card-rating {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 12px;
  color: var(--color-text-muted);
}
.prod-card-rating .stars { color: var(--color-rating); letter-spacing: 0.5px; }
.prod-card-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: auto;
}
.prod-card-price {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.prod-card-price-was {
  font-size: 13px;
  color: var(--color-text-subtle);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.prod-card-cta {
  margin-top: var(--s-3);
  padding: 10px 14px;
  background: var(--color-accent);
  color: var(--color-inverse);
  border: 0;
  border-radius: 980px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--dur-fast);
}
.prod-card-cta:hover { background: var(--color-accent-hover); }

/* Badges */
.sale-badge {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  background: var(--color-sale);
  color: var(--color-inverse);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 980px;
  z-index: 1;
}
.new-badge {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  background: var(--color-success);
  color: var(--color-inverse);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 980px;
  z-index: 1;
}

/* Wishlist heart */
.wish-btn {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  width: 32px; height: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  z-index: 2;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.wish-btn:hover { color: var(--color-sale); }

/* Shop-by-category tile */
.cat-tile {
  display: block;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--color-surface-alt);
  text-decoration: none !important;
  color: var(--color-inverse) !important;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.cat-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.cat-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0) 40%, rgba(26,26,26,.75) 100%);
}
.cat-tile-content {
  position: absolute;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  z-index: 1;
}
.cat-tile-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-inverse);
  margin: 0 0 4px;
}
.cat-tile-sub {
  font-size: 11px;
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

/* Shop toast */
.shop-toast {
  border-radius: 980px !important;
}

/* ==============================================================
   HEADING WEIGHT OVERRIDES (Apple-style sans-serif display)
   Legacy templates set font-weight:400/500 assuming serif.
   These overrides make page-level headings bold for sans display.
   ============================================================== */
.hp-hero-title, .hp-cta-title, .result-title, .pd-title, .pd-related-title,
.pl-head-title, .pg-title, .sl-hero h1, .fb-hero h1,
.auth-visual h2, .auth-title, .sl-cta h2 {
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
}
.hp-section-title, .ct-head-title, .ct-empty-title, .ck-head-title,
.ck-section-title, .mc-header-name, .mc-section-title, .od-head-title,
.tk-head-title, .sl-section-head h2, .hp-feature-content h3,
.fb-form h3, .fb-info h2, .mc-modal-title, .mc-settings-group h4,
.sl-service h3, .sl-step h3, .sl-industry h3, .sl-why-content h2,
.ct-row-title, .addr-card-name, .mc-addr-name {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Eyebrow pills — keep uppercase badges but tighter tracking */
.pd-main-badge, .hp-hero-badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hp-hero-eyebrow {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Section eyebrows: keep small-caps feel but use blue accent */
.hp-section-eyebrow, .sl-section-eyebrow, .sl-hero-eyebrow,
.fb-hero-eyebrow, .pg-head-eyebrow, .auth-visual-eyebrow,
.result-eyebrow {
  color: var(--color-accent);
  font-weight: 600;
}


/* ==============================================================
   9. FORMS
   ============================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-4);
}
.field-label {
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--color-text);
  font-weight: 500;
}
.field-label .req { color: var(--color-error); margin-left: 2px; }

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-divider-str);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  border-radius: var(--r-sm);
  box-sizing: border-box;
  -webkit-appearance: none;
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--color-text-subtle); }
.field-input:hover,
.field-select:hover,
.field-textarea:hover {
  border-color: var(--color-text-muted);
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.field-textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field-error {
  font-size: 13px;
  color: var(--color-error);
  margin-top: 2px;
}
.field-help {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Legacy .field-boxed modifier — now default; kept as no-op for safety */
.field-boxed .field-input,
.field-boxed .field-select,
.field-boxed .field-textarea { padding: 12px 14px; border: 1px solid var(--color-divider-str); }


/* ==============================================================
   10. UTILITIES
   ============================================================== */
.u-uppercase { text-transform: uppercase; letter-spacing: var(--letter-wide); }
.u-micro {
  font-size: var(--fs-micro);
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.u-muted  { color: var(--color-text-muted); }
.u-subtle { color: var(--color-text-subtle); }
.u-accent { color: var(--color-accent); }
.u-center { text-align: center; }
.u-right  { text-align: right; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-5 { margin-bottom: var(--s-5); }
.u-mb-6 { margin-bottom: var(--s-6); }
.u-mb-7 { margin-bottom: var(--s-7); }

.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.u-hide-mobile { }
.u-hide-desktop { display: none; }
@media (max-width: 640px) {
  .u-hide-mobile  { display: none !important; }
  .u-hide-desktop { display: block; }
}


/* ==============================================================
   11. COMPONENTS (shared)
   ============================================================== */

/* Dividers */
.hr-hairline {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--s-7) 0;
}
.hr-strong {
  border: 0;
  border-top: 1px solid var(--color-divider-str);
  margin: var(--s-7) 0;
}

/* Tags / chips */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-family: var(--font-sans);
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--color-divider-str);
  color: var(--color-text-muted);
  background: transparent;
}
.tag-accent {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.tag-solid {
  background: var(--color-text);
  color: var(--color-inverse);
  border-color: var(--color-text);
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--letter-ultra-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--s-5) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none !important;
  transition: color var(--dur-fast);
}
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb .sep {
  color: var(--color-text-subtle);
  font-weight: 300;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  margin: var(--s-7) 0;
}
.pagination a,
.pagination span {
  color: var(--color-text);
  text-decoration: none !important;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.pagination a:hover { border-bottom-color: var(--color-text); }
.pagination .is-current {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.pagination .is-disabled { color: var(--color-text-subtle); pointer-events: none; }

/* Notice strip */
.notice {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--color-divider-str);
  margin: var(--s-4) 0;
  font-size: 14px;
}
.notice-success { border-color: var(--color-success); color: var(--color-success); }
.notice-error   { border-color: var(--color-error);   color: var(--color-error);   }
.notice-warn    { border-color: var(--color-warning); color: var(--color-warning); }