/* ============================================
   PMJ GOLD PVT. LTD. ? Landing Page Styles
   Color palette: Burgundy + Teal + Champagne Gold
   (Modified from typical black/gold gold-buyer theme)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

:root {
  --burgundy: #5c1a3a;
  --burgundy-dark: #3d0f26;
  --burgundy-light: #7a2a52;
  --teal: #1a5c5e;
  --teal-dark: #0f3d3f;
  --teal-light: #2a7a7d;
  --gold: #c9a84c;
  --gold-light: #e8d5a0;
  --gold-dark: #a07c2e;
  --cream: #f7f2e9;
  --cream-dark: #ebe2d2;
  --white: #ffffff;
  --text: #1f141c;
  --text-muted: #6b5f66;
  --border: #e4d9cb;
  --shadow: 0 10px 32px rgba(61, 15, 38, 0.07);
  --shadow-lg: 0 22px 56px rgba(61, 15, 38, 0.13);
  --shadow-gold: 0 12px 36px rgba(160, 124, 46, 0.22);
  --radius: 14px;
  --radius-lg: 22px;
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-body: 'Outfit', 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-logo: 'Outfit', 'Segoe UI', sans-serif;
  --logo-plum: #4a152c;
  --logo-gold-text: #b59449;
  /* Match real sticky header height (Android Chrome + iOS) */
  --header-h: 84px;
  --marquee-h: 38px;
  --safe-top: env(safe-area-inset-top, 0px);
  --sticky-top-h: calc(var(--header-h) + var(--safe-top));
  --app-height: 100vh;
  --touch-min: 44px;
  /* Jewellery suite surfaces */
  --jewel-ivory: #fffcf7;
  --jewel-pearl: #fffdf9;
  --jewel-border: rgba(201, 168, 76, 0.28);
  --jewel-border-strong: rgba(201, 168, 76, 0.48);
  --jewel-card-bg: linear-gradient(165deg, #ffffff 0%, #fffcf7 55%, #faf4ea 100%);
  --jewel-card-shadow: 0 14px 36px rgba(61, 15, 38, 0.08);
  --jewel-gold-line: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.75), transparent);
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

@supports (height: 100svh) {
  :root {
    /* Stable while Android browser chrome animates */
    --app-height: 100svh;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: #ffffff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
}

body::before {
  content: none;
  display: none;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

/* ---- Marquee (sticky with logo header) ---- */
.marquee-bar {
  position: sticky;
  top: 0;
  z-index: 1102;
  /* Same cream surface as homepage body */
  background:
    radial-gradient(ellipse 70% 48% at 8% -8%, rgba(201, 168, 76, 0.18), transparent 52%),
    radial-gradient(ellipse 55% 40% at 96% 4%, rgba(92, 26, 58, 0.08), transparent 50%),
    linear-gradient(180deg, #fcfaf5 0%, #f8f2e8 38%, #f3ebe0 100%);
  color: var(--burgundy-dark);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  min-height: var(--marquee-h);
  overflow: hidden;
  overflow-x: clip;
  white-space: nowrap;
  display: block;
  visibility: visible;
  width: 100%;
  max-width: 100%;
}

.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marquee-scroll 28s linear infinite;
  -webkit-animation: marquee-scroll 28s linear infinite;
  font-size: 0.85rem;
  font-weight: 500;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  min-width: 100%;
  align-items: center;
  padding-left: 16px;
}

.marquee-track span {
  flex-shrink: 0;
}

.marquee-coupon {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--burgundy-dark);
  opacity: 1;
}

.marquee-coupon strong {
  color: var(--gold-dark);
  font-weight: 800;
  letter-spacing: 0.06em;
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@-webkit-keyframes marquee-scroll {
  0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

/* Keep coupon ticker moving even when OS “reduce motion” is on */
.marquee-track,
.marquee-track.is-js-marquee {
  animation-duration: 28s !important;
  animation-iteration-count: infinite !important;
}

.marquee-track.is-js-marquee {
  animation: none !important;
  -webkit-animation: none !important;
}

/* ---- Header ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(228, 217, 203, 0.7);
  transition: box-shadow var(--transition), background var(--transition);
}

/* When coupon marquee is present, pin header under it */
body:has(.marquee-bar) {
  --sticky-top-h: calc(var(--marquee-h) + var(--header-h) + var(--safe-top));
}

body:has(.marquee-bar) .header {
  top: var(--marquee-h);
  z-index: 1101;
}

.header.scrolled {
  background: rgba(251, 248, 242, 0.94);
  box-shadow: 0 8px 28px rgba(61, 15, 38, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
}

.header-search-panel {
  display: none;
  align-items: stretch;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.jx-header-search.is-open .header-search-panel {
  display: flex;
}

.header-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.header-search-field-icon {
  flex-shrink: 0;
  margin-left: 12px;
  color: rgba(92, 26, 58, 0.45);
  pointer-events: none;
}

.header-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(92, 26, 58, 0.06);
  color: var(--burgundy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.header-search-clear[hidden] {
  display: none !important;
}

.header-search-clear:hover,
.header-search-clear:focus-visible {
  background: rgba(201, 168, 76, 0.16);
}

.header-search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1300;
  max-height: min(320px, 50vh);
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 18px 44px rgba(61, 15, 38, 0.14);
}

.header-search-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease;
}

.header-search-suggest-item:hover,
.header-search-suggest-item:focus-visible {
  background: rgba(201, 168, 76, 0.12);
}

.header-search-suggest-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--burgundy-dark);
  line-height: 1.25;
}

.header-search-suggest-meta {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.header-search-suggest-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.45;
}

.jx-search-results-bar {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.22);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--burgundy-dark);
  text-align: center;
}

.header-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--burgundy-dark);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background 0.2s ease;
}

.header-search-btn:hover,
.jx-header-search.is-open .header-search-btn {
  color: var(--burgundy);
  background: rgba(201, 168, 76, 0.12);
}

.jx-header-search-input {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--burgundy-dark);
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition:
    width 0.28s ease,
    max-width 0.28s ease,
    opacity 0.2s ease,
    padding 0.28s ease,
    border-color 0.2s ease;
}

.jx-header-search.is-open .header-search-close {
  display: inline-flex;
}

.jx-header-search.is-open .header-search-field {
  border: 1.5px solid rgba(201, 168, 76, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 12px rgba(61, 15, 38, 0.07);
  min-height: 42px;
}

.jx-header-search.is-open .header-search-field-icon {
  margin-left: 12px;
}

.jx-header-search.is-open .jx-header-search-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 40px;
  padding: 0 6px;
  border: none;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}

.jx-header-search.is-open .jx-header-search-input:focus {
  border: none;
  box-shadow: none;
}

.jx-header-search-input::placeholder {
  color: rgba(107, 95, 102, 0.75);
}

.jx-header-search-input::-webkit-search-decoration,
.jx-header-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.jx-header-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.header-search-close {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: 2px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--burgundy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-search-close[hidden] {
  display: none !important;
}

.header-search-close:hover,
.header-search-close:focus-visible {
  background: rgba(201, 168, 76, 0.14);
  color: var(--burgundy-dark);
}

.jx-header-search.is-open .header-search-close {
  display: inline-flex;
}

@media (min-width: 769px) {
  .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .header-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    overflow: visible;
  }

  .header-search-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
  }

  .jx-header-search.is-open {
    flex: 1 1 auto;
    width: auto;
    min-width: min(280px, 32vw);
    max-width: min(520px, 48vw);
  }

  .jx-header-search.is-open .header-search-btn {
    display: none;
  }

  .header-search-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
  }

  .jx-header-search.is-open .header-search-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .header-search-panel .header-search-field {
    width: 100%;
    min-height: 42px;
  }

  .header-search-panel .header-search-field-icon {
    margin-left: 12px;
  }

  .header-search-panel .jx-header-search-input {
    height: 40px;
    font-size: 0.92rem;
  }

  .header-search-panel .header-search-close {
    display: inline-flex;
  }

  .header-search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1300;
  }

  body.jx-header-search-open .header {
    z-index: 1205;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition);
}

.logo:hover {
  transform: translateY(-1px);
}

.logo-mark {
  flex-shrink: 0;
  padding: 4px;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  border-radius: 12px;
  border: 2px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.15);
  transition: box-shadow var(--transition), border-color var(--transition);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.logo:hover .logo-mark {
  border-color: var(--gold);
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.25);
}

.logo-icon-img {
  display: block;
  height: 58px;
  width: auto;
  max-width: none;
  border-radius: 8px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -webkit-user-drag: none;
  user-select: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.logo-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
  min-width: 0;
}

.logo-wordmark {
  display: block;
  height: clamp(34px, 4.8vw, 48px);
  width: auto;
  max-width: min(220px, 50vw);
  object-fit: contain;
  object-position: left center;
  flex-shrink: 1;
  min-width: 0;
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.logo-name {
  display: flex;
  align-items: baseline;
  gap: 7px;
  position: relative;
  padding-bottom: 6px;
}

.logo-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--logo-plum) 0%, var(--logo-plum) 42%, var(--logo-gold-text) 100%);
  border-radius: 1px;
}

.logo-pmj {
  font-family: var(--font-logo);
  font-size: 1.72rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--logo-plum);
  -webkit-text-fill-color: var(--logo-plum);
  background: none;
  filter: none;
  text-transform: uppercase;
}

.logo-pmj-img {
  display: none;
}

.logo-gold {
  font-family: var(--font-logo);
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--logo-gold-text);
  -webkit-text-fill-color: var(--logo-gold-text);
  background: none;
  background-clip: border-box;
  text-transform: uppercase;
}

.logo-tagline {
  font-family: var(--font-logo);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-plum);
  opacity: 1;
  white-space: nowrap;
}

.logo-footer-full {
  display: block;
  height: clamp(110px, 22vw, 148px);
  width: auto;
  max-width: min(220px, 70vw);
  border-radius: 14px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(201, 168, 76, 0.12);
  object-fit: contain;
  image-rendering: auto;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.logo-footer:hover .logo-footer-full {
  transform: translateY(-3px) translateZ(0);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25);
}

.nav {
  display: flex;
  gap: 28px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  flex-wrap: nowrap;
}

.nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--burgundy), var(--gold));
  transition: width var(--transition);
}

.nav a:hover {
  color: var(--burgundy);
}

.nav a:hover::after {
  width: 100%;
}

.nav-account-link {
  display: none;
}

/* Desktop jewellery boutique nav */
@media (min-width: 981px) {
  .header {
    background:
      linear-gradient(180deg, rgba(255, 252, 247, 0.97) 0%, rgba(252, 250, 245, 0.94) 100%);
    border-bottom: 1px solid rgba(201, 168, 76, 0.28);
    box-shadow: 0 10px 32px rgba(61, 15, 38, 0.045);
  }

  .header.scrolled {
    background: rgba(255, 252, 247, 0.98);
    box-shadow: 0 12px 36px rgba(61, 15, 38, 0.07);
  }

  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 92px;
    gap: 16px;
  }

  .logo {
    justify-self: start;
  }

  .nav {
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: none;
    margin: 0;
    justify-self: center;
  }

  .header-actions {
    justify-self: end;
    overflow: visible;
  }

  .header-search {
    order: 10;
  }

  .jx-header-search.is-open {
    min-width: min(340px, 36vw);
    max-width: min(560px, 52vw);
  }

  .nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    color: var(--burgundy-dark);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
  }

  .nav a + a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    transform: translateY(-50%);
    background: linear-gradient(
      180deg,
      transparent,
      rgba(201, 168, 76, 0.7),
      transparent
    );
  }

  .nav a::after {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .nav a:hover,
  .nav a:focus-visible {
    color: var(--gold-dark);
  }

  .nav a:hover::after,
  .nav a:focus-visible::after {
    width: auto;
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .nav a {
    padding: 10px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .nav a::after {
    left: 10px;
    right: 10px;
  }
}

/* Desktop: hide header Call button on all pages so nav fits elegantly */
@media (min-width: 769px) {
  .header .call-btn-header {
    display: none !important;
  }

  .nav-backdrop,
  .nav-drawer-head,
  .nav-drawer-label,
  .nav-drawer-foot,
  .nav-account-link {
    display: none !important;
  }

  .menu-toggle {
    display: none !important;
  }

  /* Neutralize mobile drawer if nav is ever outside header */
  body > #nav.nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 28px;
    z-index: auto !important;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  will-change: transform;
}

.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(145deg, #a01020, #7a0010);
  color: #ffffff;
  border-radius: 50px;
  text-decoration: none;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(122, 0, 16, 0.28);
  transition: background 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

.call-btn:hover {
  background: #8b0000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.call-btn-icon {
  transform: rotate(-35deg);
  flex-shrink: 0;
}

.contact-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.contact-btn-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.contact-btn-text small {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.92;
  white-space: nowrap;
}

.call-btn-header {
  padding: 11px 28px 11px 22px;
}

.btn-primary {
  background: linear-gradient(135deg, #9a7424 0%, var(--gold) 48%, #e0c56a 100%);
  color: var(--burgundy-dark);
  box-shadow: 0 8px 22px rgba(160, 124, 46, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 55%, #f5ebc8 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-full {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--burgundy);
  transition: var(--transition);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: 60px 0 80px;
  overflow: hidden;
}

/* ---- Hero carousel (Shop ? Sell) ---- */
.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.hero-carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.hero-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.hero-carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 10px 28px rgba(61, 15, 38, 0.12);
  backdrop-filter: blur(10px);
}

.hero-carousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: #fff;
  color: var(--burgundy-dark);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.hero-carousel-btn:hover {
  transform: scale(1.06);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  box-shadow: 0 6px 16px rgba(160, 124, 46, 0.28);
}

.hero-carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(92, 26, 58, 0.25);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.hero-dot.is-active {
  width: 22px;
  background: linear-gradient(90deg, var(--burgundy), var(--gold));
}

.hero-carousel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(61, 15, 38, 0.08);
  z-index: 4;
}

.hero-carousel-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--burgundy), var(--gold), var(--teal));
  transition: width 0.05s linear;
}

/* ---- Shop-first intro (carousel slide) ---- */
.store-hero {
  position: relative;
  padding: 36px 0 64px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(201, 168, 76, 0.28), transparent 42%),
    radial-gradient(ellipse at 92% 20%, rgba(92, 26, 58, 0.1), transparent 44%),
    radial-gradient(ellipse at 50% 100%, rgba(26, 92, 94, 0.06), transparent 50%),
    linear-gradient(180deg, #fffcf7 0%, var(--cream) 55%, #f0e6d8 100%);
}

.store-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.45), transparent);
  pointer-events: none;
}

.store-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 22px 36px;
  align-items: center;
}

.store-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}

.store-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.2vw, 3.35rem);
  line-height: 1.08;
  color: var(--burgundy-dark);
  margin-bottom: 16px;
  max-width: 14ch;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.store-hero-copy > p {
  color: var(--text-muted);
  max-width: 42ch;
  margin-bottom: 22px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.store-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.store-hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.store-hero-trust li {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.32);
  color: var(--burgundy);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.05);
}

.store-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}

.store-hero-glow {
  position: absolute;
  width: min(78%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(201, 168, 76, 0.35) 0%, rgba(201, 168, 76, 0.08) 42%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
  animation: storeGlow 6s ease-in-out infinite alternate;
}

@keyframes storeGlow {
  from { transform: scale(0.96); opacity: 0.75; }
  to { transform: scale(1.04); opacity: 1; }
}

.store-hero-frame {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(100%, 560px);
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
}

.store-hero-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  filter: drop-shadow(0 18px 40px rgba(61, 15, 38, 0.14));
}

/* ---- Homepage HD coin hero animation ---- */
.store-hero-coins {
  padding: 28px 0 56px;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(201, 168, 76, 0.42), transparent 48%),
    radial-gradient(ellipse at 12% 80%, rgba(92, 26, 58, 0.12), transparent 50%),
    linear-gradient(135deg, #fffdf9 0%, #faf3e4 45%, #f5ebe0 100%);
}

.store-hero-coins .store-hero-copy h1 em {
  font-style: italic;
  color: var(--gold-dark);
  -webkit-text-fill-color: var(--gold-dark);
}

.store-hero-sparkles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.store-hero-coins .store-hero-visual {
  min-height: clamp(300px, 42vw, 480px);
  perspective: 1200px;
  transition: filter 1.2s ease;
}

.store-hero-coins .store-hero-visual.is-silver-theme .store-hero-glow--pulse {
  background:
    radial-gradient(circle, rgba(200, 215, 235, 0.5) 0%, rgba(160, 180, 210, 0.18) 38%, transparent 68%);
}

.store-hero-coins .store-hero-visual.is-silver-theme .store-hero-glow--ring {
  border-color: rgba(180, 200, 220, 0.35);
  box-shadow: 0 0 60px rgba(180, 200, 220, 0.35);
}

.store-hero-glow--pulse {
  width: min(90%, 560px);
  background:
    radial-gradient(circle, rgba(255, 210, 90, 0.55) 0%, rgba(201, 168, 76, 0.2) 38%, transparent 68%);
  animation: storeGlow 5s ease-in-out infinite alternate;
}

.store-hero-glow--ring {
  width: min(72%, 440px);
  background: transparent;
  border: 2px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 0 60px rgba(201, 168, 76, 0.35);
  animation: heroRingPulse 4s ease-in-out infinite;
}

@keyframes heroRingPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.5; }
  50% { transform: scale(1.06); opacity: 0.9; }
}

.store-hero-coin-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 580px);
  aspect-ratio: 1.05;
  margin: 0 auto;
  transition: transform 0.45s ease-out;
  transform-style: preserve-3d;
}

.store-hero-coin-stage.is-silver-theme .store-hero-badge {
  background: linear-gradient(135deg, rgba(72, 88, 110, 0.94), rgba(48, 58, 72, 0.96));
  border-color: rgba(180, 200, 220, 0.45);
}

.store-hero-shimmer {
  position: absolute;
  inset: -20% -40%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.14) 48%,
    rgba(255, 248, 220, 0.28) 50%,
    rgba(255, 255, 255, 0.14) 52%,
    transparent 58%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: heroShimmer 7s ease-in-out infinite;
}

.store-hero-coin-stage.is-silver-theme .store-hero-shimmer {
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(220, 232, 245, 0.32) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 58%
  );
}

@keyframes heroShimmer {
  0%, 72% { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  78% { opacity: 1; }
  100% { transform: translateX(120%) skewX(-12deg); opacity: 0; }
}

.store-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.94);
  filter: blur(6px);
  transition:
    opacity 1.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.35s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 28px 64px rgba(61, 15, 38, 0.22),
    0 0 0 1px rgba(201, 168, 76, 0.2);
}

.store-hero-slide--silver {
  box-shadow:
    0 28px 64px rgba(40, 50, 65, 0.28),
    0 0 0 1px rgba(180, 200, 220, 0.28);
}

.store-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  z-index: 1;
}

.store-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 6s ease-out;
}

.store-hero-slide.is-active img {
  animation: heroKenBurns 6.5s ease-out forwards;
}

@keyframes heroKenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1%); }
}

.store-hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.08) 0%, transparent 40%, rgba(61, 15, 38, 0.06) 100%);
  pointer-events: none;
}

.store-hero-slide--silver::after {
  background: linear-gradient(135deg, rgba(180, 200, 220, 0.1) 0%, transparent 42%, rgba(40, 50, 65, 0.08) 100%);
}

/* HD product shots — full-bleed like coin showcase slides */
.store-hero-slide--product {
  background: #121214;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 168, 76, 0.35);
}

.store-hero-slide--product img {
  object-fit: cover;
  object-position: center center;
  padding: 0;
  width: 100%;
  height: 100%;
  filter: none;
}

.store-hero-slide--product.is-active img {
  animation: heroKenBurns 6.5s ease-out forwards;
}

/* Slideshow is full-frame — hide floating 3D coin duplicates */
.store-hero-coin-3d {
  display: none !important;
}

.store-hero-slide--product::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 38%,
    rgba(255, 255, 255, 0.03) 44%,
    rgba(255, 248, 210, 0.22) 49%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 58%
  );
  transform: translateX(-130%) skewX(-14deg);
  animation: heroProductGlint 5.5s ease-in-out infinite;
}

.store-hero-slide--product.is-active::before {
  animation: heroProductGlint 4.2s ease-in-out infinite;
}

@keyframes heroProductGlint {
  0%, 68% { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  74% { opacity: 1; }
  100% { transform: translateX(130%) skewX(-14deg); opacity: 0; }
}

.store-hero-slide--product::after {
  background:
    linear-gradient(180deg, rgba(255, 220, 130, 0.08) 0%, transparent 35%, rgba(0, 0, 0, 0.15) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(201, 168, 76, 0.18) 0%, transparent 55%);
}

.store-hero-coin-stage.is-product-theme .store-hero-shimmer {
  animation-duration: 4.8s;
  opacity: 0.95;
}

.store-hero-coin-stage.is-product-theme .store-hero-glow--pulse {
  background:
    radial-gradient(circle, rgba(255, 220, 120, 0.62) 0%, rgba(201, 168, 76, 0.28) 38%, transparent 68%);
}

.store-hero-coin-stage.is-product-theme .store-hero-glow--ring {
  border-color: rgba(255, 210, 90, 0.45);
  box-shadow: 0 0 72px rgba(255, 200, 80, 0.42);
}

.store-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: 0 8px 24px rgba(61, 15, 38, 0.12);
}

.store-hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.35);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
}

.store-hero-dot--silver {
  background: rgba(160, 180, 200, 0.45);
}

.store-hero-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}

.store-hero-dot--silver.is-active {
  background: linear-gradient(90deg, #8a9eb5, #c8d8e8);
}

.store-hero-dot:hover {
  transform: scale(1.15);
}

.store-hero-coin-3d {
  position: absolute;
  z-index: 3;
  transform-style: preserve-3d;
  pointer-events: none;
}

.store-hero-coin-3d--main {
  width: clamp(100px, 22vw, 168px);
  height: clamp(100px, 22vw, 168px);
  right: -4%;
  bottom: 6%;
  animation: heroCoinFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

.store-hero-coin-3d--silver {
  width: clamp(84px, 18vw, 140px);
  height: clamp(84px, 18vw, 140px);
  left: -2%;
  top: 10%;
  z-index: 4;
  animation: heroSilverFloat 8s ease-in-out infinite;
  filter: drop-shadow(0 18px 36px rgba(30, 40, 55, 0.5));
}

.store-hero-coin-inner--silver {
  animation: heroSilverRock 9s ease-in-out infinite;
}

.store-hero-coin-face--silver {
  border-color: rgba(210, 225, 240, 0.75);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.28),
    0 0 36px rgba(180, 200, 220, 0.4);
}

.store-hero-coin-face--silver img {
  object-position: 68% center;
}

.store-hero-coin-shine--silver {
  background: conic-gradient(from 0deg, transparent, rgba(230, 240, 255, 0.55) 35deg, transparent 70deg);
  animation: heroCoinShine 5.5s linear infinite;
}

@keyframes heroSilverFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-12px) translateX(4px); }
}

@keyframes heroSilverRock {
  0%, 100% { transform: rotateY(-12deg) rotateX(8deg); }
  50% { transform: rotateY(12deg) rotateX(-6deg); }
}

.store-hero-coin-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: heroCoinSpin 13s linear infinite;
}

.store-hero-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  border: 3px solid rgba(255, 220, 140, 0.65);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.2),
    0 0 36px rgba(255, 200, 80, 0.35);
}

.store-hero-coin-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-hero-coin-face--back {
  transform: rotateY(180deg);
}

.store-hero-coin-shine {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 248, 220, 0.55) 35deg, transparent 70deg);
  animation: heroCoinShine 4.5s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes heroCoinSpin {
  0% { transform: rotateY(0deg) rotateX(10deg); }
  100% { transform: rotateY(360deg) rotateX(10deg); }
}

@keyframes heroCoinFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes heroCoinShine {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.store-hero-badge {
  position: absolute;
  left: 12px;
  bottom: 52px;
  z-index: 4;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff8e7;
  background: linear-gradient(135deg, rgba(92, 26, 58, 0.92), rgba(61, 15, 38, 0.95));
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 8px 24px rgba(61, 15, 38, 0.35);
  animation: heroBadgePulse 3s ease-in-out infinite;
  transition: background 0.8s ease, border-color 0.8s ease;
}

@keyframes heroBadgePulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(61, 15, 38, 0.35); }
  50% { box-shadow: 0 8px 32px rgba(201, 168, 76, 0.45); }
}

@media (max-width: 900px) {
  .store-hero-coins .store-hero-visual {
    order: -1;
    min-height: clamp(260px, 68vw, 380px);
  }

  .store-hero-coin-3d--main {
    width: clamp(80px, 20vw, 120px);
    height: clamp(80px, 20vw, 120px);
    right: 2%;
    bottom: 4%;
  }

  .store-hero-coin-3d--silver {
    width: clamp(68px, 16vw, 100px);
    height: clamp(68px, 16vw, 100px);
    left: 2%;
    top: 8%;
  }
}

@media (max-width: 768px) {
  .store-hero-coins {
    padding: 12px 0 28px;
  }

  .store-hero-coins .store-hero-visual {
    width: calc(100% + 28px);
    max-width: none;
    margin-left: -14px;
    margin-right: -14px;
    min-height: clamp(300px, 92vw, 440px);
  }

  .store-hero-coin-stage {
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    border-radius: 0;
  }

  .store-hero-slide {
    border-radius: 0;
  }

  .store-hero-slide img {
    object-fit: cover;
    object-position: center center;
  }

  .store-hero-badge {
    font-size: 0.65rem;
    padding: 6px 10px;
    border-radius: 999px;
    bottom: 12px;
  }

  .store-hero-dots {
    max-width: calc(100% - 20px);
    gap: 6px;
    padding: 5px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .store-hero-dots::-webkit-scrollbar {
    display: none;
  }

  .store-hero-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
  }

  .store-hero-dot.is-active {
    width: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-hero-coin-inner,
  .store-hero-coin-inner--silver,
  .store-hero-coin-shine,
  .store-hero-coin-3d--main,
  .store-hero-coin-3d--silver,
  .store-hero-glow--ring,
  .store-hero-badge,
  .store-hero-shimmer,
  .store-hero-slide.is-active img,
  .store-hero-slide--product::before {
    animation: none !important;
  }

  .store-hero-sparkles {
    display: none;
  }
}

@media (max-width: 900px) {
  .store-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .store-hero-copy h1,
  .store-hero-copy > p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .store-hero-actions,
  .store-hero-trust {
    justify-content: center;
  }

  .store-hero-visual {
    min-height: 0;
    order: -1;
  }

  .store-hero-frame {
    width: min(100%, 440px);
  }
}

@media (max-width: 640px) {
  .store-hero {
    padding: 18px 0 4px;
  }

  .store-hero-frame {
    width: min(100%, 360px);
    border-radius: 20px;
  }
}

/* ---- Sell gold feature ---- */
.sell-feature {
  position: relative;
  padding: 56px 0 72px;
  overflow: hidden;
  min-height: 0;
}

.sell-feature-page {
  padding-top: 48px;
  min-height: calc(100vh - 120px);
}

/* ---- Sell gold page (standalone) ---- */
.sell-gold-page .header {
  background: rgba(255, 252, 246, 0.96);
}

.sell-banner {
  position: relative;
  min-height: min(78vh, 640px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
}

.sell-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sell-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
}

.sell-banner-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(31, 10, 20, 0.88) 0%, rgba(61, 15, 38, 0.62) 48%, rgba(31, 10, 20, 0.35) 100%),
    linear-gradient(180deg, rgba(15, 8, 12, 0.25) 0%, rgba(15, 8, 12, 0.72) 100%);
}

.sell-banner-content {
  position: relative;
  z-index: 1;
  padding: 72px 20px 56px;
  max-width: 760px;
  margin-right: auto;
  animation: sellBannerRise 0.8s var(--ease-out, ease) both;
}

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

.sell-banner-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(232, 213, 160, 0.35);
}

.sell-banner-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 6vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 14px;
  max-width: 14ch;
  color: #fff;
}

.sell-banner-content h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.sell-banner-content > p {
  margin: 0 0 22px;
  max-width: 38ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.sell-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.sell-banner-ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.sell-banner-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

.sell-banner-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.sell-banner-trust li {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sell-page-section {
  padding: 48px 0;
}

.sell-highlights {
  padding: 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
}

.sell-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sell-highlights-grid article {
  padding: 18px 16px;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 14px 36px rgba(61, 15, 38, 0.1);
}

.sell-highlights-grid strong {
  display: block;
  font-size: 0.95rem;
  color: var(--burgundy-dark);
  margin-bottom: 4px;
}

.sell-highlights-grid span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 600;
}

.sell-section-head {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 28px;
}

.sell-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--burgundy-dark);
  margin: 8px 0 10px;
}

.sell-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.sell-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sell-steps-grid li {
  padding: 22px 18px;
  border-radius: 20px;
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 10px 28px rgba(61, 15, 38, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sell-steps-grid li:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(61, 15, 38, 0.1);
}

.sell-steps-grid strong {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold-light);
  background: linear-gradient(145deg, var(--burgundy), #7a2a52);
}

.sell-steps-grid h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--burgundy-dark);
}

.sell-steps-grid p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.sell-cta-band {
  padding-bottom: 64px;
}

.sell-guide-band {
  padding-top: 0;
  padding-bottom: 56px;
}

.sell-guide-card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 32px);
  border-radius: 22px;
  background: linear-gradient(165deg, #ffffff 0%, #fff9ef 100%);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 14px 36px rgba(61, 15, 38, 0.08);
}

.sell-guide-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy-dark);
  background: rgba(201, 168, 76, 0.16);
  border: 1px solid rgba(201, 168, 76, 0.35);
}

.sell-guide-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  color: var(--burgundy-dark);
  margin: 0 0 12px;
  line-height: 1.2;
}

.sell-guide-card > p {
  margin: 0 0 16px;
  color: var(--text-muted);
  line-height: 1.65;
  font-size: 0.98rem;
}

.sell-guide-points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sell-guide-points li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--burgundy-dark);
}

.sell-guide-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold-dark);
  font-weight: 800;
}

.sell-cta-band-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: stretch;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.18), transparent 50%),
    linear-gradient(145deg, #fffefb 0%, #f7f0e4 100%);
  border: 1px solid rgba(201, 168, 76, 0.3);
  box-shadow: 0 18px 48px rgba(61, 15, 38, 0.08);
}

.sell-cta-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--burgundy-dark);
  margin: 0 0 10px;
}

.sell-cta-copy > p {
  margin: 0 0 14px;
  color: var(--text-muted);
  max-width: 42ch;
}

.sell-cta-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sell-cta-stats .stat {
  min-width: 88px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(92, 26, 58, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.22);
  text-align: center;
}

.sell-cta-stats .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--burgundy-dark);
  line-height: 1.1;
}

.sell-cta-stats .stat span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sell-cta-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 12px 32px rgba(61, 15, 38, 0.08);
}

.sell-cta-wa {
  border-color: rgba(18, 140, 60, 0.35) !important;
  color: #128c3c !important;
}

.sell-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: center;
  margin-top: 4px;
}

.sell-cta-links a {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--burgundy);
  text-decoration: none;
}

.sell-cta-links a:hover {
  color: var(--gold-dark);
}

@media (max-width: 980px) {
  .sell-highlights-grid,
  .sell-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sell-cta-band-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sell-banner {
    min-height: min(70vh, 520px);
  }

  .sell-banner-content {
    padding: 56px 16px 40px;
  }

  .sell-banner-content h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .sell-banner-content > p {
    font-size: 0.95rem;
  }

  .sell-banner-actions .btn {
    width: 100%;
    text-align: center;
  }

  .sell-highlights {
    margin-top: -20px;
  }

  .sell-highlights-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sell-highlights-grid article {
    padding: 14px 12px;
    border-radius: 14px;
  }

  .sell-highlights-grid strong {
    font-size: 0.84rem;
  }

  .sell-highlights-grid span {
    font-size: 0.72rem;
  }

  .sell-page-section {
    padding: 36px 0;
  }

  .sell-steps-grid {
    grid-template-columns: 1fr;
  }

  .sell-cta-band-inner {
    padding: 18px;
    border-radius: 20px;
  }
}

.sell-feature-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 14px;
  max-width: 16ch;
}

.sell-feature-card-slide h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--burgundy-dark);
  margin-bottom: 8px;
}

.sell-feature-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(26, 92, 94, 0.12), transparent 45%),
    radial-gradient(ellipse at 90% 80%, rgba(92, 26, 58, 0.1), transparent 48%),
    linear-gradient(165deg, #1f0a14 0%, #3d0f26 42%, #0f3d3f 100%);
  z-index: 0;
}

.sell-feature > .container,
.sell-feature-slide {
  position: relative;
  z-index: 1;
}

.sell-feature-slide {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 28px;
  align-items: center;
}

.sell-feature-slide-copy .section-label {
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 213, 160, 0.25);
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sell-feature-slide-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 14px;
  max-width: 16ch;
}

.sell-feature-slide-copy > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  max-width: 46ch;
  margin-bottom: 18px;
}

.sell-feature-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(232, 213, 160, 0.4) !important;
  color: var(--gold-light) !important;
}

.sell-feature-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.sell-feature-head {
  max-width: 720px;
  margin-bottom: 36px;
}

.sell-feature-head .section-label {
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 213, 160, 0.25);
}

.sell-feature-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: #fff;
  margin: 12px 0 12px;
}

.sell-feature-accent {
  color: var(--gold-light);
}

.sell-feature-head p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.sell-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 28px;
  align-items: start;
}

.sell-feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.sell-feature-badges span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
}

.sell-feature-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.sell-feature-steps-compact {
  margin-bottom: 18px;
}

.sell-feature-steps li {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.sell-feature-steps strong {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--gold-dark), var(--gold));
  color: var(--burgundy-dark);
  font-size: 0.75rem;
}

.sell-feature-steps h3 {
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 2px;
}

.sell-feature-steps p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.sell-feature-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sell-feature-stats .stat {
  text-align: center;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sell-feature-stats .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-light);
  line-height: 1.1;
}

.sell-feature-stats .stat span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
}

.sell-feature-card {
  background: #fff;
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 168, 76, 0.35);
}

.sell-feature-card-slide {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.sell-feature-stats-slide {
  margin-top: 18px;
}

.sell-feature-stats-slide .stat {
  background: rgba(92, 26, 58, 0.05);
  border-color: rgba(201, 168, 76, 0.22);
}

.sell-feature-stats-slide .stat strong {
  color: var(--burgundy-dark);
  font-size: 1.35rem;
}

.sell-feature-stats-slide .stat span {
  color: var(--text-muted);
}

.sell-feature-card-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

.sell-feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--burgundy-dark);
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .sell-feature-slide {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sell-feature-slide-copy h2,
  .sell-feature-slide-copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .sell-feature-badges,
  .sell-feature-slide-copy .store-hero-actions {
    justify-content: center;
  }

  .sell-feature-steps {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .sell-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sell-feature {
    padding: 24px 0 48px;
  }

  .store-hero {
    padding: 16px 0 20px;
  }

  .store-hero-copy h1 {
    max-width: none;
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }

  .store-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .store-hero-actions .btn {
    width: 100%;
  }

  .hero-carousel-controls {
    bottom: 12px;
    gap: 10px;
    padding: 6px 10px;
  }

  .sell-feature-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track {
    transition: none;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(92, 26, 58, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(26, 92, 94, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: var(--white);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.2;
  color: var(--burgundy-dark);
  margin-bottom: 20px;
}

.hero h1 .highlight {
  color: var(--teal);
  background: linear-gradient(135deg, var(--teal), var(--gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 540px;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.trust-badges span {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
}

.hero-stats {
  display: flex;
  gap: 32px;
}

.stat {
  text-align: center;
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--burgundy);
  line-height: 1;
}

.stat span {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

/* ---- Hero Form ---- */
.hero-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: sticky;
  top: 96px;
}

.hero-form-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--burgundy-dark);
  margin-bottom: 4px;
}

.form-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.phone-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.phone-input:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 92, 94, 0.12);
}

.phone-input .prefix {
  padding: 12px 14px;
  background: var(--cream);
  color: var(--text-muted);
  font-weight: 600;
  border-right: 1.5px solid var(--border);
  font-size: 0.9rem;
}

.phone-input input {
  flex: 1;
  border: none;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
}

.gstin-input {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--transition);
  background: #fff;
}

.gstin-input:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 92, 94, 0.12);
}

.gstin-input.is-valid {
  border-color: #159947;
}

.gstin-input.is-invalid {
  border-color: #c0392b;
}

.gstin-input input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 0;
}

.gstin-status-box {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1.5px solid var(--border);
  background: var(--cream, #f7f3ef);
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gstin-status-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.gstin-status-box[data-state='idle'] .gstin-status-ico::before {
  content: '';
}

.gstin-status-box[data-state='loading'] .gstin-status-ico::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(26, 92, 94, 0.25);
  border-top-color: var(--teal, #1a5c5e);
  border-radius: 50%;
  animation: gstin-spin 0.7s linear infinite;
}

.gstin-status-box[data-state='valid'] {
  background: #e8f8ee;
  border-left-color: #159947;
  color: #0f7a38;
}

.gstin-status-box[data-state='valid'] .gstin-status-ico::before {
  content: '✓';
  font-size: 1.15rem;
}

.gstin-status-box[data-state='invalid'] {
  background: #fdecea;
  border-left-color: #c0392b;
  color: #b03a2e;
}

.gstin-status-box[data-state='invalid'] .gstin-status-ico::before {
  content: '✕';
  font-size: 1rem;
}

@keyframes gstin-spin {
  to {
    transform: rotate(360deg);
  }
}

.gstin-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.gstin-hint.is-ok {
  color: #0f7a38;
}

.gstin-hint.is-bad {
  color: #b03a2e;
}

.form-group.invalid .gstin-input {
  border-color: #c0392b;
}

.form-group input[type="text"],
.form-group input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 92, 94, 0.12);
}

.form-group input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.form-group select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 92, 94, 0.12);
}

.error-msg {
  display: none;
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: 4px;
}

.error-msg.visible {
  display: block;
}

.form-group.invalid .phone-input,
.form-group.invalid select,
.form-group.invalid input[type="text"],
.form-group.invalid input[type="number"] {
  border-color: #c0392b;
}

.form-secure {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
}

.hero-form-benefits {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-form-benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
}

.hero-form-benefits li::before {
  content: '?';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* ---- Sections ---- */
.section {
  padding: 88px 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

.section-label {
  display: inline-block;
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  position: relative;
  padding: 0 18px;
}

.section-label::before,
.section-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-label::before {
  left: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-label::after {
  right: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--gold), transparent);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.65rem);
  color: var(--burgundy-dark);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
  font-weight: 700;
  line-height: 1.15;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ---- Why Us ---- */
.why-us {
  background: var(--white);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 1.1rem;
  color: var(--burgundy-dark);
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- Services ---- */
.services {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.services-grid-two {
  max-width: 920px;
  margin: 0 auto;
}

.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-light);
}

.service-icon {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--burgundy-dark);
  margin-bottom: 10px;
}

.service-card > p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.service-card ul {
  list-style: none;
  margin-bottom: 20px;
}

.service-card ul li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 8px;
}

.service-card ul li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 2px;
}

.service-card {
  counter-reset: step;
}

.service-link {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition);
}

.service-link:hover {
  color: var(--teal);
}

/* ---- Process ---- */
.process {
  background: linear-gradient(135deg, var(--burgundy-dark), var(--burgundy), var(--teal-dark));
  color: var(--white);
}

.process .section-label {
  color: var(--gold-light);
}

.process .section-header h2 {
  color: var(--white);
}

.process .section-header p {
  color: rgba(255, 255, 255, 0.75);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.step-card:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
}

.step-num {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--burgundy-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 auto 16px;
}

.step-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--gold-light);
}

.step-card p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
}

/* ---- Reviews ---- */
.reviews {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 76, 0.08), transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.reviews-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.reviews-header {
  text-align: left;
  margin-bottom: 0;
  max-width: 560px;
}

.reviews-header p {
  margin-bottom: 0;
}

.rating-banner {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.rating-score {
  background: linear-gradient(135deg, var(--cream), var(--cream-dark));
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px 48px;
  text-align: center;
}

.rating-score--compact {
  flex-shrink: 0;
  padding: 18px 28px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(61, 15, 38, 0.08);
  background: linear-gradient(145deg, #fffdf9, var(--cream));
}

.rating-score--compact strong {
  font-size: 2.4rem;
}

.rating-score--compact .stars {
  font-size: 1rem;
  margin: 2px 0 0;
}

.rating-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.rating-score strong {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--burgundy);
  line-height: 1;
}

.rating-score .stars {
  display: block;
  color: var(--gold-dark);
  font-size: 1.2rem;
  margin: 4px 0;
}

.rating-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reviews-grid--six {
  gap: 22px;
}

.review-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 20px;
  padding: 26px 24px 22px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.review-card-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.18), transparent 70%);
  pointer-events: none;
}

.review-card::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(201, 168, 76, 0.14);
  pointer-events: none;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(61, 15, 38, 0.1);
  border-color: rgba(201, 168, 76, 0.45);
}

.review-card--online {
  border-top: 3px solid var(--teal);
}

.review-card--store {
  border-top: 3px solid #b87333;
  background: linear-gradient(165deg, rgba(255, 253, 249, 0.98), rgba(255, 255, 255, 0.94));
}

.review-card--store .review-card-glow {
  background: radial-gradient(circle, rgba(184, 115, 51, 0.16), transparent 70%);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.review-channel {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 50px;
  white-space: nowrap;
}

.review-channel--online {
  color: var(--teal);
  background: rgba(26, 92, 94, 0.1);
  border: 1px solid rgba(26, 92, 94, 0.14);
}

.review-channel--store {
  color: #8b4513;
  background: rgba(184, 115, 51, 0.12);
  border: 1px solid rgba(184, 115, 51, 0.18);
}

.verified {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teal);
  background: rgba(26, 92, 94, 0.1);
  padding: 3px 10px;
  border-radius: 50px;
}

.review-stars {
  color: var(--gold-dark);
  font-size: 0.88rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.review-text,
.review-card > p {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 18px;
  font-style: normal;
  position: relative;
  z-index: 1;
  flex: 1;
}

.reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  position: relative;
  z-index: 1;
}

.avatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--burgundy), var(--teal));
  color: var(--gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.12);
  flex-shrink: 0;
}

.avatar--gold {
  background: linear-gradient(135deg, #c9a84c, #e8d5a3);
  color: var(--burgundy-dark);
}

.avatar--teal {
  background: linear-gradient(135deg, var(--teal), #2a7a7c);
}

.avatar--burgundy {
  background: linear-gradient(135deg, var(--burgundy), var(--burgundy-dark));
}

.avatar--store {
  background: linear-gradient(135deg, #b87333, #8b4513);
  color: #fff8f0;
}

.reviewer strong {
  display: block;
  font-size: 0.92rem;
  color: var(--burgundy-dark);
}

.reviewer span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---- FAQ ---- */
.faq {
  background: var(--cream);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq-item.active {
  border-color: var(--teal);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--burgundy-dark);
  text-align: left;
  font-family: inherit;
  gap: 16px;
  transition: color var(--transition);
}

.faq-question:hover {
  color: var(--teal);
}

.faq-icon {
  font-size: 1.4rem;
  color: var(--gold-dark);
  flex-shrink: 0;
  transition: transform var(--transition);
  line-height: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding: 0 24px 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---- Footer (elegant gold jewellery) ---- */
.footer {
  position: relative;
  color: rgba(247, 236, 210, 0.82);
  padding-top: 56px;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(201, 168, 76, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 18%, rgba(92, 26, 58, 0.35), transparent 50%),
    linear-gradient(165deg, #1a0c12 0%, #2a1420 42%, #1c1016 100%);
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #7a5a18 12%,
    #e8d5a0 38%,
    #c9a84c 50%,
    #e8d5a0 62%,
    #7a5a18 88%,
    transparent 100%
  );
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.35);
}

.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L44 36 L72 40 L44 44 L40 72 L36 44 L8 40 L36 36 Z' fill='%23c9a84c'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.8fr;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-brand p {
  margin-top: 12px;
  font-size: 0.9rem;
  max-width: 320px;
  line-height: 1.65;
  color: rgba(232, 213, 160, 0.72);
  letter-spacing: 0.02em;
}

.footer-brand .logo-footer {
  margin-bottom: 16px;
  display: inline-flex;
}

.footer-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #f3e4a8;
  margin-bottom: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-heading::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.7), transparent);
}

.footer-heading svg {
  color: #c9a84c;
  flex-shrink: 0;
}

.footer-address {
  background:
    linear-gradient(145deg, rgba(201, 168, 76, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 18px;
  padding: 24px;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(243, 228, 168, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.22);
}

.footer-company-name {
  margin: -8px 0 12px;
}

.footer-branches {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-branch + .footer-branch {
  padding-top: 18px;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
}

.footer-branch-label {
  font-weight: 700;
  color: #e8d5a0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.footer-branch .footer-directions {
  margin-top: 12px;
}

.footer-address-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(247, 236, 210, 0.88);
}

.address-line.address-title {
  font-weight: 600;
  color: var(--white);
  font-size: 0.98rem;
}

.address-line.address-pin {
  font-weight: 600;
  color: var(--gold-light);
  margin-top: 2px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}

.footer-contact-item svg {
  color: var(--gold);
  flex-shrink: 0;
}

.footer-contact-name {
  font-weight: 700;
  color: var(--white);
  font-size: 0.98rem;
}

.footer-contact-phone {
  text-decoration: none;
  font-weight: 600;
  color: #e8d5a0;
  transition: color var(--transition);
}

.footer-contact-phone:hover {
  color: #fff8e7;
}

.footer-directions {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.18), rgba(160, 124, 46, 0.1));
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 999px;
  color: #f3e4a8;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all var(--transition);
}

.footer-directions:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.32), rgba(160, 124, 46, 0.18));
  border-color: #e8d5a0;
  color: #fff8e7;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.18);
}

.footer-links-col {
  display: flex;
  flex-direction: column;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links > a {
  color: rgba(247, 236, 210, 0.72);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition), border-color var(--transition), padding var(--transition);
  padding-left: 12px;
  border-left: 2px solid rgba(201, 168, 76, 0.2);
}

.footer-links > a:hover {
  color: #f3e4a8;
  border-left-color: #c9a84c;
  padding-left: 14px;
}

.footer-support {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-left: 2px solid #c9a84c;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(243, 228, 168, 0.1);
}

.footer-support-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8d5a0;
  margin-bottom: 4px;
}

.footer-support-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition);
}

.footer-support-icon {
  width: 16px;
  height: 16px;
  justify-self: center;
  flex-shrink: 0;
  color: var(--gold);
}

.footer-support-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

.footer-support-phone span,
.footer-support-email span {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.footer-support-phone:hover,
.footer-support-email:hover {
  color: var(--gold-light);
}

/* ---- Legal Pages ---- */
.legal-hero {
  position: relative;
  padding: 72px 0 64px;
  overflow: hidden;
}

.legal-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(92, 26, 58, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(26, 92, 94, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, var(--burgundy-dark) 0%, var(--burgundy) 45%, var(--teal-dark) 100%);
  z-index: 0;
}

.legal-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
}

.legal-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}

.legal-hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: var(--gold-light);
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--white);
  margin-bottom: 18px;
  line-height: 1.15;
}

.legal-hero-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 28px;
}

.legal-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.legal-trust-badges span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
}

.legal-page {
  padding: 56px 0 88px;
  background: #ffffff;
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: 100px;
}

.legal-toc {
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}

.legal-toc-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--burgundy-dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold);
}

.legal-toc a {
  display: block;
  padding: 8px 12px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
  border-left: 2px solid transparent;
}

.legal-toc a:hover {
  color: var(--burgundy);
  background: var(--cream);
  border-left-color: var(--gold);
  padding-left: 14px;
}

.legal-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal-intro-card {
  background: linear-gradient(135deg, rgba(92, 26, 58, 0.06), rgba(26, 92, 94, 0.06));
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}

.legal-intro-card p {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 12px;
}

.legal-intro-card p:last-child {
  margin-bottom: 0;
}

.legal-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow);
  scroll-margin-top: 100px;
}

.legal-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.legal-section-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--burgundy), var(--teal));
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--burgundy-dark);
  margin: 0;
}

.legal-section p {
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 14px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-subsection {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.legal-subsection h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 10px;
}

.legal-list {
  padding-left: 22px;
  margin-bottom: 14px;
}

.legal-list li {
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 8px;
  padding-left: 4px;
}

.legal-list li::marker {
  color: var(--gold-dark);
}

.legal-highlight {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(26, 92, 94, 0.08));
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  color: var(--burgundy-dark);
}

.legal-contact-card {
  background: linear-gradient(145deg, var(--burgundy-dark), var(--burgundy));
  border-color: rgba(201, 168, 76, 0.3);
}

.legal-contact-card .legal-section-head {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.legal-contact-card .legal-section-num {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--burgundy-dark);
}

.legal-contact-card h2,
.legal-contact-card p {
  color: rgba(255, 255, 255, 0.92);
}

.legal-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.legal-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
}

.legal-contact-item:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.legal-contact-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.legal-contact-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-light);
}

.legal-contact-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
}

.legal-section a:not(.legal-contact-item) {
  color: var(--teal);
  font-weight: 600;
}

.legal-section a:not(.legal-contact-item):hover {
  color: var(--burgundy);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
  padding: 18px 0 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32));
}

.footer-bottom p {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(232, 213, 160, 0.55);
}

/* ---- Floating Buttons ---- */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff;
  border-radius: 50px;
  text-decoration: none;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.whatsapp-btn-icon {
  flex-shrink: 0;
}

.whatsapp-btn-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 90;
  padding: 11px 28px 11px 22px;
}

.whatsapp-btn-header {
  display: none;
}

.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 89;
  background: linear-gradient(135deg, var(--burgundy), var(--teal));
  color: var(--white);
  text-align: center;
  padding: 16px;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  display: none;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(61, 15, 38, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  transform: translateY(20px);
  transition: transform var(--transition);
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.modal-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
}

.modal h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--burgundy-dark);
  margin-bottom: 12px;
}

.modal p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
  line-height: 1.6;
}

.valuation-modal-overlay {
  z-index: 20000;
  background: rgba(61, 15, 38, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#successModal {
  z-index: 20010;
}

.valuation-modal {
  max-width: min(480px, 100%);
  width: 100%;
  max-height: min(
    90dvh,
    calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px)
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  padding: 0;
  margin: auto;
}

.valuation-modal-head {
  flex-shrink: 0;
  padding: 28px 52px 14px 28px;
  text-align: center;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.valuation-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 28px 28px;
}

.valuation-modal .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.25);
}

.valuation-modal h3 {
  text-align: center;
  margin-bottom: 6px;
}

.valuation-modal .form-subtitle {
  text-align: center;
  margin-bottom: 0;
}

body.modal-open .sticky-cta,
body.modal-open .whatsapp-btn-float {
  visibility: hidden;
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-form-card {
    position: static;
    max-width: 480px;
    margin: 0 auto;
  }

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

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

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

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .header-inner {
    height: var(--header-h);
    gap: 8px;
  }

  .logo-icon-img {
    height: 44px;
  }

  .logo-wordmark {
    height: clamp(32px, 9vw, 40px);
    max-width: min(176px, 48vw);
  }

  .logo-pmj {
    font-size: 1.38rem;
    letter-spacing: 0.06em;
  }

  .logo-gold {
    font-size: 1.38rem;
    letter-spacing: 0.06em;
  }

  .logo-footer-full {
    height: clamp(96px, 28vw, 128px);
  }

  /* Mobile nav drawer — styled in "Mobile layout fixes" section */

  .call-btn-header {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
  }

  .call-btn-header .call-btn-label {
    display: none;
  }

  .call-btn-header .call-btn-icon {
    width: 20px;
    height: 20px;
  }

  .whatsapp-btn-float {
    display: none;
  }

  .whatsapp-btn-header {
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
  }

  .whatsapp-btn-header .whatsapp-btn-label {
    display: none;
  }

  .whatsapp-btn-header .whatsapp-btn-icon {
    width: 22px;
    height: 22px;
  }

  .header-actions {
    gap: 8px;
  }

  .menu-toggle {
    display: flex;
  }

  .hero {
    padding: 32px 0 48px;
  }

  .hero-content {
    text-align: center;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.98rem;
  }

  .trust-badges {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    gap: 16px;
  }

  .stat {
    min-width: 0;
    flex: 1;
    max-width: 110px;
  }

  .stat span {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .hero-form-card {
    max-width: none;
    width: 100%;
    padding: 28px 22px;
  }

  .hero-form-card h3 {
    font-size: 1.35rem;
  }

  .stat strong {
    font-size: 1.5rem;
  }

  .features-grid,
  .services-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .reviews-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 24px;
  }

  .reviews-header {
    max-width: none;
    text-align: center;
    margin-bottom: 0;
  }

  .reviews-header .section-label,
  .reviews-header h2,
  .reviews-header p {
    text-align: center;
  }

  .rating-score--compact {
    align-self: center;
    width: 100%;
    max-width: 280px;
  }

  .reviews-grid,
  .reviews-grid--six {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .review-card {
    flex: none;
    width: 100%;
    max-width: none;
    scroll-snap-align: none;
    padding: 20px 18px 18px;
    border-radius: 16px;
  }

  .review-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }

  .review-channel {
    font-size: 0.64rem;
    white-space: normal;
    line-height: 1.35;
    max-width: calc(100% - 80px);
  }

  .review-stars {
    margin-left: auto;
    font-size: 0.82rem;
  }

  .review-text,
  .review-card > p {
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .reviewer {
    gap: 10px;
    padding-top: 14px;
  }

  .reviewer div {
    min-width: 0;
    text-align: left;
  }

  .reviewer strong {
    font-size: 0.88rem;
  }

  .reviewer span {
    font-size: 0.74rem;
    display: block;
    line-height: 1.35;
  }

  .avatar {
    width: 40px;
    height: 40px;
    font-size: 0.88rem;
  }

  .section {
    padding: 56px 0;
  }

  .section-header {
    margin-bottom: 36px;
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 5vw, 1.85rem);
  }

  .section-header p {
    font-size: 0.98rem;
  }

  .rating-score {
    width: 100%;
    padding: 20px 24px;
  }

  .rating-score strong {
    font-size: 2.5rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 32px;
    text-align: center;
    justify-items: center;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-brand p {
    max-width: none;
  }

  .footer-brand .logo-footer {
    justify-content: center;
  }

  .footer-heading {
    justify-content: center;
  }

  .footer-address {
    order: 2;
    width: 100%;
    max-width: 420px;
    text-align: center;
  }

  .footer-address-text {
    align-items: center;
  }

  .footer-directions {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links-col {
    order: 3;
    width: 100%;
    max-width: 420px;
    align-items: center;
  }

  .footer-links {
    align-items: center;
    width: 100%;
  }

  .footer-links > a {
    padding-left: 0;
    border-left: none;
    text-align: center;
  }

  .footer-links > a:hover {
    padding-left: 0;
    border-left: none;
  }

  .footer-support {
    width: 100%;
    max-width: 320px;
    align-items: flex-start;
    border-left: 1px solid rgba(212, 175, 55, 0.2);
  }

  .footer-bottom p {
    padding: 0 8px;
    line-height: 1.5;
  }

  .sticky-cta {
    display: block;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 0.95rem;
  }

  body.sell-gold-page {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .modal-overlay {
    padding: 12px;
  }

  .modal {
    padding: 32px 24px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 8px;
    right: 8px;
  }

  .valuation-modal-overlay {
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .valuation-modal {
    max-width: min(100%, 440px);
    max-height: min(
      88dvh,
      calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px)
    );
    border-radius: var(--radius-lg);
  }

  .valuation-modal-head {
    padding: 24px 48px 12px 20px;
  }

  .valuation-modal-body {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .valuation-modal h3 {
    font-size: 1.35rem;
    padding-right: 0;
  }

  .form-group input[type="text"],
  .form-group input[type="number"],
  .form-group input[type="tel"],
  .form-group select,
  .phone-input input {
    font-size: 16px;
  }

  .btn-full {
    min-height: 48px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .legal-sidebar {
    position: static;
  }

  .legal-toc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
    padding: 20px 16px;
  }

  .legal-toc-title {
    grid-column: 1 / -1;
  }

  .legal-section {
    padding: 24px 20px;
  }

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

  .legal-hero {
    padding: 52px 0 44px;
  }

  .legal-hero h1 {
    font-size: clamp(1.85rem, 7vw, 2.5rem);
  }

  .legal-hero-desc {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 14px;
  }

  .logo {
    gap: 8px;
    flex: 0 1 auto;
    max-width: none;
  }

  .logo-mark {
    padding: 3px;
  }

  .logo-brand {
    min-width: 0;
    overflow: visible;
  }

  .logo-name {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .logo-pmj,
  .logo-gold {
    white-space: nowrap;
  }

  .logo-pmj {
    font-size: 1.22rem;
    letter-spacing: 0.06em;
  }

  .logo-gold {
    font-size: 1.22rem;
    letter-spacing: 0.06em;
  }

  .logo-icon-img {
    height: 36px;
  }

  .logo-tagline {
    font-size: 0.52rem;
    letter-spacing: 1.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .marquee-track {
    font-size: 0.76rem;
    gap: 32px;
  }

  .hero h1 {
    font-size: 1.72rem;
    line-height: 1.25;
  }

  .hero-badge {
    font-size: 0.72rem;
    padding: 6px 12px;
    line-height: 1.4;
  }

  .trust-badges {
    gap: 6px;
  }

  .trust-badges span {
    font-size: 0.72rem;
    padding: 5px 10px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .stat {
    max-width: none;
  }

  .stat strong {
    font-size: 1.35rem;
  }

  .stat span {
    font-size: 0.65rem;
  }

  .hero-form-card {
    padding: 22px 18px;
  }

  .hero-form-benefits li {
    font-size: 0.88rem;
  }

  .feature-card,
  .service-card,
  .step-card {
    padding: 22px 18px;
  }

  .review-card {
    padding: 20px 16px 18px;
    border-radius: 16px;
  }

  .reviews-grid,
  .reviews-grid--six {
    gap: 12px;
    margin: 0;
    padding: 0;
  }

  .faq-question {
    font-size: 0.95rem;
    padding: 16px 18px;
  }

  .rating-score {
    padding: 18px 16px;
  }

  .rating-score strong {
    font-size: 2.2rem;
  }

  .rating-count {
    font-size: 0.82rem;
  }

  .header-actions {
    gap: 6px;
  }

  .whatsapp-btn-header .whatsapp-btn-icon {
    width: 20px;
    height: 20px;
  }

  .valuation-modal-head {
    padding: 20px 44px 10px 16px;
  }

  .valuation-modal-body {
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .valuation-modal h3 {
    font-size: 1.2rem;
  }

  .form-subtitle {
    font-size: 0.82rem;
  }

  .legal-hero {
    padding: 40px 0 36px;
  }

  .legal-trust-badges {
    flex-direction: column;
    align-items: stretch;
  }

  .legal-trust-badges span {
    text-align: center;
    font-size: 0.78rem;
  }

  .legal-toc {
    grid-template-columns: 1fr;
  }

  .legal-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .legal-section-num {
    width: 40px;
    height: 40px;
    font-size: 0.88rem;
  }

  .legal-intro-card {
    padding: 22px 18px;
  }

  .footer-address,
  .footer-support {
    padding: 20px 18px;
  }
}

/* iPhone 15 / 16 and similar (~390?430px) ? header logo must fit beside action buttons */
@media (max-width: 430px) {
  .header-inner {
    gap: 8px;
  }

  .logo {
    max-width: calc(100% - 140px);
  }

  .logo-pmj {
    font-size: 1.06rem;
    letter-spacing: 0.05em;
  }

  .logo-gold {
    font-size: 1.06rem;
    letter-spacing: 0.05em;
  }

  .logo-name {
    gap: 5px;
  }

  .logo-icon-img {
    height: 36px;
  }

  .logo-wordmark {
    height: clamp(28px, 8.2vw, 34px);
    max-width: min(148px, 54vw);
  }

  .logo-tagline {
    font-size: 0.48rem;
    letter-spacing: 0.8px;
  }
}

/* ---- Header cart button ---- */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--burgundy);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.cart-btn:hover {
  border-color: var(--gold);
  color: var(--burgundy-dark);
  box-shadow: var(--shadow);
}

.cart-btn-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--burgundy-dark);
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- Coins shop ---- */
.coins {
  background: linear-gradient(180deg, var(--cream) 0%, #fff 45%, var(--cream-dark) 100%);
}

.coins-marketing {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
  gap: 28px 36px;
  align-items: center;
  margin: 8px 0 36px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  background:
    radial-gradient(circle at 18% 40%, rgba(201, 168, 76, 0.22), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(92, 26, 58, 0.08), transparent 40%),
    linear-gradient(145deg, #fffdf8 0%, #f7efe0 48%, #f3e6d2 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.coins-marketing-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.coins-marketing-glow {
  position: absolute;
  width: min(78%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.45) 0%, rgba(201, 168, 76, 0) 70%);
  filter: blur(8px);
  z-index: 0;
}

.coins-marketing-ring {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: 0 22px 48px rgba(92, 26, 58, 0.2);
  overflow: hidden;
}

.coins-marketing-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  background: #1a120c;
}

.coins-marketing-copy {
  position: relative;
  z-index: 1;
}

.coins-marketing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(92, 26, 58, 0.08);
  color: var(--burgundy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.coins-marketing-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--burgundy-dark);
  margin-bottom: 12px;
}

.coins-marketing-copy > p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 38ch;
  margin-bottom: 20px;
}

.coins-marketing-highlights {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.coins-marketing-highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(229, 221, 208, 0.95);
  box-shadow: 0 8px 20px rgba(92, 26, 58, 0.06);
}

.coins-marketing-highlights strong {
  display: block;
  color: var(--burgundy-dark);
  font-size: 0.88rem;
  line-height: 1.2;
}

.coins-marketing-highlights span {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.cm-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.cm-icon-cert {
  background-color: rgba(34, 160, 107, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a7a4c'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 15l-4-4 1.41-1.41L11 13.17l5.59-5.58L18 9l-7 7z'/%3E%3C/svg%3E");
}

.cm-icon-secure {
  background-color: rgba(92, 26, 58, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c1a3a'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
}

.cm-icon-trusted {
  background-color: rgba(201, 168, 76, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a07c2e'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.cm-icon-purity {
  background-color: rgba(201, 168, 76, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a07c2e'%3E%3Cpath d='M12 2l2.4 7.2H22l-6 4.8 2.3 7L12 16.8 5.7 21l2.3-7-6-4.8h7.6L12 2z'/%3E%3C/svg%3E");
}

.cm-icon-delivery {
  background-color: rgba(37, 99, 235, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M3 4h11v9h2.5L20 9h1v8h-1.5a2.5 2.5 0 01-5 0H9.5a2.5 2.5 0 01-5 0H3V4zm2 13.5A1.5 1.5 0 106.5 19 1.5 1.5 0 005 17.5zM16 17.5A1.5 1.5 0 1017.5 19 1.5 1.5 0 0016 17.5zM14 6H5v5h9V6z'/%3E%3C/svg%3E");
}

.coins-marketing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.coins-marketing-actions .btn {
  min-width: 140px;
}

.coins-rates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
}

.coins-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
  box-shadow: 0 2px 10px rgba(92, 26, 58, 0.06);
}

.coins-rate-pill strong {
  color: var(--burgundy);
  font-weight: 700;
}

.coins-rate-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.coins-rate-dot.gold {
  background: var(--gold);
}

.coins-rate-dot.silver {
  background: #9aa3ad;
}

.coins-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.coins-filter {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.coins-filter:hover {
  border-color: var(--gold);
  color: var(--burgundy);
}

.coins-filter.active {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--gold-light);
}

.coins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.coin-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

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

.coin-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 40%, #fff8ea 0%, #f0e4cc 55%, #e4d4b4 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.coin-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(92, 26, 58, 0.18));
  transition: transform var(--transition);
}

.coin-card[data-metal="silver"] .coin-card-media {
  background:
    radial-gradient(circle at 50% 40%, #f7f8fa 0%, #e4e8ec 55%, #cfd6dc 100%);
}

.coin-card[data-metal="silver"] .coin-card-media img {
  filter: drop-shadow(0 8px 18px rgba(26, 92, 94, 0.16));
}

.coin-card:hover .coin-card-media img {
  transform: scale(1.04);
}

.coin-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--burgundy);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 999px;
}

.coin-badge-sale {
  top: 12px;
  left: auto;
  right: 12px;
  background: #0f766e;
  color: #fff;
}

.coin-badge-availability {
  top: 44px;
  left: 12px;
  right: auto;
  background: #5c5c5c;
  color: #fff;
}

.coin-badge-coming_soon {
  background: #8a6510;
}

.coin-badge-unavailable {
  background: #7a2e2e;
}

.coin-price-old {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 600;
}

.coin-discount {
  font-size: 0.72rem;
  color: #0f766e;
  font-weight: 700;
  white-space: nowrap;
}

.coin-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.coin-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.coin-metal {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 6px;
}

.coin-metal-gold {
  background: rgba(201, 168, 76, 0.18);
  color: var(--gold-dark);
}

.coin-metal-silver {
  background: rgba(26, 92, 94, 0.12);
  color: var(--teal);
}

.coin-purity {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.coin-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--burgundy-dark);
  line-height: 1.25;
}

.coin-card-body > p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.coin-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coin-weight {
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.coin-weight:hover {
  border-color: var(--gold);
}

.coin-weight.active {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--gold-light);
}

.coin-price-block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.coin-price-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.coin-price {
  font-size: 1.2rem;
  color: var(--burgundy);
  font-weight: 800;
}

.coin-making {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.coin-charge-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.coin-gst {
  font-size: 0.72rem;
  color: var(--burgundy);
  font-weight: 700;
  white-space: nowrap;
}

.coin-add-btn.added {
  background: var(--teal);
  border-color: var(--teal);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(201, 168, 76, 0.45);
  color: var(--burgundy-dark);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
}

.btn-ghost:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ---- Cart drawer ---- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 16, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1200;
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
}

.cart-overlay.active {
  opacity: 1;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: var(--app-height);
  max-height: var(--app-height);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--cream);
  z-index: 1210;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-out);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.cart-drawer-header h3 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  font-size: 1.35rem;
}

.cart-drawer-close {
  border: none;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.cart-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
}

.cart-empty-hint {
  margin: 8px 0 20px;
  font-size: 0.9rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.cart-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream-dark);
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cart-item-info strong {
  font-size: 0.92rem;
  color: var(--burgundy-dark);
}

.cart-item-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cart-item-price {
  color: var(--burgundy) !important;
  font-weight: 700;
}

.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  background: var(--cream);
}

.cart-item-qty button {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--burgundy);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.cart-item-qty span {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.cart-drawer-footer {
  flex: 0 0 auto;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Clear bag confirmation (above cart drawer) */
.cart-clear-modal {
  z-index: 1225;
  background: rgba(61, 15, 38, 0.72);
  backdrop-filter: blur(4px);
}

.cart-clear-dialog {
  max-width: 380px;
  padding: 32px 28px 28px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 24px 48px rgba(61, 15, 38, 0.28);
}

.cart-clear-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.18), rgba(92, 26, 58, 0.12));
  color: var(--burgundy-dark);
}

.cart-clear-icon svg {
  width: 28px;
  height: 28px;
}

.cart-clear-dialog h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  color: var(--burgundy-dark);
  margin: 0 0 8px;
}

.cart-clear-dialog p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 24px;
}

.cart-clear-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

@media (min-width: 420px) {
  .cart-clear-actions {
    flex-direction: row;
    justify-content: center;
  }

  .cart-clear-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

.cart-coupon {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(250, 246, 239, 0.9);
  border: 1px solid rgba(229, 221, 208, 0.95);
}

.cart-coupon-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--burgundy-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-coupon-toggle:hover,
.cart-coupon-toggle:focus-visible {
  color: var(--gold-dark, #8a6a1a);
  outline: none;
}

.cart-coupon-toggle[hidden] {
  display: none !important;
}

.cart-coupon-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-coupon-panel[hidden] {
  display: none !important;
}

.cart-coupon-offers-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cart-coupon-offers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-coupon-offers-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.coupon-offers-heading {
  margin: 4px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal, #0d5c63);
}

.coupon-offers-heading-muted {
  margin-top: 12px;
  color: var(--text-muted);
}

.cart-coupon-offer {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'code value'
    'hint hint'
    'action action';
  gap: 2px 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cart-coupon-offer:hover:not(.is-disabled),
.cart-coupon-offer:focus-visible:not(.is-disabled) {
  border-color: var(--gold, #c9a227);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18);
  outline: none;
}

.cart-coupon-offer.is-selected {
  border-color: #0f766e;
  background: rgba(15, 118, 110, 0.06);
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.25);
}

.cart-coupon-offer.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
  border-style: dashed;
  background: rgba(250, 246, 239, 0.55);
}

.cart-coupon-offer-code {
  grid-area: code;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--burgundy-dark);
}

.cart-coupon-offer-value {
  grid-area: value;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f766e;
}

.cart-coupon-offer-hint {
  grid-area: hint;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.cart-coupon-offer-action {
  grid-area: action;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-dark, #8a6a1a);
  margin-top: 2px;
}

.cart-coupon-offer.is-selected .cart-coupon-offer-action {
  color: #0f766e;
}

.cart-coupon-offer.is-disabled .cart-coupon-offer-action {
  color: var(--text-muted);
}

.cart-coupon-featured {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.1), rgba(255, 255, 255, 0.95));
}

.cart-coupon-featured[hidden] {
  display: none !important;
}

.cart-coupon-featured-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  padding: 3px 8px;
}

.cart-coupon-featured-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cart-coupon-featured-code {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--burgundy-dark);
}

.cart-coupon-featured-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f766e;
  text-align: right;
}

.cart-coupon-featured-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.cart-coupon-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.cart-coupon-featured-actions .btn {
  padding: 8px 12px;
}

.cart-coupon-picker[hidden] {
  display: none !important;
}

.cart-coupon label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--burgundy-dark);
}

.cart-coupon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.cart-coupon-row input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  text-transform: uppercase;
}

.cart-coupon-row .btn {
  padding: 10px 14px;
  white-space: nowrap;
}

.cart-coupon-applied {
  margin: 0;
  font-size: 0.78rem;
  color: var(--teal, #0f766e);
  font-weight: 600;
}

.cart-coupon-error {
  margin: 0;
  font-size: 0.78rem;
  color: #b42318;
  font-weight: 600;
}

.cart-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.cart-discount-row strong,
.cart-discount-row span:last-child {
  color: #0f766e;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.cart-total-row[hidden] {
  display: none !important;
}

.cart-total-grand {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-family: var(--font-body);
}

.cart-total-grand strong {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

/* ---- Checkout modal ---- */
.checkout-modal {
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: calc(var(--app-height) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.checkout-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkout-summary {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 4px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.checkout-summary-total {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  color: var(--burgundy-dark);
  font-weight: 700;
}

.checkout-summary-total strong {
  color: var(--burgundy);
  font-size: 1.1rem;
}

.payment-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.payment-option {
  display: block;
  cursor: pointer;
}

.payment-option[hidden],
.gateway-method[hidden],
label.payment-option[hidden],
label.gateway-method[hidden],
.payment-option.is-payment-hidden,
.gateway-method.is-payment-hidden,
label.payment-option.is-payment-hidden,
label.gateway-method.is-payment-hidden,
.payment-option:not([data-pay-show="1"]),
.gateway-method:not([data-pay-show="1"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.payment-option.is-inactive {
  cursor: not-allowed;
}

.payment-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-option-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  transition: var(--transition);
  position: relative;
}

.payment-option.is-inactive .payment-option-card {
  opacity: 0.55;
  filter: grayscale(0.3);
  background: #f0ebe3;
}

.payment-status {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
  color: #1a5c5e;
}

.payment-option.is-inactive .payment-status {
  color: #6b5b4e;
}

.payment-option-card strong {
  color: var(--burgundy-dark);
  font-size: 0.95rem;
}

.payment-option-card small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.payment-option input:checked + .payment-option-card {
  border-color: var(--burgundy);
  background: #fff8f0;
  box-shadow: 0 0 0 3px rgba(92, 26, 58, 0.1);
}

.payment-option:hover .payment-option-card {
  border-color: var(--gold);
}

.checkout-payment-group.invalid .payment-option-card {
  border-color: #d92d20;
}

@media (min-width: 520px) {
  .payment-methods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.checkout-modal textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
  background: var(--cream);
  color: var(--text);
}

.checkout-modal textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}

@media (max-width: 960px) {
  .coins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coins-marketing {
    grid-template-columns: 1fr;
    padding: 22px;
    text-align: center;
  }

  .coins-marketing-copy > p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .coins-marketing-highlights {
    text-align: left;
  }

  .coins-marketing-actions {
    justify-content: center;
  }

  .coins-marketing-ring {
    width: min(100%, 360px);
  }
}

@media (max-width: 640px) {
  .coins-grid {
    grid-template-columns: 1fr;
  }

  .coins-marketing {
    padding: 18px 16px 20px;
    border-radius: 22px;
    margin-bottom: 28px;
  }

  .coins-marketing-visual {
    min-height: 260px;
  }

  .coins-marketing-highlights {
    grid-template-columns: 1fr;
  }

  .coins-marketing-actions {
    flex-direction: column;
  }

  .coins-marketing-actions .btn {
    width: 100%;
  }

  .checkout-form-row {
    grid-template-columns: 1fr;
  }

  .cart-btn {
    width: 38px;
    height: 38px;
  }

  .call-btn-header .call-btn-label,
  .whatsapp-btn-header .whatsapp-btn-label {
    display: none;
  }
}

.coin-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.coin-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.coin-card-body h3 a:hover {
  color: var(--burgundy);
}

.coin-card-media {
  text-decoration: none;
  color: inherit;
}

.cart-item-info a {
  color: inherit;
  text-decoration: none;
}

.cart-item-info a:hover strong {
  color: var(--burgundy);
}

.cart-item-link {
  display: block;
  line-height: 0;
}

/* ---- Product detail page ---- */
.product-page .header {
  position: sticky;
  top: 0;
}

.product-main {
  padding: 28px 0 64px;
  background: #ffffff;
  min-height: 70vh;
}

.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.product-breadcrumb a {
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 600;
}

.product-not-found {
  text-align: center;
  padding: 64px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.product-not-found h1 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  margin-bottom: 10px;
}

.product-not-found p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}

.product-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, #fff8ea 0%, #f0e4cc 55%, #e4d4b4 100%);
}

.product-detail[data-metal="silver"] .product-image-wrap {
  background:
    radial-gradient(circle at 50% 40%, #f7f8fa 0%, #e4e8ec 55%, #cfd6dc 100%);
}

.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.product-info h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--burgundy-dark);
  margin: 10px 0 12px;
  line-height: 1.2;
}

.product-desc {
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.6;
}

.product-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.product-rate-row strong {
  color: var(--burgundy);
}

.product-field {
  margin-bottom: 16px;
}

.product-field > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--burgundy-dark);
  margin-bottom: 8px;
}

.product-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  background: var(--cream);
}

.product-qty button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--burgundy);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.product-qty span {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
}

.product-price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: linear-gradient(180deg, #fffaf0, #fff);
  margin: 8px 0 16px;
}

.product-price-main span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.product-price-main strong {
  display: block;
  font-size: 1.8rem;
  color: var(--burgundy);
  line-height: 1.2;
  margin: 4px 0;
}

.product-price-main small {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.product-price-breakup-title {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.product-price-breakdown {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-price-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.product-price-breakdown strong {
  color: var(--burgundy-dark);
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(165deg, #1aa86a 0%, #128c7e 100%);
  border: 1px solid #0f7a6e;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(18, 140, 126, 0.22);
}

.btn-whatsapp:hover {
  background: linear-gradient(165deg, #18a062 0%, #0f7a6e 100%);
  border-color: #0c6a5f;
  color: #fff;
}

.product-page .product-actions .pd-whatsapp-btn {
  grid-column: 1 / -1;
}

.product-actions .btn.added {
  background: var(--teal);
  border-color: var(--teal);
}

.product-trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-trust li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(165deg, #ffffff 0%, #fffdf9 48%, #f9f3e8 100%);
  border: 1px solid rgba(201, 168, 76, 0.26);
  box-shadow:
    0 6px 20px rgba(61, 15, 38, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--text-muted);
  font-size: 0.86rem;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s ease;
  overflow: hidden;
}

.product-trust li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.6), transparent);
}

.product-trust li:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.48);
  box-shadow:
    0 12px 28px rgba(61, 15, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.product-trust li::after {
  content: none;
}

.product-trust-ico-pay {
  /* legacy — use trust-icon--* modifiers */
}

.product-trust strong {
  display: block;
  color: var(--burgundy-dark);
  font-size: 0.88rem;
  line-height: 1.25;
  margin-bottom: 2px;
}

.product-trust span:not(.product-trust-ico) {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
}

.related-section {
  margin-top: 48px;
}

/* Recently viewed — elegant block */
.recently-viewed-section {
  padding: clamp(36px, 5vw, 64px) 0;
  background: #ffffff;
}

.recently-viewed-block {
  position: relative;
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: 4px;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 48px rgba(61, 15, 38, 0.06);
  overflow: hidden;
}

.recently-viewed-block::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 168, 76, 0.16);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.recently-viewed-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin: 0;
  padding: 34px 24px 28px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.16);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(201, 168, 76, 0.08), transparent 70%),
    #ffffff;
}

.recently-viewed-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a07c2e;
}

.recently-viewed-head h2 {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(1.85rem, 3.8vw, 2.45rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3d0f26;
  line-height: 1.08;
}

.recently-viewed-lead {
  margin: 2px 0 0;
  max-width: 36ch;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: #6a5a62;
  letter-spacing: 0.015em;
}

.recently-viewed-clear {
  appearance: none;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body), sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(92, 26, 58, 0.5);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.recently-viewed-clear:hover,
.recently-viewed-clear:focus-visible {
  color: var(--burgundy, #5c1a3a);
  outline: none;
}

.recently-viewed-body {
  position: relative;
  z-index: 2;
  padding: 24px 20px 22px;
}

.recently-viewed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.recent-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(61, 15, 38, 0.04);
  transition: transform 0.35s var(--ease-out, ease), box-shadow 0.35s ease, border-color 0.25s ease;
}

.recent-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 18px 42px rgba(61, 15, 38, 0.1);
}

.recent-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0e4cc 55%, #e8dcc4 100%);
}

.recent-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.12);
}

.recent-card[data-metal='silver'] .recent-card-media {
  background:
    radial-gradient(circle at 50% 35%, #f7f8fa 0%, #e4e8ec 55%, #cfd6dc 100%);
}

.recent-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out, ease);
}

.recent-card:hover .recent-card-media img {
  transform: scale(1.05);
}

.recent-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 16px 14px 18px;
}

.recent-card-meta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a07c2e;
}

.recent-card-name {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: #3d0f26;
  letter-spacing: 0.01em;
}

.recent-card-price {
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(92, 26, 58, 0.72);
}

.product-page .recently-viewed-section {
  margin-top: 44px;
  padding: 0 0 8px;
}

.product-page .recently-viewed-head {
  padding: 30px 20px 24px;
}

.product-page .recently-viewed-body {
  padding: 20px 16px 18px;
}

@media (max-width: 980px) {
  .recently-viewed-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .recently-viewed-block::before {
    inset: 6px;
  }

  .recently-viewed-head {
    padding: 26px 14px 22px;
  }

  .recently-viewed-head h2 {
    letter-spacing: 0.08em;
  }

  .recently-viewed-body {
    padding: 16px 10px 14px;
  }

  .recently-viewed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .recent-card-body {
    padding: 12px 10px 14px;
  }

  .recent-card-name {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recent-card,
  .recent-card-media img {
    transition: none;
  }
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.related-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.related-card-media {
  aspect-ratio: 1 / 1;
  background: var(--cream-dark);
}

.related-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.related-card-body strong {
  color: var(--burgundy-dark);
  font-size: 0.95rem;
}

.related-card-body span:last-child {
  color: var(--burgundy);
  font-weight: 700;
  font-size: 0.9rem;
}

.related-empty {
  color: var(--text-muted);
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
  }

  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-actions,
  .coin-card-actions {
    grid-template-columns: 1fr;
  }

  .product-detail {
    padding: 16px;
  }
}

/* ---- Rich ecommerce shop ---- */
.shop-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(229, 221, 208, 0.9);
  box-shadow: 0 10px 30px rgba(92, 26, 58, 0.06);
}

.shop-toolbar .coins-rates {
  margin: 0;
}

.shop-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.shop-cat-pill {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition);
}

.shop-cat-pill:hover {
  border-color: var(--gold);
  color: var(--burgundy);
}

.shop-cat-pill.active {
  background: linear-gradient(135deg, var(--burgundy), #7a2a52);
  border-color: var(--burgundy);
  color: var(--gold-light);
  box-shadow: 0 8px 18px rgba(92, 26, 58, 0.22);
}

.shop-catalog {
  display: flex;
  flex-direction: column;
  gap: 42px;
  position: relative;
  z-index: 1;
  clear: both;
  padding-top: 8px;
  min-height: 240px;
}

.shop-category-block {
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 246, 239, 0.92));
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: var(--shadow);
}

.shop-category-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(229, 221, 208, 0.95);
}

.shop-category-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.shop-category-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  color: var(--burgundy-dark);
  margin-bottom: 6px;
}

.shop-category-head p {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 54ch;
}

.shop-category-count {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(92, 26, 58, 0.08);
  color: var(--burgundy);
  font-size: 0.8rem;
  font-weight: 700;
}

.shop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(92, 26, 58, 0.14);
}

.shop-empty {
  text-align: center;
  padding: 48px 20px;
  border-radius: 18px;
  background: var(--white);
  border: 1px dashed var(--border);
  color: var(--text-muted);
}

.shop-empty h3 {
  color: var(--burgundy-dark);
  font-family: var(--font-display);
  margin-bottom: 8px;
}

.feature-card:hover,
.service-card:hover,
.step-card:hover,
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 720px) {
  .shop-category-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .shop-category-block {
    padding: 16px;
  }
}

/* ============================================
   Ecommerce storefront polish
   ============================================ */
.shop-section {
  position: relative;
  overflow: visible;
}

.shop-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 280px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 168, 76, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(92, 26, 58, 0.1), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.shop-section > .container {
  position: relative;
  z-index: 1;
}

.shop-section-header h2 {
  letter-spacing: -0.02em;
}

.shop-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

.shop-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(230, 221, 208, 0.95);
  box-shadow: 0 10px 24px rgba(61, 15, 38, 0.05);
  backdrop-filter: blur(8px);
  transition: transform var(--transition), box-shadow var(--transition);
}

.shop-trust-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.shop-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--burgundy), #7a2a52);
  color: var(--gold-light);
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.shop-trust-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--burgundy-dark);
  line-height: 1.2;
}

.shop-trust-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.coins-marketing {
  animation: shopRise 0.7s ease both;
}

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

.shop-toolbar-sticky {
  position: relative;
  top: auto;
  z-index: 5;
  backdrop-filter: blur(14px);
  background: rgba(255, 252, 246, 0.96);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 12px 32px rgba(61, 15, 38, 0.08);
  margin-bottom: 28px;
}

.shop-category-block {
  background:
    linear-gradient(180deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 0 14px 40px rgba(61, 15, 38, 0.07);
}

.shop-category-head h3 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
}

.coins-grid.shop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.shop-card {
  border: 1px solid rgba(230, 221, 208, 0.95);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(61, 15, 38, 0.06);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.shop-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 22px 48px rgba(61, 15, 38, 0.14);
}

.coin-card-media {
  display: block;
  text-decoration: none;
}

.coin-card-quick {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  background: rgba(61, 15, 38, 0.92);
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}

.shop-card:hover .coin-card-quick {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.coin-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.25;
  margin: 2px 0;
}

.coin-card-body h3 a {
  color: var(--burgundy-dark);
  text-decoration: none;
}

.coin-card-body h3 a:hover {
  color: var(--burgundy-light);
}

.coin-card-desc {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coin-price {
  font-size: 1.28rem !important;
  letter-spacing: -0.02em;
}

.coin-card-actions .btn-primary {
  box-shadow: 0 10px 22px rgba(92, 26, 58, 0.2);
}

.coin-card-actions .btn-primary:hover {
  transform: translateY(-1px);
}

.product-main {
  background: #ffffff;
}

.product-detail {
  gap: 36px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 20px 55px rgba(61, 15, 38, 0.1);
  background:
    linear-gradient(160deg, #ffffff 0%, #fffdf8 55%, #faf4ea 100%);
}

.product-image-wrap {
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.18);
}

.product-gallery-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.product-gallery-note span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--burgundy);
  background: rgba(92, 26, 58, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 999px;
  padding: 7px 12px;
}

.product-info h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
}

.product-price-card {
  border-radius: 18px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(250, 244, 232, 0.95));
  box-shadow: 0 12px 28px rgba(61, 15, 38, 0.06);
}

.product-actions .btn-primary {
  min-height: 50px;
  font-size: 1rem;
  box-shadow: 0 12px 28px rgba(92, 26, 58, 0.22);
}

.header.scrolled {
  backdrop-filter: blur(16px);
  background: rgba(255, 252, 246, 0.9);
  box-shadow: 0 8px 24px rgba(61, 15, 38, 0.06);
}

.cart-btn {
  transition: transform var(--transition), box-shadow var(--transition);
}

.cart-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .shop-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coins-grid.shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .shop-trust-strip {
    grid-template-columns: 1fr;
  }

  .coins-grid.shop-grid {
    grid-template-columns: 1fr;
  }

  .shop-toolbar-sticky {
    top: auto;
    position: relative;
  }

  .product-trust {
    grid-template-columns: 1fr;
  }

  .coin-card-quick {
    display: none;
  }
}

/* ============================================
   Cart bag redesign (clear ecommerce layout)
   ============================================ */
.cart-drawer {
  width: min(440px, 100%);
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fffdf8 0%, var(--cream) 48%, #f3ebe0 100%);
  box-shadow: -18px 0 48px rgba(61, 15, 38, 0.18);
}

.cart-drawer-header {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(255, 255, 255, 0.94);
  z-index: 2;
}

.cart-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: 20px;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.cart-drawer-footer {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -10px 30px rgba(61, 15, 38, 0.06);
  position: relative;
  z-index: 3;
}

.cart-drawer-body > .cart-item,
.cart-drawer-body > .cart-coupon {
  flex: 0 0 auto;
  min-height: min-content;
}

.cart-coupon {
  flex: 0 0 auto;
  margin-top: 4px;
  border-radius: 14px;
  border: 1px dashed rgba(201, 168, 76, 0.55);
  background: linear-gradient(145deg, #faf6ef, #fff);
  box-shadow: none;
}

.cart-drawer-heading h3,
.cart-drawer-header h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0;
}

.cart-drawer-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.cart-drawer-close {
  border: 1px solid var(--border);
  background: var(--white);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 1.35rem;
}

.cart-drawer-close:hover {
  color: var(--burgundy);
  border-color: var(--gold);
}

.cart-empty {
  padding: 52px 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(201, 168, 76, 0.45);
  border-radius: 18px;
  margin-top: 8px;
}

.cart-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.cart-empty h4 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.cart-item {
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: start;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(61, 15, 38, 0.05);
  border-color: rgba(230, 221, 208, 0.95);
}

.cart-item-img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 40%, #fff8ea 0%, #f0e4cc 55%, #e4d4b4 100%);
}

.cart-item-info {
  gap: 8px;
}

.cart-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cart-item-name {
  color: var(--burgundy-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.cart-item-name:hover {
  color: var(--burgundy-light);
}

.cart-item-remove {
  border: none;
  background: transparent;
  color: #9b3b3b;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.cart-item-remove:hover {
  text-decoration: underline;
}

.cart-item-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cart-item-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cart-item-prices {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-unit {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cart-item-price {
  font-weight: 800 !important;
  font-size: 1rem !important;
}

.cart-item-qty button:hover {
  background: var(--burgundy);
  color: var(--gold-light);
}

.cart-drawer-footer {
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -10px 30px rgba(61, 15, 38, 0.06);
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 3;
}

.cart-coupon {
  border-radius: 14px;
  border: 1px dashed rgba(201, 168, 76, 0.55);
  background: linear-gradient(145deg, #faf6ef, #fff);
  margin-top: 4px;
}

.cart-bill {
  border: 1px solid rgba(230, 221, 208, 0.95);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fffdf9;
}

.cart-bill-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.cart-totals {
  gap: 8px;
  margin-bottom: 0;
}

.cart-total-row {
  align-items: center;
  gap: 12px;
}

.cart-total-row strong {
  color: var(--text);
  font-weight: 700;
}

.cart-total-grand {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.cart-total-grand span {
  font-weight: 700;
  color: var(--burgundy-dark);
}

.cart-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-footer-actions .btn-primary {
  min-height: 48px;
  box-shadow: 0 12px 24px rgba(92, 26, 58, 0.2);
}

.cart-secure-note {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Ensure empty bag never shows totals/coupon */
.cart-drawer-footer[hidden],
.cart-coupon[hidden],
#cartCouponBlock[hidden],
#cartFooter[hidden] {
  display: none !important;
}

/* ============================================
   Jewellery ecommerce storefront (PLP)
   Inspired by modern Indian jewellery ecom
   ============================================ */
.jx-store.shop-section {
  padding-top: 0 !important;
  padding-bottom: 48px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(201, 168, 76, 0.12), transparent 42%),
    radial-gradient(ellipse at 90% 8%, rgba(92, 26, 58, 0.06), transparent 40%),
    linear-gradient(180deg, #fbf8f2 0%, #f5efe6 45%, #efe6d8 100%);
  position: relative;
  overflow: visible;
}

.jx-store.shop-section > .container {
  padding-top: 0;
}

.jx-promo {
  position: relative;
  overflow: hidden;
  color: rgba(247, 236, 210, 0.82);
  padding: 12px 0;
  margin-bottom: 8px;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(201, 168, 76, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 18%, rgba(92, 26, 58, 0.35), transparent 50%),
    linear-gradient(165deg, #1a0c12 0%, #2a1420 42%, #1c1016 100%);
}

.jx-promo::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #7a5a18 12%,
    #e8d5a0 38%,
    #c9a84c 50%,
    #e8d5a0 62%,
    #7a5a18 88%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.28);
  pointer-events: none;
}

.jx-promo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L44 36 L72 40 L44 44 L40 72 L36 44 L8 40 L36 36 Z' fill='%23c9a84c'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.jx-promo-glow {
  display: none;
}

.jx-promo-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.jx-promo-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

.jx-promo-eyebrow {
  display: none;
}

.jx-promo-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  margin: 0;
  color: #f3e4a8;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.jx-promo-copy p {
  margin: 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jx-promo-actions {
  display: none;
}

.jx-promo-note {
  display: none;
}

.jx-promo-cta {
  flex-shrink: 0;
  padding: 8px 18px;
  font-size: 0.85rem;
  min-height: 0;
}

.jx-promo-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(100%, 280px);
}

.jx-promo-rates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jx-rate-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(232, 213, 160, 0.35);
  font-size: 0.88rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.jx-rate-chip strong {
  margin-left: auto;
  color: var(--gold-light);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.jx-rate-chip.jx-rate-updated {
  animation: jx-rate-flash 0.85s ease;
}

@keyframes jx-rate-flash {
  0% {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  }
  35% {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 3px rgba(232, 213, 160, 0.45);
  }
  100% {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  }
}

.jx-rate-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jx-rate-dot.gold {
  background: linear-gradient(135deg, #c9a84c, #f0d78c);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
}

.jx-rate-dot.silver {
  background: linear-gradient(135deg, #9aa4ad, #e8eef2);
  box-shadow: 0 0 0 3px rgba(154, 164, 173, 0.25);
}

.jx-promo-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jx-promo-pay span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.jx-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.jx-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    linear-gradient(165deg, #ffffff 0%, #fffdf9 48%, #f9f3e8 100%);
  border: 1px solid rgba(201, 168, 76, 0.26);
  box-shadow:
    0 8px 24px rgba(61, 15, 38, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s ease;
  position: relative;
  overflow: hidden;
}

.jx-trust-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.65), transparent);
  opacity: 0.85;
}

.jx-trust-item:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.48);
  box-shadow:
    0 14px 32px rgba(61, 15, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.trust-icon,
.jx-trust-ico,
.product-trust-ico,
.checkout-trust-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.jx-trust-ico,
.product-trust-ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.14);
}

.trust-icon::before,
.jx-trust-ico::before,
.product-trust-ico::before,
.checkout-trust-ico::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, transparent 52%);
  pointer-events: none;
}

.jx-trust-ico::after,
.product-trust-ico::after,
.checkout-trust-ico::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.trust-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  z-index: 1;
}

.trust-icon--bis {
  color: #fff8ea;
  background: linear-gradient(155deg, #6b2848 0%, #8b3a62 45%, #5c1a3a 100%);
}

.trust-icon--rates {
  color: #3d0f26;
  background: linear-gradient(155deg, #f0d78a 0%, #c9a84c 50%, #a88732 100%);
}

.trust-icon--secure {
  color: #ecfffb;
  background: linear-gradient(155deg, #1f6f71 0%, #0f766e 52%, #0d5c57 100%);
}

.trust-icon--support {
  color: #fff;
  background: linear-gradient(155deg, #1fa855 0%, #25d366 55%, #128c7e 100%);
}

.jx-trust-item strong {
  display: block;
  font-size: 0.92rem;
  color: var(--burgundy-dark);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.jx-trust-item span {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-top: 2px;
}

.jx-collection-head {
  display: none;
}

.jx-category-sticky-wrap {
  position: relative;
  margin-bottom: 0;
  margin-top: 0;
}

.jx-category-sticky-sentinel {
  height: 0;
  width: 100%;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
}

.jx-category-sticky-bar {
  position: -webkit-sticky;
  position: sticky;
  top: var(--jx-cat-nav-top, var(--sticky-top-h));
  z-index: 905;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: box-shadow 0.28s ease;
}

body:has(.jx-category-sticky-bar) .header {
  z-index: 1101;
}

body:has(.marquee-bar):has(.jx-category-sticky-bar) .header {
  top: var(--marquee-h);
}

.jx-category-sticky-bar::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(228, 217, 203, 0.7);
  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  pointer-events: none;
}

.jx-category-sticky-bar.is-stuck {
  z-index: 1095;
  margin-top: -2px;
}

.jx-category-sticky-bar.is-stuck::before {
  top: -1px;
  background: rgba(255, 252, 247, 0.98);
  border-top: none;
  box-shadow: none;
}

body.jx-cat-nav-stuck .jx-category-sticky-bar::before {
  top: -1px;
  background: rgba(255, 252, 247, 0.98);
  border-top: none;
  box-shadow: none;
}

body.jx-cat-nav-stuck .header,
body.jx-cat-nav-stuck .header.is-shop-nav-stuck {
  position: sticky;
  z-index: 1101;
  background: rgba(255, 252, 247, 0.98);
  border-bottom-color: transparent;
  box-shadow: none;
}

body.jx-cat-nav-stuck:has(.marquee-bar) .header {
  top: var(--marquee-h);
}

body.jx-cat-nav-stuck .header.scrolled {
  box-shadow: none;
}

.jx-category-sticky-bar .jx-cat-text-menu {
  background: rgba(255, 252, 247, 0.98);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 12px 32px rgba(61, 15, 38, 0.1);
}

.jx-category-sticky-bar .jx-cat-mega-item {
  color: #333;
}

.jx-category-sticky-bar .jx-cat-mega-item:hover,
.jx-category-sticky-bar .jx-cat-mega-row.is-active > .jx-cat-mega-item {
  color: var(--burgundy);
  background: #fdf6f0;
}

.jx-plp.jx-plp-full {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
  padding-top: 0;
}

.jx-plp-full .jx-listing {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
}

.jx-shop-result-count {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--burgundy-dark);
  font-size: 0.92rem;
}

.jx-plp-full .jx-catalog {
  margin-top: 0;
  padding-top: 14px;
}

/* GIVA-style category nav — Coins, Rings, Pendants… */
.jx-cat-text-nav {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.jx-cat-text-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.jx-cat-text-item {
  position: relative;
  flex: 0 1 auto;
}

.jx-cat-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 14px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--burgundy-dark);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.jx-cat-text-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.jx-cat-text-link:hover,
.jx-cat-text-link:focus-visible,
.jx-cat-text-item.is-active > .jx-cat-text-link,
.jx-cat-text-link.active {
  color: var(--gold-dark);
}

.jx-cat-text-link:hover::after,
.jx-cat-text-link:focus-visible::after,
.jx-cat-text-item.is-active > .jx-cat-text-link::after,
.jx-cat-text-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.jx-cat-text-chevron {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.jx-cat-text-item.is-open .jx-cat-text-chevron {
  transform: rotate(180deg);
}

.jx-cat-text-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  z-index: 200;
  min-width: 220px;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.jx-cat-mega-list {
  list-style: none;
  margin: 0;
  padding: 6px 0 10px;
}

.jx-cat-menu-hint {
  margin: 0;
  padding: 10px 22px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.jx-mobile-metal-bar {
  display: none;
}

.jx-mobile-metal-bar.is-visible {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px 12px 10px;
  animation: jxMetalPickIn 0.28s var(--ease-out) both;
}

.jx-category-sticky-bar.jx-has-metal-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-bottom: 0;
}

.jx-category-sticky-bar.jx-has-metal-pick .jx-mobile-metal-bar.is-visible {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 12px
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.jx-category-sticky-bar.jx-has-metal-pick .jx-cat-text-nav {
  padding-top: 6px;
}

.jx-category-sticky-bar.jx-has-metal-pick .jx-metal-pick-card {
  width: min(560px, 100%);
  max-width: min(560px, calc(100vw - 24px));
  margin-inline: auto;
  flex: 0 1 auto;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(61, 15, 38, 0.08);
}

.jx-category-sticky-bar.jx-has-metal-pick .jx-metal-pick-card--stack {
  width: min(560px, 100%);
  max-width: min(560px, calc(100vw - 24px));
}

@keyframes jxMetalPickIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes jxMetalGlow {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

.jx-metal-pick-card {
  position: relative;
  width: min(560px, 100%);
  max-width: min(560px, calc(100vw - 24px));
  margin-inline: auto;
  padding: 14px 12px 12px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 213, 160, 0.35), transparent 60%),
    linear-gradient(165deg, #ffffff 0%, #fff9ef 55%, #f7ecd8 100%);
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 32px rgba(61, 15, 38, 0.1);
  overflow: hidden;
}

.jx-metal-pick-card--stack {
  width: min(560px, 100%);
  max-width: min(560px, calc(100vw - 24px));
}

.jx-metal-pick-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c, #e8d5a0, #c9a84c, transparent);
  pointer-events: none;
}

.jx-metal-pick-head {
  position: relative;
  margin-bottom: 12px;
  text-align: center;
}

.jx-metal-pick-step {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(92, 26, 58, 0.08);
  color: var(--burgundy);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jx-metal-pick-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 1.7rem);
  line-height: 1.15;
  color: var(--burgundy-dark);
}

.jx-metal-pick-sub {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.jx-metal-pick-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.jx-metal-pick-options--stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.jx-metal-pick-options--stack .jx-metal-pick-btn--both-slot {
  grid-column: 1 / -1;
  width: min(56%, 240px);
  min-height: 78px;
  justify-self: center;
  padding-top: 12px;
  padding-bottom: 10px;
}

.jx-metal-pick-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 14px 8px 12px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.jx-metal-pick-btn:active {
  transform: scale(0.97);
}

.jx-metal-pick-btn-shine,
.jx-metal-pick-btn-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jx-metal-pick-btn-shine {
  opacity: 0.4;
}

.jx-metal-pick-btn-glow {
  opacity: 0.45;
  animation: jxMetalGlow 3.6s ease-in-out infinite;
}

.jx-metal-pick-btn--gold {
  background: linear-gradient(155deg, #fffaf0 0%, #f7e4b0 45%, #e8c56a 100%);
  border-color: rgba(201, 168, 76, 0.58);
  box-shadow: 0 10px 22px rgba(201, 168, 76, 0.24);
}

.jx-metal-pick-btn--gold .jx-metal-pick-btn-shine {
  background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 55%);
}

.jx-metal-pick-btn--gold .jx-metal-pick-btn-glow {
  background: radial-gradient(circle at 70% 80%, rgba(232, 197, 106, 0.55), transparent 55%);
}

.jx-metal-pick-btn--silver {
  background: linear-gradient(155deg, #ffffff 0%, #eef2f6 48%, #c5ced8 100%);
  border-color: rgba(140, 155, 168, 0.5);
  box-shadow: 0 10px 22px rgba(90, 105, 118, 0.16);
}

.jx-metal-pick-btn--silver .jx-metal-pick-btn-shine {
  background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), transparent 55%);
}

.jx-metal-pick-btn--silver .jx-metal-pick-btn-glow {
  background: radial-gradient(circle at 70% 80%, rgba(170, 185, 198, 0.5), transparent 55%);
}

.jx-metal-pick-btn--both,
.jx-metal-pick-btn--mix {
  background:
    linear-gradient(125deg, rgba(245, 224, 168, 0.95) 0%, rgba(255, 252, 246, 0.96) 48%, rgba(200, 210, 220, 0.95) 100%);
  border-color: rgba(160, 124, 46, 0.45);
  box-shadow: 0 10px 22px rgba(61, 15, 38, 0.12);
}

.jx-metal-pick-btn--both .jx-metal-pick-btn-shine,
.jx-metal-pick-btn--mix .jx-metal-pick-btn-shine {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
}

.jx-metal-pick-btn--both .jx-metal-pick-btn-glow,
.jx-metal-pick-btn--mix .jx-metal-pick-btn-glow {
  background:
    radial-gradient(circle at 25% 80%, rgba(201, 168, 76, 0.35), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(140, 155, 168, 0.3), transparent 50%);
}

.jx-metal-pick-btn-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  line-height: 1;
}

.jx-metal-pick-btn-icon svg {
  display: block;
}

.jx-metal-pick-btn--gold .jx-metal-pick-btn-icon {
  color: #9a7224;
  background: rgba(255, 248, 232, 0.7);
}

.jx-metal-pick-btn--silver .jx-metal-pick-btn-icon {
  color: #5a6570;
  background: rgba(255, 255, 255, 0.7);
}

.jx-metal-pick-btn--both .jx-metal-pick-btn-icon,
.jx-metal-pick-btn--mix .jx-metal-pick-btn-icon {
  color: var(--burgundy-dark, #3d0f26);
  background: rgba(255, 255, 255, 0.65);
}

.jx-metal-pick-btn-label {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy-dark);
}

.jx-metal-pick-btn-hint {
  position: relative;
  z-index: 1;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: rgba(61, 15, 38, 0.62);
}

@media (max-width: 420px) {
  .jx-metal-pick-options--stack .jx-metal-pick-btn--both-slot {
    width: min(72%, 220px);
    min-height: 72px;
  }
}

.jx-metal-pick-placeholder {
  padding: 20px 16px 8px;
  text-align: center;
}

.jx-metal-pick-placeholder p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.75;
}

body.jx-awaiting-metal-pick .jx-plp-full .jx-catalog {
  padding-top: 0;
  min-height: 0;
  margin-top: 0;
}

body.jx-awaiting-metal-pick .jx-plp-full .jx-listing {
  min-height: 0;
}

body.jx-awaiting-metal-pick .shop-catalog {
  min-height: 0;
  padding-top: 0;
  gap: 0;
}

@media (min-width: 769px) {
  .jx-cat-text-item.has-menu .jx-cat-text-menu {
    display: none !important;
  }

  .jx-mobile-metal-bar.is-visible {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 14px;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .jx-metal-pick-card--bar,
  .jx-metal-pick-card--bar-desktop {
    width: min(560px, 100%);
    max-width: min(560px, calc(100vw - 32px));
    margin-inline: auto;
    flex: 0 1 auto;
  }

  .jx-metal-pick-card--stack.jx-metal-pick-card--bar,
  .jx-metal-pick-card--stack.jx-metal-pick-card--bar-desktop {
    width: min(560px, 100%);
    max-width: min(560px, calc(100vw - 32px));
  }

  .jx-metal-pick-card--bar {
    padding: 14px 16px;
  }

  .jx-metal-pick-card--bar-desktop {
    padding: 12px 14px;
  }

  .jx-metal-pick-card--bar-desktop .jx-metal-pick-head {
    margin-bottom: 8px;
  }

  .jx-metal-pick-card--bar-desktop .jx-metal-pick-title {
    font-size: 1.2rem;
  }

  .jx-metal-pick-card--bar-desktop .jx-metal-pick-sub {
    font-size: 0.72rem;
  }

  .jx-metal-pick-card--bar-desktop .jx-metal-pick-step {
    display: none;
  }

  .jx-metal-pick-card--catalog {
    margin-top: 4px;
  }

  .jx-metal-pick-card--catalog .jx-metal-pick-step {
    display: none;
  }

  .jx-metal-pick-card--hero {
    max-width: 560px;
    margin: 12px auto 0;
    padding: 18px 20px 20px;
    border-radius: 18px;
  }

  .jx-metal-pick-card--hero .jx-metal-pick-title {
    font-size: 1.55rem;
  }

  .jx-metal-pick-card--bar .jx-metal-pick-btn,
  .jx-metal-pick-card--bar-desktop .jx-metal-pick-btn {
    min-height: 96px;
  }

  .jx-metal-pick-btn:hover {
    transform: translateY(-3px);
  }

  .jx-metal-pick-btn--gold:hover {
    box-shadow: 0 14px 30px rgba(201, 168, 76, 0.32);
    border-color: rgba(201, 168, 76, 0.78);
  }

  .jx-metal-pick-btn--silver:hover {
    box-shadow: 0 14px 30px rgba(90, 105, 118, 0.24);
    border-color: rgba(140, 155, 168, 0.68);
  }

  .jx-metal-pick-btn--both:hover,
  .jx-metal-pick-btn--mix:hover {
    box-shadow: 0 14px 30px rgba(61, 15, 38, 0.16);
    border-color: rgba(160, 124, 46, 0.65);
  }

  .jx-category-sticky-bar.jx-has-metal-pick {
    padding-bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jx-metal-pick-btn-glow {
    animation: none !important;
  }
}

.jx-empty-metal-pick {
  text-align: center;
  padding: 36px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(201, 168, 76, 0.45);
  background: linear-gradient(180deg, #fffefb 0%, #faf6ee 100%);
}

.jx-empty-metal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--gold-dark);
  background: rgba(201, 168, 76, 0.14);
  border: 1px solid rgba(201, 168, 76, 0.35);
}

.jx-empty-metal-pick h3 {
  margin: 0 0 8px;
  color: var(--burgundy-dark);
}

.jx-empty-metal-pick p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.5;
}

.jx-cat-mega-row {
  position: relative;
}

.jx-cat-mega-item {
  display: block;
  width: 100%;
  padding: 11px 22px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 400;
  color: #333;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.jx-cat-mega-item:hover,
.jx-cat-mega-row.is-active > .jx-cat-mega-item {
  color: var(--burgundy);
  background: #fdf6f0;
}

@media (min-width: 981px) {
  .jx-category-sticky-bar::before {
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.97) 0%, rgba(252, 250, 245, 0.94) 100%);
    border-bottom: 1px solid rgba(201, 168, 76, 0.28);
  }

  .jx-category-sticky-bar.is-stuck::before {
    top: -1px;
    background: rgba(255, 252, 247, 0.98);
    border-top: none;
    box-shadow: 0 8px 24px rgba(61, 15, 38, 0.06);
  }

  body.jx-cat-nav-stuck .header {
    background: rgba(255, 252, 247, 0.98);
    border-bottom-color: transparent;
    box-shadow: none;
  }

  .jx-cat-text-list {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .jx-cat-text-link {
    padding: 7px 16px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .jx-cat-text-item + .jx-cat-text-item > .jx-cat-text-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background: linear-gradient(
      180deg,
      transparent,
      rgba(201, 168, 76, 0.7),
      transparent
    );
  }

  .jx-cat-text-link::after {
    left: 14px;
    right: 14px;
    bottom: 2px;
  }
}

@media (min-width: 769px) {
  .jx-cat-text-item.has-menu:hover .jx-cat-text-menu,
  .jx-cat-text-item.has-menu:focus-within .jx-cat-text-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .jx-cat-text-item.has-menu:hover .jx-cat-text-chevron,
  .jx-cat-text-item.has-menu:focus-within .jx-cat-text-chevron {
    transform: rotate(180deg);
  }
}

@media (max-width: 768px) {
  .jx-plp-full .jx-catalog {
    padding-top: 10px;
  }

  .jx-cat-text-nav {
    justify-content: center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 8px 4px;
  }

  .jx-cat-text-nav::-webkit-scrollbar {
    display: none;
  }

  .jx-cat-text-list {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4px;
    row-gap: 2px;
  }

  .jx-cat-text-item {
    flex: 0 1 auto;
  }

  .jx-cat-text-item--all .jx-cat-text-link {
    font-weight: 700;
  }

  .jx-cat-text-link {
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .jx-cat-text-item + .jx-cat-text-item > .jx-cat-text-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 11px;
    transform: translateY(-50%);
    background: linear-gradient(
      180deg,
      transparent,
      rgba(201, 168, 76, 0.7),
      transparent
    );
  }

  .jx-cat-text-link::after {
    left: 10px;
    right: 10px;
    bottom: 2px;
  }

  .jx-cat-text-item.is-open .jx-cat-text-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .jx-cat-text-item.is-open .jx-cat-text-chevron {
    transform: rotate(180deg);
  }

  .jx-cat-text-item.has-menu .jx-cat-text-menu {
    display: none;
  }

  .jx-cat-text-item.is-pending-metal > .jx-cat-text-link {
    color: var(--burgundy);
    background: rgba(201, 168, 76, 0.12);
    border-radius: 999px;
  }

  .jx-cat-text-item.is-pending-metal > .jx-cat-text-link::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .jx-cat-text-chevron {
    width: 12px;
    height: 12px;
  }

  .jx-mobile-metal-bar.is-visible {
    display: flex;
    justify-content: center;
    padding: 4px 12px 8px;
  }

  .jx-category-sticky-bar.jx-has-metal-pick {
    padding-bottom: 2px;
  }

  .jx-category-sticky-bar.jx-has-metal-pick::before {
    box-shadow: 0 10px 32px rgba(61, 15, 38, 0.1);
  }

  .jx-cat-mega-item {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

body.jx-cat-nav-stuck .jx-filters {
  top: calc(var(--jx-cat-nav-top, var(--sticky-top-h)) + var(--jx-cat-nav-h, 52px));
}

body.jx-cat-nav-stuck .jx-category-sticky-bar .jx-category-rail {
  margin-bottom: 0;
}

.jx-subcat-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px 2px;
  margin-top: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.jx-subcat-strip::-webkit-scrollbar {
  display: none;
}

.jx-subcat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: #fff;
  color: var(--burgundy-dark);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.jx-subcat-pill:hover {
  border-color: rgba(201, 168, 76, 0.65);
  transform: translateY(-1px);
}

.jx-subcat-pill.active {
  background: linear-gradient(135deg, var(--burgundy) 0%, #7a2348 100%);
  border-color: transparent;
  color: #fff8ec;
  box-shadow: 0 6px 18px rgba(92, 26, 58, 0.22);
}

.jx-subcat-count {
  display: inline-flex;
  min-width: 1.25rem;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(92, 26, 58, 0.08);
  font-size: 0.68rem;
  font-weight: 800;
}

.jx-subcat-pill.active .jx-subcat-count {
  background: rgba(255, 255, 255, 0.18);
}

.jx-category-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.jx-cat-item {
  position: relative;
  min-width: 0;
}

.jx-cat-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.14);
  color: var(--burgundy);
  transition: transform 0.25s ease, background 0.25s ease;
}

.jx-cat-item:hover .jx-cat-chevron,
.jx-cat-item.is-open .jx-cat-chevron,
.jx-cat-item.is-active .jx-cat-chevron {
  background: rgba(201, 168, 76, 0.28);
}

.jx-cat-item.is-open .jx-cat-chevron {
  transform: rotate(180deg);
}

.jx-cat-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 120;
  min-width: 210px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(201, 168, 76, 0.32);
  background: linear-gradient(165deg, #ffffff 0%, #fffbf5 100%);
  box-shadow:
    0 20px 48px rgba(61, 15, 38, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s var(--ease-out);
  pointer-events: none;
}

.jx-cat-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-top: 1px solid rgba(201, 168, 76, 0.32);
  border-left: 1px solid rgba(201, 168, 76, 0.32);
  transform: translateX(-50%) rotate(45deg);
}

.jx-cat-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--burgundy-dark);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.jx-cat-menu-item span {
  flex: 1;
}

.jx-cat-menu-item em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(92, 26, 58, 0.06);
}

.jx-cat-menu-item:hover,
.jx-cat-menu-item.active {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.16) 0%, rgba(255, 248, 236, 0.9) 100%);
  color: var(--burgundy);
}

.jx-cat-menu-item.active em {
  background: rgba(92, 26, 58, 0.12);
  color: var(--burgundy);
}

@media (min-width: 769px) {
  .jx-cat-item:hover .jx-cat-menu,
  .jx-cat-item:focus-within .jx-cat-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
  }

  .jx-category-sticky-bar.is-stuck .jx-category-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .jx-category-sticky-bar.is-stuck .jx-cat-item,
  .jx-category-sticky-bar.is-stuck .jx-cat-card {
    flex: 0 0 auto;
    min-width: 168px;
  }

  .jx-category-sticky-bar.is-stuck .jx-cat-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
  .jx-category-sticky-wrap {
    margin-bottom: 0;
  }

  .jx-category-sticky-bar {
    margin: 0;
    padding: 0;
  }

  .jx-cat-item.is-open .jx-cat-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
    position: absolute;
  }

  .jx-cat-menu {
    min-width: min(240px, 78vw);
  }
}

.jx-cat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(201, 168, 76, 0.22);
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(61, 15, 38, 0.05);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
}

.jx-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(61, 15, 38, 0.12);
  border-color: rgba(201, 168, 76, 0.55);
}

.jx-cat-card.active {
  border-color: var(--burgundy);
  box-shadow: 0 14px 34px rgba(92, 26, 58, 0.18);
  background: linear-gradient(180deg, #fff 0%, #faf4ea 100%);
  outline: 1px solid rgba(201, 168, 76, 0.35);
}

.jx-cat-thumb {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background:
    radial-gradient(circle at 50% 40%, #fff8ea 0%, #f0e4cc 55%, #e4d4b4 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.2);
}

.jx-cat-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 48%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.jx-cat-card:hover .jx-cat-shine,
.jx-cat-card.active .jx-cat-shine {
  opacity: 1;
}

.jx-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}

.jx-cat-card:hover .jx-cat-thumb img {
  transform: scale(1.08);
}

.jx-cat-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jx-cat-meta strong {
  font-size: 0.92rem;
  color: var(--burgundy-dark);
  line-height: 1.2;
}

.jx-cat-meta em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.jx-plp {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 48px;
}

.jx-filters {
  position: sticky;
  top: 96px;
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 22px;
  padding: 20px 18px;
  box-shadow: 0 14px 36px rgba(61, 15, 38, 0.07);
}

.jx-filters h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--burgundy-dark);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.jx-filter-group + .jx-filter-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
}

.jx-filter-group h4 {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
  font-weight: 800;
}

.jx-metal-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.jx-metal-filters .coins-filter {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
  padding: 10px 14px;
}

.jx-filter-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.jx-filter-points li {
  position: relative;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--text-muted);
  font-weight: 600;
}

.jx-filter-points li::before {
  content: '?';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.55rem;
  top: 0.35em;
}

.jx-filter-help {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.16), transparent 55%),
    rgba(92, 26, 58, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.28);
}

.jx-filter-help strong {
  display: block;
  color: var(--burgundy-dark);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.jx-filter-help p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.jx-listing-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 420px) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: 0 8px 22px rgba(61, 15, 38, 0.05);
  backdrop-filter: blur(8px);
}

.jx-listing-count {
  margin: 0;
  font-weight: 700;
  color: var(--burgundy-dark);
  font-size: 0.95rem;
  min-width: 0;
}

.jx-listing-bar p {
  margin: 0;
  font-weight: 700;
  color: var(--burgundy-dark);
  font-size: 0.95rem;
}

.jx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jx-shop-search {
  position: relative;
  width: 100%;
  max-width: 420px;
  justify-self: center;
}

.jx-shop-search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
}

.jx-shop-search input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  border: 1.5px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--burgundy-dark);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jx-shop-search input::placeholder {
  color: rgba(107, 95, 102, 0.75);
}

.jx-shop-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.jx-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jx-sort label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.jx-sort select {
  border: 1.5px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  color: var(--burgundy-dark);
  outline: none;
}

.jx-sort select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.jx-catalog {
  min-height: 200px;
}

.jx-catalog-sections {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.jx-catalog-section {
  scroll-margin-top: calc(var(--sticky-top-h, 120px) + 56px);
}

.jx-catalog-block {
  position: relative;
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: 4px;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 48px rgba(61, 15, 38, 0.06);
  overflow: hidden;
}

.jx-catalog-block::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.jx-catalog-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 0;
  padding: 36px 28px 30px;
  max-width: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.16);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(201, 168, 76, 0.08), transparent 70%),
    #ffffff;
  position: relative;
  z-index: 2;
}

.jx-catalog-section-head::after {
  display: none;
}

.jx-catalog-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(220px, 70%);
  margin: 0 0 4px;
}

.jx-catalog-ornament--bottom {
  margin: 8px 0 0;
}

.jx-catalog-ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 168, 76, 0.55),
    rgba(160, 124, 46, 0.85),
    rgba(201, 168, 76, 0.55),
    transparent
  );
}

.jx-catalog-ornament-diamond {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e8d5a0 0%, #c9a84c 48%, #a07c2e 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25);
}

.jx-catalog-section-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a07c2e;
}

.jx-catalog-section-title {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(2.05rem, 4.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3d0f26;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.jx-catalog-section-desc {
  margin: 4px 0 0;
  max-width: 34ch;
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  line-height: 1.55;
  color: #6a5a62;
  text-transform: none;
  letter-spacing: 0.015em;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 500;
  font-style: italic;
}

.jx-catalog-section-count {
  display: block;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(92, 26, 58, 0.55);
  background: transparent;
  font-family: var(--font-body), sans-serif;
  font-style: normal;
}

.jx-catalog-block-body {
  position: relative;
  z-index: 2;
  padding: 26px 22px 24px;
}

@media (max-width: 768px) {
  .jx-catalog-sections {
    gap: 24px;
  }

  .jx-catalog-block {
    border-radius: 3px;
  }

  .jx-catalog-block::before {
    inset: 6px;
  }

  .jx-catalog-section-head {
    padding: 28px 16px 24px;
    gap: 8px;
  }

  .jx-catalog-section-title {
    letter-spacing: 0.1em;
  }

  .jx-catalog-section-desc {
    max-width: 28ch;
  }

  .jx-catalog-block-body {
    padding: 18px 12px 16px;
  }
}

.jx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.jx-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: 0 12px 32px rgba(61, 15, 38, 0.07);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.35s ease;
}

.jx-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 24px 52px rgba(61, 15, 38, 0.14);
}

.jx-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
  background:
    radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0e4cc 52%, #e4d4b4 100%);
}

.jx-card[data-metal='silver'] .jx-card-media {
  background:
    radial-gradient(circle at 50% 35%, #f7f8fa 0%, #e4e8ec 52%, #cfd6dc 100%);
}

.jx-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease-out);
}

.jx-card:hover .jx-card-media img {
  transform: scale(1.06);
}

.jx-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(61, 15, 38, 0.18) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.jx-card:hover .jx-card-media::after {
  opacity: 1;
}

.jx-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--burgundy);
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.22);
}

.jx-tag-sale {
  left: 12px;
  right: auto;
  top: 44px;
  background: linear-gradient(135deg, #0f766e, #1a5c5e);
  color: #fff;
}

.jx-tag-avail {
  left: auto;
  right: 12px;
  top: 12px;
  background: #5c5c5c;
  color: #fff;
}

.jx-tag-avail-coming_soon {
  background: #8a6510;
}

.jx-tag-avail-unavailable {
  background: #7a2e2e;
}

.jx-card-unavail .jx-card-media img {
  filter: grayscale(0.35);
  opacity: 0.92;
}

.store-hero-visual[hidden],
.store-hero-img[hidden] {
  display: none !important;
}

.store-hero.store-hero-no-image .store-hero-inner {
  grid-template-columns: 1fr;
  max-width: 720px;
}

.store-hero.store-hero-no-image .store-hero-copy {
  text-align: left;
}

.jx-card-unavail .coin-add-btn[disabled],
.jx-card-unavail .coin-add-btn[hidden] {
  cursor: not-allowed;
  opacity: 0.85;
}

.cart-item-unavail {
  opacity: 0.92;
}

.cart-item-avail,
.cart-item-avail-msg {
  display: inline-block;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #8a6510;
}

.cart-item[data-availability='unavailable'] .cart-item-avail,
.cart-item[data-availability='unavailable'] .cart-item-avail-msg {
  color: #7a2e2e;
}

.jx-weight-unavail {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.jx-avail-msg {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #8a6510;
  letter-spacing: 0.02em;
}

.jx-card[data-availability='unavailable'] .jx-avail-msg {
  color: #7a2e2e;
}

.jx-card-actions .jx-wa-enquiry {
  min-height: 44px;
  font-size: 0.86rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(18, 140, 126, 0.18);
}

.jx-card-actions .jx-wa-enquiry[hidden] {
  display: none !important;
}

.jx-card-unavail .jx-card-actions {
  grid-template-columns: 1fr;
}

.coin-weight-unavail {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.product-avail-msg {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  background: rgba(138, 101, 16, 0.1);
  color: #8a6510;
}

.product-avail-msg-unavailable {
  background: rgba(122, 46, 46, 0.1);
  color: #7a2e2e;
}

.jx-card-hover {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;
  background: rgba(61, 15, 38, 0.92);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
}

.jx-card:hover .jx-card-hover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.jx-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.jx-card-metal {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.jx-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.25;
}

.jx-card-body h3 a {
  color: var(--burgundy-dark);
  text-decoration: none;
}

.jx-card-body h3 a:hover {
  color: var(--burgundy-light);
}

.jx-card-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jx-weight {
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: #fff;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jx-weight.active,
.jx-weight:hover {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--gold-light);
  transform: translateY(-1px);
}

.jx-weight-more {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  align-self: center;
}

.jx-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
}

/* display:flex above would otherwise beat the HTML hidden attribute */
.jx-card-price[hidden],
.jx-avail-msg[hidden],
.jx-tag-avail[hidden],
.jx-card-actions .coin-add-btn[hidden],
.product-price-card[hidden],
.product-rate-row[hidden],
.product-tax-note[hidden],
.product-avail-msg[hidden],
#pdAddCart[hidden],
#pdBuyNow[hidden],
.cart-item-prices[hidden] {
  display: none !important;
}

.jx-price-old {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pmj-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.pmj-price-old {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pmj-line-price {
  font-size: 1.15rem;
  color: var(--burgundy);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cart-item-prices .pmj-price-row {
  margin-top: 2px;
}

.cart-item-prices .pmj-line-price {
  font-size: 1.08rem;
}

.checkout-summary-row .pmj-price-row {
  justify-content: flex-end;
}

.checkout-summary-row .pmj-line-price {
  font-size: 0.95rem;
}

.jx-price {
  font-size: 1.28rem;
  color: var(--burgundy);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.jx-price-note {
  width: 100%;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.jx-card-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.jx-card-actions .btn {
  min-height: 44px;
  font-size: 0.86rem;
  border-radius: 999px;
}

.jx-card-actions .btn-primary {
  box-shadow: 0 10px 22px rgba(160, 124, 46, 0.28);
}

.jx-empty {
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  border-radius: 22px;
  border: 1px dashed rgba(201, 168, 76, 0.4);
  padding: 36px 24px;
  text-align: center;
}

.product-page {
  /* Use same body background as homepage (do not override) */
}

.product-page .product-main.jx-store {
  background: transparent;
  padding-top: 28px;
  padding-bottom: 64px;
}

.product-page .product-detail {
  border-radius: 22px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 16px 40px rgba(61, 15, 38, 0.08);
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
}

.product-page .product-image-wrap {
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, #fff8ea 0%, #f0e4cc 55%, #e4d4b4 100%);
}

.product-page .product-detail[data-metal='silver'] .product-image-wrap {
  background:
    radial-gradient(circle at 50% 40%, #f7f8fa 0%, #e4e8ec 55%, #cfd6dc 100%);
}

.product-page .related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.product-page .related-card {
  border-radius: 18px;
  border: 1px solid rgba(201, 168, 76, 0.22);
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  box-shadow: 0 10px 28px rgba(61, 15, 38, 0.06);
  overflow: hidden;
}

.product-page .related-card-media {
  background:
    radial-gradient(circle at 50% 40%, #fff8ea 0%, #f0e4cc 55%, #e4d4b4 100%);
}

.product-page .related-card-media img {
  object-fit: cover;
  padding: 0;
}

@media (max-width: 900px) {
  .product-page .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gallery + buy box; Description / Details / Highlights sit under images */
.product-detail.mmtc-pdp {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 0.95fr);
  grid-template-areas:
    "gallery info"
    "tabs info";
  gap: 28px 40px;
  align-items: start;
}

.product-detail.mmtc-pdp .product-gallery {
  grid-area: gallery;
  min-width: 0;
}

.product-detail.mmtc-pdp .product-info {
  grid-area: info;
  min-width: 0;
}

.product-detail.mmtc-pdp .product-tabs-wrap {
  grid-area: tabs;
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.product-detail.mmtc-pdp .product-image-wrap img {
  object-fit: cover;
  padding: 0;
}

.product-gallery-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.product-gallery-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-gallery-track.is-dragging {
  transition: none;
}

.product-gallery-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.product-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.product-gallery-fallback-img[hidden] {
  display: none !important;
}

.product-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.product-thumbs[hidden] {
  display: none !important;
}

.product-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  scroll-snap-align: start;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-thumb.active,
.product-thumb:hover {
  border-color: var(--gold, #c9a84c);
}

.product-gallery-nav {
  display: none !important;
}

.product-gallery-nav[hidden] {
  display: none !important;
}

.product-gallery-arrow {
  display: none !important;
}

.product-gallery-counter {
  position: absolute;
  top: auto;
  right: auto;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: rgba(31, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.product-gallery-counter[hidden] {
  display: none !important;
}

.product-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 72px; /* keep clear of counter (left) & zoom (right) */
  pointer-events: none;
  box-sizing: border-box;
}

.product-gallery-dots[hidden] {
  display: none !important;
}

.product-gallery-dot {
  pointer-events: auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.product-gallery-dot.active {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.65);
  transform: scale(1.15);
}

@media (max-width: 640px) {
  .product-thumb {
    width: 56px;
    height: 56px;
  }
}

.product-zoom-btn {
  position: absolute;
  left: auto;
  right: 12px;
  top: auto;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(31, 10, 20, 0.78);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.22);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.product-page .product-zoom-btn {
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.42);
  color: var(--burgundy-dark);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.product-page .product-thumbs {
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
}

.product-page .product-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border-width: 2px;
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-page .product-thumb:hover,
.product-page .product-thumb.active {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(160, 124, 46, 0.22);
}

.product-zoom-btn svg {
  display: block;
  flex-shrink: 0;
}

.product-zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgba(8, 4, 8, 0.96);
  display: block;
  overflow: hidden;
  overscroll-behavior: none;
}

.product-zoom-lightbox[hidden] {
  display: none !important;
}

.product-zoom-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.product-zoom-close:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.3);
}

.product-zoom-hint {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 72px;
  z-index: 4;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 600;
  pointer-events: none;
}

.product-zoom-counter {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.product-zoom-counter[hidden] {
  display: none !important;
}

.product-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.product-zoom-nav[hidden] {
  display: none !important;
}

.product-zoom-prev {
  left: max(10px, env(safe-area-inset-left, 0px));
}

.product-zoom-next {
  right: max(10px, env(safe-area-inset-right, 0px));
}

.product-zoom-nav:active {
  background: rgba(255, 255, 255, 0.28);
}

.product-zoom-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 64px 72px 56px;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.product-zoom-stage.is-zoomed {
  cursor: grab;
}

.product-zoom-stage img,
#pdZoomImg {
  display: block !important;
  /* Use viewport units only — % max-height collapses to a thin strip on Windows */
  width: auto !important;
  height: auto !important;
  max-width: 90vw !important;
  max-height: 85vh !important;
  max-height: 85dvh !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.product-zoom-stage img.is-switching {
  opacity: 0.35;
}

body.product-zoom-open {
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 768px) {
  .product-zoom-stage {
    padding: 56px 16px 52px;
  }

  .product-zoom-hint {
    font-size: 0.7rem;
    right: 68px;
  }

  .product-zoom-nav {
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
  }

  .product-zoom-stage img,
  #pdZoomImg {
    max-width: 94vw !important;
    max-height: 82vh !important;
    max-height: 82dvh !important;
  }
}

/* Desktop: keep product gallery square inside the visible window */
@media (min-width: 981px) {
  .product-page .product-image-wrap {
    width: min(100%, calc(100dvh - var(--sticky-top-h, 140px) - 64px));
    max-width: 100%;
    max-height: calc(100dvh - var(--sticky-top-h, 140px) - 64px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  .product-page .product-gallery {
    align-self: start;
  }
}

.product-sku-line {
  margin: -2px 0 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.product-tax-note {
  margin: -8px 0 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.product-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: none;
  margin-bottom: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(92, 26, 58, 0.04);
}

.product-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 999px;
  margin-bottom: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-tab:hover {
  color: var(--burgundy);
  background: rgba(255, 255, 255, 0.8);
}

.product-tab.active {
  color: #fff;
  background: var(--burgundy);
  border-color: var(--burgundy);
  box-shadow: 0 8px 18px rgba(92, 26, 58, 0.22);
}

.product-tab-panels {
  margin-top: 16px;
}

.product-tab-panel {
  color: var(--text);
  line-height: 1.75;
  font-size: 0.95rem;
  animation: pdTabIn 0.35s ease both;
}

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

.product-tab-panel[hidden] {
  display: none !important;
}

.product-tab-panel#pdTabDesc p,
.product-tab-panel #pdDetailsText {
  margin: 0;
  color: var(--burgundy-dark);
  font-size: 0.98rem;
  line-height: 1.75;
}

.product-tab-panel#pdTabDesc #pdDetailsText p + p {
  margin-top: 0.9em;
}

.product-specs {
  width: 100%;
  border-collapse: collapse;
  max-width: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: #fff;
}

.product-specs th,
.product-specs td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.16);
  vertical-align: top;
}

.product-specs tr:last-child th,
.product-specs tr:last-child td {
  border-bottom: none;
}

.product-specs th {
  width: 42%;
  color: var(--text-muted);
  font-weight: 600;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.1), rgba(92, 26, 58, 0.04));
}

.product-specs td {
  color: var(--burgundy-dark);
  font-weight: 700;
}

.product-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.product-highlights article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, #ffffff 0%, #fffaf2 55%, #f7efdf 100%);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.product-highlights article:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(61, 15, 38, 0.1);
}

.product-highlights .pd-hi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--burgundy-dark);
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.28), rgba(201, 168, 76, 0.1));
  border: 1px solid rgba(201, 168, 76, 0.35);
}

.product-highlights .pd-hi-icon svg {
  width: 22px;
  height: 22px;
}

.product-highlights h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--burgundy-dark);
}

.product-highlights p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .product-detail.mmtc-pdp {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "info"
      "tabs";
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .product-highlights article {
    grid-template-columns: 40px 1fr;
    padding: 12px 14px;
  }
}

@media (max-width: 980px) {
  .jx-plp {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .jx-filters {
    position: relative;
    top: auto;
  }

  .jx-metal-filters {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .jx-metal-filters .coins-filter {
    width: auto;
  }

  .jx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jx-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .jx-store.shop-section {
    padding-top: 0;
  }

  .jx-store > .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Compact shop banner */
  .jx-promo {
    padding: 16px 0;
    margin-bottom: 10px;
    border-radius: 0 0 20px 20px;
  }

  .jx-promo-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    text-align: center;
  }

  .jx-promo-copy {
    width: 100%;
    display: block;
    flex: 0 0 auto;
    text-align: center;
  }

  .jx-promo-copy h2 {
    font-family: var(--font-body);
    font-weight: 700;
    white-space: normal;
    max-width: none;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 auto 4px;
  }

  .jx-promo-copy p {
    white-space: normal;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  .jx-promo-cta {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(201, 168, 76, 0.28);
  }

  /* Hide bulky trust cards on phone */
  .jx-trust {
    display: none;
  }

  /* Category carousel — premium jewellery tiles */
  .jx-collection-head {
    margin-bottom: 12px;
    padding: 0 2px;
  }

  .jx-category-sticky-wrap {
    margin-bottom: 16px;
  }

  .jx-category-carousel {
    position: relative;
    margin-bottom: 0;
  }

  .jx-category-more {
    position: absolute;
    top: 4px;
    bottom: 14px;
    width: 76px;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    z-index: 4;
    overflow: hidden;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .jx-category-more--right {
    right: -14px;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(
      90deg,
      rgba(255, 253, 248, 0.02) 0%,
      rgba(61, 15, 38, 0.62) 32%,
      rgba(92, 26, 58, 0.94) 100%
    );
    box-shadow:
      inset 1px 0 0 rgba(201, 168, 76, 0.42),
      -8px 0 24px rgba(92, 26, 58, 0.12);
  }

  .jx-category-more--left {
    left: -14px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(
      270deg,
      rgba(255, 253, 248, 0.02) 0%,
      rgba(61, 15, 38, 0.62) 32%,
      rgba(92, 26, 58, 0.94) 100%
    );
    box-shadow:
      inset -1px 0 0 rgba(201, 168, 76, 0.42),
      8px 0 24px rgba(92, 26, 58, 0.12);
  }

  .jx-category-more--right:not([hidden]) {
    animation: jxCategoryMoreInRight 0.5s ease-out;
  }

  .jx-category-more--left:not([hidden]) {
    animation: jxCategoryMoreInLeft 0.5s ease-out;
  }

  @keyframes jxCategoryMoreInRight {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes jxCategoryMoreInLeft {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .jx-category-more-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(201, 168, 76, 0.22) 0%,
      transparent 40%,
      transparent 60%,
      rgba(201, 168, 76, 0.15) 100%
    );
    pointer-events: none;
  }

  .jx-category-more-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    color: #fff8ec;
    text-align: center;
  }

  .jx-category-more--right .jx-category-more-inner {
    padding: 0 8px 0 14px;
  }

  .jx-category-more--left .jx-category-more-inner {
    padding: 0 14px 0 8px;
  }

  .jx-category-more-icon {
    display: block;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 300;
    color: var(--gold-light);
  }

  .jx-category-more--right .jx-category-more-icon {
    animation: jxCategoryMoreArrowRight 1.5s ease-in-out infinite;
  }

  .jx-category-more--left .jx-category-more-icon {
    animation: jxCategoryMoreArrowLeft 1.5s ease-in-out infinite;
  }

  .jx-category-more-text {
    display: block;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .jx-category-more-sub {
    display: block;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
    line-height: 1.2;
  }

  @keyframes jxCategoryMoreArrowRight {
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50% { transform: translateX(4px); opacity: 1; }
  }

  @keyframes jxCategoryMoreArrowLeft {
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50% { transform: translateX(-4px); opacity: 1; }
  }

  .jx-category-more:active {
    transform: scale(0.98);
  }

  .jx-category-more--right:active .jx-category-more-icon {
    animation: none;
    transform: translateX(5px);
  }

  .jx-category-more--left:active .jx-category-more-icon {
    animation: none;
    transform: translateX(-5px);
  }

  .jx-collection-head h3 {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
  }

  .jx-collection-head .section-label {
    letter-spacing: 0.2em;
  }

  .jx-collection-sub {
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 28ch;
  }

  .jx-category-more:not([hidden]) {
    display: block;
  }

  .jx-category-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 0;
    padding: 4px 14px 14px;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
  }

  .jx-cat-item {
    flex: 0 0 calc((100% - 12px) / 2.35);
    width: calc((100% - 12px) / 2.35);
    max-width: 152px;
    min-width: 118px;
    scroll-snap-align: start;
    position: relative;
  }

  .jx-cat-item .jx-cat-card {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .jx-category-rail::-webkit-scrollbar {
    display: none;
  }

  .jx-cat-card {
    flex: 0 0 calc((100% - 12px) / 2.35);
    width: calc((100% - 12px) / 2.35);
    max-width: 152px;
    min-width: 118px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid rgba(201, 168, 76, 0.32);
    background: linear-gradient(180deg, #ffffff 0%, #fff9ef 100%);
    box-shadow:
      0 10px 26px rgba(61, 15, 38, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }

  .jx-cat-card.active {
    border-color: var(--burgundy);
    box-shadow:
      0 14px 32px rgba(92, 26, 58, 0.22),
      0 0 0 2px rgba(201, 168, 76, 0.45);
    transform: translateY(-2px);
  }

  .jx-cat-thumb {
    width: 100%;
    height: 108px;
    border-radius: 0;
    box-shadow: none;
  }

  .jx-cat-thumb img {
    object-fit: cover;
    object-position: center;
  }

  .jx-cat-meta {
    padding: 10px 8px 12px;
    text-align: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(250, 244, 234, 0.95));
    border-top: 1px solid rgba(201, 168, 76, 0.18);
  }

  .jx-cat-meta strong {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--burgundy-dark);
    line-height: 1.25;
  }

  .jx-cat-meta em {
    font-size: 0.66rem;
    color: var(--gold-dark);
    font-weight: 700;
    margin-top: 3px;
  }

  .jx-cat-card:active {
    transform: scale(0.98);
  }

  /* Slim filter toolbar */
  .jx-plp {
    gap: 14px;
    padding-bottom: 28px;
  }

  .jx-filters {
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(61, 15, 38, 0.06);
    background: #fff;
  }

  .jx-filters h3,
  .jx-filter-group h4,
  .jx-filter-group:has(.jx-filter-points) {
    display: none;
  }

  .jx-filter-group {
    margin: 0;
    padding: 0;
    border: none;
  }

  .jx-filter-group + .jx-filter-group {
    margin: 0;
    padding: 0;
    border: none;
  }

  .jx-metal-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 5px;
    border-radius: 999px;
    background: rgba(92, 26, 58, 0.05);
    border: 1px solid rgba(201, 168, 76, 0.2);
  }

  .jx-metal-filters .coins-filter {
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 9px 8px;
    border-radius: 999px;
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 700;
  }

  .jx-metal-filters .coins-filter.active {
    background: linear-gradient(145deg, var(--burgundy), #7a2a52);
    color: #fff;
    box-shadow: 0 6px 16px rgba(92, 26, 58, 0.28);
  }

  .jx-filter-help {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
  }

  .jx-filter-help strong,
  .jx-filter-help p {
    display: none;
  }

  .jx-filter-help .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    padding: 11px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 999px;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #1faa55 0%, #128c3c 100%);
    box-shadow: 0 8px 18px rgba(18, 140, 60, 0.28);
  }

  .jx-filter-help .btn::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: center / contain no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.881 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  }

  .jx-filter-help .btn:hover {
    color: #fff;
    filter: brightness(1.05);
  }

  /* Results bar */
  .jx-listing-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "count sort"
      "search search";
    padding: 10px 12px;
    border-radius: 14px;
    gap: 10px;
    margin-bottom: 12px;
  }

  .jx-listing-count,
  .jx-listing-bar p {
    grid-area: count;
    font-size: 0.82rem;
  }

  .jx-shop-search {
    grid-area: search;
    max-width: none;
    justify-self: stretch;
  }

  .jx-shop-search input {
    padding: 9px 14px 9px 38px;
    font-size: 0.84rem;
  }

  .jx-sort {
    grid-area: sort;
  }

  .jx-sort label {
    display: none;
  }

  .jx-sort select {
    padding: 7px 12px;
    font-size: 0.78rem;
    max-width: 150px;
  }

  /* Product cards */
  .jx-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .jx-card {
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(61, 15, 38, 0.06);
  }

  .jx-card:hover {
    transform: none;
  }

  .jx-card-hover {
    display: none;
  }

  .jx-card-body {
    padding: 10px 10px 12px;
    gap: 6px;
  }

  .jx-card-metal {
    font-size: 0.65rem;
  }

  .jx-card-body h3 {
    font-size: 0.92rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .jx-card-weights {
    gap: 4px;
  }

  .jx-weight {
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  .jx-card-price {
    font-size: 0.95rem;
  }

  .jx-card-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .jx-card-actions .btn {
    padding: 8px 10px;
    font-size: 0.78rem;
    min-height: 0;
    border-radius: 999px;
  }
}

/* ============================================
   Luxury polish ? rich surfaces & smooth motion
   ============================================ */

.store-hero-copy,
.store-hero-visual {
  animation: heroRise 0.9s var(--ease-out) both;
}

.store-hero-visual {
  animation-delay: 0.12s;
}

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

.store-hero-img {
  transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}

.store-hero-visual:hover .store-hero-img {
  transform: translateZ(0) scale(1.015);
  filter: drop-shadow(0 24px 48px rgba(61, 15, 38, 0.18));
}

.store-hero-trust li {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.store-hero-trust li:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 10px 22px rgba(61, 15, 38, 0.08);
}

.feature-card,
.service-card,
.step-card,
.review-card,
.faq-item {
  border-radius: 18px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.feature-card,
.service-card,
.review-card {
  background: linear-gradient(165deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(228, 217, 203, 0.95);
  box-shadow: var(--shadow);
}

/* How It Works ? always readable (not hover-only) */
.process .step-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  color: #fff;
  opacity: 1;
  transform: none;
}

.process .step-card.reveal-ready {
  opacity: 1;
  transform: none;
}

.process .step-card h3 {
  color: var(--gold-light);
}

.process .step-card p {
  color: rgba(255, 255, 255, 0.88);
  opacity: 1;
  visibility: visible;
}

.process .step-card:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(232, 213, 160, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.marquee-bar {
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(61, 15, 38, 0.18);
}

.footer {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 168, 76, 0.12), transparent 40%),
    linear-gradient(165deg, #1a0a12 0%, #2a0f1c 38%, #0c2e30 100%);
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.55), transparent);
}

.cart-drawer {
  border-left: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: -18px 0 48px rgba(28, 16, 20, 0.22);
}

.cart-btn {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

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

.shop-cat-pill {
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.shop-cat-pill:hover,
.shop-cat-pill.active {
  transform: translateY(-1px);
}

.shop-card,
.coin-card {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.coin-card-media img {
  transition: transform 0.55s var(--ease-out);
}

.product-detail,
.checkout-form-panel,
.checkout-summary {
  transition: box-shadow 0.4s var(--ease-out);
}

.reveal-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  will-change: opacity, transform;
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-ready:nth-child(2) { transition-delay: 0.05s; }
.reveal-ready:nth-child(3) { transition-delay: 0.1s; }
.reveal-ready:nth-child(4) { transition-delay: 0.15s; }
.reveal-ready:nth-child(5) { transition-delay: 0.2s; }
.reveal-ready:nth-child(6) { transition-delay: 0.25s; }

.whatsapp-btn-header {
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.whatsapp-btn-header:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.legal-hero {
  position: relative;
}

.legal-toc,
.legal-section,
.legal-intro-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.legal-toc:hover,
.legal-section:hover {
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Coupon ticker must keep scrolling like desktop */
  .marquee-track:not(.is-js-marquee) {
    animation: marquee-scroll 28s linear infinite !important;
    -webkit-animation: marquee-scroll 28s linear infinite !important;
    animation-duration: 28s !important;
    animation-iteration-count: infinite !important;
  }

  .reveal-ready {
    opacity: 1;
    transform: none;
  }

  body::before {
    display: none;
  }
}

.checkout-order-id {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(92, 26, 58, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.28);
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
}

.checkout-order-id strong {
  display: block;
  margin-top: 6px;
  color: var(--burgundy-dark);
  font-size: 1.15rem;
  word-break: break-all;
}

/* Checkout modal WhatsApp OTP */
.checkout-otp-group .checkout-otp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.checkout-otp-status {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.checkout-otp-status[data-kind='ok'] { color: var(--teal); }
.checkout-otp-status[data-kind='err'] { color: #b42318; }
.checkout-otp-verified {
  margin-top: 8px;
  color: var(--teal);
  font-weight: 600;
  font-size: 0.9rem;
}
#checkoutOtp {
  letter-spacing: 0.2em;
  font-weight: 700;
  flex: 1;
}

.checkout-otp-target {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--burgundy);
  font-size: 0.9rem;
}

/* ============================================
   Ecommerce storefront refresh (2026)
   ============================================ */
.store-hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
  isolation: isolate;
}

.store-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 252, 247, 0.55) 42%, rgba(255, 252, 247, 0.2) 100%),
    radial-gradient(ellipse at 12% 18%, rgba(201, 168, 76, 0.22), transparent 48%),
    radial-gradient(ellipse at 88% 10%, rgba(92, 26, 58, 0.1), transparent 42%),
    linear-gradient(180deg, #fffdf9 0%, #f6eee3 100%);
  pointer-events: none;
}

.store-hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.4rem, 5vw, 3.7rem);
}

.store-hero-trust li {
  border-radius: 8px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--gold);
  box-shadow: none;
  padding: 4px 0 4px 10px;
  font-size: 0.8rem;
}

.store-hero-frame {
  border-radius: 20px;
  box-shadow:
    0 30px 60px rgba(61, 15, 38, 0.14),
    0 0 0 1px rgba(201, 168, 76, 0.2);
  transform: translateZ(0);
  animation: heroFrameIn 0.9s var(--ease-out, ease) both;
}

@keyframes heroFrameIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.store-hero-copy {
  animation: heroCopyIn 0.8s var(--ease-out, ease) both;
}

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

.jx-promo {
  padding: 22px 0;
  margin-bottom: 28px;
}

.jx-promo-eyebrow {
  display: block;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.jx-promo-inner {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
}

.jx-promo-copy {
  display: block;
  flex: 1 1 220px;
  min-width: 0;
  text-align: center;
}

.jx-promo-copy h2 {
  font-family: var(--font-body);
  font-weight: 700;
  white-space: normal;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.jx-promo-copy p {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
}

.jx-promo-rates,
.jx-live-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 1 auto;
  align-items: center;
  margin-top: 14px;
}

/* ---- Live rates right sidebar (toggle) ---- */
.live-rates-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 880;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
}

.live-rates-sidebar-tab,
.live-rates-sidebar-panel {
  pointer-events: auto;
}

.live-rates-sidebar-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 42px;
  min-height: 108px;
  padding: 12px 8px;
  border: none;
  border-radius: 14px 0 0 14px;
  cursor: pointer;
  color: #fff8e7;
  background: linear-gradient(180deg, rgba(92, 26, 58, 0.96), rgba(61, 15, 38, 0.98));
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-right: none;
  box-shadow: -6px 0 24px rgba(61, 15, 38, 0.22);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.live-rates-sidebar-tab:hover {
  background: linear-gradient(180deg, rgba(110, 32, 68, 0.98), rgba(72, 18, 44, 1));
  box-shadow: -8px 0 28px rgba(201, 168, 76, 0.25);
}

.live-rates-sidebar-tab-text {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.live-rates-sidebar-arrow {
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-rates-sidebar.is-open .live-rates-sidebar-arrow {
  transform: rotate(180deg);
}

.live-rates-sidebar-panel {
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(165deg, #fffdf9, #faf3e4);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-right: none;
  border-radius: 16px 0 0 16px;
  box-shadow: -10px 0 32px rgba(61, 15, 38, 0.12);
  transition:
    max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease,
    padding 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-rates-sidebar.is-open .live-rates-sidebar-panel {
  width: 228px;
  max-width: 228px;
  opacity: 1;
  padding: 16px 14px 14px;
}

.live-rates-sidebar-title {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.live-rates-sidebar-chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.live-rates-sidebar-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(201, 168, 76, 0.32);
  color: var(--burgundy-dark);
  box-shadow: 0 6px 16px rgba(61, 15, 38, 0.06);
  font-size: 0.78rem;
}

.live-rates-sidebar-chip strong {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--burgundy-dark);
}

.live-rates-sidebar-chip.jx-rate-updated {
  animation: jx-rate-flash-light 0.85s ease;
}

.live-rates-sidebar .jx-rate-live-tag {
  align-self: flex-start;
  margin-top: 2px;
}

@media (max-width: 768px) {
  body:not(.home-page) .live-rates-sidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .live-rates-sidebar {
    top: auto;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  .live-rates-sidebar-tab {
    width: 38px;
    min-height: 92px;
    padding: 10px 6px;
  }

  .live-rates-sidebar.is-open .live-rates-sidebar-panel {
    width: min(228px, calc(100vw - 56px));
    max-width: min(228px, calc(100vw - 56px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-rates-sidebar-panel,
  .live-rates-sidebar-arrow {
    transition: none !important;
  }
}

.jx-rate-live-tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff8e7;
  background: linear-gradient(135deg, rgba(92, 26, 58, 0.9), rgba(61, 15, 38, 0.95));
  border: 1px solid rgba(201, 168, 76, 0.4);
  animation: jx-rate-live-pulse 2.4s ease-in-out infinite;
}

@keyframes jx-rate-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0); }
}

.jx-promo .jx-live-rates .jx-rate-chip {
  min-width: 148px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.35);
  backdrop-filter: blur(10px);
  color: var(--burgundy-dark);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.08);
}

.jx-promo .jx-live-rates .jx-rate-chip strong {
  color: var(--burgundy-dark);
}

.jx-promo .jx-live-rates .jx-rate-chip.jx-rate-updated {
  animation: jx-rate-flash-light 0.85s ease;
}

@keyframes jx-rate-flash-light {
  0% { background: rgba(255, 255, 255, 0.92); }
  35% { background: rgba(255, 248, 220, 1); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.35); }
  100% { background: rgba(255, 255, 255, 0.92); }
}

.jx-promo .jx-rate-chip {
  min-width: 148px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 213, 160, 0.28);
  backdrop-filter: blur(10px);
}

.jx-promo-cta {
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.jx-collection-head {
  display: none;
  margin: 0;
}

.jx-collection-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  color: var(--burgundy-dark);
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}

.jx-collection-head > p {
  margin: 0;
  max-width: 36ch;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.jx-collection-sub {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 42ch;
}

.jx-category-more {
  display: none !important;
}

.jx-category-carousel {
  width: 100%;
}

/* Tablet: horizontal category scroll between mobile tiles and desktop grid */
@media (min-width: 769px) and (max-width: 980px) {
  .jx-category-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 18px;
    margin-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    grid-template-columns: none;
  }

  .jx-category-rail::-webkit-scrollbar {
    height: 6px;
  }

  .jx-category-rail::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.45);
    border-radius: 999px;
  }

  .jx-cat-card {
    flex: 0 0 auto;
    width: min(220px, 72vw);
    scroll-snap-align: start;
  }

  .jx-cat-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }
}

.jx-trust {
  margin-bottom: 20px;
}

.jx-plp {
  gap: 28px;
  padding-bottom: 64px;
}

.jx-listing-bar {
  position: sticky;
  top: 76px;
  z-index: 5;
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.28);
  backdrop-filter: blur(12px);
}

.jx-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.jx-card {
  border-radius: 18px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  background: #fff;
  box-shadow: 0 8px 24px rgba(61, 15, 38, 0.05);
}

.jx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(61, 15, 38, 0.12);
}

.jx-card-media {
  aspect-ratio: 1 / 1.05;
  background:
    radial-gradient(circle at 50% 35%, #fff9ef 0%, #f3e6cf 52%, #e6d5b4 100%);
}

.jx-card-media img {
  object-fit: cover;
  padding: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.55s var(--ease-out, ease);
}

.jx-card:hover .jx-card-media img {
  transform: scale(1.06);
}

.jx-card-hover {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
}

.jx-card-body {
  padding: 14px 14px 16px;
  gap: 8px;
}

.jx-card-metal {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 800;
  margin: 0;
}

.jx-card-body h3 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em;
}

.jx-card-weights {
  gap: 6px;
}

.jx-weight {
  border-radius: 8px;
  min-width: 42px;
  padding: 6px 8px;
  font-size: 0.78rem;
}

.jx-card-price {
  margin-top: 2px;
  align-items: baseline;
  gap: 6px 10px;
}

.jx-price {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--burgundy-dark);
}

.jx-price-note {
  width: 100%;
  font-size: 0.72rem;
}

.jx-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.jx-card-actions .btn-primary {
  border-radius: 10px;
  font-weight: 700;
}

.jx-card-link {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--burgundy);
  text-decoration: none;
}

.jx-card-link:hover {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jx-filter-points li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  top: 0.45em;
}

@media (min-width: 1200px) {
  .jx-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .jx-promo-rates {
    width: 100%;
  }

  .jx-promo .jx-rate-chip {
    flex: 1 1 140px;
  }

  .jx-collection-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .jx-collection-head > p {
    display: none;
  }

  .jx-listing-bar {
    top: 64px;
  }
}

@media (max-width: 640px) {
  .jx-trust {
    display: none;
  }

  .jx-promo {
    padding: 20px 0;
  }

  .jx-promo-cta {
    width: 100%;
    border-radius: 12px;
  }

  .jx-grid {
    gap: 12px;
  }

  .jx-card {
    border-radius: 14px;
  }

  .jx-card-body {
    padding: 10px 10px 12px;
  }

  .jx-card-body h3 {
    font-size: 0.9rem;
    min-height: 2.4em;
  }

  .jx-price {
    font-size: 1rem;
  }

  .jx-card-actions .btn {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .store-hero-copy h1 {
    max-width: none;
  }
}

.jx-promo[hidden] {
  display: none !important;
}

.jx-promo-rates[hidden] {
  display: none !important;
}

/* ============================================
   Product detail — jewellery boutique polish
   ============================================ */
.product-page .product-main.jx-store {
  position: relative;
  padding-top: 22px;
  padding-bottom: 88px;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(201, 168, 76, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 6%, rgba(92, 26, 58, 0.1), transparent 52%),
    radial-gradient(circle at 50% 100%, rgba(201, 168, 76, 0.1), transparent 45%),
    linear-gradient(180deg, #f7f0e4 0%, #fffdf9 34%, #f8f1e6 100%);
}

.product-page .product-main.jx-store::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(rgba(201, 168, 76, 0.18) 0.7px, transparent 0.8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 78%);
}

.product-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 22px;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 10px 28px rgba(61, 15, 38, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.product-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--burgundy-dark);
  background: linear-gradient(180deg, #ffffff 0%, #f8efd9 100%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s ease, border-color 0.22s ease;
}

.product-back-btn:hover {
  transform: translateX(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 18px rgba(61, 15, 38, 0.1);
  color: var(--burgundy);
}

.product-back-btn svg {
  flex-shrink: 0;
}

.product-nav-bar .product-breadcrumb {
  margin: 0;
  font-size: 0.82rem;
  gap: 6px;
}

.product-nav-bar .product-breadcrumb a {
  color: var(--burgundy);
}

.product-nav-bar .product-breadcrumb #pdCrumbName {
  color: var(--burgundy-dark);
  font-weight: 700;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-page .product-detail.mmtc-pdp {
  position: relative;
  gap: 36px 44px;
  padding: clamp(20px, 3.2vw, 36px);
  border-radius: 28px;
  border: 1px solid rgba(201, 168, 76, 0.34);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 245, 0.96) 48%, rgba(248, 238, 216, 0.95) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 28px 64px rgba(61, 15, 38, 0.12);
  animation: pdpIn 0.65s var(--ease-out, ease) both;
  overflow: hidden;
}

.product-page .product-detail.mmtc-pdp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  opacity: 0.9;
}

.product-page .product-detail.mmtc-pdp::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.16), transparent 68%);
}

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

.product-page .product-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: pdpRise 0.7s 0.05s var(--ease-out) both;
}

.product-page .product-info {
  animation: pdpRise 0.7s 0.12s var(--ease-out) both;
}

.product-page .product-tabs-wrap {
  animation: pdpRise 0.7s 0.2s var(--ease-out) both;
}

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

.product-page .product-image-stage {
  position: relative;
  padding: 10px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(201, 168, 76, 0.28), rgba(255, 255, 255, 0.2) 42%, rgba(92, 26, 58, 0.1));
  box-shadow: 0 18px 40px rgba(61, 15, 38, 0.1);
}

.product-page .product-image-ornament {
  position: absolute;
  inset: 3px;
  border-radius: 23px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 2;
}

.product-page .product-image-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(201, 168, 76, 0.22),
    0 10px 28px rgba(61, 15, 38, 0.08);
  background:
    radial-gradient(circle at 50% 28%, #fffaf0 0%, #f3e4c4 46%, #dfc89a 100%);
}

.product-page .product-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 48%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: pdpShimmer 4.8s 1.2s ease-in-out infinite;
}

@keyframes pdpShimmer {
  0%, 70%, 100% { transform: translateX(-120%); }
  85% { transform: translateX(120%); }
}

.product-page .product-detail[data-metal='silver'] .product-image-wrap {
  background:
    radial-gradient(circle at 50% 28%, #fbfcfd 0%, #e8edf2 48%, #c8d0d8 100%);
}

.product-page .product-detail[data-metal='silver'] .product-image-stage {
  background:
    linear-gradient(145deg, rgba(170, 180, 190, 0.35), rgba(255, 255, 255, 0.35) 45%, rgba(120, 130, 140, 0.12));
}

.product-page .product-gallery-note {
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.product-page .product-gallery-note span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--burgundy-dark);
  background: linear-gradient(180deg, #fff 0%, #f7edd8 100%);
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 4px 12px rgba(61, 15, 38, 0.05);
}

.product-page .product-jewel-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.product-page .product-info .coin-card-meta {
  gap: 8px;
  margin-bottom: 4px;
}

.product-page .product-info .coin-metal,
.product-page .product-info .coin-purity {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: linear-gradient(180deg, #fffefb, #f6edd8);
  color: var(--burgundy-dark);
}

.product-page .product-info h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 6px 0 12px;
  color: var(--burgundy-dark);
  text-wrap: balance;
}

.product-page .product-desc {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 42ch;
}

.product-page .product-rate-row {
  border-radius: 14px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background:
    linear-gradient(135deg, rgba(201, 168, 76, 0.14), rgba(255, 255, 255, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.product-page .product-rate-row strong {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  color: var(--burgundy-dark);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.product-page .product-field > label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.product-page .coin-weights {
  gap: 8px;
}

.product-page .coin-weights .coin-weight,
.product-page .coin-weight {
  border-radius: 12px;
  min-width: 56px;
  padding: 11px 14px;
  font-weight: 700;
  border: 1.5px solid rgba(201, 168, 76, 0.38);
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.product-page .coin-weight:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
}

.product-page .coin-weight.active,
.product-page .coin-weights .coin-weight.active {
  background: linear-gradient(145deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  border-color: var(--burgundy-dark);
  color: #fff;
  box-shadow: 0 10px 20px rgba(92, 26, 58, 0.22);
}

.product-page .product-qty {
  background: #fff;
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 4px 14px rgba(61, 15, 38, 0.04);
}

.product-page .product-price-card {
  position: relative;
  border-radius: 20px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(201, 168, 76, 0.36);
  background:
    linear-gradient(160deg, #fffefb 0%, #fff8ec 45%, #f3e5c8 100%);
  box-shadow:
    0 16px 36px rgba(61, 15, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.product-page .product-price-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
}

.product-page .product-price-main strong {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  font-weight: 800;
  letter-spacing: normal;
  color: var(--burgundy-dark);
  font-variant-numeric: tabular-nums;
}

.product-page .product-price-breakdown strong,
.product-page .pd-price-old,
.product-page #pdUnitPrice {
  font-family: var(--font-body);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.product-price-total-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.pd-price-old {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-page .product-price-total-row strong {
  margin: 0;
}

.product-page .product-price-breakup-title {
  color: var(--gold-dark);
}

.product-page .product-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.product-page .product-actions .pd-fav-btn,
.product-page .product-actions .pd-share-btn {
  grid-column: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-page .product-actions .pd-fav-btn {
  grid-column: 1 / 2;
}

.product-page .product-actions .pd-share-btn {
  grid-column: 2 / 3;
}

@media (max-width: 520px) {
  .product-page .product-actions .pd-fav-btn,
  .product-page .product-actions .pd-share-btn {
    grid-column: 1 / -1;
  }
}

.product-page .product-actions .btn {
  border-radius: 14px;
  min-height: 52px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, background 0.2s ease;
}

.product-page .product-actions .btn:hover {
  transform: translateY(-1px);
}

.product-page .product-actions .btn-primary {
  background: linear-gradient(135deg, #9a7424 0%, var(--gold) 45%, #e8d189 100%);
  border-color: #b8923a;
  color: var(--burgundy-dark);
  box-shadow: 0 14px 30px rgba(160, 124, 46, 0.32);
}

.product-page .product-actions .btn-primary:hover {
  background: linear-gradient(135deg, #8a6820 0%, #d4b45a 48%, #f0dfa0 100%);
  color: var(--burgundy-dark);
}

.product-page .product-actions .btn-ghost {
  border-color: rgba(92, 26, 58, 0.28);
  background: rgba(255, 255, 255, 0.8);
  color: var(--burgundy-dark);
}

.product-page .product-trust {
  margin-top: 18px;
  gap: 10px;
}

.product-page .product-trust li {
  padding: 13px 14px;
  border-radius: 16px;
}

@media (max-width: 720px) {
  .product-page .product-trust {
    grid-template-columns: 1fr;
  }
}

.product-page .product-tabs-wrap {
  margin-top: 4px;
  padding: 20px 18px 22px;
  border-radius: 22px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background:
    linear-gradient(165deg, #ffffff 0%, #fffcf6 55%, #f4e8d0 100%);
  box-shadow: 0 16px 34px rgba(61, 15, 38, 0.07);
}

.product-page .product-tabs-head {
  margin-bottom: 14px;
}

.product-page .product-tabs-kicker {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark, #9a7b2f);
}

.product-page .product-tabs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  color: var(--burgundy-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.product-page .product-tabs {
  gap: 6px;
  margin-bottom: 0;
  border-bottom: none;
  padding: 5px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(201, 168, 76, 0.22);
}

.product-page .product-tab {
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
}

.product-page .product-tab:hover {
  color: var(--burgundy);
  background: rgba(201, 168, 76, 0.12);
}

.product-page .product-tab.active {
  background: linear-gradient(145deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  border-color: var(--burgundy-dark);
  color: #fff;
  box-shadow: 0 8px 16px rgba(92, 26, 58, 0.22);
}

.product-page .product-tab-panels {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
}

.product-page .related-section {
  margin-top: 56px;
  padding: 28px 22px 8px;
  border-radius: 24px;
  border: 1px solid rgba(201, 168, 76, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 252, 245, 0.9), rgba(255, 255, 255, 0.55));
  box-shadow: 0 16px 40px rgba(61, 15, 38, 0.05);
}

.product-page .related-header {
  text-align: center;
  margin-bottom: 22px;
}

.product-page .related-header .section-label {
  color: var(--gold-dark);
  letter-spacing: 0.14em;
}

.product-page .related-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--burgundy-dark);
  margin: 6px 0 8px;
}

.product-page .related-lead {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.product-page .related-card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-page .related-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 18px 40px rgba(61, 15, 38, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .product-page .product-detail.mmtc-pdp,
  .product-page .product-gallery,
  .product-page .product-info,
  .product-page .product-tabs-wrap,
  .product-page .product-image-wrap::after {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .product-nav-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .product-nav-bar .product-breadcrumb {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-bottom: 2px;
  }

  .product-page .product-actions {
    grid-template-columns: 1fr;
  }

  .product-page .product-detail.mmtc-pdp {
    padding: 14px;
    gap: 20px;
    border-radius: 20px;
  }

  .product-page .product-image-stage {
    padding: 7px;
    border-radius: 18px;
  }

  .product-page .product-image-ornament {
    border-radius: 15px;
  }

  .product-page .product-image-wrap {
    border-radius: 14px;
  }

  .product-page .product-info h1 {
    font-size: clamp(1.55rem, 7vw, 1.95rem);
  }

  .product-page .product-tabs-wrap {
    padding: 14px;
    border-radius: 16px;
  }

  .product-page .product-tabs-title {
    font-size: 1.2rem;
  }

  .product-page .related-section {
    margin-top: 32px;
    padding: 18px 12px 4px;
    border-radius: 18px;
  }
}

/* ============================================
   Cross-browser mobile polish (all pages)
   Safari / Chrome / Firefox / Samsung Internet
   ============================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  min-height: var(--app-height);
  -webkit-tap-highlight-color: rgba(92, 26, 58, 0.12);
}

/* Prevent Android input auto-zoom; keep forms readable on all phones */
input,
select,
textarea {
  font-size: 16px;
}

img,
svg,
video {
  max-width: 100%;
}

img:not([height]),
video:not([height]) {
  height: auto;
}

.product-gallery-slide img,
.product-thumbs img,
.product-thumb img,
.product-image-wrap > img,
.jx-card-media img {
  max-width: none;
  height: 100%;
  width: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

a,
button,
input,
select,
textarea,
label,
.btn,
.coins-filter,
.jx-weight,
.coin-weight,
.shop-cat-pill,
.jx-cat-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  .container {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .header-inner {
    min-height: 58px;
    gap: 8px;
  }

  .nav a,
  .btn,
  .account-btn,
  .cart-btn,
  .call-btn-header,
  .whatsapp-btn-header,
  .menu-toggle {
    min-height: 44px;
  }

  .call-btn-header .call-btn-label,
  .whatsapp-btn-header .whatsapp-btn-label {
    display: none;
  }

  .store-hero {
    padding: 22px 0 36px;
  }

  .store-hero-inner {
    gap: 18px;
  }

  .store-hero-copy h1 {
    font-size: clamp(1.9rem, 8vw, 2.45rem);
    max-width: none;
    line-height: 1.12;
  }

  .store-hero-copy > p {
    font-size: 0.95rem;
    max-width: none;
  }

  .store-hero-actions {
    width: 100%;
    justify-content: center;
  }

  .store-hero-actions .btn {
    min-width: min(100%, 200px);
    text-align: center;
    justify-content: center;
  }

  .store-hero-visual {
    min-height: 0;
  }

  .store-hero-frame {
    width: min(100%, 420px);
    border-radius: 18px;
  }

  .section {
    padding: 40px 0;
  }

  .section-header h2,
  .sell-section-head h2 {
    font-size: clamp(1.55rem, 6.5vw, 2rem);
    line-height: 1.2;
  }

  .features-grid,
  .services-grid,
  .reviews-grid {
    gap: 12px;
  }

  .footer-inner {
    gap: 24px;
  }

  /* Forms: prevent iOS auto-zoom */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .btn,
  .btn-primary,
  .btn-ghost {
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  .marquee-bar {
    font-size: 0.72rem;
  }

  .store-hero-trust {
    gap: 6px 10px;
  }

  .store-hero-trust li {
    font-size: 0.74rem;
  }

  /* Shop cards ? denser, cleaner ecommerce grid */
  .jx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .jx-card {
    border-radius: 14px;
    min-width: 0;
  }

  .jx-card-body {
    padding: 10px;
    gap: 6px;
  }

  .jx-card-body h3 {
    font-size: 0.86rem;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .jx-card-weights {
    flex-wrap: wrap;
  }

  .jx-weight {
    min-width: var(--touch-min);
    min-height: 40px;
    padding: 8px 9px;
    font-size: 0.74rem;
  }

  .jx-price {
    font-size: 0.95rem;
  }

  .jx-card-actions .btn {
    min-height: var(--touch-min);
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .jx-listing-bar {
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    z-index: 6;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .jx-listing-bar p {
    font-size: 0.82rem;
  }

  .jx-filters {
    border-radius: 16px;
    padding: 14px;
  }

  .jx-metal-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .jx-metal-filters .coins-filter {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    border-radius: 10px;
    padding: 8px 6px;
    font-size: 0.8rem;
  }

  .jx-filter-help .btn {
    min-height: 44px;
  }

  /* Product detail */
  .product-page .product-main.jx-store {
    padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .product-nav-bar {
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    z-index: 8;
    margin-bottom: 10px;
    padding: 6px 10px;
  }

  body:has(.marquee-bar) .product-nav-bar {
    top: calc(var(--marquee-h) + var(--header-h)) !important;
  }

  .product-back-btn {
    min-height: var(--touch-min);
    padding: 8px 12px 8px 8px;
    font-size: 0.86rem;
  }

  .product-page .product-detail.mmtc-pdp {
    border-radius: 16px;
    padding: 12px;
    gap: 16px;
  }

  .product-page .product-image-wrap {
    border-radius: 14px;
  }

  .product-page .product-info h1 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }

  .product-page .product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    position: static;
    padding: 0;
    margin-top: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .product-page .product-actions .btn {
    min-height: 48px;
    width: 100%;
  }

  .product-page .product-trust {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-page .product-trust li {
    padding: 12px;
  }

  .product-page .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }

  .product-tabs::-webkit-scrollbar {
    display: none;
  }

  .product-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Sell gold */
  .sell-banner {
    min-height: min(72vw, 420px);
  }

  .sell-banner-content {
    padding: 28px 0 36px;
  }

  .sell-banner-content h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
  }

  .sell-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .sell-banner-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .sell-highlights-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sell-highlights-grid article {
    padding: 12px;
  }

  .steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .step-card {
    padding: 14px 12px;
  }

  .step-card h3 {
    font-size: 0.95rem;
  }

  .step-card p {
    font-size: 0.78rem;
  }

  .sell-cta-band-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .faq-question {
    min-height: 48px;
    text-align: left;
    padding: 14px 12px;
    font-size: 0.92rem;
  }

  /* Cart drawer */
  .cart-drawer {
    width: min(100vw, 420px);
    max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cart-drawer-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .cart-footer-actions .btn {
    min-height: 48px;
  }

  .cart-coupon-offer {
    padding: 12px;
  }

  /* Why us / services / reviews */
  .feature-card,
  .service-card,
  .review-card {
    border-radius: 16px;
  }

  .reviews-grid,
  .reviews-grid--six {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .review-card {
    flex: none;
    width: 100%;
    scroll-snap-align: none;
  }

  /* Legal pages */
  .legal-hero,
  .legal-content {
    padding-left: 0;
    padding-right: 0;
  }

  .legal-toc {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 380px) {
  .jx-grid {
    gap: 8px;
  }

  .sell-highlights-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .store-hero-actions {
    flex-direction: column;
  }

  .store-hero-actions .btn {
    width: 100%;
  }
}

/* Final mobile overrides ? must stay after ecommerce refresh block */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
  }

  .container {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .store-hero {
    padding: 14px 0 18px;
  }

  .store-hero-copy h1 {
    max-width: none;
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    line-height: 1.15;
  }

  .store-hero-copy > p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .store-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .store-hero-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  .store-hero-visual {
    order: -1;
  }

  .store-hero-frame {
    width: min(100%, 340px);
    margin-inline: auto;
  }

  .jx-promo {
    padding: 16px 0;
    margin-bottom: 14px;
  }

  .jx-promo-copy h2 {
    max-width: none;
    font-size: 1.35rem;
  }

  .header-inner {
    gap: 8px;
  }

  .nav {
    gap: 4px;
  }
}

/* Older browsers without dvh */
@supports not (height: 100dvh) {
  body {
    min-height: 100vh;
  }

  .modal {
    max-height: calc(100vh - 24px);
  }

  .valuation-modal {
    max-height: min(88vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
  }

  .cart-drawer {
    max-height: 100vh;
  }
}

/* Reduce motion for accessibility + low-end phones */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-track:not(.is-js-marquee) {
    animation: marquee-scroll 28s linear infinite !important;
    -webkit-animation: marquee-scroll 28s linear infinite !important;
    animation-duration: 28s !important;
    animation-iteration-count: infinite !important;
  }
}

/* iOS Safari: avoid hover sticky states */
@media (hover: none) and (pointer: coarse) {
  .jx-card:hover,
  .product-trust li:hover,
  .feature-card:hover,
  .service-card:hover,
  .related-card:hover,
  .jx-cat-card:hover {
    transform: none;
  }

  .jx-card:active,
  .jx-cat-card:active,
  .product-back-btn:active {
    transform: scale(0.98);
  }
}

.product-breadcrumb[hidden],
.product-nav-bar .product-breadcrumb {
  display: none !important;
}

/* Mobile header: sticky + hide Call/WhatsApp; keep cart always visible */
@media (max-width: 768px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  body:has(.marquee-bar) .header {
    top: var(--marquee-h);
    z-index: 1101;
  }

  .header .call-btn-header,
  .header .whatsapp-btn-header {
    display: none !important;
  }

  .header .cart-btn.is-empty,
  body.cart-is-empty .header .cart-btn,
  .header .cart-btn {
    display: none !important;
  }

  body.cart-has-items .header .cart-btn {
    display: inline-flex !important;
  }

  .header .fav-btn.is-empty,
  body.fav-is-empty .header .fav-btn,
  .header .fav-btn {
    display: none !important;
  }

  body.fav-has-items .header .fav-btn {
    display: inline-flex !important;
  }
}

/* ============================================
   Mobile layout fixes (promo gap / header / PDP)
   ============================================ */
@media (max-width: 768px) {
  .logo {
    gap: 8px;
    align-items: center;
  }

  .logo-mark {
    padding: 3px;
  }

  .logo-brand {
    gap: 2px;
    justify-content: center;
  }

  .logo-name {
    gap: 5px;
    padding-bottom: 3px;
    align-items: baseline;
  }

  .logo-pmj {
    font-size: 1.14rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--logo-plum);
    -webkit-text-fill-color: var(--logo-plum);
  }

  .logo-gold {
    font-size: 1.14rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--logo-gold-text);
    -webkit-text-fill-color: var(--logo-gold-text);
    background: none;
  }

  .logo-name::after {
    height: 1.5px;
  }

  .header-inner {
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0;
    gap: 6px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    order: 0;
  }

  .logo-brand {
    min-width: 0;
    overflow: visible;
  }

  .logo-name {
    white-space: nowrap;
  }

  .logo-tagline {
    display: block;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--logo-plum);
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
  }

  body.jx-header-search-open .logo-tagline {
    display: none !important;
  }

  .logo-icon-img {
    height: 40px;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Shop page: search expands between logo and action icons */
  .header-inner:has(.header-search) {
    justify-content: flex-start;
  }

  .header-inner:has(.header-search) .header-actions {
    display: contents;
  }

  .header-inner:has(.header-search) .header-search {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .header-inner:has(.header-search) .fav-btn,
  .header-inner:has(.header-search) .cart-btn,
  .header-inner:has(.header-search) .menu-toggle {
    order: 3;
    flex-shrink: 0;
  }

  .header-inner:has(.header-search) .header-search {
    order: 2;
  }

  body.jx-header-search-open .logo {
    max-width: min(108px, 30vw);
  }

  body.jx-header-search-open .logo-brand {
    overflow: hidden;
  }

  .header-search {
    order: 2;
    min-width: 0;
    max-width: none;
    gap: 4px;
  }

  .jx-header-search.is-open {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-left: 8px;
    position: relative;
    align-items: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .jx-header-search.is-open .header-search-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
  }

  .jx-header-search.is-open .header-search-field {
    width: 100%;
    min-height: 40px;
  }

  .jx-header-search.is-open .header-search-field-icon {
    width: 16px;
    height: 16px;
    margin-left: 10px;
  }

  .jx-header-search.is-open .header-search-panel .jx-header-search-input {
    height: 38px;
    min-height: 38px;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
  }

  .jx-header-search.is-open .header-search-clear {
    width: 26px;
    height: 26px;
  }

  .jx-header-search.is-open .header-search-close {
    width: 30px;
    height: 30px;
    margin-right: 4px;
  }

  .jx-header-search.is-open .header-search-suggest {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--jx-mobile-stack-h, var(--sticky-top-h)) + 6px);
    z-index: 1305;
    max-height: min(360px, 52vh);
  }

  .header-search-btn {
    width: var(--touch-min);
    height: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .jx-header-search.is-open .header-search-btn {
    display: none;
  }

  .header-actions .account-btn {
    display: none !important;
  }

  .account-btn,
  .fav-btn,
  .cart-btn,
  .call-btn-header,
  .whatsapp-btn-header {
    width: var(--touch-min);
    height: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .menu-toggle {
    display: flex;
    width: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 8px 6px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .menu-toggle span {
    width: 18px;
  }

  /* Mobile nav drawer */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1240;
    background: rgba(61, 15, 38, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .nav-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav {
    display: flex !important;
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    left: 0;
    bottom: 0;
    width: min(318px, 90vw);
    max-width: 318px;
    margin: 0;
    padding:
      14px
      14px
      calc(18px + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background:
      radial-gradient(ellipse 90% 40% at 0% 0%, rgba(201, 168, 76, 0.16), transparent 55%),
      linear-gradient(180deg, #fffefb 0%, #f7f1e8 100%);
    border-right: 1px solid rgba(201, 168, 76, 0.28);
    box-shadow: 14px 0 44px rgba(61, 15, 38, 0.2);
    z-index: 1250;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s ease;
  }

  .nav.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .nav-drawer-head {
    margin: 0 0 4px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.22);
  }

  .nav-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-drawer-icon {
    width: 48px;
    height: auto;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    padding: 4px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 6px 14px rgba(61, 15, 38, 0.12);
  }

  .nav-drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .nav-drawer-title {
    font-family: var(--font-logo);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--logo-plum);
    line-height: 1.1;
    text-transform: uppercase;
  }

  .nav-drawer-tagline {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7a6570;
    line-height: 1.3;
  }

  .nav-drawer-loc {
    display: none !important;
  }

  .nav-drawer-label {
    margin: 10px 2px 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark, #a07c2e);
  }

  .nav-drawer-foot .nav-drawer-label:first-child {
    margin-top: 0;
  }

  .nav a,
  .nav-account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--burgundy-dark);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(201, 168, 76, 0.2);
    box-shadow: 0 4px 12px rgba(61, 15, 38, 0.04);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(201, 168, 76, 0.2);
    touch-action: manipulation;
  }

  .nav a::after {
    display: none;
  }

  .nav .nav-link-icon {
    display: none !important;
  }

  .nav-account-link svg {
    flex-shrink: 0;
    color: var(--gold-dark, #a07c2e);
  }

  .nav a.nav-drawer-link--primary {
    background: linear-gradient(145deg, #5a1a38 0%, #3d0f26 100%);
    border-color: rgba(201, 168, 76, 0.45);
    color: #fff8e7;
    box-shadow: 0 8px 18px rgba(61, 15, 38, 0.18);
  }

  .nav a.nav-drawer-link--primary .nav-link-icon {
    color: #e8d5a0;
  }

  .nav a:hover,
  .nav a:focus-visible,
  .nav-account-link:hover,
  .nav-account-link:focus-visible {
    color: var(--gold-dark);
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.4);
  }

  .nav a.nav-drawer-link--primary:hover,
  .nav a.nav-drawer-link--primary:focus-visible {
    color: #fff;
    background: linear-gradient(145deg, #6b2344 0%, #4a1430 100%);
  }

  .nav a:active,
  .nav-account-link:active {
    transform: scale(0.98);
  }

  .nav-account-link {
    margin-top: 4px;
  }

  .nav-drawer-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(201, 168, 76, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .nav-quick-row,
  .nav-social-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .nav-quick-btn,
  .nav-social-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    box-shadow: none !important;
  }

  .nav-quick-call {
    background: rgba(61, 15, 38, 0.06) !important;
    border-color: rgba(61, 15, 38, 0.18) !important;
    color: var(--burgundy-dark) !important;
  }

  .nav-quick-wa {
    background: linear-gradient(165deg, #1aa86a 0%, #128c7e 100%) !important;
    border-color: #0f7a6e !important;
    color: #fff !important;
  }

  .nav-quick-wa svg {
    color: #fff !important;
  }

  .nav-social-btn {
    background: #fff !important;
    border-color: rgba(201, 168, 76, 0.28) !important;
    color: var(--burgundy-dark) !important;
  }

  .nav-social-btn[hidden] {
    display: none !important;
  }

  .nav-social-btn svg {
    color: var(--gold-dark, #a07c2e) !important;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .menu-toggle span {
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .header {
    z-index: 1260;
  }

  .jx-promo {
    padding: 14px 0;
    margin-bottom: 12px;
  }

  .jx-promo-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: center;
  }

  .jx-promo-copy {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  .jx-promo-copy h2 {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 auto 4px;
  }

  .jx-promo-copy p {
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0 auto;
  }

  .jx-promo-eyebrow {
    margin: 0 auto 4px;
    font-size: 0.68rem;
  }

  .jx-promo-rates[hidden] {
    display: none !important;
  }

  .jx-promo-cta {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 11px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 10px;
    min-height: 44px;
    text-align: center;
  }

  .jx-promo-glow {
    width: 140px;
    top: -40px;
    right: -30px;
  }

  .product-page .product-main.jx-store,
  .product-page .jx-store {
    overflow: visible;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 40px;
  }

  .product-nav-bar {
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    gap: 0;
  }

  .product-back-btn {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 8px 10px 8px 6px;
    min-height: var(--touch-min);
  }

  .product-page .product-gallery {
    gap: 8px;
  }

  .product-page .product-detail.mmtc-pdp {
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
  }

  .product-page .product-image-wrap {
    border-radius: 12px;
  }

  .product-thumbs {
    margin-top: 0;
    padding: 0;
    gap: 6px;
  }

  .product-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
  }

  .product-gallery-note {
    display: none;
  }

  .product-page .product-gallery-note {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-page .product-gallery-note::-webkit-scrollbar {
    display: none;
  }

  .product-page .product-gallery-note span {
    flex: 0 0 auto;
    font-size: 0.65rem;
    padding: 6px 10px;
  }

  .product-page .product-info {
    display: block;
    min-width: 0;
  }

  .product-page .product-info h1 {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 4px 0 8px;
  }
}

@media (max-width: 430px) {
  .logo {
    gap: 6px;
  }

  .logo-pmj {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  .logo-gold {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  .logo-icon-img {
    height: 36px;
  }

  .header .container {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .header-actions {
    gap: 4px;
  }

  .account-btn,
  .fav-btn,
  .cart-btn,
  .call-btn-header,
  .whatsapp-btn-header,
  .menu-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}

/* ---- Header account / Sign in ---- */
.account-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--burgundy);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  text-decoration: none;
}

.account-btn:hover {
  border-color: var(--gold);
  color: var(--burgundy-dark);
  box-shadow: var(--shadow);
}

/* ---- Favourites ---- */
.fav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--burgundy);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.fav-btn:hover,
.fav-btn.is-active {
  border-color: rgba(196, 30, 58, 0.45);
  color: #c41e3a;
  box-shadow: var(--shadow);
}

.fav-btn-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c41e3a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.jx-card {
  position: relative;
}

.jx-share-btn,
.jx-fav-btn {
  position: absolute;
  top: 12px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(61, 15, 38, 0.55);
  box-shadow: 0 6px 18px rgba(28, 16, 20, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.jx-share-btn {
  right: 56px;
}

.jx-fav-btn {
  right: 12px;
  color: rgba(61, 15, 38, 0.45);
}

.jx-share-btn:hover {
  color: var(--burgundy);
  background: #fff;
  transform: translateY(-1px);
}

.pmj-share-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  z-index: 3000;
  max-width: min(90vw, 320px);
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(61, 15, 38, 0.94);
  color: #fff8e7;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 12px 28px rgba(28, 16, 20, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pmj-share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Small tip under header bag / favourites icons */
.header-icon-toast {
  position: fixed;
  z-index: 3200;
  max-width: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(61, 15, 38, 0.96);
  color: #fff8e7;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(28, 16, 20, 0.28);
  border: 1px solid rgba(201, 168, 76, 0.45);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(0, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-icon-toast::before {
  content: '';
  position: absolute;
  top: -5px;
  left: var(--toast-caret-left, 14px);
  width: 10px;
  height: 10px;
  margin-left: 0;
  background: rgba(61, 15, 38, 0.96);
  border-left: 1px solid rgba(201, 168, 76, 0.45);
  border-top: 1px solid rgba(201, 168, 76, 0.45);
  transform: rotate(45deg);
}

.header-icon-toast.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.header-icon-toast--fallback {
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translate(0, 8px);
}

.header-icon-toast--fallback.is-visible {
  transform: translate(0, 0);
}

.header-icon-toast--fallback::before {
  display: none;
}

.jx-fav-btn:hover,
.jx-fav-btn.is-active {
  color: #c41e3a;
  background: #fff;
}

.jx-fav-btn.is-active {
  box-shadow: 0 8px 20px rgba(196, 30, 58, 0.22);
}

.jx-fav-btn.fav-pop,
.pd-fav-btn.fav-pop,
[data-fav].fav-pop {
  animation: fav-pop 0.28s ease;
}

@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.pd-fav-btn.is-active {
  border-color: rgba(196, 30, 58, 0.4);
  color: #c41e3a;
}

.fav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 16, 20, 0.45);
  z-index: 1220;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fav-overlay.active {
  opacity: 1;
}

.fav-overlay[hidden] {
  display: none !important;
}

.fav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: var(--app-height);
  max-height: var(--app-height);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--cream);
  z-index: 1230;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fav-drawer.open {
  transform: translateX(0);
}

.fav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, #fff9f0 100%);
}

.fav-drawer-header h3 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  font-size: 1.35rem;
  margin: 0;
}

.fav-drawer-count {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.fav-drawer-close {
  border: none;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.fav-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fav-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
}

.fav-empty[hidden],
.fav-items[hidden] {
  display: none !important;
}

.fav-empty-hint {
  margin: 8px 0 20px;
  font-size: 0.9rem;
}

.fav-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(201, 168, 76, 0.22);
}

.fav-item-media {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f1e6;
  line-height: 0;
  flex-shrink: 0;
  align-self: start;
}

.fav-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fav-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fav-item-body a {
  color: inherit;
  text-decoration: none;
}

.fav-item-body strong {
  display: block;
  font-size: 0.95rem;
  color: var(--burgundy-dark);
  line-height: 1.3;
}

.fav-item-body span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fav-item-body em {
  font-style: normal;
  font-weight: 700;
  color: var(--burgundy);
  font-size: 0.95rem;
}

.fav-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

.fav-item-actions .btn {
  padding: 8px 12px;
  font-size: 0.78rem;
  min-height: 34px;
}

.fav-remove {
  border: none;
  background: transparent;
  color: #c41e3a;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}

/* ---- Footer: mobile viewport-fit polish ---- */
@media (max-width: 768px) {
  .footer {
    position: relative;
    padding-top: 36px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background:
      radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.28) 0%, transparent 55%),
      linear-gradient(180deg, #4a1830 0%, var(--burgundy-dark) 38%, #1a0a12 100%);
    overflow: hidden;
  }

  .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), #f5e6a8, var(--gold), transparent);
  }

  .footer-inner {
    gap: 22px;
    padding: 8px max(16px, env(safe-area-inset-left, 0px)) 28px max(16px, env(safe-area-inset-right, 0px));
  }

  .footer-brand {
    width: 100%;
    max-width: 420px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  }

  .footer-brand p {
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
  }

  .footer-address {
    max-width: 420px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-heading {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #f5e6a8;
  }

  .footer-branch + .footer-branch {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-directions {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.16);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #f5e6a8;
  }

  .footer-links-col {
    max-width: 420px;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .footer-links > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .footer-links > a:hover,
  .footer-links > a:active {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.4);
    color: #fff8e7;
    padding-left: 12px;
  }

  .footer-links > a#footerFavLink {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.35), rgba(212, 175, 55, 0.22));
    border-color: rgba(245, 230, 168, 0.35);
    color: #fff8e7;
  }

  .footer-support {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 4px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.14) 0%, rgba(0, 0, 0, 0.2) 100%);
    align-items: stretch;
    border-left: 1px solid rgba(212, 175, 55, 0.28);
  }

  .footer-support-title {
    text-align: center;
    color: #f5e6a8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
  }

  .footer-support-row {
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
  }

  .footer-bottom {
    padding: 16px max(16px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-bottom, 16px)) max(16px, env(safe-area-inset-right, 0px));
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    background: rgba(0, 0, 0, 0.22);
  }

  .footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
  }

  /* Visit Us — mobile: hide building name, tidy branch cards */
  .address-line-shakuntala,
  .address-line-locality {
    display: none !important;
  }

  .footer-address .footer-company-name {
    display: none;
  }

  .footer-branches,
  .footer-branches-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .footer-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(201, 168, 76, 0.1), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(201, 168, 76, 0.28);
    box-shadow: inset 0 1px 0 rgba(243, 228, 168, 0.08);
  }

  .footer-branch + .footer-branch {
    margin-top: 0 !important;
    padding-top: 14px !important;
    border-top: none !important;
  }

  .footer-branch-label {
    margin-bottom: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .footer-address-text {
    align-items: center;
    font-size: 0.78rem;
    line-height: 1.45;
    gap: 3px;
  }

  .footer-address-text .address-pin {
    margin-top: 0;
    font-size: 0.76rem;
  }

  .footer-branch .footer-directions {
    margin-top: 10px;
    width: 100%;
    max-width: 140px;
    justify-content: center;
    text-align: center;
    font-size: 0.74rem;
    padding: 7px 12px;
  }

  .footer-compact .footer-address {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .footer-branches-compact .footer-branch {
    padding: 14px 10px;
  }

  .fav-drawer {
    width: 100%;
    border-radius: 0;
  }

  .fav-item {
    grid-template-columns: 64px 1fr;
  }

  .fav-item-media {
    width: 64px;
    height: 64px;
  }

  .fav-item-media img {
    width: 100%;
    height: 100%;
  }

  .fav-item-actions .btn {
    flex: 1 1 auto;
  }
}

/* ============================================
   Your Bag ? attractive + smooth polish
   ============================================ */
.cart-drawer {
  width: min(440px, 100%);
  background:
    radial-gradient(ellipse 90% 40% at 100% 0%, rgba(212, 175, 55, 0.16), transparent 55%),
    linear-gradient(180deg, #fffdf9 0%, #faf4ea 42%, #f3ebe0 100%);
}

.cart-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), #f5e6a8, var(--gold), transparent);
  z-index: 4;
  pointer-events: none;
}

.cart-drawer-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 240, 0.96) 100%);
  padding: 20px 20px 16px;
}

.cart-drawer-eyebrow {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.cart-drawer-heading h3,
.cart-drawer-header h3 {
  font-size: clamp(1.45rem, 4vw, 1.7rem);
  letter-spacing: -0.02em;
}

.cart-drawer-sub {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(92, 26, 58, 0.06);
  color: var(--burgundy);
  font-size: 0.78rem;
}

.cart-drawer-close {
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.cart-drawer-close:hover {
  transform: rotate(90deg);
  background: #fff;
}

.cart-drawer-body {
  scroll-behavior: smooth;
  padding: 14px 14px 18px;
  gap: 12px;
}

.cart-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 22px 40px;
  border-radius: 22px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(61, 15, 38, 0.05);
  animation: cart-empty-in 0.45s var(--ease-out) both;
}

.cart-empty-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: var(--burgundy);
  background: linear-gradient(145deg, #fff 0%, #f7edd8 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 10px 24px rgba(61, 15, 38, 0.08);
}

.cart-empty h4 {
  margin-bottom: 8px;
}

.cart-empty .btn {
  min-width: 200px;
  min-height: 48px;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(92, 26, 58, 0.18);
}

.cart-item {
  position: relative;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(201, 168, 76, 0.22);
  background: linear-gradient(165deg, #ffffff 0%, #fffaf2 100%);
  box-shadow: 0 10px 26px rgba(61, 15, 38, 0.06);
  overflow: visible;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: min-content;
  height: auto;
  align-self: stretch;
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.28s var(--ease-out),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.cart-drawer.is-animating-in .cart-item {
  animation: cart-item-in 0.42s var(--ease-out) both;
}

.cart-drawer.is-animating-in .cart-item:nth-of-type(1) { animation-delay: 0.03s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(2) { animation-delay: 0.07s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(3) { animation-delay: 0.11s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(4) { animation-delay: 0.15s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(5) { animation-delay: 0.19s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(6) { animation-delay: 0.23s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(7) { animation-delay: 0.27s; }
.cart-drawer.is-animating-in .cart-item:nth-of-type(8) { animation-delay: 0.31s; }

.cart-item:hover {
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 14px 32px rgba(61, 15, 38, 0.1);
}

.cart-item.is-leaving {
  opacity: 0 !important;
  transform: translateX(28px) scale(0.98) !important;
  pointer-events: none;
}

.cart-item-link {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.cart-item-img {
  width: 86px;
  height: 86px;
  border-radius: 14px;
  transition: transform 0.45s var(--ease-out);
}

.cart-item:hover .cart-item-img {
  transform: scale(1.04);
}

.cart-item-name {
  font-size: 0.94rem;
  letter-spacing: -0.01em;
}

.cart-item-remove {
  padding: 4px 8px;
  border-radius: 999px;
  color: #a33a3a;
  transition: background 0.2s ease, color 0.2s ease;
}

.cart-item-remove:hover {
  background: rgba(196, 30, 58, 0.08);
  text-decoration: none;
}

.cart-item-qty {
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border-color: rgba(201, 168, 76, 0.35);
  background: linear-gradient(180deg, #fff 0%, #f7f0e4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cart-item-qty button {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: 999px;
  transition: transform 0.18s var(--ease-out), background 0.2s ease, color 0.2s ease;
}

.cart-item-qty button.is-pressed,
.cart-item-qty button:active {
  transform: scale(0.9);
}

.cart-item-qty button:hover {
  background: var(--burgundy);
  color: #f5e6a8;
}

.cart-item-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.cart-coupon {
  border-radius: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cart-coupon:hover {
  border-color: rgba(201, 168, 76, 0.75);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.05);
}

.cart-coupon-toggle {
  transition: color 0.2s ease, background 0.2s ease;
}

.cart-drawer-footer {
  max-height: none;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, #ffffff 40%);
  box-shadow: 0 -14px 36px rgba(61, 15, 38, 0.08);
  border-top: 1px solid rgba(201, 168, 76, 0.28);
  animation: cart-footer-in 0.4s var(--ease-out) both;
  flex: 0 0 auto;
}

.cart-bill {
  max-height: none;
  overflow: visible;
  border-radius: 16px;
  border: 1px solid rgba(201, 168, 76, 0.24);
  background:
    linear-gradient(160deg, #fffdf8 0%, #fff 55%, #faf4ea 100%);
  padding: 14px 14px 12px;
}

.cart-bill-title {
  color: var(--burgundy);
  letter-spacing: 0.08em;
}

.cart-total-row {
  font-size: 0.9rem;
}

.cart-total-row span {
  color: var(--text-muted);
}

.cart-total-grand {
  margin-top: 6px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  border-top: none;
  background: rgba(92, 26, 58, 0.05);
}

.cart-total-grand strong {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: transform 0.28s var(--ease-out), color 0.28s ease;
}

.cart-total-grand strong.is-pulse {
  animation: cart-total-pulse 0.38s var(--ease-out);
}

.cart-footer-actions .btn-primary {
  min-height: 52px;
  border-radius: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 28px rgba(92, 26, 58, 0.24);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}

.cart-footer-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(92, 26, 58, 0.28);
}

.cart-footer-actions .btn-primary:active {
  transform: translateY(0) scale(0.99);
}

.cart-footer-actions .btn-ghost {
  border-radius: 12px;
  min-height: 42px;
}

.cart-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cart-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.28);
}

.cart-secure-note {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

@keyframes cart-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cart-empty-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cart-footer-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cart-total-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); color: var(--burgundy); }
  100% { transform: scale(1); }
}

@media (max-width: 768px) {
  .cart-drawer {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .cart-drawer-header {
    padding: 16px 14px 14px;
  }

  .cart-drawer-body {
    padding: 12px;
  }

  .cart-item {
    grid-template-columns: 76px 1fr;
    border-radius: 16px;
  }

  .cart-item-img {
    width: 76px;
    height: 76px;
  }

  .cart-drawer-footer {
    max-height: none;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .cart-bill {
    max-height: min(22vh, 150px);
    padding: 10px 12px;
  }

  .cart-trust-row {
    display: none;
  }

  .cart-item {
    flex: 0 0 auto;
    min-height: min-content;
    height: auto;
    overflow: visible;
  }

  .cart-footer-actions .btn-primary {
    min-height: 50px;
  }

  .cart-trust-row span {
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .cart-overlay,
  .cart-item,
  .cart-item-img,
  .cart-item-qty button,
  .cart-footer-actions .btn-primary {
    transition: none !important;
    animation: none !important;
  }

  .cart-item {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   Your Bag layout fix ? single scroll, full content
   ============================================ */
#cartEmpty[hidden],
.cart-empty[hidden],
#cartBill[hidden],
.cart-bill[hidden],
#cartFooter[hidden],
.cart-drawer-footer[hidden],
#cartCouponBlock[hidden] {
  display: none !important;
}

.cart-drawer {
  display: flex !important;
  flex-direction: column !important;
  height: var(--app-height) !important;
  max-height: var(--app-height) !important;
  overflow: hidden !important;
}

.cart-drawer-header {
  flex: 0 0 auto !important;
}

  .cart-drawer-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px 14px 16px !important;
}

.cart-drawer-body > .cart-item,
.cart-drawer-body > .cart-coupon,
.cart-drawer-body > .cart-bill,
.cart-drawer-body > .cart-empty {
  flex: 0 0 auto !important;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

.cart-empty:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 18px !important;
}

.cart-item {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: start !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

.cart-bill {
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(201, 168, 76, 0.24);
  border-radius: 14px;
  background: #fffdf9;
}

.cart-drawer-footer {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 8px !important;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -8px 24px rgba(61, 15, 38, 0.08);
}

.cart-footer-actions {
  gap: 8px !important;
}

.cart-footer-actions .btn-primary {
  min-height: 48px !important;
}

.cart-footer-actions .btn-ghost {
  min-height: 40px !important;
}

.cart-secure-note {
  margin: 0 !important;
  text-align: center;
  font-size: 0.7rem !important;
  line-height: 1.35;
}

.cart-trust-row {
  display: none !important;
}

@media (max-width: 768px) {
  .cart-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cart-drawer-header {
    padding: 14px 14px 12px !important;
  }

  .cart-drawer-eyebrow {
    font-size: 0.64rem;
  }

  .cart-drawer-heading h3,
  .cart-drawer-header h3 {
    font-size: 1.35rem !important;
  }

  .cart-item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  .cart-item-img {
    width: 72px !important;
    height: 72px !important;
  }

  .cart-bill {
    padding: 10px 12px !important;
  }

  .cart-drawer-footer {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================
   GIVA-style Apply Coupon (bag)
   ============================================ */
.cart-drawer {
  position: fixed;
}

.giva-coupon {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 8px !important;
}

.giva-coupon-strip {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(201, 168, 76, 0.55);
  background: linear-gradient(135deg, #fffdf8 0%, #fff 60%, #f7f1e6 100%);
  color: var(--burgundy-dark);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.giva-coupon-strip:hover {
  border-color: rgba(201, 168, 76, 0.9);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.08);
}

.giva-coupon-strip-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
}

.giva-coupon-strip-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.giva-coupon-strip-copy strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--burgundy-dark);
}

.giva-coupon-strip-copy small {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.giva-coupon-strip-chevron {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--burgundy);
  line-height: 1;
}

.giva-coupon-applied {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 36px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.12), #fff);
}

.giva-coupon-applied[hidden] {
  display: none !important;
}

.giva-coupon-applied-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(28, 16, 20, 0.06);
  color: var(--burgundy-dark);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.giva-coupon-applied-close:hover {
  background: rgba(180, 35, 24, 0.12);
  color: #b42318;
}

.giva-coupon-applied-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
}

.giva-coupon-applied-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0f766e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.giva-coupon-applied-main strong {
  display: block;
  letter-spacing: 0.04em;
  color: var(--burgundy-dark);
  font-size: 0.95rem;
}

.giva-coupon-applied-main p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.giva-coupon-applied-main em {
  font-style: normal;
  font-weight: 800;
  color: #0f766e;
  font-size: 0.95rem;
  white-space: nowrap;
}

.coupon-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 16, 20, 0.45);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.coupon-sheet-overlay.active {
  opacity: 1;
}

.coupon-sheet-overlay[hidden] {
  display: none !important;
}

.coupon-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: min(78dvh, 560px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 40px rgba(28, 16, 20, 0.2);
  transform: translateY(105%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.coupon-sheet.open {
  transform: translateY(0);
}

.coupon-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(230, 221, 208, 0.95);
}

.coupon-sheet-eyebrow {
  margin: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.coupon-sheet-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--burgundy-dark);
}

.coupon-sheet-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.coupon-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coupon-sheet-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.coupon-sheet-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.coupon-sheet-input-row input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #faf7f1;
}

.coupon-sheet-input-row input:focus {
  outline: none;
  border-color: rgba(15, 118, 110, 0.55);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.coupon-sheet-apply {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  min-height: 46px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #115e59);
  cursor: pointer;
}

.coupon-sheet-offers-title {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--burgundy-dark);
}

.cart-coupon-offers {
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.giva-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: #fff;
  min-width: 0;
  width: 100%;
  cursor: pointer;
}

.giva-offer.is-selected {
  border-color: rgba(15, 118, 110, 0.45);
  background: rgba(15, 118, 110, 0.06);
}

.giva-offer.is-disabled {
  opacity: 0.62;
  background: #faf7f1;
  cursor: default;
}

.giva-offer-code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--burgundy);
  border: 1px dashed rgba(201, 168, 76, 0.55);
  border-radius: 8px;
  padding: 8px 4px;
  background: #fffdf8;
  min-height: 72px;
  display: grid;
  place-items: center;
}

.giva-offer-body {
  min-width: 0;
}

.giva-offer-metal {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.giva-offer.is-gold .giva-offer-metal {
  background: rgba(201, 168, 76, 0.22);
  color: #8a6a1f;
  border: 1px solid rgba(201, 168, 76, 0.45);
}

.giva-offer.is-silver .giva-offer-metal {
  background: rgba(120, 140, 160, 0.18);
  color: #3d4f63;
  border: 1px solid rgba(120, 140, 160, 0.4);
}

.giva-offer.is-any .giva-offer-metal,
.giva-offer.is-bxgy .giva-offer-metal {
  background: rgba(92, 26, 58, 0.08);
  color: #5c1a3a;
  border: 1px solid rgba(92, 26, 58, 0.18);
}

.giva-offer.is-gold {
  border-color: rgba(201, 168, 76, 0.4);
}

.giva-offer.is-silver {
  border-color: rgba(120, 140, 160, 0.35);
}

.giva-offer.is-bxgy {
  border-color: rgba(15, 118, 110, 0.35);
}

.giva-offer.is-gold .giva-offer-code {
  color: #8a6a1f;
  border-color: rgba(201, 168, 76, 0.55);
  background: #fff9e8;
}

.giva-offer.is-silver .giva-offer-code {
  color: #3d4f63;
  border-color: rgba(120, 140, 160, 0.45);
  background: #f4f7fa;
}

.giva-offer.is-bxgy .giva-offer-code {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.4);
  background: #f0fdfa;
}

.giva-offer-body strong {
  display: block;
  font-size: 0.9rem;
  color: var(--burgundy-dark);
  overflow-wrap: anywhere;
}

.giva-offer-body p {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.giva-offer-save {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f766e;
}

.giva-offer.is-disabled .giva-offer-save {
  color: #9b3b3b;
  font-weight: 700;
}

.giva-offer-apply {
  appearance: none;
  border: 1px solid rgba(15, 118, 110, 0.45);
  background: #fff;
  color: #0f766e;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.giva-offer-apply:disabled {
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

.giva-offer.is-selected .giva-offer-apply {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}

#cartCouponDiscountRow strong,
.cart-discount-row strong {
  color: #0f766e !important;
}

@media (max-width: 768px) {
  .coupon-sheet {
    max-height: min(82dvh, 620px);
  }

  .giva-offer-apply {
    min-height: 40px;
  }
}

/* Homepage card zoom ? bottom right */
.jx-zoom-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(31, 10, 20, 0.82);
  color: #fff8e7;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(28, 16, 20, 0.22);
  pointer-events: auto;
}

.jx-zoom-btn:hover {
  background: rgba(61, 15, 38, 0.92);
  transform: translateY(-1px);
}

.shop-zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 8, 14, 0.88);
  backdrop-filter: blur(4px);
}

.shop-zoom-lightbox[hidden] {
  display: none !important;
}

.shop-zoom-img {
  max-width: min(92vw, 720px);
  max-height: min(82vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  background: #1a0a12;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.shop-zoom-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

/* Sell page ? elegant light-gold theme */
.sell-gold-page {
  --sell-gold: #c9a84c;
  --sell-gold-soft: #e8d5a0;
  --sell-gold-deep: #9a7b2f;
  --sell-ink: #5c4020;
  --sell-muted: #8a7350;
  --sell-bg: #fffaf0;
  --sell-card: #fffdf8;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(232, 213, 160, 0.45), transparent 42%),
    radial-gradient(ellipse at 90% 20%, rgba(201, 168, 76, 0.18), transparent 40%),
    linear-gradient(180deg, #fffaf2 0%, #fff7e8 40%, #faf3e4 100%);
  color: var(--sell-ink);
}

.sell-gold-page .header {
  background: rgba(255, 252, 246, 0.94);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  backdrop-filter: blur(12px);
}

.sell-gold-page .sell-banner {
  min-height: min(82vh, 680px);
}

.sell-gold-page .sell-banner-shade {
  background:
    linear-gradient(115deg, rgba(255, 248, 230, 0.92) 0%, rgba(255, 244, 214, 0.72) 42%, rgba(255, 250, 240, 0.28) 100%),
    linear-gradient(180deg, rgba(255, 252, 245, 0.2) 0%, rgba(245, 230, 190, 0.55) 100%);
}

.sell-gold-page .sell-banner-content {
  max-width: 720px;
}

.sell-gold-page .sell-banner-eyebrow {
  color: var(--sell-gold-deep);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 6px 18px rgba(154, 123, 47, 0.08);
}

.sell-gold-page .sell-banner-content h1 {
  color: var(--sell-ink);
  max-width: 16ch;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sell-gold-page .sell-banner-content h1 em {
  color: var(--sell-gold-deep);
  font-style: italic;
}

.sell-gold-page .sell-banner-content > p {
  color: var(--sell-muted);
  max-width: 42ch;
}

.sell-gold-page .sell-banner-ghost {
  color: var(--sell-ink) !important;
  border-color: rgba(201, 168, 76, 0.45) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

.sell-gold-page .sell-banner-ghost:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}

.sell-gold-page .sell-banner-trust li {
  color: var(--sell-ink);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(201, 168, 76, 0.35);
}

.sell-gold-page .sell-promise {
  padding: 10px 0 8px;
}

.sell-gold-page .sell-promise-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 24px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 230, 0.95));
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 12px 36px rgba(154, 123, 47, 0.08);
}

.sell-gold-page .sell-promise-quote {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--sell-ink);
}

.sell-gold-page .sell-promise-sign {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sell-gold-deep);
}

.sell-gold-page .sell-highlights {
  margin-top: 8px;
  padding: 28px 0 12px;
}

.sell-gold-page .sell-section-head .section-label,
.sell-gold-page .sell-page-process .section-label,
.sell-gold-page .faq .section-label {
  color: var(--sell-gold-deep);
}

.sell-gold-page .sell-section-head h2,
.sell-gold-page .sell-page-process .section-header h2,
.sell-gold-page .faq .section-header h2 {
  color: var(--sell-ink);
}

.sell-gold-page .sell-section-head p,
.sell-gold-page .sell-page-process .section-header p,
.sell-gold-page .faq .section-header p {
  color: var(--sell-muted);
}

.sell-gold-page .sell-highlights-grid article {
  background:
    radial-gradient(ellipse at top right, rgba(232, 213, 160, 0.55), transparent 55%),
    linear-gradient(165deg, #ffffff 0%, #fff8e8 100%);
  border-color: rgba(201, 168, 76, 0.32);
  color: var(--sell-ink);
  box-shadow: 0 14px 34px rgba(154, 123, 47, 0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sell-gold-page .sell-highlights-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(154, 123, 47, 0.16);
}

.sell-gold-page .sell-hi-icon {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: var(--sell-gold-deep);
}

.sell-gold-page .sell-highlights-grid strong {
  color: var(--sell-ink);
}

.sell-gold-page .sell-highlights-grid span:not(.sell-hi-icon) {
  color: var(--sell-muted);
}

.sell-gold-page .sell-page-process {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 213, 160, 0.4), transparent 50%),
    linear-gradient(180deg, rgba(255, 250, 240, 0.5) 0%, rgba(255, 245, 220, 0.85) 100%);
  border-block: 1px solid rgba(201, 168, 76, 0.18);
}

.sell-gold-page .sell-page-process .step-card {
  background: linear-gradient(165deg, #ffffff 0%, #fffaf0 100%);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 12px 30px rgba(154, 123, 47, 0.08);
  border-radius: 22px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sell-gold-page .sell-page-process .step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(154, 123, 47, 0.14);
}

.sell-gold-page .sell-page-process .step-num {
  background: linear-gradient(145deg, #e8d5a0, #c9a84c);
  color: #5c4020;
  box-shadow: 0 8px 18px rgba(201, 168, 76, 0.35);
}

.sell-gold-page .sell-page-process .step-card h3 {
  color: var(--sell-ink);
}

.sell-gold-page .sell-page-process .step-card p {
  color: var(--sell-muted);
}

.sell-gold-page .sell-cta-band-inner {
  background:
    radial-gradient(ellipse at 90% 0%, rgba(232, 213, 160, 0.55), transparent 48%),
    linear-gradient(145deg, #fffef8 0%, #fff4d8 55%, #f7e8c0 100%);
  border-color: rgba(201, 168, 76, 0.4);
  color: var(--sell-ink);
  box-shadow: 0 20px 50px rgba(154, 123, 47, 0.12);
}

.sell-gold-page .sell-cta-band-inner h2,
.sell-gold-page .sell-cta-copy h2 {
  color: var(--sell-ink);
}

.sell-gold-page .sell-cta-band-inner p,
.sell-gold-page .sell-cta-copy p,
.sell-gold-page .sell-feature-card-eyebrow {
  color: var(--sell-muted) !important;
}

.sell-gold-page .sell-feature-card-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--sell-gold-deep) !important;
}

.sell-gold-page .hero-form-benefits li {
  color: var(--sell-ink);
}

.sell-gold-page .sell-cta-stats .stat {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(201, 168, 76, 0.3);
}

.sell-gold-page .sell-cta-stats .stat strong {
  color: var(--sell-gold-deep);
}

.sell-gold-page .sell-cta-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 14px 36px rgba(154, 123, 47, 0.1);
}

.sell-gold-page .sell-cta-card-label {
  margin: 0 0 4px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sell-gold-deep);
}

.sell-gold-page .sell-cta-links a {
  color: var(--sell-gold-deep);
}

.sell-gold-page .sell-cta-links a:hover {
  color: var(--sell-ink);
}

.sell-gold-page .faq {
  background: transparent;
}

.sell-gold-page .faq-item {
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(154, 123, 47, 0.06);
}

.sell-gold-page .faq-question {
  color: var(--sell-ink);
}

.sell-gold-page .faq-answer p {
  color: var(--sell-muted);
}

.sell-gold-page .btn-primary {
  background: linear-gradient(135deg, #e8d5a0 0%, #c9a84c 55%, #b8953a 100%);
  color: #3f2c12;
  border: none;
  box-shadow: 0 10px 24px rgba(201, 168, 76, 0.35);
}

.sell-gold-page .btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 12px 28px rgba(201, 168, 76, 0.42);
}

/* Sell page ? mobile readability & elegance */
@media (max-width: 768px) {
  .sell-gold-page {
    font-size: 16px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .sell-gold-page .sell-banner {
    min-height: auto;
  }

  .sell-gold-page .sell-banner-content {
    padding: 48px 18px 36px;
    max-width: none;
  }

  .sell-gold-page .sell-banner-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    line-height: 1.35;
  }

  .sell-gold-page .sell-banner-content h1 {
    max-width: none;
    font-size: clamp(1.85rem, 8.2vw, 2.45rem);
    line-height: 1.18;
    margin-bottom: 12px;
  }

  .sell-gold-page .sell-banner-content > p {
    max-width: none;
    font-size: 1rem;
    line-height: 1.6;
    color: #6b5430;
    margin-bottom: 20px;
  }

  .sell-gold-page .sell-banner-actions {
    gap: 10px;
    margin-bottom: 16px;
  }

  .sell-gold-page .sell-banner-actions .btn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 700;
  }

  .sell-gold-page .sell-banner-trust {
    gap: 8px;
  }

  .sell-gold-page .sell-banner-trust li {
    font-size: 0.8rem;
    padding: 8px 12px;
    line-height: 1.3;
  }

  .sell-gold-page .sell-promise {
    padding: 8px 16px 4px;
  }

  .sell-gold-page .sell-promise-inner {
    padding: 18px 16px;
    border-radius: 18px;
  }

  .sell-gold-page .sell-promise-quote {
    font-size: 1.15rem;
    line-height: 1.45;
  }

  .sell-gold-page .sell-promise-sign {
    font-size: 0.78rem;
  }

  .sell-gold-page .sell-highlights {
    margin-top: 4px;
    padding: 20px 0 8px;
  }

  .sell-gold-page .sell-section-head {
    padding: 0 4px;
    margin-bottom: 18px;
  }

  .sell-gold-page .sell-section-head h2,
  .sell-gold-page .sell-page-process .section-header h2,
  .sell-gold-page .faq .section-header h2 {
    font-size: clamp(1.55rem, 6.5vw, 1.9rem);
    line-height: 1.25;
  }

  .sell-gold-page .sell-section-head p,
  .sell-gold-page .sell-page-process .section-header p,
  .sell-gold-page .faq .section-header p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .sell-gold-page .sell-highlights-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sell-gold-page .sell-highlights-grid article {
    padding: 16px 16px;
    border-radius: 16px;
  }

  .sell-gold-page .sell-highlights-grid strong {
    font-size: 1.05rem;
    margin-bottom: 6px;
  }

  .sell-gold-page .sell-highlights-grid span:not(.sell-hi-icon) {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .sell-gold-page .sell-hi-icon {
    font-size: 1.2rem;
  }

  .sell-gold-page .sell-page-process {
    padding: 36px 0;
  }

  .sell-gold-page .sell-page-process .steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sell-gold-page .sell-page-process .step-card {
    padding: 18px 16px;
  }

  .sell-gold-page .sell-page-process .step-num {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .sell-gold-page .sell-page-process .step-card h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  .sell-gold-page .sell-page-process .step-card p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .sell-gold-page .sell-cta-band {
    padding: 8px 0 40px;
  }

  .sell-gold-page .sell-cta-band-inner {
    padding: 20px 16px;
    border-radius: 20px;
    gap: 18px;
  }

  .sell-gold-page .sell-cta-copy h2 {
    font-size: clamp(1.45rem, 6vw, 1.8rem);
    line-height: 1.25;
  }

  .sell-gold-page .sell-cta-copy > p,
  .sell-gold-page .sell-feature-card-eyebrow {
    font-size: 0.95rem !important;
    line-height: 1.5;
  }

  .sell-gold-page .hero-form-benefits li {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .sell-gold-page .sell-cta-stats .stat {
    min-width: 76px;
    flex: 1;
  }

  .sell-gold-page .sell-cta-stats .stat strong {
    font-size: 1.25rem;
  }

  .sell-gold-page .sell-cta-card {
    padding: 18px 16px;
  }

  .sell-gold-page .sell-cta-card .btn {
    min-height: 48px;
    font-size: 1rem;
  }

  .sell-gold-page .form-secure {
    font-size: 0.85rem;
  }

  .sell-gold-page .faq .section-header {
    margin-bottom: 18px;
  }

  .sell-gold-page .faq-question {
    font-size: 0.98rem;
    line-height: 1.4;
    padding: 16px 14px;
    text-align: left;
  }

  .sell-gold-page .faq-answer p {
    font-size: 0.94rem;
    line-height: 1.6;
    padding: 0 14px 16px;
  }

  .sell-gold-page .sticky-cta {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
}

/* Compact attractive footer */
.footer-compact {
  padding-top: 48px;
}

.footer-compact .footer-inner {
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
  align-items: start;
}

.footer-compact .footer-brand p {
  margin-top: 8px;
  max-width: 300px;
  font-size: 0.86rem;
}

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
}

.footer-trust span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 213, 160, 0.7);
}

.footer-trust span::before {
  content: '◆';
  margin-right: 6px;
  color: #c9a84c;
  font-size: 0.55rem;
}

.footer-contact-block {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(201, 168, 76, 0.26);
  box-shadow: inset 0 1px 0 rgba(243, 228, 168, 0.08);
  text-align: left;
  max-width: 280px;
}

.footer-contact-block .footer-branch-label {
  margin-bottom: 8px;
}

.footer-contact-lines {
  gap: 6px;
}

.footer-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(247, 236, 210, 0.9);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.footer-contact-line-icon {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.95;
}

.footer-contact-line:hover {
  color: #e8d5a0;
}

.footer-contact-line:hover .footer-contact-line-icon {
  color: #e8d5a0;
}

.footer-contact-lines .address-line {
  color: rgba(247, 236, 210, 0.9);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.footer-contact-lines .address-line:hover {
  color: #e8d5a0;
}

.footer-contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.footer-contact-chips-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer-contact-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.16), rgba(160, 124, 46, 0.08));
  border: 1px solid rgba(201, 168, 76, 0.42);
  color: #f3e4a8;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-contact-chips a:hover {
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.28), rgba(160, 124, 46, 0.14));
  border-color: #e8d5a0;
  color: #fff8e7;
}

.footer-branches-compact {
  display: grid;
  gap: 12px;
}

.footer-branches-compact .footer-branch + .footer-branch {
  margin-top: 0;
  padding-top: 12px;
}

.footer-compact .footer-address {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.footer-branches-compact .footer-branch {
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(201, 168, 76, 0.26);
  box-shadow: inset 0 1px 0 rgba(243, 228, 168, 0.08);
}

.footer-links-compact {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
}

.footer-links-compact > a {
  min-height: 40px !important;
  padding: 8px 10px !important;
  font-size: 0.8rem !important;
  border-left-color: rgba(201, 168, 76, 0.28) !important;
  border-radius: 0 8px 8px 0;
  background: rgba(201, 168, 76, 0.04);
}

.footer-links-compact > a:hover {
  background: rgba(201, 168, 76, 0.12);
}

@media (max-width: 768px) {
  .footer-compact .footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-bottom: 22px;
    text-align: center;
  }

  .footer-compact .footer-brand,
  .footer-compact .footer-address,
  .footer-compact .footer-links-col {
    max-width: none;
    width: 100%;
  }

  .footer-compact .footer-brand p {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-heading {
    justify-content: center;
  }

  .footer-heading::after {
    display: none;
  }

  .footer-contact-chips,
  .footer-contact-block,
  .footer-trust {
    justify-content: center;
  }

  .footer-contact-block {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
    text-align: center;
  }

  .footer-contact-block .footer-address-text {
    align-items: center;
  }

  .footer-branches-compact {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
  }

  .footer-branches-compact .footer-branch + .footer-branch {
    border-top: none;
    padding-top: 14px;
  }

  .footer-links-compact {
    text-align: left;
  }

  .footer-compact .footer-bottom {
    padding-top: 14px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 12px));
  }
}

/* ============================================
   Android + all-device width polish
   Matches iOS smoothness: viewport height, header,
   touch targets, no horizontal bleed
   ============================================ */
@media (max-width: 900px) {
  :root {
    --header-h: 56px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 56px;
    --touch-min: 44px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  body:has(.marquee-bar) .header {
    padding-top: 0;
  }

  .header-inner {
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0;
    align-items: center;
  }

  .logo-gold {
    color: var(--logo-gold-text) !important;
    -webkit-text-fill-color: var(--logo-gold-text) !important;
    background: none !important;
  }

  .jx-listing-bar,
  .product-nav-bar {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }

  .cart-drawer,
  .fav-drawer {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--app-height) !important;
    max-height: var(--app-height) !important;
  }

  .cart-item-qty button,
  .fav-btn,
  .cart-btn,
  .call-btn-header,
  .whatsapp-btn-header,
  .menu-toggle {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .jx-card-actions .btn,
  .jx-metal-filters .coins-filter {
    min-height: var(--touch-min);
  }

  /* Wider phones / foldables — keep 2-col shop readable */
  .jx-grid,
  .products-grid {
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .container {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .logo-name {
    letter-spacing: 1px;
  }

  .jx-card-actions .btn {
    font-size: 0.74rem;
    padding: 8px 8px;
  }
}

/* Coarse pointers (most phones): no sticky hover states */
@media (hover: none) and (pointer: coarse) {
  .gateway-method-card:hover,
  .jx-card:hover,
  .product-card:hover {
    transform: none;
  }

  .cart-item-qty button:hover {
    background: var(--white);
    color: var(--burgundy);
  }
}

/* ============================================
   Jewellery suite — elegant gold / silver boutique
   Unifies shop · bag · checkout · forms
   ============================================ */
.header {
  background: rgba(252, 250, 245, 0.92);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow: 0 8px 28px rgba(61, 15, 38, 0.05);
}

.header.scrolled {
  background: rgba(252, 250, 245, 0.96);
  box-shadow: 0 10px 32px rgba(61, 15, 38, 0.08);
}

.section-label {
  color: var(--teal);
  letter-spacing: 0.14em;
}

.section-header h2,
.shop-section-header h2 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  letter-spacing: 0.01em;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--jewel-gold-line);
  border-radius: 2px;
}

.section-header p {
  color: var(--text-muted);
}

.btn-primary {
  background: linear-gradient(135deg, #8f6b1f 0%, #c9a84c 42%, #e8d5a0 100%);
  color: #2a1420;
  border: 1px solid rgba(160, 124, 46, 0.35);
  letter-spacing: 0.04em;
  box-shadow: 0 10px 26px rgba(160, 124, 46, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #a07c2e 0%, #d4b85c 45%, #f3e4a8 100%);
  box-shadow: 0 14px 32px rgba(160, 124, 46, 0.34);
}

.btn-ghost {
  border: 1px solid var(--jewel-border);
  background: rgba(255, 253, 249, 0.9);
  color: var(--burgundy-dark);
}

.btn-ghost:hover {
  border-color: var(--jewel-border-strong);
  background: #fff9ef;
  color: var(--burgundy);
}

/* Shop cards */
.jx-card,
.product-card,
.coin-card {
  background: var(--jewel-card-bg) !important;
  border: 1px solid var(--jewel-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--jewel-card-shadow) !important;
}

.jx-card:hover,
.product-card:hover {
  border-color: var(--jewel-border-strong) !important;
  box-shadow: 0 20px 44px rgba(61, 15, 38, 0.12) !important;
  transform: translateY(-5px);
}

.jx-card-media {
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.16);
}

.jx-card-body h3,
.jx-card-title,
.product-card h3 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  letter-spacing: 0.01em;
}

.jx-price,
.product-price,
.coin-price {
  color: var(--burgundy-dark) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.jx-weight,
.coin-weight {
  border: 1px solid rgba(201, 168, 76, 0.32) !important;
  background: #fffdf9 !important;
  color: var(--burgundy-dark) !important;
  border-radius: 999px !important;
}

.jx-weight.active,
.jx-weight.is-active,
.coin-weight.active {
  background: linear-gradient(135deg, var(--burgundy-dark), var(--burgundy)) !important;
  color: #f5e6a8 !important;
  border-color: rgba(201, 168, 76, 0.55) !important;
}

/* Bag / cart drawer */
.cart-drawer,
.fav-drawer {
  background:
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(201, 168, 76, 0.12), transparent 55%),
    linear-gradient(180deg, #fcfaf5 0%, #f7f1e6 100%) !important;
}

.cart-drawer::before,
.fav-drawer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #7a5a18, #e8d5a0, #c9a84c, #e8d5a0, #7a5a18);
  pointer-events: none;
}

.cart-drawer-header,
.fav-drawer-header {
  background: linear-gradient(180deg, #fffdf9 0%, rgba(255, 252, 247, 0.96) 100%) !important;
  border-bottom: 1px solid var(--jewel-border) !important;
}

.cart-drawer-eyebrow {
  color: var(--gold-dark) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
}

.cart-drawer-heading h3,
.cart-drawer-header h3,
.fav-drawer-header h3 {
  font-family: var(--font-display) !important;
  color: var(--burgundy-dark) !important;
  letter-spacing: 0.02em;
}

.cart-item {
  background: var(--jewel-card-bg) !important;
  border: 1px solid var(--jewel-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(61, 15, 38, 0.05) !important;
}

.cart-item-name {
  font-family: var(--font-display);
  color: var(--burgundy-dark) !important;
}

.cart-item-price {
  color: var(--burgundy) !important;
  font-weight: 800 !important;
}

.cart-item-qty {
  border-color: rgba(201, 168, 76, 0.4) !important;
  background: linear-gradient(180deg, #fff 0%, #faf4ea 100%) !important;
}

.cart-bill {
  background: linear-gradient(165deg, #fffdf9 0%, #faf4ea 100%) !important;
  border: 1px solid var(--jewel-border) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(243, 228, 168, 0.35) !important;
}

.cart-bill-title {
  font-family: var(--font-display) !important;
  color: var(--gold-dark) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-size: 0.95rem !important;
}

.cart-total-grand {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 168, 76, 0.28);
}

.cart-total-grand span,
.cart-total-grand strong {
  font-family: var(--font-body) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: normal !important;
}

.cart-drawer-footer {
  background: linear-gradient(180deg, #fffdf9 0%, #f7f1e6 100%) !important;
  border-top: 1px solid var(--jewel-border) !important;
}

.cart-secure-note {
  color: rgba(160, 124, 46, 0.85) !important;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
}

.giva-coupon-strip {
  background: linear-gradient(135deg, #fffdf8 0%, #fff 55%, #f7f1e6 100%) !important;
  border: 1px dashed rgba(201, 168, 76, 0.6) !important;
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.05);
}

.giva-coupon-strip-copy strong {
  color: var(--burgundy-dark) !important;
}

.giva-coupon-applied {
  border-color: rgba(201, 168, 76, 0.4) !important;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.12), #fffdf9) !important;
}

.giva-coupon-applied-check {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)) !important;
}

.giva-offer {
  background: var(--jewel-pearl) !important;
  border: 1px solid var(--jewel-border) !important;
}

.giva-offer.is-selected {
  border-color: rgba(92, 26, 58, 0.35) !important;
  background: rgba(92, 26, 58, 0.04) !important;
}

.coupon-sheet {
  background: linear-gradient(180deg, #fffdf9 0%, #f7f1e6 100%) !important;
  border-top: 1px solid var(--jewel-border);
  box-shadow: 0 -18px 48px rgba(61, 15, 38, 0.18) !important;
}

.coupon-sheet-eyebrow {
  color: var(--gold-dark) !important;
  letter-spacing: 0.12em !important;
}

.coupon-sheet-header h3 {
  font-family: var(--font-display) !important;
  color: var(--burgundy-dark) !important;
}

.coupon-sheet-apply {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal)) !important;
}

/* Forms / modals */
.modal,
.checkout-modal,
.valuation-modal {
  background: var(--jewel-card-bg) !important;
  border: 1px solid var(--jewel-border) !important;
  box-shadow: 0 24px 64px rgba(61, 15, 38, 0.18) !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.phone-input {
  border-color: rgba(201, 168, 76, 0.28) !important;
  background: #fffdf9 !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.phone-input:focus-within {
  border-color: rgba(201, 168, 76, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.14) !important;
}

.service-card,
.feature-card,
.review-card,
.faq-item {
  background: var(--jewel-card-bg) !important;
  border: 1px solid var(--jewel-border) !important;
  box-shadow: var(--jewel-card-shadow) !important;
}

.marquee-bar {
  background:
    radial-gradient(ellipse 70% 48% at 8% -8%, rgba(201, 168, 76, 0.18), transparent 52%),
    radial-gradient(ellipse 55% 40% at 96% 4%, rgba(92, 26, 58, 0.08), transparent 50%),
    linear-gradient(180deg, #fcfaf5 0%, #f8f2e8 38%, #f3ebe0 100%);
  border-bottom: 1px solid var(--border);
  color: var(--burgundy-dark);
}

@media (hover: none) and (pointer: coarse) {
  .jx-card:hover,
  .product-card:hover {
    transform: none;
  }
}

/* ============================================
   Phone + tablet: coupon marquee + logo sticky
   Same stack as desktop (coupons ABOVE logo).
   Avoid overflow-x on html/body — it breaks sticky/fixed on mobile WebKit.
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --header-h: 64px;
    --marquee-h: calc(36px + env(safe-area-inset-top, 0px));
  }

  html,
  body {
    max-width: 100%;
    width: 100%;
  }

  body {
    padding-top: 0;
  }

  body:has(.marquee-bar) {
    padding-top: 0;
    --sticky-top-h: calc(var(--marquee-h) + var(--header-h));
  }

  .marquee-bar,
  body:has(.marquee-bar) .marquee-bar {
    position: sticky !important;
    top: 0 !important;
    left: auto;
    right: auto;
    width: 100%;
    z-index: 1102 !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 0 8px;
    min-height: var(--marquee-h);
    box-shadow: 0 2px 10px rgba(61, 15, 38, 0.06);
    overflow: hidden;
    display: block !important;
    visibility: visible !important;
  }

  .marquee-track {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 36px;
    animation: marquee-scroll 22s linear infinite !important;
    -webkit-animation: marquee-scroll 22s linear infinite !important;
    will-change: transform;
  }

  .marquee-track.is-js-marquee {
    animation: none !important;
    -webkit-animation: none !important;
  }

  .header,
  .product-page .header,
  .sell-gold-page .header,
  body.admin-body .header {
    position: sticky !important;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    z-index: 1100;
    height: var(--header-h);
    padding-top: 0;
    background: rgba(252, 250, 245, 0.98) !important;
    border-bottom: 1px solid rgba(201, 168, 76, 0.28);
    box-shadow: 0 8px 24px rgba(61, 15, 38, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body:not(:has(.marquee-bar)) .header {
    top: 0;
    padding-top: var(--safe-top);
    height: calc(var(--header-h) + var(--safe-top));
  }

  body:has(.marquee-bar) .header,
  body:has(.marquee-bar) .product-page .header,
  body:has(.marquee-bar) .sell-gold-page .header {
    top: var(--marquee-h) !important;
    z-index: 1101 !important;
    height: var(--header-h) !important;
    padding-top: 0 !important;
  }

  .header-inner {
    height: var(--header-h) !important;
    min-height: var(--header-h);
  }

  /* Logo sticky; cart only when bag has items */
  .header .logo {
    display: flex !important;
    min-width: 0;
  }

  .header .cart-btn.is-empty,
  body.cart-is-empty .header .cart-btn,
  .header .cart-btn {
    display: none !important;
  }

  body.cart-has-items .header .cart-btn {
    display: inline-flex !important;
  }

  .header .call-btn-header,
  .header .whatsapp-btn-header {
    display: none !important;
  }

  /* Sticky offsets under marquee + header */
  .shop-toolbar-sticky,
  .jx-toolbar,
  .product-nav-bar {
    top: var(--header-h) !important;
  }

  body:has(.marquee-bar) .shop-toolbar-sticky,
  body:has(.marquee-bar) .jx-toolbar,
  body:has(.marquee-bar) .product-nav-bar {
    top: calc(var(--marquee-h) + var(--header-h)) !important;
  }
}

/* ── Performance: snappier taps, smoother scroll ── */
.btn,
.jx-weight,
.coin-weight,
.coins-filter,
.jx-card-actions .jx-card-link,
.cart-btn,
.menu-toggle {
  touch-action: manipulation;
}

.jx-card {
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), border-color 0.2s ease;
}

.jx-card:hover {
  transform: translateY(-5px);
}

.jx-card-media img {
  transition: transform 0.3s var(--ease-out);
}

.jx-grid .jx-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.cart-drawer.open.is-animating-in {
  will-change: transform;
}

@media (max-width: 768px) {
  .header.scrolled,
  .cart-overlay,
  .modal-overlay,
  .checkout-modal,
  .coupon-sheet-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .jx-card:hover {
    transform: none;
  }

  .jx-card:hover .jx-card-media img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jx-card,
  .jx-card-media img,
  .cart-drawer,
  .cart-overlay {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Mobile shop: fixed marquee + header (iOS sticky fallback) */
.jx-sticky-stack-spacer {
  display: none;
  width: 100%;
  pointer-events: none;
}

@media (max-width: 768px) {
  body.jx-mobile-shop-sticky:has(.jx-category-sticky-bar) .jx-sticky-stack-spacer {
    display: block;
    height: var(--jx-mobile-stack-h, var(--sticky-top-h));
  }

  body.jx-mobile-shop-sticky:has(.jx-category-sticky-bar) .marquee-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1102 !important;
  }

  body.jx-mobile-shop-sticky:has(.jx-category-sticky-bar) .header {
    position: fixed !important;
    top: var(--marquee-h, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1101 !important;
    padding-top: 0 !important;
    height: var(--header-h) !important;
    background: rgba(255, 252, 247, 0.98) !important;
    border-bottom: none !important;
    box-shadow: none;
  }

  body.jx-mobile-shop-sticky.jx-cat-nav-stuck:has(.jx-category-sticky-bar) .header {
    border-bottom-color: transparent;
  }

  body.jx-mobile-shop-sticky:has(.jx-category-sticky-bar) .jx-category-sticky-bar {
    top: var(--jx-mobile-stack-h, var(--sticky-top-h)) !important;
    z-index: 1095 !important;
    margin-top: -2px;
  }

  body.jx-mobile-shop-sticky:has(.jx-category-sticky-bar) .jx-category-sticky-bar::before {
    top: -1px;
    background: rgba(255, 252, 247, 0.98);
    border-top: none;
  }

  body.jx-mobile-shop-sticky:has(.jx-category-sticky-bar) .header-inner {
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
  }
}

/* ============================================
   Desktop homepage fit — stop left/right shift
   across laptop & monitor widths
   ============================================ */
@media (min-width: 769px) {
  html {
    overflow-x: clip;
    scrollbar-gutter: stable;
  }

  body,
  body.home-page {
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
  }

  .header,
  .marquee-bar,
  .section,
  .store-hero,
  .jx-promo,
  .jx-store,
  .footer {
    max-width: 100%;
    overflow-x: clip;
  }

  .store-hero {
    overflow: hidden;
  }

  .store-hero-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(16px, 2.5vw, 40px);
  }

  .store-hero-copy,
  .store-hero-visual {
    min-width: 0;
    max-width: 100%;
  }

  .header .container,
  .store-hero .container,
  .jx-store > .container,
  .section > .container {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
  }

  /* Keep sticky category backdrop full-bleed but clipped by html overflow-x */
  .jx-category-sticky-bar {
    max-width: 100%;
  }

  .jx-plp,
  .jx-listing,
  .shop-catalog,
  .jx-catalog {
    max-width: 100%;
    min-width: 0;
  }

  .live-rates-sidebar {
    max-width: min(280px, 30vw);
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .nav {
    gap: 14px;
  }

  .nav a {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 8px 6px;
    white-space: nowrap;
  }

  .header-inner {
    gap: 10px;
  }

  .logo-tagline {
    display: none;
  }

  .store-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1280px;
  }

  .store-hero-inner {
    gap: 48px;
  }
}


/* ============================================
   Welcome Offers Popup — jewellery flyer
   ============================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.offers-popup-overlay.modal-overlay,
.offers-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30050 !important;
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px)) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(28, 12, 18, 0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.offers-popup-overlay.active,
.offers-popup-overlay.modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.offers-popup-modal--flyer {
  position: relative;
  width: min(380px, 100%);
  max-height: min(92dvh, 860px);
  overflow: hidden;
  border-radius: 4px;
  padding: 0;
  border: none;
  background: #fff;
  box-shadow: 0 28px 70px rgba(40, 12, 22, 0.35);
  animation: offersPopupIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes offersPopupIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .offers-popup-modal--flyer {
    animation: none !important;
  }
}

.offers-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #3a1a28;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(40, 12, 22, 0.18);
}

.offers-popup-flyer {
  margin: 0;
  padding: 0;
  max-height: min(92dvh, 860px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.offers-flyer {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 55% at 70% 8%, rgba(255, 210, 220, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 45% at 15% 90%, rgba(255, 236, 210, 0.5), transparent 50%),
    linear-gradient(180deg, #fff8f6 0%, #ffffff 42%, #fff7f2 100%);
}

.offers-flyer-hero {
  position: relative;
  width: 100%;
  min-height: 220px;
  max-height: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255, 210, 220, 0.45), transparent 55%),
    #f7ece8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offers-flyer-hero.is-empty {
  min-height: 52px;
  background: transparent;
}

.offers-flyer-hero img {
  width: 100%;
  height: auto;
  max-height: min(52vh, 460px);
  object-fit: contain;
  object-position: center center;
  display: block;
}

.offers-flyer-brand {
  position: absolute;
  top: 14px;
  right: 48px;
  z-index: 2;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 8px rgba(40, 12, 22, 0.35);
}

.offers-flyer-body {
  position: relative;
  padding: 18px 22px 22px;
  text-align: center;
}

.offers-flyer-use {
  margin: 0 0 10px;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #5c1a3a;
  letter-spacing: 0.02em;
}

.offers-flyer-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68%;
  margin: 0 auto 12px;
  padding: 10px 18px;
  border: 1.5px solid rgba(198, 140, 150, 0.85);
  background: rgba(255, 255, 255, 0.75);
  color: #2a141c;
  font-family: var(--font-body), sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.offers-flyer-code:hover,
.offers-flyer-code:focus-visible {
  background: #fff;
  border-color: #5c1a3a;
  outline: none;
}

.offers-flyer-deal {
  margin: 0 0 14px;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(1.65rem, 5vw, 2.05rem);
  font-weight: 700;
  line-height: 1.15;
  color: #5c1a3a;
}

.offers-flyer-desc {
  margin: -6px 0 16px;
  padding: 0 4px;
  font-family: var(--font-body), sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: #5a3a44;
}

.offers-flyer-shop {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto 10px;
  padding: 12px 20px;
  border: none;
  background: #5c1a3a;
  color: #fff;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.offers-flyer-shop:hover,
.offers-flyer-shop:focus-visible {
  background: #3d0f26;
  outline: none;
}

.offers-flyer-shop:active {
  transform: scale(0.98);
}

.offers-flyer-valid {
  margin: 0 0 12px;
  font-size: 0.72rem;
  color: #8a6a72;
  text-align: right;
  font-style: italic;
}

.offers-flyer-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
}

.offers-flyer-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(92, 26, 58, 0.25);
  cursor: pointer;
}

.offers-flyer-dot.is-active {
  background: #5c1a3a;
}

.offers-copy-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 30100;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(61, 15, 38, 0.94);
  color: #fff8e7;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(28, 16, 20, 0.28);
  border: 1px solid rgba(201, 168, 76, 0.45);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.offers-copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 640px) {
  .offers-popup-modal--flyer {
    width: min(100%, 400px);
    max-height: min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px));
  }

  .offers-flyer-hero {
    min-height: 180px;
  }

  .offers-flyer-hero img {
    max-height: min(44vh, 380px);
  }

  .offers-flyer-body {
    padding: 14px 16px 18px;
  }

  .offers-flyer-deal {
    font-size: 1.55rem;
  }
}


/* ============================================
   Homepage — calm jewellery boutique
   Soft contrast, easy reading, less clutter
   ============================================ */
body.home-page {
  background: #ffffff;
  color: #3a2a30;
}

body.home-page .marquee-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  color: var(--burgundy-dark);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

body.home-page .marquee-coupon {
  color: var(--burgundy-dark);
}

body.home-page .marquee-coupon strong {
  color: var(--gold-dark);
}

body.home-page .header {
  background: rgba(255, 252, 246, 0.94);
  border-bottom-color: rgba(201, 168, 76, 0.2);
  box-shadow: 0 6px 20px rgba(61, 15, 38, 0.04);
}

/* Hero: quieter, brand-first, eye-easy */
body.home-page .store-hero {
  padding: clamp(24px, 4vw, 48px) 0 clamp(36px, 6vw, 64px);
}

body.home-page .store-hero-bg {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(201, 168, 76, 0.14), transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(92, 26, 58, 0.05), transparent 45%),
    linear-gradient(180deg, #fffdf8 0%, #f8f0e4 100%) !important;
}

body.home-page .store-hero-sparkles,
body.home-page .store-hero-glow {
  opacity: 0.35;
}

body.home-page .store-hero-eyebrow {
  color: var(--gold-dark, #a07c2e);
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.72rem;
}

body.home-page .store-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5.2vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--burgundy-dark);
  max-width: 11ch;
}

body.home-page .store-hero-copy h1 em {
  font-style: italic;
  color: #8a6a28;
  font-weight: 600;
}

body.home-page .store-hero-copy > p {
  max-width: 34ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #6a5a62;
}

body.home-page .store-hero-actions {
  gap: 12px;
  margin-top: 8px;
}

body.home-page .store-hero-actions .btn {
  min-height: 48px;
  border-radius: 12px;
  padding-inline: 22px;
}

body.home-page .store-hero-trust {
  gap: 14px 22px;
  margin-top: 18px;
}

body.home-page .store-hero-trust li {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5c1a3a;
  border-left-color: rgba(201, 168, 76, 0.75);
}

body.home-page .store-hero-visual,
body.home-page .store-hero-coin-stage {
  border-radius: 22px;
}

body.home-page .store-hero-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Soft ivory shop intro (replace harsh dark promo) */
body.home-page .jx-promo {
  color: var(--burgundy-dark) !important;
  margin: 0 0 18px !important;
  padding: 28px 0 22px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

body.home-page .jx-promo::before {
  background: linear-gradient(90deg, transparent, #c9a84c, #e8d5a0, #c9a84c, transparent) !important;
  box-shadow: none !important;
  opacity: 0.85;
}

body.home-page .jx-promo::after {
  opacity: 0.03 !important;
}

body.home-page .jx-promo-eyebrow {
  display: block !important;
  color: var(--gold-dark, #a07c2e) !important;
}

body.home-page .jx-promo-copy h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.55rem, 3vw, 2.1rem) !important;
  color: var(--burgundy-dark) !important;
  letter-spacing: -0.015em;
  white-space: normal !important;
}

body.home-page .jx-promo-lead,
body.home-page .jx-promo-copy p {
  display: block !important;
  margin: 6px 0 0;
  color: #6a5a62 !important;
  font-size: 0.95rem !important;
  line-height: 1.55;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Shop breathing room */
body.home-page .jx-store.shop-section {
  padding-bottom: 28px;
}

body.home-page .jx-grid,
body.home-page .shop-catalog .jx-grid {
  gap: 18px !important;
}

body.home-page .jx-card {
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(61, 15, 38, 0.05) !important;
}

body.home-page .jx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(61, 15, 38, 0.09) !important;
}

body.home-page .jx-card-body h3,
body.home-page .jx-card-title {
  font-size: 1.05rem;
  line-height: 1.3;
}

body.home-page .jx-category-sticky-bar {
  background: #ffffff;
  border-color: rgba(201, 168, 76, 0.2);
}

body.home-page .jx-catalog-block {
  background: #ffffff;
  border-color: rgba(201, 168, 76, 0.3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 42px rgba(61, 15, 38, 0.055);
}

body.home-page .jx-catalog-section-title {
  color: #3d0f26;
  font-weight: 700;
}

body.home-page .jx-catalog-section-desc {
  color: #6a5a62;
  font-weight: 500;
}

body.home-page .jx-catalog-sections {
  gap: 32px;
}

body.home-page .jx-catalog-block-body .jx-card {
  border-radius: 14px !important;
}

/* Sections: calm rhythm */
body.home-page .section {
  padding: clamp(40px, 6vw, 72px) 0;
}

body.home-page .section-header {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(22px, 4vw, 34px);
}

body.home-page .section-label {
  color: var(--gold-dark, #a07c2e) !important;
  letter-spacing: 0.16em;
}

body.home-page .section-header h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: 8px;
}

body.home-page .section-header h2::after {
  margin-top: 14px;
  width: 48px;
  background: linear-gradient(90deg, #c9a84c, #e8d5a0);
}

body.home-page .section-header p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #6a5a62;
}

/* Reviews: softer cards, less noise */
body.home-page .reviews {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.5), rgba(247, 240, 228, 0.65));
}

body.home-page .review-card {
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(61, 15, 38, 0.04);
  background: #fffdf9;
}

body.home-page .review-card-glow {
  display: none;
}

body.home-page .review-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4a3a42;
}

body.home-page .reviews-grid--six {
  gap: 14px;
}

@media (max-width: 900px) {
  body.home-page .reviews-grid--six .review-card:nth-child(n + 4) {
    display: none;
  }
}

/* Why us / services: simple, no emoji clutter */
body.home-page .features-grid--calm {
  gap: 14px;
}

body.home-page .feature-card,
body.home-page .service-card {
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #fffaf2 100%);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.04);
  padding: 22px 20px;
}

body.home-page .feature-card:hover,
body.home-page .service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(61, 15, 38, 0.07);
}

body.home-page .feature-icon,
body.home-page .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 14px;
  border-radius: 14px;
  font-size: 0 !important;
  line-height: 0;
  color: var(--burgundy-dark, #3d0f26);
  background:
    linear-gradient(165deg, #fffdf8 0%, #f7ecd2 100%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  box-shadow:
    0 6px 14px rgba(61, 15, 38, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.home-page .feature-icon svg,
body.home-page .service-icon svg {
  display: block;
  color: #8a6a28;
  stroke: currentColor;
}

body.home-page .feature-card:hover .feature-icon,
body.home-page .service-card:hover .service-icon {
  color: var(--burgundy-dark, #3d0f26);
  background: linear-gradient(165deg, #fff8e7 0%, #efd9a0 100%);
  border-color: rgba(160, 124, 46, 0.55);
}

body.home-page .feature-card:hover .feature-icon svg,
body.home-page .service-card:hover .service-icon svg {
  color: #6b4f1c;
}

body.home-page .feature-card h3,
body.home-page .service-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--burgundy-dark);
  margin: 0 0 6px;
}

body.home-page .feature-card p,
body.home-page .service-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #6a5a62;
  margin: 0;
}

body.home-page .service-card ul {
  margin-top: 12px;
  padding-left: 1.1rem;
  color: #5a4a52;
  font-size: 0.88rem;
  line-height: 1.55;
}

body.home-page .service-card li + li {
  margin-top: 4px;
}

body.home-page .why-us,
body.home-page .services {
  background: transparent;
}

body.home-page .footer {
  margin-top: 12px;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
}

@media (max-width: 768px) {
  body.home-page .store-hero-copy h1 {
    max-width: none;
    font-size: clamp(2rem, 8.5vw, 2.55rem);
  }

  body.home-page .store-hero-copy > p {
    font-size: 0.95rem;
    max-width: none;
  }

  body.home-page .jx-promo {
    padding: 22px 0 18px !important;
    margin-bottom: 12px !important;
  }

  body.home-page .section {
    padding: 36px 0;
  }

  body.home-page .features-grid--calm {
    grid-template-columns: 1fr;
  }

  body.home-page .features-grid--calm .feature-card:nth-child(n + 4) {
    display: none;
  }

  body.home-page .feature-card,
  body.home-page .service-card {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .store-hero-sparkles,
  body.home-page .store-hero-glow,
  body.home-page .store-hero-glow--pulse {
    animation: none !important;
    opacity: 0.2;
  }
}


/* ============================================
   Sell gold page — calm, simple, easy to read
   ============================================ */
body.sell-gold-page {
  background: #ffffff;
  color: #3a2a30;
}

body.sell-gold-page .header {
  background: rgba(255, 252, 246, 0.95);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 0 6px 20px rgba(61, 15, 38, 0.04);
}

body.sell-gold-page .sell-banner.sell-hero--animated,
body.sell-gold-page .sell-banner {
  isolation: isolate;
}

body.sell-gold-page .sell-hero-glow,
body.sell-gold-page .sell-sparkle-canvas {
  opacity: 0.4;
}

body.sell-gold-page .sell-banner-eyebrow {
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--gold-dark, #a07c2e);
  background: rgba(255, 252, 246, 0.75);
  border: 1px solid rgba(201, 168, 76, 0.35);
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-block;
}

body.sell-gold-page .sell-banner-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--burgundy-dark);
  max-width: 16ch;
  text-wrap: balance;
}

body.sell-gold-page .sell-banner-content h1 em {
  font-style: italic;
  color: #8a6a28;
  font-weight: 600;
}

body.sell-gold-page .sell-banner-content > p {
  max-width: 38ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #5a4a52;
}

body.sell-gold-page .sell-banner-trust {
  gap: 10px 16px;
}

body.sell-gold-page .sell-banner-trust li {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--burgundy-dark);
  background: rgba(255, 252, 246, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 999px;
  padding: 7px 12px;
}

body.sell-gold-page .sell-price-callout {
  padding: 28px 0 8px;
}

body.sell-gold-page .sell-price-callout-inner {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
  padding: 22px 20px;
  border-radius: 20px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: linear-gradient(165deg, #ffffff 0%, #fff8ec 55%, #f3e7d0 100%);
  box-shadow: 0 12px 28px rgba(61, 15, 38, 0.05);
}

body.sell-gold-page .sell-price-kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark, #a07c2e);
}

body.sell-gold-page .sell-price-callout-inner h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  color: var(--burgundy-dark);
  line-height: 1.2;
}

body.sell-gold-page .sell-price-callout-inner p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #6a5a62;
}

body.sell-gold-page .sell-page-section,
body.sell-gold-page .sell-page-process.section {
  padding: clamp(36px, 5vw, 64px) 0;
}

body.sell-gold-page .sell-section-head,
body.sell-gold-page .section-header {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  text-align: center;
}

body.sell-gold-page .section-label,
body.sell-gold-page .sell-section-head .section-label {
  color: var(--gold-dark, #a07c2e) !important;
  letter-spacing: 0.14em;
}

body.sell-gold-page .sell-section-head h2,
body.sell-gold-page .section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  color: var(--burgundy-dark);
  line-height: 1.2;
  margin: 6px 0 8px;
}

body.sell-gold-page .sell-section-head p,
body.sell-gold-page .section-header p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #6a5a62;
}

body.sell-gold-page .sell-highlights-grid {
  gap: 12px;
}

body.sell-gold-page .sell-highlights-grid article {
  border: 1px solid rgba(201, 168, 76, 0.24);
  border-radius: 18px;
  background: linear-gradient(165deg, #fff 0%, #fffaf2 100%);
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.04);
  padding: 18px 16px;
}

body.sell-gold-page .sell-hi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 12px;
  font-size: 0;
  color: #8a6a28;
  background: linear-gradient(165deg, #fffdf8 0%, #f7ecd2 100%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  box-shadow:
    0 6px 14px rgba(61, 15, 38, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.sell-gold-page .sell-hi-icon svg {
  display: block;
  color: inherit;
}

body.sell-gold-page .sell-highlights-grid strong {
  display: block;
  font-size: 1.05rem;
  color: var(--burgundy-dark);
  margin-bottom: 4px;
}

body.sell-gold-page .sell-highlights-grid span:not(.sell-hi-icon) {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #6a5a62;
}

body.sell-gold-page .step-card {
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 8px 20px rgba(61, 15, 38, 0.04);
}

body.sell-gold-page .step-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--burgundy-dark);
}

body.sell-gold-page .step-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #6a5a62;
}

body.sell-gold-page .sell-cta-band {
  background: linear-gradient(180deg, rgba(255, 249, 239, 0.7), rgba(243, 231, 210, 0.55));
}

body.sell-gold-page .sell-cta-copy h2 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
  line-height: 1.2;
}

body.sell-gold-page .sell-cta-copy > p,
body.sell-gold-page .hero-form-benefits li {
  color: #5a4a52;
  line-height: 1.55;
}

body.sell-gold-page .sell-cta-card {
  border-radius: 20px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: #fffdf9;
  box-shadow: 0 14px 32px rgba(61, 15, 38, 0.07);
}

body.sell-gold-page .sell-guide-card {
  border-radius: 20px;
  border: 1px solid rgba(201, 168, 76, 0.24);
  background: linear-gradient(165deg, #fff 0%, #fffaf2 100%);
  box-shadow: 0 10px 26px rgba(61, 15, 38, 0.05);
}

body.sell-gold-page .sell-guide-card h3 {
  font-family: var(--font-display);
  color: var(--burgundy-dark);
}

body.sell-gold-page .sell-guide-card p,
body.sell-gold-page .sell-guide-points {
  color: #5a4a52;
  line-height: 1.55;
}

body.sell-gold-page .faq-question {
  font-size: 1rem;
  font-weight: 700;
  color: var(--burgundy-dark);
  line-height: 1.4;
}

body.sell-gold-page .faq-answer p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5a4a52;
}

body.sell-gold-page .faq-item {
  border-color: rgba(201, 168, 76, 0.22);
  background: #fffdf9;
  border-radius: 14px;
}

body.sell-gold-page .sticky-cta {
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  body.sell-gold-page .sell-banner-content h1 {
    max-width: none;
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
  }

  body.sell-gold-page .sell-banner-content > p {
    font-size: 0.95rem;
    max-width: none;
  }

  body.sell-gold-page .sell-banner-trust {
    flex-wrap: wrap;
  }

  body.sell-gold-page .sell-price-callout-inner {
    padding: 18px 14px;
    text-align: left;
  }

  body.sell-gold-page .sell-highlights-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sell-gold-page .sell-hero-glow,
  body.sell-gold-page .sell-sparkle-canvas,
  body.sell-gold-page .sell-coin-3d-inner {
    animation: none !important;
    opacity: 0.25;
  }
}


/* ============================================
   Social links — Facebook / Instagram (all pages)
   ============================================ */
.pmj-social-links {
  margin-top: 16px;
  max-width: 280px;
}

.pmj-social-links[hidden] {
  display: none !important;
}

.pmj-social-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 213, 160, 0.85);
}

.pmj-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pmj-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: rgba(255, 252, 246, 0.08);
  color: #f7ecd2;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.pmj-social-btn[hidden] {
  display: none !important;
}

.pmj-social-btn:hover {
  transform: translateY(-1px);
  color: #fff;
}

.pmj-social-facebook:hover {
  background: rgba(24, 119, 242, 0.22);
  border-color: rgba(24, 119, 242, 0.55);
}

.pmj-social-instagram:hover {
  background: rgba(193, 53, 132, 0.22);
  border-color: rgba(193, 53, 132, 0.55);
}

.pmj-social-btn svg {
  flex-shrink: 0;
}

.checkout-footer .pmj-social-links,
.account-footer .pmj-social-links {
  margin: 12px auto 0;
  max-width: none;
  text-align: center;
}

.checkout-footer .pmj-social-label,
.account-footer .pmj-social-label {
  color: var(--gold-dark, #a07c2e);
}

.checkout-footer .pmj-social-row,
.account-footer .pmj-social-row {
  justify-content: center;
}

.checkout-footer .pmj-social-btn,
.account-footer .pmj-social-btn {
  color: var(--burgundy-dark, #3d0f26);
  background: #fffdf9;
  border-color: rgba(201, 168, 76, 0.35);
}

@media (max-width: 640px) {
  .pmj-social-btn span {
    font-size: 0.78rem;
  }
}