/* ============================================================
   BOUTIQUE — Main Stylesheet
   ============================================================
   Table of Contents:
    1.  CSS Variables
    2.  Reset & Base
    3.  Grain Texture overlay
    4.  Typography
    5.  Layout Utilities
    6.  Navbar
    7.  Footer
    8.  Cart Sidebar
    9.  Hero Section
   10.  Product Cards
   11.  Product Detail Page
   12.  Shop Page
   13.  Contact Page
   14.  Buttons & Forms
   15.  Animations & Toast
   16.  Splash Screen
   17.  Nav Search
   18.  Size Selector
   19.  Responsive
   ============================================================ */


/* ── 1. CSS Variables ─────────────────────────────────────── */
:root {
  /* Colours — Beige · Dark Brown · Sage Green */
  --cream:        #f5edd8;   /* warm beige background          */
  --cream-dark:   #ead9ba;   /* deeper beige for sections      */
  --cream-mid:    #f0e6cc;   /* mid beige                      */
  --charcoal:     #6b4a30;   /* warm chocolate brown (lighter) */
  --charcoal-mid: #8a6547;   /* medium warm brown (lighter)    */
  --terracotta:   #6b8c6e;   /* sage green (primary accent)    */
  --terra-light:  #8aaf8d;   /* lighter sage                   */
  --terra-pale:   #d6e8d4;   /* pale sage tint                 */
  --stone:        #7a6e5f;   /* warm stone / muted text        */
  --stone-light:  #b0a491;   /* lighter stone                  */
  --white:        #ffffff;
  --border:       #d8c9a8;   /* warm beige border              */
  --border-light: #e6d9bc;   /* subtle beige border            */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --gap-xs:  0.4rem;
  --gap-sm:  0.75rem;
  --gap-md:  1.5rem;
  --gap-lg:  3rem;
  --gap-xl:  5rem;

  /* Border radius — the "handmade" feel lives here */
  --radius:      12px;   /* ↑ was 4px — cards, inputs, sidebars */
  --radius-sm:    6px;   /* smaller elements: badges, qty buttons */
  --radius-lg:   20px;   /* hero images, large blocks */
  --radius-pill: 99px;   /* tags, filter tabs, pill buttons */

  /* Shadows — layered for depth */
  --shadow-xs:  0 1px 4px rgba(28,28,28,0.06);
  --shadow:     0 2px 16px rgba(28,28,28,0.08);
  --shadow-md:  0 4px 24px rgba(28,28,28,0.10);
  --shadow-lg:  0 8px 48px rgba(28,28,28,0.13);
  --shadow-card: 0 2px 8px rgba(28,28,28,0.06), 0 8px 24px rgba(28,28,28,0.07);
  --shadow-card-hover: 0 4px 16px rgba(28,28,28,0.10), 0 16px 40px rgba(28,28,28,0.11);

  /* Transitions */
  --transition:      0.25s ease;
  --transition-slow: 0.4s ease;

  /* Nav */
  --nav-height: 68px;
}


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

html {
  scroll-behavior: smooth;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Webkit scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--stone-light); }

body {
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Very subtle warm off-white — the body itself IS the texture */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(107,140,110,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(107,140,110,0.03) 0%, transparent 50%);
}

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

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

ul { list-style: none; }

main {
  flex: 1;
  padding-top: var(--nav-height);
}


/* ── 3. Grain Texture Overlay ─────────────────────────────── */
/*
  A fixed pseudo-element that sits on top of everything with a
  very faint SVG noise pattern. pointer-events: none means it
  never interferes with clicks. Creates a subtle "printed" feel.
*/
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;          /* below splash (9999) but above everything else */
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}


/* ── 4. Typography ────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { color: var(--charcoal-mid); }

.label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Selection colour */
::selection {
  background: var(--terra-pale);
  color: var(--charcoal);
}


/* ── 5. Layout Utilities ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gap-md);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr;          gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr);   gap: var(--gap-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);   gap: var(--gap-md); }

.section { padding-block: var(--gap-xl); }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--gap-lg);
}

.divider {
  width: 48px;
  height: 2px;
  background: var(--terracotta);
  border-radius: var(--radius-pill);
  margin-block: var(--gap-sm);
}

.text-center { text-align: center; }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }


/* ── 6. Navbar ────────────────────────────────────────────── */
#navbar-container nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(247, 243, 238, 0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  /* Subtle bottom shadow so content scrolls beneath it cleanly */
  box-shadow: 0 1px 0 var(--border-light), 0 4px 24px rgba(28,28,28,0.04);
}

#navbar-container .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gap-md);
  gap: var(--gap-md);
}

#navbar-container .nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

#navbar-container .nav-logo span { color: var(--terracotta); }

#navbar-container .nav-links {
  display: flex;
  gap: var(--gap-lg);
}

#navbar-container .nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--charcoal-mid);
  position: relative;
  transition: color var(--transition);
}

#navbar-container .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0;
  height: 1.5px;
  background: var(--terracotta);
  border-radius: var(--radius-pill);
  transition: width var(--transition);
}

#navbar-container .nav-links a:hover,
#navbar-container .nav-links a.active { color: var(--charcoal); }

#navbar-container .nav-links a:hover::after,
#navbar-container .nav-links a.active::after { width: 100%; }

#navbar-container .nav-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
}

#navbar-container .cart-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--charcoal);
  color: var(--cream);
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

#navbar-container .cart-btn:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}

#navbar-container .cart-btn:active { transform: translateY(0); }

#navbar-container .cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  transition: background var(--transition);
}

#navbar-container .cart-btn:hover .cart-count {
  background: var(--cream);
  color: var(--terracotta);
}


/* ── 7. Footer ────────────────────────────────────────────── */
#footer-container footer {
  background: var(--charcoal);
  color: rgba(247,243,238,0.75);
  padding-block: var(--gap-lg) var(--gap-md);
}

#footer-container .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gap-lg);
  padding-bottom: var(--gap-lg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#footer-container .footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--cream);
  margin-bottom: var(--gap-sm);
}

#footer-container .footer-brand span { color: var(--terra-light); }

#footer-container .footer-tagline {
  font-size: 0.875rem;
  max-width: 280px;
  color: rgba(247,243,238,0.9);
}

#footer-container h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--gap-sm);
}

#footer-container ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#footer-container ul a {
  font-size: 0.875rem;
  color: rgba(245, 237, 216, 0.82);   /* cream — visible on dark footer */
  transition: color var(--transition);
}

#footer-container ul a:hover { color: var(--terra-light); }

#footer-container .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--gap-md);
  font-size: 0.8rem;
  color: rgba(247,243,238,0.55);
}


/* ── 8. Cart Sidebar ──────────────────────────────────────── */
#cart-container .cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,28,28,0.35);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

#cart-container .cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#cart-container .cart-sidebar {
  position: fixed;
  top: 0; right: 0;
  width: 400px;
  max-width: 95vw;
  height: 100vh;
  background: var(--cream);           /* warmer than white */
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
  /* Rounded left edge */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

#cart-container .cart-sidebar.open { transform: translateX(0); }

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

#cart-container .cart-header h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

#cart-container .cart-close {
  background: var(--cream-dark);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--stone);
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

#cart-container .cart-close:hover {
  background: var(--charcoal);
  color: var(--cream);
}

#cart-container .cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

#cart-container .cart-empty {
  text-align: center;
  color: var(--stone);
  margin: auto;
}

#cart-container .cart-empty .empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--gap-sm);
}

#cart-container .cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--gap-sm);
  align-items: center;
  padding: var(--gap-sm);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  animation: slideIn 0.2s ease;
  transition: box-shadow var(--transition);
}

#cart-container .cart-item:hover { box-shadow: var(--shadow); }

#cart-container .cart-item img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
}

#cart-container .cart-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--charcoal);
}

#cart-container .cart-item-size {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 1px;
}

#cart-container .cart-item-price {
  font-size: 0.8rem;
  color: var(--stone);
  margin-top: 2px;
}

#cart-container .cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

#cart-container .qty-btn {
  width: 24px; height: 24px;
  border: 1.5px solid var(--border);
  background: var(--cream);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: var(--charcoal-mid);
}

#cart-container .qty-btn:hover {
  border-color: var(--terracotta);
  background: var(--terra-pale);
  color: var(--terracotta);
}

#cart-container .qty-num {
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 1.2rem;
  text-align: center;
}

#cart-container .cart-item-remove {
  background: none;
  border: none;
  color: var(--stone-light);
  cursor: pointer;
  font-size: 0.9rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  align-self: flex-start;
}

#cart-container .cart-item-remove:hover {
  background: #fff0f0;
  color: #c0392b;
}

#cart-container .cart-footer {
  padding: var(--gap-md);
  border-top: 1px solid var(--border);
  background: var(--white);
  border-radius: 0 0 0 var(--radius-lg);
}

#cart-container .cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--gap-md);
  font-weight: 600;
}

#cart-container .cart-total .total-amount {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--terracotta);
}

#cart-container .btn-checkout {
  width: 100%;
  background: var(--charcoal);
  color: var(--cream);
  border: none;
  padding: 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

#cart-container .btn-checkout:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}


/* ── 9. Hero Section ──────────────────────────────────────── */
.hero {
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.hero-content {
  padding: var(--gap-xl) var(--gap-lg) var(--gap-xl) var(--gap-lg);
  max-width: 560px;
  margin-left: auto;
}

.hero-content .label {
  display: block;
  margin-bottom: var(--gap-md);
}

.hero-content h1 { margin-bottom: var(--gap-md); }

.hero-content p {
  font-size: 1.05rem;
  margin-bottom: var(--gap-lg);
  max-width: 400px;
}

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

.hero-image {
  height: 88vh;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  margin: var(--gap-md) 0 var(--gap-md) 0;
}

.hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}

.hero-image:hover img { transform: scale(1.03); }

.hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--cream) 0%, transparent 25%);
  z-index: 1;
}


/* ── 10. Product Cards ────────────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.product-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.product-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream-dark);
  /* No radius here — card has overflow:hidden so image clips to card radius */
}

.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.product-card-badge {
  position: absolute;
  top: var(--gap-sm);
  left: var(--gap-sm);
  background: var(--terracotta);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}

.product-card-quick-add {
  position: absolute;
  bottom: var(--gap-sm);
  left: var(--gap-sm); right: var(--gap-sm);
  background: rgba(28,28,28,0.88);
  color: var(--cream);
  border: none;
  padding: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition),
              background var(--transition);
  backdrop-filter: blur(4px);
}

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

.product-card-quick-add:hover { background: var(--terracotta) !important; }

.product-card-info {
  padding: var(--gap-sm) var(--gap-sm) var(--gap-md);
}

.product-card-category {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.product-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-top: 0.2rem;
  color: var(--charcoal);
  line-height: 1.3;
}

.product-card-price {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--terracotta);
}


/* ── 11. Product Detail Page ──────────────────────────────── */
.product-detail { padding-block: var(--gap-lg); }

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

.product-detail-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--cream-dark);
  box-shadow: var(--shadow-md);
}

.product-detail-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}


/* ── Product Photo Carousel (2+ images) ──────────────────── */
/*
  .product-gallery extends .product-detail-image (same box, same
  radius/shadow) and adds position:relative so the arrows and dots
  can be absolutely positioned inside it.
*/
.product-gallery {
  position: relative;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(245,237,216,0.9);
  color: var(--charcoal);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background var(--transition), transform var(--transition);
  z-index: 2;
}

.carousel-arrow:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.08);
}

.carousel-arrow-prev { left: var(--gap-sm); }
.carousel-arrow-next { right: var(--gap-sm); }

.carousel-dots {
  position: absolute;
  bottom: var(--gap-sm);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(245,237,216,0.5);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}

.carousel-dot.active {
  background: var(--cream);
  transform: scale(1.3);
}


/* ── Before / After Comparison Slider ────────────────────── */
/*
  Two images stacked exactly on top of each other. The "after" image
  is clipped with clip-path based on the range input's value (0–100),
  revealing more or less of it as the user drags. A native range
  input gives free mouse-drag, touch-swipe, and keyboard support —
  no custom pointer-event handling needed.
*/
.before-after-slider {
  position: relative;
  cursor: ew-resize;
  user-select: none;
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* .ba-after has an inline clip-path set/updated by JS on drag */

.ba-tag {
  position: absolute;
  top: var(--gap-sm);
  z-index: 2;
  background: rgba(28,28,28,0.75);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.ba-tag-before { left: var(--gap-sm); }
.ba-tag-after  { right: var(--gap-sm); }

.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cream);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.ba-handle-circle {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: var(--shadow-md);
}

/* The range input itself — fully transparent, stretched over the
   whole image, so dragging anywhere left/right moves the slider */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}

.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 100%;
}

.ba-range::-moz-range-thumb {
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
}


.product-detail-info {
  position: sticky;
  top: calc(var(--nav-height) + var(--gap-lg));
}

.product-detail-category { display: inline-block; margin-bottom: var(--gap-sm); }

.product-detail-price {
  font-family: 'Fraunces', var(--font-display), serif;
  font-weight: 600;
  font-size: 2rem;
  color: var(--terracotta);
  margin: var(--gap-sm) 0 var(--gap-md);
  transition: opacity 0.12s ease;
}

.product-detail-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: var(--gap-md);
}

.product-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: var(--gap-lg);
}

.product-detail-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: var(--charcoal-mid);
}

.product-detail-list li::before {
  content: '✦';
  color: var(--terracotta);
  font-size: 0.5rem;
  flex-shrink: 0;
}

.btn-add-to-cart {
  width: 100%;
  background: var(--charcoal);
  color: var(--cream);
  border: none;
  padding: 1.1rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-add-to-cart:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--stone);
  margin-bottom: var(--gap-lg);
  transition: color var(--transition);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--cream-dark);
}

.back-link:hover { color: var(--terracotta); }


/* ── 12. Shop Page ────────────────────────────────────────── */
.shop-hero {
  background: linear-gradient(135deg, var(--cream-dark) 0%, var(--terra-pale) 100%);
  padding: var(--gap-xl) 0 var(--gap-lg);
  text-align: center;
}

.shop-hero p {
  margin-top: var(--gap-sm);
  max-width: 480px;
  margin-inline: auto;
}

.shop-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--gap-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--gap-lg);
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.filter-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.filter-tab {
  background: var(--cream-dark);
  border: 1.5px solid transparent;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--charcoal-mid);
  transition: all var(--transition);
}

.filter-tab:hover {
  background: var(--cream);
  border-color: var(--border);
  color: var(--charcoal);
}

.filter-tab.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream);
}

.sort-select {
  background: var(--cream-dark);
  border: 1.5px solid var(--border);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--charcoal-mid);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}

.sort-select:focus { border-color: var(--charcoal); }

#products-count { font-size: 0.8rem; color: var(--stone); }


/* ── 13. Contact Page ─────────────────────────────────────── */
.contact-hero {
  background: linear-gradient(135deg, var(--cream-dark) 0%, var(--terra-pale) 100%);
  /* sage-tinted gradient naturally follows from updated CSS vars */
  padding: var(--gap-xl) 0 var(--gap-lg);
  text-align: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--gap-xl);
  align-items: start;
  padding-block: var(--gap-xl);
}

.contact-info h3 {
  font-family: var(--font-display);
  margin-bottom: var(--gap-sm);
}

.contact-info p { margin-bottom: var(--gap-md); }

.contact-detail {
  display: flex;
  gap: var(--gap-sm);
  align-items: flex-start;
  margin-bottom: var(--gap-sm);
  font-size: 0.9rem;
}

.contact-detail-icon {
  width: 38px; height: 38px;
  background: var(--terra-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-card);
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--gap-md);
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-mid);
}

.form-group input,
.form-group textarea,
.form-group select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--cream);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(192,98,47,0.08);
}

.form-group textarea { min-height: 140px; resize: vertical; }

.form-success {
  display: none;
  text-align: center;
  padding: var(--gap-lg);
}

.form-success .success-icon {
  font-size: 2.5rem;
  margin-bottom: var(--gap-sm);
}


/* ── 14. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--charcoal);
  color: var(--cream);
  box-shadow: 0 2px 12px rgba(107,74,48,0.18);
}

.btn-primary:hover {
  background: var(--terracotta);
  box-shadow: 0 4px 20px rgba(107,140,110,0.30);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--charcoal);
  color: var(--charcoal);
}

.btn-outline:hover {
  background: var(--charcoal);
  color: var(--cream);
}

.btn-terra {
  background: var(--terracotta);
  color: white;
  box-shadow: 0 2px 12px rgba(192,98,47,0.25);
}

.btn-terra:hover {
  background: var(--charcoal);
  box-shadow: 0 4px 20px rgba(28,28,28,0.2);
}


/* ── 15. Animations & Toast ───────────────────────────────── */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.fade-up   { animation: fadeUp 0.6s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }
.fade-up-4 { animation-delay: 0.4s; }

/* Toast */
.toast {
  position: fixed;
  bottom: var(--gap-lg);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--charcoal);
  color: var(--cream);
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Values strip */
.values-strip {
  background: var(--charcoal);
  color: rgba(247,243,238,0.8);
  padding-block: var(--gap-md);
  overflow: hidden;
}

.values-inner {
  display: flex;
  gap: var(--gap-xl);
  justify-content: center;
  flex-wrap: wrap;
}

.value-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.value-item span:first-child { color: var(--terra-light); }


/* ── 16. Splash Screen ────────────────────────────────────── */
/*
  The splash overlay is injected by splash.js.
  All visual design lives here; splash.js only adds/removes classes.

  States:
    (default)         — overlay rendered but invisible (opacity:0)
    .splash-visible   — content fades in (logo, tagline, loader)
    .splash-exit      — whole overlay fades up and out
*/

#splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;          /* above grain overlay (9998) and everything else */
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;        /* clickable to dismiss */

  /* Soft warm radial background — centred glow */
  background-image:
    radial-gradient(ellipse at 50% 50%,
      rgba(214, 232, 212, 0.55) 0%,
      var(--cream) 65%
    );
}

/* The centred content column */
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  text-align: center;
  padding: var(--gap-lg);
  /* Starts invisible — fades in when .splash-visible is added */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#splash-overlay.splash-visible .splash-inner {
  opacity: 1;
  transform: translateY(0);
}

/* The large brand logo */
.splash-logo {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  line-height: 1;
}

.splash-logo span { color: var(--terracotta); }

/* Tagline below the logo */
.splash-tagline {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: var(--stone);
  font-style: italic;
  letter-spacing: 0.02em;
  max-width: 320px;
}

/* Progress bar track */
.splash-loader {
  width: 120px;
  height: 2px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--gap-sm);
}

/* Progress bar fill — animates via .splash-loader-fill class */
.splash-loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    to right,
    var(--terracotta),   /* sage green via CSS var */
    var(--terra-light)
  );
  border-radius: var(--radius-pill);
  transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When splash.js adds this class, the bar fills to 100% */
.splash-loader-bar.splash-loader-fill { width: 100%; }

/* Skip hint at the bottom */
.splash-skip {
  font-size: 0.72rem;
  color: var(--stone-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--gap-sm);
  opacity: 0;
  /* Delay the skip hint slightly so it doesn't distract on first glance */
  animation: fadeIn 0.4s ease 0.8s both;
}

/* Exit animation — splash.js adds .splash-exit to #splash-overlay */
@keyframes splashExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
    pointer-events: none;
  }
}

#splash-overlay.splash-exit {
  animation: splashExit 0.42s cubic-bezier(0.4, 0, 0.6, 1) both;
  pointer-events: none;
}


/* ── 17. Nav Search ───────────────────────────────────────── */
.nav-search {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--cream-dark);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 0.6rem 0 0.8rem;
  gap: 0.3rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  height: 36px;
}

.nav-search:focus-within {
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(28,28,28,0.07);
  background: var(--white);
}

.search-icon {
  display: flex;
  align-items: center;
  color: var(--stone);
  flex-shrink: 0;
  transition: color var(--transition);
  pointer-events: none;
}

.nav-search:focus-within .search-icon { color: var(--charcoal); }

.nav-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.825rem;
  color: var(--charcoal);
  width: 180px;
  min-width: 0;
}

.nav-search-input::placeholder { color: var(--stone); }

.nav-search-input::-webkit-search-cancel-button,
.nav-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--stone);
  padding: 0.15rem 0.25rem;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition), opacity var(--transition);
}

.search-clear-btn:hover { color: var(--charcoal); }


/* ── Search Results Dropdown ──────────────────────────────── */
/*
  Anchored to .nav-search (position:relative, set above). Hidden by
  default via max-height:0 + opacity:0 so it never blocks clicks on
  content underneath, then opens with .search-dropdown-open added by
  search.js when there's a query to show.
*/
.search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  min-width: 320px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, max-height 0.25s ease;
  z-index: 150;
}

.search-dropdown.search-dropdown-open {
  max-height: 420px;
  opacity: 1;
  pointer-events: auto;
}

.search-dropdown-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 0.4rem;
}

.search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.search-dropdown-item:hover {
  background: var(--cream-dark);
}

.search-dropdown-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--cream-dark);
}

.search-dropdown-info {
  min-width: 0; /* allows text-overflow to work inside a flex child */
}

.search-dropdown-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown-name mark.search-highlight {
  background: var(--terra-pale);
  color: var(--terracotta);
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}

.search-dropdown-price {
  font-size: 0.75rem;
  color: var(--stone);
  margin-top: 1px;
}

.search-dropdown-empty {
  padding: 1.1rem 0.9rem 0.4rem;
  font-size: 0.85rem;
  color: var(--stone);
  text-align: center;
}

.search-dropdown-viewall {
  display: block;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--terracotta);
  border-top: 1px solid var(--border-light);
  background: var(--cream);
  transition: background var(--transition);
}

.search-dropdown-viewall:hover {
  background: var(--cream-dark);
}


/* ── 18. Size Selector ────────────────────────────────────── */
.size-selector { margin-bottom: var(--gap-md); }

.size-selector-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.size-dimensions-hint {
  font-size: 0.78rem;
  color: var(--stone);
  font-style: italic;
  transition: opacity 0.2s ease;
}

.size-btn-group {
  display: flex;
  gap: 0.6rem;
}

.size-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition);
  text-align: center;
}

.size-btn:hover {
  border-color: var(--charcoal);
  box-shadow: var(--shadow-xs);
}

.size-btn.active {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--cream);
  box-shadow: var(--shadow);
}

.size-btn-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.size-btn-price {
  font-size: 0.78rem;
  opacity: 0.75;
}

.size-btn.active .size-btn-price {
  opacity: 0.85;
  color: var(--terra-light);
}

/* Cart item size label */
.cart-item-size {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 1px;
}




/* ── Nav Logo Image ───────────────────────────────────────── */
/* Sizes the rectangular logo image in the navbar */
.nav-logo-img {
  height: 36px;          /* adjust up/down to taste */
  width: auto;
  display: block;
  /* Ensure it doesn't inherit the old text colour */
  object-fit: contain;
}


/* ── Footer Logo & Socials ────────────────────────────────── */
.footer-logo-link {
  display: inline-block;
  margin-bottom: var(--gap-sm);
}

/* Icon-style logo in the footer — square/round variant */
.footer-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  /* No filter — logo image is displayed as-is */
}

/* Row of social icon buttons */
.footer-socials {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--gap-md);
}

/* Each social icon is a square button with a subtle border */
.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  color: rgba(247,243,238,0.7);
  transition: border-color var(--transition), color var(--transition),
              background var(--transition), transform var(--transition);
}

.footer-social-btn:hover {
  border-color: var(--terra-light);
  color: var(--terra-light);
  background: rgba(138,175,141,0.12);
  transform: translateY(-2px);
}

/* SVG icons loaded as <img> can't use currentColor — invert to white */
.footer-social-icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
  display: block;
  transition: opacity var(--transition);
}

.footer-social-btn:hover .footer-social-icon {
  opacity: 1;
}


/* ── Juicer.io — hide free-plan branding ─────────────────── */
/*
  Juicer adds a "Powered by Juicer.io" link at the bottom of the feed.
  These rules hide every element that contains that branding.
  This is standard practice and permitted by Juicer's free plan terms.
*/
.j-paginate,
.juicer-feed .j-paginate,
.juicer-feed ~ p,
a[href*="juicer.io"],
.j-stacked-header,
.juicer-feed-title,
.juicer-ad,
.jcr-post[data-juicer-ad="true"],
[data-juicer-ad="true"],
.jcr-juicer-ad-body {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}


/* ── Announcement Bar ─────────────────────────────────────── */
/*
  Sits above the fixed navbar. Height is measured by announcement.js
  and stored in --announcement-height so the navbar shifts down correctly.
  When the bar is hidden or dismissed, --announcement-height returns to 0.
*/

/* Default offset: no bar */
:root {
  --announcement-height: 0px;
}

#announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;               /* above navbar (100) */
  background: var(--charcoal);
  color: var(--cream);
  overflow: hidden;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem var(--gap-md);
  gap: var(--gap-sm);
  max-width: 1160px;
  margin-inline: auto;
  position: relative;
}

.announcement-text,
.announcement-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-align: center;
  flex: 1;
}

.announcement-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition);
}

.announcement-link:hover { opacity: 0.8; }

.announcement-close {
  background: none;
  border: none;
  color: rgba(245,237,216,0.6);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
  /* Absolute so it doesn't shift the text off-centre */
  position: absolute;
  right: var(--gap-md);
}

.announcement-close:hover {
  color: var(--cream);
  background: rgba(255,255,255,0.1);
}

/* Push the fixed navbar down by the bar's height */
#navbar-container nav {
  top: var(--announcement-height) !important;
}

/* Push main content down by bar + navbar combined */
main {
  padding-top: calc(var(--nav-height) + var(--announcement-height));
}



/* ── Shipping & Returns Policy Page ──────────────────────── */
.policy-block {
  margin-top: var(--gap-lg);
}

.policy-block h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}

.policy-block p {
  line-height: 1.85;
  max-width: 640px;
}


/* ── Custom Designs Page ──────────────────────────────────── */

/* Process steps — "how it works" horizontal step list */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}

.process-step {
  text-align: center;
}

.process-step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--terracotta);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-inline: auto;
  margin-bottom: var(--gap-sm);
}

.process-step h4 {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: var(--charcoal);
}

.process-step p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--stone);
}

/* Video wrapper — used to show the 3D printing process clip via YouTube embed */
.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--charcoal);
}

.video-wrapper video {
  width: 100%;
  display: block;
}

/* Colour / finish swatches */
.colour-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: var(--gap-sm);
}

.colour-swatch {
  text-align: center;
  width: 68px;
}

.colour-swatch-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1.5px var(--border), var(--shadow-xs);
  margin-inline: auto;
  margin-bottom: 0.35rem;
}

.colour-swatch-label {
  font-size: 0.68rem;
  color: var(--stone);
  line-height: 1.3;
}

/* One category block (3D Art / Stickers / Vinyl Designs) */
.custom-category {
  padding-block: var(--gap-xl);
  border-bottom: 1px solid var(--border);
}

.custom-category:last-of-type {
  border-bottom: none;
}

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

@media (max-width: 600px) {
  .process-steps { grid-template-columns: 1fr; }
}


/* ── 6. Skeleton Loader ───────────────────────────────────── */
/*
  Shown while product images are loading.
  The .skeleton class creates a shimmering placeholder card.
  shop.js and index.js replace skeletons with real cards once data loads.
*/
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--cream-dark) 25%,
    var(--cream-mid)  50%,
    var(--cream-dark) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}

.skeleton-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.skeleton-img {
  aspect-ratio: 4/5;
  width: 100%;
}

.skeleton-line {
  height: 0.75rem;
  margin: var(--gap-sm) var(--gap-sm) 0.4rem;
  border-radius: var(--radius-pill);
}

.skeleton-line.short { width: 55%; }
.skeleton-line.long  { width: 85%; }
.skeleton-line.price { width: 35%; height: 0.9rem; }


/* ── 7. Back to Top Button ────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: var(--gap-lg);
  right: var(--gap-md);
  z-index: 90;
  width: 44px;
  height: 44px;
  background: var(--charcoal);
  color: var(--cream);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition),
              background var(--transition);
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

#back-to-top:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
}


/* ── 8. Scroll Reveal Animations ─────────────────────────── */
/*
  Elements with .scroll-reveal start hidden.
  When they enter the viewport, ui.js adds .scroll-revealed
  which triggers this transition.
  Respects prefers-reduced-motion automatically via the media
  query at the bottom of this file.
*/
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-reveal.scroll-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a scroll-reveal parent */
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.3s; }

/* ── Hamburger Menu & Mobile Drawer ──────────────────────── */

/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  margin-left: 0.5rem;
}

.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate bars into an X when menu is open */
#main-nav.nav-mobile-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#main-nav.nav-mobile-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}
#main-nav.nav-mobile-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer — hidden by default, slides down when open */
.nav-mobile-drawer {
  /*
    position: absolute + top: 100% sits flush against the bottom edge
    of the fixed <nav> parent — no gap, no CSS variable arithmetic needed.
  */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  /* Closed state: invisible — no border/shadow/background at height 0 */
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-height: 0;
  opacity: 0;             /* fade content out immediately on close */
  overflow: hidden;
  /*
    Two-property transition:
    - opacity fades out fast (0.15s) so text disappears right away
    - max-height collapses after (0.4s) — by then content is already gone
    On open: opacity appears quickly (0.2s delay lets height start first)
  */
  transition:
    opacity    0.15s ease,
    max-height 0.4s  cubic-bezier(0.4, 0, 0.2, 1);
}

#main-nav.nav-mobile-open .nav-mobile-drawer {
  background: rgba(245, 237, 216, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(28,28,28,0.10);
  padding: var(--gap-md);
  max-height: 80vh;
  opacity: 1;
  overflow-y: auto;
  /* On open: height expands first, then content fades in */
  transition:
    opacity    0.2s  ease 0.1s,
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-mobile-links li {
  border-bottom: 1px solid var(--border-light);
}

.nav-mobile-links a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: color var(--transition);
}

.nav-mobile-links a:hover,
.nav-mobile-links a.active {
  color: var(--terracotta);
}

/* Search bar inside mobile drawer */
.nav-mobile-search {
  margin-top: var(--gap-md);
}

.nav-search-input-mobile {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition);
}

.nav-search-input-mobile:focus {
  border-color: var(--terracotta);
}

/* Search icon in navbar — img version needs a filter to match text colour */
.search-icon img {
  filter: brightness(0) saturate(100%) opacity(0.5);
  transition: filter var(--transition);
}
.nav-search:focus-within .search-icon img {
  filter: brightness(0) saturate(100%) opacity(0.9);
}

/* ── 19. Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-image {
    height: 55vw;
    border-radius: var(--radius-lg);
    margin: 0 var(--gap-md) var(--gap-md);
  }

  .hero-image::before {
    background: linear-gradient(to top, var(--cream) 0%, transparent 40%);
  }

  .hero-content {
    max-width: 100%;
    margin: 0;
    padding: var(--gap-lg) var(--gap-md);
  }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }

  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-info { position: static; }

  #footer-container .footer-grid { grid-template-columns: 1fr 1fr; }
  #footer-container .footer-grid > :first-child { grid-column: 1/-1; }

  .contact-grid { grid-template-columns: 1fr; }

  .nav-search-input { width: 120px; }
}

@media (max-width: 768px) {
  /* Hide desktop nav links and search — replaced by hamburger drawer */
  #navbar-container .nav-links { display: none; }
  #navbar-container .nav-search { display: none; }

  /* Show the hamburger button */
  .hamburger-btn { display: flex; }

  /* Show mobile drawer (controlled by JS toggle) */
  .nav-mobile-drawer { display: block; }
}

@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--gap-lg); }
  .form-row { grid-template-columns: 1fr; }

  #footer-container .footer-grid { grid-template-columns: 1fr; }

  .splash-logo { font-size: 3rem; }
}

/* Accessibility: respect system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}