/* ═══════════════════════════════════════════
   DESIGN TOKENS — TYPOGRAPHY-REFINED
═══════════════════════════════════════════ */
:root {
  --ivory:       #faf8f4;
  --cream:       #f5f0e8;
  --parchment:   #ede5d8;
  --gold:        #b8924a;
  --gold-lt:     #d4ac6a;
  --gold-pale:   #f0e6cf;
  --charcoal:    #1a1612;
  --ink:         #2d2820;
  --smoke:       #6b6258;
  --ash:         #a09488;
  --blush:       #e8c4bc;
  --rouge:       #c0524a;
  --s1: 0 2px 16px rgba(26,22,18,.05);
  --s2: 0 8px 40px rgba(26,22,18,.09);
  --s3: 0 20px 70px rgba(26,22,18,.13);
  --s4: 0 40px 120px rgba(26,22,18,.18);
  --ease: cubic-bezier(.22,1,.36,1);
  --t: .55s var(--ease);
  --f-display: 'Playfair Display', 'Cormorant', Georgia, 'Times New Roman', serif;
  --f-serif: 'Cormorant', Georgia, 'Times New Roman', serif;
  --f-sans:  'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-cap:   'Cinzel', 'Times New Roman', serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  background: var(--ivory); color: var(--ink);
  font-family: var(--f-sans); font-weight: 300;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  line-height: 1.7;
  width: 100%;
  max-width: 100vw;
}
img { display:block; max-width:100%; height: auto; }
button { font-family: var(--f-sans); cursor:pointer; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }

/* ═══ REVEAL ═══ */
.r { opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.r.in { opacity:1; transform:translateY(0); }
.r.d1 { transition-delay:.1s; } .r.d2 { transition-delay:.2s; } .r.d3 { transition-delay:.3s; } .r.d4 { transition-delay:.4s; }

/* ═══ UTILITIES ═══ */
.cap { font-family: var(--f-cap); font-size: clamp(9px, 1.2vw, 15px); letter-spacing: 5px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.wrap { max-width:1280px; margin:0 auto; padding:0 clamp(16px, 4vw, 48px); width: 100%; }

/* ═══ PRODUCT HERO ═══ */
.hero { padding: clamp(20px, 4vw, 40px) 0 clamp(40px, 8vw, 90px); }
.hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap: clamp(24px, 6vw, 72px); align-items:start; }
.main-img-frame {
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:4/5; background:var(--cream); box-shadow:var(--s4); cursor:none;
  width: 100%;
}
.main-img-frame img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1; z-index:2;
  transition:opacity .4s ease, transform 1.1s var(--ease);
}
.main-img-frame:hover img { transform:scale(1.045); }
.gc {
  position:absolute; z-index:10; pointer-events:none;
  width:clamp(44px, 6vw, 72px); height:clamp(44px, 6vw, 72px); border-radius:50%;
  background:rgba(250,248,244,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-cap); font-size:clamp(7px, 0.8vw, 9px); letter-spacing:3px; color:var(--ink); font-weight: 500;
  box-shadow:0 6px 24px rgba(26,22,18,.18);
  opacity:0; transform:translate(-50%,-50%) scale(.5);
  transition:opacity .35s ease, transform .35s var(--ease); top:50%; left:50%;
}
.main-img-frame:hover .gc { opacity:1; transform:translate(-50%,-50%) scale(1); }
.sale-badge {
  position:absolute; top:clamp(10px, 1.8vw, 20px); left:clamp(10px, 1.8vw, 20px); z-index:6;
  background:var(--rouge); color:#fff; font-family:var(--f-cap);
  font-size:clamp(7px, 0.8vw, 9px); letter-spacing:3px; padding:clamp(5px, 1vw, 7px) clamp(10px, 1.5vw, 14px); border-radius:1px; font-weight: 500;
}
.thumb-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(5px, 1vw, 10px); margin-top:clamp(8px, 1.2vw, 14px); }
.thumb {
  aspect-ratio:1/1; border-radius:2px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; transition:var(--t); background:var(--cream);
}
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.thumb:hover { transform:translateY(-3px); box-shadow:var(--s2); }
.thumb:hover img { transform:scale(1.1); }
.thumb.on { border-color:var(--gold); }

/* ═══ DETAILS ═══ */
.detail-col { padding-top:6px; display:flex; flex-direction:column; gap:0; width: 100%; }
.detail-eyebrow { font-family:var(--f-cap); font-size:clamp(8px, 1vw, 15px); letter-spacing:5px; color:var(--gold); margin-bottom:14px; font-weight: 500; }
.detail-name {
  font-family: 'Poppins', 'Open Sans', sans-serif;
  font-size: clamp(28px, 5vw, 50px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.5px;
  color: var(--charcoal);
  margin-bottom: 10px;
  word-break: break-word;
}
.detail-tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 400;
  color: var(--smoke);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.fine-rule { height:1px; background:linear-gradient(90deg, var(--parchment) 0%, transparent 80%); margin-bottom:clamp(14px, 2vw, 24px); }
.rating-row { display:flex; align-items:center; gap:10px; margin-bottom:clamp(14px, 2vw, 22px); flex-wrap: wrap; }
.stars-static { color:var(--gold); font-size:clamp(16px, 2vw, 25px); letter-spacing:3px; }
.rating-count { font-size:clamp(11px, 1.2vw, 15px); color:var(--ash); letter-spacing:1.5px; font-weight: 400; }

.price-row { display:flex; align-items:baseline; gap:clamp(8px, 1.2vw, 14px); margin-bottom:clamp(12px, 1.8vw, 20px); flex-wrap: wrap; }

.price-old { font-size:clamp(14px, 1.5vw, 17px); text-decoration:line-through; color:var(--ash); font-weight: 300; letter-spacing: 0.5px; }
.price-new {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  color: var(--rouge);
  line-height: 1;
  letter-spacing: -0.5px;
}
.price-save { font-size:clamp(9px, 1vw, 11px); font-weight:600; letter-spacing:2px; background:rgba(192,82,74,.09); color:var(--rouge); padding:4px 10px; border-radius:1px; font-family: var(--f-sans); }
.perf-row { display:flex; flex-wrap:wrap; gap:clamp(5px, 0.8vw, 8px); margin-bottom:clamp(14px, 2vw, 22px); }
.perf-pill {
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 2px;
  font-weight: 500;
  padding: clamp(5px, 0.6vw, 7px) clamp(10px, 1.2vw, 16px);
  border: 1px solid var(--parchment);
  border-radius: 100px;
  color: var(--smoke);
  background: var(--ivory);
  transition: var(--t);
  font-family: var(--f-sans);
  text-transform: uppercase;
}
.perf-pill:hover { border-color:var(--gold); color:var(--ink); }

.detail-desc {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 2.0;
  border-left: 2px solid var(--gold);
  padding-left: clamp(12px, 1.8vw, 20px);
  font-family: 'Poppins', 'Open Sans', sans-serif;
  font-style: italic;
  font-weight: 400;
  margin-bottom: clamp(16px, 2.5vw, 26px);
  letter-spacing: 0.2px;
  color: #000;
}

.qty-stock-row { display:flex; align-items:center; gap:clamp(8px, 1.2vw, 14px); margin-bottom:clamp(16px, 2.5vw, 24px); flex-wrap: wrap; }
.qty-wrap { display:flex; align-items:center; border:1px solid var(--parchment); border-radius:2px; overflow:hidden; }
.qty-btn { width:clamp(32px, 3.5vw, 40px); height:clamp(32px, 3.5vw, 40px); background:var(--ivory); border:none; font-size:clamp(14px, 1.6vw, 18px); color:var(--ink); transition:background .25s; display:flex; align-items:center; justify-content:center; font-family: var(--f-sans); font-weight: 400; }
.qty-btn:hover { background:var(--cream); }
.qty-val { width:clamp(40px, 4.5vw, 52px); height:clamp(32px, 3.5vw, 40px); border:none; border-left:1px solid var(--parchment); border-right:1px solid var(--parchment); text-align:center; font-family:var(--f-sans); font-size:clamp(12px, 1.3vw, 14px); background:white; outline:none; color:var(--ink); font-weight: 500; }
.stock-pill { font-size:clamp(9px, 1vw, 11px); font-weight:500; letter-spacing:1.5px; color:#3a6b44; background:rgba(58,107,68,.07); padding:clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px); border-radius:100px; font-family: var(--f-sans); white-space: nowrap; }
.stock-pill--out { color:#9e3d36; background:rgba(158,61,54,.1); }
.product-stock-alert {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 4px;
  background: rgba(158, 61, 54, 0.1);
  border: 1px solid rgba(158, 61, 54, 0.35);
  color: #7a2e28;
  font-family: var(--f-sans);
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.45;
}
.cta-row { display:flex; gap:clamp(8px, 1.2vw, 12px); flex-wrap:wrap; margin-bottom:clamp(18px, 2.5vw, 28px); }
.buy-now-form { flex:1; min-width:clamp(130px, 20vw, 180px); margin:0; display:flex; }
.buy-now-form .btn-buy { width:100%; cursor:pointer; }
a.btn-buy { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.btn-cart { flex:1; min-width:clamp(130px, 20vw, 180px); padding:clamp(12px, 1.5vw, 17px) clamp(20px, 3vw, 32px); background:var(--charcoal); color:white; border:none; border-radius:2px; font-family: 'Poppins', 'Open Sans', sans-serif; font-size:clamp(9px, 1vw, 15px); letter-spacing:2px; transition:var(--t); font-weight: 600; text-align: center; white-space: nowrap; }
.btn-cart:hover { background:var(--gold); box-shadow:0 14px 36px rgba(184,146,74,.35); transform:translateY(-3px); }
.btn-buy { flex:1; min-width:clamp(130px, 20vw, 180px); padding:clamp(12px, 1.5vw, 17px) clamp(20px, 3vw, 32px); background:transparent; color:var(--charcoal); border:1.5px solid var(--charcoal); border-radius:2px; font-family: 'Poppins', 'Open Sans', sans-serif; font-size:clamp(9px, 1vw, 15px); letter-spacing:4px; transition:var(--t); font-weight: 600; text-align: center; white-space: nowrap; }
.btn-buy:hover { background: #c1121f; color:white; transform:translateY(-3px); box-shadow:0 10px 28px rgba(26,22,18,.15); }
.mini-trust { display:flex; gap:clamp(10px, 1.8vw, 20px); flex-wrap:wrap; padding-top:clamp(14px, 2vw, 22px); border-top:1px solid var(--parchment); }
.mt-item { display:flex; align-items:center; gap:clamp(5px, 0.8vw, 8px); font-size:clamp(9px, 1vw, 11px); letter-spacing:1.5px; color:var(--smoke); font-weight: 400; }
.mt-icon { color:var(--gold); font-size:clamp(14px, 1.5vw, 16px); flex-shrink:0; }

/* ═══ PERFORMANCE ═══ */
.perf-section { padding:clamp(40px, 7vw, 90px) 0; background:var(--cream); }
.perf-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 80px); align-items:center; }
.perf-img img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; box-shadow:var(--s3); }
.perf-bars { display:flex; flex-direction:column; gap:clamp(16px, 2.5vw, 26px); margin-top:clamp(20px, 3vw, 36px); }
.bar-label { display:flex; justify-content:space-between; font-size:clamp(9px, 1vw, 11px); font-weight:500; letter-spacing:2.5px; color:var(--ink); text-transform:uppercase; font-family: var(--f-sans); margin-bottom:clamp(5px, 0.8vw, 9px); }
.bar-track { height:2px; background:var(--parchment); border-radius:2px; overflow:hidden; }
.bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg, var(--gold), var(--gold-lt)); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease); }

/* ═══════════════════════════════════════════
   REVIEWS CAROUSEL
═══════════════════════════════════════════ */
.reviews-section { padding:clamp(40px, 8vw, 100px) 0 clamp(40px, 6vw, 70px); background:var(--cream); }
.section-head { text-align:center; margin-bottom:clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-family: var(--f-display);
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin-top: 12px;
}
.section-head h2 em { font-style:italic; color:var(--gold); font-weight: 400; }

/* carousel wrapper */
.carousel-outer { position:relative; max-width:1280px; margin:0 auto; padding:0 clamp(28px, 5vw, 56px); }
.carousel-viewport {
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:12px 4px 20px;
}
.carousel-viewport::-webkit-scrollbar { display:none; }
.carousel-track {
  display:flex; gap:clamp(12px, 2vw, 24px);
  width:max-content;
  padding:0 calc(50vw - 640px + 56px);
}

/* review card */
.rev-card {
  flex:0 0 clamp(240px, 32vw, 380px);
  width:clamp(240px, 32vw, 380px);
  scroll-snap-align:start;
  background:var(--ivory); padding:clamp(18px, 2.8vw, 32px) clamp(16px, 2.5vw, 28px) clamp(18px, 2.5vw, 28px);
  border-radius:2px; border:1px solid var(--parchment);
  box-shadow:var(--s1); position:relative; overflow:hidden;
  transition:var(--t); display:flex; flex-direction:column;
}
.rev-card::before { content:''; position:absolute; inset:0; border:1px solid var(--gold); border-radius:2px; opacity:0; transition:opacity .4s; }
.rev-card:hover::before { opacity:1; }
.rev-card:hover { transform:translateY(-6px); box-shadow:var(--s3); }
.rev-q { position:absolute; top:clamp(8px, 1.2vw, 14px); right:clamp(10px, 1.5vw, 18px); font-family:var(--f-display); font-size:clamp(40px, 6vw, 80px); font-weight:300; color:rgba(184,146,74,.06); line-height:1; pointer-events:none; user-select:none; z-index:0; }

/* review image */
.rev-img-wrap {
  position:relative; z-index:1;
  width:100%; aspect-ratio:3/2;
  border-radius:3px; overflow:hidden;
  margin-bottom:clamp(10px, 1.5vw, 18px);
  background:var(--cream);
  border:1px solid var(--parchment);
  transition:var(--t);
}
.rev-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.rev-card:hover .rev-img-wrap img { transform:scale(1.06); }
.rev-img-wrap .img-placeholder {
  width:100%; height:100%; display:flex;
  align-items:center; justify-content:center;
  font-size:clamp(22px, 3vw, 36px); color:rgba(184,146,74,.15);
  background:var(--cream);
}
.rev-stars { position:relative; z-index:1; color:var(--gold); font-size:clamp(12px, 1.4vw, 25px); letter-spacing:2px; margin-bottom:clamp(6px, 1vw, 10px); }
.rev-body {
  position:relative; z-index:1;
  font-family: 'Poppins', 'Open Sans', sans-serif;
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.9;
  color: var(--smoke);
  margin-bottom: clamp(10px, 1.6vw, 18px);
  flex: 1;
  font-weight: 400;
  letter-spacing: 0.15px;
}
.rev-footer { position:relative; z-index:1; display:flex; align-items:center; gap:clamp(8px, 1vw, 12px); margin-top:auto; flex-wrap: wrap; }
.rev-av { width:clamp(28px, 3.2vw, 38px); height:clamp(28px, 3.2vw, 38px); border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--gold), var(--gold-lt)); display:flex; align-items:center; justify-content:center; font-family:var(--f-cap); font-size:clamp(8px, 1vw, 11px); color:white; font-weight: 500; letter-spacing: 1px; }
.rev-name { font-size:clamp(11px, 1.1vw, 13px); font-weight:500; color:var(--charcoal); letter-spacing:.5px; font-family: var(--f-sans); }
.rev-meta { font-size:clamp(9px, 0.9vw, 13px); color:var(--ash); letter-spacing:1.5px; margin-top:2px; font-family: var(--f-sans); font-weight: 400; }

/* carousel arrows */
.carousel-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(30px, 4vw, 48px); height:clamp(30px, 4vw, 48px); border-radius:50%;
  background:var(--ivory); border:1px solid var(--parchment);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:20;
  box-shadow:var(--s2); transition:var(--t);
  color:var(--ink);
}
.carousel-arrow:hover { background:var(--gold); border-color:var(--gold); color:white; box-shadow:0 8px 28px rgba(184,146,74,.3); }
.carousel-arrow svg { width:clamp(12px, 1.5vw, 18px); height:clamp(12px, 1.5vw, 18px); stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.carousel-arrow.left { left:clamp(2px, 0.8vw, 8px); }
.carousel-arrow.right { right:clamp(2px, 0.8vw, 8px); }

/* carousel dots */
.carousel-dots { display:flex; justify-content:center; gap:clamp(6px, 1vw, 10px); margin-top:clamp(16px, 2.5vw, 28px); }
.carousel-dot {
  width:clamp(8px, 1vw, 10px); height:clamp(8px, 1vw, 10px); border-radius:50%;
  background:var(--parchment); border:none; cursor:pointer;
  transition:var(--t); padding:0;
}
.carousel-dot.active { background:var(--gold); transform:scale(1.35); }
.carousel-dot:hover { background:var(--gold-lt); }

/* ═══════════════════════════════════════════
   REVIEW FORM
═══════════════════════════════════════════ */
.form-wrap {
  background:var(--ivory); padding:clamp(24px, 5vw, 60px) clamp(16px, 4vw, 56px);
  border-radius:2px; border:1px solid var(--parchment);
  box-shadow:var(--s2); max-width:720px; margin:clamp(30px, 5vw, 60px) auto 0;
  width: 100%;
}
.form-eyebrow { display:block; margin-bottom:10px; font-size: clamp(9px, 1.2vw, 15px); }
.form-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.5vw, 45px);
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: clamp(24px, 3.5vw, 40px);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.fg { margin-bottom:clamp(14px, 2vw, 24px); }
.fg label {
  display:block;
  font-family: var(--f-sans);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: clamp(6px, 0.9vw, 10px);
  text-transform: uppercase;
}
.fg input, .fg textarea {
  width:100%; padding:clamp(10px, 1.4vw, 16px) clamp(12px, 1.8vw, 20px);
  border:1px solid var(--parchment);
  background:white; color:var(--ink);
  font-family: var(--f-sans); font-size:clamp(13px, 1.3vw, 15px); font-weight:400;
  border-radius:2px; outline:none;
  transition:border-color .3s, box-shadow .3s, background .3s;
  letter-spacing:.3px;
}
.fg input::placeholder, .fg textarea::placeholder {
  color:var(--ash); font-weight:300; font-size:clamp(12px, 1.2vw, 14px); letter-spacing:.3px; font-family: var(--f-sans);
}
.fg input:focus, .fg textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(184,146,74,.06);
  background:var(--ivory);
}
.fg textarea { resize:vertical; min-height:clamp(80px, 12vw, 130px); }

/* image upload */
.img-upload-wrap { display:flex; align-items:center; gap:clamp(8px, 1.2vw, 16px); flex-wrap:wrap; }
.img-upload-btn {
  display:inline-flex; align-items:center; gap:clamp(5px, 0.8vw, 10px);
  padding:clamp(8px, 1.2vw, 14px) clamp(14px, 2vw, 24px); border:1px solid var(--parchment);
  background:white; color:var(--ink);
  font-family:var(--f-sans); font-size:clamp(11px, 1.2vw, 13px); font-weight:400; letter-spacing:.8px;
  cursor:pointer; transition:var(--t); border-radius:2px;
}
.img-upload-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--ivory); }
.img-upload-btn svg { width:clamp(14px, 1.5vw, 18px); height:clamp(14px, 1.5vw, 18px); stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.img-preview-thumb {
  width:clamp(40px, 4.5vw, 56px); height:clamp(40px, 4.5vw, 56px); border-radius:3px; overflow:hidden;
  border:1px solid var(--parchment); background:var(--cream);
  display:none; flex-shrink:0;
}
.img-preview-thumb.show { display:block; }
.img-preview-thumb img { width:100%; height:100%; object-fit:cover; }
.img-remove-btn {
  display:none; background:none; border:none;
  color:var(--ash); cursor:pointer;
  font-size:clamp(10px, 1vw, 12px); letter-spacing:.8px;
  font-family:var(--f-sans); font-weight:400;
  transition:color .3s; padding:4px 8px;
}
.img-remove-btn.show { display:inline-block; }
.img-remove-btn:hover { color:var(--rouge); }
.img-hint { font-size:clamp(9px, 1vw, 11px); color:var(--ash); letter-spacing:.5px; font-family:var(--f-sans); font-weight:300; }

.star-row { display:flex; gap:clamp(4px, 0.8vw, 8px); }
.sbtn {
  background:none; border:none;
  font-size:clamp(24px, 3vw, 34px); color:var(--parchment);
  cursor:pointer; padding:0; line-height:1;
  transition:color .2s, transform .2s;
}
.sbtn.lit { color:var(--gold); }
.sbtn:hover { color:var(--gold); transform:scale(1.12); }
.submit-btn {
  width:100%; padding:clamp(14px, 1.8vw, 20px) 0; margin-top:clamp(4px, 0.8vw, 8px);
  background:var(--charcoal); color:white; border:none; border-radius:2px;
  font-family: 'Poppins', 'Open Sans', sans-serif; font-size:clamp(10px, 1.2vw, 15px); letter-spacing:2px; font-weight: 600;
  transition:var(--t);
}
.submit-btn:hover { background:var(--gold); transform:translateY(-2px); box-shadow:0 12px 28px rgba(184,146,74,.3); }

/* ═══════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════ */

/* Large tablets & small laptops */
@media (max-width: 1100px) {
  .hero-grid { gap: clamp(20px, 4vw, 40px); }
  .detail-name { font-size: clamp(26px, 4.5vw, 42px); }
  .section-head h2 { font-size: clamp(24px, 3.5vw, 38px); }
  .form-title { font-size: clamp(22px, 3vw, 32px); }
  .perf-inner { gap: clamp(24px, 4vw, 50px); }
}

/* Tablets */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px); }
  .detail-name { font-size: clamp(30px, 5vw, 46px); }
  .perf-inner { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .perf-img { order: -1; }
  .perf-img img { aspect-ratio: 16/9; max-height: 400px; object-fit: cover; }
  .carousel-outer { padding: 0 clamp(24px, 5vw, 40px); }
  .rev-card { flex: 0 0 clamp(260px, 45vw, 320px); width: clamp(260px, 45vw, 320px); }
  .form-wrap { padding: clamp(22px, 4vw, 40px) clamp(16px, 3vw, 28px); }
  .section-head h2 { font-size: clamp(24px, 4vw, 34px); }
  .form-title { font-size: clamp(22px, 3.5vw, 28px); }
  .detail-tagline { font-size: clamp(13px, 2vw, 17px); }
  .price-new { font-size: clamp(24px, 4vw, 36px); }
  .carousel-arrow { width: clamp(28px, 4vw, 40px); height: clamp(28px, 4vw, 40px); }
}

/* Mobile phones */
@media (max-width: 640px) {
  .hero { padding: 16px 0 40px; }
  .detail-name { font-size: clamp(24px, 6vw, 38px); }
  .detail-tagline { font-size: clamp(12px, 2.5vw, 17px); }
  .price-new { font-size: clamp(22px, 5vw, 36px); }
  .cta-row { flex-direction: column; }
  .btn-cart, .btn-buy { min-width: 100%; width: 100%; }
  .carousel-outer { padding: 0 clamp(16px, 4vw, 32px); }
  .rev-card { flex: 0 0 clamp(220px, 65vw, 280px); width: clamp(220px, 65vw, 280px); padding: clamp(14px, 3vw, 24px) clamp(12px, 2.5vw, 20px) clamp(14px, 2.5vw, 22px); }
  .rev-body { font-size: clamp(11px, 2.2vw, 15px); }
  .rev-stars { font-size: clamp(11px, 2.2vw, 16px); }
  .carousel-arrow { width: clamp(24px, 5vw, 34px); height: clamp(24px, 5vw, 34px); }
  .carousel-arrow svg { width: clamp(10px, 2vw, 14px); height: clamp(10px, 2vw, 14px); }
  .form-wrap { padding: clamp(18px, 4vw, 28px) clamp(12px, 3vw, 20px); }
  .section-head h2 { font-size: clamp(20px, 4.5vw, 28px); }
  .form-title { font-size: clamp(18px, 3.5vw, 26px); }
  .perf-section { padding: 40px 0; }
  .reviews-section { padding: 40px 0 50px; }
  .mini-trust { gap: 8px; }
  .mt-item { font-size: 10px; }
  .qty-stock-row { gap: 8px; }
  .perf-row { gap: 4px; }
  .perf-pill { font-size: 9px; padding: 4px 8px; }
  .thumb-rail { gap: 4px; }
  .main-img-frame { aspect-ratio: 4/4.5; }
}

/* Small mobile phones */
@media (max-width: 400px) {
  .detail-name { font-size: clamp(22px, 7vw, 32px); }
  .detail-tagline { font-size: 12px; }
  .price-new { font-size: 20px; }
  .price-old { font-size: 12px; }
  .price-save { font-size: 8px; }
  .detail-desc { font-size: 13px; }
  .rev-card { flex: 0 0 clamp(190px, 75vw, 240px); width: clamp(190px, 75vw, 240px); }
  .rev-body { font-size: 11px; line-height: 1.7; }
  .rev-stars { font-size: 10px; }
  .rev-q { font-size: 32px; }
  .btn-cart, .btn-buy { font-size: 8px; letter-spacing: 1px; padding: 10px 16px; }
  .carousel-arrow { width: 22px; height: 22px; }
  .carousel-arrow svg { width: 10px; height: 10px; }
  .carousel-dot { width: 6px; height: 6px; }
  .fg input, .fg textarea { font-size: 12px; padding: 10px 12px; }
  .submit-btn { font-size: 9px; }
  .section-head h2 { font-size: 18px; }
  .form-title { font-size: 16px; }
  .cap { font-size: 8px; letter-spacing: 3px; }
  .detail-eyebrow { font-size: 7px; letter-spacing: 3px; }
  .gc { width: 34px; height: 34px; font-size: 6px; }
  .sale-badge { font-size: 6px; padding: 4px 8px; top: 6px; left: 6px; }
  .qty-btn { width: 28px; height: 28px; font-size: 12px; }
  .qty-val { width: 34px; height: 28px; font-size: 11px; }
  .stock-pill { font-size: 8px; }
  .perf-pill { font-size: 8px; padding: 3px 6px; letter-spacing: 1px; }
  .mt-item { font-size: 9px; gap: 4px; }
  .mt-icon { font-size: 12px; }
  .mini-trust { gap: 6px; }
  .rating-count { font-size: 10px; }
  .stars-static { font-size: 14px; }
  .perf-img img { max-height: 250px; }
}

/* Very small devices */
@media (max-width: 320px) {
  .detail-name { font-size: 20px; }
  .price-new { font-size: 18px; }
  .rev-card { flex: 0 0 170px; width: 170px; padding: 10px 8px; }
  .rev-body { font-size: 10px; }
  .rev-stars { font-size: 9px; letter-spacing: 1px; }
  .btn-cart, .btn-buy { font-size: 7px; padding: 8px 12px; min-width: 100%; }
  .thumb-rail { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .carousel-arrow { width: 20px; height: 20px; }
  .carousel-arrow.left { left: 0; }
  .carousel-arrow.right { right: 0; }
}

/* Landscape mobile */
@media (max-width: 850px) and (orientation: landscape) {
  .hero { padding: 10px 0 30px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .detail-name { font-size: 24px; }
  .detail-tagline { font-size: 13px; }
  .price-new { font-size: 22px; }
  .perf-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .perf-img { order: 0; }
}

/* Large desktop screens */
@media (min-width: 1600px) {
  .wrap { max-width: 1400px; }
  .hero-grid { gap: 90px; }
  .detail-name { font-size: 56px; }
  .carousel-outer { max-width: 1400px; }
  .rev-card { flex: 0 0 420px; width: 420px; }
}

/* Ultra-wide screens */
@media (min-width: 2000px) {
  .wrap { max-width: 1600px; }
  .hero-grid { gap: 100px; }
}

/* ═══════ RELATED PRODUCTS (home-style cards) ═══════ */
.related-products-section {
  padding: clamp(50px, 8vw, 90px) 0 clamp(70px, 10vw, 110px);
  background: var(--ivory, #faf8f4);
  border-top: 1px solid var(--parchment, #e8e4dc);
}
.related-products-section .carousel-wrapper {
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  width: 100%;
  max-width: 100vw;
  touch-action: pan-y;
}
.related-products-section .carousel-wrapper:active,
.related-products-section .carousel-wrapper.dragging {
  cursor: grabbing;
}
.related-products-section .carousel-track {
  display: flex;
  gap: clamp(12px, 2vw, 25px);
  padding: 0 clamp(14px, 4vw, 40px);
  width: max-content;
  transition: none;
  will-change: transform;
}
.related-products-section .carousel-track.smooth-return {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.related-products-section .product-card {
  position: relative;
  background: transparent;
  width: clamp(240px, 28vw, 320px);
  flex-shrink: 0;
  max-width: 80vw;
  cursor: pointer;
}
.related-products-section .image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
  background-color: #fff;
  border-radius: 2px;
}
.related-products-section .image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  display: block;
}
.related-products-section .img-hover {
  transform: translateX(-100%);
}
.related-products-section .product-card:hover .img-main {
  transform: translateX(100%);
}
.related-products-section .product-card:hover .img-hover {
  transform: translateX(0);
}
.related-products-section .badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(230, 57, 70, 0.95);
  color: white;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  z-index: 5;
  border-radius: 1px;
  font-family: var(--f-sans, 'Inter', sans-serif);
  white-space: nowrap;
}
.related-products-section .badge-bundle {
  background: rgba(176, 141, 87, 0.95);
}
.related-products-section .view-more-circle {
  position: absolute;
  width: clamp(60px, 7vw, 90px);
  height: clamp(60px, 7vw, 90px);
  background: rgba(26, 26, 26, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: clamp(7px, 0.8vw, 9px);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) translate(-50%, -50%);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  font-family: var(--f-sans, 'Inter', sans-serif);
  left: 0;
  top: 0;
}
.related-products-section .product-card:hover .view-more-circle {
  opacity: 1;
  transform: scale(1) translate(-50%, -50%);
}
.related-products-section .info {
  padding: clamp(12px, 1.8vw, 20px) 0;
  border-top: 1px solid #e0e0e0;
  margin-top: clamp(8px, 1.2vw, 15px);
}
.related-products-section .title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.related-products-section .prices {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.related-products-section .old-price {
  text-decoration: line-through;
  color: #757575;
  font-size: clamp(11px, 1.1vw, 13px);
}
.related-products-section .quantity {
  font-size: 11px;
  color: var(--charcoal, #1a1714);
  opacity: 0.8;
  margin-bottom: 12px;
  font-family: var(--f-sans, 'Inter', sans-serif);
}
.related-products-section .add-to-cart-btn {
  width: 100%;
  padding: clamp(10px, 1.2vw, 12px) 0;
  background: transparent;
  border: 1px solid #d4d0c9;
  color: var(--charcoal, #1a1714);
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: clamp(9px, 0.9vw, 11px);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.related-products-section .add-to-cart-btn:hover {
  background: var(--charcoal, #1a1714);
  color: #fff;
  border-color: var(--charcoal, #1a1714);
}
@media (hover: none) {
  .related-products-section .view-more-circle {
    display: none !important;
  }
}