/* ==========================================================================
   Trend Sutra — Men's Clothing
   Design language: warm-gold luxury boutique — cream/off-white, near-black
   ink, antique-gold accent, a small set of status colors (red/green/blue)
   for sale, success and info states, plus a five-color "artistic accent"
   set (rust/teal/plum/olive/denim) cycled across categories, circles and
   badges to keep the menswear storefront feeling lively and colorful
   without abandoning the refined gold/black/cream base.
   Type: Playfair Display (headings) + Inter (everything else — body,
   labels, nav, buttons)

   NOTE: the accent variable is still named --gold/--gold-deep/--gold-pale
   throughout this file (hundreds of rules reference it) — only the VALUES
   changed, from ink-black to true antique gold, so every existing rule
   picks up the new palette automatically without needing to be touched.
   Same story for --maroon-* and --gold-warm* (footer + drawer + any other
   solid-dark panel): still old variable names, now painted with the same
   near-black + gold pair used everywhere else. */

:root {
  --ivory:        #f8f6f2;
  --ivory-deep:   #f5f2ec;
  --paper:        #ffffff;
  --ink:          #0a0a0a;
  --ink-soft:     #666666;
  --line:         #edeae4;
  --gold:         #c9a84c;
  --gold-deep:    #a07830;
  --gold-pale:    #e8c97a;
  --error:        #e53935;
  --success:      #2e7d32;
  --info:         #1565c0;

  /* Solid dark blocks (topbar, drawer, footer) — near-black paired with
     the same antique-gold accent used everywhere else. Variable names
     kept as --maroon-* and --gold-warm* for backward-compatible CSS
     targeting even though the values are neutral-black/gold, not maroon. */
  --maroon-deep:   #0a0a0a;
  --maroon:        #111111;
  --gold-warm:     #c9a84c;
  --gold-warm-pale:#e8c97a;

  --stone: #aaaaaa;
  --taupe: #666666;
  --mid:   #666666;

  /* Artistic accent set — a small, muted-but-vivid palette layered on top
     of the gold/ink/cream base to give the menswear categories, badges
     and section dividers some color variety without turning the site
     into a rainbow. Cycled per-category (see category_accent_class() in
     includes/functions.php) rather than tied to any single meaning. */
  --accent-rust:  #bd5a34;
  --accent-teal:  #2f6f6b;
  --accent-plum:  #7a3b56;
  --accent-olive: #6f7a3a;
  --accent-denim: #35577a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-lift: 0 12px 48px rgba(0, 0, 0, 0.15);

  --maxw: 1280px;
}

* { box-sizing: border-box; }

/* Stops the double-tap-to-zoom gesture mobile browsers fire when you
   double-tap/double-click anywhere on the page — that's what was
   "enlarging" the site. touch-action: manipulation removes just that
   double-tap zoom (and the old 300ms tap delay) while leaving pinch-to-
   zoom fully working, so it doesn't hurt accessibility the way
   `user-scalable=no` on the viewport meta tag would. */
html { scroll-behavior: smooth; touch-action: manipulation; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

h1 { font-size: 2.75rem; line-height: 1.15; }
h2 { font-size: 2rem; line-height: 1.2; }
h3 { font-size: 1.4rem; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Consistent, visible focus ring for keyboard navigation across every
   interactive element — only shows for keyboard focus (:focus-visible),
   not on a stray mouse click, so it never looks like a styling glitch. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------- */
/* Scroll-reveal — progressive enhancement only. Elements are fully        */
/* visible by default; main.js adds .reveal-init (which is what actually  */
/* hides them) right before it starts observing, then swaps in            */
/* .reveal-in once each one scrolls into view. If JS never runs, nothing  */
/* is ever hidden — content stays visible with zero risk to accessibility */
/* or no-JS visitors.                                                     */
/* ---------------------------------------------------------------------- */
.reveal-init { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal-init.reveal-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; transition: none; }
  /* Same principle applied to the header's motion polish — logo badge
     hover/tilt, the header's drop-in entrance, the cart badge pulse,
     and the mobile menu button's press animation all disable cleanly
     for anyone who's asked the OS to reduce motion. */
  .site-header { animation: none; }
  .logo-badge, .icon-link svg, .cart-badge, .mobile-nav-toggle { transition: none !important; animation: none !important; }
  .logo:hover .logo-badge { transform: none; }
  /* Hero motion — background drift, copy entrance stagger, and the
     scroll-cue dot all disable to plain, fully-visible states. */
  .hero-fullbleed .hero-media img, .hero-fullbleed .hero-media video, .hero-slide-bg img { animation: none !important; }
  .hero-fullbleed .hero-copy > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-scroll-cue span { animation: none !important; opacity: 1; }
  .hero-slide-bg { transition: none !important; }
  .page-title-slide { transition: none !important; }
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 0.9em;
}
/* A small gold flourish before every eyebrow label — a recurring,
   recognisable mark that reads as "considered boutique design" rather
   than a generic template, without touching layout or content. */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.muted { color: var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Topbar — static (never scrolling/marquee), brand tone strip above nav    */
/* ---------------------------------------------------------------------- */
.topbar {
  background: linear-gradient(90deg, var(--ink) 0%, #1c1712 50%, var(--ink) 100%);
  color: var(--ink-soft);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  padding: 8px 0;
  position: relative;
}
/* A thin multi-color signature stripe under the topbar — the same
   artistic accent palette used for the category circles, run together
   like a designer's colour swatch. It's the first thing a visitor sees,
   so it sets the "colorful, artistic menswear label" tone before the
   header itself even loads in. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1.5px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--gold-deep) 0%, var(--accent-rust) 20%, var(--accent-plum) 40%,
    var(--accent-denim) 60%, var(--accent-teal) 80%, var(--accent-olive) 100%);
  opacity: 0.9;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.topbar-msg { display: flex; align-items: center; gap: 6px; color: #888; }
.topbar-msg i { color: var(--gold); }
.topbar-links { display: flex; gap: 16px; }
.topbar-links a {
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  transition: color 0.18s ease;
}
.topbar-links a:hover { color: var(--gold); }
@media (max-width: 640px) {
  .topbar .container { justify-content: center; }
  .topbar-links { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Header                                                                   */
/* ---------------------------------------------------------------------- */
.site-header {
  /* Frosted-glass sticky header — reads as a native app bar rather than a
     plain static strip, and lets a hint of the page show through as you
     scroll under it. */
  background: rgba(248, 246, 242, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 50;
  animation: header-drop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
@keyframes header-drop-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* Auto-hide on scroll — tucks the header away while scrolling down
   (so it doesn't sit over content on a long page) and brings it back
   the moment you scroll up, even a little. See main.js for the
   direction-detection logic that toggles this class. */
.site-header.site-header--hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-header .container {
  display: flex;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Playfair Display', serif;
  /* Fluid, not fixed — the old flat 1.6rem could out-grow the space left
     by the nav + account/wishlist/cart icons at in-between (tablet /
     small-laptop) widths, which is what was clipping the brand name.
     clamp() lets it shrink smoothly with the viewport instead of ever
     overflowing, so the full name always stays on-screen and legible. */
  font-size: clamp(1.05rem, 0.86rem + 0.85vw, 1.56rem);
  letter-spacing: -0.015em;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  margin-right: 12px;
  transition: opacity 0.2s ease;
}
.logo:hover { opacity: 0.9; }
.logo span { color: var(--gold); }
/* Two-tone wordmark — first word in ink, the rest carried on a small
   gold-to-rust gradient (an artistic, hand-painted touch rather than a
   flat single color) and set in a light italic for contrast against the
   bold upright first word. Falls back to plain gold text (via the
   `.logo span` rule above) in any browser without background-clip:text. */
.logo-name-accent {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold) 45%, var(--accent-rust) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-name {
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.logo-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0; margin-bottom: 6px;
}

/* Circular ring badge around the uploaded logo image — the header's
   focal point. */
.logo-badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.logo:hover .logo-badge {
  transform: scale(1.07) rotate(-4deg);
  box-shadow: 0 0 0 4px var(--gold-pale);
}
/* Monogram fallback — shown in place of an uploaded logo image (Admin ->
   Settings -> Branding) so the header always carries a strong circular
   brand mark rather than sometimes having none at all. Same ring/sizing
   as .logo-badge / .drawer-logo-badge; only the fill and type differ. */
.logo-badge--mono {
  background: linear-gradient(145deg, var(--ink) 0%, #2b2420 60%, var(--accent-rust) 160%);
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
}
.drawer-logo-badge.logo-badge--mono { font-size: 13px; }

.logo-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  flex-shrink: 0;
}

a.logo {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
a.logo:hover { border-color: var(--gold-pale); }

/* ── Nav menu + dropdown mega-menu ── */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.main-nav a, .nav-item > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: #444;
  padding: 8px 13px;
  border-radius: 7px;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.main-nav a:hover, .main-nav a.active,
.nav-item:hover > a, .nav-item > a.active {
  color: var(--ink);
  background: var(--ivory-deep);
}
/* A slim gold underline that grows in from the centre on hover/active —
   a small boutique-label flourish under the pill background rather than
   the pill being the only feedback. */
.main-nav a::after, .nav-item > a::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-nav a:hover::after, .main-nav a.active::after,
.nav-item:hover > a::after, .nav-item > a.active::after {
  transform: scaleX(1);
}
.nav-item { position: relative; }
.nav-item .ch-arr {
  font-size: 9px;
  color: var(--stone);
  transition: transform 0.22s ease;
  margin-left: 1px;
}
.nav-item:hover .ch-arr { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 60;
}
.nav-item:hover .nav-drop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #444;
  border-radius: 7px;
  transition: all 0.15s ease;
}
.nav-drop a:hover { background: var(--ivory-deep); color: var(--ink); padding-left: 16px; }
.nav-drop a i { color: var(--gold); width: 15px; text-align: center; font-size: 12px; flex-shrink: 0; }
.nav-drop .drop-all { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.nav-drop-divider { height: 1px; background: var(--line); margin: 5px 0; }
/* Mega-menu icon swatches — small colour-filled circles behind each
   category's icon, cycling the same accent palette as the homepage/shop
   category circles (see category_accent_class() in includes/functions.php)
   so the dropdown reads as part of the same designed system rather than a
   plain text list. Overrides the flat gold `.nav-drop a i` rule above for
   icons that sit inside a swatch. */
.nav-drop-icon {
  width: 25px; height: 25px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-drop a:hover .nav-drop-icon { transform: scale(1.14) rotate(-6deg); }
.nav-drop-icon i { color: #fff; width: auto; font-size: 11px; }
.nav-drop-icon--all { background: linear-gradient(135deg, var(--ink), #2b2420); }
.nav-drop-icon--all i { color: var(--gold); }
.nav-drop-icon.accent-rust  { background: var(--accent-rust); }
.nav-drop-icon.accent-teal  { background: var(--accent-teal); }
.nav-drop-icon.accent-plum  { background: var(--accent-plum); }
.nav-drop-icon.accent-olive { background: var(--accent-olive); }
.nav-drop-icon.accent-denim { background: var(--accent-denim); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.icon-link {
  position: relative;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color 0.2s ease;
}
/* Icon-only header actions — the label stays in the markup (and
   readable to screen readers / the aria-label on the link) but is
   visually hidden at every viewport width. */
.icon-link-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.icon-link svg { width: 21px; height: 21px; stroke-width: 1.5; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.icon-link:hover, .icon-link.active { color: var(--gold-deep); }
.icon-link:hover svg { transform: translateY(-1px) scale(1.1); }
.icon-link:active svg { transform: scale(0.92); }
.icon-link-cart-wrap { position: relative; display: inline-flex; }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  background: var(--error);
  color: #fff;
  border-radius: 50%;
  font-size: 0.62rem;
  min-width: 16px;
  height: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--paper);
  transition: transform 0.2s ease;
}
@keyframes cart-badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.icon-link:hover .cart-badge { animation: cart-badge-pulse 0.45s ease; }

/* Account hover-dropdown — desktop only, reuses .nav-drop */
.nav-acct { position: relative; }
.nav-acct .icon-link { cursor: pointer; }
.nav-acct .nav-drop { left: auto; right: 0; min-width: 200px; }
.nav-acct-name {
  padding: 10px 12px 6px;
  font-size: 0.68rem;
  color: var(--stone);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-acct .nav-drop a.logout-link, .nav-acct .nav-drop a.logout-link i { color: var(--error); }

/* Side-menu trigger — mobile only. Desktop keeps the horizontal nav as
   the only navigation; the hamburger and its drawer are strictly a
   small-screen pattern, hidden by default and switched on inside the
   max-width:860px block below. */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.mobile-nav-toggle:active { transform: scale(0.94); }
.mobile-nav-toggle[aria-expanded="true"] {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--gold-pale);
}
.mobile-nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------- */
/* Mobile slide-in nav drawer — light panel, matching the reference        */
/* header design exactly (white drawer, gold accents, sectioned links).    */
/* ---------------------------------------------------------------------- */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(10, 10, 10, 0.52);
  z-index: 90; opacity: 0; transition: opacity 0.25s ease;
}
.mobile-nav-overlay.open { display: block; opacity: 1; }
.mobile-nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 84%; max-width: 320px;
  background: var(--paper); color: var(--ink);
  z-index: 100; padding: 0;
  transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; padding-top: max(20px, env(safe-area-inset-top));
  background: var(--ink); flex-shrink: 0;
}
.mobile-nav-drawer-head .drawer-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--paper);
}
.mobile-nav-drawer-head .drawer-logo span { color: var(--gold); }
.drawer-logo-badge {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--gold); padding: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.drawer-logo-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mobile-nav-close {
  background: rgba(255, 255, 255, 0.08); border: none; font-size: 15px; line-height: 1;
  color: rgba(255, 255, 255, 0.7); cursor: pointer;
  width: 34px; height: 34px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.mobile-nav-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* User strip */
.mob-user {
  padding: 14px 20px;
  background: var(--ivory-deep);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.mob-user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink); font-weight: 700; flex-shrink: 0;
}
.mob-user-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mob-user-email { font-size: 11px; color: var(--stone); }

/* Quick icons row */
.mob-quick {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.mob-quick-item {
  padding: 14px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  position: relative; transition: background 0.15s ease, color 0.15s ease;
}
.mob-quick-item:hover { background: var(--ivory-deep); color: var(--gold-deep); }
.mob-quick-item i { font-size: 18px; color: var(--gold-deep); }
.mob-quick-badge {
  position: absolute; top: 8px; right: calc(50% - 20px);
  background: var(--error); color: #fff;
  font-size: 9px; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.mobile-nav-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; font-size: 0.9rem; font-weight: 500; color: #333;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.15s ease;
}
.mobile-nav-drawer a:hover { background: var(--ivory-deep); color: var(--gold-deep); padding-left: 26px; }
.mobile-nav-drawer a.active { color: var(--gold-deep); font-weight: 600; }
.mobile-nav-drawer a i { width: 18px; text-align: center; color: var(--gold-deep); font-size: 13px; flex-shrink: 0; }
.mobile-nav-divider { display: none; }
.mobile-nav-label, .mob-section {
  padding: 9px 20px 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 2px; color: var(--stone);
  background: var(--ivory-deep); border-bottom: 1px solid var(--line);
}
.mobile-nav-policy-links { display: block; }
.mobile-nav-policy-links a {
  display: flex; padding: 13px 20px; font-size: 0.86rem;
  color: #333; border-bottom: 1px solid #f5f5f5;
}
.mobile-nav-policy-links a:hover,
.mobile-nav-policy-links a.active { color: var(--gold-deep); background: var(--ivory-deep); }
.mobile-nav-policy-links a.active { font-weight: 600; }
.mobile-nav-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--ivory-deep);
  font-size: 12px; color: var(--stone); text-align: center;
  margin-top: auto;
}
.mobile-nav-footer a { display: inline-flex; align-items: center; gap: 6px; color: #25D366; font-weight: 600; font-size: 13px; }

/* ---------------------------------------------------------------------- */
/* App-style bottom tab bar (mobile only)                                    */
/* ---------------------------------------------------------------------- */
.bottom-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255, 253, 250, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(10, 10, 10,0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-tabbar-inner { display: flex; }
.bottom-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 8px; font-size: 0.62rem; letter-spacing: 0.02em;
  color: var(--ink-soft); position: relative; -webkit-tap-highlight-color: transparent;
}
.bottom-tabbar a.active { color: var(--gold-deep); }
.bottom-tabbar svg { width: 22px; height: 22px; }
.bottom-tabbar .tab-badge {
  position: absolute; top: 2px; right: calc(50% - 20px);
  background: var(--gold-deep); color: #fff; border-radius: 50%;
  font-size: 0.6rem; min-width: 15px; height: 15px; line-height: 15px; text-align: center;
  padding: 0 2px;
}

/* ---------------------------------------------------------------------- */
/* Sticky mobile "Add to Bag" bar on product pages                           */
/* ---------------------------------------------------------------------- */
.sticky-add-bar {
  display: none;
  /* Stacks above the mobile bottom tab bar (62px tall) instead of
     covering it — both stay visible: Home/Wishlist/Cart/Account below,
     price + Add to Cart above. Desktop never shows the tab bar, so
     .sticky-add-bar is only ever mobile anyway (see media query below). */
  position: fixed; left: 0; right: 0; bottom: 62px; z-index: 80;
  background: rgba(255, 253, 250, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(10, 10, 10,0.1);
  padding: 12px 16px;
  align-items: center; gap: 12px;
}
.sticky-add-bar .sab-price { font-family: 'Playfair Display', serif; font-size: 1.05rem; white-space: nowrap; }
.sticky-add-bar .btn { flex: 1; padding: 13px 14px; }

/* ---------------------------------------------------------------------- */
/* Mobile filter drawer (shop page)                                          */
/* ---------------------------------------------------------------------- */
.mobile-filter-toggle { display: none; }
.filter-drawer-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10, 10, 10,0.5); z-index: 90;
}
.filter-drawer-overlay.open { display: block; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                   */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease, transform 0.1s ease;
  font-family: inherit;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Tactile press feedback — a small scale-down on tap/click reads as a
   native app button rather than a static web link. */
.btn:not([disabled]):active { transform: scale(0.97); }
.btn-primary {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(10, 10, 10,0.5); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--ivory); transform: translateY(-1px); }
.btn-gold {
  background: var(--gold-deep);
  color: #fff;
  border-color: var(--gold-deep);
}
.btn-gold:hover { background: var(--gold); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(15, 26, 48,0.55); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.72rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-link {
  background: none; border: none; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: 0.85rem;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                      */
/* ---------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 60px;
  padding: 72px 0 96px;
}
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy p { font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 16px; }
.hero-visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--gold-pale), var(--ivory-deep));
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hero-visual img, .hero-visual video { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }

/* Pull-quote variant of .hero-visual — used on Our Journey instead of
   the generic illustration reused elsewhere on the site, which read as
   a placeholder rather than something written for this page. Same box
   (aspect ratio, gradient, shadow), just filled with an editorial quote
   instead of an image, so it feels considered rather than borrowed. */
.hero-visual--quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px;
}
.hero-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--gold-deep);
  opacity: 0.55;
  margin-bottom: 18px;
}
.hero-quote-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: 22ch;
}
.hero-quote-attribution {
  display: block;
  margin-top: 22px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--gold-deep);
}

/* Full-bleed variant (homepage only — our-journey.php keeps the plain
   two-column .hero above). Background image/video fills the whole
   section behind a dark scrim so the admin-editable heading/subtext
   stay readable regardless of what's uploaded. */
.hero.hero-fullbleed {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
  color: var(--ivory);
}
.hero-fullbleed .hero-media {
  position: absolute; inset: 0; z-index: 0; background: var(--ink);
  overflow: hidden;
}
.hero-fullbleed .hero-media img,
.hero-fullbleed .hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Biased toward the top third rather than dead-center — uploaded hero
     photos are typically a full-length model shot, and a plain center
     crop tends to cut the face off on wide/short viewports. */
  object-position: center 20%;
  /* Slow, continuous "Ken Burns" drift — keeps the hero feeling alive
     without being distracting. Runs forever since it's the section's
     backdrop, not content someone reads once and moves past. */
  animation: hero-media-drift 18s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes hero-media-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Hero slider — multiple background layers stacked and crossfaded via
   opacity (only .active is visible/on top), driven by main.js. Falls
   back to nothing extra when there's just the single static image
   (.hero-slide-bg is only rendered at all when 2+ slides exist). */
.hero-slide-bg {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity 1.1s ease;
}
.hero-slide-bg.active { opacity: 1; z-index: 1; }
.hero-slide-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 20%;
  animation: hero-media-drift 18s ease-in-out infinite alternate;
  transform-origin: center;
}
.hero-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}
/* The button itself is a generous 22px tap target (touch-friendly on
   mobile); the visible dot is a smaller ::after circle centered inside
   it, so the on-screen mark stays dainty while the hit area doesn't. */
.hero-slider-dot {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  position: relative; cursor: pointer; touch-action: manipulation;
}
.hero-slider-dot::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(250, 248, 243, 0.4);
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-slider-dot:hover::after { background: rgba(250, 248, 243, 0.7); }
.hero-slider-dot.active::after { background: var(--ivory); transform: translate(-50%, -50%) scale(1.3); }
/* The hero-scroll-cue below sits bottom-center too — nudge it up out of
   the dots' way whenever a slider is actually in play. */
.hero-has-slider .hero-scroll-cue { bottom: 56px; }

/* Softer, more "faded" hero treatment — two layered gradients instead of
   one flat corner-to-corner tint: a lighter left-to-right wash for text
   legibility (eased back from the old, harder-edged version), plus a
   gentle fade at the very bottom into the page's own cream tone so the
   hero blends into the next section instead of ending on a hard line. */
.hero-fullbleed .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(248, 246, 242, 0.9) 0%, rgba(248, 246, 242, 0) 14%),
    linear-gradient(100deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.34) 45%, rgba(10, 10, 10, 0.06) 78%);
}
.hero-fullbleed .hero-inner { position: relative; z-index: 1; padding: 90px 0; }
.hero-fullbleed .hero-copy { max-width: 620px; }
.hero-fullbleed .hero-copy .eyebrow { color: var(--gold-pale); }
.hero-fullbleed .hero-copy h1 { color: var(--ivory); margin-bottom: 22px; }
.hero-fullbleed .hero-copy p { color: rgba(250,248,243,0.9); font-size: 1.05rem; max-width: 52ch; margin-bottom: 34px; }
.hero-fullbleed .btn-outline { color: var(--ivory); border-color: var(--ivory); }
.hero-fullbleed .btn-outline:hover { background: var(--ivory); color: var(--ink); }

/* Entrance choreography — each direct child of .hero-copy (eyebrow, h1,
   p, actions row) fades and rises in on its own slight delay instead of
   the whole block appearing at once. Purely additive: if animation is
   disabled (reduced motion, below), everything is simply visible. */
.hero-fullbleed .hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-copy-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-fullbleed .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-fullbleed .hero-copy > *:nth-child(2) { animation-delay: 0.2s; }
.hero-fullbleed .hero-copy > *:nth-child(3) { animation-delay: 0.35s; }
.hero-fullbleed .hero-copy > *:nth-child(4) { animation-delay: 0.5s; }
@keyframes hero-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll cue — a small animated invitation to keep scrolling, sitting
   bottom-center of the hero. Hidden on mobile, where the hero is short
   enough that the next section is already visible without a hint. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(250, 248, 243, 0.55);
  border-radius: 14px;
  z-index: 1;
}
.hero-scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: var(--ivory);
  border-radius: 2px;
  animation: hero-scroll-dot 1.7s ease infinite;
}
@keyframes hero-scroll-dot {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------------------------------------------------------------------- */
/* Homepage "Our Story" teaser — one short paragraph + a Read More link   */
/* through to the full Our Journey page. Sits just before Testimonials.   */
/* ---------------------------------------------------------------------- */
.our-story-section {
  position: relative;
  text-align: center;
  overflow: hidden;
  background: var(--ivory-deep);
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Oversized, near-invisible paisley behind the text — texture and depth
   without competing with the copy for attention. */
.our-story-bg-motif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  transform: translate(-50%, -50%);
  color: var(--gold-deep);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.our-story-bg-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.our-story-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.our-story-inner .eyebrow { justify-content: center; }
.our-story-motif {
  width: 38px;
  margin: 0 auto 10px;
  color: var(--gold-deep);
  opacity: 0.65;
}
.our-story-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.our-story-heading {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.28;
  margin: 6px 0 0;
  color: var(--ink);
}
/* Thin line–diamond–line rule, echoing a tailored jacket's pick stitch —
   traditional without being literal or heavy-handed. */
.our-story-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px auto 28px;
}
.our-story-divider-line { width: 52px; height: 1px; background: var(--gold-deep); opacity: 0.45; }
.our-story-divider-dot { width: 6px; height: 6px; background: var(--gold-deep); transform: rotate(45deg); flex-shrink: 0; }
.our-story-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 auto 32px;
}
.our-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 5px;
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.our-story-link span { transition: transform 0.25s ease; }
.our-story-link:hover { gap: 14px; color: var(--ink); border-color: var(--ink); }
.our-story-link:hover span { transform: translateX(3px); }

/* ---------------------------------------------------------------------- */
/* Shop page title band — plain centered text banner by default. When the  */
/* admin has configured Shop Banner Slider images, it becomes a full-bleed */
/* rotating photo background behind the same heading/tabs (same crossfade  */
/* mechanic as the homepage hero — main.js). Falls back to the original    */
/* plain band with zero markup changes when there are no active slides.    */
/* ---------------------------------------------------------------------- */
.page-title-band.has-slider {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 34vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  border-bottom: none;
  color: var(--ivory);
}
.page-title-band-media { position: absolute; inset: 0; z-index: 0; }
.page-title-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity 1.1s ease;
}
.page-title-slide.active { opacity: 1; z-index: 1; }
.page-title-slide img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center 25%; }
.page-title-band-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.55) 100%);
}
.page-title-band.has-slider .eyebrow { color: var(--gold-pale); }
.page-title-band.has-slider h1 { color: var(--ivory); }
.page-title-slider-dots {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
.page-title-slider-dot {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  position: relative; cursor: pointer; touch-action: manipulation;
}
.page-title-slider-dot::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(250, 248, 243, 0.5);
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}
.page-title-slider-dot:hover::after { background: rgba(250, 248, 243, 0.8); }
.page-title-slider-dot.active::after { background: var(--ivory); transform: translate(-50%, -50%) scale(1.3); }

/* ---------------------------------------------------------------------- */
/* Section scaffolding                                                       */
/* ---------------------------------------------------------------------- */
.section { padding: 80px 0; }
.section-tight { padding: 48px 0; }
.legal-page { max-width: 780px; margin: 0 auto 64px; line-height: 1.75; }
.legal-page h2 { font-size: 1.3rem; margin: 36px 0 12px; }
.legal-page h2:first-child { margin-top: 0; }
.legal-page h3 { font-size: 1.02rem; margin: 22px 0 8px; color: var(--ink-soft); }
.legal-page p, .legal-page li { font-size: 0.95rem; color: var(--ink-soft); }
.legal-page ul, .legal-page ol { padding-left: 22px; margin: 10px 0; }
.legal-page .legal-note {
  background: var(--paper-alt, #eef0f2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px; font-size: 0.85rem; margin-bottom: 32px;
}
.legal-page .updated { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 28px; }

.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
@media (max-width: 640px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}
.section-head h2 { margin-bottom: 6px; }

/* ---------------------------------------------------------------------- */
/* Category chips                                                            */
/* ---------------------------------------------------------------------- */
.category-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.category-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 18px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.category-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.category-card .cat-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.category-card .cat-count { font-size: 0.75rem; color: var(--ink-soft); margin-top: 4px; }
.category-card .cat-image {
  width: 64px; height: 64px; object-fit: cover; border-radius: 50%;
  margin: 0 auto 12px; display: block; border: 1px solid var(--line);
}

/* ---------------------------------------------------------------------- */
/* Homepage category rows — enhanced editorial tiles                        */
/* ---------------------------------------------------------------------- */
.category-row + .category-row { margin-top: 56px; }
.category-row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 24px;
}
.category-row-head h2 { margin-bottom: 4px; }
/* "Shop by Category" — a horizontally-scrolling row of colorful circular
   category avatars (photo if the admin uploaded one, otherwise a solid
   accent-colored disc with a FontAwesome glyph), cycling through the
   five --accent-* colors for variety, with "Sale" always rendered as a
   solid gold-ringed ink circle rather than an accent color. */
/* Side padding on the WRAP (not the scroller itself) reserves room for
   the prev/next buttons beside the row. Padding the scroller directly
   would seem equivalent, but Chromium's initial scrollLeft on a padded
   flex/overflow container silently jumps to the padding amount at rest
   — i.e. the padding is scrolled straight past — so the first circle
   still ends up hidden under the button. Padding the non-scrolling wrap
   sidesteps that entirely. */
.category-scroller-wrap { position: relative; padding: 0 40px; }
.category-scroller {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-scroller::-webkit-scrollbar { display: none; }
.category-circle {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.category-circle-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  padding: 3px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.category-circle:hover .category-circle-ring { transform: translateY(-5px) scale(1.05); box-shadow: var(--shadow-lift); }
.category-circle-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.category-circle-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.category-circle-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.4rem;
}
.category-circle-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* Accent cycling, per category_accent_class() in includes/functions.php */
.category-circle.accent-rust  .category-circle-ring { background: linear-gradient(135deg, var(--accent-rust),  var(--gold-pale)); }
.category-circle.accent-teal  .category-circle-ring { background: linear-gradient(135deg, var(--accent-teal),  var(--gold-pale)); }
.category-circle.accent-plum  .category-circle-ring { background: linear-gradient(135deg, var(--accent-plum),  var(--gold-pale)); }
.category-circle.accent-olive .category-circle-ring { background: linear-gradient(135deg, var(--accent-olive), var(--gold-pale)); }
.category-circle.accent-denim .category-circle-ring { background: linear-gradient(135deg, var(--accent-denim), var(--gold-pale)); }
.category-circle.accent-rust  .category-circle-placeholder { background: var(--accent-rust); }
.category-circle.accent-teal  .category-circle-placeholder { background: var(--accent-teal); }
.category-circle.accent-plum  .category-circle-placeholder { background: var(--accent-plum); }
.category-circle.accent-olive .category-circle-placeholder { background: var(--accent-olive); }
.category-circle.accent-denim .category-circle-placeholder { background: var(--accent-denim); }

/* "Sale" is always the odd one out — solid ink + gold, no photo. */
.category-circle--sale .category-circle-ring { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.category-circle--sale .category-circle-inner { background: var(--ink); border-color: var(--ink); }
.category-circle--sale .category-circle-placeholder {
  background: var(--ink);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.category-circle--sale .category-circle-name { color: var(--error); }

/* Prev/next scroll buttons — desktop convenience only; touch scroll and
   the visible partial-next-circle already signal "more" on mobile. */
.category-scroll-btn {
  position: absolute;
  top: 40px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.category-scroll-btn:hover { background: var(--ink); color: var(--paper); }
.category-scroll-btn:active { transform: scale(0.92); }
.category-scroll-btn--prev { left: 0; }
.category-scroll-btn--next { right: 0; }

/* Mobile rebuild — the 40px side gutter above exists only to clear the
   prev/next buttons, which are hidden below 720px; left as-is on mobile
   it just wastes ~80px of a ~350px-wide screen on dead space and crams
   the row down to two-and-a-bit visible circles. Below the breakpoint
   the row runs edge-to-edge with the page's own container padding
   instead, circles shrink a step, and a soft fade mask on both edges —
   not just a cut-off circle — signals "more to scroll" the way a native
   app carousel does.

   scroll-snap-type is upgraded from the sitewide "x proximity" to
   "x mandatory" here: proximity lets a swipe come to rest anywhere,
   including mid-circle, and when that half-cut circle also sits inside
   the fade mask it all but disappears — which is exactly the "big empty
   gap" a stopped swipe could produce. Mandatory snapping means a swipe
   always settles on a full circle, so the fade mask only ever has to
   hint at the *next* one, never hide most of one that's meant to be
   readable. The fade itself is also narrower than before so it reads as
   a hint, not a chunk of missing content. */
@media (max-width: 720px) {
  .category-scroll-btn { display: none; }
  .category-scroller-wrap { padding: 0; }
  .category-scroller {
    gap: 16px;
    padding: 4px 4px 16px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
  }
  .category-circle { width: 76px; gap: 9px; }
  .category-circle-ring { width: 70px; height: 70px; }
  .category-circle-name { font-size: 0.72rem; }
  .category-circle-placeholder { font-size: 1.1rem; }
  .category-circle--sale .category-circle-placeholder { font-size: 0.66rem; }
}

/* ---------------------------------------------------------------------- */
/* Product grid + cards                                                      */
/* ---------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}
.product-card { position: relative; }
.product-media {
  aspect-ratio: 3 / 4;
  background: var(--ivory-deep);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.05);
  transition: box-shadow 0.3s ease;
}
.product-card:hover .product-media { box-shadow: 0 18px 34px -12px rgba(10, 10, 10, 0.24); }
.product-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Same reasoning as the category tiles — bias toward the top so a
     full-length model photo keeps its face and fit visible
     instead of a center crop landing mid-body. */
  object-position: center 12%;
  transition: transform 0.5s ease;
}
.product-card:hover .product-media img { transform: scale(1.045); }
.product-card-rating { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; margin-bottom: 6px; }
.product-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--ink); color: var(--ivory);
  font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'Inter', sans-serif;
  padding: 5px 10px; border-radius: 2px;
}
.wishlist-btn {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.95rem;
}
.quick-add {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  opacity: 0; transform: translateY(6px);
  transition: all 0.2s ease;
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }

.product-title { font-size: 0.98rem; margin-bottom: 4px; font-weight: 500; }
.product-meta { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 6px; }
.product-price { font-size: 0.95rem; }
.price-strike { text-decoration: line-through; color: var(--ink-soft); margin-right: 8px; font-size: 0.85rem; }

/* ---------------------------------------------------------------------- */
/* Meet Our Weavers                                                           */
/* ---------------------------------------------------------------------- */
.weaver-section { background: var(--paper); }
.new-arrivals-section { background: var(--paper); border-top: 1px solid var(--line); }
/* Best Sellers / Watches spotlight — alternate backgrounds with the
   sections above and below them (paper / ivory-deep / paper / ivory-deep
   down the page) so the homepage keeps the same zebra rhythm as it grows
   more rows, rather than every section blending into the next. */
.best-sellers-section { background: var(--ivory-deep); border-top: 1px solid var(--line); }
.watches-section { background: var(--paper); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------- */
/* Festival — admin-managed, date-windowed seasonal homepage block        */
/* (Admin -> Festivals). Deliberately built from the same gold/ivory      */
/* palette as the rest of the site rather than a separate "sale"          */
/* red/orange treatment, so any festival banner the admin sets up still   */
/* reads as part of the same Trend Sutra brand.                           */
/*                                                                        */
/* A contained, gold-framed card (like .journey-cta-card) rather than a   */
/* full-bleed hero-sized strip — sits directly below the hero, so it      */
/* needs to read as a smaller, quieter accent, not a second hero. A       */
/* slow-animated "garland" strip along the top edge (small hanging gold   */
/* bunting, gently swaying) gives it a festive touch without tipping      */
/* into a loud red/orange "sale" banner look.                             */
/* ---------------------------------------------------------------------- */
.festival-section { padding: 40px 0 56px; }
.festival-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 40px 36px 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-pale);
  box-shadow: var(--shadow-soft);
  background: linear-gradient(135deg, var(--ivory-deep) 0%, var(--gold-pale) 140%);
}
/* Garland strip — a repeating row of small gold bunting triangles hung
   from the top edge, drifting slowly side to side like it's swaying.
   CSS-only (no image asset), so it always matches the current palette. */
.festival-garland {
  position: absolute;
  top: 0; left: -24px; right: -24px;
  height: 14px;
  z-index: 2;
  background-image:
    linear-gradient(135deg, var(--gold-deep) 25%, transparent 25.5%),
    linear-gradient(225deg, var(--gold-deep) 25%, transparent 25.5%);
  background-size: 18px 18px;
  background-position: 0 -3px;
  opacity: 0.5;
  animation: festival-garland-sway 7s ease-in-out infinite alternate;
}
@keyframes festival-garland-sway {
  from { background-position: 0 -3px; }
  to   { background-position: 18px -3px; }
}
.festival-banner-bg { position: absolute; inset: 0; z-index: 0; }
.festival-banner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* When a real photo is uploaded, switch to a dark scrim + light text so
   the banner stays legible over whatever the admin picked. */
.festival-banner--photo { background: var(--ink); border-color: rgba(230,196,122,0.4); }
.festival-banner--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.75) 100%);
}
.festival-banner--photo .festival-garland { opacity: 0.85; }
.festival-banner-inner { position: relative; z-index: 3; max-width: 480px; margin: 0 auto; }
.festival-banner-inner .eyebrow { justify-content: center; margin-top: 6px; }
.festival-banner--photo .eyebrow { color: var(--gold-pale); }
.festival-banner--photo .festival-heading,
.festival-banner--photo .festival-subtext { color: var(--ivory); }
.festival-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  margin: 12px 0 8px;
}
.festival-subtext { color: var(--ink-soft); font-size: 0.92rem; max-width: 44ch; margin: 0 auto 20px; }
.festival-banner .btn { padding: 12px 28px; font-size: 0.82rem; }
.festival-product-grid { margin-top: 4px; }
@media (max-width: 640px) {
  .festival-banner { padding: 34px 22px 28px; margin-bottom: 32px; }
  .festival-heading { margin: 10px 0 6px; }
}

/* Countdown timer — homepage banner and festival.php title band. Four
   boxed units (days/hours/min/sec), updated once a second by main.js.
   Hidden automatically by JS once the target time passes. */
.festival-countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 22px;
}
.festival-countdown-unit {
  min-width: 54px;
  padding: 8px 4px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--gold-pale);
}
.festival-banner--photo .festival-countdown-unit {
  background: rgba(255,255,255,0.08);
  border-color: rgba(230,196,122,0.4);
}
.festival-countdown-value {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}
.festival-countdown-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  margin-top: 2px;
}
.festival-banner--photo .festival-countdown-label { color: var(--gold-pale); }
/* Larger variant used inside the festival.php title band, over a photo. */
.festival-countdown--band {
  justify-content: flex-start;
  margin: 18px 0 4px;
}
.festival-countdown--band .festival-countdown-unit {
  background: rgba(255,255,255,0.1);
  border-color: rgba(230,196,122,0.4);
  min-width: 62px;
}
.festival-countdown--band .festival-countdown-value { color: var(--ivory); font-size: 1.3rem; }
.festival-countdown--band .festival-countdown-label { color: var(--gold-pale); }

/* Festival Sale list page (festival.php with no ?slug) — a grid of cards,
   one per currently-live festival. */
.festival-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 32px 0 12px;
}
.festival-list-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.festival-list-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.festival-list-card img,
.festival-list-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.festival-list-card-img--placeholder { background: linear-gradient(135deg, var(--ivory-deep) 0%, var(--gold-pale) 140%); }
.festival-list-card-body { padding: 18px 20px 22px; }
.festival-list-card-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--gold-deep);
  background: var(--gold-pale);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.festival-list-card-body h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin: 4px 0 6px; }
.festival-list-card-timeleft { display: inline-block; margin-top: 8px; font-size: 0.78rem; color: var(--ink-soft); }
/* Small left-aligned line-dot rule under a section-head heading — the
   homepage's version of the centered .journey-divider used on Our Journey
   and Contact, adapted for section-heads that stay left-aligned. */
.home-section-divider { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.home-section-divider-line { width: 40px; height: 1px; background: var(--gold-deep); opacity: 0.45; }
.home-section-divider-dot { width: 5px; height: 5px; background: var(--gold-deep); transform: rotate(45deg); flex-shrink: 0; }
.weaver-intro {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1rem;
  margin: -18px 0 44px;
}
.weaver-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.weaver-card { text-align: center; }
.weaver-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.weaver-photo img { width: 100%; height: 100%; object-fit: cover; }
.weaver-card h3 { margin-bottom: 4px; }
.weaver-craft {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  margin-bottom: 14px;
}
.weaver-card p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* Editorial / feature band                                                   */
/* ---------------------------------------------------------------------- */
.feature-band {
  background: var(--ivory-deep);
  padding: 90px 0;
}
.feature-band .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.feature-item .glyph {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--gold-pale);
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--gold-deep);
}
.feature-item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-item p { color: var(--ink-soft); font-size: 0.9rem; }
.weaver-card { transition: transform 0.25s ease; }
.weaver-card:hover { transform: translateY(-4px); }

/* ---------------------------------------------------------------------- */
/* Find Us In-Store — India map with blinking pin markers                  */
/* (replaces the old feature-band on the homepage; admin-managed via       */
/* Admin -> Store Locations)                                               */
/* ---------------------------------------------------------------------- */
.store-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 48px;
  align-items: center;
}
/* Framed "art piece" treatment — a soft ivory mat with a thin gold border
   and two small corner flourishes, so the map reads as a considered
   display piece rather than a bare graphic dropped on the page. */
.store-map-frame {
  position: relative;
  background: var(--ivory-deep);
  border: 1px solid var(--gold-pale);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.store-map-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--gold-deep);
  opacity: 0.55;
  pointer-events: none;
}
.store-map-corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.store-map-corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.store-map {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
}
/* When the admin uploads an exact map graphic, let its own natural
   proportions set the container height instead of forcing the built-in
   shape's 3:4 box — pins are positioned by percentage either way, so
   they still land correctly regardless of the image's real aspect ratio. */
.store-map.store-map--custom {
  aspect-ratio: auto;
}
.india-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Fill was --gold-pale (a very pale blue-white) against the frame's
   ivory-deep background — both are near-white, so the map shape nearly
   disappeared. Switched to the warm gold-cream palette so it actually
   reads as a map, not a blank card. */
.india-map-path {
  fill: var(--gold-warm-pale);
  stroke: var(--gold-warm);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.store-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.store-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.store-pin-dot {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--gold-warm);
  box-shadow: 0 0 0 rgba(201, 162, 39, 0.55);
  animation: store-pin-pulse 2.2s ease-out infinite;
}
/* Admin-uploaded animated marker (e.g. a GIF) — no CSS animation needed,
   the image animates itself, so this just handles sizing. */
.store-pin-marker-img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}
/* Small always-on state label under each dot — deliberately tiny/quiet
   (not the old full place-name legend list) so the map still reads as
   a map first, with just enough text to place each pin regionally. */
.store-pin-label {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
  background: rgba(255,255,255,0.8);
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
}
.store-pin-marker-img--legend {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: contain;
}
.store-pin-dot--legend {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  animation: none;
  box-shadow: none;
}
@keyframes store-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); }
  70%  { box-shadow: 0 0 0 17px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .store-pin-dot { animation: none; }
}
.store-pin-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--ivory);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.store-pin-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.store-pin-tooltip em { color: var(--ivory); opacity: 0.7; font-style: normal; font-size: 0.72rem; }
.store-pin:hover .store-pin-tooltip,
.store-pin:focus-within .store-pin-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* No quote set yet — the map has nothing to sit beside, so it centers
   itself as a single column instead of leaving a blank second column. */
.store-map-wrap--single { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* Admin-written quote (Admin -> Store Locations -> Quote) that fills the
   space next to the map — replaces the old place-name text legend. */
.store-quote { text-align: center; padding: 0 16px; }
.store-quote-mark {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 3.4rem;
  line-height: 0.4;
  color: var(--gold-deep);
  opacity: 0.5;
  margin-bottom: 16px;
}
.store-quote-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 14px;
}
.store-quote-attribution {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
}
.store-quote-attribution::before { content: '— '; }

/* Admin: Store Locations click-to-place editor */
.artisan-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 32px;
  align-items: start;
}
.artisan-admin-map {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: crosshair;
}
.artisan-admin-preview-pin .store-pin-dot { background: var(--error, #b0413e); }
.artisan-admin-form-col .form-row input[readonly] { background: var(--ivory-deep); cursor: not-allowed; }
@media (max-width: 720px) {
  .artisan-admin-layout { grid-template-columns: minmax(0, 1fr); }
}
.weaver-card:hover .weaver-photo { box-shadow: var(--shadow-lift); }

/* Our Journey page — a subtle tint on the stat row so the page reads as
   a deliberate rhythm of sections (white / tinted / white) instead of
   one long flat white scroll, and a bordered card around the closing
   CTA so it doesn't just trail off as plain centered text. */
.journey-tint { background: var(--ivory-deep); }
.journey-cta-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------------------- */
/* Our Journey — artistic, minimalistic, traditional pass over the        */
/* post-hero sections (stats / How It Started / Our Values / closing CTA). */
/* Everything here is scoped under journey-* wrapper classes rather than   */
/* touching the shared .stat-card / .feature-item / .section-head rules   */
/* directly, so nothing here can leak onto shop.php, account.php, or the  */
/* admin dashboard, which all reuse those same base components.           */
/* ---------------------------------------------------------------------- */

/* Thin line–diamond–line rule, echoing a tailored jacket's pick stitch. Reused
   three times below (stats band, and inside the closing CTA card). */
.journey-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 32px;
}
.journey-divider-line { width: 52px; height: 1px; background: var(--gold-deep); opacity: 0.45; }
.journey-divider-dot { width: 6px; height: 6px; background: var(--gold-deep); transform: rotate(45deg); flex-shrink: 0; }
.journey-divider--tight { margin-bottom: 22px; }

/* Stats band — flatten the shadowed admin-style cards into quiet, centred,
   text-only panels with a thin gold top rule instead of a coloured left
   border, so four numbers read as an inscription rather than a dashboard. */
.journey-stats-band .stat-card {
  border: none;
  border-top: 2px solid var(--gold-pale);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px 4px;
}
.journey-stats-band .stat-card:hover { transform: none; box-shadow: none; border-top-color: var(--gold-deep); }
.journey-stats-band .stat-card .value { color: var(--gold-deep); }

/* Small line-art paisley accent, reused above "How It Started" and inside
   the closing CTA card — same partial/pattern as the homepage Our Story
   section, at a modest scale so it reads as a mark, not decoration. */
.journey-motif {
  width: 34px;
  margin: 0 auto 14px;
  color: var(--gold-deep);
  opacity: 0.6;
}
.journey-motif .paisley-motif-svg,
.journey-cta-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.journey-history-section { position: relative; overflow: hidden; }
.journey-history-section .container,
.journey-history-head { text-align: center; }
.journey-history-head .eyebrow { justify-content: center; }
.journey-history-head h2 { margin-bottom: 0; }
.journey-history-section .section-head { margin-bottom: 32px; }
/* Large, near-invisible paisley behind the ledger panel — same restrained
   watermark technique used on the homepage Our Story section, so the two
   pages feel like they belong to the same family. */
.journey-history-bg-motif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  transform: translate(-50%, -50%);
  color: var(--gold-deep);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
.journey-history-bg-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.journey-history-section .container { position: relative; z-index: 1; }

/* "How It Started" copy framed like a page from a heritage ledger — a
   softly bordered panel with a serif drop cap, rather than a plain
   left-aligned paragraph. */
.journey-history-panel {
  max-width: 66ch;
  margin: 0 auto;
  padding: 40px 48px;
  background: var(--ivory-deep);
  border: 1px solid var(--gold-pale);
  border-radius: var(--radius-md);
}
.journey-history-panel p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0;
}
/* Pull-quote breaking up the panel's two paragraphs — gives the section
   a moment of emphasis instead of reading as one dense block of text. */
.journey-history-pullquote {
  margin: 26px 0;
  padding: 0 8px;
  border: none;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--gold-deep);
  text-align: center;
}
.journey-history-pullquote span {
  font-size: 1.7rem;
  opacity: 0.5;
  margin-right: 3px;
}

/* Our Values — quiet roman numerals instead of bold "01/02/03" chips, and
   a centred section head to match the rest of the page's editorial tone. */
.journey-values-head { justify-content: center; text-align: center; }
.journey-values-head .eyebrow { justify-content: center; }
.journey-glyph {
  background: transparent;
  border: 1px solid var(--gold-pale);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.journey-values-band { background: transparent; padding: 0; }
/* Quiet hover lift + a thin gold rule that grows in under the heading —
   a small, restrained cue rather than a big card-hover effect. */
.journey-value-item { position: relative; padding-bottom: 4px; transition: transform 0.25s ease; }
.journey-value-item:hover { transform: translateY(-3px); }
.journey-value-item:hover .journey-glyph { border-color: var(--gold-deep); transform: scale(1.06); }
.journey-value-item h3 { position: relative; display: inline-block; padding-bottom: 10px; }
.journey-value-item h3::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold-deep);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.journey-value-item:hover h3::after { width: 32px; }

/* Closing CTA — a gold-framed card with its own small motif + divider so
   it closes the page on the same quiet, traditional note it opened on. */
.journey-cta-card--traditional {
  position: relative;
  overflow: hidden;
  border-color: var(--gold-pale);
  padding: 64px 48px 56px;
}
.journey-cta-card--traditional::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--gold-pale) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.journey-cta-card--traditional > * { position: relative; z-index: 1; }
.journey-cta-motif { width: 30px; margin: 0 auto 12px; color: var(--gold-deep); opacity: 0.6; }
.journey-cta-heading { margin-bottom: 14px; }
.journey-cta-text { color: var(--ink-soft); max-width: 56ch; margin: 0 auto 28px; }

/* ---------------------------------------------------------------------- */
/* Our Journey — Brand Story hero. A first-person letter from the founder,  */
/* so this reads as a centered editorial narrative rather than the usual   */
/* 2-column headline+visual hero — the .hero base grid is overridden to a  */
/* single block, and every text role gets its own class rather than       */
/* relying on element selectors, so nothing here can leak into or clash   */
/* with .hero-copy's rules used on every other page's hero.               */
/* ---------------------------------------------------------------------- */
.journey-story-hero {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 88px 0 100px;
  background: linear-gradient(180deg, var(--ivory-deep) 0%, var(--paper) 60%);
}
.journey-story-hero .container { position: relative; z-index: 1; }
/* Optional admin-uploaded background photo behind the whole hero — sits
   at low opacity under a soft paper-toned wash so the narrative text
   above it stays comfortably readable regardless of what's in the photo. */
.journey-story-bg-photo { position: absolute; inset: 0; z-index: 0; }
.journey-story-bg-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.14; }
.journey-story-bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ivory-deep) 0%, rgba(250, 247, 240, 0.88) 45%, var(--paper) 100%);
}
.journey-story-head {
  max-width: 720px;
  margin: 0 auto 52px;
  text-align: center;
}
.journey-story-quote-mark {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 4.2rem;
  line-height: 0.6;
  color: var(--gold-deep);
  opacity: 0.5;
  margin-bottom: 14px;
}
.journey-story-head .eyebrow { justify-content: center; }
.journey-story-head h1 { margin-bottom: 12px; }
.journey-story-lede {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--gold-deep);
  margin: 0;
}
.journey-story-body { max-width: 660px; margin: 0 auto; }
.journey-story-para {
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 26px;
}
/* Short single-line "beats" (the emotional pauses in the letter) get set
   apart in serif italic-free display type, centered, so the story has a
   visible rhythm instead of reading as one dense grey block. */
.journey-story-beat {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  margin: 42px 0;
}
.journey-story-closing {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
  margin: 52px 0 0;
}
.journey-story-signoff {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  margin: 10px 0 0;
}
.journey-story-heart { color: #a83b4a; font-size: 1.15em; }
.journey-story-actions { justify-content: center; margin-top: 56px; }

/* ---------------------------------------------------------------------- */
/* Brand Story — vertical alternating photo timeline. A thin dashed gold   */
/* thread runs down the centre with a marker per moment; each moment       */
/* pairs an (optional, admin-uploaded) photo with its portion of the       */
/* narrative, alternating sides so the page reads like turning pages in    */
/* a keepsake album rather than one long scroll of text.                   */
/* ---------------------------------------------------------------------- */
.journey-timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 0 0;
}
.journey-timeline::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(to bottom, var(--gold-deep) 0, var(--gold-deep) 6px, transparent 6px, transparent 14px);
  opacity: 0.5;
}
.journey-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 52px;
  margin-bottom: 76px;
}
.journey-timeline-item:last-child { margin-bottom: 0; }
.journey-timeline-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold-deep);
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 5px var(--paper);
}
.journey-timeline-photo {
  order: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.journey-timeline-photo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.journey-timeline-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.journey-timeline-photo:hover img { transform: scale(1.04); }
.journey-timeline-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory-deep);
  color: var(--gold-deep);
}
.journey-timeline-photo-placeholder .paisley-motif-svg { width: 30%; height: auto; opacity: 0.45; }
.journey-timeline-content { order: 2; padding: 0 8px; }
.journey-timeline-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.journey-timeline-content .journey-story-beat { text-align: left; font-size: 1.22rem; margin: 14px 0; }
.journey-timeline-content .journey-story-para { text-align: left; font-size: 0.98rem; line-height: 1.8; margin: 0 0 14px; }
/* Alternate sides on even items so photo/content swap left-right. */
.journey-timeline-item:nth-child(even) .journey-timeline-photo { order: 2; }
.journey-timeline-item:nth-child(even) .journey-timeline-content { order: 1; }

.journey-story-closing-wrap { max-width: 660px; margin: 72px auto 0; }
.journey-story-closing-wrap .journey-divider { margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                     */
/* ---------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--maroon-deep);
  color: var(--ivory-deep);
  padding: 68px 0 28px;
  margin-top: 80px;
}
/* Thin gold hairline across the top edge — a small, recognisable "seam"
   that ties the footer back to the gold accents used in the header/nav
   underline, instead of the dark block just starting abruptly. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-warm) 20%, var(--gold-warm-pale) 50%, var(--gold-warm) 80%, transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 44px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  /* The full brand name can run long ("Trend Sutra") — the old
     flat 1.35rem read oversized against the narrow brand column at
     most widths. A smaller, fluid size lets it sit at a proper
     "wordmark" scale instead of competing with the page's H1. */
  font-size: clamp(0.98rem, 0.86rem + 0.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 14px;
  max-width: 100%;
}
.footer-logo-badge {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--gold-warm-pale); padding: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.footer-logo-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.footer-grid h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--gold-warm-pale);
  margin-bottom: 20px;
}
.footer-grid a, .footer-grid p {
  display: block;
  color: #c9cbd2;
  font-size: 0.87rem;
  margin-bottom: 12px;
  line-height: 1.55;
}
.footer-grid a { transition: color 0.2s ease; }
.footer-grid a:hover { color: #fff; }
.footer-contact { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.footer-contact a {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 0; color: #c9cbd2; font-size: 0.85rem;
}
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold-warm-pale); }
.footer-newsletter-form { display: flex; gap: 8px; margin-top: 4px; }
.footer-newsletter-form input {
  flex: 1; min-width: 0; padding: 11px 13px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04);
  color: #fff; font-family: inherit; font-size: 0.85rem;
}
.footer-newsletter-form input::placeholder { color: #8d9099; }
.footer-newsletter-form input:focus { outline: none; border-color: var(--gold-warm-pale); background: rgba(255,255,255,0.08); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.78rem;
  color: #8d9099;
}
.payment-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.payment-badges span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #dcdee3;
}
.payment-badges svg { width: 13px; height: 13px; }

/* Trust strip — a thin band of reassurance icons across the top of the
   footer (authenticity, security, shipping, exchange policy), the kind
   of thing shoppers scan for right before checking out. */
.footer-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dcdee3;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}
.footer-trust-item svg {
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--gold-warm-pale);
  padding: 7px;
  border: 1px solid rgba(236, 214, 143, 0.3);
  border-radius: 50%;
  box-sizing: content-box;
}

/* Social icon row — sits under the contact block in the brand column,
   hidden entirely (via PHP) when the admin hasn't set any links. */
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #dcdee3;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { color: #fff; border-color: var(--gold-warm-pale); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }

/* Back-to-top — a small floating button pinned to the footer's bottom
   corner, revealed by JS once the visitor has scrolled past the fold. */
.back-to-top {
  position: absolute;
  right: 24px;
  top: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--maroon-deep);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--gold-warm-pale);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-warm); color: #fff; border-color: var(--gold-warm); }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                     */
/* ---------------------------------------------------------------------- */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 44px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------------------- */
/* Contact page                                                              */
/* ---------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 32px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.contact-layout .form-card { max-width: none; margin: 0; }
.contact-info-card {
  background: var(--ink);
  color: var(--ivory-deep);
  border-radius: var(--radius-md);
  padding: 36px 32px;
}
.contact-info-card h3 { color: var(--ivory); font-family: 'Playfair Display', serif; margin-bottom: 10px; }
.contact-info-card .muted { color: rgba(250,247,242,0.72); }
.contact-info-email {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ivory);
  font-size: 1.05rem;
  padding: 14px 16px;
  border: 1px solid rgba(250,247,242,0.25);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
  word-break: break-all;
}
.contact-info-email svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-pale); }
.contact-info-email:hover { border-color: var(--gold); background: rgba(250,247,242,0.06); }
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.toggle-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-transform: none !important;
  font-size: 0.92rem !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  cursor: pointer;
}
.toggle-row input[type="checkbox"] { width: 17px; height: 17px; }

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 22px;
}
.alert i { font-size: 1rem; flex-shrink: 0; }
.alert-error { background: #ffebee; color: var(--error); border: 1px solid #ffcdd2; }
.alert-success { background: #e8f5e9; color: var(--success); border: 1px solid #c8e6c9; }

/* ---------------------------------------------------------------------- */
/* Contact page — artistic/minimalistic/traditional pass. A quiet gold-    */
/* accented hero, a large near-invisible paisley watermark behind the      */
/* two-column layout, and small motifs on both cards, matching the         */
/* language established on the homepage Our Story section and the Brand   */
/* Story timeline on our-journey.php.                                      */
/* ---------------------------------------------------------------------- */
.contact-hero-band { position: relative; overflow: hidden; }
.contact-hero-bg-motif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  transform: translate(-50%, -50%);
  color: var(--gold-deep);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.contact-hero-bg-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.contact-hero-band .container { position: relative; z-index: 1; }
.contact-hero-band .journey-divider { margin: 18px auto 16px; }
.contact-hero-lede { font-family: 'Playfair Display', serif; font-size: 1.08rem; font-style: italic; color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }

.contact-section { position: relative; overflow: hidden; }
.contact-bg-motif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  transform: translate(-50%, -50%);
  color: var(--gold-deep);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.contact-bg-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.contact-section .container { position: relative; z-index: 1; }

.form-card--contact { position: relative; padding-top: 40px; }
.contact-form-motif { position: absolute; top: 24px; right: 28px; width: 26px; color: var(--gold-deep); opacity: 0.4; }
.contact-form-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.contact-form-heading { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 6px; }
.contact-form-sub { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 26px; }

.contact-info-card { position: relative; }
.contact-info-motif { width: 24px; margin-bottom: 16px; color: var(--gold-pale); opacity: 0.75; }
.contact-info-motif .paisley-motif-svg { width: 100%; height: auto; display: block; }
.contact-info-email + .contact-info-email { margin-top: 12px; }
.contact-info-whatsapp svg { color: #6fcf7a; }
.contact-info-divider { height: 1px; background: rgba(250,247,242,0.16); margin: 26px 0 16px; }
.contact-info-note { font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(250,247,242,0.6); }

/* ---------------------------------------------------------------------- */
/* Breadcrumb + page header                                                   */
/* ---------------------------------------------------------------------- */
.breadcrumb {
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 22px 0;
}
.breadcrumb a:hover { color: var(--gold-deep); }
.page-title-band {
  text-align: center;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
/* Shop page only: the type-filter band sits directly underneath (see
   .shop-type-tabs-band) and supplies its own border, so this band
   shouldn't add a second border + a big gap on top of that. */
.page-title-band--tight { border-bottom: none; margin-bottom: 0; }

/* Combo / sale offer banner — admin-controlled (Settings -> Combo /
   Sale Offer), shown at the top of the Shop page only when enabled.
   Renders as a plain <div> (no hover/arrow) when no link is set, or an
   <a> when the admin has pointed it somewhere specific. */
.combo-offer-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  color: var(--ivory);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.combo-offer-tag {
  flex-shrink: 0;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  padding: 4px 11px;
  border-radius: 999px;
}
.combo-offer-text {
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.combo-offer-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}
a.combo-offer-banner:hover .combo-offer-arrow { transform: translateX(3px); }
a.combo-offer-banner:hover { box-shadow: var(--shadow-lift); }
/* A slow light sweep across the pill — enough to catch the eye on a
   page you land on once, without looping so fast it becomes annoying. */
.combo-offer-banner::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: combo-offer-shimmer 3.4s ease-in-out infinite;
}
@keyframes combo-offer-shimmer {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .combo-offer-banner::after { animation: none; display: none; }
}

/* ---------------------------------------------------------------------- */
/* Checkout step indicator (Bag -> Shipping -> Confirmation)                */
/* ---------------------------------------------------------------------- */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.checkout-step { display: flex; align-items: center; gap: 8px; }
.checkout-step .step-num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-soft);
  font-size: 0.78rem; font-family: 'Playfair Display', serif;
}
.checkout-step .step-label {
  font-size: 0.75rem; text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: 0.05em; color: var(--ink-soft);
}
.checkout-step.current .step-num { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.checkout-step.current .step-label { color: var(--ink); font-weight: 600; }
.checkout-step.done .step-num { background: var(--gold); border-color: var(--gold); color: var(--ivory); }
.checkout-step.done .step-label { color: var(--gold-deep); }
.checkout-step-line { width: 40px; height: 1px; background: var(--line); }
.checkout-step-line.done { background: var(--gold); }
@media (max-width: 480px) {
  .checkout-step .step-label { display: none; }
  .checkout-step-line { width: 24px; }
}

/* ---------------------------------------------------------------------- */
/* Shop layout                                                                */
/* ---------------------------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: flex-start;
}
/* Filters follow the page as it scrolls on desktop, same pattern as the
   cart summary card, so they stay reachable on a long product list. */
.shop-layout > aside { position: sticky; top: 100px; }

/* Type-filter band — sits as its own clean strip directly under the
   page-title band (kept separate on purpose: it used to overlay the
   slider photo/text and read poorly there — a plain surface underneath
   is far more legible and lets the pill switcher read as a proper
   toolbar rather than a caption floating on an image). */
.shop-type-tabs-band {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Pill-style category filter switcher — a proper tabbed control
   with its own border + soft shadow so it reads as a distinct, tappable
   toolbar rather than a bit of text with a tinted background. */
.shop-type-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.shop-type-tabs a {
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
.shop-type-tabs a:hover { color: var(--ink); }
.shop-type-tabs a.active {
  background: var(--gold-deep);
  color: var(--ivory);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(15, 26, 48, 0.28);
}

.filter-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.filter-block { margin-bottom: 28px; }
.filter-block:last-child { margin-bottom: 0; }
.filter-block h4 {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--ink-soft); margin-bottom: 14px;
}
.filter-block a, .filter-block label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; margin-bottom: 4px; color: var(--ink);
  padding: 7px 8px; margin-left: -8px; border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-block a:hover { background: var(--ivory-deep); }
.filter-block a.active {
  color: var(--gold-deep);
  font-weight: 600;
  background: var(--gold-pale);
}
/* Small colorful swatch per category in the filter sidebar — same
   accent cycle as the circle scrollers, just a plain dot at this size. */
.filter-cat-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-cat-dot.accent-rust  { background: var(--accent-rust); }
.filter-cat-dot.accent-teal  { background: var(--accent-teal); }
.filter-cat-dot.accent-plum  { background: var(--accent-plum); }
.filter-cat-dot.accent-olive { background: var(--accent-olive); }
.filter-cat-dot.accent-denim { background: var(--accent-denim); }
.filter-cat-dot--sale { background: var(--error); }

/* Shop page's own category quick-scroller, above the toolbar */
.shop-category-rail { margin: 28px 0 6px; }
.category-circle--active .category-circle-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-deep); }
.category-circle--active .category-circle-name { color: var(--gold-deep); font-weight: 700; }
.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px; padding: 14px 18px; font-size: 0.85rem; color: var(--ink-soft);
  background: var(--ivory-deep); border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.shop-toolbar select { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }

/* "Filtering by: ..." chip row — makes it unambiguous which filters are
   narrowing the current results; clicking a chip's × removes just that
   one filter (via shop_url() with that param cleared), same as the
   sidebar links but visible without opening the filter panel. */
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -14px 0 24px;
  font-size: 0.82rem;
}
.active-filters-label { color: var(--ink-soft); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  border-radius: 20px;
  background: var(--gold-pale);
  color: var(--gold-deep);
  font-weight: 500;
  transition: background 0.15s ease;
}
.filter-chip:hover { background: var(--gold); color: #fff; }
.filter-chip-x { font-size: 1rem; line-height: 1; opacity: 0.75; }
.clear-all-filters {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.8rem;
}
.clear-all-filters:hover { color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Product detail                                                             */
/* ---------------------------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.pd-gallery-main {
  aspect-ratio: 3/4;
  background: var(--ivory-deep);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}
.pd-gallery-main img { transition: transform 0.4s ease; }
.pd-gallery-main:hover img { transform: scale(1.04); }
.pd-sale-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--success); color: #fff;
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'Inter', sans-serif;
  padding: 6px 12px; border-radius: 20px; font-weight: 600;
}
.pd-thumb-strip { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pd-thumb {
  width: 64px; height: 80px; padding: 0; cursor: pointer; background: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.2s ease;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.active, .pd-thumb:hover { border-color: var(--gold); }
.pd-thumb.active { box-shadow: 0 0 0 2px var(--gold-pale); }
.pd-thumb:hover { transform: translateY(-2px); }

/* Groups price, description, size/qty pickers and add-to-bag actions
   into one visually distinct "buy box" card, separated from the plain
   spec list (.pd-meta-list) below it — a familiar e-commerce pattern
   that makes the purchase decision area easier to scan at a glance. */
.pd-buy-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  box-shadow: var(--shadow-soft);
  margin-top: 18px;
}
.pd-trust-row {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.pd-trust-row span {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; color: var(--ink-soft);
}
.pd-trust-row svg { width: 17px; height: 17px; stroke-width: 1.6; color: var(--gold-deep); flex-shrink: 0; }

/* "Notify me when it's back" — shown in place of the add-to-bag flow
   whenever a product's total stock is 0 (see product.php). */
.stock-notify-box { margin-top: 18px; }
.stock-notify-box label {
  display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 8px;
}
.stock-notify-row { display: flex; gap: 8px; }
.stock-notify-row input[type="email"] {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.9rem;
}
.stock-notify-row input[type="email"]:disabled { background: var(--ivory-deep); color: var(--ink-soft); }
.pd-save-pill {
  background: #e9f2ec; color: var(--success);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 20px;
}
.pd-price-row { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 22px; font-size: 1.3rem; }
.pd-meta-list { list-style: none; padding: 0; margin: 22px 0; border-top: 1px solid var(--line); }
.pd-meta-list li {
  display: flex; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.pd-meta-list li span:first-child { color: var(--ink-soft); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qty-stepper button {
  width: 38px; height: 44px; background: none; border: none; cursor: pointer; font-size: 1rem;
}
.qty-stepper input {
  width: 44px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  height: 44px; font-family: inherit; font-size: 0.95rem;
}
.pd-actions { display: flex; gap: 14px; margin-top: 26px; }

.pd-size-options { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-size-btn {
  min-width: 48px; min-height: 46px; padding: 9px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font-family: inherit; font-size: 0.9rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pd-size-btn:hover:not(.out-of-stock) { border-color: var(--gold); }
.pd-size-btn:active:not(.out-of-stock) { background: var(--gold-pale); }
.pd-size-btn.selected { border-color: var(--gold-deep); background: var(--gold-pale); font-weight: 600; }
/* Deliberately not using :disabled/[disabled] — a native disabled button
   swallows clicks entirely in every browser, so tapping an out-of-stock
   size would do nothing with zero feedback. This stays a normal clickable
   button, just styled to look unavailable; main.js shows a message
   explaining why when it's tapped. */
.pd-size-btn.out-of-stock { opacity: 0.45; text-decoration: line-through; background: var(--ivory-deep); }
.pd-size-picker .js-size-hint { color: var(--ink-soft); }
.pd-size-picker .js-size-hint.chosen { color: var(--success); font-weight: 600; }
.pd-size-picker .js-size-hint.error { color: var(--error); font-weight: 600; }

/* Colour swatches (product.php) — "true single-product variants": one
   product listing, clicking a swatch swaps photo/sizes in place. */
.pd-color-options { display: flex; flex-wrap: wrap; gap: 12px; }
.pd-color-swatch {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line);
  cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pd-color-swatch:hover { transform: scale(1.08); }
.pd-color-swatch.active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-deep); }
#pd-selected-color-name { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: normal; }

/* ---------------------------------------------------------------------- */
/* Admin: product size + stock repeatable rows                              */
/* ---------------------------------------------------------------------- */
/* Admin: standalone search box (Customers page etc.) — same visual
   language as .form-row input, but usable outside a .form-row wrapper. */
.admin-search-input {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font-family: inherit; font-size: 0.92rem; color: var(--ink);
}
.admin-search-input:focus { outline: none; border-color: var(--gold); }

.size-rows { display: flex; flex-direction: column; gap: 8px; }
.size-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ivory);
}
/* Specificity note: .form-row input {width:100%} (used sitewide for plain
   form fields) also matches these inputs since they live inside a
   .form-row wrapper. Without a more specific selector here that rule wins
   and forces each input to claim 100% of the flex row, which starves the
   label input down to a sliver while the stock input balloons. Scoping
   through the parent .size-row (and giving both an explicit, non-"auto"
   flex-basis) makes sure OUR sizing wins instead. */
.size-row .size-row-label { flex: 1 1 0%; width: auto; min-width: 0; }
.size-row .size-row-stock { flex: 0 0 110px; width: 110px; }
.size-row-remove {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.size-row-remove svg { width: 15px; height: 15px; }
.size-row-remove:hover { background: #fbeaea; color: var(--error); border-color: #f0c9c9; }

/* Admin: colour-variant rows (Shirts, T-Shirts, Jeans & Trousers) — each
   colour is its own card with a name/swatch/photo and a nested
   size-rows sub-list reusing the .size-row styling above. */
.color-rows { display: flex; flex-direction: column; gap: 18px; }
.color-row {
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ivory);
}
.color-row-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.color-row-name { flex: 1 1 0%; width: auto; min-width: 0; }
.color-row-hex {
  flex: 0 0 48px; width: 48px; height: 38px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer;
}
.color-row-remove { flex-shrink: 0; white-space: nowrap; }
.color-row-image { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.color-row-image input[type="file"] { flex: 1 1 220px; }
.color-row-image-preview img {
  width: 56px; height: 68px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line);
}
.color-row-sizes { margin-bottom: 8px; }

/* ---------------------------------------------------------------------- */
/* Cart & Checkout                                                            */
/* ---------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: flex-start; }
.cart-line {
  display: grid; grid-template-columns: 90px 1fr auto auto; gap: 20px; align-items: center;
  padding: 20px 14px; border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: background 0.18s ease;
}
.cart-line:hover { background: var(--ivory-deep); }
.cart-line img { width: 90px; height: 110px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.cart-remove-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 6px 10px 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: none; color: var(--ink-soft);
  font-family: inherit; font-size: 0.78rem; letter-spacing: 0.02em;
  cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
}
.cart-remove-btn svg { width: 15px; height: 15px; }
.cart-remove-btn:hover { border-color: var(--error); color: var(--error); }
.cart-remove-btn:disabled { opacity: 0.5; cursor: default; }
.summary-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 30px; position: sticky; top: 100px;
  box-shadow: var(--shadow-soft);
}
.summary-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 0.92rem; }
.summary-total { font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; font-weight: 600; }
.summary-total span:last-child { color: var(--gold-deep); }

/* Visual nudge toward free shipping — a thin progress bar under the
   "add ₹X more" hint, filling as the subtotal approaches the threshold. */
.free-ship-progress {
  height: 5px; border-radius: 4px; background: var(--ivory-deep);
  overflow: hidden; margin: 8px 0 4px;
}
.free-ship-progress-bar {
  height: 100%; background: var(--gold-deep); border-radius: 4px;
  transition: width 0.4s ease;
}
.summary-items { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.summary-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.summary-item img { width: 48px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.summary-item-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.summary-item-name { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-item-qty { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }
.summary-item-total { font-size: 0.85rem; white-space: nowrap; }

.coupon-box {
  background: var(--ivory); border: 1px dashed var(--gold-pale); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 20px;
}
.coupon-box input[type="text"] { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; color: var(--success); }

.payment-option-group { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.payment-option input[type="radio"] { width: auto; margin: 0; flex-shrink: 0; }
.payment-option-icon { color: var(--gold-deep); flex-shrink: 0; }
.payment-option-icon svg { width: 22px; height: 22px; }
.payment-option-text { display: flex; flex-direction: column; font-size: 0.85rem; font-weight: 400; text-transform: none; }
.payment-option-text strong { font-size: 0.92rem; }
.payment-option-text span { color: var(--ink-soft); font-size: 0.78rem; margin-top: 2px; }
.payment-option:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); }
.empty-state { text-align: center; padding: 90px 0; }
.empty-state .glyph { font-size: 2.6rem; color: var(--gold-pale); margin-bottom: 18px; font-family: 'Playfair Display', serif; }

/* ---------------------------------------------------------------------- */
/* Order Success — post-checkout confirmation (order-success.php)          */
/* ---------------------------------------------------------------------- */
.order-success-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.order-success-ring {
  width: 92px; height: 92px; margin: 0 auto 26px;
  border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #4a7c58, var(--success) 70%);
  box-shadow: 0 14px 32px rgba(63, 107, 74, 0.28);
}
.order-success-ring::before,
.order-success-ring::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--success); opacity: 0.5;
  animation: order-success-pulse 2.6s ease-out infinite;
}
.order-success-ring::after { animation-delay: 1.1s; }
.order-success-ring svg { width: 38px; height: 38px; }
@keyframes order-success-pulse {
  0% { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.45); opacity: 0; }
}
.order-success-wrap .eyebrow { color: var(--maroon); }
.order-success-number {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ivory-deep); border: 1px dashed var(--gold-warm);
  padding: 10px 22px; border-radius: 999px; font-size: 0.86rem; color: var(--ink-soft);
  margin: 8px 0 30px; letter-spacing: 0.01em;
}
.order-success-number strong { font-family: 'Playfair Display', serif; color: var(--ink); letter-spacing: 0.03em; }
.order-success-next {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 30px 0 6px; text-align: left;
}
.order-success-next-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 16px 15px; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.55;
}
.order-success-next-item strong { display: block; color: var(--ink); font-size: 0.84rem; margin-bottom: 4px; }
.order-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
@media (max-width: 640px) {
  .order-success-next { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* Account / order tables                                                     */
/* ---------------------------------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.account-nav a {
  display: block; padding: 12px 0; font-size: 0.9rem; border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.account-nav a.active, .account-nav a:hover { color: var(--gold-deep); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data-table th {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'Inter', sans-serif;
  color: var(--ink-soft); padding: 12px 14px; border-bottom: 1px solid var(--line);
}
table.data-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data-table tbody tr { transition: background 0.12s ease; }
table.data-table tbody tr:hover { background: rgba(28, 45, 82, 0.06); }
.status-pill {
  display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 0.72rem; text-transform: capitalize;
}
.status-paid, .status-delivered { background: #e9f2ec; color: var(--success); }
.status-pending, .status-placed, .status-processing { background: #e7ecf5; color: var(--gold-deep); }
.status-failed, .status-cancelled { background: #fbeaea; color: var(--error); }
.status-shipped { background: #e6eef5; color: #345d82; }
.status-refunded { background: #ece7f5; color: #5b4a9e; }

/* ---------------------------------------------------------------------- */
/* Admin                                                                      */
/* ---------------------------------------------------------------------- */
.admin-body { background: #f1f1f3; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; align-items: start; }
/* Pinned to the viewport on desktop (position: sticky + full viewport
   height + its own scroll) so it stays put while a long products/orders
   table scrolls underneath it — previously it was just a normal grid
   column, so it scrolled away with the rest of the page. The mobile
   breakpoint further down overrides this back to a fixed off-canvas
   drawer, which is unaffected by this change. */
.admin-sidebar {
  background: var(--ink); color: var(--ivory-deep); padding: 28px 22px;
  display: flex; flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-sidebar .logo {
  color: var(--ivory); margin-bottom: 36px; display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; white-space: normal; line-height: 1.2; word-break: break-word;
}
.admin-sidebar nav { display: flex; flex-direction: column; }
.admin-sidebar nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 6px; font-size: 0.88rem; color: #c9cbd2; margin-bottom: 2px;
  border-left: 2px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-sidebar nav a.active { border-left-color: var(--gold); }
.admin-nav-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 14px 4px; }
.admin-sidebar-user {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; gap: 10px;
}
.admin-sidebar-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold-deep); color: #fff; font-weight: 600; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.admin-sidebar-user-name { display: block; font-size: 0.82rem; color: #fff; font-weight: 500; }
.admin-sidebar-user-email { display: block; font-size: 0.72rem; color: #8d9099; word-break: break-all; }
.nav-pending-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  background: var(--gold-deep); color: #fff; border-radius: 50%;
  font-size: 0.7rem; font-weight: 600; line-height: 1;
}
.admin-main { padding: 36px 44px; }
/* Sticks to the top of the viewport as the page scrolls, so the page
   title and its action buttons (e.g. "Add Product") stay reachable on
   long listing pages instead of scrolling out of view above the table. */
.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px; padding: 10px 0 20px; border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f1f1f3;
}
.admin-topbar h1 { letter-spacing: 0.01em; }
.admin-topbar-heading { display: flex; flex-direction: column; gap: 4px; }
.admin-topbar-subtitle { font-size: 0.86rem; color: var(--ink-soft); }
.admin-topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
/* Reused on account.php (3 cards: Orders / Spent / Member Since) — same
   component as the admin dashboard's stat cards, just fewer columns. */
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 24px;
  box-shadow: var(--shadow-soft); transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex; align-items: flex-start; gap: 16px;
  border-left: 3px solid var(--gold-deep);
}
.stat-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.stat-card-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold-pale); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
}
.stat-card-icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.stat-card .label { font-size: 0.75rem; text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: 0.06em; color: var(--ink-soft); }
.stat-card .value { font-family: 'Playfair Display', serif; font-size: 1.9rem; margin-top: 6px; }
/* Subtle per-card accent so the four stat cards read as distinct at a
   glance rather than four identical grey boxes — colours pulled from the
   existing status-pill palette so nothing new has to be introduced. */
.stat-card--revenue { border-left-color: var(--success); }
.stat-card--revenue .stat-card-icon { background: #e9f2ec; color: var(--success); }
.stat-card--products { border-left-color: #345d82; }
.stat-card--products .stat-card-icon { background: #e6eef5; color: #345d82; }
.stat-card--customers { border-left-color: #5b4a9e; }
.stat-card--customers .stat-card-icon { background: #ece7f5; color: #5b4a9e; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; margin-bottom: 28px; box-shadow: var(--shadow-soft); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.panel-head h3 { margin-bottom: 0; }

/* Admin quick-actions row on the dashboard */
.admin-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 28px; }
.admin-quick-action {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  color: var(--ink);
}
.admin-quick-action:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--gold-deep); }
.admin-quick-action-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
  background: var(--ivory-deep); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
}
.admin-quick-action-icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.admin-quick-action span.label { font-size: 0.85rem; font-weight: 600; }

/* Photo-forward category cards (admin/categories.php) — replaces the
   old plain data-table row for the listing since categories are a
   visual, image-driven concept and a table under-served that. */
.admin-category-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px;
}
.admin-category-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex; flex-direction: column;
}
.admin-category-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.admin-category-card-img {
  width: 100%; height: 120px; object-fit: cover; background: var(--ivory-deep);
  display: block;
}
.admin-category-card-img--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'Inter', sans-serif;
}
.admin-category-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.admin-category-card-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.admin-category-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--ink-soft); }
.admin-category-card-actions { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; }
.refund-panel {
  margin-top: 24px; padding: 20px 22px;
  border: 1px solid #f0c9c9; border-radius: var(--radius-md);
  background: #fdf5f5;
}
.refund-panel--done { border-color: var(--line); background: var(--ivory-deep); }
.refund-panel .toggle-row { font-size: 0.85rem; text-transform: none; font-weight: 400; }
.admin-topbar-mobile {
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--ink); color: var(--ivory); padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
}
/* The button's default "paper" (near-white) fill + ivory hamburger lines
   is invisible on this dark bar — lines the same colour as the button
   they sit on. Give it a translucent dark-mode treatment instead so the
   ivory lines actually show up, matching the ghost-button pattern used
   elsewhere on dark surfaces (e.g. the storefront's dark mobile drawer). */
.admin-topbar-mobile .mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}
.admin-topbar-mobile .mobile-nav-toggle:active { background: rgba(255, 255, 255, 0.16); }
.admin-topbar-mobile .mobile-nav-toggle[aria-expanded="true"] {
  border-color: var(--ivory);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.admin-topbar-mobile .mobile-nav-toggle span { background: var(--ivory); }
.admin-topbar-mobile .logo {
  color: var(--ivory); font-size: 0.92rem; white-space: normal; line-height: 1.15;
  display: flex; align-items: center; gap: 6px; overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Reviews                                                                    */
/* ---------------------------------------------------------------------- */
.star-rating { display: inline-flex; gap: 1px; color: var(--line); font-size: 0.95rem; line-height: 1; }
.star-rating .star.filled { color: var(--gold-deep); }
.pd-rating-summary {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 18px; font-size: 0.85rem; color: var(--ink);
}
.pd-rating-summary .star-rating { font-size: 1rem; }
.pd-rating-summary .pd-rating-value { font-weight: 600; }

/* Product page: two-column layout — rating summary + write-review form
   on the left, the list of approved reviews on the right. Stacks to a
   single column on mobile via the shared 860px breakpoint below. */
.reviews-section { border-top: 1px solid var(--line); }
.reviews-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}
.reviews-big-score {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 6px;
}
.review-form-box {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.review-star-picker { display: flex; gap: 4px; }
.review-star-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  font-size: 1.6rem; line-height: 1; color: var(--line);
  transition: color 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}
.review-star-btn:hover { transform: scale(1.1); }
.review-star-btn.active { color: var(--gold-deep); }

.reviews-list-col { display: flex; flex-direction: column; gap: 18px; }
.review-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 22px 24px; box-shadow: var(--shadow-soft);
}
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.review-date { font-size: 0.78rem; }
.review-title { font-size: 1rem; margin-bottom: 6px; }
.review-body { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin-bottom: 12px; }
.review-author { font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.review-verified-badge {
  background: var(--gold-pale); color: var(--gold-deep);
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 10px;
}

/* Homepage "What Customers Say" testimonial grid */
.reviews-home-section { background: var(--ivory-deep); }
.reviews-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review-card--home {
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card--home:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.review-card--home .review-body { font-style: italic; }
.review-product-link { font-size: 0.78rem; color: var(--gold-deep); margin-top: auto; padding-top: 4px; }
.review-product-link:hover { text-decoration: underline; }
/* Optional customer photo on admin-authored testimonials (index.php) */
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-pale);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                                 */
/* ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .category-strip { grid-template-columns: repeat(3, 1fr); }
  .category-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-trust-strip { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .reviews-home-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tablet / small-laptop zone (861–1080px) — logo, nav and the
     account/wishlist/bag icons were all fighting for the same row here,
     which is what could squeeze the brand name. Tighten the nav gaps
     and icon labels first so the logo never has to give up its space. */
  .main-nav { gap: 18px; }
  .header-actions { gap: 16px; padding-left: 16px; }
}

@media (max-width: 860px) {
  .main-nav, .admin-sidebar nav .nav-label { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .journey-story-hero { padding: 56px 0 64px; }
  .journey-story-quote-mark { font-size: 3.2rem; }
  .journey-story-beat { font-size: 1.2rem; margin: 32px 0; }
  .journey-story-closing { font-size: 1.1rem; margin-top: 40px; }
  /* Timeline collapses to a single column: thread + markers move to the
     left edge, photo stacks above its text for each moment. */
  .journey-timeline::before { left: 15px; }
  .journey-timeline-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-left: 40px;
    margin-bottom: 48px;
  }
  .journey-timeline-marker { left: 15px; top: 10px; }
  .journey-timeline-item .journey-timeline-photo,
  .journey-timeline-item:nth-child(even) .journey-timeline-photo { order: 1; aspect-ratio: 16 / 10; }
  .journey-timeline-item .journey-timeline-content,
  .journey-timeline-item:nth-child(even) .journey-timeline-content { order: 2; padding: 0; }
  .journey-timeline-content .journey-story-beat { font-size: 1.08rem; margin: 12px 0; }
  .hero.hero-fullbleed { min-height: 480px; }
  .hero-fullbleed .hero-inner { padding: 56px 0; }
  .hero-fullbleed .hero-copy { max-width: none; }
  .hero-scroll-cue { display: none; }
  .page-title-band.has-slider { min-height: 260px; padding: 44px 0; }
  .product-detail, .cart-layout, .shop-layout, .account-layout, .admin-shell, .contact-layout, .reviews-layout { grid-template-columns: minmax(0, 1fr); }
  .pd-buy-box { padding: 18px; margin-top: 14px; }
  .pd-trust-row { gap: 14px 22px; }
  .reviews-layout { gap: 36px; }
  .reviews-home-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-band .container { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .store-map-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .store-map-frame { padding: 14px; }
  .store-map { max-width: 400px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .weaver-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .category-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .category-row-head { align-items: center; }
  .category-row-head .btn-link { font-size: 0.8rem; }
  .category-row + .category-row { margin-top: 40px; }

  /* App-like mobile shell: centered logo + a boxed menu button on the
     far right replace the desktop nav row, and a fixed bottom tab bar
     takes over Account/Wishlist/Cart duties so the header can stay
     slim. The toggle sits last in source order but is pulled to the
     end of the row explicitly via `order`, matching the reference
     header's right-aligned menu button. */
  .mobile-nav-toggle { display: flex; order: 5; }
  .site-header .container { justify-content: flex-start; padding-top: 14px; padding-bottom: 14px; }
  .site-header .logo { flex: 1; justify-content: center; font-size: 1.02rem; }
  .site-header .logo-name { white-space: normal; text-align: center; line-height: 1.1; }
  .header-actions { display: none; }

  body { padding-bottom: 62px; }
  .bottom-tabbar { display: block; }
  .whatsapp-float { bottom: 78px; }

  /* Sticky add-to-bag bar on product.php — stacks above the bottom tab
     bar, so page content needs to clear both: 62px tab bar + ~78px
     add-to-bag bar. */
  .pd-actions { display: none; }
  .sticky-add-bar { display: flex; }
  body.has-sticky-bar { padding-bottom: 140px; }
  body.has-sticky-bar .whatsapp-float { bottom: 156px; }

  /* Category chips scroll horizontally instead of squishing into a grid */
  .category-strip {
    display: flex; overflow-x: auto; gap: 14px; padding-bottom: 6px;
    grid-template-columns: none; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .category-card { flex: 0 0 132px; padding: 20px 12px; scroll-snap-align: start; }

  /* Mobile filter drawer for shop.php */
  .shop-layout > aside {
    position: fixed; top: 0; bottom: 0; right: 0; width: 84%; max-width: 320px;
    background: var(--paper); z-index: 100; padding: 20px 24px 28px;
    transform: translateX(100%); transition: transform 0.28s ease;
    overflow-y: auto; box-shadow: var(--shadow-lift);
    padding-top: max(20px, env(safe-area-inset-top));
  }
  .shop-layout > aside.open { transform: translateX(0); }
  /* The drawer itself already supplies the background/padding/shadow —
     nesting another bordered panel inside it here would just double up. */
  .filter-panel { border: none; padding: 0; background: none; box-shadow: none; }
  .shop-type-tabs-band { padding: 18px 0; }
  .shop-type-tabs { width: 100%; }
  .shop-type-tabs a { flex: 1; text-align: center; padding: 10px 12px; }
  .mobile-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 1px solid var(--ink); border-radius: var(--radius-sm);
    background: var(--paper); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'Inter', sans-serif;
    cursor: pointer; font-family: inherit;
  }
  .shop-toolbar { flex-wrap: wrap; gap: 12px; }
  #mobile-filter-close { display: block !important; }
  .summary-card { position: static; top: auto; }
  .account-layout { gap: 24px; }
  .account-nav { display: flex; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; }
  .account-nav a { white-space: nowrap; border-bottom: 2px solid transparent; padding: 10px 14px; }
  .account-nav a.active { border-color: var(--gold); }

  /* Admin panel: sidebar becomes a slide-in drawer behind a mobile topbar */
  .admin-topbar-mobile { display: flex; }
  .admin-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 78%; max-width: 300px; z-index: 100;
    transform: translateX(-100%); transition: transform 0.28s ease; overflow-y: auto;
    padding-top: max(28px, env(safe-area-inset-top));
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { padding: 20px 18px 90px; }
  .admin-topbar { flex-wrap: wrap; gap: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-quick-actions { grid-template-columns: repeat(2, 1fr); }
  table.data-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Order history (account.php) + admin listing tables (orders,
     products, coupons): a wide multi-column table doesn't fit a phone
     screen even with horizontal scroll — users end up seeing a
     different, harder-to-read experience than on desktop. Instead,
     each row becomes a self-contained card with the same information
     stacked vertically (label from data-label + value), so mobile shows
     exactly the same detail as the browser, just reflowed. Shared by
     table.order-history-table (storefront) and table.admin-data-table
     (admin panel) — same treatment, two contexts. */
  table.order-history-table, table.admin-data-table { display: block; overflow-x: visible; white-space: normal; }
  table.order-history-table thead, table.admin-data-table thead { display: none; }
  table.order-history-table tbody, table.admin-data-table tbody { display: block; }
  table.order-history-table tr, table.admin-data-table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--paper);
  }
  table.order-history-table td, table.admin-data-table td {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    white-space: normal;
  }
  table.order-history-table td:last-child, table.admin-data-table td:last-child { border-bottom: none; padding-bottom: 0; }
  table.order-history-table td:first-child, table.admin-data-table td:first-child { padding-top: 0; }
  table.order-history-table td::before, table.admin-data-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase; font-family: 'Inter', sans-serif;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    font-weight: 600;
    margin-bottom: 4px;
  }
  /* Action links (Edit · Delete etc.) sit in the label-less last cell —
     lay them out with a bit of breathing room instead of a cramped
     inline run of underlined text. */
  table.admin-data-table td:last-child { display: flex; gap: 14px; flex-wrap: wrap; }

  /* Size + stock rows: stack instead of cramming a text input,
     number input and Remove link into one row on a narrow phone screen. */
  .size-row { flex-wrap: wrap; }
  .size-row .size-row-label { flex: 1 1 100%; width: 100%; }
  .size-row .size-row-stock { flex: 1 1 auto; width: auto; }

  /* Product detail size picker: bigger tap targets, evenly spread. */
  .pd-size-btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  h1 { font-size: 2rem; }
  .product-grid, .category-strip { gap: 14px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .product-title { font-size: 0.88rem; }
  .product-price { font-size: 0.88rem; }

  /* Touch-friendly form controls + buttons everywhere on small phones */
  .form-row input, .form-row select, .form-row textarea { padding: 13px 14px; font-size: 1rem; }
  .btn { padding: 14px 22px; }
  .qty-stepper button, .qty-stepper input { height: 46px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .cart-line { grid-template-columns: 64px 1fr auto; column-gap: 12px; row-gap: 10px; }
  .cart-line img { width: 64px; height: 80px; }
  .cart-line > *:nth-child(3) { grid-column: 1 / -1; justify-self: start; }
  .form-card { padding: 26px 20px; max-width: 100%; }
  .summary-card { padding: 20px; }
  .panel { padding: 18px; }

  /* Admin dashboard stat cards: 2-up is still cramped on a small phone
     (labels wrap awkwardly against the value) — go full-width below 560px. */
  .stat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-quick-actions { grid-template-columns: minmax(0, 1fr); }
  .admin-category-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .admin-main { padding: 20px 14px 90px; }
}