/* LuxenHeaven — Authentic Punjabi Couture
   Fixed traditional palette: bridal maroon, mustard gold, phulkari orange, ivory */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Karla:wght@300;400;500;600&family=Yatra+One&display=swap');

:root{
  --ivory:#fbf6ec;
  --ivory-soft:#f5ecdb;
  --ink:#2a1a10;
  --maroon:#7a1330;
  --maroon-deep:#580c22;
  --maroon-bright:#a51a3e;
  --gold:#d4a017;
  --gold-soft:#e8c167;
  --saffron:#e8731a;
  --peacock:#1f4d4a;
  --muted:#6b5544;
  --border:#d9c39a;
  --shadow-soft:0 12px 40px -22px rgba(122,19,48,.45);
  --shadow-gold:0 0 0 1px rgba(212,160,23,.45),0 14px 36px -18px rgba(122,19,48,.35);
  --grad-maroon:linear-gradient(135deg,#580c22 0%,#7a1330 55%,#3d0816 100%);
  --grad-gold:linear-gradient(135deg,#d4a017 0%,#e8731a 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Karla',sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-.01em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
em{font-style:italic}
.gurmukhi{font-family:'Yatra One',system-ui}

/* phulkari pattern backgrounds */
.phulkari-bg{
  background-color:var(--ivory);
  background-image:
    radial-gradient(circle at 25% 25%,rgba(232,115,26,.18) 0 8px,transparent 9px),
    radial-gradient(circle at 75% 75%,rgba(212,160,23,.22) 0 6px,transparent 7px),
    radial-gradient(circle at 75% 25%,rgba(122,19,48,.14) 0 5px,transparent 6px),
    radial-gradient(circle at 25% 75%,rgba(31,77,74,.16) 0 5px,transparent 6px);
  background-size:64px 64px;
}
.phulkari-dark{
  background-color:#1a0d10;
  color:var(--ivory);
  background-image:
    radial-gradient(circle at 25% 25%,rgba(232,115,26,.30) 0 8px,transparent 9px),
    radial-gradient(circle at 75% 75%,rgba(212,160,23,.35) 0 6px,transparent 7px),
    radial-gradient(circle at 75% 25%,rgba(251,246,236,.12) 0 4px,transparent 5px),
    radial-gradient(circle at 25% 75%,rgba(31,77,74,.28) 0 5px,transparent 6px);
  background-size:72px 72px;
}
.maroon-bg{background:var(--grad-maroon);color:var(--ivory)}

@keyframes shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.shimmer-gold{
  background:linear-gradient(90deg,#b8870b,#d4a017,#e8731a,#d4a017,#b8870b);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}

/* NAV */
.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(251,246,236,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,160,23,.3);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.nav-logo-main{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--maroon);letter-spacing:.02em;display:block}
.nav-logo-sub{font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:var(--muted);display:block;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-links a{font-size:14px;color:var(--ink);opacity:.85;transition:color .2s,opacity .2s}
.nav-links a:hover{color:var(--maroon);opacity:1}
.nav-cta{
  background:var(--maroon);color:var(--ivory)!important;
  padding:10px 22px;font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  border:1px solid var(--maroon);transition:background .2s;
}
.nav-cta:hover{background:var(--maroon-deep);opacity:1!important}
/* ── Hamburger: hidden on desktop ── */
.nav-hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  transition: background 0.3s ease;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-hamburger:hover {
  background: rgba(122,19,48,.08);
}
.nav-hamburger:active {
  background: rgba(122,19,48,.16);
}

/* The three-line icon: built from a single element + pseudo-elements */
.nav-hamburger span {
  display: block;
  position: relative;
  width: 22px;
  height: 1.5px;
  background: var(--maroon);
  border-radius: 2px;
  transition:
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    opacity   0.3s  cubic-bezier(0.23, 1, 0.32, 1),
    width     0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-hamburger span::before,
.nav-hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: var(--maroon);
  border-radius: 2px;
  transition:
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    opacity   0.3s  cubic-bezier(0.23, 1, 0.32, 1),
    width     0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-hamburger span::before { top: -7px; }
.nav-hamburger span::after  { top:  7px; width: 14px; }

/* Idle hover — subtle stagger nudge */
.nav-hamburger:not(.is-open):hover span::before { transform: translateX(-2px); }
.nav-hamburger:not(.is-open):hover span::after  { transform: translateX( 2px); }

/* ── OPEN state → animated X ── */
.nav-hamburger.is-open span {
  background: transparent; /* middle line fades out */
}
.nav-hamburger.is-open span::before {
  width: 22px;
  top: 0;
  transform: rotate(45deg);
}
.nav-hamburger.is-open span::after {
  width: 22px;
  top: 0;
  transform: rotate(-45deg);
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;font-size:11px;text-transform:uppercase;
  letter-spacing:.3em;cursor:pointer;border:none;
  transition:all .25s ease;font-family:inherit;
}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--saffron);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid var(--gold);color:var(--ivory)}
.btn-outline:hover{background:rgba(251,246,236,.1)}
.btn-outline-dark{background:transparent;border:1px solid var(--maroon);color:var(--maroon)}
.btn-outline-dark:hover{background:var(--maroon);color:var(--ivory)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:120px 0 140px}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(14,6,8,.55) 100%);
}
.hero-content{position:relative;z-index:3;max-width:640px}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hero-eyebrow span:first-child{width:48px;height:1px;background:var(--gold)}
.hero-eyebrow-text{font-size:11px;text-transform:uppercase;letter-spacing:.4em;color:var(--gold)}
.hero-title{font-size:clamp(48px,8vw,88px);color:var(--ivory);font-weight:500}
.hero-script{font-family:'Yatra One',system-ui;font-size:clamp(26px,4vw,38px);color:var(--gold);margin-top:12px}
.hero-subtitle{margin-top:28px;font-size:18px;line-height:1.7;color:rgba(251,246,236,.82);max-width:520px}
.hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px}
.hero-stats{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid rgba(212,160,23,.25);padding-top:28px;max-width:520px}
.hero-stats .big-number{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--gold)}
.hero-stats .stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:rgba(251,246,236,.6);margin-top:4px}
.hero-ornament{z-index:1;
  position:absolute;right:-100px;top:50%;transform:translateY(-50%);
  width:680px;height:680px;opacity:.3;pointer-events:none;z-index:1;
}

/* SECTIONS */
section{padding:96px 0}
.section-title{text-align:center;margin-bottom:64px}
.section-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.4em;color:var(--saffron);margin-bottom:16px}
.section-eyebrow.gold{color:var(--gold)}
.section-heading{font-size:clamp(36px,5vw,60px);color:var(--maroon)}
.section-heading em{color:var(--saffron)}
.section-heading.on-dark{color:var(--ivory)}
.section-heading.on-dark em{color:var(--gold)}

.paisley-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}
.paisley-divider .line{height:1px;width:64px;background:var(--gold);opacity:.6}

/* INTRO */
.intro{text-align:center}
.intro-script{font-family:'Yatra One',system-ui;font-size:26px;color:var(--maroon)}
.intro p{max-width:640px;margin:32px auto 0;font-size:18px;line-height:1.75;color:var(--muted)}

/* COLLECTIONS */
.collections-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.collection-card{
  border:1px solid rgba(212,160,23,.4);
  background:#fff;
  overflow:hidden;transition:all .3s ease;
}
.collection-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-gold)}
.collection-image{position:relative;height:280px;overflow:hidden}
.collection-image .ornament{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.collection-image .overlay{position:absolute;inset-inline:0;bottom:0;height:96px;background:linear-gradient(to top,rgba(0,0,0,.45),transparent)}
.collection-image .script{position:absolute;bottom:16px;left:20px;font-family:'Yatra One',system-ui;font-size:24px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.collection-card .body{padding:28px}
.collection-card h3{font-size:24px;color:var(--maroon)}
.collection-card p{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.7}
.collection-card .link{margin-top:24px;display:inline-flex;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:var(--saffron);transition:gap .2s}
.collection-card:hover .link{gap:14px}

/* COLLECTIONS CTA */
.collections-cta{
  text-align:center;margin-top:56px;padding-top:48px;
  border-top:1px solid rgba(212,160,23,.3);
}
.btn-explore{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 44px;font-size:12px;text-transform:uppercase;
  letter-spacing:.3em;cursor:pointer;
  background:transparent;
  border:1.5px solid var(--maroon);color:var(--maroon);
  font-family:inherit;
  transition:all .28s ease;position:relative;overflow:hidden;
}
.btn-explore::before{
  content:'';position:absolute;inset:0;
  background:var(--grad-maroon);
  transform:translateX(-102%);transition:transform .28s ease;
  z-index:0;
}
.btn-explore:hover::before{transform:translateX(0)}
.btn-explore:hover{color:var(--ivory);border-color:var(--maroon-deep);}
.btn-explore:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.btn-explore svg,.btn-explore .btn-arrow{position:relative;z-index:1;transition:transform .25s}
.btn-explore span,.btn-explore svg{position:relative;z-index:1}
.btn-explore:hover .btn-arrow{transform:translateX(6px)}
.btn-explore:hover svg{transform:scale(1.1)}
.collections-cta-sub{
  margin-top:16px;font-size:12px;text-transform:uppercase;
  letter-spacing:.25em;color:var(--muted);opacity:.8;
}

/* PROCESS */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(212,160,23,.25)}
.process-card{background:#1a0d10;padding:32px}
.process-step{font-family:'Cormorant Garamond',serif;font-size:48px;color:var(--gold)}
.process-card h3{margin-top:14px;font-size:24px;color:var(--ivory)}
.process-card p{margin-top:12px;font-size:14px;color:rgba(251,246,236,.7);line-height:1.7}

/* CRAFT */
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.craft-visual{position:relative}
.craft-visual-box{aspect-ratio:1;background:var(--grad-maroon);padding:32px;position:relative}
.craft-badge{
  position:absolute;bottom:-24px;right:-24px;
  background:var(--ivory);border:1px solid var(--gold);
  padding:16px 24px;
}
.craft-badge .script{font-family:'Yatra One',system-ui;font-size:26px;color:var(--maroon)}
.craft-badge .sub{font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:var(--muted);margin-top:4px}
.craft-list{list-style:none;margin-top:24px}
.craft-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(212,160,23,.3)}
.craft-diamond{width:8px;height:8px;background:var(--saffron);transform:rotate(45deg);margin-top:8px;flex-shrink:0}
.craft-list h4{font-size:20px;color:var(--maroon)}
.craft-list p{font-size:14px;color:var(--muted);margin-top:4px}
.craft-text .paisley-divider{justify-content:flex-start}

/* CTA */
.cta{position:relative;overflow:hidden;text-align:center;background:var(--grad-maroon);padding:96px 0}
.cta-script{font-family:'Yatra One',system-ui;font-size:32px;color:var(--gold)}
.cta h2{font-size:clamp(40px,6vw,72px);color:var(--ivory);margin-top:16px}
.cta p{max-width:520px;margin:24px auto 0;font-size:18px;color:rgba(251,246,236,.82)}
.cta-actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.cta .ornament-bg{position:absolute;top:50%;width:500px;height:500px;transform:translateY(-50%);opacity:.18;pointer-events:none}
.cta .ornament-bg.left{left:-160px}
.cta .ornament-bg.right{right:-160px}

/* FOOTER */
footer{background:#150a0d;color:rgba(251,246,236,.7);padding:56px 0;text-align:center}
footer .logo{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--gold)}
footer .script{font-family:'Yatra One',system-ui;font-size:20px;color:rgba(251,246,236,.6);margin:8px 0 16px}
footer .meta{font-size:11px;text-transform:uppercase;letter-spacing:.3em;margin-top:16px}
footer .copy{font-size:11px;color:rgba(251,246,236,.4);margin-top:10px}

/* Page hero (about / contact) — responsive padding */
.page-hero {
  padding: 140px 0 100px;
}

/* RESPONSIVE — comprehensive mobile fixes */

/* === Hard global overflow lock === */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; min-width: 0; }

/* === Tablet (≤960px) === */
@media (max-width:960px){
  .container { padding: 0 18px; }

  /* Nav */
  .nav-links{
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    background: var(--ivory);
    padding: 28px 24px 32px;
    gap: 0;
    border-bottom: 1px solid var(--border);
    z-index: 49;
    /* closed state */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition:
      clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1),
      opacity   0.35s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: 0 20px 60px -10px rgba(42,26,16,.18);
  }
  .nav-links.open {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
    pointer-events: all;
  }
  /* Staggered link reveal */
  .nav-links li {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity   0.4s ease,
      transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border-bottom: 1px solid rgba(217,195,154,.4);
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links li a {
    display: block;
    padding: 14px 4px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .nav-links.open li:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.08s; }
  .nav-links.open li:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.13s; }
  .nav-links.open li:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.18s; }
  .nav-links.open li:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:.23s; }
  .nav-links.open li:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:.28s; }
  .nav-links.open li:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:.33s; }
  .nav-hamburger{ display:flex; }

  /* Sections */
  section{padding:72px 0}

  /* Hero */
  .hero{padding:80px 0 80px; overflow:hidden;}
  .page-hero { padding: 100px 0 70px; }
  .hero-ornament{width:380px;height:380px;right:-160px;opacity:.15}
  .hero-content{max-width:100%}
  .hero-subtitle{font-size:16px}
  .hero-stats{max-width:100%}

  /* Grids */
  .collections-grid{grid-template-columns:1fr;gap:20px}
  .process-grid{grid-template-columns:1fr 1fr;gap:1px;background:rgba(212,160,23,.25)}
  .craft-grid{grid-template-columns:1fr;gap:40px}
  .craft-badge{position:static;display:inline-block;margin-top:20px}
}

/* === Mobile (≤520px) === */
@media (max-width:520px){
  /* Container */
  .container{ padding: 0 14px; width:100%; max-width:100%; }

  /* Nav */
  .nav-inner{ padding: 14px 0; }
  .nav-logo-main{ font-size: 20px; }
  .nav-logo-sub{ font-size: 9px; letter-spacing: .2em; }

  /* Page hero on inner pages */
  .page-hero { padding: 72px 0 48px; }

  /* Smaller, tighter dot pattern on mobile — prevents "glitchy blob" look */
  .phulkari-dark{
    background-image:
      radial-gradient(circle at 25% 25%,rgba(232,115,26,.22) 0 4px,transparent 5px),
      radial-gradient(circle at 75% 75%,rgba(212,160,23,.28) 0 3px,transparent 4px),
      radial-gradient(circle at 75% 25%,rgba(251,246,236,.09) 0 2px,transparent 3px),
      radial-gradient(circle at 25% 75%,rgba(31,77,74,.22) 0 3px,transparent 4px);
    background-size: 36px 36px;
  }
  .phulkari-bg{
    background-image:
      radial-gradient(circle at 25% 25%,rgba(232,115,26,.14) 0 4px,transparent 5px),
      radial-gradient(circle at 75% 75%,rgba(212,160,23,.18) 0 3px,transparent 4px),
      radial-gradient(circle at 75% 25%,rgba(122,19,48,.10) 0 2px,transparent 3px),
      radial-gradient(circle at 25% 75%,rgba(31,77,74,.12) 0 2px,transparent 3px);
    background-size: 32px 32px;
  }

  /* Hero — biggest overflow source */
  .hero{
    padding: 72px 0 56px;
    overflow: hidden;
    background-size: 40px 40px !important;
  }
  /* Hide the huge ornament SVG on mobile — it bleeds off-screen */
  .hero-ornament{ display: none; }
  .hero-content{ max-width: 100%; }
  .hero-eyebrow{ gap: 10px; margin-bottom: 16px; }
  .hero-eyebrow span:first-child{ width: 28px; }
  .hero-eyebrow-text{ font-size: 9px; letter-spacing: .25em; }
  .hero-title{ font-size: clamp(34px, 9vw, 52px); line-height: 1.1; }
  .hero-script{ font-size: clamp(18px, 5vw, 26px); margin-top: 8px; }
  .hero-subtitle{
    font-size: 14px; line-height: 1.65;
    margin-top: 16px; max-width: 100%;
  }
  .hero-actions{
    margin-top: 24px; gap: 10px;
    flex-direction: column;
  }
  .hero-actions .btn{
    width: 100%; justify-content: center;
    padding: 15px 20px; font-size: 10px; letter-spacing: .25em;
  }
  .hero-stats{
    margin-top: 32px; padding-top: 20px;
    grid-template-columns: repeat(3,1fr);
    gap: 0; max-width: 100%;
  }
  .hero-stats .big-number{ font-size: 26px; }
  .hero-stats .stat-label{ font-size: 8px; letter-spacing: .15em; }

  /* Sections general */
  section{ padding: 52px 0; }

  /* Intro */
  .intro-script{ font-size: 20px; }
  .intro p{ font-size: 14px; margin-top: 20px; }
  .section-heading{ font-size: clamp(26px, 7vw, 36px); }

  /* Collections grid */
  .collections-grid{ grid-template-columns: 1fr; gap: 16px; }
  .collection-image{ height: 220px; }
  .collection-card .body{ padding: 20px; }
  .collection-card h3{ font-size: 20px; }
  .collection-card p{ font-size: 13px; }

  /* Collections CTA */
  .collections-cta{ margin-top: 32px; padding-top: 28px; }
  .btn-explore{
    width: 100%; justify-content: center;
    padding: 16px 20px; font-size: 10px; letter-spacing: .2em;
  }
  .collections-cta-sub{ font-size: 10px; margin-top: 10px; }

  /* Process */
  .process-grid{
    grid-template-columns: 1fr;
    gap: 0; background: transparent;
  }
  .process-card{ padding: 24px 20px; border-bottom: 1px solid rgba(212,160,23,.2); }
  .process-step{ font-size: 28px; }

  /* Craft */
  .craft-grid{ grid-template-columns: 1fr; gap: 28px; }
  .craft-visual-box{ height: 220px; }
  .craft-list li{ gap: 14px; margin-bottom: 20px; }
  .craft-list h4{ font-size: 16px; }
  .craft-list p{ font-size: 13px; }

  /* CTA section */
  .cta{ padding: 60px 0; }
  .cta-script{ font-size: 20px; }
  .cta h2{ font-size: clamp(28px, 8vw, 42px); }
  .cta p{ font-size: 14px; margin-top: 16px; }
  .cta-actions{ margin-top: 24px; gap: 10px; flex-direction: column; }
  .cta-actions .btn{ width: 100%; justify-content: center; padding: 15px 20px; font-size: 10px; }

  /* Footer */
  footer{ padding: 48px 0 32px; }
  footer .logo{ font-size: 24px; }

  /* Generic btn overflow guard */
  .btn{ max-width: 100%; }
}

/* ============================================================
   PRODUCT DETAIL MODAL — LuxenHeaven
   ============================================================ */

/* ---- Overlay ---- */
.pdp-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 6, 8, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1);
}
.pdp-overlay.open {
  opacity: 1; pointer-events: all;
}

/* ---- Modal shell ---- */
.pdp-modal {
  background: var(--ivory);
  width: 100%; max-width: 1100px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(40px) scale(.97);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.pdp-overlay.open .pdp-modal {
  transform: translateY(0) scale(1);
}

/* ---- Close btn ---- */
.pdp-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 38px; height: 38px;
  background: rgba(251,246,236,.9);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
  font-size: 20px; color: var(--maroon);
  line-height: 1;
}
.pdp-close:hover { background: var(--maroon); color: var(--ivory); }

/* ---- LEFT: Gallery ---- */
.pdp-gallery {
  position: sticky; top: 0; height: 92vh;
  display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
  background: #1a0d10;
}

.pdp-main-image {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.pdp-main-image-bg {
  position: absolute; inset: 0;
  transition: opacity .4s ease;
}
.pdp-main-image-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pdp-main-image-content svg {
  width: 60%; height: 60%; opacity: .65;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.4));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.pdp-main-image:hover .pdp-main-image-content svg {
  transform: scale(1.06) rotate(3deg);
}

/* Zoom lens hint */
.pdp-zoom-hint {
  position: absolute; bottom: 14px; right: 14px; z-index: 5;
  background: rgba(251,246,236,.15); border: 1px solid rgba(251,246,236,.3);
  color: rgba(251,246,236,.7);
  font-size: 9px; text-transform: uppercase; letter-spacing: .3em;
  padding: 5px 10px;
  pointer-events: none;
}

/* Image badge overlay */
.pdp-img-badge {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  background: var(--maroon); color: var(--ivory);
  font-size: 9px; text-transform: uppercase; letter-spacing: .25em;
  padding: 5px 12px;
}

/* Gurmukhi watermark */
.pdp-gurmukhi-overlay {
  position: absolute; bottom: 20px; left: 20px; z-index: 5;
  font-family: 'Yatra One', system-ui; font-size: 28px;
  color: rgba(251,246,236,.35);
  pointer-events: none;
}

/* Thumbnails */
.pdp-thumbs {
  display: flex; gap: 0;
  background: #140809;
  border-top: 1px solid rgba(212,160,23,.2);
  overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }

.pdp-thumb {
  flex-shrink: 0; width: 80px; height: 80px;
  cursor: pointer; position: relative; overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .2s;
  display: flex; align-items: center; justify-content: center;
}
.pdp-thumb:hover { border-color: rgba(212,160,23,.5); }
.pdp-thumb.active { border-color: var(--gold); }
.pdp-thumb-bg {
  position: absolute; inset: 0;
  transition: transform .3s ease;
}
.pdp-thumb:hover .pdp-thumb-bg { transform: scale(1.1); }
.pdp-thumb svg {
  position: relative; z-index: 2; width: 55%; height: 55%; opacity: .7;
}
.pdp-thumb-label {
  position: absolute; bottom: 4px; left: 0; right: 0;
  font-size: 8px; text-align: center; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .1em;
}

/* ---- RIGHT: Product info ---- */
.pdp-info {
  padding: 44px 44px 60px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 0;
}

.pdp-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4em;
  color: var(--saffron); margin-bottom: 10px;
}

.pdp-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 42px);
  color: var(--maroon); line-height: 1.1; font-weight: 500;
}

.pdp-rating-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
}
.pdp-stars { display: flex; gap: 2px; }
.pdp-stars svg { color: var(--gold); }
.pdp-rating-text { font-size: 12px; color: var(--muted); }
.pdp-reviews-link {
  font-size: 12px; color: var(--saffron); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

.pdp-price-row {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 20px; padding: 20px 0;
  border-top: 1px solid rgba(212,160,23,.2);
  border-bottom: 1px solid rgba(212,160,23,.2);
}
.pdp-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; color: var(--maroon); line-height: 1;
}
.pdp-price-old {
  font-size: 16px; color: var(--muted); text-decoration: line-through;
}
.pdp-price-save {
  font-size: 11px; background: rgba(31,77,74,.12);
  color: var(--peacock); padding: 3px 10px;
  text-transform: uppercase; letter-spacing: .2em;
}
.pdp-tax-note {
  font-size: 11px; color: var(--muted); margin-top: 6px;
}

/* Description */
.pdp-desc {
  margin-top: 22px; font-size: 14px; color: var(--ink);
  line-height: 1.75;
}

/* Divider */
.pdp-divider {
  height: 1px; background: rgba(212,160,23,.2);
  margin: 22px 0;
}

/* Section label */
.pdp-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .3em;
  color: var(--muted); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.pdp-section-label a {
  color: var(--saffron); font-size: 10px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Size selector ---- */
.pdp-sizes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pdp-size-btn {
  min-width: 52px; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: inherit; font-size: 12px;
  color: var(--ink); cursor: pointer;
  transition: all .2s; position: relative;
  text-transform: uppercase; letter-spacing: .1em;
}
.pdp-size-btn:hover { border-color: var(--maroon); color: var(--maroon); }
.pdp-size-btn.active {
  border-color: var(--maroon); background: var(--maroon); color: var(--ivory);
}
.pdp-size-btn.sold-out {
  opacity: .4; cursor: not-allowed;
}
.pdp-size-btn.sold-out::after {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--muted);
  transform: rotate(-20deg);
}

/* Custom size btn */
.pdp-custom-size-btn {
  height: 44px; padding: 0 16px;
  border: 1.5px dashed var(--gold); background: transparent;
  font-family: inherit; font-size: 11px; letter-spacing: .2em;
  color: var(--gold); cursor: pointer; text-transform: uppercase;
  transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.pdp-custom-size-btn:hover {
  background: rgba(212,160,23,.08); border-color: var(--saffron); color: var(--saffron);
}

/* ---- Size chart modal ---- */
.pdp-size-chart-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14,6,8,.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.pdp-size-chart-overlay.open { opacity: 1; pointer-events: all; }

.pdp-size-chart-modal {
  background: var(--ivory); width: 100%; max-width: 700px;
  max-height: 85vh; overflow-y: auto;
  padding: 40px;
  transform: translateY(30px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  scrollbar-width: thin;
}
.pdp-size-chart-overlay.open .pdp-size-chart-modal {
  transform: translateY(0);
}
.pdp-size-chart-modal h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; color: var(--maroon); margin-bottom: 8px;
}
.pdp-size-chart-modal p {
  font-size: 13px; color: var(--muted); margin-bottom: 28px;
}

.size-chart-table {
  width: 100%; border-collapse: collapse;
}
.size-chart-table th {
  background: var(--maroon); color: var(--ivory);
  font-size: 11px; text-transform: uppercase; letter-spacing: .2em;
  padding: 12px 16px; text-align: left; font-weight: 500;
}
.size-chart-table td {
  padding: 11px 16px; font-size: 13px;
  border-bottom: 1px solid rgba(212,160,23,.2);
  color: var(--ink);
}
.size-chart-table tr:nth-child(even) td { background: rgba(212,160,23,.05); }
.size-chart-table tr:hover td { background: rgba(212,160,23,.1); }
.size-chart-note {
  margin-top: 20px; padding: 16px;
  background: rgba(122,19,48,.06); border-left: 3px solid var(--maroon);
  font-size: 12px; color: var(--muted); line-height: 1.7;
}

/* ---- Custom size form ---- */
.pdp-custom-size-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14,6,8,.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.pdp-custom-size-overlay.open { opacity: 1; pointer-events: all; }

.pdp-custom-size-modal {
  background: var(--ivory); width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
  padding: 44px;
  transform: translateY(30px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  scrollbar-width: thin;
}
.pdp-custom-size-overlay.open .pdp-custom-size-modal {
  transform: translateY(0);
}
.pdp-custom-size-modal h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; color: var(--maroon); margin-bottom: 6px;
}
.pdp-custom-size-modal > p {
  font-size: 13px; color: var(--muted); margin-bottom: 28px; line-height: 1.6;
}

.measure-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 20px;
}
.measure-field label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .3em; color: var(--muted); margin-bottom: 6px;
}
.measure-field input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: inherit; font-size: 14px; color: var(--ink);
  outline: none; transition: border-color .2s;
}
.measure-field input:focus { border-color: var(--maroon); }
.measure-field .unit-hint {
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.measure-notes {
  width: 100%; min-height: 80px; padding: 12px 14px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: inherit; font-size: 13px; color: var(--ink);
  resize: vertical; outline: none; transition: border-color .2s;
  margin-bottom: 20px;
}
.measure-notes:focus { border-color: var(--maroon); }

.custom-size-submit {
  width: 100%; padding: 16px;
  background: var(--maroon); color: var(--ivory);
  border: none; font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: .3em;
  cursor: pointer; transition: background .2s;
}
.custom-size-submit:hover { background: var(--maroon-deep); }

.custom-size-success {
  text-align: center; padding: 20px 0; display: none;
}
.custom-size-success svg { color: var(--peacock); margin-bottom: 12px; }
.custom-size-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; color: var(--maroon); margin-bottom: 8px;
}
.custom-size-success p { font-size: 13px; color: var(--muted); }

/* ---- Colour variants ---- */
.pdp-colours {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pdp-colour-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform .2s, border-color .2s;
  position: relative;
}
.pdp-colour-swatch:hover { transform: scale(1.18); }
.pdp-colour-swatch.active { border-color: var(--maroon); transform: scale(1.1); }
.pdp-colour-swatch::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: var(--ivory);
  font-size: 9px; text-transform: uppercase; letter-spacing: .15em;
  padding: 3px 8px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.pdp-colour-swatch:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---- Add-Ons ---- */
.pdp-addons-section {
  margin-top: 0;
}

.pdp-addon-categories {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1.5px solid rgba(212,160,23,.25);
  margin-bottom: 16px;
}
.pdp-addon-categories::-webkit-scrollbar { display: none; }
.pdp-addon-cat-tab {
  padding: 9px 18px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .2em; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1.5px;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit; transition: color .2s, border-color .2s;
}
.pdp-addon-cat-tab:hover { color: var(--maroon); }
.pdp-addon-cat-tab.active { color: var(--maroon); border-bottom-color: var(--maroon); }

.pdp-addon-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.pdp-addon-item {
  border: 1.5px solid var(--border); background: #fff;
  padding: 14px; cursor: pointer;
  transition: all .2s; position: relative;
  display: flex; align-items: flex-start; gap: 12px;
}
.pdp-addon-item:hover { border-color: rgba(212,160,23,.5); }
.pdp-addon-item.selected {
  border-color: var(--maroon); background: rgba(122,19,48,.04);
}

.pdp-addon-item input[type=checkbox] {
  margin-top: 2px; accent-color: var(--maroon);
  width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
}
.pdp-addon-item-body { flex: 1; min-width: 0; }
.pdp-addon-item-name {
  font-size: 13px; color: var(--ink); line-height: 1.3; font-weight: 500;
}
.pdp-addon-item-desc {
  font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4;
}
.pdp-addon-item-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; color: var(--maroon); margin-top: 6px;
}
.pdp-addon-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--maroon); color: var(--ivory);
  display: none; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.pdp-addon-item.selected .pdp-addon-check { display: flex; }

.pdp-addon-total {
  margin-top: 14px; padding: 12px 16px;
  background: rgba(212,160,23,.07); border: 1px solid rgba(212,160,23,.25);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink);
}
.pdp-addon-total-price {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--maroon);
}

/* ---- Quantity ---- */
.pdp-quantity-row {
  display: flex; align-items: center; gap: 16px;
}
.pdp-qty {
  display: flex; align-items: center;
  border: 1.5px solid var(--border);
}
.pdp-qty-btn {
  width: 40px; height: 44px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted); font-family: inherit;
  transition: color .2s, background .2s;
  display: flex; align-items: center; justify-content: center;
}
.pdp-qty-btn:hover { color: var(--maroon); background: rgba(122,19,48,.05); }
.pdp-qty-val {
  width: 48px; text-align: center;
  font-size: 16px; color: var(--ink);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 44px; line-height: 44px;
  font-family: 'Cormorant Garamond', serif;
}

/* ---- CTA buttons ---- */
.pdp-cta-row {
  display: flex; flex-direction: column; gap: 12px; margin-top: 4px;
}
.pdp-btn-cart {
  width: 100%; padding: 18px;
  background: var(--maroon); color: var(--ivory);
  border: none; font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: .35em;
  cursor: pointer; position: relative; overflow: hidden;
  transition: background .2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.pdp-btn-cart::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);
  transform: translateX(-100%); transition: transform .5s;
}
.pdp-btn-cart:hover { background: var(--maroon-deep); }
.pdp-btn-cart:hover::before { transform: translateX(100%); }

.pdp-btn-wishlist {
  width: 100%; padding: 16px;
  background: transparent; color: var(--maroon);
  border: 1.5px solid var(--border); font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: .35em;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.pdp-btn-wishlist:hover { border-color: var(--maroon); background: rgba(122,19,48,.04); }
.pdp-btn-wishlist.saved { background: rgba(122,19,48,.08); border-color: var(--maroon); }

/* ---- Total summary bar ---- */
.pdp-order-summary {
  background: rgba(212,160,23,.07);
  border: 1px solid rgba(212,160,23,.3);
  padding: 16px 20px; margin: 4px 0 0;
}
.pdp-order-summary-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .3em;
  color: var(--muted); margin-bottom: 12px;
}
.pdp-order-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink); padding: 4px 0;
}
.pdp-order-line.total {
  border-top: 1px solid rgba(212,160,23,.3);
  margin-top: 8px; padding-top: 12px;
}
.pdp-order-line.total .label {
  font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--maroon);
}
.pdp-order-line.total .value {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--maroon);
}

/* ---- Features ---- */
.pdp-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
.pdp-feature {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; background: rgba(212,160,23,.04);
  border: 1px solid rgba(212,160,23,.2);
}
.pdp-feature svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.pdp-feature-text { font-size: 11px; color: var(--muted); line-height: 1.5; }
.pdp-feature-text strong { color: var(--ink); display: block; font-size: 12px; margin-bottom: 2px; }

/* ---- Toast ---- */
.pdp-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 400;
  background: var(--maroon); color: var(--ivory);
  padding: 14px 28px; font-size: 12px; text-transform: uppercase; letter-spacing: .25em;
  opacity: 0; transition: all .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none; white-space: nowrap;
}
.pdp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Animations ---- */
@keyframes pdp-fade-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.pdp-info > * { animation: pdp-fade-in .5s cubic-bezier(.2,.7,.2,1) both; }
.pdp-info > *:nth-child(1) { animation-delay: .05s; }
.pdp-info > *:nth-child(2) { animation-delay: .1s; }
.pdp-info > *:nth-child(3) { animation-delay: .15s; }
.pdp-info > *:nth-child(4) { animation-delay: .2s; }
.pdp-info > *:nth-child(5) { animation-delay: .25s; }

/* Ripple on add to cart */
@keyframes ripple-out {
  0% { transform: scale(0); opacity: .5; }
  100% { transform: scale(4); opacity: 0; }
}
.pdp-btn-cart .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.3);
  width: 60px; height: 60px; margin-left: -30px; margin-top: -30px;
  animation: ripple-out .6s ease-out forwards;
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .pdp-modal {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .pdp-gallery {
    position: relative; height: 420px;
  }
  .pdp-info { padding: 28px 20px 48px; }
  .pdp-addon-grid { grid-template-columns: 1fr; }
  .pdp-features { grid-template-columns: 1fr; }
  .measure-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pdp-overlay { padding: 0; }
  .pdp-modal { max-height: 100dvh; border-radius: 0; }
  .pdp-gallery { height: 320px; }
  .pdp-info { padding: 20px 16px 60px; }
  .pdp-title { font-size: 26px; }
  .pdp-size-chart-modal, .pdp-custom-size-modal { padding: 24px 18px; }
}