/* ============================================================
   KUMUD FINE JEWELLERY "" style.css
   ============================================================ */

:root {
  /* -- KUMUD BRAND COLORS -- */
  /* Midnight Navy (dominant) */
  --teal:        #0A1628;
  --teal-deep:   #061020;
  --teal-dark:   #030810;
  --teal-light:  #EBF2FA;
  --teal-dim:    rgba(10,22,40,0.18);

  /* Royal Blue (accent) */
  --pink:        #1A5FAD;
  --pink-deep:   #0D4A94;
  --pink-light:  #E8F0FA;
  --pink-dim:    rgba(26,95,173,0.15);

  /* Keep --gold aliased to blue so all existing code still works */
  --gold:        #1A5FAD;
  --gold-deep:   #0D4A94;
  --gold-light:  #E8F0FA;
  --gold-dim:    rgba(26,95,173,0.15);

  /* -- NEUTRALS -- */
  --cream:       #FAFAF7;
  --cream-2:     #F5F1E8;
  --cream-3:     #E8E1D0;
  --white:       #FFFFFF;
  --text:        #1C1714;
  --text-mid:    #5C5048;
  --text-light:  #9E9088;

  --serif: 'Cormorant Garant', Georgia, serif;
  --sans:  'DM Sans', sans-serif;
  --tr: 0.35s cubic-bezier(0.4,0,0.2,1);
  --shadow:       0 4px 32px rgba(28,23,20,0.07);
  --shadow-hover: 0 16px 52px rgba(28,23,20,0.12);
  --ink:          #0A1628;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* IMPORTANT: overflow-x must be 'clip' NOT 'hidden' on html/body.
   overflow-x:hidden creates a scroll container which breaks position:sticky (filter sidebar)
   and position:fixed (navbar). clip clips without creating a scroll container. */
html { scroll-behavior:auto; overflow-x:clip; }
body { font-family:var(--sans); background:var(--cream); color:var(--text); line-height:1.6; max-width:100vw; overflow-x:clip; }
a { text-decoration:none; color:inherit; cursor:pointer; }
button { cursor:pointer; font-family:var(--sans); border:none; outline:none; }
/* -- Global scrollbar "" hidden on mobile, styled on desktop -- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#f3ece4; border-radius:10px; }
::-webkit-scrollbar-thumb { background:var(--teal); border-radius:10px; border:2px solid #f3ece4; }
::-webkit-scrollbar-thumb:hover { background:var(--teal-deep); }
* { scrollbar-width:thin; scrollbar-color:var(--teal) #f3ece4; }
@media (max-width:860px) {
  ::-webkit-scrollbar { display:none; width:0; height:0; }
  * { scrollbar-width:none; -ms-overflow-style:none; }
}

.page { display:none; }
.page.active { display:block; }

/* -- PRELOADER -- */
/* -- PRELOADER SPLIT SCREEN -- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  overflow: hidden; pointer-events: all;
  background: #fff;
}
.pre-left, .pre-right {
  position: absolute; top: 0; height: 100%; width: 50%;
  background: var(--white);
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 1;
}
.pre-left  { left: 0; }
.pre-right { right: 0; }
.pre-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
}
/* Split animation */
#preloader.split .pre-left  { transform: translateX(-100%); }
#preloader.split .pre-right { transform: translateX(100%); }
#preloader.split .pre-center {
  opacity: 0;
  transform: translate(-50%, -52%) scale(0.92);
}
#preloader.gone { display: none; }

.pre-logo { font-family:var(--serif); font-size:42px; font-weight:300; letter-spacing:14px; color:var(--teal); animation:pre-pulse 1.6s ease-in-out infinite; }
.pre-tagline { font-size:9px; letter-spacing:5px; text-transform:uppercase; color:var(--text-light); margin-top:8px; }
.pre-bar { width:120px; height:1px; background:var(--cream-3); margin-top:28px; overflow:hidden; }
.pre-bar-inner { height:100%; width:0; background:var(--teal); animation:pre-load 1.9s ease forwards; }
@keyframes pre-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes pre-load { to{width:100%} }

/* -- PAGE TRANSITION LOADER -- */
@keyframes pg-fadein { from{opacity:0} to{opacity:1} }
.page.active { animation: pg-fadein 0.18s ease forwards; }

/* prod-vis-card image hover zoom */
#prod-vis-card:hover #prod-vis-img {
  transform: scale(1.06);
}

/* -- BACK TOP -- */
#back-top { position:fixed; bottom:30px; left:30px; z-index:999; width:40px; height:40px; border-radius:50%; background:var(--gold); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:all var(--tr); box-shadow:0 4px 18px rgba(26,95,173,0.35); }
#back-top.visible { opacity:1; visibility:visible; }
#back-top:hover { background:var(--gold-deep); transform:translateY(-3px); }
#back-top svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2; }

/* -- TOAST -- */
.toast { position:fixed; bottom:26px; right:26px; z-index:5000; background:var(--gold); color:#fff; padding:12px 18px; font-size:12px; letter-spacing:1px; display:flex; align-items:center; gap:10px; transform:translateY(60px); opacity:0; transition:all var(--tr); box-shadow:0 8px 32px rgba(26,95,173,0.35); }
.toast.show { transform:translateY(0); opacity:1; }
.toast-icon { width:13px; height:13px; stroke:#fff; fill:none; stroke-width:2.5; flex-shrink:0; }

/* -- MOBILE MENU -- */
.mobile-menu { position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; background:var(--white); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity var(--tr),visibility var(--tr); overflow-y:auto; overflow-x:hidden; }
.mobile-menu.open { opacity:1; visibility:visible; }
.mob-auth { padding:90px 20px 18px; background:var(--cream); border-bottom:1px solid var(--cream-3); flex-shrink:0; }
.mob-guest-row { display:flex; flex-direction:column; gap:10px; }
.mob-guest-hint { font-size:11px; color:var(--text-light); font-family:var(--sans); margin:0 0 2px; }
.mob-guest-btns { display:flex; gap:10px; }
.mob-signin-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; background:var(--teal); color:#fff; font-size:13px; font-weight:500; border:none; border-radius:8px; cursor:pointer; font-family:var(--sans); transition:background var(--tr); }
.mob-signin-btn:hover,.mob-signin-btn:active { background:var(--teal-deep); }
.mob-signin-btn svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.8; }
.mob-register-btn { flex:1; display:flex; align-items:center; justify-content:center; padding:12px 16px; background:transparent; color:var(--teal); font-size:13px; font-weight:500; border:1.5px solid var(--cream-3); border-radius:8px; cursor:pointer; font-family:var(--sans); transition:all var(--tr); }
.mob-register-btn:hover { border-color:var(--teal); background:var(--teal-light); }
.mob-user-row { display:flex; align-items:center; gap:12px; }
.mob-user-avatar { width:42px; height:42px; border-radius:50%; background:var(--teal); color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--sans); flex-shrink:0; letter-spacing:0; }
.mob-user-info { display:flex; flex-direction:column; gap:2px; }
.mob-user-name { font-size:15px; color:var(--text); font-weight:600; font-family:var(--sans); }
.mob-user-sub { font-size:11px; color:var(--text-light); font-family:var(--sans); }
.mob-link { display:flex; align-items:center; gap:14px; padding:15px 20px; font-family:var(--sans); font-size:19px; color:var(--text-mid); cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:color var(--tr),background var(--tr); border-bottom:0.5px solid var(--cream-3); }
.mob-link svg { width:18px; height:18px; stroke:var(--text-light); fill:none; stroke-width:1.5; flex-shrink:0; }
.mob-link:hover,.mob-link:active { color:var(--gold); background:var(--cream); }
.mob-badge { margin-left:auto; min-width:20px; height:20px; border-radius:10px; background:var(--teal); color:#fff; font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font-family:var(--sans); }
.mob-group-hdr { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; font-family:var(--sans); font-size:19px; color:var(--text-mid); background:none; border:none; border-bottom:0.5px solid var(--cream-3); width:100%; cursor:pointer; transition:color var(--tr),background var(--tr); }
.mob-group-hdr > span { display:flex; align-items:center; gap:14px; }
.mob-icon { width:18px; height:18px; stroke:var(--text-light); fill:none; stroke-width:1.5; }
.mob-chevron { width:16px; height:16px; stroke:var(--text-light); fill:none; stroke-width:2; transition:transform 0.3s ease; flex-shrink:0; }
.mob-group-hdr.open .mob-chevron { transform:rotate(180deg); }
.mob-group-hdr:hover,.mob-group-hdr:active { color:var(--gold); background:var(--cream); }
.mob-group-body { max-height:0; overflow:hidden; transition:max-height 0.35s ease; background:var(--cream-2); }
.mob-group-body.open { max-height:500px; }
.mob-group-body a { display:flex; align-items:center; padding:13px 20px 13px 52px; font-size:15px; color:var(--text-mid); font-family:var(--sans); border-bottom:0.5px solid var(--cream-3); cursor:pointer; transition:color var(--tr); letter-spacing:0.2px; }
.mob-group-body a:hover,.mob-group-body a:active { color:var(--gold); }
.mob-group-body a:last-child { border-bottom:none; }
.mob-logout-row { padding:16px 20px; border-top:1px solid var(--cream-3); }
.mob-logout-btn { width:100%; padding:11px; background:transparent; color:var(--text-light); font-size:12px; letter-spacing:2px; text-transform:uppercase; border:1px solid var(--cream-3); cursor:pointer; font-family:var(--sans); border-radius:6px; transition:all var(--tr); }
.mob-logout-btn:hover { border-color:var(--text-mid); color:var(--text-mid); }

/* -- NAV -- */
nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:#fafaf7; border-bottom:1px solid var(--cream-3); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:0 60px; height:80px; flex-wrap:nowrap; }
.nav-right { flex-shrink:0; }
.nav-logo { cursor:pointer; display:flex; align-items:center; }
.nav-logo img { height:72px; width:auto; display:block; }
.nav-links { display:flex; align-items:stretch; }
.nav-item { position:relative; }
.nav-link { display:flex; align-items:center; gap:5px; padding:0 18px; height:80px; font-size:17px; letter-spacing:0.5px; text-transform:capitalize; color:var(--text-mid); font-weight:400; cursor:pointer; transition:color var(--tr); white-space:nowrap; border:none; background:none; font-family:var(--sans); }
.nav-item:hover > .nav-link { color:var(--text); }
.arrow { width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--tr); }
.nav-item:hover .arrow { transform:rotate(180deg); }
.dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-10px); background:var(--white); border:1px solid var(--cream-3); box-shadow:0 16px 48px rgba(28,23,20,0.10); min-width:230px; opacity:0; visibility:hidden; transition:opacity var(--tr),visibility var(--tr),transform var(--tr); z-index:200; }
.nav-item:hover .dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dd-header { padding:12px 18px 9px; font-size:9px; letter-spacing:4px; text-transform:capitalize; color:var(--text-light); border-bottom:1px solid var(--cream-3); }
.dd-link { display:flex; align-items:center; gap:10px; padding:11px 18px; font-size:13px; color:var(--text-mid); font-family:var(--serif); border-bottom:1px solid var(--cream-3); transition:all var(--tr); cursor:pointer; }
.dd-link:last-child { border-bottom:none; }
.dd-link:hover { background:var(--teal-light); color:var(--teal); padding-left:24px; }
.dd-count { font-size:10px; color:var(--text-light); margin-left:auto; font-family:var(--sans); }
.dd-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dropdown-mega { min-width:460px; display:grid; grid-template-columns:1fr 1fr; }
.dropdown-mega .dd-header { grid-column:span 2; }
.dd-col { display:flex; flex-direction:column; border-right:1px solid var(--cream-3); }
.dd-col:last-child { border-right:none; }
.dd-col-label { padding:10px 18px 6px; font-size:9px; letter-spacing:3px; text-transform:capitalize; color:var(--text-light); }
.nav-right { display:flex; gap:14px; align-items:center; }
.nav-icon { background:none; border:none; cursor:pointer; padding:5px; position:relative; }
.nav-icon svg { width:22px; height:22px; stroke:var(--text-mid); fill:none; stroke-width:1.5; transition:stroke var(--tr); }
.nav-icon:hover svg { stroke:var(--text); }

/* -- AUTH PAGES (Login / Sign Up) -- */
.auth-page { min-height:100vh; display:flex; padding-top:70px; }
.auth-card {
  flex:0 0 480px; max-width:480px; width:100%;
  padding:60px 56px; display:flex; flex-direction:column;
  background:var(--white); border-right:1px solid var(--cream-3);
  overflow-y:auto;
}
.auth-visual {
  flex:1; background:linear-gradient(145deg,var(--gold-light) 0%,var(--cream) 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.auth-visual-inner { display:flex; flex-direction:column; align-items:center; gap:28px; padding:48px; position:relative; z-index:1; }
.auth-brand { font-family:var(--serif); font-size:22px; letter-spacing:6px; color:var(--gold); margin-bottom:20px; cursor:pointer; }
.auth-eyebrow { font-size:9px; letter-spacing:5px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.auth-eyebrow::before { content:''; display:block; width:20px; height:1px; background:var(--gold); }
.auth-title { font-family:var(--serif); font-size:clamp(24px,3vw,32px); font-weight:600; color:var(--text); line-height:1.15; margin-bottom:10px; }
.auth-title em { font-style:normal; color:var(--gold); }
.auth-sub { font-size:13px; color:var(--text-light); font-weight:300; line-height:1.7; margin-bottom:32px; }
.auth-form { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.auth-fields-row { display:flex; gap:12px; }
.auth-fields-row .auth-field { flex:1; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-mid); font-weight:500; }
.auth-input-wrap { position:relative; display:flex; align-items:center; }
.auth-input-wrap > svg { position:absolute; left:13px; width:14px; height:14px; stroke:var(--text-light); fill:none; stroke-width:1.5; pointer-events:none; }
.auth-input { width:100%; padding:12px 14px 12px 38px; font-size:13px; background:var(--cream); border:1px solid var(--cream-3); color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--tr),box-shadow var(--tr); border-radius:0; }
.auth-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(28,23,20,0.07); }
.auth-input::placeholder { color:var(--text-light); }
.auth-eye { position:absolute; right:12px; background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; }
.auth-eye svg { width:14px; height:14px; stroke:var(--text-light); fill:none; stroke-width:1.5; transition:stroke var(--tr); }
.auth-eye:hover svg { stroke:var(--gold); }
.auth-row { display:flex; align-items:center; justify-content:space-between; }
.auth-check { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-mid); cursor:pointer; }
.auth-check input { accent-color:var(--gold); width:13px; height:13px; }
.auth-terms { font-size:11px; line-height:1.6; }
.auth-forgot { background:none; border:none; font-size:11px; color:var(--gold); cursor:pointer; font-family:var(--sans); padding:0; letter-spacing:0.5px; }
.auth-forgot:hover { text-decoration:underline; }
.auth-btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 32px; font-size:10px; letter-spacing:3px; text-transform:uppercase;
  background:var(--gold); color:#fff; border:2px solid var(--gold);
  cursor:pointer; font-family:var(--sans); font-weight:500; transition:all var(--tr);
}
.auth-btn svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.5; }
.auth-btn:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); box-shadow:0 8px 28px rgba(26,95,173,0.30); }
.auth-btn-ghost {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 32px; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  background:transparent; color:var(--text-mid); border:1px solid var(--cream-3);
  cursor:pointer; font-family:var(--sans); transition:all var(--tr);
}
.auth-btn-ghost:hover { border-color:var(--gold-dim); background:var(--gold-light); color:var(--gold); }
.auth-divider { display:flex; align-items:center; gap:12px; color:var(--text-light); font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--cream-3); }
.auth-switch { font-size:12px; color:var(--text-light); text-align:center; margin-bottom:16px; }
.auth-switch button { background:none; border:none; color:var(--gold); font-size:12px; font-weight:500; cursor:pointer; font-family:var(--sans); margin-left:4px; padding:0; }
.auth-switch button:hover { text-decoration:underline; }
.auth-back { display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-light); font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; font-family:var(--sans); transition:color var(--tr); margin:0 auto; }
.auth-back svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.auth-back:hover { color:var(--gold); }

/* Auth visual side */
.auth-decor-ring {
  position:absolute; border-radius:50%; border:1px solid rgba(28,23,20,0.10);
  animation: dspin 28s linear infinite;
}
.auth-decor-ring:nth-child(1) { width:340px; height:340px; animation-duration:30s; }
.auth-decor-ring:nth-child(2) { width:240px; height:240px; animation-duration:22s; animation-direction:reverse; border-style:dashed; }
.auth-decor-ring:nth-child(3) { width:150px; height:150px; animation-duration:16s; }
.auth-gem { filter:drop-shadow(0 16px 48px rgba(27,58,107,0.2)); position:relative; z-index:1; }
.auth-visual-quote { font-family:var(--serif); font-size:16px; font-style:italic; color:var(--text-mid); text-align:center; max-width:260px; line-height:1.6; }
.auth-trust-row { display:flex; align-items:center; gap:20px; }
.auth-trust-item { display:flex; flex-direction:column; align-items:center; gap:3px; }
.auth-trust-num { font-family:var(--serif); font-size:20px; color:var(--gold); }
.auth-trust-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-light); }
.auth-trust-div { width:1px; height:28px; background:var(--cream-3); }
.auth-perks { display:flex; flex-direction:column; gap:10px; }
.auth-perk { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-mid); font-weight:300; }
.auth-perk svg { stroke:var(--gold); flex-shrink:0; }

/* Auth responsive */
@media (max-width:900px) {
  .auth-visual { display:none; }
  .auth-card { flex:1; max-width:100%; padding:48px 32px; border-right:none; }
}
@media (max-width:500px) {
  .auth-card { padding:36px 20px; }
  .auth-fields-row { flex-direction:column; }
}

/* Account dropdown */
.nav-account-wrap { display:flex; align-items:center; }
.account-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:170px; background:var(--white);
  border:1px solid var(--cream-3); border-radius:10px;
  box-shadow:0 16px 48px rgba(28,23,20,0.10);
  padding:8px; z-index:200;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--tr), transform var(--tr);
}
.account-dropdown.open { opacity:1; transform:translateY(0); pointer-events:all; }
.account-dropdown-header {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--text-light); padding:6px 10px 8px;
  border-bottom:1px solid var(--cream-3); margin-bottom:4px;
}
.account-dropdown-item {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 12px; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-mid);
  background:none; border:none; cursor:pointer; border-radius:6px;
  font-family:var(--sans); transition:all var(--tr);
  text-align:left;
}
.account-dropdown-item svg { stroke:var(--text-light); flex-shrink:0; transition:stroke var(--tr); }
.account-dropdown-item:hover { background:var(--gold-light); color:var(--gold); }
.account-dropdown-item:hover svg { stroke:var(--gold); }
.account-dropdown-name { font-size:11px; letter-spacing:1px; color:var(--text); padding:4px 12px 10px; font-weight:600; border-bottom:1px solid var(--cream-3); margin-bottom:4px; }
.auth-guest-btn { background:none; border:1px solid var(--cream-3); color:var(--text-mid); font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:10px 20px; cursor:pointer; font-family:var(--sans); transition:all var(--tr); width:100%; margin-top:6px; }
.auth-guest-btn:hover { border-color:var(--teal); color:var(--teal); }
.nav-badge { position:absolute; top:0; right:0; width:16px; height:16px; border-radius:50%; background:var(--teal); color:#fff; font-size:9px; font-weight:600; display:flex; align-items:center; justify-content:center; transform:translate(30%,-30%); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:1px; background:var(--text-mid); transition:all var(--tr); }
.hamburger.active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* -- BUTTONS -- */
.btn-primary { padding:15px 44px; font-size:10px; letter-spacing:3.5px; text-transform:uppercase; background:var(--text); color:#fff; font-weight:400; border:1px solid var(--text); transition:all var(--tr); display:inline-block; font-family:var(--sans); }
.btn-primary:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 32px rgba(26,95,173,0.30); }
.btn-outline { padding:15px 44px; font-size:10px; letter-spacing:3.5px; text-transform:uppercase; background:transparent; color:var(--btn-clr, var(--text)); border:1px solid var(--btn-clr, var(--cream-3)); font-weight:400; transition:all var(--tr); display:inline-block; font-family:var(--sans); }
.btn-outline:hover { border-color:var(--btn-clr, var(--gold)); color:var(--btn-clr, var(--gold)); transform:translateY(-2px); }
.btn-white { padding:15px 44px; font-size:10px; letter-spacing:3.5px; text-transform:uppercase; background:transparent; color:#fff; font-weight:400; border:1px solid rgba(255,255,255,0.5); transition:all var(--tr); display:inline-block; font-family:var(--sans); }
.btn-white:hover { background:#fff; color:var(--text); transform:translateY(-2px); }

/* -- SECTION COMMON -- */
.section-tag { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--pink); margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.section-tag::before { content:''; display:block; width:24px; height:1px; background:var(--teal); }
.section-title { font-family:var(--serif); font-size:clamp(34px,4vw,54px); font-weight:300; color:var(--text); line-height:1.12; letter-spacing:-0.3px; }
.section-title em { font-style:italic; font-weight:300; color:var(--pink); }
.sec-hdr { text-align:center; margin-bottom:28px; }
.sec-hdr .section-tag { justify-content:center; }
.sec-hdr .section-tag::before { display:none; }
.sec-desc { font-size:14px; color:var(--text-mid); margin-top:14px; max-width:500px; margin-inline:auto; line-height:1.9; font-weight:300; }

/* -- HERO -- */
.hero { min-height:100vh; display:flex; align-items:center; background:linear-gradient(135deg,var(--white) 0%,var(--cream) 60%,var(--gold-light) 100%); position:relative; overflow:hidden; padding-top:70px; }
.hero-pattern { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle at 72% 20%,rgba(10,22,40,0.04) 0%,transparent 40%),radial-gradient(circle at 14% 80%,rgba(10,22,40,0.03) 0%,transparent 30%); }
.hero-decor { position:absolute; right:6%; top:50%; transform:translateY(-50%); width:450px; height:450px; pointer-events:none; }
.decor-ring { position:absolute; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid var(--gold-dim); animation:dspin linear infinite; }
.decor-ring:nth-child(1) { width:430px; height:430px; animation-duration:30s; }
.decor-ring:nth-child(2) { width:305px; height:305px; animation-duration:22s; animation-direction:reverse; border-style:dashed; }
.decor-ring:nth-child(3) { width:178px; height:178px; animation-duration:16s; }
@keyframes dspin { to{transform:translate(-50%,-50%) rotate(360deg)} }
.hero-gem-c { position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); }
.hero-content { position:relative; z-index:2; padding:80px 60px; max-width:590px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--pink); margin-bottom:22px; }
.hero-eyebrow-line { width:32px; height:1px; background:var(--teal); }
h1.hero-title { font-family:var(--serif); font-size:clamp(50px,6.5vw,86px); font-weight:300; line-height:1.04; color:var(--text); margin-bottom:26px; letter-spacing:-0.5px; }
h1.hero-title em { font-style:italic; color:var(--pink); font-weight:300; }
.hero-desc { font-size:14px; line-height:2; color:var(--text-mid); font-weight:300; max-width:420px; margin-bottom:40px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:36px; margin-top:46px; flex-wrap:wrap; }
.trust-num { font-family:var(--serif); font-size:26px; color:#C8940A; line-height:1; }
.trust-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-light); margin-top:4px; }

/* -- MARQUEE "" DUAL ROW COUNTER-SCROLL -- */
.marquee-wrap { background:var(--text); overflow:hidden; position:relative; max-width:100%; }
.marquee-row { display:flex; width:max-content; overflow:hidden; }
.marquee-row-1 { animation:marqL 22s linear infinite; padding:14px 0 10px; }
.marquee-row-2 { animation:marqR 18s linear infinite; padding:10px 0 14px; }
.marquee-divider { height:1px; background:var(--gold); opacity:0.5; margin:0; }
.marquee-wrap:hover .marquee-row { animation-play-state:paused; }
@keyframes marqL { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqR { from{transform:translateX(-50%)} to{transform:translateX(0)} }
.marquee-item { display:flex; align-items:center; gap:0; white-space:nowrap; }
.marq-big { font-family:var(--serif); font-size:22px; font-style:italic; font-weight:300; color:#fff; padding:0 32px; letter-spacing:0.5px; }
.marq-sm { font-family:var(--sans); font-size:8px; letter-spacing:6px; text-transform:uppercase; color:rgba(255,255,255,.45); padding:0 28px; }
.msep { color:#C8940A; font-size:18px; font-style:italic; font-family:var(--serif); opacity:0.9; }
.msep-sm { color:#C8940A; font-size:9px; padding:0 4px; opacity:0.9; }

/* -- GEMSTONE TYPE STRIP -- */
.gem-strip-section { background: var(--cream-2); padding:0 0 36px; position: relative; overflow:hidden; }
.gem-strip-label { text-align:center; margin-bottom:12px; padding-top:16px; }
.gem-strip-label .section-tag { display:inline-block; }
.gem-strip-label h2 { font-family:var(--serif); font-size:clamp(24px,2.8vw,36px); font-weight:300; color:var(--text); margin:4px 0 0; }
.gem-strip-label h2 em { color:var(--pink); font-style:italic; }
.gem-strip-scroll { display:flex; justify-content:center; flex-wrap:nowrap; overflow-x:auto; gap:28px 40px; padding:8px 60px 20px; scrollbar-width:none; -ms-overflow-style:none; position:relative; min-height:140px; }
.gem-strip-scroll::-webkit-scrollbar { display:none; }

.gem-chip { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; transition:all 0.8s cubic-bezier(0.4,0,0.2,1); }
.gem-chip-circle { width:96px; height:96px; border-radius:50%; overflow:hidden; border:2.5px solid rgba(200,170,110,0.25); transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, width 0.8s cubic-bezier(0.4,0,0.2,1), height 0.8s cubic-bezier(0.4,0,0.2,1); box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.gem-chip:hover .gem-chip-circle { border-color:var(--gold); box-shadow:0 12px 32px rgba(0,0,0,0.18); }
.gem-chip:hover .gem-chip-circle-all { background:var(--gold); }
.gem-chip-img { width:100%; height:100%; object-fit:cover; display:block; }
.gem-chip-name { font-family:var(--sans); font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text); opacity:0.7; text-align:center; transition:color .25s, opacity .25s, font-size 0.8s ease; max-width:96px; line-height:1.4; }
.gem-chip:hover .gem-chip-name { color:var(--teal); opacity:1; }

/* Gem marquee (mobile/tablet auto-scroll) */
.gem-strip-scroll.is-marquee { overflow:hidden; justify-content:flex-start; padding-left:0; padding-right:0; }
.gem-marquee-inner { display:flex; gap:28px; animation:gemMarquee 18s linear infinite; }
.gem-strip-scroll.is-marquee:hover .gem-marquee-inner { animation-play-state:paused; }
@keyframes gemMarquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media(max-width:1100px) { .gem-marquee-inner { gap:20px; } }
@media(max-width:480px) { .gem-marquee-inner { gap:16px; } }

.gem-cta-btn { background:#E84C7A; border:1.5px solid #E84C7A; cursor:pointer; padding:16px 36px; display:inline-block; border-radius:3px; box-shadow:0 4px 18px rgba(232,76,122,0.30); transition:all var(--tr); }
.gem-cta-btn:hover { background:#D43A68; border-color:#D43A68; box-shadow:0 6px 24px rgba(232,76,122,0.45); transform:translateY(-2px); }
.gem-cta-btn .cta-prefix { font-family:var(--sans); font-size:13px; letter-spacing:2px; text-transform:uppercase; font-weight:500; color:#fff; transition:color var(--tr); }
.gem-cta-btn .cta-action { font-family:var(--sans); font-size:13px; letter-spacing:2px; text-transform:uppercase; font-weight:500; color:#fff; transition:color var(--tr); }

@media(max-width:1100px) { .gem-strip-scroll { gap:20px; padding:8px 24px 16px; } .gem-strip-scroll .gem-chip-circle { width:78px; height:78px; } .gem-strip-scroll .gem-chip-name { font-size:10px; max-width:78px; } }

@media(max-width:480px) {
  .gem-strip-section { padding:0 0 40px; }
  .gem-strip-label { margin-bottom:24px; padding-top:20px; }
  .gem-strip-scroll { gap:16px 4px; padding:6px 4px 10px; }
  .gem-strip-scroll .gem-chip-circle { width:68px; height:68px; }
  .gem-strip-scroll .gem-chip-name { max-width:68px; }
}
@media(max-width:600px) { .gem-cta-btn { padding:12px 20px; } .gem-cta-btn .cta-prefix, .gem-cta-btn .cta-action { font-size:11px; letter-spacing:1px; } }

/* -- HOME CATEGORIES -- */
.home-cats { padding:36px 60px; }
.home-cats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1200px; margin:0 auto; }
.hcc { background:var(--white); border:1px solid var(--cream-3); overflow:hidden; cursor:pointer; transition:all var(--tr); box-shadow:var(--shadow); }
.hcc:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.hcc-img { aspect-ratio:4/3; background:linear-gradient(145deg,var(--cream) 0%,var(--gold-light) 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hcc-img svg { transition:transform .6s ease; }
.hcc:hover .hcc-img svg { transform:scale(1.08); }
.hcc-info { padding:16px 18px 18px; border-top:1px solid var(--cream-3); }
.hcc-name { font-family:var(--serif); font-size:18px; color:var(--text); margin-bottom:3px; }
.hcc-sub { font-size:10px; letter-spacing:2px; color:var(--text-light); text-transform:uppercase; }

/* -- RADIAL JEWELLERY SHOWCASE -- */
.radial-section { padding:48px 60px 56px; background:var(--cream-2); overflow:hidden; }
.radial-inner { max-width:1200px; margin:0 auto; }
.radial-inner .sec-hdr { text-align:center; margin-bottom:12px; }
.radial-stage { position:relative; width:100%; display:flex; align-items:center; justify-content:center; padding:20px 0; }
.radial-ring { position:relative; width:740px; height:740px; animation:radialSpin 40s linear infinite; }
.radial-ring:hover { animation-play-state:paused; }
@keyframes radialSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.radial-item { position:absolute; top:50%; left:50%; width:150px; height:150px; cursor:pointer; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.radial-img-wrap { width:100%; height:100%; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#f5f0e8,#e8e0d4); border:3.5px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08); transition:box-shadow 0.3s ease, transform 0.3s ease; }
.radial-item:hover .radial-img-wrap { box-shadow:0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12); transform:scale(1.08); }
.radial-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.radial-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(120,100,80,0.25); font-size:18px; font-family:var(--sans); letter-spacing:2px; }
.radial-label { display:none; }
.radial-nav { display:none; }

.radial-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.radial-lightbox.open { opacity:1; pointer-events:auto; }
.radial-lightbox-img { max-width:85vw; max-height:80vh; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.5); transform:scale(0.9); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.radial-lightbox.open .radial-lightbox-img { transform:scale(1); }
.radial-lightbox-close { position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.15); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.radial-lightbox-close:hover { background:rgba(255,255,255,0.3); }
.radial-lightbox-close svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; }
.radial-lightbox-label { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:#fff; font-family:var(--sans); font-size:15px; letter-spacing:1px; text-shadow:0 2px 8px rgba(0,0,0,0.6); }

@media(max-width:860px) {
  .radial-section { padding:32px 20px 40px; }
  .radial-ring { width:520px; height:520px; }
  .radial-item { width:110px; height:110px; }
  .radial-img-wrap { border-radius:14px; border-width:3px; }
}
@media(max-width:480px) {
  .radial-ring { width:340px; height:340px; }
  .radial-item { width:75px; height:75px; }
  .radial-img-wrap { border-radius:10px; border-width:2px; }
}

/* -- HOME FEATURED -- */
.home-featured { padding:0 60px 60px; background:#fff; }
.home-featured-inner { max-width:1200px; margin:0 auto; padding-top:36px; }
.hfg { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* -- HOME REELS / VIDEO SECTION (coverflow carousel) -- */
.home-reels { padding:36px 60px; background:#fff; }
.home-reels-inner { max-width:1260px; margin:0 auto; overflow:visible; }
.home-reels .sec-hdr { text-align:center; margin-bottom:24px; }
.home-reels-icon { display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.home-reels-icon svg { width:36px; height:36px; stroke:var(--teal); fill:none; stroke-width:1.5; }
.home-reels-wrap { display:flex; align-items:center; gap:0; position:static; margin:0 -52px; }
.home-reels-clip { flex:1; overflow:hidden; perspective:1200px; }
.home-reels-track { position:relative; height:680px; width:100%; }
.reel-card { position:absolute; width:370px; height:658px; border-radius:14px; overflow:hidden; background:#1a1a1a; cursor:pointer; transition:transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.7s ease; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.reel-card::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background 0.6s ease; pointer-events:none; z-index:2; border-radius:14px; }
.reel-card.reel-fade-1::after { background:rgba(255,255,255,0.3); }
.reel-card.reel-fade-2::after { background:rgba(255,255,255,0.55); }
.reel-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.reel-card img { width:100%; height:100%; object-fit:cover; display:block; }
.reel-card-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%); }
.reel-card-bag { position:absolute; bottom:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.35); border:1.5px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s; }
.reel-card-bag:hover { background:rgba(255,255,255,0.35); }
.reel-card-bag svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.8; }
.reels-arrow { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--cream-3); box-shadow:0 4px 16px rgba(0,0,0,0.12); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:all 0.2s; }
.reels-arrow:hover { background:var(--teal); border-color:var(--teal); }
.reels-arrow:hover svg { stroke:#fff; }
.reels-arrow svg { width:16px; height:16px; stroke:var(--text); fill:none; stroke-width:2; }
.reels-dots { display:flex; justify-content:center; gap:6px; margin-top:24px; }
.reels-dot { width:8px; height:8px; border-radius:50%; background:var(--cream-3); cursor:pointer; transition:all 0.2s; }
.reels-dot.active { background:var(--teal); width:22px; border-radius:4px; }
@media(max-width:900px) {
  .home-reels { padding:36px 24px; }
  .home-reels-track { height:460px; }
  .reel-card { width:220px; height:390px; }
  .reels-arrow { display:none; }
  .home-reels-wrap { margin:0; }
}
@media(max-width:520px) {
  .home-reels-track { height:400px; }
  .reel-card { width:190px; height:338px; }
}


/* -- TESTIMONIALS -- */
.testimonials { padding:60px 60px; background:var(--cream-2); }
.testi-grid { display:flex; overflow-x:auto; gap:16px; max-width:1200px; margin:0 auto; padding:0 24px; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; background:none; border:none; }
.testi-grid::-webkit-scrollbar { display:none; }
.testi-card { flex:0 0 calc(33.333% - 12px); scroll-snap-align:center; padding:44px 36px; background:var(--white); border:1px solid var(--cream-3); border-radius:10px; transition:all var(--tr); }
.testi-card:hover { background:var(--cream); }
.testi-stars { color:#C8940A; font-size:12px; letter-spacing:5px; margin-bottom:20px; }
.testi-text { font-family:var(--serif); font-size:17px; font-style:italic; font-weight:300; color:var(--text); line-height:1.8; margin-bottom:24px; }
.testi-div { width:32px; height:1px; background:var(--gold-dim); margin-bottom:20px; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:38px; height:38px; border-radius:50%; background:var(--gold-light); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:13px; color:var(--gold); }
.testi-name { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text); font-weight:500; }
.testi-city { font-size:10px; color:var(--text-light); margin-top:3px; letter-spacing:1px; }
.testi-arrows { display:flex; justify-content:center; gap:10px; margin-top:18px; }
.testi-arrow { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--cream-3); box-shadow:0 4px 16px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); }
.testi-arrow:hover { box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.testi-arrow svg { width:16px; height:16px; stroke:var(--text); fill:none; stroke-width:2; }

/* -- BOOK CONSULTATION -- */
.consult-section { padding:70px 60px; background:var(--cream); border-top:1px solid var(--cream-3); }
.consult-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; max-width:1100px; margin:0 auto; }
.consult-desc { font-size:14px; color:var(--text-light); line-height:1.8; margin:16px 0 24px; }
.consult-perks { display:flex; flex-direction:column; gap:10px; }
.consult-perk { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-mid); }
.consult-perk svg { width:16px; height:16px; flex-shrink:0; stroke:var(--pink); }
.consult-form-wrap { background:var(--white); padding:36px; box-shadow:0 4px 24px rgba(10,22,40,0.08); }
.consult-field { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.consult-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-mid); font-weight:600; }
.consult-input { padding:12px 14px; font-size:13px; background:var(--cream); border:1px solid var(--cream-3); color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--tr); border-radius:0; }
.consult-input:focus { border-color:var(--pink); }
.consult-textarea { resize:vertical; min-height:80px; }
.consult-err { font-size:11px; color:#c0392b; display:none; }
.consult-err.show { display:block; }
.consult-btn { width:100%; padding:14px; background:var(--teal); color:#fff; font-size:10px; letter-spacing:3px; text-transform:uppercase; font-family:var(--sans); border:none; cursor:pointer; transition:background var(--tr); margin-top:4px; }
.consult-btn:hover { background:var(--teal-deep); }
.consult-success { text-align:center; padding:48px 24px; }
.consult-success h3 { font-family:var(--serif); font-size:24px; margin:16px 0 8px; color:var(--text); }
.consult-success p { font-size:13px; color:var(--text-light); }
@media(max-width:900px) { .consult-inner { grid-template-columns:1fr; gap:36px; } .consult-section { padding:50px 24px; } }

/* -- NEWSLETTER -- */
.newsletter { padding:50px 60px; border-top:1px solid var(--cream-3); background:var(--white); }
.nl-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:1060px; margin:0 auto; flex-wrap:wrap; }
.nl-text .section-tag { justify-content:flex-start; }
.nl-text .section-tag::before { display:block; }
.nl-text .section-title { margin-top:8px; }
.nl-form { display:flex; gap:0; flex:1; max-width:420px; }
.nl-input { flex:1; padding:13px 18px; font-size:12px; background:var(--cream); border:1px solid var(--cream-3); border-right:none; color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--tr); }
.nl-input::placeholder { color:var(--text-light); }
.nl-input:focus { border-color:var(--gold); }
.nl-btn { padding:13px 24px; background:var(--text); color:#fff; font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:400; transition:background var(--tr); white-space:nowrap; font-family:var(--sans); }
.nl-btn:hover { background:var(--teal); }

/* -- SEARCH OVERLAY -- */
/* -- AUTH OVERLAYS -- */
/* --- AUTH OVERLAYS --- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,8,5,0.72);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-overlay.open { opacity: 1; visibility: visible; }
.auth-box {
  width: 100%; max-width: 440px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22);
  overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 92vh;
  scrollbar-width: none;
  transform: scale(0.95) translateY(18px);
  transition: transform 0.36s cubic-bezier(0.34,1.4,0.64,1);
}
.auth-box::-webkit-scrollbar { display: none; }
.auth-overlay.open .auth-box { transform: scale(1) translateY(0); }

.auth-header {
  padding: 24px 32px 18px;
  background: linear-gradient(145deg, var(--cream) 0%, #fff 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.auth-logo {
  font-family: var(--serif); font-size: 11px; letter-spacing: 7px;
  color: var(--teal); margin-bottom: 18px; text-transform: uppercase;
}
.auth-title {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  color: var(--text); line-height: 1.15; margin-bottom: 5px;
}
.auth-title em { font-style: italic; color: var(--teal); }
.auth-subtitle { font-size: 13px; color: var(--text-mid); font-family: var(--sans); letter-spacing: 0.2px; }
.auth-close {
  position: absolute; top: 20px; right: 20px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.05); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.auth-close:hover { background: rgba(0,0,0,0.1); }
.auth-close svg { width: 14px; height: 14px; stroke: var(--text-mid); fill: none; stroke-width: 2.2; }

.auth-body { padding: 20px 28px 20px; }
.auth-field { margin-bottom: 12px; }
.auth-label {
  display: block; font-size: 9px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--text-mid);
  margin-bottom: 8px; font-weight: 600; font-family: var(--sans);
}
.auth-input {
  width: 100%; padding: 13px 16px; font-size: 14px; box-sizing: border-box;
  background: var(--cream); border: 1.5px solid transparent;
  color: var(--text); font-family: var(--sans); outline: none; border-radius: 10px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.auth-input:focus {
  border-color: var(--teal); background: #fff;
  box-shadow: 0 0 0 4px rgba(10,22,40,0.10);
}
.auth-input::placeholder { color: var(--text-light); }

.auth-pw-wrap { position: relative; }
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
.auth-pw-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
}
.auth-pw-toggle svg { width: 16px; height: 16px; stroke: var(--text-light); fill: none; stroke-width: 1.5; }

.auth-forgot {
  display: block; text-align: right; font-size: 11px;
  color: var(--gold); margin-top: -8px; margin-bottom: 18px;
  background: none; border: none; cursor: pointer; font-family: var(--sans);
}
.auth-forgot:hover { text-decoration: underline; }

.auth-submit {
  width: 100%; padding: 14px; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; background: var(--teal); color: #fff;
  border: none; font-weight: 600; cursor: pointer; border-radius: 10px;
  font-family: var(--sans); transition: all 0.22s; margin-top: 4px; margin-bottom: 10px;
}
.auth-submit:hover { background: var(--teal-deep); box-shadow: 0 8px 24px rgba(10,22,40,0.30); transform: translateY(-1px); }

.auth-terms {
  font-size: 10px; color: var(--text-light); text-align: center;
  line-height: 1.6; margin-bottom: 10px;
}
.auth-terms a { color: var(--gold); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; color: var(--text-light); letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.08); }

.auth-switch { text-align: center; font-size: 13px; color: var(--text-mid); }
.auth-switch-btn {
  background: none; border: none; cursor: pointer;
  color: var(--teal); font-size: 13px; font-family: var(--sans);
  font-weight: 600; padding: 0; margin-left: 4px;
}
.auth-switch-btn:hover { text-decoration: underline; }

.auth-guest-btn {
  width: 100%; padding: 12px 16px; margin-top: 8px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  background: transparent; color: var(--text-mid);
  border: 1.5px solid rgba(0,0,0,0.1); cursor: pointer;
  font-family: var(--sans); font-weight: 500; border-radius: 10px;
  transition: all 0.2s;
}
.auth-guest-btn:hover { border-color: var(--text-mid); color: var(--text); background: var(--cream); }

.auth-name-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.auth-error { font-size: 11px; color: #C0392B; margin-top: 5px; display: none; letter-spacing: 0.3px; }
.auth-error.show { display: block; }

/* Mobile: full-screen slide-in */
@media (max-width: 640px) {
  .auth-overlay { padding: 0; background: transparent; backdrop-filter: none; }
  .auth-box {
    position: fixed; inset: 0;
    max-width: 100%; max-height: 100%;
    border-radius: 0; box-shadow: none; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  }
  .auth-overlay.open .auth-box { transform: translateX(0); }
  .auth-header { background: var(--cream); padding: 64px 24px 24px; }
  .auth-body { padding: 24px 24px 48px; }
  .auth-title { font-size: 26px; }
  .auth-close { top: 20px; right: auto; left: 16px; }
}

#search-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.72);
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 90px;
}
#search-overlay.open { opacity: 1; visibility: visible; }
.search-box {
  width: 100%; max-width: 680px; margin: 0 auto;
  background: var(--white); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  overflow: hidden;
  transform: translateY(-16px); transition: transform 0.3s ease;
}
#search-overlay.open .search-box { transform: translateY(0); }
.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--cream-3);
}
.search-input-row svg { width: 20px; height: 20px; stroke: var(--text-light); fill: none; stroke-width: 1.8; flex-shrink: 0; }
#search-input {
  flex: 1; border: none; outline: none; font-size: 17px;
  font-family: var(--sans); color: var(--text); background: transparent;
  font-weight: 400;
}
#search-input::placeholder { color: var(--text-light); }
#search-close {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2); transition: background var(--tr);
}
#search-close:hover { background: var(--cream-3); }
#search-close svg { width: 14px; height: 14px; stroke: var(--text-mid); fill: none; stroke-width: 2; }

/* -- ACCOUNT OVERLAY -- */
#account-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.72);
  opacity: 0; transition: opacity 0.3s ease;
  display: none; flex-direction: column; align-items: center;
  padding-top: 90px; padding-left: 16px; padding-right: 16px;
}
#account-overlay.open { opacity: 1; display: flex; }
.acct-panel {
  width: 100%; max-width: 480px;
  background: var(--white); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  overflow: hidden;
  transform: translateY(-16px); transition: transform 0.3s ease;
}
#account-overlay.open .acct-panel { transform: translateY(0); }
.acct-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--cream-3);
}
.acct-panel-title { font-family: var(--serif); font-size: 18px; font-weight: 300; color: var(--text); }
.acct-panel-close {
  background: var(--cream-2); border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
}
.acct-panel-close:hover { background: var(--cream-3); }
.acct-panel-close svg { width: 14px; height: 14px; stroke: var(--text-mid); fill: none; stroke-width: 2; }
.acct-info-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; font-size: 13px; color: var(--text-mid);
}
.acct-info-row svg { width: 15px; height: 15px; stroke: var(--text-light); fill: none; stroke-width: 1.5; flex-shrink: 0; }
.acct-info-row span { color: var(--text); font-weight: 500; }
@media (max-width:860px) {
  #account-overlay { padding-top: 60px; }
  .acct-panel { border-radius: 12px; }
  .acct-panel-head { padding: 13px 16px; }
  .acct-panel-title { font-size: 15px; }
  .acct-info-row { padding: 9px 16px; font-size: 12px; }
}
.acct-divider { height: 1px; background: var(--cream-3); margin: 8px 0; }
.acct-orders-head {
  padding: 10px 22px 6px; font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-light);
}
.acct-order-item {
  padding: 10px 22px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--cream-3);
  font-size: 12px;
}
.acct-order-name { color: var(--text); font-weight: 500; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-order-meta { color: var(--text-light); font-size: 11px; margin-top: 2px; }
.acct-order-amt { color: var(--gold); font-weight: 600; font-size: 12px; white-space: nowrap; }
.acct-no-orders { padding: 16px 22px; font-size: 12px; color: var(--text-light); text-align: center; }
.acct-logout-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 22px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold); background: none; border: none; cursor: pointer;
  font-family: var(--sans); transition: background var(--tr);
}
.acct-logout-btn:hover { background: var(--gold-light); }
.acct-logout-btn svg { stroke: var(--gold); fill: none; stroke-width: 1.5; }
.acct-guest-btn {
  display: block; width: calc(100% - 44px); margin: 10px 22px;
  padding: 12px; text-align: center; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer; font-family: var(--sans);
  transition: all var(--tr); border-radius: 4px;
}
.acct-guest-signin { background: var(--teal); color: #fff; border: none; }
.acct-guest-signin:hover { background: #1a5f7a; }
.acct-guest-signup { background: none; color: var(--text-mid); border: 1px solid var(--cream-3); margin-top: 0; }
.acct-guest-signup:hover { border-color: var(--teal); color: var(--teal); }

.search-results {
  max-height: 460px; overflow-y: auto; padding: 10px 0;
}
.search-results::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-track { background: transparent; }
.search-results::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: 4px; }
.search-empty { padding: 40px 24px; text-align: center; color: var(--text-light); font-size: 13px; }
.search-section-label {
  padding: 10px 22px 4px; font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-light); font-weight: 500;
}
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px; cursor: pointer; transition: background var(--tr);
}
.search-result-item:hover { background: var(--cream); }
.sri-gem {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--cream-2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sri-gem svg { width: 36px; height: 36px; }
.sri-gem img { width: 100%; height: 100%; object-fit: cover; }
.sri-info { flex: 1; min-width: 0; }
.sri-name { font-size: 13px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sri-sub { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.sri-price { font-size: 13px; color: var(--gold); font-weight: 500; white-space: nowrap; }
.search-quick-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--cream-2); }
.search-quick-tag {
  padding: 6px 14px; border-radius: 20px; background: var(--cream-2);
  font-size: 11px; color: var(--text-mid); cursor: pointer;
  transition: all var(--tr); letter-spacing: 0.5px;
}
.search-quick-tag:hover { background: var(--gold); color: #fff; }
.search-highlight { color: var(--gold); font-weight: 600; }
/* -- FOOTER -- */
/* --------------------------------------
   FOOTER "" Redesigned to match Kumud theme
   Cream base · Teal structure · Pink accents
-------------------------------------- */
footer {
  background: var(--cream-2);
  color: var(--text-mid);
  padding: 70px 60px 0;
  border-top: 1px solid var(--cream-3);
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink-deep) 0%, var(--pink) 50%, var(--pink-deep) 100%);
}
.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--cream-3);
}
.ft-logo {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 10px;
  color: var(--teal);
  margin-bottom: 4px;
}
.ft-tagline {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 16px;
  font-family: var(--sans);
}
.ft-desc {
  font-size: 13px;
  line-height: 1.85;
  max-width: 240px;
  color: var(--text-mid);
  font-weight: 300;
}
.ft-socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.ft-soc {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--cream-3);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
}
.ft-soc:hover {
  border-color: var(--teal);
  background: var(--teal-light);
  transform: translateY(-2px);
}
.ft-soc svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-light);
  fill: none;
  stroke-width: 1.5;
  transition: stroke var(--tr);
}
.ft-soc:hover svg { stroke: var(--teal); }
.ft-acc-hdr { display:flex; align-items:center; justify-content:space-between; }
.ft-chevron { display:none; width:16px; height:16px; stroke:var(--text-light); fill:none; stroke-width:2; flex-shrink:0; transition:transform 0.3s ease; }

.ft-col h4 {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
  font-weight: 600;
  font-family: var(--sans);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cream-3);
}
.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ft-col ul li a {
  position: relative;
  font-size: 13px;
  color: var(--text-mid);
  transition: all var(--tr);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ft-col ul li a:hover {
  color: var(--teal);
}
/* The arrow used to only exist on :hover, so adding it (plus the old
   padding-left:4px) inserted extra width into this flex row and pushed
   the icon/text over â€" most noticeable on Contact's multi-line address,
   which visibly jumped. Always rendering it (position:absolute, out of
   the flex flow) and just fading it in/sliding it over keeps every
   sibling exactly where it already was. */
.ft-col ul li a::before {
  content: ‘→’;
  position: absolute;
  left: -14px;
  font-size: 11px;
  color: var(--pink);
  opacity: 0;
  transition: opacity var(--tr), left var(--tr);
}
.ft-col ul li a:hover::before {
  opacity: 1;
  left: -16px;
}

/* Contact column special styling */
.ft-col-contact ul li a {
  gap: 9px;
}
.ft-contact-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ft-contact-icon svg {
  width: 10px;
  height: 10px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2;
}

/* Bottom bar */
.ft-bottom {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ft-copy {
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ft-copy-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink);
  display: inline-block;
}
.ft-legal {
  display: flex;
  gap: 20px;
}
.ft-legal a {
  font-size: 11px;
  color: var(--text-light);
  transition: color var(--tr);
  cursor: pointer;
}
.ft-legal a:hover { color: var(--teal); }

/* -- COLLECTION PAGE -- */
.coll-page { padding-top:70px; min-height:100vh; }
.coll-hero { background:var(--cream-2); padding:56px 60px; color:var(--text); position:relative; overflow:hidden; border-bottom:1px solid var(--cream-3); }
.coll-hero.has-banner { padding:80px 60px 70px; color:#fff; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; border-bottom:none; background-color:var(--text); }
.coll-hero.has-banner h1 { text-shadow:0 2px 12px rgba(0,0,0,.4); }
.coll-hero.has-banner p { color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.3); }
.coll-hero.has-banner .breadcrumb, .coll-hero.has-banner .breadcrumb span { color:rgba(255,255,255,.75); }
.coll-hero.has-banner .breadcrumb svg path { stroke:rgba(255,255,255,.6); }
.coll-hero::after { content:''; position:absolute; right:-80px; top:-80px; width:360px; height:360px; border-radius:50%; background:rgba(184,149,90,.05); pointer-events:none; }
.coll-hero.has-banner::after { display:none; }
.breadcrumb { font-size:10px; letter-spacing:2.5px; color:var(--text-light); margin-bottom:16px; display:flex; align-items:center; gap:8px; text-transform:uppercase; }
.breadcrumb span { transition:color var(--tr); cursor:pointer; }
.breadcrumb span:hover { color:var(--gold); }
.breadcrumb svg { width:12px; height:12px; stroke:var(--cream-3); fill:none; stroke-width:2; }
.coll-hero h1 { font-family:var(--serif); font-size:clamp(34px,5vw,58px); font-weight:300; margin-bottom:12px; letter-spacing:-0.5px; }
/* Gemstone Recommendations reuses .coll-hero but its heading needs to be a
   bit smaller than the other collection pages, so override just this one. */
#gemrec-hero h1 { font-size:clamp(26px,3.8vw,42px); }
.coll-hero p { font-size:14px; color:var(--text-mid); font-weight:300; max-width:480px; line-height:1.9; }
.coll-layout { display:grid; grid-template-columns:272px minmax(0,1fr); align-items:start; }

/* -- SIDEBAR -- */
.sidebar-drawer { position:sticky; top:80px; max-height:calc(100vh - 80px); overflow-y:auto; }
.sidebar { background:var(--white); border-right:1px solid var(--cream-3); padding:24px 0; }
.sidebar-mob-hdr, .sidebar-mob-apply, .sidebar-backdrop, .mob-filter-btn { display:none; }
.sb-section { border-bottom:1px solid var(--cream-3); }
.sb-title { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); cursor:pointer; user-select:none; }
.sb-title svg { width:12px; height:12px; stroke:var(--text-light); fill:none; stroke-width:2; transition:transform var(--tr); }
.sb-title.open svg { transform:rotate(180deg); }
.sb-body { overflow:hidden; transition:max-height .35s ease; padding:0 22px; }
.sb-body.closed { max-height:0 !important; }
.fo { display:flex; align-items:center; justify-content:space-between; padding:8px 0; cursor:pointer; }
.fo-left { display:flex; align-items:center; gap:9px; }
.fo-check { width:15px; height:15px; border:1.5px solid var(--cream-3); border-radius:2px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all var(--tr); }
.fo.sel .fo-check { background:var(--gold); border-color:var(--gold); }
.fo.sel .fo-check::after { content:''; display:block; width:7px; height:4px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg) translateY(-1px); }
.fo-label { font-size:13px; color:var(--text-mid); transition:color var(--tr); }
.fo:hover .fo-label { color:var(--gold); }
.fo.sel .fo-label { color:var(--gold); font-weight:500; }
.fo-count { font-size:10px; color:var(--text-light); }
.fo-swatch { width:13px; height:13px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(0,0,0,.08); }
.fo.sel .fo-swatch { outline:2px solid var(--gold); outline-offset:1px; }

/* Stone color grid layout */
.sb-color-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 4px; padding:8px 0 14px; }
.sb-color-item { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.sb-color-circle { width:28px; height:28px; border-radius:50%; border:2px solid rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s; flex-shrink:0; }
.sb-color-item:hover .sb-color-circle { transform:scale(1.1); box-shadow:0 3px 10px rgba(0,0,0,.15); }
.sb-color-item.sel .sb-color-circle { outline:2.5px solid var(--gold); outline-offset:2px; }
.sb-color-lbl { font-size:9px; color:var(--text-light); text-align:center; letter-spacing:.3px; text-transform:uppercase; line-height:1.2; }
.sb-color-item.sel .sb-color-lbl { color:var(--gold); font-weight:600; }
.fo-radio { width:15px; height:15px; border:1.5px solid var(--cream-3); border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all var(--tr); }
.fo-radio.sel { border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px var(--white); }
.price-range { padding:6px 0 16px; display:flex; flex-direction:column; gap:10px; }
.price-slider { -webkit-appearance:none; width:100%; height:3px; background:var(--cream-3); outline:none; border-radius:2px; }
.price-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--gold); cursor:pointer; border:2px solid #fff; box-shadow:0 1px 6px rgba(26,95,173,0.35); }
.price-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--text-mid); }
.sb-clear { margin:14px 22px 18px; }
.sb-clear button { width:100%; padding:9px; font-size:10px; letter-spacing:3px; text-transform:uppercase; background:none; color:var(--text-light); border:1px solid var(--cream-3); transition:all var(--tr); font-family:var(--sans); cursor:pointer; }
.sb-clear button:hover { border-color:var(--gold); color:var(--gold); }

/* -- PRODUCTS AREA -- */
.prods-area { padding:26px 36px 60px; min-width:0; }
.prods-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--cream-3); flex-wrap:wrap; gap:10px; }
.prods-count { font-size:13px; color:var(--text-mid); font-family:var(--sans); letter-spacing:0.5px; display:none; }
.prods-count.gem-visible { display:block; }
.sort-sel { padding:8px 14px; font-size:11px; background:var(--white); border:1px solid var(--cream-3); color:var(--text-mid); font-family:var(--sans); outline:none; cursor:pointer; transition:border-color var(--tr); }
.sort-sel:focus { border-color:var(--gold); }
.active-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.atag { display:flex; align-items:center; gap:5px; padding:4px 11px; background:var(--gold-light); border:1px solid var(--gold-dim); font-size:11px; color:var(--gold); border-radius:20px; }
.atag button { background:none; border:none; color:var(--gold); cursor:pointer; font-size:13px; line-height:1; padding:0; }
.prods-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.no-results { text-align:center; padding:70px 20px; grid-column:1/-1; }
.no-results p { font-family:var(--serif); font-size:20px; margin-bottom:8px; color:var(--text-mid); }

/* -- SKELETON LOADER -- */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skel-card { min-width:0; }
.skel-img { aspect-ratio:1; border-radius:2px; background:linear-gradient(90deg,var(--cream-3) 25%,var(--cream) 50%,var(--cream-3) 75%); background-size:800px 100%; animation:shimmer 1.5s infinite linear; }
.skel-line { height:14px; border-radius:4px; background:linear-gradient(90deg,var(--cream-3) 25%,var(--cream) 50%,var(--cream-3) 75%); background-size:800px 100%; animation:shimmer 1.5s infinite linear; margin-top:10px; }
.skel-line.w60 { width:60%; }
.skel-line.w40 { width:40%; }
.skel-line.w30 { width:30%; height:12px; margin-top:8px; }

/* -- PRODUCT CARD -- */
.pc { cursor:pointer; transition:transform var(--tr); display:block; color:inherit; text-decoration:none; min-width:0; }
.pc:hover { transform:translateY(-5px); }
.pc-img { aspect-ratio:1; background:linear-gradient(145deg,var(--white) 0%,var(--gold-light) 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:13px; border:1px solid var(--cream-3); transition:box-shadow var(--tr),border-color var(--tr); }
.pc:hover .pc-img { box-shadow:var(--shadow-hover); border-color:var(--gold-dim); }
.pc-img-hover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; z-index:1; }
.pc:hover .pc-img-hover { opacity:1; }
.pc-badge { position:absolute; top:9px; left:9px; z-index:2; font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:4px 9px; font-weight:600; }
.badge-new { background:#E05A2B; color:#fff; }
.badge-sale { background:#B85C38; color:#fff; }
.badge-popular { background:var(--white); color:var(--gold); border:1px solid var(--gold-dim); }
/* Fulfillment availability badge "" bottom-left of product card image */
.pc-fulfil { position:absolute; bottom:9px; left:9px; z-index:2; font-size:8px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; font-weight:700; border-radius:2px; }
.pc-fulfil-stock { background:rgba(10,122,90,0.92); color:#fff; }
.pc-fulfil-order { background:rgba(180,120,20,0.92); color:#fff; }
/* PDP fulfillment strip */
.pd-fulfil-strip { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:0.5px; margin:8px 0 14px; }
.pd-fulfil-strip svg { width:14px; height:14px; flex-shrink:0; }
.pd-fulfil-stock { color:#0a7a5a; }
.pd-fulfil-order { color:#b47814; }
.pd-fulfil-strip .pd-fulfil-sub { font-size:11px; font-weight:400; color:var(--text-light); margin-left:4px; }
.pc-wish { position:absolute; top:8px; right:8px; z-index:2; width:31px; height:31px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--cream-3); display:flex; align-items:center; justify-content:center; opacity:0; transition:all var(--tr); cursor:pointer; }
.pc-wish svg { width:12px; height:12px; stroke:var(--gold); fill:none; stroke-width:1.5; transition:all var(--tr); }
.pc-wish.liked { opacity:1 !important; background:var(--gold); border-color:var(--gold); }
.pc-wish.liked svg { stroke:#fff; fill:#fff; }
.pc:hover .pc-wish { opacity:1; }
.pc-name { font-family:var(--serif); font-size:17px; color:var(--text); margin-bottom:3px; font-weight:400; letter-spacing:0.2px; }
.pc-sub { font-size:11px; color:var(--text-light); letter-spacing:.5px; margin-bottom:9px; }
.pc-footer { display:flex; align-items:center; justify-content:space-between; }
.pc-price { font-size:14px; color:#C8940A; font-weight:500; }
.pc-cta { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-light); background:none; border:none; transition:color var(--tr); font-family:var(--sans); cursor:pointer; }
.pc:hover .pc-cta { color:var(--gold); }

/* --------------------------------
   PRODUCT DETAIL PAGE
-------------------------------- */
.product-page { padding-top:70px; }
.pd-breadcrumb { padding:18px 60px; font-size:13px; letter-spacing:1.5px; color:var(--text-light); display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--cream-3); background:var(--white); position:sticky; top:70px; z-index:50; }
.pd-breadcrumb span { transition:color var(--tr); cursor:pointer; }
.pd-breadcrumb span:hover { color:var(--gold); }
.pd-breadcrumb svg { width:12px; height:12px; stroke:var(--cream-3); fill:none; stroke-width:2; }

.pd-layout { display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:100%; position:relative; background:var(--white); }

/* Left gallery */
.pd-gallery { padding:40px 48px 40px 60px; background:var(--white); display:flex; flex-direction:column; align-items:center; gap:24px; position:sticky; top:128px; align-self:start; min-width:0; }
.pd-main-img { width:100%; max-width:440px; aspect-ratio:1; background:var(--white); border:1px solid var(--cream-3); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:crosshair; position:relative; }
.pd-zoom-wrap { position:relative; width:100%; max-width:440px; }
/* Metal swatch loading overlay */
.pd-img-loader {
  position:absolute; inset:0; z-index:20;
  background:rgba(255,255,255,0.72);
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
  pointer-events:none;
}
.pd-img-loader::after {
  content:'';
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--cream-3);
  border-top-color:var(--teal);
  animation:pd-spin 0.7s linear infinite;
}
@keyframes pd-spin { to { transform:rotate(360deg); } }
.pd-zoom-lens { position:absolute; border:1px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.35); pointer-events:none; display:none; z-index:10; }
.pd-zoom-result { display:none; position:fixed; background:#fff; overflow:hidden; z-index:9999; background-repeat:no-repeat; border:2px solid var(--cream-3); box-shadow:0 4px 24px rgba(0,0,0,0.10); }
.pd-thumbs-wrap { display:flex; align-items:center; gap:6px; max-width:100%; }
.pd-thumbs { display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; max-width:380px; min-width:0; flex:1; }
.pd-thumbs::-webkit-scrollbar { display:none; }
.pd-thumb-arrow { flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--cream-3); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); }
.pd-thumb-arrow:hover { border-color:var(--gold); }
.pd-thumb-arrow svg { width:12px; height:12px; stroke:var(--text-mid); fill:none; stroke-width:2; }
.pd-thumb { width:66px; height:66px; flex-shrink:0; border:2px solid var(--cream-3); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); border-radius:3px; overflow:hidden; }
.pd-thumb.active, .pd-thumb:hover { border-color:var(--gold); }

.pd-trust { display:flex; gap:0; width:100%; max-width:440px; border:1px solid var(--cream-3); background:var(--white); border-radius:4px; overflow:hidden; }
.pd-trust-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; text-align:center; border-right:1px solid var(--cream-3); }
.pd-trust-item:last-child { border-right:none; }
.pd-trust-item svg { width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.5; }
.pd-trust-item span { font-size:10px; letter-spacing:1px; color:var(--text-mid); line-height:1.4; }

/* Right info */
.pd-info { padding:40px 60px 40px 48px; position:relative; background:var(--white); min-height:calc(100vh - 128px); box-sizing:border-box; }
.pd-wish-btn { position:absolute; top:40px; right:60px; width:44px; height:44px; border-radius:50%; background:var(--cream); border:1.5px solid var(--cream-3); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); }
.pd-wish-btn svg { width:18px; height:18px; stroke:var(--text-light); fill:none; stroke-width:1.5; transition:all var(--tr); }
.pd-wish-btn:hover { border-color:var(--gold); }
.pd-wish-btn.active { background:var(--gold); border-color:var(--gold); }
.pd-wish-btn.active svg { stroke:#fff; fill:#fff; }
.pd-collection-tag { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--pink); margin-bottom:10px; }
.pd-title { font-family:var(--serif); font-size:clamp(16px,1.5vw,22px); font-weight:400; color:var(--text); line-height:1.3; margin-bottom:12px; padding-right:60px; letter-spacing:-0.1px; }
.pd-price { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--text); margin-bottom:4px; }
.pd-price-note { font-size:11px; color:var(--text-light); margin-bottom:8px; }
.pd-divider { height:1px; background:var(--cream-3); margin:18px 0; }
.pd-detail-line { font-size:14px; color:var(--text-mid); font-weight:500; padding:4px 0; }
.pd-swatches-row { display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap; }
.pd-metal-section { margin:4px 0; }
.pd-metal-label { font-size:13px; font-weight:600; color:var(--text-dark); margin-bottom:12px; letter-spacing:0.3px; }
.pd-metal-label span { font-weight:400; color:var(--text-mid); }
.pd-metal-swatches { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.pd-metal-swatch {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; transition:transform 0.2s;
}
.pd-metal-swatch:hover { transform:scale(1.08); }
.pd-metal-swatch .swatch-circle {
  width:36px; height:36px; border-radius:50%;
  border:2px solid transparent;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
  transition:all 0.2s; overflow:hidden;
}
.pd-metal-swatch .swatch-circle img { width:100%; height:100%; object-fit:cover; }
.pd-metal-swatch.primary .swatch-circle {
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--gold),0 1px 4px rgba(0,0,0,0.15);
  width:40px; height:40px;
}
.pd-metal-swatch .swatch-label {
  font-size:8px; letter-spacing:0.8px; text-transform:uppercase;
  color:var(--text-light); text-align:center; line-height:1.3; max-width:50px; word-spacing:100vw;
}
.pd-metal-swatch.primary .swatch-label { color:var(--gold); font-weight:600; }
.pd-metal-stamp {
  display:inline-block; background:var(--pink); color:#fff !important;
  font-size:10px; font-weight:700; letter-spacing:1px;
  padding:2px 7px; border-radius:4px; margin-left:8px; vertical-align:middle;
}

/* Size selector "" dropdown style */
.pd-size-section { margin-bottom:18px; }
.pd-size-label { font-size:13px; color:var(--text-mid); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; font-weight:500; }
.pd-size-guide { font-size:12px; color:var(--teal); cursor:pointer; text-decoration:none; font-weight:400; }
.pd-size-guide:hover { text-decoration:underline; }
.pd-size-select { width:100%; padding:11px 14px; font-size:14px; font-weight:600; border:1.5px solid var(--cream-3); background:var(--white); font-family:var(--sans); outline:none; border-radius:3px; color:var(--text-dark); cursor:pointer; transition:border-color var(--tr); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.pd-size-select:focus { border-color:var(--teal); outline:none; }
.pd-size-select:hover { border-color:var(--teal); }
.pd-size-btns { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.pd-size-btn { min-width:36px; height:34px; padding:0 8px; font-size:12px; font-family:var(--sans); border:1.5px solid var(--cream-3); background:var(--white); color:var(--text-mid); border-radius:3px; cursor:pointer; transition:all 0.2s; text-align:center; }
.pd-size-btn:hover { border-color:var(--teal); color:var(--teal); }
.pd-size-btn.selected { border-color:var(--teal); background:var(--teal); color:#fff; font-weight:600; }
.pd-size-adj { font-size:11px; color:var(--text-mid); margin-top:6px; }
.bn-size-btn { min-width:30px; height:28px; padding:0 6px; font-size:11px; font-family:var(--sans); border:1.5px solid #e0d8d0; background:#fff; color:#555; border-radius:3px; cursor:pointer; transition:all 0.2s; text-align:center; }
.bn-size-btn:hover { border-color:#3dab98; color:#3dab98; }
.bn-size-btn.selected { border-color:#3dab98; background:#3dab98; color:#fff; font-weight:600; }

/* Pincode */
.pd-pincode { background:var(--cream); border:1px solid var(--cream-3); padding:14px 16px; margin-bottom:18px; border-radius:3px; }
.pd-pin-label { font-size:12px; color:var(--text-mid); margin-bottom:8px; font-weight:500; }
.pd-pin-row { display:flex; gap:8px; }
.pd-pin-input { flex:1; padding:8px 12px; font-size:13px; border:1px solid var(--cream-3); background:var(--white); font-family:var(--sans); outline:none; border-radius:3px; transition:border-color var(--tr); }
.pd-pin-input:focus { border-color:var(--teal); }
.pd-pin-btn { padding:8px 16px; background:var(--teal); color:#fff; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-family:var(--sans); border-radius:3px; transition:background var(--tr); }
.pd-pin-btn:hover { background:var(--teal-deep); }
.pd-pin-note { font-size:11px; color:var(--text-light); margin-top:6px; }

/* Action buttons "" BUY NOW primary, ADD TO CART outlined */
.pd-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.pd-btn-buy { padding:15px; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-family:var(--sans); font-weight:500; background:#E84C7A; color:#fff; border:1.5px solid #E84C7A; cursor:pointer; transition:all var(--tr); border-radius:2px; box-shadow:0 4px 18px rgba(232,76,122,0.30); }
.pd-btn-buy:hover { background:#D43A68; border-color:#D43A68; opacity:1; box-shadow:0 6px 24px rgba(232,76,122,0.45); transform:translateY(-1px); }
.pd-btn-cart { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-family:var(--sans); font-weight:500; background:var(--white); color:var(--teal); border:1.5px solid var(--teal); cursor:pointer; transition:all var(--tr); border-radius:2px; }
.pd-btn-cart svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; }
.pd-btn-cart:hover { background:var(--teal); color:#fff; box-shadow:0 6px 24px rgba(0,0,0,0.18); transform:translateY(-1px); }
.pd-btn-cart.in-cart { background:var(--gold); color:#fff; border-color:var(--gold); }
.pd-btn-set-jewel { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-family:var(--sans); font-weight:500; background:transparent; color:var(--gold); border:1.5px solid var(--gold); cursor:pointer; transition:all var(--tr); border-radius:2px; }
.pd-btn-set-jewel:hover { background:var(--gold); color:#fff; }
.pd-btn-set-jewel svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; }
.pd-btn-use-setting { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-family:var(--sans); font-weight:600; background:var(--teal); color:#fff; border:none; cursor:pointer; border-radius:2px; transition:all var(--tr); }
.pd-btn-use-setting:hover { opacity:0.9; }
.pd-byo-back-bar { display:inline-flex; width:fit-content; align-items:center; gap:7px; font-size:11px; color:var(--teal); margin:0 16px 0 0; cursor:pointer; letter-spacing:1px; text-transform:uppercase; font-family:var(--sans); font-weight:600; border:1.5px solid var(--teal); border-radius:4px; padding:5px 12px; background:#fff; transition:all 0.2s; flex-shrink:0; }
.pd-byo-back-bar:hover { background:var(--teal); color:#fff; }
.pd-byo-back-bar svg { stroke:currentColor; fill:none; stroke-width:2.5; width:13px; height:13px; }

/* Trust badges "" inside info panel */
.pd-info-trust { display:flex; gap:0; border:1px solid var(--cream-3); border-radius:3px; margin-bottom:20px; overflow:hidden; }
.pd-info-trust-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; text-align:center; border-right:1px solid var(--cream-3); }
.pd-info-trust-item:last-child { border-right:none; }
.pd-info-trust-item svg { width:20px; height:20px; stroke:var(--teal); fill:none; stroke-width:1.5; }
.pd-info-trust-item span { font-size:9px; letter-spacing:0.8px; color:var(--text-mid); line-height:1.4; text-transform:uppercase; }

/* Accordion sections */
.pd-desc-section { border-top:1px solid var(--cream-3); }
.pd-desc-toggle { display:flex; align-items:center; justify-content:space-between; padding:14px 0; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; user-select:none; }
.pd-desc-toggle svg { width:14px; height:14px; stroke:var(--text-light); fill:none; stroke-width:2; transition:transform var(--tr); }
.pd-desc-toggle.open svg { transform:rotate(180deg); }
.pd-desc-body { overflow:hidden; padding-bottom:16px; transition:max-height .35s ease; }
.pd-desc-body.closed { max-height:0; padding-bottom:0; overflow:hidden; }
.pd-desc-body p { font-size:13px; color:var(--text-mid); line-height:1.9; }
.pd-features { list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.pd-features li { font-size:13px; color:var(--text-mid); display:flex; align-items:flex-start; gap:8px; }
.pd-features li::before { content:'✦'; color:var(--gold); font-size:10px; margin-top:3px; flex-shrink:0; }

.pd-contact { margin-top:20px; font-size:12px; color:var(--text-light); padding:14px 18px; background:var(--cream); border-radius:3px; }
.pd-contact strong { color:var(--gold); }

/* Related products */
.pd-related { padding:70px 60px 80px; background:var(--cream-2); }
.pd-related .hfg { display:flex !important; flex-wrap:nowrap; overflow-x:auto; gap:20px; padding-bottom:16px; min-height:320px; align-items:flex-start; cursor:grab; user-select:none; }
.pd-related .hfg.dragging { cursor:grabbing; }
.pd-related .hfg .pc { min-width:240px; max-width:240px; flex-shrink:0; }

/* Product Details section (below similar pieces) */
.pd-details-section { padding:50px 60px; background:var(--white); border-top:1px solid var(--cream-3); }
.pd-details-inner { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; }
.pd-details-left { border:1px solid #ddd; border-radius:3px; overflow:hidden; }
.pd-details-table { width:100%; border-collapse:collapse; }
.pd-details-table .section-hdr td { background:#f5f5f5; padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); border-bottom:1px solid #ddd; }
.pd-details-table tr td { vertical-align:top; }
.pd-details-table .section-hdr td:last-child { text-align:right; color:var(--text-light); font-weight:400; letter-spacing:0; }
.pd-details-table tr { border-bottom:1px solid #eee; }
.pd-details-table tr:last-child { border-bottom:none; }
.pd-details-table td { padding:11px 16px; font-size:13px; line-height:1.5; }
.pd-details-table td:first-child { color:var(--teal); width:45%; }
.pd-details-table td:last-child { color:var(--text-mid); text-align:right; }

/* Price card "" desktop hidden, mobile shown via media query */
.pb-card { display:none; }

/* Kumud Promise */
.pd-promise-box { border:1px solid #ddd; border-radius:3px; padding:20px; margin-bottom:16px; }
.pd-promise-title { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); margin-bottom:16px; }
.pd-promise-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.pd-promise-item { display:flex; align-items:flex-start; gap:8px; }
.pd-promise-item svg { width:16px; height:16px; stroke:var(--teal); fill:none; stroke-width:1.5; flex-shrink:0; margin-top:1px; }
.pd-promise-item span { font-size:12px; color:var(--teal); font-weight:500; line-height:1.4; }
.pd-cert-box { background:#7a8fa6; border-radius:3px; padding:24px 20px; text-align:center; }
.pd-cert-title { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.pd-cert-text { font-size:13px; color:rgba(255,255,255,0.9); line-height:1.8; }

/* --------------------------------
   BUILD YOUR OWN (BYO) "" SETTINGS PAGE
   (Also used by the reverse-BYO "Choose Your Gemstone" page)
-------------------------------- */
#pg-byo-settings, #pg-byo-gemstones { padding-top:70px; min-height:100vh; background:var(--cream); }

/* Page header */
.byo-pg-header { background:var(--white); border-bottom:1px solid var(--cream-3); padding:0; position:sticky; top:70px; z-index:50; }
.byo-pg-header-inner { padding:16px 40px; display:flex; align-items:center; gap:20px; }
.byo-pg-back { background:none; border:none; cursor:pointer; font-size:12px; font-family:var(--sans); font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text-light); display:flex; align-items:center; gap:7px; padding:6px 0; transition:color .15s; flex-shrink:0; }
.byo-pg-back:hover { color:var(--teal); }
.byo-pg-back svg { width:15px; height:15px; flex-shrink:0; }
.byo-pg-header-divider { width:1px; height:32px; background:var(--cream-3); flex-shrink:0; }
.byo-pg-heading { font-family:var(--serif); font-size:20px; color:var(--text-dark); font-weight:700; line-height:1.2; }
.byo-pg-sub { font-size:12px; color:var(--text-light); margin-top:2px; letter-spacing:.3px; }

/* Body layout */
.byo-pg-body { max-width:1400px; margin:0 auto; padding:32px 40px 60px; display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:start; }

/* Sidebar */
/* position:sticky assumes the sidebar's own content is shorter than the
   viewport space left below its top:145px offset â€" true on a tall
   desktop screen, but on a shorter "laptop" viewport the sidebar's real
   height (Product+Metal+Stone Setting+Prong+Gender...) can exceed that
   remaining space. Since it's stuck near the top for virtually the
   whole page scroll, its lower filter options end up with no practical
   way to be scrolled into view. Capping its own height and scrolling
   it internally (same fix as the mega-menu height bug) guarantees every
   option stays reachable regardless of viewport height. */
.byo-pg-sidebar { background:var(--white); border:1px solid var(--cream-3); border-radius:6px; padding:20px; position:sticky; top:145px; max-height:calc(100vh - 165px); overflow-y:auto; }
.byo-pg-filter-group { margin-bottom:28px; }
.byo-pg-filter-group:last-child { margin-bottom:0; }
.byo-pg-filter-title { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-mid); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--cream-3); }
.byo-sort-bar { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--cream-3); }
.byo-result-count { font-size:12px; color:var(--text-light); margin-right:auto; }
.byo-pg-filter-opts { display:flex; flex-direction:column; gap:4px; }
.byo-pg-fopt { background:none; border:none; text-align:left; padding:7px 10px 7px 30px; font-size:13px; font-family:var(--sans); color:var(--text-mid); cursor:pointer; border-radius:4px; transition:all .15s; font-weight:500; position:relative; }
.byo-pg-fopt::before { content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%); width:15px; height:15px; border:1.5px solid #ccc; border-radius:3px; background:#fff; transition:all .15s; }
.byo-pg-fopt::after { content:''; position:absolute; left:12px; top:50%; transform:translateY(-65%) rotate(45deg); width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; opacity:0; transition:all .15s; }
.byo-pg-fopt:hover { background:var(--cream); color:var(--text-dark); }
.byo-pg-fopt:hover::before { border-color:var(--pink); }
.byo-pg-fopt.active { background:none; color:var(--teal); font-weight:700; }
.byo-pg-fopt.active::before { background:var(--pink); border-color:var(--pink); }
.byo-pg-fopt.active::after { opacity:1; }

/* Grid area */
.byo-pg-grid-wrap { min-height:400px; }

/* Settings grid */
.byo-settings-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:40px; }
@media(max-width:900px) { .byo-settings-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .byo-settings-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
.byo-setting-card { border:2px solid var(--cream-3); border-radius:6px; overflow:hidden; cursor:pointer; transition:all 0.25s ease; background:var(--white); }
.byo-setting-card:hover { border-color:var(--teal); box-shadow:0 8px 24px rgba(28,23,20,0.10); transform:translateY(-3px); }
.byo-setting-card.selected { border-color:var(--gold); box-shadow:0 0 0 3px rgba(26,95,173,0.18); }
.byo-setting-card.selected .bsc-check { display:flex !important; background:var(--gold) !important; }
.byo-setting-card .bsc-img { width:100%; aspect-ratio:1; background:var(--cream); overflow:hidden; position:relative; }
.byo-setting-card .bsc-img img { width:100%; height:100%; object-fit:contain; display:block; }
.bsc-card-actions { position:absolute; bottom:0; left:0; right:0; display:flex; gap:6px; padding:0 8px 10px; opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease; }
.byo-setting-card:hover .bsc-card-actions { opacity:1; transform:translateY(0); }
.bsc-act-select,.bsc-act-view { flex:1; padding:9px 0; background:rgba(255,255,255,0.35); color:var(--teal); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; font-family:var(--sans); font-weight:700; border:1.5px solid var(--teal); cursor:pointer; border-radius:20px; text-shadow:0 0 6px rgba(255,255,255,0.9); transition:background .15s; }
.bsc-act-select:hover,.bsc-act-view:hover { background:rgba(255,255,255,0.6); }
.byo-setting-card .bsc-info { padding:12px; }
.byo-setting-card .bsc-name { font-size:12px; color:var(--text); font-weight:600; line-height:1.4; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.byo-setting-card .bsc-meta { font-size:11px; color:var(--text-light); }
.byo-setting-card .bsc-price { font-size:13px; color:var(--teal); font-weight:700; margin-top:4px; }
.byo-setting-card .bsc-check { display:none; position:absolute; top:8px; right:8px; width:22px; height:22px; background:var(--teal); border-radius:50%; align-items:center; justify-content:center; }
.byo-setting-card.selected .bsc-check { display:flex; }

.byo-change-link { font-size:11px; color:var(--teal); cursor:pointer; text-decoration:underline; margin-left:10px; font-weight:500; }

/* Gemstone detail page action override */
.pd-btn-byo { width:100%; padding:14px 20px; background:var(--teal); color:#fff; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; border:none; cursor:pointer; transition:background 0.2s; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:0; }
.pd-btn-byo:hover { background:#5a7a8f; }
.pd-btn-byo svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* --------------------------------
   CART PAGE
-------------------------------- */
.cart-page { padding-top:70px; min-height:100vh; }
.cart-header { padding:32px 60px 28px; background:var(--white); border-bottom:1px solid var(--cream-3); }
.cart-header .breadcrumb { color:var(--text-light); margin-bottom:12px; }
.cart-header .breadcrumb span { color:var(--text-light); }
.cart-header .breadcrumb span:hover { color:var(--gold); }
.cart-header .breadcrumb svg { stroke:var(--cream-3); }
.cart-title { font-family:var(--serif); font-size:clamp(28px,4vw,42px); font-weight:700; color:var(--text); }
.cart-title em { font-style:normal; font-weight:700; color:var(--gold); }
.cart-layout { display:grid; grid-template-columns:1fr 340px; gap:28px; padding:32px 60px 60px; align-items:start; }

/* Cart items */
.cart-items-col { display:flex; flex-direction:column; gap:16px; }
.cart-item { background:var(--white); border:1px solid var(--cream-3); display:grid; grid-template-columns:100px 1fr auto; gap:20px; padding:20px; align-items:center; transition:box-shadow var(--tr); }
.cart-item:hover { box-shadow:var(--shadow); }
.ci-img { width:100px; height:100px; background:linear-gradient(145deg,var(--cream) 0%,var(--gold-light) 100%); border:1px solid var(--cream-3); display:flex; align-items:center; justify-content:center; border-radius:3px; flex-shrink:0; }
.ci-info { display:flex; flex-direction:column; gap:5px; }
.ci-name { font-family:var(--serif); font-size:18px; color:var(--text); }
.ci-sub { font-size:12px; color:var(--text-light); }
.ci-meta { font-size:12px; color:var(--text-mid); }
.ci-price { font-size:16px; color:#C8940A; font-weight:500; margin-top:4px; }
.ci-qty-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.ci-qty { display:flex; align-items:center; border:1px solid var(--cream-3); border-radius:3px; overflow:hidden; }
.ci-qty button { width:28px; height:28px; background:var(--cream); border:none; font-size:14px; color:var(--text-mid); cursor:pointer; transition:all var(--tr); }
.ci-qty button:hover { background:var(--gold); color:#fff; }
.ci-qty span { width:34px; height:28px; display:flex; align-items:center; justify-content:center; font-size:13px; border-left:1px solid var(--cream-3); border-right:1px solid var(--cream-3); }
.ci-remove { background:none; border:none; color:var(--text-light); font-size:12px; cursor:pointer; letter-spacing:1px; text-transform:uppercase; transition:color var(--tr); padding:0; margin-top:8px; font-family:var(--sans); display:block; }
.ci-remove:hover { color:#B85C38; }
.ci-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.ci-total { font-family:var(--serif); font-size:20px; color:var(--text); font-weight:600; }

/* Empty cart */
.cart-empty { text-align:center; padding:80px 20px; }
.cart-empty svg { width:64px; height:64px; stroke:var(--cream-3); fill:none; stroke-width:1; margin:0 auto 20px; display:block; }
.cart-empty h3 { font-family:var(--serif); font-size:26px; color:var(--text-mid); margin-bottom:10px; font-weight:600; }
.cart-empty p { font-size:13px; color:var(--text-light); margin-bottom:28px; }

/* Order summary */
.cart-summary { background:var(--white); border:1px solid var(--cream-3); padding:28px; position:sticky; top:90px; }
.cs-title { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--text); margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--cream-3); }
.cs-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:13px; color:var(--text-mid); }
.cs-row-free { color:var(--text-mid); }
.free-tag { font-size:11px; background:#e8f5e9; color:#2e7d32; padding:3px 10px; border-radius:12px; font-weight:600; letter-spacing:1px; }
.cs-divider { height:1px; background:var(--cream-3); margin:12px 0; }
.cs-total { font-size:16px; font-weight:600; color:var(--text); padding:12px 0; }
.cs-checkout-btn { width:100%; padding:15px; background:var(--teal); color:#fff; font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:600; font-family:var(--sans); border:none; cursor:pointer; transition:background var(--tr); margin-top:16px; margin-bottom:10px; }
.cs-checkout-btn:hover { background:var(--teal-deep); }
/* -- Buy Now Checkout -- */
.bn-sec { background:#fff; border:1px solid #e0d8d0; border-radius:4px; padding:20px 20px 22px; margin-bottom:18px; }
.bn-sec-title { font-size:16px; font-weight:700; color:#1a1209; margin-bottom:4px; padding-bottom:10px; border-bottom:1px solid #f0e8e0; }
.bn-sec-sub { font-size:12px; color:#999; margin-top:4px; margin-bottom:0; }
.bn-input-box { position:relative; display:flex; align-items:center; border:1.5px solid #d0c8c0; border-radius:4px; background:#fff; transition:border-color .15s; }
.bn-input-box:focus-within { border-color:var(--teal); }
.bn-input-box.bn-err { border-color:#d9361a !important; }
#bn-ring-size-select.bn-err { border-color:#d9361a !important; }
.bn-input-box input,.bn-input-box select { width:100%; padding:12px 12px; border:none; outline:none; font-size:13px; font-family:var(--sans); color:#1a1209; background:transparent; }
.bn-input-box input::placeholder { color:#aaa; }
.bn-input-box select { cursor:pointer; color:#1a1209; }
.bn-input-icon { padding:0 8px 0 12px; color:#bbb; font-style:normal; flex-shrink:0; line-height:1; }
.bn-radio-opt { display:flex; align-items:center; justify-content:space-between; border:1.5px solid #d0c8c0; border-radius:4px; padding:13px 16px; margin-top:10px; cursor:pointer; transition:border-color .15s; }
.bn-radio-opt.bn-sel { border-color:var(--teal); }
.bn-radio-dot { width:18px; height:18px; border-radius:50%; border:2px solid #bbb; flex-shrink:0; position:relative; transition:border-color .15s; }
.bn-radio-dot.bn-sel { border-color:var(--teal); }
.bn-radio-dot.bn-sel::after { content:''; position:absolute; top:3px; left:3px; right:3px; bottom:3px; border-radius:50%; background:var(--teal); }
.bn-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .bn-checkout-cols { grid-template-columns:1fr !important; } .bn-grid2 { grid-template-columns:1fr; } }
.cs-continue-btn { width:100%; padding:13px; background:transparent; color:var(--teal); font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:400; font-family:var(--sans); border:1.5px solid var(--teal); cursor:pointer; transition:all var(--tr); margin-bottom:20px; }
.cs-continue-btn:hover { background:var(--teal); color:#fff; }
.cs-badges { display:flex; gap:12px; }
.cs-badge { flex:1; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-light); }
.cs-badge svg { width:16px; height:16px; stroke:var(--teal); fill:none; stroke-width:1.5; flex-shrink:0; }

/* --------------------------------
   WISHLIST PAGE
-------------------------------- */
.wish-page { padding-top:70px; min-height:100vh; }
.wish-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:32px 60px 60px; max-width:1400px; margin:0 auto; }
.wish-empty { text-align:center; padding:80px 20px; grid-column:1/-1; }
.wish-empty svg { width:64px; height:64px; stroke:var(--cream-3); fill:none; stroke-width:1; margin:0 auto 20px; display:block; }
.wish-empty h3 { font-family:var(--serif); font-size:26px; color:var(--text-mid); margin-bottom:10px; font-weight:600; }
.wish-empty p { font-size:13px; color:var(--text-light); margin-bottom:28px; }

/* -- REVEAL ANIMATIONS -- */
/* --------------------------------------
   SCROLL ANIMATIONS "" bidirectional
   Reveals on scroll down, reverses on scroll up
-------------------------------------- */

/* Base reveal "" slides up from below */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(0.4,0,0.2,1),
              transform .65s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.rd1 { transition-delay: .1s; }
.rd2 { transition-delay: .2s; }
.rd3 { transition-delay: .3s; }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible  { opacity: 1; transform: translateX(0); }
.reveal-left:not(.visible) { opacity: 0; transform: translateX(-40px); }

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible  { opacity: 1; transform: translateX(0); }
.reveal-right:not(.visible) { opacity: 0; transform: translateX(40px); }

/* -- IMAGE 1: Category Photo Grid --
   Each card fans in from a slight angle + scale,
   staggered left→right. Very warm, editorial feel. */
.cat-card {
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition: opacity .7s cubic-bezier(0.34,1.56,0.64,1),
              transform .7s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow .35s ease;
}
.cat-card.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger delays per card position */
.cat-card:nth-child(1)  { transition-delay: 0s;    }
.cat-card:nth-child(2)  { transition-delay: .12s;  }
.cat-card:nth-child(3)  { transition-delay: .22s;  }
.cat-card:nth-child(4)  { transition-delay: .32s;  }
.cat-card:nth-child(5)  { transition-delay: .10s;  }
.cat-card:nth-child(6)  { transition-delay: .20s;  }

/* -- IMAGE 2: Shop by Collection Masonry Grid --
   Cinematic fade-up with staggered cascade.
   No clip-path "" uses opacity+translate for reliability. */
.sbc-card {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: opacity .6s cubic-bezier(0.4,0,0.2,1),
              transform .6s cubic-bezier(0.4,0,0.2,1);
}
.sbc-card.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Cascade left-to-right, top-to-bottom */
.sbc-padma              { transition-delay: 0s;    }
.sbc-sm:nth-child(2)    { transition-delay: .14s;  }
.sbc-sm:nth-child(3)    { transition-delay: .22s;  }
.sbc-sm:nth-child(4)    { transition-delay: .28s;  }
.sbc-sm:nth-child(5)    { transition-delay: .36s;  }
.sbc-bot-sm:nth-child(6){ transition-delay: .18s;  }
.sbc-bot-sm:nth-child(7){ transition-delay: .26s;  }
.sbc-gifts              { transition-delay: .34s;  }

/* --------------------------------
   RESPONSIVE
-------------------------------- */
@media(max-width:1060px) {
  .hfg, .home-cats-grid { grid-template-columns:repeat(2,1fr); }
  .wish-grid { grid-template-columns:repeat(3,1fr); }
  .ft-grid { grid-template-columns:1fr 1fr; }
  .coll-layout { grid-template-columns:230px 1fr; }
  .prods-grid { grid-template-columns:repeat(3,1fr); }
  .pd-layout { grid-template-columns:1fr; }
  .pd-gallery { position:static; padding:30px 40px; }
  .pd-info { padding:30px 40px; min-height:0; }
  .cart-layout { grid-template-columns:1fr; }
  .cart-summary { position:static; }
}
@media(max-width:1024px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-inner { padding:0 24px; }
  .hero-content { padding:80px 24px; }
  .hero-decor { display:none; }
  .home-cats,.testimonials,.newsletter { padding-left:24px; padding-right:24px; }
  .testi-card { flex:0 0 calc(50% - 10px); }
  /* Not included above: .home-featured needs to keep its wider 60px side
     padding down to 768px (where .hf-arrow's own mobile rule takes over
     and removes the bleed) â€" otherwise the arrow buttons get clipped by
     the sitewide overflow-x:clip in exactly this 769-860px sliver. */
  .coll-hero { padding:48px 24px; }
  .coll-hero.has-banner { padding:60px 24px 50px; min-height:180px; }
  .coll-layout { grid-template-columns:1fr; }
  /* Bottom sheet filter drawer "" slides up from bottom */
  .sidebar-drawer {
    position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; max-height:85vh !important;
    overflow:hidden !important;
    border-radius:20px 20px 0 0;
    background:var(--white); border-right:none;
    z-index:1500; transform:translateY(100%);
    transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
    box-shadow:0 -6px 40px rgba(0,0,0,0.18);
    display:flex !important; flex-direction:column;
    overscroll-behavior:none; touch-action:pan-y;
  }
  .sidebar-drawer.open { transform:translateY(0) !important; }
  .sidebar-drawer::before {
    content:''; display:block; width:40px; height:4px;
    background:var(--cream-3); border-radius:2px;
    margin:12px auto 4px; flex-shrink:0;
  }
  /* This used to guess the header+apply-button height (130px) and
     subtract it from the drawer's 85vh to size the scrollable middle â€"
     whenever that guess ran short (long filter lists, a header that
     wraps, etc.) the actual footer got pushed past the drawer's own
     overflow:hidden edge and was clipped, along with whatever filter
     options should have been scrollable above it. flex:1 1 auto with
     min-height:0 lets it take exactly whatever space the header/footer
     (both flex-shrink:0) don't use â€" no guessing, same fix pattern as
     the hero/marquee split earlier. */
  .sidebar { flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px 0 16px; overscroll-behavior:contain; }
  .sidebar-mob-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; border-bottom:1px solid var(--cream-3); flex-shrink:0;
  }
  .sidebar-mob-hdr span { font-family:var(--serif); font-size:18px; color:var(--text); }
  .sidebar-mob-hdr button {
    width:32px; height:32px; border-radius:50%; background:var(--cream-2);
    border:none; font-size:18px; line-height:1; color:var(--text-mid);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .sidebar-mob-apply {
    flex-shrink:0; padding:14px; background:var(--teal); color:#fff;
    font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
    border:none; cursor:pointer; font-family:var(--sans);
  }
  .sidebar-backdrop {
    display:block; position:fixed; inset:0; z-index:1499;
    background:rgba(0,0,0,0.5); opacity:0; visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
  }
  .sidebar-backdrop.open { opacity:1; visibility:visible; }
  .mob-filter-btn {
    display:flex; align-items:center; gap:6px; flex:1;
    padding:10px 16px; border:1.5px solid var(--cream-3); border-radius:30px;
    background:var(--white); font-size:12px; font-weight:600; color:var(--text-mid);
    cursor:pointer; font-family:var(--sans); white-space:nowrap; justify-content:center;
  }
  .mob-filter-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
  .prods-topbar-actions { display:flex; gap:8px; align-items:center; flex:1; flex-wrap:wrap; }
  .prods-topbar-actions .sort-sel { flex:1 1 auto; min-width:0; font-size:11px; padding:9px 10px; }
  .prods-area { padding:20px 24px 50px; }
  footer { padding:36px 20px 0; }
  .ft-grid { grid-template-columns:1fr; gap:0; border-bottom:none; padding-bottom:0; }
  .ft-chevron { display:block; }
  .ft-col h4 { padding:14px 0; border-bottom:1px solid var(--cream-3); margin-bottom:0; }
  .ft-acc-hdr { cursor:pointer; }
  .ft-acc-hdr.open .ft-chevron { transform:rotate(180deg); }
  .ft-col ul { max-height:0; overflow:hidden; transition:max-height 0.35s ease; gap:0; }
  .ft-col ul.open { max-height:500px; padding:12px 0 16px; gap:11px; }
  .ft-col ul li a { min-height:42px; display:flex; align-items:center; padding-left:0; }
  .ft-soc { width:44px; height:44px; }
  .pd-breadcrumb,.pd-gallery,.pd-info,.pd-related { padding-left:24px; padding-right:24px; }
  .cart-header,.cart-layout,.wish-grid { padding-left:24px; padding-right:24px; }
}
@media(max-width:768px) {
  .hero-video-wrap { height:70vh; min-height:400px; max-height:600px; padding-top:70px; }
  .hfg { grid-template-columns:1fr; }
  .prods-grid, .wish-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
  .pc-name { font-size:14px; }
  .pc-sub { font-size:10px; }
  .pc-price { font-size:12px; }
  .testi-card { flex:0 0 84%; padding:26px 22px; }
  .testi-text { font-size:15px; line-height:1.6; margin-bottom:18px; }
  .testi-stars { margin-bottom:14px; }
  .testimonials { padding:44px 0; }
  .testi-grid { gap:12px; padding:0 20px; }
  .pd-actions { grid-template-columns:1fr; }
  .cart-item { grid-template-columns:80px 1fr; }
  .ci-right { display:none; }
  .hero-content { padding:60px 18px 40px; }
  .hero-btns { flex-direction:column; gap:10px; }
  .hero-btns .btn-primary, .hero-btns .btn-outline { width:100%; text-align:center; padding:14px 20px; }
  .hero-trust { gap:24px; }
  .home-cats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .nl-inner { flex-direction:column; gap:24px; }
  .nl-form { max-width:100%; width:100%; }
  .ft-bottom { flex-direction:column; align-items:flex-start; gap:14px; padding:16px 0; }
  .ft-legal { flex-wrap:wrap; gap:10px; }
  .ft-legal a { padding:6px 0; }
  .ft-copy { font-size:12px; }
  .pd-gallery { padding:20px 18px; }
  .pd-info { padding:20px 18px; }
  .pd-thumbs-wrap { width:100%; }
  .pd-title { font-size:24px !important; padding-right:50px; }
  .pd-price { font-size:28px; }
  .prods-topbar { flex-direction:column; align-items:stretch; }
  .prods-topbar .prods-count.gem-visible { display:none; }
  .prods-topbar-actions { width:100%; }
  .newsletter { padding:36px 18px; }
  .testimonials { padding:50px 18px; }
  h1.hero-title { font-size:clamp(32px,9vw,46px); }
  .section-title { font-size:clamp(26px,7vw,36px); }
  /* On mobile, product cards run edge-to-edge with their price/cart-icon
     row right at the card's bottom â€" sitting this button at bottom:22px
     put it directly on top of that row for any section in view at that
     scroll position (its opaque background then hides the price text
     underneath). Raising it clears that row instead of covering it. */
  #back-top { bottom:78px; left:14px; width:36px; height:36px; }
  .home-cats { padding:28px 0; overflow-x:hidden; }
  .home-featured { padding:0 18px 40px; }
  .toast { right:14px; left:14px; bottom:16px; }
}
@media(max-width:600px) {
  .prods-grid, .wish-grid { grid-template-columns:repeat(2,1fr); }
}

/* --------------------------------
   ABOUT US PAGE
-------------------------------- */
.about-page { padding-top: 70px; min-height: 100vh; }

/* Hero banner */
.ab-hero {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  padding: 80px 60px 70px;
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ab-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(211, 40, 40, 0.699);
  pointer-events: none;
}
.ab-hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(20, 153, 230, 0.712);
  pointer-events: none;
}
/* These red/blue circles were decoration for the plain teal-gradient
   fallback background â€" fine on flat teal, but they sit on top of an
   uploaded banner photo as harsh color blobs. Hide them once a real
   banner image is applied (see _applyBanner adding .has-banner). */
.ab-hero.has-banner::before,
.ab-hero.has-banner::after {
  display: none;
}
.ab-eyebrow {
  font-size: 10px; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 16px;
}
.ab-hero h1 {
  font-family: var(--serif); font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 400; color: #fff; line-height: 1.1; margin-bottom: 18px;
}
.ab-hero h1 em { font-style: normal; font-weight: 700; color: rgba(255,255,255,.75); }
.ab-hero p {
  font-size: 15px; color: rgba(255,255,255,.65);
  max-width: 520px; margin: 0 auto; line-height: 2; font-weight: 300;
}

/* Stat ribbon */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border-bottom: 1px solid var(--cream-3);
}
.ab-stat {
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid var(--cream-3);
}
.ab-stat:last-child { border-right: none; }
.ab-stat-num {
  font-family: var(--serif); font-size: 40px; font-weight: 400;
  color: var(--gold); line-height: 1; margin-bottom: 6px;
}
.ab-stat-label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-light);
}

/* Story section */
.ab-story {
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: 0; max-width: 100%; align-items: center;
}
.ab-story-img {
  background: linear-gradient(145deg, var(--cream-2) 0%, var(--gold-light) 100%);
  min-height: 400px; max-height: 520px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; border-radius: 6px; margin: 30px 30px 30px 0;
}
.ab-story-gem {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.ab-story-content {
  padding: 70px 60px 70px 70px;
  background: var(--white);
  display: flex; flex-direction: column; justify-content: center;
}
.ab-story-img-mobile { display: none; }
.ab-story-content .section-tag { margin-bottom: 14px; }
.ab-story-content h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 400; color: var(--text); line-height: 1.2; margin-bottom: 20px; }
.ab-story-content h2 em { font-style: italic; color: var(--gold); }
.ab-story-content p { font-size: 14px; color: var(--text-mid); line-height: 2; font-weight: 300; margin-bottom: 16px; }
.ab-story-content p:last-of-type { margin-bottom: 28px; }

/* Pillars (Promise / Philosophy / Vision) */
.ab-pillars-wrap { padding: 90px 60px; background: var(--cream-2); }
.ab-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; max-width: 1140px; margin: 0 auto; align-items: stretch; }
.ab-pillar {
  background: var(--white); border: 1px solid var(--cream-3); border-top: 3px solid var(--gold);
  padding: 44px 38px; box-shadow: var(--shadow); transition: all var(--tr);
  text-align: center; display: flex; flex-direction: column; height: 100%;
}
.ab-pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--gold); }
.ab-pillar-icon {
  width: 68px; height: 68px; color: var(--gold); margin: 0 auto 24px;
  background: var(--gold-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ab-pillar-icon svg { width: 30px; height: 30px; }
.ab-pillar-title { font-family: var(--serif); font-size: 22px; color: var(--text); margin-bottom: 16px; }
.ab-pillar-body { font-size: 14px; line-height: 1.85; color: var(--text-mid); font-weight: 300; text-align: left; }
@media(max-width:900px) {
  .ab-pillars-wrap { padding: 50px 24px; }
  .ab-pillars { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:600px) {
  .ab-pillars-wrap { padding: 32px 20px; }
  .ab-pillars { gap: 14px; }
  .ab-pillar { padding: 26px 22px; }
  .ab-pillar-icon { width: 52px; height: 52px; margin-bottom: 14px; }
  .ab-pillar-icon svg { width: 24px; height: 24px; }
  .ab-pillar-title { font-size: 19px; margin-bottom: 10px; }
  .ab-pillar-body { line-height: 1.6; }
}

/* Values */
.ab-values { padding: 90px 60px; background: var(--cream-2); }
.ab-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 56px auto 0; }
.ab-val-card {
  background: var(--white); border: 1px solid var(--cream-3);
  padding: 36px 30px; box-shadow: var(--shadow);
  transition: all var(--tr);
}
.ab-val-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.ab-val-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold-light); display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.ab-val-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.ab-val-title { font-family: var(--serif); font-size: 20px; color: var(--text); margin-bottom: 10px; }
.ab-val-desc { font-size: 13px; color: var(--text-mid); line-height: 1.9; font-weight: 300; }

/* Certificates */
.ab-certs { padding: 90px 60px; background: var(--white); }
.ab-certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1100px; margin: 56px auto 0; }
.ab-cert-card {
  border: 1px solid var(--cream-3); padding: 28px 22px;
  text-align: center; transition: all var(--tr); background: var(--cream);
}
.ab-cert-card:hover { border-color: var(--gold); background: var(--gold-light); }
.ab-cert-badge {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--white); border: 2px solid var(--cream-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 22px; color: var(--gold);
}
.ab-cert-card:hover .ab-cert-badge { border-color: var(--gold); }
.ab-cert-name { font-family: var(--serif); font-size: 15px; color: var(--text); margin-bottom: 6px; }
.ab-cert-desc { font-size: 11px; color: var(--text-light); line-height: 1.7; letter-spacing: .3px; }

/* Journey Timeline (legacy â€" replaced by .abtl-*) */
.ab-timeline { padding: 90px 60px; background: var(--cream-2); }

/* Premium Journey Timeline */
.abtl-section { padding: 90px 60px; background: var(--cream-2); }
.abtl-inner { max-width: 780px; margin: 0 auto; }
.abtl-section .sec-hdr { margin-bottom: 60px; }
.abtl-section .sec-hdr h2 { font-family: var(--serif); font-size: clamp(30px,4vw,44px); font-weight: 400; color: var(--text); line-height: 1.2; margin-bottom: 14px; }
.abtl-section .sec-hdr h2 em { font-style: italic; color: #B8935A; }
.abtl-section .sec-hdr p { font-size: 14px; color: var(--text-mid); line-height: 1.8; max-width: 480px; margin: 0 auto; }
.abtl-track { position: relative; padding-left: 150px; }
.abtl-track::before { content: ''; position: absolute; left: 100px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, rgba(184,147,90,.7) 0%, rgba(184,147,90,.1) 100%); }
.abtl-item { position: relative; padding-bottom: 48px; transition: transform 0.25s; }
.abtl-item:last-child { padding-bottom: 0; }
.abtl-item:hover { transform: translateX(4px); }
.abtl-yr { position: absolute; left: -150px; width: 76px; text-align: right; top: -1px; font-family: var(--serif); font-size: 22px; color: #B8935A; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; }
.abtl-node { position: absolute; left: -55px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: #B8935A; border: 3px solid var(--cream-2); box-shadow: 0 0 0 1px rgba(184,147,90,.5); z-index: 1; }
.abtl-title { font-family: var(--serif); font-size: 19px; color: var(--text); font-weight: 600; margin-bottom: 8px; line-height: 1.3; transition: color 0.25s; }
.abtl-desc { font-size: 13px; color: var(--text-mid); line-height: 1.9; font-weight: 300; max-width: 460px; }
.abtl-item:hover .abtl-title { color: #B8935A; }
@media(max-width:700px) {
  .abtl-section { padding: 60px 24px; }
  .abtl-track { padding-left: 84px; }
  .abtl-track::before { left: 54px; }
  .abtl-yr { left: -84px; width: 46px; font-size: 17px; }
  .abtl-node { left: -32px; }
}

/* Team / Founder */
.ab-team { padding: 40px 60px; background: var(--white); }
.ab-founder-card {
  max-width: 1040px; margin: 56px auto 0; display: flex; align-items: flex-start; gap: 56px; text-align: left;
  background: var(--white); border: 1px solid var(--cream-3); border-radius: 4px;
  padding: 50px 56px; box-shadow: var(--shadow);
}
.ab-founder-photo {
  width: 320px; height: 320px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; object-position: top center;
  border: 6px solid var(--cream-2); box-shadow: var(--shadow);
}
.ab-founder-info { padding-top: 6px; }
.ab-founder-name { font-family: var(--serif); font-size: 24px; color: var(--text); margin-bottom: 6px; font-weight: 500; }
.ab-founder-role { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--cream-3); }
.ab-founder-bio { font-size: 14px; color: var(--text-mid); line-height: 1.9; font-weight: 300; text-align: left; }
.ab-founder-bio p { margin-bottom: 18px; padding-left: 16px; border-left: 2px solid var(--gold-light); }
.ab-founder-bio p:last-child { margin-bottom: 0; }
@media(max-width:760px) {
  .ab-founder-card { flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 36px 28px; }
  .ab-founder-bio, .ab-founder-bio p { text-align: left; }
}
@media(max-width:600px) {
  .ab-team { padding: 28px 20px; }
  .ab-founder-card { gap: 16px; padding: 26px 20px; margin-top: 32px; }
  .ab-founder-photo { width: 160px; height: 160px; border-width: 4px; }
  .ab-founder-name { font-size: 20px; margin-bottom: 4px; }
  .ab-founder-role { margin-bottom: 14px; padding-bottom: 14px; }
  .ab-founder-bio { line-height: 1.7; }
  .ab-founder-bio p { margin-bottom: 12px; padding-left: 12px; }
}

/* CTA */
.ab-cta {
  padding: 60px 60px 90px; text-align: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  position: relative; overflow: hidden;
}
.ab-cta::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 65%);
  pointer-events: none;
}
.ab-cta-icon { position: relative; width: 40px; height: 40px; margin: 0 auto 20px; color: rgba(255,255,255,.85); }
.ab-cta-icon svg { width: 100%; height: 100%; }
.ab-cta h2 { position: relative; font-family: var(--serif); font-size: clamp(28px, 4vw, 46px); font-weight: 400; color: #fff; line-height: 1.15; margin-bottom: 16px; }
.ab-cta h2 em { font-style: italic; color: rgba(255,255,255,.7); }
.ab-cta p { position: relative; font-size: 14px; color: rgba(255,255,255,.6); max-width: 440px; margin: 0 auto 36px; line-height: 2; font-weight: 300; }
.ab-cta-btns { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ab-cta-btns .btn-white { background: #fff; color: var(--gold-deep); border-color: #fff; }
.ab-cta-btns .btn-white:hover { background: transparent; color: #fff; }
.ab-cta-btns .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.ab-cta-btns .btn-outline:hover { background: #fff; color: var(--gold-deep) !important; border-color: #fff; }

/* Responsive */
@media(max-width:1060px) {
  .ab-stats { grid-template-columns: repeat(2,1fr); }
  .ab-stat:nth-child(2) { border-right: none; }
  .ab-certs-grid { grid-template-columns: repeat(2,1fr); }
  .ab-story { grid-template-columns: 1fr; }
  .ab-story-img { min-height: 280px; }
  .ab-story-content { padding: 50px 40px; }
}
@media(max-width:600px) {
  .ab-story-img { display: none; }
  .ab-story-img-mobile { display: block; width: 100%; height: 220px; margin-bottom: 24px; border-radius: 4px; overflow: hidden; }
  .ab-story-img-mobile img { width: 100%; height: 100%; object-fit: cover; }
}
@media(max-width:860px) {
  .ab-hero { padding: 70px 24px 60px; }
  .ab-hero::before { width: 180px; height: 180px; top: -50px; right: -50px; }
  .ab-hero::after { width: 130px; height: 130px; bottom: -40px; left: -40px; }
  .ab-values, .ab-certs, .ab-timeline, .ab-team, .ab-cta { padding-left: 24px; padding-right: 24px; }
  .ab-values-grid, .ab-team-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
  .ab-stats { grid-template-columns: repeat(2,1fr); }
  .ab-stat { padding: 24px 14px; }
  .ab-stat-num { font-size: 30px; }
  .ab-values-grid { grid-template-columns: 1fr; }
  .ab-certs-grid { grid-template-columns: repeat(2,1fr); }
  .ab-team-grid { grid-template-columns: 1fr; }
.ab-cta-btns { flex-direction: column; align-items: center; }
  .ab-story-content { padding: 36px 18px; }
}
/* ============================================================
   HERO VIDEO
   ============================================================ */

/* Wrapper lets the marquee's real rendered height always be fully shown,
   with the hero shrinking to make room for it â€" instead of the hero
   guessing a fixed px value for the marquee's height (which varies
   slightly by device font rendering and was never quite exact). */
.hero-marquee-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
  padding-top: 70px;
  box-sizing: border-box;
  height: calc(38vw + 70px);
  flex: 0 1 auto;
  min-height: 0;
}
@media(max-width:1200px) {
  .hero-video-wrap { height:calc(50vw + 70px); }
}
@media(max-width:768px) {
  .hero-video-wrap { height:70vh !important; min-height:400px !important; max-height:600px; }
}
.marquee-wrap { display: none !important; }
.hero-video-wrap a {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-video-wrap a[href=""] ,
.hero-video-wrap a:not([href]) {
  pointer-events: none;
  cursor: default;
}
#hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hero-video-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(245,241,232,0.03) 15%,
    rgba(245,241,232,0.08) 30%,
    rgba(245,241,232,0.18) 45%,
    rgba(245,241,232,0.35) 60%,
    rgba(245,241,232,0.55) 72%,
    rgba(245,241,232,0.78) 84%,
    rgba(245,241,232,0.92) 93%,
    #F5F1E8 100%);
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   CATEGORY PHOTO GRID  (magazine layout)
   ============================================================ */

.cat-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 60px;
}

/* -- Individual card -- */
.cat-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--cream-3);
  transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease;
}
@media(hover:hover) {
  .cat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(28,23,20,0.22); }
  .cat-card:hover .cat-card-overlay { opacity: .58; }
  .cat-card:hover .cat-card-popup { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .cat-card:hover .cat-card-info { opacity: 0; }
}
.cat-card:active { transform: translateY(-2px); }

/* Background fills the card */
.cat-card-bg {
  position: absolute;
  inset: 0;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Illustrative SVG */
.cat-illus {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient overlay at bottom */
.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(10,8,6,0.3) 65%,
    rgba(10,8,6,0.72) 100%
  );
  transition: opacity 0.35s ease;
  opacity: .45;
}

/* Text label */
.cat-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-card-name {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1.5px;
  transition: letter-spacing 0.3s ease;
}
.cat-card-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.5px;
}

/* Hover popup box */
.cat-card-popup {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(20, 15, 10, 0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.30s ease, transform 0.30s cubic-bezier(0.34,1.2,0.64,1);
  pointer-events: none;
}
.cat-card-popup-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.2;
}
.cat-card-popup-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.5px;
  text-align: center;
}
.cat-card-popup-btn {
  margin-top: 8px;
  padding: 10px 28px;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cat-card-popup-btn:hover { background: var(--teal); color: #fff; }

/* Large card (left column). clamp() instead of stepped breakpoints so it
   scales continuously with the screen instead of jumping between a few
   fixed sizes (220/260/340/580px before) â€" any width in between now gets
   a proportionate size instead of inheriting whichever fixed value was
   nearest. */
.cat-card--large {
  /* This clamp() height was computed independently of the stack on the
     right (wide card + 12px gap + bottom row) â€" at "laptop" widths
     roughly 1120-1500px wide, the stack's own two clamp()s were both
     already saturated at their max while this one hadn't caught up yet,
     so the two columns never actually matched and left a gap below this
     card. min-width:861px below overrides this with height:auto once
     the two sit side-by-side, letting CSS grid's default row-stretch
     make this card exactly match the stack's real height instead of a
     second, disconnected formula guessing at the same number. This value
     only still applies at <=860px, once they stack vertically instead
     and each needs its own explicit height. */
  height: clamp(220px, 30vw, 580px);
  grid-row: 1;
}
@media (min-width: 861px) {
  .cat-card--large { height: auto; align-self: stretch; }
}

/* Right column: top wide card + bottom row of 2 */
.cat-card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-card--small {
  flex: 1;
  min-height: clamp(135px, 16vw, 160px);
}
/* Top wide card spanning full right column */
.cat-card--wide {
  flex: 0 0 auto;
  height: clamp(165px, 25vw, 280px);
}
/* Bottom row: two equal cards side by side */
.cat-card-bottom-row {
  display: flex;
  gap: 12px;
  flex: 1;
}
.cat-card-bottom-row .cat-card--small {
  flex: 1;
  min-height: clamp(135px, 16vw, 160px);
}

/* -- Dark mode -- */

/* -- Responsive -- */
/* Card heights now scale continuously via clamp() above (see .cat-card--large/
   --wide/--small) instead of jumping between fixed values at each of these
   breakpoints â€" only the structural layout changes (columns → 1, stacking
   direction, spacing, font-size) still need to happen at specific widths. */
@media (max-width: 860px) {
  .cat-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 18px 40px;
    gap: 10px;
  }
  .cat-card-stack, .cat-card-bottom-row { display: contents; }
  .cat-card--large, .cat-card--wide, .cat-card-bottom-row .cat-card--small {
    height: clamp(160px, 28vw, 240px);
    min-height: 0;
    flex: none;
  }
  .cat-card-info { padding: 16px 18px; }
  .cat-card-name { font-size: 17px; }
}

@media (max-width: 600px) {
  /* Mirrors the desktop 2-column arrangement instead of one long stack of
     full-width cards â€" but without the desktop's "one big hero + smaller
     ones" asymmetry, since that ratio only reads well with more width to
     work with. display:contents "unwraps" .cat-card-stack and
     .cat-card-bottom-row so their children (wide card, the two small
     cards) become direct grid items alongside the large card â€" all 4
     then sit in a plain, equal-sized 2x2 grid. */
  .cat-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 10px 28px;
    gap: 8px;
  }
  .cat-card-stack, .cat-card-bottom-row { display: contents; }
  .cat-card--large, .cat-card--wide, .cat-card-bottom-row .cat-card--small {
    height: clamp(130px, 40vw, 190px);
    min-height: 0;
    flex: none;
  }
  .cat-card-info { padding: 12px 14px; }
  .cat-card-name { font-size: 15px; letter-spacing: 1px; }
  .cat-card-sub { font-size: 10px; }
  .cat-card { border-radius: 8px; }
}

@media (max-width: 420px) {
  .cat-photo-grid {
    padding: 0 12px 24px;
    gap: 7px;
  }
  .cat-card-bottom-row { flex-direction: column; gap: 7px; }
  .cat-card--small { flex: unset; width: 100%; }
  .cat-card-info { padding: 10px 12px; gap: 2px; }
  .cat-card-name { font-size: 14px; letter-spacing: 0.8px; }
  .cat-card-sub { font-size: 9.5px; }
}

/* ============================================================
   FEATURED BESTSELLERS SECTION
   ============================================================ */

.home-featured {
  padding: 0 0 40px;
  background: #fff;
}
/* .hf-slider-wrap below bleeds 52px past its own edges to place the
   prev/next arrows in the gutter (same trick .home-reels-wrap uses).
   .home-reels protects that bleed with 60px of its own side padding;
   this section had none, so on any width narrower than max-width:1280px
   + (2*52px) â€" i.e. the "laptop" range â€" the auto margins shrink below
   52px and the arrows get pushed past the section edge, where the
   sitewide overflow-x:clip on html/body hides them entirely. Matching
   .home-reels' 60px here closes that gap. Scoped with min-width instead
   of editing the base rule above, so it can never out-cascade the
   narrower mobile overrides further down the file regardless of source
   order â€" that's exactly what broke card width on real phones the first
   time this was added directly to the base rule. */
@media (min-width: 601px) {
  .home-featured { padding: 0 60px 90px; }
}
@media (max-width: 600px) {
  .home-featured { padding: 0 18px 40px; }
}
.home-featured-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 90px;
}

/* -- Filter tabs -- */
.hf-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 36px;
  padding: 0 32px;
}
.hf-tab {
  padding: 9px 22px;
  border-radius: 50px;
  border: 1.5px solid var(--cream-3);
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-mid);
  cursor: pointer;
  transition: all var(--tr);
  letter-spacing: 0.3px;
}
.hf-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.hf-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 500;
}

/* -- Slider wrapper -- */
.hf-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 -52px;
}

/* -- Arrow buttons -- */
.hf-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--cream-3);
  box-shadow: 0 2px 12px rgba(27,58,107,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: all var(--tr);
  margin: 0 6px;
}
.hf-arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(26,95,173,0.28);
}
.hf-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--tr);
}
.hf-arrow:hover svg { stroke: #fff; }

/* -- The scrollable grid -- */
.hfg {
  display: flex !important;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 0 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
}
.hfg::-webkit-scrollbar { display: none; }

/* -- Bestseller card -- */
.bs-card {
  flex: 0 0 280px;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--cream-3);
  border-radius: 4px;
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr);
}
.bs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Image area "" light grey like the reference */
.bs-img {
  aspect-ratio: 1;
  background: #F0EEEB;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.bs-img svg { width: 70%; height: 70%; }
.bs-card:hover .pc-img-hover { opacity:1; }

/* Info area */
.bs-info {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--cream-3);
}
.bs-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bs-orig {
  font-size: 11px;
  color: var(--text-light);
  text-decoration: line-through;
  font-family: var(--sans);
}
.bs-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--sans);
  flex: 1;
}
.bs-cart-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--cream-3);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--tr);
}
.bs-cart-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.bs-cart-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--tr);
}
.bs-cart-btn:hover svg { stroke: #fff; }
.bs-name {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Responsive -- */
@media (max-width: 768px) {
  /* Cards fit exactly on mobile now, with no peek of the next one to
     hint that the row scrolls â€" so instead of hiding the arrows, move
     them below the row as a centered pair. hfg forces a line break by
     taking the full row width (order:1, flex-basis:100%), then both
     arrows wrap onto their own row together right after it. */
  .hf-slider-wrap { flex-wrap: wrap; justify-content: center; margin: 0; }
  .hfg { order: 1; flex: 0 0 100%; padding: 12px 20px 20px; }
  .hf-arrow { display: flex; width: 36px; height: 36px; margin: 14px 6px 0; }
  .hf-prev { order: 2; }
  .hf-next { order: 3; }
  .bs-card { flex: 0 0 220px; }
  /* Nobody explicitly designed the "one pill per row" look â€" it's just
     flex-wrap's default line-breaking once 6 variable-width pills no
     longer fit two-per-row in a narrow container, leaving each mostly-
     empty row centered on its own. Scrolling them in a single row
     (same pattern as the gem-chip strip) reads intentional instead. */
  .hf-filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0 12px; gap: 6px; scrollbar-width: none; -ms-overflow-style: none; }
  .hf-filters::-webkit-scrollbar { display: none; }
  .hf-tab { flex-shrink: 0; padding: 6px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
  /* Sized so two cards actually fit side by side on a phone screen
     instead of one full card plus an odd sliver of the next â€" the old
     190px width left barely enough room for ~1.1 cards. */
  .bs-card { flex: 0 0 155px; }
  .hfg { padding: 12px 12px 20px; }
  /* This rule sits later in the file than the ≤768px block's own
     .hf-tab sizing, so at ≤480px it was winning and silently
     overriding the tighter mobile values back to the larger ones. */
  .hf-tab { padding: 5px 7px; font-size: 10.5px; }
  .hf-filters { padding: 0 6px; gap: 3px; }
}

/* ============================================================
   SHOP BY COLLECTION "" Precise 9-col masonry grid
   ============================================================ */

.sbc-section {
  background: var(--cream-2);
  padding: 55px 0 80px;
}

.sbc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* -- 10-column grid, 3 rows --
   Row1: Padma(c1-6,r1-2)  | Stackable(c7-8,r1)   | Mens(c9-10,r1)
   Row2: Padma(c1-6,r1-2)  | Gold(c7-8,r2)         | Engagement(c9-10,r2)
   Row3: Vanki(c1-3,r3)    | Solitaire(c4-6,r3)    | Gifts(c7-10,r3)
   Vanki & Solitaire = 3 cols each (equal). Gifts = 4 cols = right column width.
*/

/* Row heights use clamp() so they scale continuously with the screen
   instead of jumping between fixed values at a couple of breakpoints â€"
   any width down to the 768px structural change below gets a
   proportionate size instead of inheriting whichever fixed value was
   nearest (this also fixes a real bug the old stepped values had: a
   1030px-wide screen was getting a *smaller* row height than a
   1020px-wide one, since the breakpoints crossed over the wrong way). */
.sbc-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: clamp(180px, 19.5vw, 245px) clamp(180px, 19.5vw, 245px) clamp(155px, 16.7vw, 210px);
  gap: 8px;
}

/* PADMA CUT DIAMOND "" col 1-6, row 1-2 */
.sbc-padma {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
}

/* STACKABLE RING "" col 7-8, row 1 */
.sbc-sm:nth-child(2) {
  grid-column: 7 / 9;
  grid-row: 1;
}

/* MEN'S JEWELLERY "" col 9-10, row 1 */
.sbc-sm:nth-child(3) {
  grid-column: 9 / 11;
  grid-row: 1;
}

/* GOLD JEWELLERY "" col 7-8, row 2 */
.sbc-sm:nth-child(4) {
  grid-column: 7 / 9;
  grid-row: 2;
}

/* ENGAGEMENT RINGS "" col 9-10, row 2 */
.sbc-sm:nth-child(5) {
  grid-column: 9 / 11;
  grid-row: 2;
}

/* VANKI RINGS "" col 1-3, row 3 (equal 3 cols) */
.sbc-bot-sm:nth-child(6) {
  grid-column: 1 / 4;
  grid-row: 3;
}

/* SOLITAIRE SELECTION "" col 4-6, row 3 (equal 3 cols) */
.sbc-bot-sm:nth-child(7) {
  grid-column: 4 / 7;
  grid-row: 3;
}

/* GIFTS UNDER 30K "" col 7-10, row 3 (4 cols "" aligns with right column above) */
.sbc-gifts {
  grid-column: 7 / 11;
  grid-row: 3;
}

/* -- Shared card base -- */
.sbc-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  background: #0a1020;
  transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease;
}
@media(hover:hover) {
  .sbc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.35); }
  .sbc-card:hover .sbc-overlay { opacity: 0.55; }
  .sbc-card:hover .sbc-label { opacity: 0; }
  .sbc-card:hover .sbc-popup { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
.sbc-card:active { transform: translateY(-2px); }

/* SVG background fills the card */
.sbc-bg {
  position: absolute;
  inset: 0;
  transition: none;
  display: flex;
  align-items: stretch;
}
.sbc-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Gradient overlay */
.sbc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 28%,
    rgba(6, 10, 22, 0.22) 55%,
    rgba(6, 10, 22, 0.68) 100%
  );
  transition: opacity 0.35s ease;
  opacity: 0.45;
}

/* Text label */
.sbc-label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 16px 18px;
  z-index: 2;
  transition: opacity 0.25s ease;
}
.sbc-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
  letter-spacing: 0.2px;
  display: block;
}

/* Hover popup */
.sbc-popup {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: rgba(6, 10, 22, 0.60);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.30s ease, transform 0.30s cubic-bezier(0.34,1.2,0.64,1);
  pointer-events: none;
}
.sbc-popup-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.4px;
  text-align: center;
  line-height: 1.25;
}
.sbc-popup-btn {
  margin-top: 6px;
  padding: 9px 24px;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sbc-popup-btn:hover { background: var(--teal); color: #fff; }

/* -- Dark mode -- */

/* -- POLICY MODAL -- */
.policy-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(28,23,20,0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.policy-modal-overlay.open { display: flex; }
.policy-modal {
  background: var(--white);
  border-radius: 8px;
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(28,23,20,0.18);
  overflow: hidden;
}
.policy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 30px 20px;
  border-bottom: 1px solid var(--cream-3);
  flex-shrink: 0;
}
.policy-modal-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.2px;
}
.policy-modal-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cream-2);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-mid);
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s;
}
.policy-modal-close:hover { background: var(--cream-3); }
.policy-modal-body {
  padding: 28px 30px 36px;
  overflow-y: auto;
  flex: 1;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-mid);
}
.policy-modal-body h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
  border-bottom: 1px solid var(--cream-3);
  padding-bottom: 6px;
}
.policy-modal-body h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 18px 0 5px;
  letter-spacing: 0.3px;
}
.policy-modal-body p { margin-bottom: 10px; }
.policy-modal-body ul { margin: 6px 0 10px 18px; }
.policy-modal-body ul li { margin-bottom: 4px; }
.policy-modal-body .policy-date {
  font-size: 11px;
  color: var(--text-light);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* -- Responsive -- */
/* The old ≤1024px tier duplicated the same 10-column spans as the base rule
   and only changed row heights â€" now handled by clamp() in the base rule
   above, so this whole tier is redundant and removed. */
@media (max-width: 768px) {
  .sbc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 8px;
  }
  .sbc-padma,
  .sbc-sm:nth-child(2),
  .sbc-sm:nth-child(3),
  .sbc-sm:nth-child(4),
  .sbc-sm:nth-child(5),
  .sbc-bot-sm:nth-child(6),
  .sbc-bot-sm:nth-child(7),
  .sbc-gifts {
    grid-column: auto;
    grid-row: auto;
    min-height: 180px;
  }
  .sbc-padma { grid-column: 1 / 3; min-height: 240px; }
  .sbc-gifts { grid-column: 1 / 3; }
  .sbc-name { font-size: 13px; }
}

@media (max-width: 480px) {
  .sbc-inner { padding: 0 12px; }
  .sbc-grid { gap: 6px; }
  .sbc-padma { min-height: 200px; }
  .sbc-sm:nth-child(2),
  .sbc-sm:nth-child(3),
  .sbc-sm:nth-child(4),
  .sbc-sm:nth-child(5),
  .sbc-bot-sm:nth-child(6),
  .sbc-bot-sm:nth-child(7) { min-height: 155px; }
  .sbc-label { padding: 12px 14px; }
}



/* ============================================================
   MEGA MENU "" Collections
   ============================================================ */

/* Override dropdown for mega-item */
.mega-item { position: static; }

.mega-menu {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  width: 100%;
  min-width: unset;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  transform: translateY(-10px);
  display: flex;
  flex-direction: row;
  gap: 0;
  /* Scales down with viewport height first, so on shorter screens the
     content itself shrinks to fit instead of relying on the scrollbar
     above (which stays only as a safety net for extreme cases). */
  padding: clamp(18px, 4vh, 36px) 60px clamp(16px, 3.5vh, 32px);
  background: var(--white);
  border-top: 2px solid var(--cream-3);
  border-bottom: 1px solid var(--cream-3);
  box-shadow: 0 24px 60px rgba(28,23,20,0.12);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.mega-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-item.mega-force-close .mega-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -- Columns -- */
.mega-col {
  flex: 1;
  padding-right: 28px;
  border-right: 1px solid var(--cream-3);
  margin-right: 28px;
}
.mega-col:last-of-type {
  border-right: none;
  margin-right: 24px;
}

.mega-col-title {
  font-family: var(--sans);
  font-size: clamp(18px, 2.5vh, 22px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--teal);
  text-align: center;
  margin-bottom: clamp(6px, 1.4vh, 14px);
  padding-bottom: clamp(4px, 1vh, 10px);
  border-bottom: 1px solid var(--cream-3);
}

.mega-col-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: clamp(6px, 1.3vh, 12px) 0 clamp(3px, 0.7vh, 6px);
}
.mega-col-sub:first-of-type { margin-top: 4px; }

.mega-link {
  display: block;
  font-family: var(--sans);
  /* Columns like "By Cut" have 10+ links stacked â€" on a short screen
     the text's own line-height adds up to more height than the
     padding ever did, so that has to shrink too or the scrollbar
     comes right back regardless of how tight the padding gets. */
  font-size: clamp(12px, 1.9vh, 14.5px);
  line-height: clamp(1.1, calc(1.9vh / 12px), 1.3);
  font-weight: 400;
  color: var(--text-mid);
  padding: clamp(2px, 0.9vh, 6px) 0;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
  white-space: nowrap;
}
.mega-link:hover {
  color: var(--gold);
  padding-left: 6px;
}
.mega-link--hot {
  color: #c0203a;
  font-weight: 500;
}
.mega-link--hot:hover { color: #a01828; }

/* -- Right visual panel -- */
.mega-visual {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vh, 14px);
}

.mega-visual-card {
  position: relative;
  /* Was width-only (21.9vw), so on a short-but-wide viewport it stayed
     near its 280px floor regardless of how little vertical room there
     actually was. min() against a vh figure lets it shrink with the
     screen's height too, not just its width. */
  height: clamp(180px, min(21.9vw, 30vh), 420px);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #0a1828;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}
.mega-visual-card:hover { transform: scale(1.02); }
.mega-visual-card svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.mega-visual-card:hover svg { transform: scale(1.04); }

/* Gradient overlay on image */
.mega-visual-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(6,12,28,0.82) 100%);
  pointer-events: none;
}

/* Text over image */
.mega-vis-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-vis-tag {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(248,228,160,0.9);
}
.mega-vis-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}
.mega-vis-cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* -- Category pills -- */
.mega-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mega-pill {
  padding: 6px 13px;
  border-radius: 50px;
  border: 1.5px solid var(--cream-3);
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.mega-pill:hover,
.mega-pill.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Dark mode */

/* -- Material category image grid inside Collections mega-menu -- */
.mega-material-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 4px 0;
  height: 100%;
}
.mega-material-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--cream-3);
  transition: transform 0.2s;
}
.mega-material-card:hover .mega-material-img img { transform: scale(1.06); }
.mega-material-card:hover .mega-material-name { opacity: 1; transform: translateY(0); font-size: 18px; }
.mega-material-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mega-material-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.mega-material-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  background: linear-gradient(transparent 0%, rgba(20,15,10,0.6) 100%);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.4px;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.35s ease, transform 0.35s ease, font-size 0.3s ease;
  font-family: var(--sans);
}

/* -- Collections + Products mega-menu: centred columns -- */
#coll-mega-menu, #prod-mega-menu { justify-content: center; }
#coll-mega-menu { align-items: stretch; min-height: clamp(380px, 55vh, 560px); }
.coll-mega-left {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  padding-right: 28px;
  border-right: 1px solid var(--cream-3);
  margin-right: 28px;
}
.coll-mega-right {
  flex: 1;
  display: flex;
  gap: 0;
}
.coll-mega-right .mega-col { flex: 1; }
#coll-mega-menu .mega-col { flex: 0 0 185px; }
#prod-mega-menu {
  flex-wrap: nowrap;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 24px 60px rgba(28,23,20,0.10);
}
#prod-mega-menu .mega-jew-layout { width: 100%; }
#prod-mega-menu .mega-col { flex: 0 0 auto; }

/* -- Shop by Style image grid inside Jewellery mega-menu -- */
.mega-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 0.7fr;
  gap: 5px;
  padding: 4px 0;
  height: clamp(380px, 55vh, 560px);
}
.mega-style-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  background: var(--cream-2, #f0ece4);
}
.mega-style-card:hover .mega-style-img img {
  transform: scale(1.06);
}
.mega-style-card:hover .mega-style-name {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 2.5px;
  font-size: 18px;
}
.mega-style-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } /* Necklaces - big square */
.mega-style-card:nth-child(2) { grid-column: 3;     grid-row: 1; }     /* Pendants - square */
.mega-style-card:nth-child(3) { grid-column: 4 / 6; grid-row: 1; }     /* Bangles - horizontal */
.mega-style-card:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }     /* Bracelets - horizontal */
.mega-style-card:nth-child(5) { grid-column: 3;     grid-row: 2 / 4; } /* Rings - vertical */
.mega-style-card:nth-child(6) { grid-column: 4;     grid-row: 2 / 4; } /* Earrings - vertical */
.mega-style-card:nth-child(7) { grid-column: 6;     grid-row: 1 / 4; } /* Mala - tall vertical (last) */
.mega-style-card:nth-child(8) { grid-column: 5;     grid-row: 2 / 4; } /* Anklets - vertical */
.mega-style-img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.mega-style-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.mega-style-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.35s ease, transform 0.35s ease, letter-spacing 0.3s ease, font-size 0.3s ease;
  text-align: center;
}

/* Jewellery mega two-panel layout */
.mega-jew-layout {
  width: 100%;
}
.mega-jew-left {
  padding: 10px 28px 16px;
}

/* -- Gemstone mega-menu: image grid -- */
.gem-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  margin-top: 4px;
}
.gem-img-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
}
.gem-img-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--cream-3);
  overflow: hidden;
  background: var(--cream);
  transition: border-color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.gem-img-item:hover .gem-img-circle {
  border-color: var(--gold);
  transform: scale(1.08);
}
.gem-img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gem-img-item span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-mid);
  text-transform: uppercase;
  line-height: 1.3;
  transition: color 0.2s;
}
.gem-img-item:hover span { color: var(--gold); }

/* -- Gemstone mega-menu: shape links -- */
.gem-shape-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shape-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-mid);
  transition: color 0.2s;
}
.gem-shape-link:hover .shape-icon { color: var(--gold); }

/* Hide mega on mobile */
@media (max-width: 768px) {
  .mega-menu { display: none !important; }
}
/* Laptop-width screens: content is wider than the viewport, causing the
   centred columns to overflow off both edges. Shrink the columns to fit
   and left-align, keeping the promo image visible but smaller. */
@media (max-width: 1600px) and (min-width: 769px) {
  #coll-mega-menu, #prod-mega-menu { justify-content: flex-start; }
  #coll-mega-menu .mega-col, #prod-mega-menu .mega-col {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 14px;
    margin-right: 14px;
  }
  .mega-visual { flex: 0 0 220px; }
  .mega-jew-left { padding: 12px 16px; }
  .mega-style-grid { gap: 4px; height: clamp(320px, 48vh, 450px); }
}
/* -- GEM RECOMMENDATION PAGE -- */
.gr-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.gr-field { display:flex; flex-direction:column; gap:6px; }
.gr-label { font-size:12px; font-weight:500; color:var(--text); letter-spacing:.3px; }
.gr-req { color:#e04a4a; }
.gr-input {
  padding:11px 14px;
  border:1px solid #d8d0c4;
  background:var(--white);
  font-family:var(--sans);
  font-size:13px;
  color:var(--text);
  outline:none;
  transition:border-color var(--tr);
  border-radius:3px;
  width:100%;
}
.gr-input:focus { border-color:var(--gold); }
.gr-input::placeholder { color:#bbb; }
.gr-select {
  padding:11px 14px;
  border:1px solid #d8d0c4;
  background:var(--white);
  font-family:var(--sans);
  font-size:13px;
  color:var(--text);
  outline:none;
  cursor:pointer;
  transition:border-color var(--tr);
  border-radius:3px;
  width:100%;
  appearance:auto;
}
.gr-select:focus { border-color:var(--gold); }
.gr-submit-btn {
  width:100%;
  padding:15px;
  background:var(--text);
  color:#fff;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:background var(--tr);
  margin-top:20px;
  border-radius:3px;
}
.gr-submit-btn:hover { background:var(--gold); }
.gr-benefit-item {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  background:var(--white);
  border:1px solid #ece6dc;
  border-radius:6px;
}
.gr-benefit-icon { font-size:22px; flex-shrink:0; margin-top:1px; }
.gr-benefit-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
.gr-benefit-desc { font-size:11px; color:var(--text-light); line-height:1.5; }
.gemrec-benefit-tag {
  display:inline-block; padding:4px 12px;
  background:var(--gold-light); border:1px solid var(--gold-dim);
  color:var(--gold); font-size:11px; border-radius:20px; letter-spacing:.5px;
}

/* ------------------------------------------------------------
   MOBILE AUDIT FIXES
   Additional responsive coverage for sections that had no
   breakpoint at all, plus touch-target / readability fixes for
   buttons and small text on phones. Added as a final pass so
   these rules win over the earlier component declarations.
------------------------------------------------------------ */

/* -- Nav header: keep logo + 5 icon buttons + hamburger from
      overflowing on narrow phones -- */
@media (max-width:600px) {
  .nav-inner { padding:0 20px; justify-content:space-between; }
  .nav-logo img { height:60px; }
  .nav-right { gap:2px; margin-left:0; margin-right:0; }
  .nav-icon { padding:6px; }
  .nav-icon svg { width:18px; height:18px; }
  .hamburger { padding:7px; }
}
@media (max-width:380px) {
  .nav-logo img { height:34px; }
  .nav-right { gap:0; }
}

/* -- Wishlist heart must be visible without a hover state on
      touch devices "" it was opacity:0 until :hover, which never
      fires on touch, making it invisible (though still tappable) -- */
@media (hover:none) {
  .pc-wish { opacity:1; }
}

/* -- Search overlay needs side padding so the box doesn't touch
      screen edges on phones -- */
@media (max-width:600px) {
  #search-overlay { padding:70px 14px 0; }
  .search-box { border-radius:12px; }
  #search-input { font-size:15px; }
  .search-result-item { padding:10px 16px; }
  .search-section-label { padding:10px 16px 4px; }
  .search-quick-tags { padding:14px 16px; }
}

/* -- Product Details (spec table + Kumud Promise box) must
      stack on mobile "" was a fixed 2-column grid at every size -- */
@media (max-width:860px) {
  .pd-details-section { padding:36px 24px; }
  .pd-details-inner { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:600px) {
  .pd-details-section { padding:30px 18px; }
  .pd-promise-grid { grid-template-columns:1fr 1fr; gap:10px 12px; }
  /* Stacked spec rows on mobile */
  .pd-details-table tr:not(.section-hdr):not(.price-row) { display:block; border-bottom:1px solid #eee; }
  .pd-details-table tr:not(.section-hdr):not(.price-row) td { display:block; width:100% !important; border:none; text-align:left !important; }
  .pd-details-table tr:not(.section-hdr):not(.price-row) td:first-child { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--teal); font-weight:600; padding:10px 14px 2px; }
  .pd-details-table tr:not(.section-hdr):not(.price-row) td:last-child { font-size:13px; color:var(--text-mid); padding:2px 14px 10px; }
  /* Collapsible spec sections on mobile */
  .pd-sec-hdr { cursor:pointer; }
  .pd-sec-hdr td { user-select:none; }
  .pd-sec-arrow { display:inline-block; transition:transform 0.25s ease; color:var(--text-light); }
  .pd-sec-hdr.open .pd-sec-arrow { transform:rotate(90deg); }
  /* Hide price rows & header from table on mobile "" shown via pb-card instead */
  .pd-details-table tr.price-row,
  .pd-details-table tr.price-hdr { display:none !important; }
  /* Price card "" visible only on mobile */
  .pb-card { display:block !important; border-top:1px solid #eee; }
  .pb-card-hdr { background:#f5f5f5; padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); border-bottom:1px solid #ddd; }
  .pb-row { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid #eee; gap:8px; }
  .pb-row .pb-lbl { font-size:13px; color:var(--text-mid); }
  .pb-row .pb-val { font-size:13px; color:var(--text); font-weight:500; white-space:nowrap; }
  .pb-row.pb-total { background:#faf9f7; }
  .pb-row.pb-total .pb-lbl { font-weight:700; color:var(--text); font-size:13px; }
  .pb-row.pb-total .pb-val { font-weight:700; font-size:14px; color:var(--text); }
  .pd-details-table td { font-size:12.5px; padding:10px 12px; }
  .pd-metal-swatch .swatch-circle { width:32px; height:32px; }
  .pd-metal-swatch.primary .swatch-circle { width:36px; height:36px; }
  .pd-pin-btn { padding:11px 16px; font-size:12px; }
  .pd-wish-btn { top:14px; right:14px; width:38px; height:38px; }
  .pd-byo-back-bar { font-size:9px; letter-spacing:0.5px; padding:4px 8px; gap:4px; }
  .pd-byo-back-bar svg { width:11px; height:11px; }
  /* In BYO mode on mobile, hide the breadcrumb trail "" back button is enough */
  .pd-breadcrumb.byo-active > span,
  .pd-breadcrumb.byo-active > svg { display:none; }
}

/* -- BYO settings page: collapse sidebar on mobile -- */
@media (max-width:860px) {
  .byo-pg-body { grid-template-columns:1fr; padding:20px 20px 50px; }
  /* Not sticky here, so it just scrolls normally with the page â€"
     the height cap/scroll above is only needed for the sticky case. */
  .byo-pg-sidebar { position:static; display:flex; gap:20px; flex-wrap:wrap; max-height:none; overflow-y:visible; }
  .byo-pg-filter-group { margin-bottom:0; }
  .byo-pg-filter-opts { flex-direction:row; flex-wrap:wrap; }
  .byo-pg-header-inner { padding:12px 20px; }
}

/* -- Cart line-item total was being hidden entirely on mobile
      (display:none) "" show it on its own row instead so the
      per-item total stays visible -- */
@media (max-width:600px) {
  .ci-right {
    display:flex !important; grid-column:1/-1;
    flex-direction:row; align-items:center; justify-content:flex-end;
    margin-top:10px; padding-top:10px; border-top:1px dashed var(--cream-3);
  }
  .ci-qty button { width:32px; height:32px; }
  /* BYO header "" compact on mobile */
  .byo-pg-header-inner { flex-direction:column; align-items:flex-start; gap:4px; padding:10px 18px; }
  .byo-pg-heading { font-size:16px; }
  .byo-pg-sub { font-size:11px; margin-top:1px; }
}

/* -- Gem Recommendation form: 2-column field grid never
      collapsed on mobile, squeezing labels like "Time of Birth"
      into ~150px -- */
@media (max-width:600px) {
  .gr-row { grid-template-columns:1fr; gap:12px; }
  #gemrec-layout { grid-template-columns:1fr !important; min-height:auto !important; }
  #gemrec-left { border-right:none !important; border-bottom:1px solid #ece6dc; }
  #gem-rec-iframe { min-height:600px !important; }
  #gemrec-right { padding:20px 16px !important; gap:18px !important; }
  .gr-benefit-item { padding:10px; gap:8px; }
  .gr-benefit-icon { font-size:18px; }
  .gr-benefit-desc { display:none; }
  .gr-benefit-title { font-size:12px; margin-bottom:0; }
}

/* -- Small uppercase labels used as actual buttons/links need a
      bit more size and tap area on touch screens -- */
@media (max-width:600px) {
  .pc-cta { font-size:9px; letter-spacing:1px; padding:6px 2px; }
  .atag button { padding:4px; margin-left:2px; }
  .bs-cart-btn { width:38px; height:38px; }
  .sort-sel { padding:10px 14px; font-size:12px; min-width:0; }
  .ft-soc { width:44px; height:44px; }
  /* Remove excess top padding on mobile */
  .home-featured-inner { padding-top:28px; }
  .hf-slider-wrap { margin:0; }
  .sbc-section { padding-top:28px; padding-bottom:40px; }
  /* Preloader logo smaller on mobile */
  #preloader .pre-logo img { height:90px !important; }
  /* Gem rec heading matches section-title on mobile */
  #gemrec-right h2 { font-size:clamp(26px,7vw,36px) !important; white-space:normal; }
}

/* -- Mobile Image Lightbox ----------------------------------- */
.mob-lb {
  display:none; position:fixed; inset:0; z-index:10000;
  background:#000; align-items:center; justify-content:center;
  touch-action:none; overflow:hidden;
}
.mob-lb.open { display:flex; }
.mob-lb-close {
  position:absolute; top:16px; right:16px; z-index:4;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25);
  color:#fff; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.mob-lb-counter {
  position:absolute; top:22px; left:20px; z-index:4;
  color:rgba(255,255,255,0.75); font-size:13px; letter-spacing:0.5px;
}
.mob-lb-canvas {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.mob-lb-img {
  max-width:100%; max-height:100%; object-fit:contain;
  transform-origin:50% 50%; will-change:transform;
  user-select:none; -webkit-user-select:none;
  pointer-events:none; display:block;
  transition:none;
}
.mob-lb-video {
  max-width:100%; max-height:100%;
  background:#000; display:none;
  outline:none; border-radius:4px;
}
.mob-lb-dots {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:4;
}
.mob-lb-dot {
  height:6px; width:6px; border-radius:3px;
  background:rgba(255,255,255,0.35);
  transition:width 0.25s,background 0.25s;
}
.mob-lb-dot.active { width:18px; background:#fff; }
.mob-lb-hint {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.5); font-size:12px; letter-spacing:0.5px;
  white-space:nowrap; pointer-events:none;
  transition:opacity 0.6s;
}
@media(max-width:860px) {
  #pd-main-img { cursor:zoom-in !important; }
}

/* ============================================================
   RESPONSIVE AUDIT FIXES (Sep 2026)
   Addresses remaining tablet/mobile issues from the Aug audit.
   ============================================================ */

/* -- CRITICAL #1: Banner images full-width on tablet --
   hero-video-wrap was fine (width:100%), but collection banners
   had max-width constraints. Ensure all banner containers fill. */
@media (max-width:1024px) and (min-width:601px) {
  .hero-video-wrap { width:100%; }
  .coll-hero.has-banner { padding-left:0; padding-right:0; }
  .coll-hero.has-banner .breadcrumb,
  .coll-hero.has-banner h1,
  .coll-hero.has-banner p { padding-left:24px; padding-right:24px; }
}

/* -- CRITICAL #2: Gem chips horizontal on tablet --
   At ~768px the flex-wrap:nowrap + overflow-x:auto should scroll,
   but on some tablet widths the container was collapsing.
   Force horizontal layout at tablet range. */
@media (max-width:1024px) and (min-width:481px) {
  .gem-strip-scroll {
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    padding:8px 24px 16px;
    -webkit-overflow-scrolling:touch;
  }
  .gem-chip { flex:0 0 auto; }
}

/* -- CRITICAL #4: Product grid 3 columns on tablet --
   Sidebar is hidden at ≤1024px so we have full width. */
@media (max-width:1024px) and (min-width:601px) {
  .prods-grid { grid-template-columns:repeat(3,1fr); gap:14px; }
}

/* -- WARNING #1: Auth modal max-width safety --
   Already max-width:440px but add a safety net. */
@media (max-width:480px) {
  .auth-box { max-width:100%; margin:0; border-radius:0; }
}

/* -- WARNING #4: Featured Pieces sizing on mobile --
   Show 2 visible cards that are large enough to see detail. */
@media (max-width:480px) {
  .bs-card { flex:0 0 calc(50vw - 20px); }
  .bs-img { aspect-ratio:1; }
  .bs-info { padding:10px 12px 12px; }
  .bs-name { font-size:11px; }
  .bs-price { font-size:13px; }
}

/* -- WARNING #5: Stories (Reels) section zero width on tablet --
   .home-reels-clip has flex:1 inside a flex row. On tablet
   widths where arrows are hidden, the clip div needs explicit
   width to avoid collapsing. */
@media (max-width:1024px) and (min-width:521px) {
  .home-reels { padding:36px 24px; }
  .home-reels-wrap { margin:0; }
  .home-reels-clip { flex:1; min-width:0; width:100%; }
  .home-reels-track { height:500px; }
  .reel-card { width:250px; height:444px; }
}

/* -- WARNING #3: Tablet-range spacing (768-1200px) --
   Add intermediate layout rules for common tablet/small-laptop widths. */
@media (max-width:1024px) and (min-width:769px) {
  .home-cats-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .consult-inner { grid-template-columns:1fr; gap:28px; }
  .wish-grid { grid-template-columns:repeat(3,1fr); gap:16px; }
  .ab-stats { grid-template-columns:repeat(4,1fr); }
  .ab-pillars { grid-template-columns:repeat(2,1fr); }
  .ab-values-grid { grid-template-columns:repeat(2,1fr); }
  .ab-certs-grid { grid-template-columns:repeat(2,1fr); }
  .hfg { gap:14px; }
}