/* ==========================================================================
   House of Vijaya Lakshmi — Saree Atelier
   Design language: minimal luxury / editorial
   Palette: cream, near-black ink, deep navy blue
   Type: Playfair Display (display serif) + Inter (body sans)

   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 antique gold to navy blue, so every existing rule picks
   up the new palette automatically without needing to be touched.
   ========================================================================== */

:root {
  --ivory:        #faf8f3;
  --ivory-deep:   #f0ece2;
  --paper:        #fffefb;
  --ink:          #12141a;
  --ink-soft:     #4b4e56;
  --line:         #e2e1e6;
  --gold:         #1c2d52;
  --gold-deep:    #0f1a30;
  --gold-pale:    #dde5f2;
  --error:        #b23b3b;
  --success:      #3f6b4a;

  /* Maroon + warm gold — pulled from the House of Vijaya Lakshmi logo
     (deep red backdrop, antique gold linework). Scoped to just the
     announcement bar and footer for now rather than replacing the
     site-wide --gold navy palette above. */
  --maroon-deep:   #430c14;
  --maroon:        #6e1420;
  --gold-warm:     #c9a227;
  --gold-warm-pale:#ecd68f;

  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-soft: 0 12px 32px rgba(18, 20, 26, 0.06);
  --shadow-lift: 0 20px 48px rgba(18, 20, 26, 0.12);

  --maxw: 1240px;
}

* { 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: 500;
  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;
  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); }

/* ---------------------------------------------------------------------- */
/* Top announcement bar                                                    */
/* ---------------------------------------------------------------------- */
.announce {
  background: linear-gradient(90deg, var(--maroon-deep), var(--maroon));
  color: var(--gold-warm-pale);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 9px 0;
  overflow: hidden;
  white-space: nowrap;
}
.announce-track {
  display: inline-flex;
  width: max-content;
  animation: announce-scroll 22s linear infinite;
}
.announce-item {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
}
.announce-item::after {
  content: '✦';
  margin-left: 28px;
  color: var(--gold-warm);
  opacity: 0.7;
  font-size: 0.7rem;
}
/* Track renders the message set twice back-to-back (via 6 repeats of the
   PHP loop, animated exactly half its own width) so the loop point is
   invisible — it looks like one continuous ticker rather than a jump-cut. */
@keyframes announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
  .announce { overflow-x: auto; }
}

/* ---------------------------------------------------------------------- */
/* 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(255, 253, 250, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(18, 20, 26, 0.03), 0 8px 24px -18px rgba(18, 20, 26, 0.25);
  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;
}
@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;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 24px;
}

.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.
     Range brought down a notch from the original 1.2rem–1.75rem — the
     full "House of Vijaya Lakshmi" wordmark was reading oversized next
     to the nav at most desktop widths. */
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  letter-spacing: 0.045em;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  transition: opacity 0.2s ease;
}
.logo:hover { opacity: 0.9; }
.logo span { color: var(--gold-deep); }
.logo-name {
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Circular ring badge around the uploaded logo image — the header's
   focal point. Ring color and hover glow both pull from --gold-deep,
   which now resolves to the site's navy accent, so this stays in sync
   with the sitewide palette automatically. */
.logo-badge {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-deep);
  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);
}

/* Vertical hairline between the logo badge and the wordmark — reads as
   a deliberate lockup rather than two elements just sitting side by
   side. Hidden entirely if there's no logo image (badge/divider are
   both skipped together in the markup). */
.logo-divider {
  width: 1px;
  height: 26px;
  background: var(--line);
  flex-shrink: 0;
}

/* A thin gold hairline under the wordmark on hover — ties the logo back
   into the same gold-underline language used on the nav links and
   footer, instead of it sitting as plain static text. */
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); }

.main-nav {
  display: flex;
  gap: 32px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transition: left 0.25s ease, right 0.25s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { left: 0; right: 0; }

.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-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, matching the icon-only
   Account/Bag treatment from the reference header design. */
.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(--gold-deep);
  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; }

/* 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: 10px;
  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                                                */
/* ---------------------------------------------------------------------- */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(18, 20, 26,0.5);
  z-index: 90; opacity: 0; transition: opacity 0.25s ease;
}
.mobile-nav-overlay.open { display: block; opacity: 1; }
/* The drawer is deliberately styled to match the footer's dark navy
   panel rather than the light storefront body — same background,
   same white/light text, same quiet hairline dividers — so it reads
   as a cohesive "brand chrome" surface instead of a plain popover. */
.mobile-nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 82%; max-width: 320px;
  background: var(--ink); color: var(--ivory);
  z-index: 100; padding: 10px 28px 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));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 20px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
/* A dedicated lockup for the drawer header — its own class rather than
   reusing .logo, whose fluid clamp() sizing is tuned for the full-width
   site header and looked oversized/awkward squeezed into this narrow
   320px-max panel. Sized to read as a proper small wordmark.
   Scoped under .mobile-nav-drawer-head (two classes) rather than bare
   .drawer-logo (one class) so it reliably beats the more general
   ".mobile-nav-drawer a" rule below on specificity — that rule was
   quietly winning the display property before (block instead of the
   flex this needs), which is what made the badge+name lockup look
   slightly off instead of a clean single row. */
.mobile-nav-drawer-head .drawer-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--ivory);
}
.mobile-nav-drawer-head .drawer-logo span { color: var(--gold-pale); }
.drawer-logo-badge {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--gold-pale); padding: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.drawer-logo-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mobile-nav-close {
  background: none; border: none; font-size: 1.8rem; line-height: 1;
  color: var(--ivory-deep); opacity: 0.75; cursor: pointer; padding: 4px 8px;
  transition: opacity 0.2s ease;
}
.mobile-nav-close:hover { opacity: 1; }
.mobile-nav-drawer a {
  display: block; padding: 14px 4px; font-size: 1rem; color: var(--ivory);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.15s ease, background 0.15s ease;
}
.mobile-nav-drawer a:hover { background: rgba(255, 255, 255, 0.04); }
.mobile-nav-drawer a.active { color: var(--gold-pale); font-weight: 600; }
.mobile-nav-divider { height: 1px; background: rgba(255, 255, 255, 0.1); }
.mobile-nav-label {
  display: block;
  padding: 16px 4px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-deep);
  opacity: 0.6;
}
/* Policy links (Refund/Privacy/Terms) are secondary, reference-only
   links — deliberately styled smaller and quieter than the primary nav
   items above, with no heavy per-row border, so they read as a compact
   utility list rather than duplicating the main menu's visual weight. */
.mobile-nav-policy-links {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}
.mobile-nav-policy-links a {
  display: block;
  padding: 8px 4px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: none;
}
.mobile-nav-policy-links a:hover,
.mobile-nav-policy-links a.active { color: var(--gold-pale); }
.mobile-nav-policy-links a.active { font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* 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(18, 20, 26,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(18, 20, 26,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(18, 20, 26,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;
  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(18, 20, 26,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;
  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; }

.hero-fullbleed .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18,20,26,0.74) 0%, rgba(18,20,26,0.48) 45%, rgba(18,20,26,0.18) 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 saree border's zari stripe —
   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-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(18,20,26,0.4) 0%, rgba(18,20,26,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 (Sarees / Blouses) — 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; }
.category-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.category-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(18, 20, 26, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.category-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(18, 20, 26, 0.16);
}
.category-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Model photos are usually shot full-length — anchoring toward the
     top keeps the face/upper body in frame instead of a plain center
     crop landing mid-torso. */
  object-position: center 15%;
  transition: transform 0.5s ease;
}
.category-tile-img--placeholder {
  background: linear-gradient(160deg, var(--gold-pale), var(--ivory-deep));
}
.category-tile:hover .category-tile-img { transform: scale(1.06); }
.category-tile-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 18px 18px;
  background: linear-gradient(to top, rgba(18, 20, 26, 0.82) 0%, rgba(18, 20, 26, 0.35) 55%, rgba(18, 20, 26, 0) 100%);
  color: var(--ivory);
}
.category-tile-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.12rem;
  color: var(--ivory);
}
.category-tile-count {
  font-size: 0.75rem;
  color: var(--gold-pale);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
/* The "Sale" category (an admin-managed category like any other —
   see database/migration_017_sale_category.sql) gets a small ribbon
   so it stands out among the regular category tiles as a real
   product-backed deal, not just decoration. */
.category-tile--sale { box-shadow: 0 0 0 2px var(--gold-deep), 0 2px 10px rgba(18, 20, 26, 0.06); }
.category-tile-ribbon {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  background: var(--gold-deep);
  color: var(--ivory);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------- */
/* 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(18, 20, 26, 0.05);
  transition: box-shadow 0.3s ease;
}
.product-card:hover .product-media { box-shadow: 0 18px 34px -12px rgba(18, 20, 26, 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 saree/model photo keeps its face and drape 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;
  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); }

/* ---------------------------------------------------------------------- */
/* Festival / Occasion Collection — admin-managed seasonal homepage block */
/* (Admin -> Settings -> Festival / Occasion Collection). 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 House of Vijaya Lakshmi.      */
/*                                                                        */
/* 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.                             */
/* ---------------------------------------------------------------------- */
.occasion-section { padding: 40px 0 56px; }
.occasion-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. */
.occasion-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: occasion-garland-sway 7s ease-in-out infinite alternate;
}
@keyframes occasion-garland-sway {
  from { background-position: 0 -3px; }
  to   { background-position: 18px -3px; }
}
.occasion-banner-bg { position: absolute; inset: 0; z-index: 0; }
.occasion-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. */
.occasion-banner--photo { background: var(--ink); border-color: rgba(230,196,122,0.4); }
.occasion-banner--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,20,26,0.5) 0%, rgba(18,20,26,0.75) 100%);
}
.occasion-banner--photo .occasion-garland { opacity: 0.85; }
.occasion-banner-inner { position: relative; z-index: 3; max-width: 480px; margin: 0 auto; }
.occasion-banner-inner .eyebrow { justify-content: center; margin-top: 6px; }
.occasion-banner--photo .eyebrow { color: var(--gold-pale); }
.occasion-banner--photo .occasion-heading,
.occasion-banner--photo .occasion-subtext { color: var(--ivory); }
.occasion-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  margin: 12px 0 8px;
}
.occasion-subtext { color: var(--ink-soft); font-size: 0.92rem; max-width: 44ch; margin: 0 auto 20px; }
.occasion-banner .btn { padding: 12px 28px; font-size: 0.82rem; }
.occasion-product-grid { margin-top: 4px; }
@media (max-width: 640px) {
  .occasion-banner { padding: 34px 22px 28px; margin-bottom: 32px; }
  .occasion-heading { margin: 10px 0 6px; }
}
/* 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;
  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); }

/* ---------------------------------------------------------------------- */
/* Our Artisan Network — India map with blinking pin markers               */
/* (replaces the old feature-band on the homepage; admin-managed via       */
/* Admin -> Artisan Map)                                                   */
/* ---------------------------------------------------------------------- */
.artisan-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. */
.artisan-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);
}
.artisan-map-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--gold-deep);
  opacity: 0.55;
  pointer-events: none;
}
.artisan-map-corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.artisan-map-corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.artisan-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. */
.artisan-map.artisan-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;
}
.artisan-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.artisan-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.artisan-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: artisan-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. */
.artisan-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. */
.artisan-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;
}
.artisan-pin-marker-img--legend {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: contain;
}
.artisan-pin-dot--legend {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  animation: none;
  box-shadow: none;
}
@keyframes artisan-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) {
  .artisan-pin-dot { animation: none; }
}
.artisan-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;
}
.artisan-pin-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.artisan-pin-tooltip em { color: var(--ivory); opacity: 0.7; font-style: normal; font-size: 0.72rem; }
.artisan-pin:hover .artisan-pin-tooltip,
.artisan-pin:focus-within .artisan-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. */
.artisan-map-wrap--single { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* Admin-written quote (Admin -> Artisan Map -> Quote) that fills the
   space next to the map — replaces the old place-name text legend. */
.artisan-quote { text-align: center; padding: 0 16px; }
.artisan-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;
}
.artisan-quote-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 14px;
}
.artisan-quote-attribution {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.artisan-quote-attribution::before { content: '— '; }

/* Admin: Artisan Map 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 .artisan-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: 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 saree border's zari stripe. 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;
  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 is long ("House of Vijaya Lakshmi") — 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;
  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;
  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 {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 22px;
}
.alert-error { background: #fbeaea; color: var(--error); border: 1px solid #eecccc; }
.alert-success { background: #e9f2ec; color: var(--success); border: 1px solid #cde3d5; }

/* ---------------------------------------------------------------------- */
/* 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-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; 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 All / Sarees / Blouses 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;
  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;
  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);
}
.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;
  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;
  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; }

/* ---------------------------------------------------------------------- */
/* Admin: blouse 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; }

/* ---------------------------------------------------------------------- */
/* 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: 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;
  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; 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;
}
.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; 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: 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: 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: 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: 1fr; }
  .feature-band .container { grid-template-columns: 1fr; gap: 36px; }
  .artisan-map-wrap { grid-template-columns: 1fr; gap: 28px; }
  .artisan-map-frame { padding: 14px; }
  .artisan-map { max-width: 400px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .weaver-grid { grid-template-columns: 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;
    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;
    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; }

  /* Blouse 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: 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: 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: 1fr; gap: 12px; }
  .admin-quick-actions { grid-template-columns: 1fr; }
  .admin-category-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .admin-main { padding: 20px 14px 90px; }
}