/* ============================================================
   STYLE.CSS – Nelluvelil Curtains · Warm Light Theme
   ============================================================ */

:root {
  --color-primary:      #7b4a2a;
  --color-primary-dark: #5c3318;
  --color-accent:       #c9a14a;
  --color-accent-light: #d8b870;
  --color-bg:           #faf6f0;
  --color-bg-alt:       #f0e8d8;
  --color-bg-card:      #ffffff;
  --color-text:         #2e2010;
  --color-text-light:   rgba(46,32,16,0.52);
  --color-border:       rgba(120,80,40,0.15);
  --color-success:      #2e7d32;
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(80,50,20,0.1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); color:var(--color-text); background:var(--color-bg); line-height:1.6; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

/* ===== WORLD CANVAS ===== */
#world-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ===== BUTTERFLY CREATURES ===== */
.butterfly-creature {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  animation: bf-path var(--dur,28s) linear var(--del,0s) infinite;
}
@keyframes bf-path {
  0%   { transform: translate(-80px, var(--sy,25vh)) rotate(8deg)  scaleX(1); }
  15%  { transform: translate(15vw, calc(var(--sy,25vh) - 55px))  rotate(-4deg) scaleX(1); }
  30%  { transform: translate(30vw, calc(var(--sy,25vh) + 35px))  rotate(6deg)  scaleX(1); }
  48%  { transform: translate(48vw, calc(var(--sy,25vh) - 75px))  rotate(-6deg) scaleX(1); }
  49%  { transform: translate(50vw, calc(var(--sy,25vh) - 77px))  rotate(-6deg) scaleX(-1);}
  65%  { transform: translate(65vw, calc(var(--sy,25vh) + 25px))  rotate(5deg)  scaleX(-1);}
  82%  { transform: translate(82vw, calc(var(--sy,25vh) - 45px))  rotate(-5deg) scaleX(-1);}
  100% { transform: translate(110vw, var(--sy,25vh))              rotate(8deg)  scaleX(-1);}
}
.bf-body { position:relative; width:44px; height:10px; }
.bf-wing { position:absolute; border-radius:50%; }
.bf-wing-lt {
  width:20px; height:16px; top:-14px; right:22px;
  background: radial-gradient(ellipse at 70% 70%, rgba(201,161,74,0.88), rgba(123,63,31,0.6));
  border-radius: 80% 20% 50% 20%;
  transform-origin: right bottom;
  animation: wfl 0.32s ease-in-out var(--wdel,0s) infinite alternate;
}
.bf-wing-lb {
  width:16px; height:12px; top:0; right:22px;
  background: radial-gradient(ellipse at 70% 30%, rgba(160,100,30,0.78), rgba(90,40,10,0.55));
  border-radius: 20% 50% 80% 20%;
  transform-origin: right top;
  animation: wflb 0.32s ease-in-out var(--wdel,0s) infinite alternate;
}
.bf-wing-rt {
  width:20px; height:16px; top:-14px; left:22px;
  background: radial-gradient(ellipse at 30% 70%, rgba(201,161,74,0.88), rgba(123,63,31,0.6));
  border-radius: 20% 80% 20% 50%;
  transform-origin: left bottom;
  animation: wfr 0.32s ease-in-out var(--wdel,0s) infinite alternate;
}
.bf-wing-rb {
  width:16px; height:12px; top:0; left:22px;
  background: radial-gradient(ellipse at 30% 30%, rgba(160,100,30,0.78), rgba(90,40,10,0.55));
  border-radius: 50% 20% 20% 80%;
  transform-origin: left top;
  animation: wfrb 0.32s ease-in-out var(--wdel,0s) infinite alternate;
}
.bf-thorax {
  position:absolute; width:4px; height:10px; background:#5c3318;
  border-radius:2px; left:50%; top:-2px; transform:translateX(-50%);
}
@keyframes wfl  { from{transform:perspective(80px) rotateY(0deg);}   to{transform:perspective(80px) rotateY(68deg);}  }
@keyframes wflb { from{transform:perspective(80px) rotateY(0deg);}   to{transform:perspective(80px) rotateY(52deg);}  }
@keyframes wfr  { from{transform:perspective(80px) rotateY(0deg);}   to{transform:perspective(80px) rotateY(-68deg);} }
@keyframes wfrb { from{transform:perspective(80px) rotateY(0deg);}   to{transform:perspective(80px) rotateY(-52deg);} }

/* ===== HEADER ===== */
.topbar {
  background: var(--color-primary-dark);
  color: rgba(255,245,230,0.92);
  text-align:center; font-size:0.8rem;
  padding:6px 12px; letter-spacing:0.4px;
}
.site-header {
  background: rgba(250,246,240,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(120,80,40,0.12), 0 2px 16px rgba(80,50,20,0.06);
  position: sticky; top:0; z-index:100;
}
.nav-container {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.logo { display:flex; flex-direction:column; line-height:1.1; }
.logo-main { font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--color-primary); }
.logo-sub  { font-size:0.65rem; letter-spacing:2px; color:var(--color-text-light); }
.main-nav { display:flex; gap:28px; align-items:center; }
.main-nav a { font-weight:500; font-size:0.95rem; color:var(--color-text); transition:color 0.2s; }
.main-nav a:hover, .main-nav a.active { color:var(--color-primary); }
.nav-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-btn {
  background:var(--color-primary); color:#fff; border:none;
  border-radius:var(--radius); padding:8px 14px; font-size:1rem;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  box-shadow:0 2px 12px rgba(123,74,42,0.3);
}
.cart-count {
  background:var(--color-accent); color:#2e2010;
  font-size:0.75rem; font-weight:700; border-radius:50%; padding:2px 7px;
}
.cat-nav {
  background:rgba(255,252,247,0.95); border-top:1px solid var(--color-border);
  overflow-x:auto; scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar { display:none; }
.cat-nav-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:center;
  gap:0; min-width:max-content;
}
.cat-tab {
  padding:11px 18px; font-size:0.88rem; font-weight:500;
  border:none; border-bottom:2px solid transparent; background:none;
  cursor:pointer; color:var(--color-text-light); white-space:nowrap;
  transition:color 0.2s, border-color 0.2s; margin-bottom:-1px;
}
.cat-tab:hover  { color:var(--color-primary); }
.cat-tab.active { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:600; }
.cat-tab[data-has-sub]::after { content:" ▾"; font-size:0.7em; opacity:0.55; }
.cat-dropdown {
  position:fixed; min-width:200px; background:#fff;
  border:1px solid var(--color-border); border-top:2px solid var(--color-primary);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 8px 32px rgba(80,50,20,0.12); z-index:9999;
  display:flex; flex-direction:column; padding:4px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.18s, transform 0.18s, visibility 0.18s; pointer-events:none;
}
.cat-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.sub-item {
  display:block; width:100%; padding:10px 18px; text-align:left;
  background:none; border:none; cursor:pointer; font-size:0.87rem;
  font-weight:500; color:var(--color-text); white-space:nowrap;
  transition:background 0.15s, color 0.15s;
}
.sub-item:hover { background:var(--color-bg-alt); color:var(--color-primary); }

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  background: radial-gradient(ellipse at 60% 20%, #f5e8d0 0%, #ede0c8 30%, #f8f2e8 65%, #faf6f0 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

/* curtain rod — warm walnut, matched to site primary #7b4a2a */
.hero::before {
  content:'';
  position:absolute; top:8px; left:0; right:0; height:10px;
  border-radius:5px;
  background: linear-gradient(180deg,
    rgba(180,120,80,0.6) 0%, #9a6038 10%, #7b4a2a 30%,
    #5c3318 52%, #6e4224 68%, #3e2010 86%, #22100a 100%);
  box-shadow:
    inset 0 2px 1px rgba(200,150,110,0.5),
    inset 0 -3px 4px rgba(20,8,2,0.7),
    0 3px 10px rgba(0,0,0,0.45),
    0 5px 18px rgba(40,18,6,0.3);
  z-index: 2;
}

/* Ambient light blobs */
.hero-nebs { position:absolute; inset:0; pointer-events:none; z-index:1; }
.neb { position:absolute; border-radius:50%; filter:blur(80px); }
.neb-1 {
  width:500px; height:400px; top:-80px; left:-100px;
  background: radial-gradient(circle, rgba(201,161,74,0.18), transparent 70%);
  animation: nebDrift 22s ease-in-out infinite;
}
.neb-2 {
  width:420px; height:350px; top:20%; right:-80px;
  background: radial-gradient(circle, rgba(123,74,42,0.12), transparent 70%);
  animation: nebDrift 28s ease-in-out 6s infinite reverse;
}
.neb-3 {
  width:360px; height:300px; bottom:10%; left:20%;
  background: radial-gradient(circle, rgba(201,161,74,0.14), transparent 70%);
  animation: nebDrift 18s ease-in-out 3s infinite;
}
@keyframes nebDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(30px,-20px) scale(1.08); }
  66%      { transform:translate(-20px,25px) scale(0.94); }
}

/* Floating fabric swatches */
.hero-swatches { position:absolute; inset:0; pointer-events:none; z-index:2; }
.swatch { position:absolute; border-radius:3px; pointer-events:none; animation:swatchFloat var(--dur,9s) ease-in-out var(--del,0s) infinite; }
.sw-1 { width:52px;height:82px; top:12%;left:8%;    --dur:9s; --del:0s;  --rot:8deg;
         background:linear-gradient(160deg,#a05a32,#7b3f1f,#5c2e14);
         box-shadow:0 16px 40px rgba(80,40,10,0.25),inset 0 1px 0 rgba(255,220,150,0.15); }
.sw-2 { width:42px;height:68px; top:55%;left:5%;    --dur:11s;--del:2s;  --rot:-5deg;
         background:linear-gradient(160deg,#c9a14a,#a07830,#7a5520);
         box-shadow:0 16px 40px rgba(80,40,10,0.2); }
.sw-3 { width:58px;height:88px; top:20%;right:7%;   --dur:8s; --del:1s;  --rot:-8deg;
         background:linear-gradient(160deg,#8e4b26,#6b3318,#4a2210);
         box-shadow:0 16px 40px rgba(80,40,10,0.25); }
.sw-4 { width:38px;height:62px; top:65%;right:8%;   --dur:13s;--del:4s;  --rot:12deg;
         background:linear-gradient(160deg,#d4a870,#c9a14a,#9a7830);
         box-shadow:0 16px 40px rgba(80,40,10,0.2); }
.sw-5 { width:32px;height:52px; top:78%;left:45%;   --dur:10s;--del:3s;  --rot:-3deg;
         background:linear-gradient(160deg,#c9a14a,#7b3f1f);
         box-shadow:0 16px 40px rgba(80,40,10,0.2); opacity:0.7; }
@keyframes swatchFloat {
  0%,100% { transform:translateY(0)     rotate(var(--rot)) rotateY(15deg); }
  33%      { transform:translateY(-22px) rotate(calc(var(--rot) + 4deg)) rotateY(25deg); }
  66%      { transform:translateY(-10px) rotate(calc(var(--rot) - 3deg)) rotateY(6deg);  }
}

/* 3D curtain scene wrapper */
.curtain-scene-wrap {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  z-index: 3;
}

/* Curtain panels — off-white sheer fabric, rod-pocket heading */
.curtain {
  position:absolute; top:0; width:52%; height:100%; z-index:6;
  pointer-events:none; transition:transform 3s cubic-bezier(0.22,0.61,0.36,1);
}
.curtain::before {
  /* Rod pocket casing: header ruffle + fabric tunnel around the rod */
  content:''; position:absolute; top:0; left:0; right:0; height:30px; z-index:2;
  background:
    /* Gathering compression lines — simulates bunched fabric */
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 5px,
      rgba(145,138,124,0.15) 5px 6px,
      transparent 6px 11px
    ),
    /* Pocket shadow gradient:
       0-33%  = header above rod (curtain 0-10px, hero 26-36px)
       33-67% = pocket tunnel around rod (curtain 10-20px, hero 36-46px)
       67-100% = fade back into curtain body */
    linear-gradient(180deg,
      rgba(252,250,243,0.98) 0%,
      rgba(242,237,226,0.94) 22%,
      rgba(208,202,188,0.90) 32%,
      rgba(165,158,145,0.96) 42%,
      rgba(150,143,131,0.98) 52%,
      rgba(165,158,145,0.94) 62%,
      rgba(210,204,192,0.86) 72%,
      rgba(244,240,230,0.48) 86%,
      transparent 100%
    );
}
.curtain::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:28px;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.025) 35%,rgba(0,0,0,0.06) 75%,rgba(0,0,0,0.1) 100%);
  border-top:1px solid rgba(180,155,110,0.2);
}
.curtain-left {
  left:0; transform-origin:left center;
  border-right:2px solid rgba(190,155,70,0.35);
  box-shadow:inset -22px 0 40px rgba(0,0,0,0.07), 6px 0 20px rgba(0,0,0,0.05);
  background:
    radial-gradient(ellipse 70% 60% at 78% 14%, rgba(255,255,250,0.55) 0%, rgba(255,255,255,0.32) 45%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(175,165,148,0.06) 0px, transparent 1px, rgba(255,255,255,0.2) 2.5px, transparent 5px, rgba(155,145,128,0.04) 6.5px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.012) 5px, rgba(255,255,255,0.24) 10px, rgba(255,255,255,0.15) 15px, rgba(0,0,0,0.012) 20px, rgba(0,0,0,0.008) 26px, rgba(0,0,0,0.04) 29px, rgba(0,0,0,0.02) 34px, rgba(255,255,255,0.2) 39px, rgba(0,0,0,0.012) 45px, rgba(0,0,0,0.045) 50px),
    linear-gradient(180deg, #faf8f2 0%, #f5f0e5 18%, #f8f4ed 38%, #f0eadf 58%, #f4efe6 80%, #ece6d8 100%);
}
.curtain-right {
  right:0; transform-origin:right center;
  border-left:2px solid rgba(190,155,70,0.35);
  box-shadow:inset 22px 0 40px rgba(0,0,0,0.07), -6px 0 20px rgba(0,0,0,0.05);
  background:
    radial-gradient(ellipse 70% 60% at 22% 14%, rgba(255,255,250,0.55) 0%, rgba(255,255,255,0.32) 45%, transparent 72%),
    repeating-linear-gradient(270deg, rgba(175,165,148,0.06) 0px, transparent 1px, rgba(255,255,255,0.2) 2.5px, transparent 5px, rgba(155,145,128,0.04) 6.5px, transparent 8px),
    repeating-linear-gradient(270deg, rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.012) 5px, rgba(255,255,255,0.24) 10px, rgba(255,255,255,0.15) 15px, rgba(0,0,0,0.012) 20px, rgba(0,0,0,0.008) 26px, rgba(0,0,0,0.04) 29px, rgba(0,0,0,0.02) 34px, rgba(255,255,255,0.2) 39px, rgba(0,0,0,0.012) 45px, rgba(0,0,0,0.045) 50px),
    linear-gradient(180deg, #faf8f2 0%, #f5f0e5 18%, #f8f4ed 38%, #f0eadf 58%, #f4efe6 80%, #ece6d8 100%);
}
.curtain-left.curtain-open  { transform:translateX(-84%); }
.curtain-right.curtain-open { transform:translateX(84%); }

/* Hero content */
.hero-content {
  position:relative; z-index:7; text-align:center; padding:0 24px;
  pointer-events:auto;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 18px; border:1px solid rgba(123,74,42,0.3);
  border-radius:999px; font-size:0.78rem; letter-spacing:1.5px;
  color:var(--color-primary); margin-bottom:22px;
  background:rgba(201,161,74,0.1); backdrop-filter:blur(6px);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(201,161,74,0.25); }
  50%      { box-shadow:0 0 0 10px rgba(201,161,74,0); }
}
.hero-content h1 {
  font-family:var(--font-heading); font-size:3rem;
  color:var(--color-primary-dark);
  text-shadow:0 2px 12px rgba(80,40,10,0.12);
  margin-bottom:16px; line-height:1.15;
}
.title-glow {
  display:block;
  background:linear-gradient(135deg,#a05a20 0%,#7b3f1f 45%,#c9a14a 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(123,63,31,0.2));
}
.hero-content p {
  max-width:540px; margin:0 auto 28px;
  color:var(--color-text-light); font-size:1.05rem;
}
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn {
  display:inline-block; padding:12px 28px; border-radius:var(--radius);
  font-weight:600; cursor:pointer; border:none; font-size:0.95rem;
  transition:transform 0.15s, opacity 0.15s, box-shadow 0.2s;
}
.btn:hover { opacity:0.92; transform:translateY(-2px); }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-block { width:100%; }
.btn-outline { background:transparent; border:1px solid var(--color-primary); color:var(--color-primary); }
.btn-danger  { background:#c0392b; color:#fff; }
.btn-secondary { background:var(--color-bg-alt); color:var(--color-text); border:1px solid var(--color-border); }
.btn-glow {
  box-shadow:0 4px 20px rgba(123,74,42,0.35),0 2px 8px rgba(0,0,0,0.1);
  animation:btnGlow 3s ease-in-out infinite;
}
@keyframes btnGlow {
  0%,100% { box-shadow:0 4px 20px rgba(123,74,42,0.35),0 2px 8px rgba(0,0,0,0.1); }
  50%      { box-shadow:0 6px 32px rgba(201,161,74,0.45),0 2px 8px rgba(0,0,0,0.1); }
}
.btn-ghost {
  background:rgba(255,255,255,0.6); border:1px solid rgba(123,74,42,0.25);
  color:var(--color-primary); backdrop-filter:blur(6px);
  border-radius:var(--radius); padding:12px 28px;
  font-weight:600; font-size:0.95rem; transition:all 0.2s; display:inline-block;
}
.btn-ghost:hover { background:rgba(255,255,255,0.9); border-color:var(--color-accent); transform:translateY(-2px); box-shadow:0 4px 16px rgba(80,40,10,0.12); }

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none; z-index:7;
  animation:scFade 4s ease-in-out 2s infinite;
}
.scroll-cue-line {
  width:1px; height:50px;
  background:linear-gradient(to bottom,rgba(123,74,42,0),rgba(123,74,42,0.6));
  animation:scLine 2s ease-in-out infinite;
}
@keyframes scLine {
  0%   { transform:scaleY(0); transform-origin:top; }
  50%  { transform:scaleY(1); transform-origin:top; }
  51%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}
@keyframes scFade { 0%,100%{opacity:0.4;} 50%{opacity:0.8;} }

/* ===== GARDEN BUTTERFLIES (scroll with product catalog) ===== */
.garden-butterfly {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: gbf-path var(--dur, 20s) linear var(--del, 0s) infinite;
}

@keyframes gbf-path {
  0%   { transform: translate(-80px,  var(--sy, 250px)) rotate(8deg)  scaleX(1); }
  18%  { transform: translate(18vw,   calc(var(--sy, 250px) - 55px))  rotate(-5deg) scaleX(1); }
  35%  { transform: translate(35vw,   calc(var(--sy, 250px) + 40px))  rotate(7deg)  scaleX(1); }
  49%  { transform: translate(49vw,   calc(var(--sy, 250px) - 65px))  rotate(-6deg) scaleX(1); }
  50%  { transform: translate(50vw,   calc(var(--sy, 250px) - 67px))  rotate(-6deg) scaleX(-1); }
  68%  { transform: translate(68vw,   calc(var(--sy, 250px) + 30px))  rotate(5deg)  scaleX(-1); }
  84%  { transform: translate(84vw,   calc(var(--sy, 250px) - 40px))  rotate(-4deg) scaleX(-1); }
  100% { transform: translate(110vw,  var(--sy, 250px))               rotate(8deg)  scaleX(-1); }
}

/* ===== THE GARDEN (SHOP) ===== */
.garden-section {
  max-width:1200px; margin:0 auto; padding:80px 24px;
  position:relative; z-index:1;
  overflow:visible;
}
.garden-glow {
  position:fixed; top:0; left:0; right:0; bottom:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 15% 70%,rgba(201,161,74,0.08),transparent 50%),
    radial-gradient(ellipse at 85% 30%,rgba(123,74,42,0.06),transparent 50%);
}
.section-title {
  font-family:var(--font-heading); font-size:2.2rem; text-align:center;
  color:var(--color-primary-dark); margin-bottom:8px;
}
.glow-title { text-shadow:0 2px 16px rgba(201,161,74,0.2); }
.section-subtitle {
  text-align:center; color:var(--color-text-light); margin-bottom:40px;
  max-width:600px; margin-left:auto; margin-right:auto;
}

/* Search bar */
.product-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 0 auto 32px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 0 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.product-search-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(123,74,42,0.1);
}
.product-search-icon {
  font-size: 1rem;
  margin-right: 10px;
  opacity: 0.5;
  pointer-events: none;
  flex-shrink: 0;
}
.product-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  padding: 12px 0;
}
.product-search-input::placeholder { color: var(--color-text-light); }
.product-search-input::-webkit-search-cancel-button { display: none; }
.product-search-clear {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-text-light);
  padding: 0 0 0 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.product-search-clear:hover { color: var(--color-primary); }

/* Product grid */
.product-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px;
}
.product-card {
  background:var(--color-bg-card); border:1px solid var(--color-border);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 20px rgba(80,50,20,0.08); display:flex; flex-direction:column;
  transform-style:preserve-3d; will-change:transform;
  transition:transform 0.2s, box-shadow 0.2s;
  position:relative; z-index:1;
}
.product-card:hover { box-shadow:0 12px 40px rgba(80,50,20,0.14); }
.product-img {
  height:220px; background-size:cover; background-position:center;
  background-color:var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center; font-size:3rem;
}
.product-info { padding:16px; display:flex; flex-direction:column; gap:6px; flex-grow:1; }
.product-name { font-weight:600; font-size:1rem; color:var(--color-text); }
.product-category { font-size:0.75rem; color:var(--color-text-light); text-transform:uppercase; letter-spacing:1px; }
.product-price { font-size:1.1rem; font-weight:700; color:var(--color-primary); margin-top:4px; }
.product-price .old-price { font-size:0.85rem; color:var(--color-text-light); text-decoration:line-through; font-weight:400; margin-right:6px; }
.product-card-link { display:block; text-decoration:none; color:inherit; flex:1; }
.product-card-link:hover { opacity:1; transform:none; }
.product-actions { padding:0 16px 16px; display:flex; gap:8px; }
.product-actions .btn { flex:1; text-align:center; font-size:0.85rem; padding:10px; }
.out-of-stock-badge {
  position:absolute; top:10px; left:10px; background:#c0392b; color:#fff;
  font-size:0.7rem; padding:4px 10px; border-radius:999px; font-weight:600;
}
.product-img-wrap { position:relative; }
.subcategory-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--color-border); }
.subcategory-bar.hidden { display:none; }
.sub-tab {
  background:#fff; border:1px solid var(--color-border);
  border-radius:999px; padding:6px 16px; font-size:0.82rem; cursor:pointer;
  font-weight:500; color:var(--color-text-light); transition:all 0.2s;
}
.sub-tab:hover,.sub-tab.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

/* ===== THE REALM (ABOUT) ===== */
.realm-section {
  background:
    radial-gradient(ellipse at 50% 40%,rgba(201,161,74,0.08),transparent 60%),
    linear-gradient(to bottom,var(--color-bg-alt),var(--color-bg));
  padding:90px 24px; text-align:center; position:relative; overflow:hidden; z-index:1;
}
.realm-section::before {
  content:''; position:absolute; top:50%; left:50%;
  width:600px; height:600px; border-radius:50%;
  border:1px solid rgba(201,161,74,0.12);
  transform:translate(-50%,-50%);
  animation:rPulse 8s ease-in-out infinite;
}
.realm-section::after {
  content:''; position:absolute; top:50%; left:50%;
  width:950px; height:950px; border-radius:50%;
  border:1px solid rgba(201,161,74,0.06);
  transform:translate(-50%,-50%);
  animation:rPulse 12s ease-in-out 2s infinite;
}
@keyframes rPulse {
  0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(1);}
  50%    {opacity:1;transform:translate(-50%,-50%) scale(1.04);}
}
.about-story {
  max-width: 680px;
  margin: 24px auto 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text-light);
  position: relative;
  z-index: 1;
  padding: 0 8px;
}
.about-promise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
  background: rgba(201,161,74,0.08);
  border: 1px solid rgba(201,161,74,0.25);
  border-radius: 999px;
  padding: 12px 28px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.about-promise p {
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  font-weight: 500;
  margin: 0;
}
.promise-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.realm-orbs { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; margin-top:40px; }
.realm-orb {
  position:relative; width:270px; padding:48px 28px 40px;
  background:rgba(255,255,255,0.75); border:1px solid rgba(201,161,74,0.22);
  border-radius:60% 60% 50% 50% / 55% 55% 45% 45%;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 32px rgba(80,50,20,0.08);
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.realm-orb:hover { transform:translateY(-18px) scale(1.03); box-shadow:0 32px 64px rgba(80,50,20,0.14),0 0 40px rgba(201,161,74,0.1); }
.orb-glow {
  position:absolute; inset:-10px; border-radius:inherit;
  background:radial-gradient(circle at 50% 25%,rgba(201,161,74,0.1),transparent 65%);
  pointer-events:none; animation:orbPulse 4s ease-in-out infinite;
}
@keyframes orbPulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} }
.orb-icon {
  font-size:2.4rem; margin-bottom:18px; display:block;
  filter:drop-shadow(0 2px 8px rgba(201,161,74,0.4));
  animation:orbPulse 4s ease-in-out infinite;
}
.realm-orb h3 { font-family:var(--font-heading); color:var(--color-primary-dark); font-size:1.25rem; margin-bottom:10px; }
.realm-orb p  { color:var(--color-text-light); font-size:0.88rem; line-height:1.7; }

/* ===== THE PORTAL (CONTACT) ===== */
.portal-section {
  position:relative; padding:100px 24px; text-align:center;
  overflow:hidden; z-index:1;
  background:radial-gradient(ellipse at 50% 50%,#f5ede0,#ede0c8);
  background-color:var(--color-bg-alt);
}
.portal-ring {
  position:absolute; top:50%; left:50%; border-radius:50%;
  transform:translate(-50%,-50%);
  animation:pRotate var(--dur,25s) linear infinite;
}
.pr-1 { width:280px;  height:280px;  --dur:20s; border:1px solid rgba(201,161,74,0.35); animation-direction:normal;  }
.pr-2 { width:480px;  height:480px;  --dur:30s; border:1px solid rgba(123,74,42,0.2);  animation-direction:reverse; }
.pr-3 { width:700px;  height:700px;  --dur:45s; border:1px solid rgba(201,161,74,0.12); animation-direction:normal;  }
.pr-4 { width:1000px; height:1000px; --dur:65s; border:1px solid rgba(123,74,42,0.06);  animation-direction:reverse; }
@keyframes pRotate {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}
.portal-gems { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; margin-top:40px; }
.portal-gem {
  background:rgba(255,255,255,0.8); border:1px solid rgba(201,161,74,0.3);
  border-radius:16px; padding:36px 44px; min-width:190px;
  color:var(--color-text); transition:transform 0.3s,background 0.3s,box-shadow 0.3s;
  position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(80,50,20,0.08);
  backdrop-filter:blur(8px);
}
.portal-gem::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(201,161,74,0.08),transparent 60%);
}
.portal-gem:hover { transform:translateY(-12px) scale(1.04); background:rgba(255,255,255,0.95); box-shadow:0 24px 48px rgba(80,50,20,0.14),0 0 32px rgba(201,161,74,0.1); }
.gem-icon   { font-size:1.8rem; margin-bottom:10px; display:block; }
.gem-label  { font-size:0.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--color-accent); margin-bottom:6px; display:block; font-weight:600; }
.portal-gem strong { display:block; font-size:0.88rem; color:var(--color-text-light); }

/* ===== FOOTER ===== */
.site-footer {
  background:var(--color-primary-dark); color:rgba(255,245,230,0.75);
  text-align:center; padding:28px 24px; font-size:0.85rem;
  border-top:1px solid rgba(201,161,74,0.15); position:relative; z-index:1;
}
.footer-admin a { text-decoration:underline; opacity:0.7; color:rgba(201,161,74,0.8); }

/* ===== CART DRAWER ===== */
.cart-overlay { position:fixed; inset:0; background:rgba(46,32,16,0.35); opacity:0; visibility:hidden; transition:opacity 0.25s; z-index:200; }
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:-400px; width:380px; max-width:92vw; height:100%; background:#fff; backdrop-filter:blur(16px); z-index:201; box-shadow:-8px 0 40px rgba(80,50,20,0.15); display:flex; flex-direction:column; transition:right 0.3s ease; border-left:1px solid var(--color-border); }
.cart-drawer.open { right:0; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--color-border); }
.cart-header h3 { color:var(--color-primary-dark); font-family:var(--font-heading); }
.cart-header button { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--color-text-light); }
.cart-items { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.cart-item { display:flex; gap:12px; align-items:center; }
.cart-item-img { width:60px; height:60px; border-radius:8px; background:var(--color-bg-alt); display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; background-size:cover; background-position:center; }
.cart-item-info { flex:1; }
.cart-item-name  { font-weight:600; font-size:0.9rem; color:var(--color-text); }
.cart-item-price { font-size:0.85rem; color:var(--color-text-light); }
.cart-item-qty   { display:flex; align-items:center; gap:6px; margin-top:4px; }
.cart-item-qty button { width:24px; height:24px; border:1px solid var(--color-border); background:#fff; border-radius:4px; cursor:pointer; color:var(--color-text); }
.cart-remove { background:none; border:none; color:#c0392b; cursor:pointer; font-size:0.8rem; }
.cart-footer { border-top:1px solid var(--color-border); padding:16px 20px; }
.cart-breakdown { margin-bottom: 10px; }
.cart-breakdown-row { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--color-text-light); padding: 2px 0; }
.cart-breakdown-inst { color: var(--color-primary); font-style: italic; }
.cart-breakdown-gst  { color: var(--color-text-light); }
.cart-total-row { display:flex; justify-content:space-between; font-weight:700; font-size:1.1rem; margin-bottom:12px; color:var(--color-text); border-top:1px solid var(--color-border); padding-top:8px; }
.empty-cart { text-align:center; color:var(--color-text-light); padding:40px 0; }

/* ===== CHECKOUT MODAL ===== */
.checkout-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity 0.25s; }
.checkout-modal.open { opacity:1; visibility:visible; }
.checkout-box { background:#fff; border:1px solid var(--color-border); box-shadow:0 20px 60px rgba(80,50,20,0.15); border-radius:var(--radius); padding:28px; width:420px; max-width:92vw; max-height:90vh; overflow-y:auto; position:relative; }
.modal-close { position:absolute; top:14px; right:14px; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--color-text-light); }
.checkout-box h3 { font-family:var(--font-heading); margin-bottom:18px; color:var(--color-primary-dark); }
#checkout-form { display:flex; flex-direction:column; gap:12px; }
#checkout-form label { font-size:0.85rem; font-weight:500; display:flex; flex-direction:column; gap:4px; color:var(--color-text); }
#checkout-form input, #checkout-form textarea, #checkout-form select {
  padding:10px; border:1px solid var(--color-border); background:#faf6f0;
  color:var(--color-text); border-radius:6px; font-family:inherit; font-size:0.9rem;
}
#checkout-form input:focus, #checkout-form textarea:focus, #checkout-form select:focus {
  outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(201,161,74,0.12);
}
.checkout-summary { background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:8px; padding:12px; font-size:0.85rem; color:var(--color-text); }
.checkout-summary-row { display:flex; justify-content:space-between; padding:2px 0; }

/* Installation service option */
.install-row { margin-bottom: 12px; }
.install-check-label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 0.9rem; color: var(--color-text);
  padding: 10px 14px; border: 1.5px solid var(--color-border);
  border-radius: 8px; background: var(--color-bg-alt);
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
.install-check-label:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(123,74,42,0.06);
}
.install-check-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.install-check-label span:nth-child(2) { flex: 1; font-weight: 500; }
.install-charge-badge { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); background: rgba(123,74,42,0.1); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.delivery-options { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.checkbox-label { display:flex; align-items:center; gap:10px; font-size:0.9rem; color:var(--color-text); }
.checkbox-label input { width:16px; height:16px; accent-color:var(--color-primary); }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:24px; right:24px; background:var(--color-success); color:#fff; padding:14px 22px; border-radius:var(--radius); font-weight:600; opacity:0; transform:translateY(20px); transition:all 0.3s; z-index:400; pointer-events:none; }
.toast.show { opacity:1; transform:translateY(0); }

/* ===== COLOUR & DESIGN SELECTORS ===== */
.product-variants {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.variant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.variant-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-light);
  min-width: 44px;
  flex-shrink: 0;
}

/* Colour swatches */
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.color-swatch:hover {
  transform: scale(1.2);
}
.color-swatch.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
  transform: scale(1.15);
}

/* Design chips */
.design-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.design-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-light);
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.5;
}
.design-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(255,255,255,0.9);
}
.design-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Design image thumbnails */
.design-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.design-thumb img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.design-thumb span {
  font-size: 0.6rem;
  color: var(--color-text-light);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58px;
  display: block;
}
.design-thumb:hover img { border-color: var(--color-primary); }
.design-thumb.active img {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(123,74,42,0.2);
}
.design-thumb.active span { color: var(--color-primary); font-weight: 600; }
/* Slightly larger on the product detail page */
.pd-design-options .design-thumb img {
  width: 56px;
  height: 56px;
}
.pd-design-options .design-thumb span {
  font-size: 0.68rem;
  max-width: 64px;
}

/* Cart variant line */
.cart-item-variant {
  font-size: 0.74rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.cart-variant-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.12);
}

/* Measurement chips (length / width) */
.measure-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.measure-chip {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-light);
  transition: all 0.15s;
  white-space: nowrap;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
}
.measure-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(255,255,255,0.9);
}
.measure-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Custom dimension input */
.custom-measure-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 6px;
  background: #fff;
}
.custom-measure-input {
  width: 52px;
  border: none;
  outline: none;
  font-size: 0.72rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}
.custom-measure-input::-webkit-outer-spin-button,
.custom-measure-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.measure-unit {
  font-size: 0.68rem;
  color: var(--color-text-light);
  font-weight: 600;
}

/* Made-to-measure note */
.custom-note {
  font-size: 0.72rem;
  color: var(--color-text-light);
  margin-top: 4px;
  line-height: 1.5;
  padding: 0 0 4px;
}
.pd-custom-note {
  margin-top: 2px;
  margin-bottom: 16px;
}

/* Product detail page variant selectors */
.pd-option-group {
  margin-bottom: 18px;
}
.pd-option-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  display: block;
  margin-bottom: 9px;
}
.pd-option-value {
  font-weight: 400;
  color: var(--color-primary);
}
.pd-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-swatch {
  width: 28px;
  height: 28px;
}
.pd-design-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* Admin delete wrappers on product page */
.pd-swatch-wrap,
.pd-design-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.pd-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  border: none;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}
.pd-swatch-wrap:hover .pd-delete-btn,
.pd-design-wrap:hover .pd-delete-btn { opacity: 1; }
.pd-delete-design { top: -4px; right: -4px; }

.pd-design-name-input {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.pd-design-name-input:focus { border-color: var(--color-primary); }
.pd-design-name-input::placeholder { color: var(--color-text-light); }
.pd-design-options .design-chip {
  padding: 5px 14px;
  font-size: 0.82rem;
}
.pd-measure-options .measure-chip {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.measure-chip-label {
  font-weight: 600;
}
.measure-chip-price {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.88;
  letter-spacing: 0.2px;
}
.measure-chip-price:empty {
  display: none;
}
.measure-chip.active .measure-chip-price {
  opacity: 1;
}
.pd-measure-options .custom-measure-wrap { padding: 4px 8px; }
.pd-measure-options .custom-measure-input { width: 60px; font-size: 0.8rem; }
.custom-rate-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 180,80,30), 0.08);
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 2px;
  white-space: nowrap;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity:0; transform:translateY(44px) scale(0.97);
  transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.revealed { opacity:1; transform:translateY(0) scale(1); }
.reveal:nth-child(2) { transition-delay:0.12s; }
.reveal:nth-child(3) { transition-delay:0.24s; }
.reveal:nth-child(4) { transition-delay:0.36s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .main-nav { display:none; }
  .hero-content h1 { font-size:2.1rem; }
  .nav-container { padding:10px 16px; }
  .realm-orb { width:100%; max-width:320px; }
  .hero-swatches .swatch { opacity:0.5; }
  .butterfly-creature { display:none; }
}