/* LiveOptical — Frontend CSS */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #64748b;
  --success: #16a34a;
  --warning: #ca8a04;
  --danger: #dc2626;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --white: #fff;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  /* theme-overridable */
  --nav-bg: #1e293b;
  --nav-text: #cbd5e1;
  --nav-text-hover: #ffffff;
  --hero-from: #1e40af;
  --hero-to: #7c3aed;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
/* Inside site-body, max-width centering is already handled */
.site-main .container { max-width: none; margin: 0; }

/* Buttons */
.btn { display: inline-block; padding: .5rem 1.25rem; border-radius: var(--radius); border: none; cursor: pointer; font-size: .9rem; font-weight: 500; transition: background-color .15s, color .15s, box-shadow .15s; text-decoration: none; }
/* Button variants. Colors, borders, type and shape come from Customize > Design >
   General Styles > Buttons (--btn-<variant>-*); the fallbacks are the theme's look.
   Borders are drawn as an inset ring so they never change a button's size.
   Outline and ghost buttons use the primary button's shape and type. */
.btn-primary, .btn-outline, .btn-ghost {
  padding: var(--btn-primary-py, .5rem) var(--btn-primary-px, 1.25rem);
  font-family: var(--btn-primary-font, inherit); font-size: var(--btn-primary-size, .9rem); font-weight: var(--btn-primary-weight, 500);
  border-radius: var(--btn-primary-radius, var(--radius));
  text-transform: var(--btn-primary-transform, none); letter-spacing: var(--btn-primary-letter-spacing, normal);
}
.btn-secondary {
  padding: var(--btn-secondary-py, .5rem) var(--btn-secondary-px, 1.25rem);
  font-family: var(--btn-secondary-font, inherit); font-size: var(--btn-secondary-size, .9rem); font-weight: var(--btn-secondary-weight, 500);
  border-radius: var(--btn-secondary-radius, var(--radius));
  text-transform: var(--btn-secondary-transform, none); letter-spacing: var(--btn-secondary-letter-spacing, normal);
}
.btn-danger {
  padding: var(--btn-danger-py, .5rem) var(--btn-danger-px, 1.25rem);
  font-family: var(--btn-danger-font, inherit); font-size: var(--btn-danger-size, .9rem); font-weight: var(--btn-danger-weight, 500);
  border-radius: var(--btn-danger-radius, var(--radius));
  text-transform: var(--btn-danger-transform, none); letter-spacing: var(--btn-danger-letter-spacing, normal);
}
/* Primary: also the listing "Add to Cart" buttons and the header search button */
.btn-primary, .btn-add-cart, .header-search button {
  background: var(--btn-primary-bg, var(--primary)); color: var(--btn-primary-color, #fff);
  box-shadow: inset 0 0 0 var(--btn-primary-border-width, 0px) var(--btn-primary-border-color, var(--primary-dark)), var(--btn-primary-shadow, 0 0 #0000);
}
.btn-primary:hover, .btn-add-cart:hover, .header-search button:hover {
  background: var(--btn-primary-hover-bg, var(--primary-dark)); color: var(--btn-primary-hover-color, #fff); text-decoration: none;
  box-shadow: inset 0 0 0 var(--btn-primary-border-width, 0px) var(--btn-primary-hover-border-color, var(--btn-primary-border-color, var(--primary-dark))), var(--btn-primary-shadow, 0 0 #0000);
}
/* Secondary: outlined in the secondary color, filled on hover */
.btn-secondary {
  background: var(--btn-secondary-bg, transparent); color: var(--btn-secondary-color, var(--secondary));
  box-shadow: inset 0 0 0 var(--btn-secondary-border-width, 2px) var(--btn-secondary-border-color, var(--secondary)), var(--btn-secondary-shadow, 0 0 #0000);
}
.btn-secondary:hover {
  background: var(--btn-secondary-hover-bg, var(--btn-secondary-border-color, var(--secondary))); color: var(--btn-secondary-hover-color, #fff); text-decoration: none;
  box-shadow: inset 0 0 0 var(--btn-secondary-border-width, 2px) var(--btn-secondary-hover-border-color, var(--btn-secondary-border-color, var(--secondary))), var(--btn-secondary-shadow, 0 0 #0000);
}
.btn-outline {
  background: transparent; color: var(--btn-outline-color, var(--primary));
  box-shadow: inset 0 0 0 2px var(--btn-outline-border-color, var(--primary));
}
.btn-outline:hover {
  background: var(--btn-outline-hover-bg, var(--btn-outline-border-color, var(--primary))); color: var(--btn-outline-hover-color, #fff); text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--btn-outline-hover-border-color, var(--btn-outline-border-color, var(--primary)));
}
.btn-ghost { background: transparent; color: var(--btn-ghost-color, var(--primary)); box-shadow: none; }
.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg, rgba(37, 99, 235, .08)); color: var(--btn-ghost-hover-color, var(--primary-dark)); text-decoration: none;
  box-shadow: inset 0 0 0 var(--btn-ghost-hover-border-width, 0px) var(--btn-ghost-hover-border-color, transparent);
}
/* Danger (Delete, Remove…): red */
.btn-danger {
  background: var(--btn-danger-bg, var(--danger)); color: var(--btn-danger-color, #fff);
  box-shadow: inset 0 0 0 var(--btn-danger-border-width, 0px) var(--btn-danger-border-color, #b91c1c), var(--btn-danger-shadow, 0 0 #0000);
}
.btn-danger:hover {
  background: var(--btn-danger-hover-bg, #b91c1c); color: var(--btn-danger-hover-color, #fff); text-decoration: none;
  box-shadow: inset 0 0 0 var(--btn-danger-border-width, 0px) var(--btn-danger-hover-border-color, var(--btn-danger-border-color, #b91c1c)), var(--btn-danger-shadow, 0 0 #0000);
}
/* Sizes (after the variants, so they win) */
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: .5rem; }
.btn-large { padding: .75rem 2rem; font-size: 1rem; }
.btn-size-small { padding: .35rem .85rem; font-size: .8rem; }
.btn-size-large { padding: .8rem 2rem; font-size: 1.05rem; }
.btn-add-cart {
  border: none; padding: .4rem .8rem; cursor: pointer; width: 100%;
  border-radius: var(--btn-primary-radius, var(--radius));
  font-family: var(--btn-primary-font, inherit); font-weight: var(--btn-primary-weight, 500);
  text-transform: var(--btn-primary-transform, none); letter-spacing: var(--btn-primary-letter-spacing, normal);
}
.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0; }
.btn-remove { background: none; border: none; color: var(--danger); font-size: 1.2rem; cursor: pointer; }
.btn-mirror { background: #f1f5f9; border: 1px solid var(--border); color: var(--text); }
.btn-mirror:hover { background: var(--border); }

/* Alerts */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-info { background: #dbeafe; color: #1e40af; }
.alert-info a { color: #1e40af; text-decoration: underline; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.site-header {
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-top { padding: .85rem 0; border-bottom: 1px solid var(--border); }
.header-top .container { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
/* Logo width comes from Customize > Design (--logo-size, set on .site-header);
   its height follows the image, and the header grows to fit. The other blocks
   reflow around it: the search box shrinks down to its flex-basis, then the
   row wraps. */
.header-brand { flex: 0 1 auto; min-width: 0; }
.logo { font-size: calc(var(--logo-size, 120px) / 5); font-weight: 700; color: var(--text); letter-spacing: -.02em; display: inline-flex; align-items: center; max-width: 100%; }
.logo span { color: var(--primary); }
.logo-img { width: var(--logo-size, 120px); max-width: 100%; height: auto; display: block; }
.header-search { flex: 1 1 160px; display: flex; min-width: 0; }
/* Logo position "Top Center": the logo gets row 1 to itself, centered; the
   search box, information menu and user controls share row 2, centered. */
.logo-pos-center .header-top .container { justify-content: center; }
.logo-pos-center .header-brand { flex: 0 0 100%; display: flex; justify-content: center; }
.logo-pos-center .header-search { flex: 1 1 280px; max-width: 560px; }
.header-search form { display: flex; align-items: stretch; width: 100%; min-width: 0; }
.header-search input {
  flex: 1;
  min-width: 0;
  padding: .55rem 1rem;
  border: 1px solid #cbd5e1;
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: .9rem;
  outline: none;
  transition: border-color .15s;
}
.header-search input:focus { border-color: var(--primary); }
.header-search-manufacturer {
  flex: 0 1 140px;
  min-width: 0;
  padding: .55rem .5rem;
  border: 1px solid #cbd5e1;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: #f8fafc;
  color: var(--secondary);
  font-size: .8rem;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.header-search-manufacturer:focus { border-color: var(--primary); }
.header-search button {
  flex: 0 0 auto;
  border: none;
  padding: .55rem 1.1rem;
  border-radius: 0 var(--btn-primary-radius, var(--radius)) var(--btn-primary-radius, var(--radius)) 0;
  cursor: pointer;
  font-family: var(--btn-primary-font, inherit);
  font-size: .875rem;
  font-weight: var(--btn-primary-weight, 500);
  text-transform: var(--btn-primary-transform, none);
  letter-spacing: var(--btn-primary-letter-spacing, normal);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.header-info-menu { flex-shrink: 0; }
.header-info-menu ul { list-style: none; display: flex; align-items: center; gap: .55rem; margin: 0; padding: 0; }
.header-info-menu li { display: flex; align-items: center; gap: .55rem; }
.header-info-menu li + li::before { content: '|'; color: var(--info-menu-separator, #cbd5e1); font-size: .75rem; }
.header-info-menu a { color: var(--info-menu-color, var(--secondary)); font-size: var(--info-menu-size, .75rem); white-space: nowrap; }
.header-info-menu a:hover { color: var(--info-menu-hover-color, var(--primary)); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 1rem; font-size: .875rem; white-space: nowrap; }
/* Keep the right-hand items right-aligned when the search box (the flex:1
   spacer) is switched off under Customize > Design. */
.header-top .container > .header-info-menu,
.header-top .container > .header-actions { margin-left: auto; }
.header-top .container > .header-info-menu + .header-actions { margin-left: 0; }
.logo-pos-center .header-top .container > .header-info-menu,
.logo-pos-center .header-top .container > .header-actions { margin-left: 0; }
.header-actions a { color: var(--secondary); }
/* Wrappers for the phone layout; they don't affect the desktop row. */
.header-account, .header-cart-group { display: contents; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  cursor: pointer;
}
.top-nav-sub-toggle, .sidebar-toggle, .filters-toggle { display: none; }
.nav-toggle-bar { display: block; height: 2px; background: var(--text); border-radius: 1px; transition: transform .2s, opacity .2s; }
.site-header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.header-actions a:hover { color: var(--primary); text-decoration: none; }
.cart-btn {
  background: var(--primary);
  color: #fff !important;
  border: none;
  padding: .45rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  font-family: inherit;
  transition: background .15s;
}
.cart-btn:hover { background: var(--primary-dark); text-decoration: none; }

.wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--secondary) !important;
  font-weight: 600;
  font-size: .875rem;
}
.wishlist-link:hover { color: var(--danger) !important; text-decoration: none; }
.wishlist-link .heart-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── User Controls display styles (Customize > Design > User Controls) ──
   .uc-style-text: icon + label + count · .uc-style-icons: icon + count
   .uc-style-hamburger: everything in the .user-menu dropdown */
.uc-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uc-link { display: inline-flex; align-items: center; gap: .35rem; }
.uc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px;
  background: #e2e8f0; color: var(--text); font-size: .72rem; font-weight: 700; line-height: 1;
}
.cart-btn .uc-count { background: rgba(255,255,255,.25); color: #fff; }
.uc-style-icons .uc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uc-style-icons .uc-link .uc-icon { width: 21px; height: 21px; }
.uc-style-icons .cart-btn { padding: .4rem .7rem; }

.user-menu { position: relative; }
.user-menu-toggle {
  position: relative; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 38px; padding: 0 11px;
  background: var(--white); border: 1px solid #cbd5e1; border-radius: var(--radius); cursor: pointer;
}
.user-menu-toggle:hover { border-color: var(--primary); }
.user-menu.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.user-menu.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.user-menu.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.uc-badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.uc-badge.is-zero { display: none; }
.user-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 220px;
  padding: .35rem; background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.user-menu.is-open .user-menu-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.user-menu-panel form { margin: 0; }
.user-menu-panel a, .user-menu-panel button {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 42px; padding: .5rem .75rem;
  background: none; border: none; border-radius: 6px; font: inherit; font-size: .9rem; text-align: left;
  color: var(--text) !important; cursor: pointer;
}
.user-menu-panel a:hover, .user-menu-panel button:hover,
.user-menu-panel a:focus-visible, .user-menu-panel button:focus-visible { background: #f1f5f9; text-decoration: none; }
.user-menu-panel .uc-icon { color: var(--text-muted); }
.user-menu-panel .uc-count { margin-left: auto; }
.user-menu-panel form, .user-menu-panel a[href="/user/login"] { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .3rem; }
.user-menu-panel .user-menu-sub { min-height: 36px; padding-left: calc(.75rem + 18px + .65rem); font-size: .82rem; color: var(--text-muted) !important; }
@media (prefers-reduced-motion: reduce) {
  .user-menu-panel, .user-menu.is-open .user-menu-panel { transform: none; transition: opacity .01s, visibility 0s; }
}

/* ═══════════════════════════════════════════════
   TOP NAVIGATION — horizontal multi-level dropdown
   Colors, fonts and sizes come from Customize > Design > General Styles >
   Menus (--top-nav-*, --dropdown-*); the fallbacks are the theme's look.
═══════════════════════════════════════════════ */
.main-nav {
  background: var(--top-nav-bg, var(--nav-bg));
  position: relative;
  z-index: 99;
  border-bottom: 3px solid var(--primary);
}
.main-nav .container { display: flex; padding: 0 1rem; }
.top-nav-list { list-style: none; display: flex; margin: 0; padding: 0; }

/* Top-level nav items */
.top-nav-item { position: relative; }
.top-nav-item > a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: var(--top-nav-padding, .85rem) 1.2rem;
  color: var(--top-nav-color, #e2e8f0);
  font-family: var(--top-nav-font, inherit);
  font-size: var(--top-nav-size, .875rem);
  font-weight: var(--top-nav-weight, 500);
  text-transform: var(--top-nav-transform, none);
  letter-spacing: var(--top-nav-letter-spacing, normal);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;        /* overlap nav border-bottom */
  transition: color .15s, background-color .15s, border-color .15s;
}
.top-nav-item > a.is-active {
  color: var(--top-nav-active-color, #fff);
  background: var(--top-nav-active-bg, transparent);
  border-bottom-color: var(--top-nav-active-color, #fff);
}
.top-nav-item > a:hover {
  color: var(--top-nav-hover-color, #fff);
  background: var(--top-nav-hover-bg, transparent);
  border-bottom-color: var(--top-nav-hover-color, #fff);
  text-decoration: none;
}
/* Down-arrow indicator for items with children */
.top-nav-item.has-dropdown > a::after {
  content: '▾';
  font-size: .7rem;
  opacity: .7;
  line-height: 1;
}

/* ── First-level dropdown panel ── */
.top-nav-item .dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px);   /* clear the nav border */
  left: 0;
  min-width: var(--dropdown-min-width, 220px);
  width: var(--dropdown-width, auto);
  background: var(--dropdown-bg, #fff);
  border: var(--dropdown-border-width, 1px) solid var(--dropdown-border-color, #d1d5db);
  border-top: var(--dropdown-border-top-width, 3px) solid var(--dropdown-border-top-color, var(--primary));
  border-radius: var(--dropdown-radius-top, 0) var(--dropdown-radius-top, 0) var(--dropdown-radius, var(--radius)) var(--dropdown-radius, var(--radius));
  box-shadow: var(--dropdown-shadow, 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06));
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  z-index: 200;
}
.top-nav-item:hover > .dropdown { display: block; }

/* Dropdown list items */
.top-nav-item .dropdown li { position: relative; }
.top-nav-item .dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1.1rem;
  color: var(--dropdown-color, #374151);
  font-family: var(--dropdown-font, inherit);
  font-size: var(--dropdown-size, .85rem);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .1s, color .1s, border-color .1s;
}
.top-nav-item .dropdown li a:hover {
  background: var(--dropdown-hover-bg, #eff6ff);
  color: var(--dropdown-hover-color, var(--primary));
  border-left-color: var(--dropdown-hover-color, var(--primary));
  text-decoration: none;
}
/* Right-arrow on items that have a fly-out */
.top-nav-item .dropdown li.has-dropdown > a::after {
  content: '›';
  font-size: 1rem;
  color: #9ca3af;
  line-height: 1;
}
.top-nav-item .dropdown li.has-dropdown > a:hover::after { color: var(--dropdown-hover-color, var(--primary)); }

/* ── Second-level fly-out panel ── */
.top-nav-item .dropdown .dropdown-right {
  display: none;
  position: absolute;
  top: -4px;
  left: calc(100% + 1px);
  min-width: var(--dropdown-min-width, 220px);
  width: var(--dropdown-width, auto);
  background: var(--dropdown-bg, #fff);
  border: var(--dropdown-border-width, 1px) solid var(--dropdown-border-color, #d1d5db);
  border-top: var(--dropdown-border-top-width, 3px) solid var(--dropdown-border-top-color, var(--primary));
  border-radius: var(--dropdown-radius-top, 0) var(--dropdown-radius, var(--radius)) var(--dropdown-radius, var(--radius)) var(--dropdown-radius, var(--radius));
  box-shadow: var(--dropdown-shadow, 6px 8px 24px rgba(0,0,0,.12));
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  z-index: 201;
}
.top-nav-item .dropdown li.has-dropdown:hover > .dropdown-right { display: block; }

/* ═══════════════════════════════════════════════
   FLASH MESSAGES
═══════════════════════════════════════════════ */
.flash-messages { padding-top: 1rem; }
/* A full-width hero sits right under the header when there are no messages. */
.flash-messages:not(:has(*)):has(+ .hero-block) { padding-top: 0; }

/* ═══════════════════════════════════════════════
   SITE BODY LAYOUT — sidebar + content
═══════════════════════════════════════════════ */
.site-body {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  gap: 1.25rem;
}
.site-sidebar {
  width: 215px;
  flex-shrink: 0;
  padding: 1.25rem 0 2rem;
}
.site-main { flex: 1; min-width: 0; min-height: 70vh; }

/* ═══════════════════════════════════════════════
   SIDE NAVIGATION — collapsible category tree
   Colors, fonts and sizes come from Customize > Design > General Styles >
   Menus (--side-nav-*, --side-flyout-* for child lists).
═══════════════════════════════════════════════ */
.side-nav-box {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
/* Stacked boxes (Categories + Shop by Brand + Shop by Price) */
.side-nav-box + .side-nav-box { margin-top: 1.25rem; }

/* Box title bar */
.side-nav-title {
  background: var(--nav-bg);
  color: #94a3b8;
  padding: .7rem 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Root-level list */
.side-nav { list-style: none; margin: 0; padding: 0; background: var(--side-nav-bg, transparent); }

/* Every nav item */
.side-nav-item { border-bottom: 1px solid var(--side-nav-border-color, #e5e7eb); }
.side-nav-item:last-child { border-bottom: none; }

/* Row = link + optional toggle */
.side-nav-row {
  display: flex;
  align-items: stretch;
  min-height: 38px;
}

/* Category link */
.side-nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--side-nav-padding, .5rem) .9rem;
  color: var(--side-nav-color, #374151);
  font-family: var(--side-nav-font, inherit);
  font-size: var(--side-nav-size, .875rem);
  font-weight: var(--side-nav-weight, inherit);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.side-nav-link:hover {
  background: var(--side-nav-hover-bg, #eff6ff);
  color: var(--side-nav-hover-color, var(--primary));
  border-left-color: var(--side-nav-hover-color, var(--primary));
  text-decoration: none;
}

/* Toggle button — chevron arrow */
.side-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--side-nav-border-color, #e5e7eb);
  color: #9ca3af;
  cursor: pointer;
  font-size: .65rem;
  transition: background .12s, color .12s, transform .2s;
  padding: 0;
}
/* Right-pointing triangle as chevron */
.side-nav-toggle::before { content: '▶'; }
.side-nav-toggle:hover { background: #f1f5f9; color: var(--primary); }
/* Rotate to down-pointing when open */
.side-nav-item.is-open > .side-nav-row > .side-nav-toggle { transform: rotate(90deg); color: var(--primary); }

/* Child list — hidden by default */
.side-nav-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  background: var(--side-flyout-bg, #f9fafb);
  border-top: 1px solid var(--side-flyout-border-color, var(--side-nav-border-color, #e5e7eb));
  box-shadow: var(--side-flyout-shadow, none);
}
.side-nav-item.is-open > .side-nav-children { display: block; }

/* Child items */
.side-nav-children > .side-nav-item { border-bottom: 1px solid var(--side-flyout-border-color, #eef0f2); }
.side-nav-children > .side-nav-item:last-child { border-bottom: none; }
.side-nav-children .side-nav-link {
  padding-left: 1.6rem;
  font-size: var(--side-flyout-size, .825rem);
  color: var(--side-flyout-color, #4b5563);
}
.side-nav-children .side-nav-toggle { border-left-color: var(--side-flyout-border-color, #eef0f2); }

/* Grandchild items */
.side-nav-children .side-nav-children { background: var(--side-flyout-bg, #f1f5f9); border-top: none; box-shadow: none; }
.side-nav-children .side-nav-children .side-nav-item { border-bottom: 1px solid var(--side-flyout-border-color, #e9ecef); }
.side-nav-children .side-nav-children .side-nav-link {
  padding-left: 2.4rem;
  font-size: var(--side-flyout-size, .8rem);
  color: var(--side-flyout-color, #6b7280);
}
.side-nav-children .side-nav-link:hover {
  background: var(--side-flyout-hover-bg, var(--side-nav-hover-bg, #eff6ff));
  color: var(--side-flyout-hover-color, var(--side-nav-hover-color, var(--primary)));
  border-left-color: var(--side-flyout-hover-color, var(--side-nav-hover-color, var(--primary)));
}
/* The current page's link, at any depth */
.side-nav .side-nav-link.is-active {
  background: var(--side-nav-active-bg, #eff6ff);
  color: var(--side-nav-active-color, var(--primary));
  border-left-color: var(--side-nav-active-color, var(--primary));
}

/* Footer */
.site-footer { background: var(--text); color: #94a3b8; margin-top: 4rem; padding: 3rem 0 1rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
/* Customize > Design > Footer: one column per enabled block. With 4+ columns
   layout.ejs sets grid-template-columns inline (wider description column). */
.footer-richtext > :first-child { margin-top: 0; }
.footer-richtext > :last-child { margin-bottom: 0; }
.footer-richtext p { margin: 0 0 .6rem; line-height: 1.6; }
.footer-richtext ul { list-style: disc; padding-left: 1.2rem; }
.footer-richtext ol { padding-left: 1.2rem; }
.footer-richtext img { max-width: 100%; height: auto; }
.footer-richtext strong, .footer-richtext b { color: #e2e8f0; }
/* Footer Top / Footer Bottom (Customize > Design): full-width rows above and
   below the columns. */
.footer-band { margin-bottom: 2rem; }
.footer-band-top { padding-bottom: 2rem; border-bottom: 1px solid #334155; }
.footer-band-bottom { padding-top: 1.5rem; border-top: 1px solid #334155; margin-bottom: 1.5rem; }
.footer-band-bottom + .footer-bottom { border-top: none; padding-top: 0; }
.footer-band img { max-width: 100%; height: auto; }
.footer-logout { margin: 0; }
.footer-logout button { background: none; border: none; padding: 0; font: inherit; color: #94a3b8; cursor: pointer; }
.footer-logout button:hover { color: #fff; }
.footer-richtext :is(h1, h2, h3, h4, h5, h6) { color: var(--white); font-size: 1rem; margin: 0 0 .75rem; }
.footer-richtext a { color: #cbd5e1; text-decoration: underline; }
.footer-richtext a:hover { color: #fff; }
.footer-richtext table { max-width: 100%; }
.footer-col h4 { color: var(--white); margin-bottom: .75rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .25rem; }
.footer-col a { color: #94a3b8; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #334155; padding-top: 1rem; text-align: center; font-size: .8rem; }
.footer-powered-by { margin-top: .35rem; }
.footer-powered-by a { color: #94a3b8; }
.footer-powered-by a:hover { color: #fff; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%); color: #fff; padding: 5rem 0; text-align: center; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; margin-bottom: 2rem; opacity: .9; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; }

/* Column Blocks (Customize > Design > Home Page): 1-4 equal columns beside
   the side menu; 2 per row on tablets, 1 on phones. Hover effects run on the
   whole column (and on keyboard focus inside it). */
/* Spacing and the column box come from Customize > Design per row / column
   (margins and --cb-* custom properties set inline by partials/column-blocks.ejs). */
.home-columns-wide { width: 100%; }
.home-columns { display: flex; flex-wrap: wrap; gap: var(--cb-gap, 1.25rem); margin: var(--cb-mt, 1.5rem) 0 var(--cb-mb, 2rem); padding: var(--cb-py, 0) var(--cb-px, 0); }
.home-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: var(--cb-pad, 0); background: var(--cb-bg, var(--white)); border: var(--cb-bw, 1px) solid var(--cb-bc, var(--border)); border-radius: var(--cb-radius, var(--radius)); overflow: hidden; }
.home-col-media { position: relative; overflow: hidden; background: #e2e8f0; border-radius: var(--cb-img-radius, 0); }
.home-col-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease, filter .3s ease; }
.home-col-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; transition: transform .3s ease, opacity .3s ease; }
.home-col-text { width: 100%; overflow-wrap: anywhere; }
.home-col-text > :first-child { margin-top: 0; }
.home-col-text > :last-child { margin-bottom: 0; }
.home-col-text h1 { font-size: 1.6rem; } .home-col-text h2 { font-size: 1.35rem; } .home-col-text h3 { font-size: 1.15rem; } .home-col-text h4 { font-size: 1rem; }
.home-col-text :is(h1, h2, h3, h4) { margin: 0 0 .4rem; line-height: 1.25; }
.home-col-text p { margin: 0 0 .5rem; color: var(--text-muted); }
.home-col-text img { max-width: 100%; height: auto; }
/* Column text (Customize > Design > Column Blocks > Text): above / below the
   image (.home-col-body-above / .home-col-body), or over it on a tinted box
   (.home-col-textwrap.text-inside-top/-center/-bottom, background set inline). */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.home-col-body-above { padding-bottom: 1rem; }
.home-col-textwrap { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.1rem; }
.text-inside-top { top: 0; }
.text-inside-bottom { bottom: 0; }
.text-inside-center { top: 50%; transform: translateY(-50%); }
.text-on-dark .home-col-text, .text-on-dark .home-col-text :is(h1, h2, h3, h4, p, li, a) { color: #fff; }
.text-on-dark .home-col-text { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.text-on-light .home-col-text :is(h1, h2, h3, h4) { color: var(--text); }
.text-on-light .home-col-text p { color: #334155; }
.home-col-media .home-col-text :last-child { margin-bottom: 0; }
/* Column button: below the image (.home-col-btnrow) or over it
   (.home-col-btnwrap.btn-inside-top/-center/-bottom), aligned left/center/right. */
.home-col-btnrow { display: flex; width: 100%; }
.home-col-btnwrap { position: absolute; left: 0; right: 0; z-index: 2; display: flex; padding: 1rem; pointer-events: none; }
.home-col-btnwrap .btn { pointer-events: auto; }
.btn-inside-top { top: 0; }
.btn-inside-bottom { bottom: 0; }
.btn-inside-center { top: 50%; transform: translateY(-50%); }
.btn-align-left { justify-content: flex-start; }
.btn-align-center { justify-content: center; }
.btn-align-right { justify-content: flex-end; }
/* Semi-transparent band behind the button, for readability over busy images */
.home-col-btnwrap.has-backdrop { background: rgba(15, 23, 42, .45); }
.btn-inside-top.has-backdrop { background: linear-gradient(rgba(15, 23, 42, .55), rgba(15, 23, 42, .25)); }
.btn-inside-bottom.has-backdrop { background: linear-gradient(rgba(15, 23, 42, .25), rgba(15, 23, 42, .55)); }
.hover-fade:is(:hover, :focus-within) .home-col-media img { opacity: .7; }
.hover-zoom:is(:hover, :focus-within) .home-col-media img { transform: scale(1.08); }
.hover-overlay .home-col-media::after { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.hover-overlay:is(:hover, :focus-within) .home-col-media::after { opacity: .35; }
.hover-grayscale .home-col-media img { filter: grayscale(1); }
.hover-grayscale:is(:hover, :focus-within) .home-col-media img { filter: none; }
/* Slide Up: text and button always show below the image; on hover the text
   panel slides up over the bottom of the image. */
.hover-slide-up.has-image .home-col-body:not(.home-col-body-above) { position: relative; z-index: 1; background: var(--white); border-radius: var(--radius) var(--radius) 0 0; }
.hover-slide-up.has-image:is(:hover, :focus-within) .home-col-body:not(.home-col-body-above) { transform: translateY(-2.5rem); box-shadow: 0 -10px 24px rgba(15, 23, 42, .14); }
@media (hover: none) {
  .hover-grayscale .home-col-media img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-col-media img, .home-col-body { transition: none; }
  .hover-zoom:is(:hover, :focus-within) .home-col-media img { transform: none; }
}
@media (max-width: 1024px) {
  .home-col { flex: 1 1 calc(50% - var(--cb-gap, 1.25rem) / 2); }
}
@media (max-width: 768px) {
  .home-col { flex-basis: 100%; }
}
/* Add To Cart Popup column blocks: the drawer is phone-narrow at any screen
   size, so every column takes its full width, one under another. */
.mini-cart-blocks { padding: 0 1.25rem; }
.mini-cart-blocks .home-col { flex-basis: 100%; }

/* Hero Image block (Customize > Design > Home Page). The image sits in
   .hero-bg (cover); .hero-overlay darkens it by --hero-overlay (0-1) for
   readable text. Without an image the theme gradient above shows instead. */
.hero-block { position: relative; display: flex; overflow: hidden; padding: 0; text-align: left; }
.hero-block.has-image { background: #0f172a; }
.hero-h-small { min-height: 300px; }
.hero-h-medium { min-height: 450px; }
.hero-h-large { min-height: 600px; }
.hero-h-full { min-height: 100vh; min-height: 100svh; }
.hero-bg { position: absolute; inset: 0; background: var(--hero-image) center / cover no-repeat; }
/* Parallax: the image stays put while the page scrolls over it. */
.hero-style-parallax .hero-bg { background-attachment: fixed; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--hero-overlay, .4)); }
.hero-inner { position: relative; z-index: 1; display: flex; width: 100%; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.hero-v-top .hero-inner { align-items: flex-start; }
.hero-v-middle .hero-inner { align-items: center; }
.hero-v-bottom .hero-inner { align-items: flex-end; }
.hero-x-left .hero-inner { justify-content: flex-start; text-align: left; }
.hero-x-center .hero-inner { justify-content: center; text-align: center; }
.hero-x-right .hero-inner { justify-content: flex-end; text-align: right; }
.hero-content { max-width: 680px; min-width: 0; }
.hero-content > :last-child { margin-bottom: 0; }
.hero-content a:not(.btn) { color: inherit; text-decoration: underline; }
.hero-content img { max-width: 100%; height: auto; }
.hero-x-left .hero-actions { justify-content: flex-start; }
.hero-x-right .hero-actions { justify-content: flex-end; }
.hero-actions { flex-wrap: wrap; }
/* Touch devices and phones: background-attachment: fixed is unsupported or
   janky there, so parallax falls back to a static image. */
@media (hover: none), (max-width: 768px), (prefers-reduced-motion: reduce) {
  .hero-style-parallax .hero-bg { background-attachment: scroll; }
}

/* Product Grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
/* LAYOUT_GRID_COLUMNS — fixed column count on wider viewports */
@media (min-width: 900px) {
  .product-grid[style*="--grid-cols"] { grid-template-columns: repeat(var(--grid-cols), 1fr); }
}
.product-card { position: relative; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s; }
.product-card:hover { transform: translateY(-2px); }

/* Wishlist heart — absolute-positioned badge on grid/search cards by
   default; .wishlist-heart--inline (product detail page) instead sits
   inline with a text label. */
.wishlist-heart {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  transition: transform .1s;
}
.wishlist-heart:hover { transform: scale(1.08); }
.wishlist-heart:disabled { opacity: .6; cursor: default; }
.wishlist-heart .heart-icon { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 2; }
.wishlist-heart.is-active .heart-icon { fill: var(--danger); stroke: var(--danger); }

.wishlist-heart--inline {
  position: static;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  padding: .4rem .8rem;
  gap: .4rem;
  background: var(--white);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.wishlist-heart--inline .heart-icon { width: 16px; height: 16px; }
.wishlist-heart--inline .wishlist-heart-label { font-size: .85rem; font-weight: 500; color: var(--text); }
.wishlist-heart--inline.is-active { border-color: var(--danger); }

.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product-title-row h1 { flex: 1; }

/* Compact icon-only heart in list/table action rows */
.pli-foot .wishlist-heart, .pli-side .wishlist-heart, .pt-action .wishlist-heart { position: static; width: 30px; height: 30px; }
.product-image { aspect-ratio: 4/3; overflow: hidden; background: var(--bg); }
.product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-info { padding: 1rem; }
.product-info h3 { font-size: .95rem; margin-bottom: .25rem; }
.product-info .brand { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; }
.pricing { display: flex; align-items: baseline; gap: .5rem; }
.price { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.list-price { font-size: .9rem; color: var(--text-muted); text-decoration: line-through; }
.savings { font-size: .8rem; color: var(--success); }
.product-actions { padding: .75rem 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; }
.badge { display: inline-block; padding: .2rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.badge-featured { background: #fef3c7; color: #92400e; }

/* Product list layout (FEATURED_LAYOUT / LIST_LAYOUT = list) — LiveCart productList.tpl */
.product-list { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.product-list-item {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.product-list-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.product-list-item .pli-image {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
  background: var(--bg);
  border-radius: 6px;
  display: block;
}
.product-list-item .pli-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-list-item .pli-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.product-list-item .pli-brand { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.product-list-item .pli-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.product-list-item .pli-title a { color: var(--primary); font-weight: 700; }
.product-list-item .pli-title a:hover { text-decoration: underline; }
.product-list-item .pli-descr {
  margin: 0;
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-list-item .pli-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}
.product-list-item .pli-price { display: inline-flex; align-items: baseline; gap: .5rem; margin-right: auto; }
.product-list-item .pli-cart { margin: 0; }
.product-list-item .pli-foot .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .product-list-item { flex-direction: column; align-items: stretch; padding: 1rem; }
  .product-list-item .pli-image { width: 100%; height: 200px; flex-basis: auto; }
  .product-list-item .pli-foot .pli-price { margin-right: 0; width: 100%; }
}

/* Category pages' list view (.product-list-3col): a strict three columns —
   [image 200px] [name, manufacturer, description] [price, list price, Add to Cart 200px].
   The home page Featured Frames keep the layout above. */
.product-list-3col .product-list-item { flex-direction: row; align-items: stretch; }
/* Image column: Settings > Display > Images > Browsing Thumbnail (--pli-thumb-w x --pli-thumb-h on the list),
   at most 40% of the row so the details keep room. */
.product-list-3col .product-list-item .pli-image { flex: 0 0 var(--pli-thumb-w, 200px); width: var(--pli-thumb-w, 200px); max-width: 40%; height: var(--pli-thumb-h, 150px); align-self: center; }
.product-list-3col .product-list-item .pli-main { padding: 0 20px; justify-content: center; }
/* Details column is always left aligned (whatever the Product List Item alignments say). */
.product-list-3col .product-list-item .pli-main :is(.pli-title, .pli-brand, .pli-descr) { text-align: left; }
.product-list-3col .product-list-item .pli-price { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; margin-right: 0; text-align: right; }
/* Right column: price / list price and Add to Cart (+ Try On, wishlist) as one tight group,
   vertically centered and right aligned. */
.product-list-3col .product-list-item .pli-side {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
}
.product-list-3col .pli-buttons { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.pi-btn-full .product-list-3col .pli-buttons { align-self: stretch; align-items: stretch; }
.product-list-3col .pli-buttons .btn { white-space: nowrap; text-align: center; }
@media (max-width: 640px) {
  .product-list-3col .product-list-item .pli-image { width: 100%; max-width: 100%; height: var(--pli-thumb-h, 200px); max-height: 240px; flex-basis: auto; }
  .product-list-3col .product-list-item .pli-main { padding: 0; }
  .product-list-3col .product-list-item .pli-side { width: 100%; flex-basis: auto; align-items: stretch; }
  .product-list-3col .product-list-item .pli-price { align-items: flex-start; text-align: left; }
  .product-list-3col .pli-buttons { align-items: stretch; }
  .product-list-3col .pli-buttons .btn { width: 100%; }
  .product-list-3col .pli-buttons .wishlist-heart { align-self: center; }
}

/* Product table layout (FEATURED_LAYOUT = table) — LiveCart productTable.tpl */
.product-table-wrap { margin: 2rem 0; overflow-x: auto; }
/* Category pages: Customize > Design > Category Page > Product List / Grid
   Items (classes and --pi-* custom properties on .product-collection).
   Button colors left empty fall back to the theme's primary button. */
.pi-styled .product-card, .pi-styled .product-list-item, .pi-styled .product-table,
.pi-styled .product-image, .pi-styled .pli-image, .pi-styled .pt-image img { background: var(--pi-bg, var(--white)); }
.pi-styled .btn-add-cart { background: var(--pi-btn-bg, var(--btn-primary-bg, var(--primary))); color: var(--pi-btn-color, var(--btn-primary-color, #fff)); border-radius: var(--pi-btn-radius, var(--btn-primary-radius, var(--radius))); }
.pi-styled .btn-add-cart:hover { background: var(--pi-btn-hover-bg, var(--btn-primary-hover-bg, var(--primary-dark))); color: var(--pi-btn-hover-color, var(--btn-primary-hover-color, #fff)); }
.pi-btn-auto .btn-add-cart { width: auto; }
.pi-btn-full .btn-add-cart { width: 100%; text-align: center; }
/* Full width: the button's form takes the free space in its row (grid card / list row). */
.pi-btn-full .product-actions form { flex: 1; }
/* Text: name tag sizes (h3 = the views' usual size), then alignment. */
.product-info .pi-name:not(.pi-name-h3) { margin: 0 0 .25rem; line-height: 1.3; }
.product-info .pi-name-h1 { font-size: 1.4rem; } .product-info .pi-name-h2 { font-size: 1.2rem; }
.product-info .pi-name-h4 { font-size: .88rem; } .product-info .pi-name-h5 { font-size: .8rem; }
.product-info p.pi-name { font-size: .95rem; font-weight: 500; }
.product-list-item .pli-title.pi-name-h1 { font-size: 1.6rem; } .product-list-item .pli-title.pi-name-h2 { font-size: 1.35rem; }
.product-list-item .pli-title.pi-name-h4 { font-size: 1rem; } .product-list-item .pli-title.pi-name-h5 { font-size: .9rem; }
.product-list-item p.pli-title { font-size: 1.1rem; }
.pt-name .pi-name { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.pt-name .pi-name-h1 { font-size: 1.2rem; font-weight: 700; } .pt-name .pi-name-h2 { font-size: 1.1rem; font-weight: 700; }
.pt-name .pi-name-h4 { font-size: .95rem; } .pt-name .pi-name-h5 { font-size: .85rem; }
/* Manufacturer / price / list price: p keeps the usual size, headings are bigger and bold. */
.pi-styled .pi-t-p, .pi-styled :is(.pi-t-h1, .pi-t-h2, .pi-t-h3, .pi-t-h4, .pi-t-h5) { margin: 0; }
.pi-styled .pi-t-h1 { font-size: 1.6rem; font-weight: 700; } .pi-styled .pi-t-h2 { font-size: 1.35rem; font-weight: 700; }
.pi-styled .pi-t-h3 { font-size: 1.15rem; font-weight: 700; } .pi-styled .pi-t-h4 { font-size: 1rem; font-weight: 700; }
.pi-styled .pi-t-h5 { font-size: .9rem; font-weight: 700; }
/* Grid: manufacturer and prices are inline, as before; a line of their own only when they need it. */
.pi-styled .product-info .brand { display: inline; }
:is(.pi-brand-align-center, .pi-brand-align-right) .product-info .brand { display: block; }
.pi-styled :is(.pi-price-row, td.pt-price) > * { display: inline; }
.pi-price-split :is(.pi-price-row, td.pt-price) > * { display: block; }
/* Alignment */
.pi-name-align-left .pi-name { text-align: left; } .pi-name-align-center .pi-name { text-align: center; } .pi-name-align-right .pi-name { text-align: right; }
.pi-brand-align-left :is(.brand, .pli-brand) { text-align: left; } .pi-brand-align-center :is(.brand, .pli-brand) { text-align: center; } .pi-brand-align-right :is(.brand, .pli-brand) { text-align: right; }
.pi-price-align-left :is(.pi-price-row, td.pt-price, th.pt-price) { text-align: left; } .pi-price-align-center :is(.pi-price-row, td.pt-price, th.pt-price) { text-align: center; } .pi-price-align-right :is(.pi-price-row, td.pt-price, th.pt-price) { text-align: right; }
.pi-price-split.pi-list-align-left .list-price { text-align: left; } .pi-price-split.pi-list-align-center .list-price { text-align: center; } .pi-price-split.pi-list-align-right .list-price { text-align: right; }
/* Add to Cart: grid card footer / table cell. In list view: price and button in the fixed right column. */
.pi-btn-align-center .product-actions { justify-content: center; } .pi-btn-align-right .product-actions { justify-content: flex-end; }
.pi-btn-align-left td.pt-action-cart { text-align: left; } .pi-btn-align-center td.pt-action-cart { text-align: center; } .pi-btn-align-right td.pt-action-cart { text-align: right; }
.pi-btn-size-small .btn-add-cart { padding: .3rem .65rem; font-size: .78rem; }
.pi-btn-size-large .btn-add-cart { padding: .65rem 1.25rem; font-size: 1rem; }
/* List view short description (Product List Item): alignment, max lines (0 = all). */
.pi-descr-align-left .pli-descr { text-align: left; } .pi-descr-align-center .pli-descr { text-align: center; } .pi-descr-align-right .pli-descr { text-align: right; }
.pi-descr-clamp .product-list-item .pli-descr { -webkit-line-clamp: var(--pi-descr-lines, 3); line-clamp: var(--pi-descr-lines, 3); }
.pi-descr-all .product-list-item .pli-descr { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pi-styled .product-list-item .pli-descr.pi-t-p { font-size: .875rem; }
.pi-styled .product-list-item .pli-descr:not(.pi-t-p) { color: var(--text); line-height: 1.35; }
.product-table { width: 100%; border-collapse: collapse; background: var(--white); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.product-table th, .product-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.product-table thead th { background: var(--bg); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.product-table tbody tr:last-child td { border-bottom: none; }
.product-table .pt-image { width: 72px; }
.product-table .pt-image img { width: 64px; height: 48px; object-fit: contain; border-radius: 4px; display: block; background: var(--bg); }
.product-table .pt-price { white-space: nowrap; }
.product-table .pt-action { width: 1%; white-space: nowrap; text-align: right; }
.product-table .pt-action form { margin: 0; }

/* Categories */
.categories-section, .featured-products, .news-section { padding: 3rem 0; }
.categories-section h2, .featured-products h2, .news-section h2 { margin-bottom: 1.5rem; font-size: 1.5rem; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.category-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; box-shadow: var(--shadow); color: var(--text); }
.category-card:hover { background: var(--primary); color: #fff; text-decoration: none; }

/* Virtual Mirror Promo */
.virtual-mirror-promo { background: var(--white); padding: 3rem 0; }
.mirror-promo-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.mirror-promo-text h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.mirror-promo-text p { color: var(--text-muted); margin-bottom: 1.5rem; }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.news-card { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.news-card h3 { margin-bottom: .5rem; }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { color: var(--primary); }
.news-card small { color: var(--text-muted); }
.news-card-body { margin-top: .5rem; line-height: 1.6; }
.news-card-body img { width: auto; max-width: 100%; height: auto; border-radius: var(--radius); margin: .75rem 0; }
.news-archive-link { margin-top: 1.5rem; text-align: center; }

/* News list (Customize > Design > News > Articles Layout): 1 column is a
   stacked list with the image beside the text; 2 and 3 columns are a grid
   of cards with the image on top. */
.news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.news-list.news-cols-2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.news-list.news-cols-3 { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
.static-page.news-page-wide { max-width: none; }
.news-post { min-width: 0; }
.news-cols-1 .news-post { border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
.news-cols-1 .news-post:last-child { border-bottom: none; }
.news-cols-1 .news-post.has-image { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.news-cols-2 .news-post, .news-cols-3 .news-post { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.news-cols-2 .news-post-body, .news-cols-3 .news-post-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.15rem 1.15rem; }
.news-cols-2 .news-more, .news-cols-3 .news-more { margin-top: auto; padding-top: .5rem; }
.news-post-image { display: block; overflow: hidden; border-radius: var(--radius); background: #f1f5f9; aspect-ratio: 16 / 10; }
.news-cols-2 .news-post-image, .news-cols-3 .news-post-image { border-radius: 0; }
.news-post-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-post h2 { margin-bottom: .25rem; }
.news-cols-2 .news-post h2, .news-cols-3 .news-post h2 { font-size: 1.2rem; }
.news-post h2 a { color: inherit; text-decoration: none; }
.news-post h2 a:hover { color: var(--primary); text-decoration: underline; }
.news-post small { color: var(--text-muted); display: block; margin-bottom: .75rem; }
.news-excerpt { margin: 0 0 .25rem; line-height: 1.6; }
.news-more { display: inline-block; margin-top: .5rem; font-weight: 600; }
@media (max-width: 960px) {
  .news-list.news-cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .news-list.news-cols-2, .news-list.news-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .news-cols-1 .news-post.has-image { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}

/* Category Page */
.category-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0 1rem; }
.category-header h1 { font-size: 1.5rem; }
.category-controls { display: flex; align-items: center; gap: 1rem; font-size: .875rem; color: var(--text-muted); }
.category-controls select { padding: .4rem; border-radius: var(--radius); border: 1px solid var(--border); }
.layout-switch { display: inline-flex; gap: .25rem; }
.layout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); background: var(--white); font-size: 1rem; line-height: 1;
}
.layout-btn:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.layout-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.category-description { margin-bottom: 1rem; color: var(--text-muted); line-height: 1.6; }
/* Subcategory chips */
.subcategory-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.subcategory-chip { display: inline-block; padding: .3rem .9rem; border: 1px solid var(--border); border-radius: 2rem; font-size: .8rem; color: var(--text); background: var(--white); }
.subcategory-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; font-size: .85rem; }
.filter-label { color: var(--text-muted); margin-right: .25rem; }
.filter-chip { display: inline-block; padding: .2rem .75rem; border: 1px solid var(--border); border-radius: 2rem; color: var(--text); background: var(--white); cursor: pointer; }
.filter-chip:hover, .filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); text-decoration: none; }
.filter-chip-clear { background: #fee2e2; color: var(--danger); border-color: #fca5a5; }
.filter-count { opacity: .65; font-size: .9em; }
.filter-chip-clear:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* Empty state */
.empty-state { text-align: center; padding: 3rem 0; color: var(--text-muted); }
.empty-state p { margin-bottom: 1rem; }
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; }
.pagination a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Product Detail */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2rem 0; }
.manufacturer-logo { margin-bottom: .75rem; }
.manufacturer-logo img { max-height: 50px; width: auto; object-fit: contain; }
.main-image { position: relative; }
.main-image a { display: block; cursor: zoom-in; }
.main-image img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--radius); }
.watermark-overlay { display: block; width: auto; height: auto; -webkit-user-select: none; user-select: none; }
.image-thumbs { display: flex; gap: .5rem; margin-top: .5rem; }
.thumb { object-fit: contain; background: var(--bg); border-radius: var(--radius); cursor: pointer; border: 2px solid var(--border); }
.thumb:hover { border-color: var(--primary); }
.product-details-info .brand { font-size: .85rem; color: var(--pd-brand, var(--text-muted)); text-transform: uppercase; margin-bottom: .25rem; }
.product-details-info .product-name { font-size: 1.8rem; margin-bottom: .5rem; }
.product-pricing { margin: 1rem 0; font-size: 1.4rem; }
.product-specs { background: var(--bg); padding: 1rem; border-radius: var(--radius); margin: 1rem 0; font-size: .9rem; }
.product-specs div { padding: .25rem 0; }
.option-group { margin-bottom: 1rem; }
.option-group label { display: block; font-weight: 600; margin-bottom: .25rem; }
.option-group select { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.variation-selectors { margin-bottom: 1rem; }
.variation-group { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.variation-group label { min-width: 90px; font-size: .95rem; }
.variation-group select { flex: 1; max-width: 260px; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .95rem; }
.qty-field { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.qty-field input, .qty-field select { width: 80px; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.add-to-cart-form { margin-top: 1rem; }

/* Product Details Block (Customize > Design > Product Page). The block's
   inline style sets --pd-* only for values the admin changed; everything
   falls back to the theme, so the defaults look like the plain page. */
.pd-block { border: var(--pd-border, 0 none); border-radius: var(--pd-radius, 0); background: var(--pd-bg, transparent); align-self: start; }
.pd-pad-small { padding: 1rem; }
.pd-pad-medium { padding: 1.5rem; }
.pd-pad-large { padding: 2.25rem; }
.pd-shadow-small { box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.pd-shadow-medium { box-shadow: 0 6px 18px rgba(15, 23, 42, .12); }
.pd-shadow-large { box-shadow: 0 16px 40px rgba(15, 23, 42, .16); }
.pd-shadow-custom { box-shadow: var(--pd-shadow, none); }
.pd-block .product-name { color: var(--pd-name, inherit); }
.product-details-info h2.product-name { font-size: 1.5rem; }
.product-details-info h3.product-name { font-size: 1.25rem; }
.pd-block .product-pricing .price { color: var(--pd-price, var(--primary)); }
.pd-block .product-pricing .list-price { color: var(--pd-list-price, var(--text-muted)); }
.pd-block .product-pricing .savings { color: var(--pd-savings, var(--success)); }
.pd-block.pd-brand-normal .brand { text-transform: none; }
.pd-block .sku { color: var(--pd-sku, inherit); }
/* Add to Cart (and "Contact us to purchase" in its place) */
.pd-block .pd-cart-btn { border-radius: var(--pd-btn-radius, var(--radius)); border: 0; }
/* Its own colors (Product Page > Product Details Block) first, else the
   General Styles > Buttons ones. */
.pd-btn-style-solid .pd-cart-btn { background: var(--pd-btn, var(--btn-primary-bg, var(--primary))); color: var(--pd-btn-text, var(--btn-primary-color, #fff)); }
.pd-btn-style-solid .pd-cart-btn:hover { filter: brightness(.92); background: var(--pd-btn, var(--btn-primary-hover-bg, var(--primary-dark))); color: var(--pd-btn-text, var(--btn-primary-hover-color, #fff)); }
/* Outline: 2px border inside the same overall size as Solid */
.pd-btn-style-outline .pd-cart-btn { background: transparent; box-shadow: inset 0 0 0 2px var(--pd-btn, var(--btn-outline-border-color, var(--primary))); color: var(--pd-btn-text, var(--pd-btn, var(--btn-outline-color, var(--primary)))); }
.pd-btn-style-outline .pd-cart-btn:hover { background: var(--pd-btn, var(--btn-outline-hover-bg, var(--primary))); color: var(--btn-outline-hover-color, #fff); }
.pd-btn-style-ghost .pd-cart-btn { background: transparent; box-shadow: none; color: var(--pd-btn-text, var(--pd-btn, var(--btn-ghost-color, var(--primary)))); padding-left: .5rem; padding-right: .5rem; }
.pd-btn-style-ghost .pd-cart-btn:hover { background: var(--btn-ghost-hover-bg, rgba(15, 23, 42, .06)); color: var(--pd-btn-text, var(--pd-btn, var(--btn-ghost-hover-color, var(--primary)))); }
.pd-btn-size-small .pd-cart-btn { padding: .45rem 1rem; font-size: .85rem; }
.pd-btn-size-medium .pd-cart-btn { padding: .6rem 1.4rem; font-size: .95rem; }
.pd-btn-size-large .pd-cart-btn { padding: .75rem 2rem; font-size: 1rem; }
.pd-btn-size-full .pd-cart-btn { display: block; width: 100%; padding: .8rem 1.5rem; font-size: 1.05rem; text-align: center; }
/* Details alignment: Center */
.pd-align-center { text-align: center; }
.pd-align-center .product-title-row { justify-content: center; }
.pd-align-center .product-title-row .product-name { flex: 0 1 auto; }
.pd-align-center .qty-field, .pd-align-center .variation-group, .pd-align-center .pd-badges { justify-content: center; }
.pd-align-center .product-specs, .pd-align-center .product-options, .pd-align-center .pd-extra { text-align: left; }
/* Trust badges */
.pd-badges { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin: 1rem 0; padding: 0; }
.pd-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500; color: var(--pd-badge, var(--text-muted)); }
.pd-badge svg { width: 1.3rem; height: 1.3rem; flex: none; }
.pd-badge-image img { display: block; max-height: 48px; width: auto; max-width: 100%; }
/* Attribute fields below Add to Cart (--attr-text / --attr-bg per field) */
.pd-attrs { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 1rem 0; }
.pd-align-center .pd-attrs { align-items: center; }
.pd-attr { color: var(--attr-text, inherit); font-size: .95rem; overflow-wrap: anywhere; max-width: 100%; }
.pd-attr-label { font-weight: 600; margin-right: .35rem; }
.pd-attr-value > :first-child { margin-top: 0; }
.pd-attr-value > :last-child { margin-bottom: 0; }
.pd-attr-value img { max-width: 100%; height: auto; }
/* HTML attribute values (e.g. colors) often use headings: keep them at text size */
.pd-attr-value :is(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 600; margin: 0 0 .25rem; line-height: 1.35; color: inherit; }
.pd-attr-badge { display: inline-flex; align-items: baseline; padding: .25rem .75rem; border-radius: 999px; background: var(--attr-bg, #eef2ff); color: var(--attr-text, var(--primary)); font-size: .85rem; }
.pd-attr-box { align-self: stretch; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--attr-bg, var(--bg)); }
.pd-attr-underline { align-self: stretch; padding-bottom: .4rem; border-bottom: 2px solid var(--attr-text, var(--border)); }
.pd-align-center .pd-attr-box, .pd-align-center .pd-attr-underline { text-align: center; }

/* Extra content block below Add to Cart */
.pd-extra { margin-top: 1rem; border-radius: var(--radius); overflow-wrap: anywhere; }
.pd-extra-pad-none { padding: 0; }
.pd-extra-pad-small { padding: .75rem; }
.pd-extra-pad-medium { padding: 1.25rem; }
.pd-extra-pad-large { padding: 2rem; }
.pd-extra > :first-child { margin-top: 0; }
.pd-extra > :last-child { margin-bottom: 0; }
.pd-extra img { max-width: 100%; height: auto; }
/* Image position: Right (side by side only; phones keep the image first) */
@media (min-width: 769px) {
  .product-detail.pd-image-right > .product-images { order: 2; }
}

.purchase-variations-form { border-top: 1px solid var(--border); padding-top: 1rem; }
/* auto-fit/minmax reflows off the box's own actual width rather than a
   viewport breakpoint — .product-detail's own 768px/1080-ish breakpoints
   mean the info column's real width doesn't track screen size linearly, so
   a fixed max-width media query here left a "dead zone" (~769-1079px
   viewports) where two 240px flex items no longer fit their column but
   the page wasn't narrow enough to hit the old mobile breakpoint either. */
.variation-purchase-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.variation-purchase-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.variation-purchase-title { font-size: 1rem; margin: 0 0 .75rem; }
.variation-purchase-actions { text-align: center; }
.product-tabs { padding: 2rem 0; }
.tab-nav { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.tab-btn {
  background: none; border: none; padding: .75rem 1.5rem; cursor: pointer;
  font-size: .95rem; font-family: inherit; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); background: #f1f5f9; }
.tab-btn.active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }
.tab-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* PRODUCT_TABS off — sections stack, each with its own heading */
.product-tabs.is-stacked .tab-content { display: block; margin-bottom: 2.5rem; }
.product-tabs.is-stacked .tab-content h2 { font-size: 1.3rem; margin-bottom: 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); }
.tab-content .short-description { font-weight: 500; margin-bottom: 1rem; }
.tab-content .short-description + * { margin-top: 0; }

/* Stock display — PRODUCT_DISPLAY_STOCK / _LOW_STOCK / _NO_STOCK */
.product-stock { margin: .5rem 0 .75rem; font-size: .9rem; font-weight: 600; }
.product-stock .stock-in { color: var(--success); }
.product-stock .stock-low { color: var(--warning); }
.product-stock .stock-out { color: var(--danger); }
.review { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.review-header { display: flex; gap: 1rem; align-items: center; margin-bottom: .5rem; }
.rating { color: #f59e0b; }
.review-form { margin-top: 2rem; padding: 1.5rem; background: var(--bg); border-radius: var(--radius); }
.review-form h3 { margin-bottom: 1rem; }
.related-products { padding: 2rem 0; }
.related-products h2 { margin-bottom: 1rem; }
.product-specification { padding: 0 0 2rem; }
.product-specification h2 { margin-bottom: 1rem; }
.inquiry-intro { color: var(--text-muted); margin-bottom: 1rem; }
.product-tabs.is-stacked #tab-inquiry { padding: 1.5rem; background: var(--bg); border-radius: var(--radius); }
.inquiry-form { max-width: 520px; }
.inquiry-form .form-group { margin-bottom: 1rem; }
.inquiry-form label { display: block; margin-bottom: .35rem; font-weight: 600; }
.inquiry-form input, .inquiry-form textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }
.inquiry-form textarea { resize: vertical; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table tr:nth-child(odd) { background: var(--bg); }
.spec-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table .spec-label { width: 30%; font-weight: 600; color: var(--text-muted); }
.spec-table .spec-value p:first-child { margin-top: 0; }
.spec-table .spec-value p:last-child { margin-bottom: 0; }

/* Cart */
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; padding: 2rem 0; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border); }
.cart-table th { background: var(--bg); }
.cart-product { display: flex; align-items: center; gap: 1rem; }
.cart-product img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); }
.cart-product input[type=number] { width: 70px; padding: .4rem; border: 1px solid var(--border); border-radius: var(--radius); }
.cart-summary { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); align-self: start; }
.summary-row, .summary-total { display: flex; justify-content: space-between; margin-bottom: .75rem; }
.summary-total { font-size: 1.1rem; border-top: 2px solid var(--border); padding-top: .75rem; margin-top: .75rem; }
.empty-cart { text-align: center; padding: 4rem 0; }
/* Qty stepper (cart page + mini-cart) */
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qty-btn { background: none; border: none; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; color: var(--secondary); display: flex; align-items: center; justify-content: center; transition: background .1s; }
.qty-btn:hover { background: var(--bg); }
.qty-value { min-width: 36px; text-align: center; font-size: .9rem; font-weight: 500; padding: 0 .25rem; }
/* Coupon row */
.coupon-row { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
/* cart-btn is styled in the Header section above */

/* Wishlist */
.wishlist-guest-notice { margin: 1rem 0; }
.wishlist-actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.wishlist-table .btn-add-cart { width: auto; }
/* Bare stock classes for contexts outside .product-stock (e.g. the wishlist page) */
.stock-in { color: var(--success); }
.stock-low { color: var(--warning); }
.stock-out { color: var(--danger); }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; padding: 2rem 0; }
.checkout-section { background: var(--white); padding: 1.5rem; border-radius: var(--radius); margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.checkout-section h2 { font-size: 1.1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.checkout-summary { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); align-self: start; position: sticky; top: 80px; }
.checkout-summary h3 { margin-bottom: 1rem; }
.checkout-item { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.checkout-total { display: flex; justify-content: space-between; margin-top: 1rem; font-size: 1rem; }
/* Progress steps */
.checkout-steps { display: flex; align-items: center; gap: .5rem; padding: 1.25rem 0 .25rem; font-size: .85rem; }
.checkout-steps .step { color: var(--primary); font-weight: 600; }
.checkout-steps .step-sep { color: var(--text-muted); }
/* Payment options */
.payment-option { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; margin-bottom: .75rem; transition: border-color .15s; }
.payment-option input { margin-top: .2rem; }
.payment-option.selected { border-color: var(--primary); background: #eff6ff; }
.payment-option-content { flex: 1; }
/* Shipping options */
.shipping-option { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; margin-bottom: .6rem; transition: border-color .15s; }
.shipping-option input { margin: 0; flex-shrink: 0; }
.shipping-option-name { flex: 1; }
.shipping-option-price { flex-shrink: 0; white-space: nowrap; margin-left: 1rem; }
.shipping-option.selected { border-color: var(--primary); background: #eff6ff; }
.payment-icons img { height: 24px; margin-right: .5rem; }
/* Card fields block */
.card-fields-wrap { background: var(--bg); border-radius: var(--radius); padding: 1rem; margin-top: .75rem; }
/* Test card notice */
.test-card-notice { background: #fef9c3; border: 1px solid #fde047; border-radius: 6px; padding: .6rem .9rem; font-size: .85rem; color: #713f12; margin-bottom: 1rem; }
/* Terms + submit */
.checkout-terms { margin: 1rem 0; display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }

/* User Account */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding: 2rem 0; }
.account-sidebar ul { list-style: none; }
.account-sidebar ul li { border-bottom: 1px solid var(--border); }
.account-sidebar ul li a { display: block; padding: .75rem; color: var(--text); }
.account-sidebar ul li a:hover, .account-sidebar ul li a.active { color: var(--primary); background: #eff6ff; text-decoration: none; }
.account-sidebar h3 { font-size: 1.1rem; margin-bottom: .75rem; }
.auth-form { max-width: 420px; margin: 3rem auto; background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.auth-form h1 { margin-bottom: 1.5rem; }
.auth-links { margin-top: 1rem; text-align: center; font-size: .9rem; display: flex; flex-direction: column; gap: .5rem; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .25rem; font-weight: 500; font-size: .9rem; }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=number],
.form-group input[type=tel],
.form-group input[type=search],
.form-group select,
.form-group textarea { width: 100%; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .95rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Tables */
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th, .orders-table td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border); }
.orders-table th { background: var(--bg); font-size: .85rem; }

/* Breadcrumb */
.breadcrumb { padding: 1rem 0; font-size: .85rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }

/* Order Complete */
.order-complete { text-align: center; padding: 4rem 1rem; max-width: 600px; margin: 0 auto; }
.success-icon { font-size: 4rem; color: var(--success); }
.order-summary-box { background: var(--bg); padding: 1.5rem; border-radius: var(--radius); text-align: left; margin: 2rem 0; }
.order-item-row, .order-total-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.next-steps { display: flex; gap: 1rem; justify-content: center; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); }
.modal-content { position: relative; z-index: 1; background: var(--white); border-radius: var(--radius); padding: 2rem; max-width: 900px; width: 95%; max-height: 90vh; overflow: auto; box-shadow: 0 25px 50px rgba(0,0,0,.25); }

/* Virtual Mirror */
.mirror-wrapper { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }
.face-container { position: relative; width: 100%; max-width: 400px; }
.face-container .face img { width: 100%; border-radius: var(--radius); }
.frame-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.frame-overlay img { width: 60%; position: absolute; top: 30%; left: 20%; }
.input-tabs { display: flex; margin-bottom: 1rem; border-bottom: 2px solid var(--border); }
.input-tab { background: none; border: none; padding: .5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.input-tab.active { border-bottom-color: var(--primary); color: var(--primary); }
.input-panel { display: none; }
.input-panel.active { display: block; }
.sample-face-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; }
.sample-face-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.sample-face-grid img:hover, .sample-face-grid img.active { border-color: var(--primary); }
.gender-toggle { display: flex; gap: .5rem; margin-bottom: .75rem; }
.gender-btn { padding: .25rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: none; cursor: pointer; }
.gender-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.frame-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .75rem; }
.frame-grid img { width: 100%; border-radius: 4px; cursor: pointer; border: 2px solid transparent; background: var(--bg); }
.frame-grid img:hover, .frame-grid img.active { border-color: var(--primary); }

/* Static page */
.static-page { max-width: 780px; margin: 2rem auto; }
.static-page h1 { margin-bottom: 1rem; }
.page-lead { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.page-body { line-height: 1.8; }
.page-body h2, .page-body h3 { margin: 1.5rem 0 .5rem; }
.page-body p { margin-bottom: 1rem; }
.page-body ul, .page-body ol { margin: .5rem 0 1rem 1.5rem; }
.page-body li { margin-bottom: .25rem; }
.page-body img { width: auto; max-width: 100%; height: auto; border-radius: var(--radius); margin: .75rem 0; }

/* Status badges */
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef9c3; color: #854d0e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-secondary { background: #f1f5f9; color: #475569; }

@media (max-width: 1024px) {
  .footer-grid[style] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .site-sidebar { width: 190px; }
  .site-body { gap: 1rem; }
  .header-top .container { gap: 1rem; }
  .top-nav-list { flex-wrap: wrap; }
  .top-nav-item > a { padding: var(--top-nav-padding, .85rem) .85rem; }
  .product-grid[style*="--grid-cols"] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
  .product-detail { gap: 2rem; }
  .cart-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; }
  .account-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 768px) {
  .category-layout, .product-detail, .cart-layout, .checkout-layout,
  .account-layout, .mirror-promo-content, .mirror-wrapper { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
  .hero-h-small { min-height: 240px; }
  .hero-h-medium { min-height: 340px; }
  .hero-h-large { min-height: 440px; }
  .hero-inner { padding-top: 2rem; padding-bottom: 2rem; }
  .hero-content p { font-size: 1.05rem; margin-bottom: 1.25rem; }
  /* Sidebar (side category tree, home brand/price filters) folds behind a
     full-width "Browse categories" button above the page content instead of
     squeezing it; left out on cart/checkout (.no-phone-sidebar). */
  .site-body { flex-direction: column; align-items: stretch; gap: 0; }
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 44px; margin-top: .75rem; padding: 0 1rem;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer;
  }
  .sidebar-toggle::after, .filters-toggle::after { content: '▾'; font-size: .8rem; color: var(--text-muted); transition: transform .2s; }
  .sidebar-toggle.is-open::after, .filters-toggle.is-open::after { transform: rotate(180deg); }
  .site-sidebar { display: none; width: 100%; padding: .5rem 0 0; }
  .site-sidebar.is-open { display: block; }
  .no-phone-sidebar .site-sidebar { display: none !important; }
  .side-nav-row { min-height: 44px; }
  .side-nav-toggle { width: 44px; }
  .site-main { width: 100%; }
  .account-layout > * { min-width: 0; }
  /* Wide tables scroll inside their own box rather than widening the page. */
  .orders-table { display: block; overflow-x: auto; white-space: nowrap; }
  .category-header { flex-wrap: wrap; gap: .75rem; }
  .category-controls { flex-wrap: wrap; gap: .5rem .75rem; }

  /* Single-column grids: let children shrink below their content width. */
  .product-detail > *, .cart-layout > *, .checkout-layout > *, .category-layout > * { min-width: 0; }
  .product-detail { gap: 1.5rem; padding: 1rem 0; }
  .manufacturer-logo img, .product-detail img:not(.thumb):not(.watermark-overlay) { max-width: 100%; height: auto; }
  /* Image and variation thumbnails: one row that scrolls sideways. */
  .image-thumbs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: .35rem;
  }
  .image-thumbs .thumb { flex: 0 0 auto; max-width: 40vw; height: auto; scroll-snap-align: start; }
  .site-main select, .site-main input, .site-main textarea { max-width: 100%; }

  /* Cart rows become cards: image | name + remove / price / qty + subtotal. */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; }
  .cart-table tr {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas: "img name remove" "img price price" "img qty subtotal";
    gap: .35rem .75rem;
    align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
  }
  .cart-table td { padding: 0; border: none; width: auto !important; min-width: 0; }
  .cart-table td:nth-child(1) { grid-area: img; align-self: start; }
  .cart-table td:nth-child(1) img { width: 64px; height: auto; max-height: 96px; }
  .cart-table td:nth-child(2) { grid-area: name; overflow-wrap: anywhere; }
  .cart-table td:nth-child(3) { grid-area: price; font-size: .85rem; color: var(--text-muted); }
  .cart-table td:nth-child(4) { grid-area: qty; }
  .cart-table td:nth-child(5) { grid-area: subtotal; font-weight: 600; text-align: right; }
  .cart-table td:nth-child(6) { grid-area: remove; align-self: start; }
  .cart-summary { padding: 1.1rem; }
  .coupon-row input, .checkout-coupon input { min-width: 0; }
  .spec-table td { padding: .55rem .6rem; overflow-wrap: anywhere; }
  /* ── Header on phones/tablets ──────────────────────────────────────
     Row 1: logo · wishlist + cart · ☰.  Row 2: search.
     Behind ☰ (.site-header.nav-open): currency + account links, then the
     top menu as a vertical list. The information menu's pages are always
     also in the top menu (both need "Main header menu"), so it only shows
     in the panel when the Top Menu block is off. */
  .header-top { padding: .6rem 0; }
  .header-top .container { flex-wrap: wrap; gap: .6rem .75rem; }
  /* Brand takes whatever row 1 leaves after cart + ☰, up to --logo-size,
     so large logos shrink on phones instead of pushing the buttons down. */
  .header-brand { order: 1; flex: 1 1 0; margin-right: auto; }
  .logo { font-size: min(calc(var(--logo-size, 120px) / 5), 1.6rem); }
  .header-actions { display: contents; }
  .header-cart-group { order: 2; display: flex; align-items: center; gap: .75rem; margin-left: auto; }
  .nav-toggle { order: 3; display: inline-flex; }
  .header-top .container:not(:has(.header-cart-group)) > .nav-toggle { margin-left: auto; }
  .header-search { order: 4; flex-basis: 100%; }
  /* Top Center on phones: row 1 logo, centered. Row 2 search box, then
     wishlist + cart (icons and counts only, to leave the search room) and ☰. */
  .logo-pos-center .header-brand { flex: 0 0 100%; justify-content: center; margin-right: 0; }
  .logo-pos-center .header-search { order: 2; flex: 1 1 0; max-width: none; }
  .logo-pos-center .header-cart-group { order: 3; margin-left: 0; }
  .logo-pos-center .header-top .container > .nav-toggle { order: 4; margin-left: 0; }
  .logo-pos-center .header-cart-group .uc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logo-pos-center .header-cart-group .cart-btn { padding-left: .7rem; padding-right: .7rem; }
  .header-account { order: 5; flex-basis: 100%; display: none; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; padding-top: .6rem; border-top: 1px solid var(--border); }
  .site-header.nav-open .header-account { display: flex; }
  /* In the ☰ panel account links always show their labels. */
  .header-account .uc-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .header-account .uc-link { min-height: 44px; }
  /* Hamburger style: one ☰ on phones. The dropdown's items join the header ☰
     panel as full-width rows instead of a second menu button. */
  .user-menu { display: contents; }
  .user-menu-toggle { display: none; }
  .user-menu-panel {
    order: 5; position: static; flex-basis: 100%; min-width: 0; display: none;
    padding: .35rem 0 0; border: none; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .site-header.nav-open .user-menu-panel { display: block; }
  .user-menu-panel a, .user-menu-panel button { min-height: 48px; padding: .6rem .25rem; font-size: 1rem; }
  .user-menu-panel .user-menu-sub { min-height: 44px; }
  /* Smooth open for the ☰ panel pieces */
  .site-header.nav-open .header-account, .site-header.nav-open .user-menu-panel,
  .site-header.nav-open .main-nav { animation: nav-panel-in .2s ease; }
  .header-top .container > .header-info-menu { order: 6; flex-basis: 100%; margin-left: 0; display: none; }
  .site-header.nav-open:not(.has-top-menu) .header-info-menu { display: block; }
  .header-info-menu ul { flex-wrap: wrap; gap: .4rem 1.1rem; }
  .header-info-menu li + li::before { content: none; }
  .header-info-menu a { font-size: var(--info-menu-size, .85rem); }

  .main-nav { display: none; }
  .site-header.nav-open .main-nav { display: block; max-height: 65vh; overflow-y: auto; }
  .main-nav .container { padding: 0; }
  .top-nav-list { flex-direction: column; width: 100%; }
  .top-nav-item > a { padding: var(--top-nav-padding, .8rem) 1rem; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
  /* Hover dropdowns don't work on touch: each category with children gets a
     ▾ button (.top-nav-sub-toggle) that expands its list in place. */
  .main-nav li.has-dropdown { display: flex; flex-wrap: wrap; }
  .main-nav li.has-dropdown > a { flex: 1; min-width: 0; }
  .main-nav .has-dropdown > a::after { content: none !important; }
  .top-nav-sub-toggle {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 52px; min-height: 48px; padding: 0;
    background: none; border: none; border-left: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: var(--top-nav-color, #e2e8f0); font-size: .9rem; cursor: pointer;
  }
  .top-nav-sub-toggle::before { content: '▾'; transition: transform .2s; }
  .sub-open > .top-nav-sub-toggle::before { transform: rotate(180deg); }
  .main-nav .top-nav-list .dropdown { display: none !important; }
  .main-nav .top-nav-list .sub-open > .dropdown {
    display: block !important; position: static; flex-basis: 100%; min-width: 0; width: auto;
    margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none;
    background: var(--dropdown-bg, rgba(255,255,255,.05));
  }
  .main-nav .dropdown li a {
    min-height: 44px; padding: .65rem 1rem .65rem 2rem;
    color: var(--dropdown-color, #cbd5e1); font-size: var(--dropdown-size, .9rem); border-left: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .main-nav .dropdown .dropdown li a { padding-left: 3rem; font-size: .85rem; }
  .main-nav .dropdown li a:hover { background: var(--dropdown-hover-bg, rgba(255,255,255,.08)); color: var(--dropdown-hover-color, #fff); }
  .main-nav .dropdown .top-nav-sub-toggle { color: var(--dropdown-color, #cbd5e1); border-bottom-color: rgba(255,255,255,.06); }

  /* ── Category page ── */
  .category-header h1 { flex-basis: 100%; font-size: 1.3rem; }
  .category-controls { width: 100%; }
  .category-controls select { flex: 1; min-width: 0; min-height: 44px; }
  .layout-btn { width: 44px; height: 44px; }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer;
  }
  .filters-toggle-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem;
    padding: 0 .35rem; border-radius: 1rem; background: var(--primary); color: #fff; font-size: .75rem;
  }
  .category-filters { display: none; margin-bottom: 1rem; padding: .85rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
  .category-filters.is-open { display: block; }
  .category-filters .filter-bar:last-child { margin-bottom: 0; }
  .filter-label { flex-basis: 100%; }
  .filter-chip, .subcategory-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .9rem; font-size: .9rem; }

  /* Product grids: two columns (one on very small screens, below). */
  .product-grid, .product-grid[style*="--grid-cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
  .product-info { padding: .75rem; }
  .product-info h3 { font-size: .9rem; overflow-wrap: anywhere; }
  .product-actions { flex-direction: column; padding: .6rem; }
  .product-actions form, .product-actions .btn { width: 100%; text-align: center; }
  .product-card .wishlist-heart { width: 44px; height: 44px; top: .4rem; right: .4rem; }

  /* ── Product page ── */
  .product-details-info .product-name { font-size: 1.4rem; }
  .pd-pad-medium { padding: 1.1rem; }
  .pd-pad-large { padding: 1.4rem; }
  .product-details-info h2.product-name { font-size: 1.25rem; }
  .product-details-info h3.product-name { font-size: 1.1rem; }
  .add-to-cart-form .btn-large, .variation-purchase-actions .btn, .cart-disabled-notice .btn,
  .product-images .btn-mirror { display: block; width: 100%; text-align: center; }
  .product-images .btn-mirror { margin-top: .75rem; }
  .variation-group { flex-wrap: wrap; }
  .variation-group select { max-width: none; min-width: 0; min-height: 44px; }
  .qty-field input, .qty-field select { min-height: 44px; }
  .tab-btn { padding: .75rem 1rem; }

  /* ── Cart & checkout: summary follows the items/form (DOM order) ── */
  .qty-btn, .btn-remove { width: 44px; height: 44px; }
  .coupon-row button, .coupon-row input { min-height: 44px; }
  .checkout-summary { position: static; }
  .checkout-section, .checkout-summary { padding: 1rem; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; gap: 0; }
  .checkout-steps { flex-wrap: wrap; }
  .shipping-option-price { margin-left: .5rem; }

  /* ── General: 44px tap targets, 16px inputs (stops iOS zoom-on-focus) ── */
  .btn { padding-top: .7rem; padding-bottom: .7rem; }
  button.btn, .tab-btn { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; padding: 0 11px; }
  .cart-btn { min-height: 44px; }
  .currency-switcher select { min-height: 44px; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
  .wishlist-link { min-height: 44px; }
  .header-account a, .header-account .btn-link { display: inline-flex; align-items: center; min-height: 44px; }
  .header-search input, .header-search button, .header-search-manufacturer { min-height: 44px; }
  /* !important: a floor that has to beat per-component font sizes. */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea { font-size: 16px !important; }
  .pagination { flex-wrap: wrap; }
  .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .footer-col ul li { margin-bottom: 0; }
  .footer-col ul li a { display: inline-block; padding: .55rem 0; }
  .footer-logout button { padding: .55rem 0; }
  .footer-band { margin-bottom: 1.5rem; }
  .footer-band-top { padding-bottom: 1.5rem; }
  /* Footer columns stack on phones. */
  .footer-grid, .footer-grid[class*="footer-cols-"] { grid-template-columns: 1fr !important; gap: 1.5rem; }
  :where(.site-main) img { max-width: 100%; height: auto; }
}
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-header.nav-open .header-account, .site-header.nav-open .user-menu-panel, .site-header.nav-open .main-nav { animation: none; }
}
@media (max-width: 359px) {
  .product-grid, .product-grid[style*="--grid-cols"] { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .header-actions { font-size: .8rem; }
  .cart-btn { padding: .4rem .75rem; font-size: .8rem; }
  .footer-powered-by { overflow-wrap: anywhere; }
}

/* Contact Us (/contact, frontend/contact.ejs) */
.contact-form { max-width: 640px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.contact-form textarea { resize: vertical; min-height: 140px; font: inherit; }
.contact-req { color: #b91c1c; }
.contact-opt { font-weight: 400; color: var(--text-muted); font-size: .85rem; }
.contact-err { display: block; margin-top: .25rem; color: #b91c1c; font-size: .85rem; }
.contact-form [aria-invalid="true"] { border-color: #dc2626; }
.contact-note { margin-top: .75rem; font-size: .85rem; color: var(--text-muted); }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* Embeds pasted into TinyMCE content (Google Maps, videos…) shrink to fit
   narrow columns and phones instead of overflowing. */
.page-body iframe, .home-col-text iframe, .site-footer iframe, .hero iframe,
.category-description iframe, .tab-content iframe { max-width: 100%; }

/* Manage > Forms (partials/custom-form.ejs): on /form/:slug and wherever a
   [form id=…] shortcode is. Errors, required marks and the honeypot share the
   Contact Us classes above. */
.custom-form { max-width: 640px; margin: 1rem 0 1.5rem; scroll-margin-top: 1rem; }
.custom-form-desc { color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.6; }
.custom-form .form-group textarea { resize: vertical; min-height: 120px; font: inherit; }
.custom-form .has-error input:not([type=checkbox]):not([type=radio]), .custom-form .has-error select, .custom-form .has-error textarea { border-color: #dc2626; }
.custom-form-choices { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.custom-form-choices legend { font-weight: 500; font-size: .9rem; margin-bottom: .35rem; padding: 0; }
.custom-form-choices label, .custom-form-check label { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin-bottom: .3rem; cursor: pointer; }
.custom-form-choices input, .custom-form-check input { width: auto; margin: 0; }
.custom-form-success { font-size: 1rem; }
.home-col-text .custom-form, .footer-richtext .custom-form { max-width: none; }
.custom-form .form-group input[type=date] { width: 100%; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .95rem; font-family: inherit; background: var(--white); min-height: 2.4rem; }

/* My Account > order detail > Communications (frontend/user/order-detail.ejs):
   the order's messages as a chat, the customer's on the right. */
.order-comms { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 1.25rem 0; scroll-margin-top: 1rem; }
.order-comms-head { padding: .75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9rem; }
.order-comms-body { padding: 1rem; }
.order-comms-intro { margin: 0 0 1rem; font-size: .88rem; color: #64748b; }
.order-comms-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.order-msg { max-width: 80%; padding: .6rem .85rem; border-radius: 12px; font-size: .9rem; }
.order-msg-store { align-self: flex-start; background: #f1f5f9; border-bottom-left-radius: 3px; }
.order-msg-customer { align-self: flex-end; background: #dbeafe; border-bottom-right-radius: 3px; }
.order-msg-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; margin-bottom: .2rem; font-size: .76rem; color: #64748b; }
.order-msg-meta strong { color: #1e293b; }
.order-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.order-comms-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.order-comms-form label { font-size: .85rem; font-weight: 600; }
.order-comms-form textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: .9rem; resize: vertical; }
@media (max-width: 768px) { .order-msg { max-width: 92%; } }

/* My Account > order detail: Repeat Order / Print Invoice, beside the status. */
.order-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.order-actions form { margin: 0; }

/* My Account > order detail: items with the totals breakdown, then
   Shipping / Payment Information and both addresses (two per row). */
.od-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
.od-items { overflow: hidden; margin-bottom: 1.25rem; }
.od-card-head { padding: .75rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9rem; }
.od-items .od-num { text-align: right; white-space: nowrap; }
.od-option { display: block; color: #64748b; }
.od-summary { margin-left: auto; max-width: 420px; padding: .75rem 1rem 1rem; font-size: .9rem; }
.od-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.od-summary-row span:last-child { white-space: nowrap; }
.od-discount { color: #16a34a; }
.od-total { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid var(--border); font-weight: 700; font-size: 1rem; }
.od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.od-box { padding: 1rem; }
.od-box-title { margin-bottom: .6rem; font-size: .8rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.od-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .9rem; }
.od-dl dt { color: #64748b; }
.od-dl dd { margin: 0; overflow-wrap: anywhere; }
.od-dl code { font-size: .82rem; }
.od-address { font-style: normal; line-height: 1.7; font-size: .9rem; }
.od-none { margin: 0; color: #94a3b8; font-size: .9rem; }
@media (max-width: 640px) {
  .od-grid { grid-template-columns: 1fr; }
  .od-summary { max-width: none; }
}