/* ============================================================
   Elroi Design System — app.css
   Aesthetic: Editorial luxury, warm cream, Cormorant serif
   ============================================================ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Colours */
  --cream:        #F0EBE3;
  --cream-dark:   #E8E2D9;
  --cream-light:  #F7F3EF;
  --ink:          #111111;
  --ink-soft:     #333333;
  --muted:        #888888;
  --muted-light:  #BBBBBB;
  --border:       #D9D4CF;
  --border-dark:  #B5AFA9;
  --accent:       #5C2D1E;   /* dark burgundy — top bar, accents */
  --admin-sidebar: #2B1A15;  /* dark, warm brown — a shade darker than the burgundy accent, so the admin sidebar reads as "dark" without being a generic flat black */
  --white:        #FFFFFF;
  --success:      #2D6A4F;
  --error:        #C0392B;
  --fonepay-orange: #F7941D;

  /* Typography */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  32px;
  --gap-xl:  64px;
  /* Section vertical rhythm — .py-2xl drives the space between stacked
     sections on every page. Originally 96px (way too much air), pulled
     to 64px, still visibly heavy once two sections each pad with this
     on adjoining sides (e.g. Products' bottom + Lookbook's top stack to
     2× this value at the seam) — tightened once more for a properly
     tight, professional rhythm without sections touching. */
  --gap-2xl: 40px;

  /* Layout */
  --max-width:    1280px;
  --header-h:     64px;
  --header-nav-h: 44px;
  --radius:       0px;    /* sharp edges — luxury minimalism */
  --radius-sm:    2px;

  /* Transitions */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:          0.28s;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x:hidden lives on <html> only (see above) — setting it here
     too would force overflow-y to compute as auto, turning <body> into its
     own scroll container and breaking position:sticky for the admin
     sidebar (it started sticking relative to <body> instead of the real
     viewport, which is what caused the sidebar to stop covering the full
     page height on longer admin pages). */
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

/* ── Typography Scale ──────────────────────────────────────── */
.t-hero {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.t-display {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.15;
}

.t-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
}

.t-subheading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.t-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;  /* 11px */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-body {
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.7;
  color: var(--ink-soft);
}

.t-small {
  font-size: 0.8125rem;  /* 13px */
  color: var(--muted);
}

.t-price {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Layout ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap-lg);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--gap-md); }
}

/* ── Top announcement bar ──────────────────────────────────── */
.top-bar {
  height: 5px;
  background: var(--accent);
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}

.site-header-top {
  position: relative;
  height: var(--header-h);
}

.site-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--gap-lg);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.site-header-nav {
  border-top: 1px solid var(--border);
}

.site-header-nav .site-nav {
  height: var(--header-nav-h);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xl);
  list-style: none;
}

.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink);
  transition: opacity var(--dur) var(--ease);
}

.icon-btn:hover { opacity: 0.6; }
.icon-btn svg { width: 20px; height: 20px; }

.cart-badge-header {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

.site-nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  position: relative;
  transition: color var(--dur) var(--ease);
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width var(--dur) var(--ease);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

/* Categories dropdown in the desktop nav row */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-dropdown-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur) var(--ease);
}

.nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: var(--cream);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: var(--gap-sm) 0;
  z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: 8px var(--gap-md);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}

.nav-dropdown-menu a:hover { background: var(--cream-dark); }

.site-logo {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.site-logo-img {
  max-height: 36px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

/* Search panel — JS toggles the .open class; the inline display:none
   in the markup is the closed default, this is the open state. */
#search-panel.open {
  display: block !important;
}

#search-panel input[type="text"] {
  color: var(--ink);
}

.cart-badge {
  background: var(--ink);
  color: var(--white);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

/* Hamburger — mobile */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease);
}

/* ── Ticker / Marquee ──────────────────────────────────────── */
.ticker-wrap {
  background: var(--cream-dark);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 10px 0;
}

.ticker-track {
  display: flex;
  gap: var(--gap-xl);
  animation: ticker 16s linear infinite;
  white-space: nowrap;
}

.ticker-item {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.ticker-item::before {
  content: '·';
  margin-right: var(--gap-xl);
  color: var(--muted-light);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero Section ──────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-h) - 5px - 41px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gap-2xl) var(--gap-xl) var(--gap-2xl) var(--gap-xl);
  gap: var(--gap-lg);
}

.hero-season {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-body {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 36ch;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
  padding-top: var(--gap-xl);
}

.hero-image {
  position: relative;
  overflow: hidden;
  background: var(--cream-dark);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-product-tag {
  position: absolute;
  bottom: var(--gap-lg);
  right: var(--gap-lg);
  background: rgba(240, 235, 227, 0.92);
  backdrop-filter: blur(4px);
  padding: 6px 12px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  padding: 12px 24px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  min-height: 44px;
}

.btn-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--white);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: inherit;
  color: inherit;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn-ghost:hover { opacity: 0.6; }

.btn-sm {
  padding: 8px 16px;
  font-size: 0.625rem;
  min-height: 36px;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 0.75rem;
  min-height: 52px;
}

.btn-full { width: 100%; }

/* ── Section Headers ────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--border);
}

.section-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
}

.section-link {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.section-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ── Product Grid ───────────────────────────────────────────── */
.product-grid {
  display: grid;
  /* auto-fit + a capped (non-1fr) max, instead of a flat repeat(3, 1fr) —
     with a fixed 3-column track, a page with only 1-2 items (a narrow
     category, a sparse search) stretched those items across empty
     columns, leaving a huge blank strip that read as a layout bug.
     auto-fit collapses genuinely empty tracks, and the fixed max keeps
     a lone card at a normal size instead of stretching to fill the
     whole row — same card size whether there's 1 item or 20. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  gap: var(--gap-lg) var(--gap-md);
}

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md) var(--gap-sm);
  }
}

/* ── Product Card ───────────────────────────────────────────── */
.product-card {
  position: relative;
  cursor: pointer;
}

.product-card-image {
  position: relative;
  overflow: hidden;
  background: var(--cream-dark);
  aspect-ratio: 3 / 4;
  margin-bottom: var(--gap-sm);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-card-image img {
  transform: scale(1.04);
}

.product-card-badge {
  position: absolute;
  top: var(--gap-sm);
  left: var(--gap-sm);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 7px;
  z-index: 1;
}

.product-card-wishlist {
  position: absolute;
  top: var(--gap-sm);
  right: var(--gap-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240,235,227,0.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 1;
}

.product-card:hover .product-card-wishlist { opacity: 1; }
.product-card-wishlist.wishlisted { opacity: 1; color: var(--accent); }

.product-card-quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--white);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px;
  text-align: center;
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}

.product-card:hover .product-card-quick-add { transform: translateY(0); }

.product-card-body {
  padding: 0 2px;
}

.product-card-name {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.4;
}

.product-card-variant {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.product-card-snippet {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 6px;
}

.product-card-snippet mark {
  background: rgba(92, 45, 30, 0.14); /* soft tint of --accent */
  color: var(--ink);
  padding: 0 2px;
  border-radius: 1px;
}

.product-card-price {
  font-size: 0.9375rem;
  color: var(--ink);
}

.product-card-compare-price {
  font-size: 0.8125rem;
  color: var(--muted-light);
  text-decoration: line-through;
  margin-right: 6px;
}

/* ── Product Detail ─────────────────────────────────────────── */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .product-detail { grid-template-columns: 1fr; gap: 0; }
}

/* Gallery */
.product-gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--header-nav-h) + 24px);
}

.gallery-main {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-dark);
  margin-bottom: var(--gap-sm);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}

.gallery-thumbs {
  display: flex;
  gap: var(--gap-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
  flex-shrink: 0;
  width: 72px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-dark);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.gallery-thumb.active { border-color: var(--ink); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Product Info */
.product-info {
  padding: var(--gap-lg) 0;
}

.product-breadcrumb {
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-lg);
}

.product-breadcrumb span { color: var(--muted-light); }

.product-name {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: var(--gap-sm);
}

.product-price-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

.product-price {
  font-size: 1.125rem;
  font-weight: 400;
}

.product-compare-price {
  font-size: 0.9375rem;
  color: var(--muted-light);
  text-decoration: line-through;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
  font-size: 0.8125rem;
  color: var(--muted);
}

.stars { color: var(--ink); letter-spacing: 2px; }

/* ── Product Reviews ─────────────────────────────────────────── */
.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  max-width: 640px;
}

.review-item {
  padding-bottom: var(--gap-lg);
  border-bottom: 1px solid var(--border);
}

.review-item-header {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.review-stars { color: var(--ink); letter-spacing: 1px; }
.review-author { font-size: 0.875rem; font-weight: 500; }

.review-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: var(--gap-lg);
  max-width: 480px;
}

.star-rating-input {
  display: flex;
  gap: 4px;
}

.star-rating-btn {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--border-dark);
  cursor: pointer;
  padding: 0;
  transition: color var(--dur) var(--ease);
}

.star-rating-btn:hover,
.star-rating-btn.selected { color: var(--ink); }

/* Variant selectors */
.variant-group {
  margin-bottom: var(--gap-lg);
}

.variant-label {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-sm);
}

.variant-label span {
  color: var(--ink);
  font-weight: 500;
  margin-left: 6px;
}

.size-options {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.size-btn {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--border-dark);
  background: transparent;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  padding: 0 var(--gap-sm);
}

.size-btn:hover { border-color: var(--ink); }
.size-btn.selected { background: var(--ink); color: var(--white); border-color: var(--ink); }
.size-btn.out-of-stock {
  color: var(--muted-light);
  border-color: var(--border);
  text-decoration: line-through;
  cursor: not-allowed;
}

.color-options {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.color-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  position: relative;
}

.color-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.color-btn.selected::after { border-color: var(--ink); }

/* ATC area */
.atc-group {
  display: flex;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}

/* .btn-full sets width:100%, which — as a flex child sitting next to the
   fixed-width qty selector — makes the row wider than its container and
   forces both to fight for space. Let it grow to fill what's left instead. */
.atc-group .btn-full {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.atc-group .qty-selector { flex-shrink: 0; }

@media (max-width: 400px) {
  .atc-group { flex-wrap: wrap; }
  .atc-group .qty-selector { flex: 1 1 100%; }
  .atc-group .btn-full { flex: 1 1 100%; }
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-dark);
  height: 52px;
}

.qty-btn {
  width: 44px;
  height: 100%;
  font-size: 1.1rem;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}

.qty-btn:hover { background: var(--cream-dark); }

.qty-input {
  width: 44px;
  text-align: center;
  border: none;
  background: none;
  font-size: 0.9375rem;
  color: var(--ink);
  outline: none;
}

.stock-status {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--gap-sm);
}

.stock-status.in-stock { color: var(--success); }
.stock-status.low-stock { color: #B8860B; }
.stock-status.out-of-stock { color: var(--error); }

.size-chart-link {
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.product-category-tag-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
  flex-wrap: wrap;
}

.product-category-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream-dark);
  font-size: 0.75rem;
  color: var(--ink);
}

/* Product tabs */
.product-tabs {
  margin-top: var(--gap-xl);
  border-top: 1px solid var(--border);
}

.tab-header {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  padding: 14px var(--gap-md);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  margin-bottom: -1px;
}

.tab-btn.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.tab-pane {
  display: none;
  padding: var(--gap-lg) 0;
}

.tab-pane.active { display: block; }

/* ── Admin Settings Tabs ─────────────────────────────────────── */
.settings-tabs {
  display: flex;
  gap: var(--gap-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--gap-lg);
  /* No wrap/media query existed for this at all before — on a narrow
     screen the tab bar would just overflow and clip tabs off-screen with
     no way to reach them. Scrolls horizontally instead. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.settings-tab {
  padding: 12px 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-tab:hover { color: var(--ink); }

.settings-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── Cart Drawer ─────────────────────────────────────────────── */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--cream);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s var(--ease);
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-lg);
  border-bottom: 1px solid var(--border);
}

.cart-drawer-title {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cart-close {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  transition: color var(--dur);
}

.cart-close:hover { color: var(--ink); }

.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md) var(--gap-lg);
}

.cart-select-all {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0 0 var(--gap-md);
  margin-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.cart-select-all input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

.cart-item {
  display: grid;
  grid-template-columns: auto 80px 1fr auto;
  align-items: start;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--border);
  transition: opacity var(--dur) var(--ease);
}

.cart-item-unselected { opacity: 0.45; }

.cart-item-checkbox {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 4px;
  cursor: pointer;
}

.cart-item-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.cart-item-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-dark);
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-name {
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.cart-item-meta {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--gap-sm);
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: 0.875rem;
}

.cart-item-qty button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: border-color var(--dur);
}

.cart-item-qty button:hover { border-color: var(--ink); }

.cart-item-price {
  font-size: 0.9375rem;
  text-align: right;
}

.cart-remove {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0;
  margin-top: 4px;
}

.cart-drawer-footer {
  padding: var(--gap-lg);
  border-top: 1px solid var(--border);
  background: var(--cream);
}

.cart-totals { margin-bottom: var(--gap-lg); }

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.875rem;
}

.cart-total-row.total {
  font-size: 1rem;
  border-top: 1px solid var(--border);
  padding-top: var(--gap-sm);
  margin-top: var(--gap-sm);
}

/* ── Checkout ────────────────────────────────────────────────── */
/* Deliberately compact — the whole flow should fit one viewport on a
   typical desktop screen without scrolling, so every gap here is
   tighter than this codebase's normal generous spacing scale. */
.checkout-header {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-md);
}

.checkout-back-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-dark);
  color: var(--ink);
}

.checkout-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--gap-lg);
  align-items: start;
}

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  /* Stacked single-column layout — show what they're paying before asking
     them to fill in a form, instead of burying the total at the bottom. */
  .order-summary-wrapper { order: 1; }
  .checkout-form { order: 2; }
}

.checkout-section {
  background: var(--white);
  padding: var(--gap-md) var(--gap-lg);
  margin-bottom: var(--gap-md);
}

.checkout-section-title {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--gap-md);
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--border);
}

.form-group {
  margin-bottom: var(--gap-sm);
}

.form-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-xs);
}

.form-control {
  width: 100%;
  min-width: 0;
  padding: 12px var(--gap-md);
  border: 1px solid var(--border-dark);
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

.form-control:focus { border-color: var(--ink); }
.form-control::placeholder { color: var(--muted-light); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Payment method cards — side-by-side on every viewport, including
   mobile, so both options are always visible at once without scrolling
   a stacked list. */
.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
}

.payment-method-card {
  position: relative;
  border: 1.5px solid var(--border);
  padding: var(--gap-lg) var(--gap-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-sm);
  background: var(--white);
}

.payment-method-card.selected {
  border-color: var(--ink);
  background: var(--cream);
}

.payment-method-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  align-items: center;
  justify-content: center;
  display: none;
}

.payment-method-card.selected .payment-method-check { display: flex; }

.payment-method-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.payment-method-card.selected .payment-method-icon { color: var(--ink); }

.payment-method-name {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Order summary sidebar */
.order-summary {
  background: var(--white);
  padding: var(--gap-md);
  position: sticky;
  top: calc(var(--header-h) + var(--header-nav-h) + 24px);
}

@media (max-width: 900px) {
  /* Sticky is a desktop-only trick to keep the summary visible alongside a
     taller form column — on the stacked mobile layout it would just pin
     the full card (items, coupon, totals) at the top of the screen the
     whole time the customer is filling in the form below it. */
  .order-summary { position: static; }
}

.order-summary-title {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--gap-md);
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--border);
}

.summary-items { margin-bottom: var(--gap-md); }

.summary-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--gap-sm);
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--border);
}

.summary-item-img {
  position: relative;
  width: 48px;
  aspect-ratio: 3/4;
  background: var(--cream-dark);
  overflow: visible;
}

.summary-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.summary-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-item-name { font-size: 0.875rem; }
.summary-item-meta { font-size: 0.75rem; color: var(--muted); }
.summary-item-price { font-size: 0.875rem; }

.summary-totals { border-top: 1px solid var(--border); padding-top: var(--gap-sm); }

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  padding: 5px 0;
  color: var(--ink-soft);
}

.summary-row.total {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  border-top: 1px solid var(--border);
  margin-top: var(--gap-sm);
  padding-top: var(--gap-sm);
}

/* ── Fonepay QR Payment Screen ──────────────────────────────── */
.payment-screen {
  max-width: 420px;
  margin: var(--gap-xl) auto;
  padding: 0 var(--gap-md);
  text-align: center;
  position: relative;
}

@media (max-width: 480px) {
  .payment-screen { margin: var(--gap-lg) auto; }
}

.payment-screen-close {
  position: absolute;
  top: 0;
  right: var(--gap-md);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
}

.payment-screen-title {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-md);
}

.fonepay-logo {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: var(--gap-lg);
  font-weight: 700;
  font-size: 1.0625rem;
  overflow: hidden;
}
.fonepay-logo-fone { background: #ED1C24; color: var(--white); padding: 5px 10px; }
.fonepay-logo-pay  { color: var(--ink); padding: 5px 4px; }

.qr-container {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  padding: var(--gap-lg) var(--gap-md);
  margin-bottom: var(--gap-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}

@media (max-width: 480px) {
  .qr-container { padding: var(--gap-md); }
}

.qr-code {
  width: 200px;
  height: 200px;
  max-width: 100%;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code img { width: 100%; height: 100%; object-fit: contain; }

.qr-amount-box {
  border: 1.5px dashed var(--border-dark);
  padding: 10px 24px;
  font-size: 1.25rem;
  font-weight: 600;
}

.qr-timer {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--success);
  line-height: 1;
}

.qr-timer.urgent { color: var(--error); }
.qr-timer-label {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.qr-amount {
  font-size: 1.5rem;
  font-weight: 400;
}

.qr-instructions {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.7;
  text-align: center;
}

.qr-status {
  padding: 10px 20px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qr-status.checking { background: var(--cream-dark); color: var(--muted); }
.qr-status.success  { background: #E8F5E9; color: var(--success); }
.qr-status.expired  { background: #FFF3E0; color: #E65100; }

.qr-steps {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qr-steps-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  width: 100%;
}

.qr-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.qr-step-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-fonepay {
  background: var(--fonepay-orange);
  border-color: var(--fonepay-orange);
  color: var(--white);
}

.btn-fonepay:hover {
  background: #DD8210;
  border-color: #DD8210;
  color: var(--white);
}

.cod-info-box {
  background: var(--cream-dark);
  border: 1px solid var(--border);
  padding: var(--gap-lg);
  text-align: center;
}

.cod-info-box svg {
  width: 48px;
  height: 48px;
  color: var(--muted);
  margin-bottom: var(--gap-md);
}

/* ── Order Tracking ──────────────────────────────────────────── */
.tracking-form {
  max-width: 480px;
  margin: 0 auto;
}

.status-timeline {
  margin-top: var(--gap-xl);
}

.timeline-step {
  display: flex;
  gap: var(--gap-md);
  padding-bottom: var(--gap-lg);
  position: relative;
}

.timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  background: var(--cream);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-step.completed .timeline-dot {
  background: var(--ink);
  border-color: var(--ink);
}

.timeline-step.current .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.timeline-dot svg {
  width: 12px;
  height: 12px;
  color: var(--white);
}

.timeline-content {}
.timeline-title { font-size: 0.875rem; font-weight: 500; margin-bottom: 2px; }
.timeline-time  { font-size: 0.75rem; color: var(--muted); }

/* ── Lookbook ─────────────────────────────────────────────────── */
.lookbook-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  align-items: center;
}

.lookbook-hero-image {
  height: 70vh;
  overflow: hidden;
}

.lookbook-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookbook-hero-content {
  /* Matches the vertical rhythm of .py-2xl used by the bestsellers
     section above it — was gap-xl (64px), visibly tighter than the
     96px used everywhere else on the homepage. */
  padding: var(--gap-2xl) var(--gap-2xl);
}

/* ── Single Lookbook page (lookbook/show.php) ────────────────────
   Deliberately NOT the .lookbook-hero-image class above — that class
   was built as one half of a 50%-width two-column grid (see the
   homepage teaser). Reused alone as a full-viewport-width banner with
   a vh-based height, it turned into an extremely wide/short box on
   desktop, so object-fit:cover crushed a portrait photo down to a
   thin sliver — the reported "image not visible properly" bug. A
   fixed aspect-ratio instead of a vh height means the crop is
   identical in shape on every viewport width, mobile or desktop. */
.lookbook-page-hero {
  max-width: 720px;
  margin: 0 auto var(--gap-2xl);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-dark);
}
.lookbook-page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lookbook listing grid — same 4:5 portrait ratio as the hero above,
   so the whole section reads as one consistent editorial system.
   auto-fit + capped max (see .product-grid) so a page with just 1-2
   lookbooks doesn't stretch a lone card across an empty row. */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
  gap: var(--gap-xl) var(--gap-lg);
}
.lookbook-card { text-decoration: none; color: inherit; }
.lookbook-card-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-dark);
  margin-bottom: var(--gap-md);
}
.lookbook-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.lookbook-card:hover .lookbook-card-image img { transform: scale(1.04); }
.lookbook-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin: var(--gap-xs) 0;
}

@media (max-width: 900px) {
  .lookbook-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg) var(--gap-md); }
  .lookbook-page-hero { max-width: 100%; }
}
@media (max-width: 560px) {
  .lookbook-grid { grid-template-columns: 1fr; }
  .lookbook-page-hero { margin-bottom: var(--gap-xl); }
}

/* ── Drop / Countdown ─────────────────────────────────────────── */
.drop-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--cream-dark);
}

.drop-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.drop-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.drop-hero-content {
  position: relative;
  z-index: 1;
  padding: var(--gap-xl);
}

.drop-label {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-md);
}

.countdown {
  display: flex;
  justify-content: center;
  gap: var(--gap-xl);
  margin: var(--gap-xl) 0;
}

.countdown-unit {
  text-align: center;
}

.countdown-number {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  display: block;
}

.countdown-label {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--gap-xs);
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: #3A251E;
  color: rgba(255,255,255,0.75);
  padding: var(--gap-xl) 0 var(--gap-lg);
  margin-top: var(--gap-2xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gap-xl);
  margin-bottom: var(--gap-xl);
  padding-bottom: var(--gap-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.footer-brand-name {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--gap-md);
}

.footer-logo-img {
  display: block;
  max-height: 40px;
  width: auto;
}

.footer-tagline {
  font-size: 0.8125rem;
  line-height: 1.7;
  margin-bottom: var(--gap-md);
}

.footer-newsletter {
  display: flex;
  gap: 0;
  margin-top: var(--gap-md);
}

.footer-newsletter input {
  flex: 1;
  padding: 10px var(--gap-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  color: var(--white);
  font-size: 0.8125rem;
  outline: none;
}

.footer-newsletter input::placeholder { color: rgba(255,255,255,0.35); }

.footer-newsletter button {
  background: var(--white);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: opacity var(--dur);
}

.footer-newsletter button:hover { opacity: 0.85; }

.footer-col-title {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--gap-md);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.footer-links a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--dur);
}

.footer-links a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

.footer-social {
  display: flex;
  gap: var(--gap-md);
}

.footer-social a {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color var(--dur);
}

.footer-social a:hover { color: var(--white); }

/* ── Mobile Bottom Nav ────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 900;
}

.mobile-nav-items {
  display: flex;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur);
}

.mobile-nav-item.active { color: var(--ink); }
.mobile-nav-item svg { width: 20px; height: 20px; }

/* Icon + notification badge as one unit — .mobile-nav-item is a column
   flex container, so without this wrapper the badge span became its own
   stacked row below the "Bag" label instead of overlaying the icon. */
.mobile-nav-icon-wrap {
  position: relative;
  display: inline-flex;
}

.cart-badge-mobile-nav {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile Slide-out Menu (hamburger) ──────────────────────────
   JS only ever toggles an .open class — these rules are what make
   that class actually do anything; without them the menu was
   permanently stuck off-screen with no way to open it. */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1001;
}

.mobile-overlay.open { display: block; }

.mobile-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 85%;
  max-width: 320px;
  background: var(--cream);
  z-index: 1002;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding: 32px;
  overflow-y: auto;
}

.mobile-menu.open { transform: translateX(0); }

/* ── Sticky Add to Cart (mobile) ──────────────────────────────── */
.sticky-atc {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: var(--gap-sm) var(--gap-md);
  z-index: 850;
  align-items: center;
  gap: var(--gap-md);
}

.sticky-atc-name {
  flex: 1;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-atc-price { font-size: 0.875rem; font-weight: 500; }

/* ── Admin Panel ─────────────────────────────────────────────── */
.admin-wrapper {
  display: flex;
  min-height: 100vh;
  font-family: var(--font-sans);
}

.admin-sidebar {
  width: 240px;
  background: var(--admin-sidebar);
  color: rgba(255,255,255,0.75);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-logo {
  padding: var(--gap-lg);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-logo span {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.admin-logo-img {
  display: block;
  max-height: 32px;
  width: auto;
}

.admin-nav {
  list-style: none;
  padding: var(--gap-md) 0;
  flex: 1;
}

.admin-nav-item a {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px var(--gap-lg);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  transition: background var(--dur), color var(--dur);
}

.admin-nav-item a:hover,
.admin-nav-item.active a {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}

.admin-nav-section {
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  padding: var(--gap-md) var(--gap-lg) var(--gap-xs);
}

.admin-main {
  flex: 1;
  background: #F5F5F5;
  overflow-y: auto;
}

.admin-topbar {
  background: var(--white);
  border-bottom: 1px solid #E0E0E0;
  padding: var(--gap-md) var(--gap-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-topbar-title { font-size: 1rem; font-weight: 500; }

.admin-content { padding: var(--gap-lg); }

/* Shared 2/3 + 1/3 split layout used across product/lookbook/journal/order/coupon admin pages */
.admin-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap-lg);
}

/* Without this, grid items default to min-width:auto and stretch to fit
   their widest child (a data table, a row of image thumbnails, etc.),
   which blows the whole grid — and the page — out sideways on mobile. */
.admin-split > * { min-width: 0; }

.variant-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.admin-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.admin-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
}

.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1001;
}

/* ── Admin Panel — Mobile ────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-split { grid-template-columns: 1fr; }

  .admin-hamburger { display: flex; }

  .admin-wrapper { display: block; }

  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    z-index: 1002;
  }

  .admin-sidebar.open { transform: translateX(0); }

  .admin-sidebar-overlay.open { display: block; }

  .admin-main { width: 100%; }

  .admin-topbar { padding: var(--gap-sm) var(--gap-md); }

  .admin-content { padding: var(--gap-md); }
}

@media (max-width: 640px) {
  .variant-row { grid-template-columns: 1fr 1fr; }

  .stat-cards { grid-template-columns: 1fr; }

  .admin-content [style*="display:flex"],
  .admin-content [style*="display: flex"] { flex-wrap: wrap; }
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

@media (max-width: 1024px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

.stat-card {
  background: var(--white);
  padding: var(--gap-lg);
  border-bottom: 3px solid var(--border);
}

.stat-card-label {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-sm);
}

.stat-card-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}

.stat-card.accent { border-bottom-color: var(--accent); }
.stat-card.success { border-bottom-color: var(--success); }

/* Data Tables */
.data-table-wrapper {
  background: var(--white);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  vertical-align: middle;
}

.data-table tr:hover td { background: var(--cream-light); }

/* Status Badges */
.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.badge-pending   { background: #FFF3CD; color: #856404; }
.badge-pending_payment { background: #FFF3CD; color: #856404; }
.badge-paid      { background: #D1FAE5; color: #065F46; }
.badge-processing{ background: #DBEAFE; color: #1E40AF; }
.badge-packed    { background: #EDE9FE; color: #5B21B6; }
.badge-shipped   { background: #E0E7FF; color: #3730A3; }
.badge-delivered { background: #D1FAE5; color: #065F46; }
.badge-cancelled { background: #FEE2E2; color: #991B1B; }
.badge-fonepay   { background: #FEF3C7; color: #92400E; }
.badge-cod       { background: #E5E7EB; color: #374151; }

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--gap-md) 0;
}
.faq-question {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  float: right;
  color: var(--muted);
}
.faq-item[open] .faq-question::after {
  content: '−';
}
.faq-answer {
  margin-top: var(--gap-sm);
  color: var(--ink-soft);
}

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur), visibility var(--dur);
}

.modal-backdrop.open { opacity: 1; visibility: visible; }

.modal {
  background: var(--cream);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform var(--dur) var(--ease);
}

.modal-backdrop.open .modal { transform: translateY(0); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-lg);
  border-bottom: 1px solid var(--border);
}

.modal-title { font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; }
.modal-close { font-size: 1.5rem; color: var(--muted); cursor: pointer; }
.modal-body  { padding: var(--gap-lg); }

/* ── Flash Messages ──────────────────────────────────────────── */
.flash {
  padding: var(--gap-md) var(--gap-lg);
  margin-bottom: var(--gap-lg);
  font-size: 0.875rem;
  border-left: 3px solid;
}

.flash-success { background: #E8F5E9; border-color: var(--success); color: var(--success); }
.flash-error   { background: #FEEBE9; border-color: var(--error);   color: var(--error); }
.flash-info    { background: #E3F2FD; border-color: #1565C0;        color: #1565C0; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--muted); }
.mt-sm  { margin-top: var(--gap-sm); }
.mt-md  { margin-top: var(--gap-md); }
.mt-lg  { margin-top: var(--gap-lg); }
.mt-xl  { margin-top: var(--gap-xl); }
.mb-sm  { margin-bottom: var(--gap-sm); }
.mb-md  { margin-bottom: var(--gap-md); }
.mb-lg  { margin-bottom: var(--gap-lg); }
.mb-xl  { margin-bottom: var(--gap-xl); }
.py-md  { padding-top: var(--gap-md); padding-bottom: var(--gap-md); }
.py-lg  { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); }
.py-xl  { padding-top: var(--gap-xl); padding-bottom: var(--gap-xl); }
.py-2xl { padding-top: var(--gap-2xl); padding-bottom: var(--gap-2xl); }
.d-none { display: none; }
.d-flex { display: flex; }
body.overflow-hidden { overflow: hidden; }

/* ── Responsive — Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show mobile elements */
  .hamburger   { display: flex; }
  .mobile-nav  { display: flex; }

  /* Hide desktop-only elements (site header nav row, "Shop All" links, etc.) */
  .desk-only { display: none; }

  /* Hero mobile */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-content { padding: var(--gap-xl) var(--gap-md); order: 2; }
  .hero-image   { height: 70vw; order: 1; }

  /* Lookbook mobile */
  .lookbook-hero { grid-template-columns: 1fr; }
  .lookbook-hero-image { height: 65vw; }
  .lookbook-hero-content { padding: var(--gap-2xl) var(--gap-md); }

  /* Body pad for bottom nav */
  body { padding-bottom: 60px; }

  /* Sticky ATC */
  .sticky-atc { display: flex; }

  /* Product detail mobile */
  .product-gallery { position: static; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-up { animation: fadeInUp 0.6s var(--ease) both; }
.animate-fade    { animation: fadeIn 0.4s var(--ease) both; }

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* ── Journal / Blog ──────────────────────────────────────────────
   Bespoke editorial styling (previously the Journal just borrowed the
   product-card + lookbook-hero classes, which force-cropped landscape
   covers to a 3:4 portrait). Covers are 16:9 landscape throughout. */
.journal-masthead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--gap-2xl);
}
.journal-masthead .t-display { margin: var(--gap-xs) 0 var(--gap-md); }
.journal-masthead-sub { color: var(--muted); }

/* Featured lead post — image + text side by side on desktop, stacked on mobile */
.journal-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gap-xl);
  align-items: center;
  margin-bottom: var(--gap-2xl);
  text-decoration: none;
  color: inherit;
}
.journal-feature-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream-dark);
}
.journal-feature-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.journal-feature:hover .journal-feature-image img { transform: scale(1.03); }
.journal-feature-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 300;
  line-height: 1.15;
  margin: var(--gap-xs) 0 var(--gap-md);
}
.journal-readmore {
  display: inline-block;
  margin-top: var(--gap-md);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* Post grid — auto-fit + capped max (see .product-grid) so a handful
   of posts (or the "More from the Journal" strip, often just 1-3
   items) don't stretch across an empty row. */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
  gap: var(--gap-xl) var(--gap-lg);
}
.journal-card { text-decoration: none; color: inherit; }
.journal-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream-dark);
  margin-bottom: var(--gap-md);
}
.journal-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.journal-card:hover .journal-card-image img { transform: scale(1.04); }
.journal-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin: var(--gap-xs) 0;
}
.journal-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Single article */
.journal-article-header { text-align: center; padding: var(--gap-lg) 0 var(--gap-xl); }
.journal-article-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.12;
  margin: var(--gap-sm) 0 var(--gap-md);
}
.journal-article-standfirst {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto var(--gap-md);
}
.journal-article-byline {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-article-cover {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto var(--gap-2xl);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream-dark);
}
.journal-article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Prose — readable long-form body, comfortable measure */
.journal-prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.journal-prose > *:first-child { margin-top: 0; }
.journal-prose p { margin: 0 0 1.4em; }
.journal-prose h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 1.8em 0 0.6em;
}
.journal-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
}
.journal-prose img {
  max-width: 100%;
  height: auto;
  margin: 1.6em 0;
  display: block;
}
.journal-prose ul, .journal-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.journal-prose li { margin-bottom: 0.5em; }
.journal-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.journal-prose blockquote {
  margin: 1.6em 0;
  padding-left: var(--gap-lg);
  border-left: 2px solid var(--ink);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 900px) {
  .journal-feature { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .journal-feature-body { padding: 0; }
  .journal-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg) var(--gap-md); }
}

@media (max-width: 560px) {
  .journal-masthead { margin-bottom: var(--gap-xl); }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-article-cover { margin-bottom: var(--gap-xl); }
  .journal-prose { font-size: 1rem; }
}

/* ── AOS overrides (scroll animations) ─────────────────────────
   Duration/easing are already set via AOS.init() in app.js (600ms) —
   no CSS override needed; a stray !important here was previously
   forcing every AOS transition to 0.7s regardless of the JS config. */