/* ============================================================
   GemstoneSafe - consolidated stylesheet
   Canonical chrome (header/modals/cart/footer) from index.html;
   page-specific sections are ID-scoped (no collisions).
   ============================================================ */

/* --- Navigation font (Gantari) --- */
    /* Navigation uses Gantari */
    #siteHeader, #mobileNavDrawer { font-family: 'Gantari', system-ui, sans-serif; }

/* === Base helpers + HOMEPAGE sections + canonical CHROME (from index.html) === */
    .hero-dm-sans {
      font-family: 'Gantari', sans-serif;
    }

    .footer-social-icon {
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    @font-face {
      font-family: "customfont";
      src: url(../font/the-youngest-serif-display.ttf);
    }

    /* Uniform heading style — hero <h1> + every section heading */
    .gs-heading {
      font-family: "customfont", Georgia, "Times New Roman", serif;
      font-weight: 400;
      line-height: 1.05;
      font-size: 2.5rem;
    }
    @media (min-width: 640px) {
      .gs-heading { font-size: 3rem; }
    }
    @media (min-width: 1024px) {
      .gs-heading { font-size: 3.4rem; }
    }

    /* Hero carousel — Glide.js mounts on #heroCarousel; .glide__track/.glide__slides need an
       explicit height since Glide's core CSS only sizes .glide__slide, not its ancestors. */
    #heroCarousel .glide__track,
    #heroCarousel .glide__slides {
      height: 100%;
    }

    /* Hero carousel dots (Glide bullets) — CSS so states work without relying on Tailwind JIT in JS */
    #heroCarousel .hero-carousel-dot {
      box-sizing: border-box;
      width: 10px;
      height: 10px;
      padding: 0;
      border-radius: 9999px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
      background-color: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(0, 0, 0, 0.22);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(2px);
    }
    #heroCarousel .hero-carousel-dot.glide__bullet--active {
      background-color: #e0bb7f;
      border-color: #c49a50;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 2px 10px rgba(0, 0, 0, 0.2);
      transform: scale(1.08);
    }
    @media (prefers-reduced-motion: reduce) {
      #heroCarousel .hero-carousel-dot {
        transition: none;
      }
      #heroCarousel .hero-carousel-dot.glide__bullet--active {
        transform: none;
      }
    }
    #heroCarousel .hero-carousel-dot:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px;
    }

    /* Hero carousel — mobile: compact height, bottom-anchored content, readable overlay */
    @media (max-width: 1023px) {
      #heroCarousel {
        height: min(
          calc(90dvh - var(--site-header-h, 7.5rem)),
          calc(100dvh - var(--site-header-h, 7.5rem) - 2.75rem)
        );
        min-height: 22rem;
        max-height: 38rem;
      }
      #heroCarousel .hero-slide-shell {
        align-items: flex-end;
        justify-content: center;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
      }
      #heroCarousel .hero-slide-content {
        max-width: 20rem;
      }
      #heroCarousel .hero-slide-content .hero-slide-logo-wrap {
        margin-bottom: 0.5rem;
      }
      #heroCarousel .hero-slide-content .hero-slide-logo-wrap img {
        height: 2rem;
        width: auto;
        max-width: 11rem;
      }
      #heroCarousel .hero-slide-content h1 {
        font-size: 1.45rem;
        line-height: 1.08;
        letter-spacing: -0.025em;
      }
      #heroCarousel .hero-slide-content .hero-highlight {
        margin-top: 0.35rem;
        font-size: 1.35rem;
        line-height: 1.05;
        letter-spacing: -0.02em;
      }
      #heroCarousel .hero-slide-content .hero-description {
        margin-top: 0.65rem;
        max-width: 17rem;
        font-size: 0.8125rem;
        line-height: 1.65;
      }
      #heroCarousel .hero-slide-content .hero-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.2em;
      }
      #heroCarousel .hero-slide-actions {
        margin-top: 0.75rem;
        gap: 0.5rem;
      }
      #heroCarousel .hero-slide-actions a {
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
        font-size: 0.625rem;
        letter-spacing: 0.18em;
      }
      #heroCarousel [data-variant] > .hero-slide-overlay {
        background: linear-gradient(
          to top,
          rgba(18, 15, 11, 0.92) 0%,
          rgba(18, 15, 11, 0.55) 42%,
          rgba(18, 15, 11, 0.15) 100%
        ) !important;
      }
      #heroCarousel .glide__bullets {
        display: none !important;
      }
    }

    /* Showcase hero — icon filters + hero price font */
    #showcaseGridSection .gemstone-price {
      font-family: Arial, 'Arial Unicode MS', sans-serif;
    }
    #showcaseGridSection .icon-bold {
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    #showcaseGridSection .icon-filter-gold {
      filter: invert(73%) sepia(42%) saturate(362%) hue-rotate(355deg) brightness(96%) contrast(90%);
    }
    #showcaseGridSection .icon-filter-gray {
      filter: grayscale(1) opacity(0.75);
    }

    /* Showcase hero — hero gem image only */
    #showcaseGridSection .showcase-hero-gem {
      max-height: min(38vh, 320px);
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center;
      position: relative;
      z-index: 1;
    }
    #showcaseGridSection .showcase-hero-icon-white {
      filter: brightness(0) invert(1);
      opacity: 0.92;
    }
    /* Showcase product carousel — gold outline arrows only */
    #showcaseGridSection .showcase-carousel-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 9999px;
      border: 1px solid rgba(224, 187, 127, 0.72);
      background: transparent;
      color: #e0bb7f;
      box-shadow: none;
      cursor: pointer;
      transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease, opacity 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    #showcaseGridSection .showcase-carousel-arrow:hover:not(:disabled) {
      border-color: #e0bb7f;
      color: #f2d9a8;
      background: rgba(224, 187, 127, 0.06);
    }
    #showcaseGridSection .showcase-carousel-arrow:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    #showcaseGridSection .showcase-carousel-arrow:focus-visible {
      outline: 2px solid rgba(224, 187, 127, 0.9);
      outline-offset: 2px;
    }
    .market-icon-gold {
      filter: invert(76%) sepia(29%) saturate(551%) hue-rotate(357deg) brightness(95%) contrast(92%);
    }
    .market-icon-blue {
      filter: brightness(0) saturate(100%) invert(52%) sepia(17%) saturate(1140%) hue-rotate(181deg) brightness(92%) contrast(89%);
    }
    .market-icon-white {
      filter: brightness(0) invert(1);
      opacity: 0.92;
    }
    #showcaseGridSection {
      position: relative;
      overflow: hidden;
      background-color: #faf8f4;
    }
    #showcaseGridSection::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("../images/ui/featured_bg.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    #showcaseGridSection > * {
      position: relative;
      z-index: 1;
    }
    #showcaseGridSection #showcase-layout-heading {
      font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
      font-weight: 400;
    }
    #showcaseGridSection .showcase-heading-divider {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 19.5rem;
      padding-top: 0.75rem;
      padding-bottom: 0.85rem;
    }
    #showcaseGridSection .showcase-heading-divider__line {
      flex: 1 1 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(224, 187, 127, 0.15) 0%,
        rgba(224, 187, 127, 0.62) 50%,
        rgba(224, 187, 127, 0.15) 100%
      );
    }
    #showcaseGridSection .showcase-heading-divider__diamond {
      flex-shrink: 0;
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.4rem;
      transform: rotate(45deg);
      border: 1px solid rgba(224, 187, 127, 0.75);
      background: rgba(224, 187, 127, 0.14);
      box-shadow: 0 0 10px rgba(224, 187, 127, 0.12);
    }
    @media (min-width: 640px) {
      #showcaseGridSection .showcase-heading-divider {
        padding-top: 0.85rem;
        padding-bottom: 1rem;
      }
    }
    #showcaseGridSection .showcase-rail-shell {
      width: 100%;
      margin-top: 1.5rem;
      padding: 0.5rem 0 1.25rem;
      overflow: visible;
    }
    @media (min-width: 1024px) {
      #showcaseGridSection .showcase-rail-shell {
        margin-top: 2rem;
        padding: 0.75rem 0 1.5rem;
      }
    }
    #showcaseGridSection .showcase-coverflow {
      width: 100%;
      overflow: hidden;
    }
    #showcaseGridSection .showcase-coverflow__shell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 0.65rem;
      padding: 0;
    }
    #showcaseGridSection .showcase-coverflow__shell .showcase-coverflow__stage {
      flex: 1 1 0;
      min-width: 0;
    }
    #showcaseGridSection .showcase-coverflow__measure {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
    }
    #showcaseGridSection .showcase-coverflow-arrow {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      z-index: 5;
      flex-shrink: 0;
      transform: none;
      align-self: center;
    }
    #showcaseGridSection .showcase-coverflow__stage {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-height: clamp(21rem, 34vw, 27rem);
      margin: 0 auto;
      overflow: hidden;
      padding: 0.75rem 0 0.5rem;
      --showcase-slide-w: 248px;
      --showcase-slide-gap: 218px;
    }
    @media (min-width: 768px) {
      #showcaseGridSection .showcase-coverflow__stage {
        --showcase-slide-w: 268px;
        --showcase-slide-gap: 232px;
      }
    }
    @media (min-width: 1024px) {
      #showcaseGridSection .showcase-coverflow__stage {
        --showcase-slide-w: 288px;
        --showcase-slide-gap: 248px;
        min-height: clamp(22rem, 36vw, 29rem);
      }
    }
    @media (min-width: 1280px) {
      #showcaseGridSection .showcase-coverflow__stage {
        --showcase-slide-w: 304px;
        --showcase-slide-gap: 262px;
        min-height: clamp(23rem, 38vw, 30rem);
      }
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card {
      border-radius: 1.15rem;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__media {
      aspect-ratio: 1 / 1;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__media img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card > .flex.flex-1.flex-col {
      flex: 0 0 auto;
      padding: 0.68rem 0.58rem 0.56rem !important;
    }
    #showcaseGridSection .showcase-coverflow .is-showcase-active .showcase-dark-card > .flex.flex-1.flex-col {
      padding: 0.7rem 0.6rem 0.58rem !important;
    }
    #showcaseGridSection .showcase-coverflow .is-showcase-adjacent .showcase-dark-card > .flex.flex-1.flex-col,
    #showcaseGridSection .showcase-coverflow .is-showcase-distant .showcase-dark-card > .flex.flex-1.flex-col {
      padding: 0.64rem 0.52rem 0.54rem !important;
    }
    #showcaseGridSection .showcase-coverflow .is-showcase-rail-after .showcase-dark-card > .flex.flex-1.flex-col {
      padding-left: 0.48rem !important;
      padding-right: 0.46rem !important;
    }
    #showcaseGridSection .showcase-coverflow .is-showcase-adjacent .showcase-dark-card > .flex .mt-4,
    #showcaseGridSection .showcase-coverflow .is-showcase-distant .showcase-dark-card > .flex .mt-4 {
      gap: 0.35rem !important;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card h4 {
      font-size: 1.08rem !important;
      line-height: 1.25;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card > .flex .mt-4 {
      margin-top: 0.5rem !important;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card > .flex .font-serif.leading-none {
      font-size: 1.32rem !important;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card > .flex a.shrink-0 {
      font-size: 0.65rem !important;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__divider {
      margin-top: 0.45rem !important;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__footer-cell {
      padding-top: 0.15rem;
      padding-bottom: 0.15rem;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__action {
      height: 2rem;
      width: 2rem;
    }
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__action img,
    #showcaseGridSection .showcase-coverflow .showcase-dark-card__action .h-4 {
      height: 0.85rem !important;
      width: 0.85rem !important;
    }
    @media (max-width: 767px) {
      #showcaseGridSection .showcase-rail-shell {
        margin-top: 1.25rem;
        padding-top: 0.3rem;
      }
      #showcaseGridSection .showcase-coverflow__stage {
        --showcase-slide-w: min(54vw, 248px);
        --showcase-slide-gap: min(50vw, 218px);
        min-height: clamp(19rem, 52vw, 24rem);
      }
      #showcaseGridSection .showcase-rail-shell {
        padding-bottom: 1rem;
      }
    }
    #showcaseGridSection .showcase-coverflow__track {
      position: relative;
      width: 100%;
      min-height: inherit;
    }
    #showcaseGridSection .showcase-coverflow__slide {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--showcase-slide-w);
      max-width: 100%;
      transform-origin: center center;
      transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
      will-change: transform, opacity;
      pointer-events: none;
    }
    #showcaseGridSection .showcase-coverflow__slide.is-showcase-active,
    #showcaseGridSection .showcase-coverflow__slide.is-showcase-adjacent {
      pointer-events: auto;
    }
    #showcaseGridSection .showcase-coverflow__slide.is-showcase-hidden {
      pointer-events: none !important;
    }
    #showcaseGridSection .is-showcase-active .showcase-dark-card {
      box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.42),
        0 0 20px rgba(224, 187, 127, 0.12);
      border-color: rgba(224, 187, 127, 0.45);
    }
    #showcaseGridSection .showcase-dark-card {
      border-radius: 1.55rem;
      border: 1px solid rgba(224, 187, 127, 0.2);
      background: #0a0a0a;
      box-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
    }
    #showcaseGridSection .showcase-coverflow__slide .showcase-dark-card__media {
      aspect-ratio: 1 / 1;
    }
    #showcaseGridSection .showcase-dark-card__media {
      display: block;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: linear-gradient(180deg, #141210 0%, #0a0a0a 100%);
    }
    #showcaseGridSection .showcase-dark-card__media img {
      transition: transform 0.5s ease;
    }
    #showcaseGridSection .showcase-dark-card:hover .showcase-dark-card__media img {
      transform: scale(1.04);
    }
    #showcaseGridSection .showcase-dark-card__divider {
      height: 1px;
      background: linear-gradient(90deg, rgba(224, 187, 127, 0) 0%, rgba(224, 187, 127, 0.45) 50%, rgba(224, 187, 127, 0) 100%);
    }
    #showcaseGridSection .showcase-dark-card__footer {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(0, 0, 0, 0.4);
    }
    #showcaseGridSection .showcase-dark-card__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 2.25rem;
      width: 2.25rem;
      border-radius: 9999px;
      border: 1px solid rgba(224, 187, 127, 0.35);
      background: rgba(255, 255, 255, 0.04);
      color: #d0aa66;
      transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
    }
    #showcaseGridSection .showcase-dark-card__action:hover {
      transform: translateY(-1px);
      border-color: rgba(224, 187, 127, 0.75);
      background: rgba(224, 187, 127, 0.1);
    }
    #showcaseGridSection .showcase-hero-composite {
      display: flex;
      width: 100%;
      min-height: 0;
      flex-direction: column;
      gap: 0;
      align-items: stretch;
      overflow: hidden;
      border-radius: 1rem;
      border: 1px solid rgba(224, 187, 127, 0.22);
      box-shadow: 0 20px 44px rgba(0, 0, 0, 0.36);
    }
    @media (min-width: 1024px) {
      #showcaseGridSection .showcase-hero-composite {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(268px, 310px);
        align-items: stretch;
        gap: 0;
      }
    }
    #showcaseGridSection .showcase-hero-stage {
      position: relative;
      display: flex;
      min-height: 0;
      min-width: 0;
      height: 100%;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
    }
    #showcaseGridSection .showcase-hero-stage__velvet {
      position: relative;
      display: flex;
      width: 100%;
      flex: 1 1 auto;
      min-height: clamp(14.5rem, 30vw, 18.5rem);
      height: 100%;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 0;
      background:
        radial-gradient(ellipse 70% 58% at 50% 42%, rgba(224, 187, 127, 0.22) 0%, rgba(224, 187, 127, 0.05) 42%, transparent 72%),
        linear-gradient(165deg, #141210 0%, #0a0a0a 48%, #12100e 100%);
      box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.48);
    }
    @media (min-width: 1024px) {
      #showcaseGridSection .showcase-hero-stage__velvet {
        min-height: 100%;
      }
    }
    #showcaseGridSection .showcase-hero-stage__inner {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      min-height: inherit;
      flex: 1 1 auto;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
    }
    #showcaseGridSection .showcase-hero-stage__gem {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: stretch;
      justify-content: stretch;
    }
    #showcaseGridSection .showcase-hero-stage__gem img,
    #showcaseGridSection .showcase-hero-stage__gem .showcase-hero-gem {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: cover;
      object-position: center;
    }
    #showcaseGridSection .showcase-hero-stage__velvet::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        108deg,
        transparent 38%,
        rgba(224, 187, 127, 0.14) 50%,
        transparent 62%
      );
      opacity: 0;
      transform: translateX(-120%);
    }
    @keyframes showcaseHeroFilmSweep {
      0% {
        opacity: 0;
        transform: translateX(-120%);
      }
      35% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateX(120%);
      }
    }
    @keyframes showcaseHeroGemOut {
      0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0) brightness(1);
      }
      100% {
        opacity: 0;
        transform: scale(1.06) translateY(-6px);
        filter: blur(10px) brightness(1.15);
      }
    }
    @keyframes showcaseHeroGemIn {
      0% {
        opacity: 0;
        transform: scale(0.94) translateY(10px);
        filter: blur(12px) brightness(0.85);
      }
      55% {
        opacity: 0.85;
        filter: blur(2px) brightness(1.05);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0) brightness(1);
      }
    }
    @keyframes showcaseHeroPanelOut {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      100% {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
        filter: blur(4px);
      }
    }
    @keyframes showcaseHeroPanelIn {
      0% {
        opacity: 0;
        transform: translateY(-18px) scale(1.02);
        filter: blur(6px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    #showcaseGridSection .showcase-hero-composite.is-cinematic-out .showcase-hero-stage__velvet::before {
      animation: showcaseHeroFilmSweep 1s cubic-bezier(0.45, 0, 0.2, 1) forwards;
    }
    #showcaseGridSection .showcase-hero-composite.is-cinematic-out .showcase-hero-stage__gem {
      animation: showcaseHeroGemOut 0.72s cubic-bezier(0.55, 0, 0.45, 1) forwards;
    }
    #showcaseGridSection .showcase-hero-composite.is-cinematic-out .showcase-hero-panel {
      animation: showcaseHeroPanelOut 0.68s cubic-bezier(0.55, 0, 0.45, 1) forwards;
    }
    #showcaseGridSection .showcase-hero-composite.is-cinematic-in .showcase-hero-stage__velvet::before {
      animation: showcaseHeroFilmSweep 1.05s cubic-bezier(0.45, 0, 0.2, 1) forwards;
    }
    #showcaseGridSection .showcase-hero-composite.is-cinematic-in .showcase-hero-stage__gem {
      animation: showcaseHeroGemIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    #showcaseGridSection .showcase-hero-composite.is-cinematic-in .showcase-hero-panel {
      animation: showcaseHeroPanelIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @media (prefers-reduced-motion: reduce) {
      #showcaseGridSection .showcase-hero-composite.is-cinematic-out .showcase-hero-stage__gem,
      #showcaseGridSection .showcase-hero-composite.is-cinematic-out .showcase-hero-panel,
      #showcaseGridSection .showcase-hero-composite.is-cinematic-in .showcase-hero-stage__gem,
      #showcaseGridSection .showcase-hero-composite.is-cinematic-in .showcase-hero-panel,
      #showcaseGridSection .showcase-hero-composite.is-cinematic-out .showcase-hero-stage__velvet::before,
      #showcaseGridSection .showcase-hero-composite.is-cinematic-in .showcase-hero-stage__velvet::before {
        animation: none !important;
      }
    }

    /* ── Royal cinematic gem-change transition for the showcase hero card ── */
    #showcaseGridSection .showcase-hero-cinema .showcase-hero-cinema-inner { will-change: opacity, transform; }
    #showcaseGridSection .showcase-hero-cinema .showcase-hero-gem { will-change: opacity, transform, filter; }
    #showcaseGridSection .showcase-hero-cinema.is-cinematic-out .showcase-hero-cinema-inner {
      opacity: 0;
      transform: translateY(10px) scale(0.985);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.5, 0, 0.2, 1);
    }
    #showcaseGridSection .showcase-hero-cinema.is-cinematic-out .showcase-hero-gem {
      transform: scale(0.9) translateY(6px);
      filter: blur(5px) brightness(1.35);
      transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1), filter 0.55s ease;
    }
    #showcaseGridSection .showcase-hero-cinema.is-cinematic-in .showcase-hero-cinema-inner {
      animation: gsHeroContentIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    #showcaseGridSection .showcase-hero-cinema.is-cinematic-in .showcase-hero-gem {
      animation: gsHeroGemIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes gsHeroContentIn {
      0% { opacity: 0; transform: translateY(14px) scale(0.985); }
      100% { opacity: 1; transform: none; }
    }
    @keyframes gsHeroGemIn {
      0% { opacity: 0; transform: scale(1.12) translateY(-8px); filter: blur(10px) brightness(1.7); }
      55% { filter: blur(0) brightness(1.08); }
      100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) brightness(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      #showcaseGridSection .showcase-hero-cinema.is-cinematic-out .showcase-hero-cinema-inner,
      #showcaseGridSection .showcase-hero-cinema.is-cinematic-out .showcase-hero-gem,
      #showcaseGridSection .showcase-hero-cinema.is-cinematic-in .showcase-hero-cinema-inner,
      #showcaseGridSection .showcase-hero-cinema.is-cinematic-in .showcase-hero-gem {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
    }
    #showcaseGridSection:has([data-showcase-coverflow]) .showcase-hero-stage__dots {
      display: none;
    }
    #showcaseGridSection .showcase-hero-stage__dots {
      position: absolute;
      bottom: 0.6rem;
      left: 0;
      right: 0;
      z-index: 2;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      gap: 0.5rem;
      padding-bottom: 0;
    }
    #showcaseGridSection .showcase-hero-stage__dot {
      width: 0.375rem;
      height: 0.375rem;
      padding: 0;
      border: 0;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.28);
      cursor: pointer;
      transition: width 0.3s ease, background-color 0.3s ease;
    }
    #showcaseGridSection .showcase-hero-stage__dot.is-active {
      width: 1.25rem;
      background: #e0bb7f;
    }
    #showcaseGridSection .showcase-hero-panel {
      display: flex;
      width: 100%;
      height: 100%;
      min-height: 0;
      flex-direction: column;
      align-self: stretch;
      overflow: hidden;
      border-radius: 0;
      border: none;
      border-top: 1px solid rgba(224, 187, 127, 0.2);
      background: rgba(10, 10, 10, 0.78);
      box-shadow: none;
      backdrop-filter: blur(8px);
    }
    @media (min-width: 1024px) {
      #showcaseGridSection .showcase-hero-panel {
        width: 100%;
        max-width: none;
        flex-shrink: 0;
        border-top: none;
        border-left: 1px solid rgba(224, 187, 127, 0.2);
      }
    }
    #showcaseGridSection .showcase-hero-panel__body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1.05rem 1.15rem 0.75rem;
    }
    @media (min-width: 640px) {
      #showcaseGridSection .showcase-hero-panel__body {
        padding: 1.15rem 1.25rem 0.85rem;
      }
    }
    #showcaseGridSection .showcase-hero-panel__title {
      font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
      font-size: 1.32rem;
      font-weight: 400;
      line-height: 1.15;
      color: #fff;
    }
    @media (min-width: 640px) {
      #showcaseGridSection .showcase-hero-panel__title {
        font-size: 1.42rem;
      }
    }
    #showcaseGridSection .showcase-hero-panel__category {
      margin-top: 0.25rem;
      font-size: 0.72rem;
      font-weight: 500;
      color: #e0bb7f;
    }
    #showcaseGridSection .showcase-hero-panel__spec-grid {
      margin-top: 0.85rem;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.45rem;
    }
    #showcaseGridSection .showcase-hero-panel__spec-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1.85rem;
      width: 1.85rem;
      margin: 0 auto 0.2rem;
      color: #e0bb7f;
    }
    #showcaseGridSection .showcase-hero-panel__spec-icon svg {
      height: 1.05rem;
      width: 1.05rem;
    }
    #showcaseGridSection .showcase-hero-panel__spec-value {
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.2;
      color: #fff;
    }
    #showcaseGridSection .showcase-hero-panel__spec-label {
      margin-top: 0.15rem;
      font-size: 0.56rem;
      font-weight: 500;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
    }
    #showcaseGridSection .showcase-hero-panel__origin {
      margin-top: 0.75rem;
      font-size: 0.78rem;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.7);
    }
    #showcaseGridSection .showcase-hero-panel__origin span {
      color: #fff;
    }
    #showcaseGridSection .showcase-hero-panel .gemstone-price {
      margin-top: 0.4rem;
      font-size: 1.32rem;
      line-height: 1.15;
    }
    @media (min-width: 640px) {
      #showcaseGridSection .showcase-hero-panel .gemstone-price {
        font-size: 1.48rem;
      }
    }
    #showcaseGridSection .showcase-hero-panel__wish {
      flex-shrink: 0;
      border-radius: 9999px;
      padding: 0.4rem;
      color: rgba(255, 255, 255, 0.9);
      transition: background-color 0.2s ease;
    }
    #showcaseGridSection .showcase-hero-panel__wish:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    #showcaseGridSection .showcase-hero-panel__wish svg {
      height: 1.1rem;
      width: 1.1rem;
    }
    #showcaseGridSection .showcase-hero-panel__actions button,
    #showcaseGridSection .showcase-hero-panel__actions a {
      gap: 0.3rem;
      padding: 0.5rem 0.2rem;
    }
    #showcaseGridSection .showcase-hero-panel__actions .showcase-hero-panel__action-icon {
      display: flex;
      height: 1.85rem;
      width: 1.85rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
    }
    #showcaseGridSection .showcase-hero-panel__actions .showcase-hero-panel__action-icon img,
    #showcaseGridSection .showcase-hero-panel__actions .showcase-hero-panel__action-icon svg {
      height: 0.85rem;
      width: 0.85rem;
    }
    #showcaseGridSection .showcase-hero-panel__actions .showcase-hero-panel__action-label {
      font-size: 0.5rem;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    #showcaseGridSection .showcase-hero-panel__actions {
      margin-top: auto;
      display: grid;
      flex-shrink: 0;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.4);
    }
    #showcaseGridSection .showcase-hero-panel__actions > * + * {
      border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    #showcaseGridSection .is-showcase-adjacent {
      filter: blur(0.35px);
    }
    #showcaseGridSection .is-showcase-far {
      filter: blur(0.5px);
    }
    #showcaseGridSection .showcase-coverflow__dots {
      display: none;
    }
    #showcaseGridSection .showcase-coverflow__dot {
      width: 0.375rem;
      height: 0.375rem;
      padding: 0;
      border: 0;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.28);
      cursor: pointer;
      transition: width 0.3s ease, background-color 0.3s ease;
      -webkit-tap-highlight-color: transparent;
    }
    #showcaseGridSection .showcase-coverflow__dot.is-active {
      width: 1.25rem;
      background: #e0bb7f;
    }
    #showcaseGridSection .showcase-coverflow__dot:focus-visible {
      outline: 2px solid rgba(224, 187, 127, 0.9);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      #showcaseGridSection .showcase-coverflow__slide {
        transition-duration: 0ms;
      }
      #showcaseGridSection .is-showcase-adjacent,
      #showcaseGridSection .is-showcase-far {
        filter: none;
      }
    }
    #showcaseGridSection .showcase-hero-light {
      background: #fdf8ec;
      border: 1px solid rgba(198, 165, 108, 0.34);
      box-shadow: 0 22px 48px rgba(122, 95, 44, 0.1);
    }
    #showcaseGridSection .showcase-hero-light-media-shell {
      background: linear-gradient(135deg, #f7eed8 0%, #fbf4e2 55%, #f1e6cc 100%);
      border-right: 1px solid rgba(198, 165, 108, 0.22);
    }
    @media (max-width: 1023px) {
      #showcaseGridSection .showcase-hero-light-media-shell {
        border-right: 0;
        border-bottom: 1px solid rgba(198, 165, 108, 0.22);
      }
    }
    #showcaseGridSection .showcase-hero-light-media-glow {
      background: radial-gradient(ellipse 72% 60% at 50% 45%, rgba(197, 158, 74, 0.28) 0%, rgba(197, 158, 74, 0.08) 45%, transparent 72%);
    }
    #showcaseGridSection .showcase-hero-light-media-inset {
      box-shadow: inset 0 0 90px rgba(122, 95, 44, 0.14);
    }
    #showcaseGridSection .showcase-hero-light-body {
      background: #fdf8ec;
      border-top: 1px solid rgba(198, 165, 108, 0.22);
    }
    @media (min-width: 1024px) {
      #showcaseGridSection .showcase-hero-light-body {
        border-top: 0;
        border-left: 1px solid rgba(198, 165, 108, 0.22);
      }
    }
    #showcaseGridSection .showcase-hero-light-actions {
      background: rgba(247, 238, 216, 0.62);
      border-top: 1px solid rgba(198, 165, 108, 0.22);
    }
    #showcaseGridSection .showcase-hero-light-actions > * + * {
      border-left: 1px solid rgba(198, 165, 108, 0.18);
    }
    #showcaseGridSection .showcase-hero-light-icon-ink {
      filter: none;
      opacity: 0.82;
    }
    #showcaseGridSection .showcase-light-card {
      position: relative;
      display: flex;
      min-height: 100%;
      flex-direction: column;
      overflow: hidden;
      border-radius: 1.55rem;
      border: 1px solid rgba(198, 165, 108, 0.34);
      background: #fdf8ec;
      box-shadow: 0 18px 36px rgba(122, 95, 44, 0.09);
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    #showcaseGridSection .showcase-light-card:hover {
      transform: translateY(-3px);
      border-color: rgba(181, 144, 71, 0.6);
      box-shadow: 0 26px 48px rgba(122, 95, 44, 0.16);
    }
    #showcaseGridSection .showcase-light-card__media {
      display: block;
      aspect-ratio: 0.88 / 1;
      overflow: hidden;
      background: linear-gradient(135deg, #f7eed8 0%, #fbf4e2 55%, #f1e6cc 100%);
    }
    #showcaseGridSection .showcase-light-card__media img {
      transition: transform 0.5s ease;
    }
    #showcaseGridSection .showcase-light-card:hover .showcase-light-card__media img {
      transform: scale(1.04);
    }
    #showcaseGridSection .showcase-light-card__divider {
      height: 1px;
      background: linear-gradient(90deg, rgba(198, 165, 108, 0) 0%, rgba(198, 165, 108, 0.6) 50%, rgba(198, 165, 108, 0) 100%);
    }
    #showcaseGridSection .showcase-light-card__footer {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      margin-top: 1rem;
    }
    #showcaseGridSection .showcase-light-card__footer-cell {
      padding: 0.1rem 0.18rem;
    }
    #showcaseGridSection .showcase-light-card__footer > * + * {
      border-left: 1px solid rgba(198, 165, 108, 0.18);
    }
    #showcaseGridSection .showcase-light-card__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 2.25rem;
      width: 2.25rem;
      border-radius: 9999px;
      border: 1px solid rgba(198, 165, 108, 0.55);
      background: rgba(255, 251, 240, 0.92);
      color: #5b4a2d;
      transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
    }
    #showcaseGridSection .showcase-light-card__action:hover {
      transform: translateY(-1px);
      border-color: rgba(181, 144, 71, 0.92);
      background: #fffdf6;
    }
    #showcaseGridSection .showcase-light-card__action:focus-visible {
      outline: 2px solid rgba(181, 144, 71, 0.9);
      outline-offset: 2px;
    }
    #featuredProductsSection .featured-glide,
    #newArrivalsSection .featured-glide {
      overflow: hidden;
    }
    #featuredProductsSection .featured-filter-btn {
      position: relative;
      padding-bottom: 0.35rem;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(90, 80, 64, 0.72);
      transition: color 0.25s ease;
    }
    #featuredProductsSection .featured-filter-btn:hover {
      color: #473925;
    }
    #featuredProductsSection .featured-filter-btn[aria-selected="true"] {
      color: #1a1a1a;
    }
    #featuredProductsSection .featured-filter-btn[aria-selected="true"]::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #c6a564;
    }
    #featuredProductsSection .featured-glide .glide__slides,
    #newArrivalsSection .featured-glide .glide__slides {
      align-items: stretch;
    }
    #featuredProductsSection .featured-glide .glide__slide,
    #newArrivalsSection .featured-glide .glide__slide {
      display: flex;
      height: auto;
    }
    #featuredProductsSection .featured-glide .glide__slide > * ,
    #newArrivalsSection .featured-glide .glide__slide > *  {
      width: 100%;
    }
    #featuredProductsSection .featured-glide .glide__bullets ,
    #newArrivalsSection .featured-glide .glide__bullets  {
      display: flex;
      justify-content: center;
      gap: 0.45rem;
      margin-top: 1.25rem;
    }
    #featuredProductsSection .featured-glide .glide__bullet ,
    #newArrivalsSection .featured-glide .glide__bullet  {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 9999px;
      border: 0;
      padding: 0;
      background: rgba(190, 171, 136, 0.55);
      transition: transform 0.25s ease, background-color 0.25s ease;
      cursor: pointer;
    }
    #featuredProductsSection .featured-glide .glide__bullet--active ,
    #newArrivalsSection .featured-glide .glide__bullet--active  {
      transform: scale(1.15);
      background: #c6a564;
    }
    #featuredProductsSection .featured-glide-arrow ,
    #newArrivalsSection .featured-glide-arrow  {
      display: inline-flex;
      height: 2.5rem;
      width: 2.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 1px solid #ddd4b8;
      background: #fff;
      color: #5a5040;
      transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    }
    #featuredProductsSection .featured-glide-arrow:hover ,
    #newArrivalsSection .featured-glide-arrow:hover  {
      border-color: rgba(198, 165, 108, 0.85);
      color: #1a1a1a;
      background: #fffdf9;
    }
    /* Same showcase/premium light cards */
    #featuredProductsSection .market-icon-gold ,
    #newArrivalsSection .market-icon-gold  {
      filter: invert(73%) sepia(42%) saturate(362%) hue-rotate(355deg) brightness(96%) contrast(90%);
    }
    #featuredProductsSection .market-icon-ink ,
    #newArrivalsSection .market-icon-ink  {
      filter: brightness(0) saturate(100%) invert(13%) sepia(11%) saturate(1370%) hue-rotate(2deg) brightness(94%) contrast(90%);
      opacity: 0.85;
    }
    #featuredProductsSection .showcase-light-card ,
    #newArrivalsSection .showcase-light-card ,
    #storesNewProductsSection .showcase-light-card ,
    #relatedProductsSection .showcase-light-card  {      position: relative;
      display: flex;
      min-height: 100%;
      flex-direction: column;
      overflow: hidden;
      border-radius: 1rem;
      border: 1px solid rgba(198, 165, 108, 0.34);
      /* background: #fdf8ec; */
      background: white;
      box-shadow: 0 10px 22px rgba(122, 95, 44, 0.08);
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    #featuredProductsSection .showcase-light-card:hover ,
    #newArrivalsSection .showcase-light-card:hover ,
    #storesNewProductsSection .showcase-light-card:hover ,
    #relatedProductsSection .showcase-light-card:hover  {      transform: translateY(-2px);
      border-color: rgba(181, 144, 71, 0.6);
      box-shadow: 0 14px 28px rgba(122, 95, 44, 0.12);
    }
    #featuredProductsSection .showcase-light-card__media ,
    #newArrivalsSection .showcase-light-card__media ,
    #storesNewProductsSection .showcase-light-card__media ,
    #relatedProductsSection .showcase-light-card__media  {      display: block;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: linear-gradient(135deg, #f7eed8 0%, #fbf4e2 55%, #f1e6cc 100%);
    }
    #featuredProductsSection .showcase-light-card > .flex.flex-1 ,
    #newArrivalsSection .showcase-light-card > .flex.flex-1 ,
    #storesNewProductsSection .showcase-light-card > .flex.flex-1 ,
    #relatedProductsSection .showcase-light-card > .flex.flex-1  {      padding: 0.55rem 0.65rem 0.5rem !important;
    }
    #featuredProductsSection .showcase-light-card h4 ,
    #newArrivalsSection .showcase-light-card h4 ,
    #storesNewProductsSection .showcase-light-card h4 ,
    #relatedProductsSection .showcase-light-card h4  {      font-size: 0.82rem !important;
      line-height: 1.25;
    }
    #featuredProductsSection .showcase-light-card .font-serif.leading-none ,
    #newArrivalsSection .showcase-light-card .font-serif.leading-none ,
    #storesNewProductsSection .showcase-light-card .font-serif.leading-none ,
    #relatedProductsSection .showcase-light-card .font-serif.leading-none  {      font-size: 0.92rem !important;
    }
    #featuredProductsSection .showcase-light-card > .flex .mt-4 ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 ,
    #storesNewProductsSection .showcase-light-card > .flex .mt-4 ,
    #relatedProductsSection .showcase-light-card > .flex .mt-4  {      margin-top: 0.45rem !important;
    }
    #featuredProductsSection .showcase-light-card > .flex .mt-4 > p span:first-child ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 > p span:first-child ,
    #storesNewProductsSection .showcase-light-card > .flex .mt-4 > p span:first-child ,
    #relatedProductsSection .showcase-light-card > .flex .mt-4 > p span:first-child  {      font-size: 0.52rem;
      letter-spacing: 0.12em;
    }
    #featuredProductsSection .showcase-light-card > .flex .mt-4 > p span:last-child ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 > p span:last-child ,
    #storesNewProductsSection .showcase-light-card > .flex .mt-4 > p span:last-child ,
    #relatedProductsSection .showcase-light-card > .flex .mt-4 > p span:last-child  {      font-size: 0.92rem !important;
      margin-left: 0.2rem !important;
    }
    #featuredProductsSection .showcase-light-card > .flex .mt-4 a ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 a ,
    #storesNewProductsSection .showcase-light-card > .flex .mt-4 a ,
    #relatedProductsSection .showcase-light-card > .flex .mt-4 a  {      font-size: 0.52rem;
      letter-spacing: 0.1em;
    }
    #featuredProductsSection .showcase-light-card > .flex .mt-4 a span[aria-hidden] ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 a span[aria-hidden] ,
    #storesNewProductsSection .showcase-light-card > .flex .mt-4 a span[aria-hidden] ,
    #relatedProductsSection .showcase-light-card > .flex .mt-4 a span[aria-hidden]  {      display: none;
    }
    #featuredProductsSection .showcase-light-card__divider ,
    #newArrivalsSection .showcase-light-card__divider ,
    #storesNewProductsSection .showcase-light-card__divider ,
    #relatedProductsSection .showcase-light-card__divider  {      margin-top: 0.4rem !important;
    }
    #featuredProductsSection .showcase-light-card__media img ,
    #newArrivalsSection .showcase-light-card__media img ,
    #storesNewProductsSection .showcase-light-card__media img ,
    #relatedProductsSection .showcase-light-card__media img  {      transition: transform 0.5s ease;
    }
    #featuredProductsSection .showcase-light-card:hover .showcase-light-card__media img ,
    #newArrivalsSection .showcase-light-card:hover .showcase-light-card__media img ,
    #storesNewProductsSection .showcase-light-card:hover .showcase-light-card__media img ,
    #relatedProductsSection .showcase-light-card:hover .showcase-light-card__media img  {      transform: scale(1.04);
    }
    #featuredProductsSection .showcase-light-card__divider ,
    #newArrivalsSection .showcase-light-card__divider ,
    #storesNewProductsSection .showcase-light-card__divider ,
    #relatedProductsSection .showcase-light-card__divider  {      height: 1px;
      background: linear-gradient(90deg, rgba(198, 165, 108, 0) 0%, rgba(198, 165, 108, 0.6) 50%, rgba(198, 165, 108, 0) 100%);
    }
    #featuredProductsSection .showcase-light-card__footer ,
    #newArrivalsSection .showcase-light-card__footer ,
    #storesNewProductsSection .showcase-light-card__footer ,
    #relatedProductsSection .showcase-light-card__footer  {      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      margin-top: 0.35rem;
    }
    #featuredProductsSection .showcase-light-card__footer-cell ,
    #newArrivalsSection .showcase-light-card__footer-cell ,
    #storesNewProductsSection .showcase-light-card__footer-cell ,
    #relatedProductsSection .showcase-light-card__footer-cell  {      padding: 0.05rem 0.08rem;
    }
    #featuredProductsSection .showcase-light-card__footer > * + * ,
    #newArrivalsSection .showcase-light-card__footer > * + * ,
    #storesNewProductsSection .showcase-light-card__footer > * + * ,
    #relatedProductsSection .showcase-light-card__footer > * + *  {      border-left: 1px solid rgba(198, 165, 108, 0.18);
    }
    #featuredProductsSection .showcase-light-card__action ,
    #newArrivalsSection .showcase-light-card__action ,
    #storesNewProductsSection .showcase-light-card__action ,
    #relatedProductsSection .showcase-light-card__action  {      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 1.65rem;
      width: 1.65rem;
      border-radius: 9999px;
      border: 1px solid rgba(198, 165, 108, 0.55);
      background: rgba(255, 251, 240, 0.92);
      color: #5b4a2d;
      transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
    }
    #featuredProductsSection .showcase-light-card__action img,
    #featuredProductsSection .showcase-light-card__action .h-4 ,
    #newArrivalsSection .showcase-light-card__action .h-4 ,
    #storesNewProductsSection .showcase-light-card__action .h-4 ,
    #relatedProductsSection .showcase-light-card__action .h-4  {      height: 0.72rem !important;
      width: 0.72rem !important;
    }
    #featuredProductsSection .showcase-light-card__action:hover ,
    #newArrivalsSection .showcase-light-card__action:hover ,
    #storesNewProductsSection .showcase-light-card__action:hover ,
    #relatedProductsSection .showcase-light-card__action:hover  {      transform: translateY(-1px);
      border-color: rgba(181, 144, 71, 0.92);
      background: #fffdf6;
    }
    #featuredProductsSection .showcase-light-card__action:focus-visible ,
    #newArrivalsSection .showcase-light-card__action:focus-visible ,
    #storesNewProductsSection .showcase-light-card__action:focus-visible ,
    #relatedProductsSection .showcase-light-card__action:focus-visible  {      outline: 2px solid rgba(181, 144, 71, 0.9);
      outline-offset: 2px;
    }
    /* Shop by Category carousel */
    #shop-categories-heading{
      font-family: customfont;
    }
    #shopByCategoriesSection {
      --category-card-min-h: 12.5rem;
    }
    @media (min-width: 1280px) {
      #shopByCategoriesSection {
        --category-card-min-h: 13.75rem;
      }
    }
    #shopByCategoriesSection .shop-categories-panel {
      position: relative;
      overflow: hidden;
      border-radius: 1.75rem;
      border: 1px solid #efe4d3;
      background: radial-gradient(circle at top, rgba(255, 255, 255, 0.82) 0%, rgba(251, 247, 239, 0.98) 48%, #f7f1e7 100%);
      padding: 2.25rem 1.25rem 2rem;
    }
    @media (min-width: 640px) {
      #shopByCategoriesSection .shop-categories-panel {
        padding: 2.75rem 2rem 2.25rem;
      }
    }
    @media (min-width: 1024px) {
      #shopByCategoriesSection .shop-categories-panel {
        padding: 3rem 2.5rem 2.5rem;
      }
    }
    #shopByCategoriesSection .shop-categories-eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.85rem;
    }
    #shopByCategoriesSection .shop-categories-eyebrow__line {
      width: 2.75rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(198, 165, 108, 0.85), transparent);
    }
    #shopByCategoriesSection .shop-categories-eyebrow__text {
      font-family: Gantari;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #af8b46;
    }
    #shopByCategoriesSection .shop-categories-panel header p:last-child {
      font-family: 'Gantari', system-ui, sans-serif;
      font-weight: 400;
      letter-spacing: 0.01em;
    }
    #shopByCategoriesSection .shop-categories-diamond {
      display: block;
      width: 0.42rem;
      height: 0.42rem;
      margin: 0.55rem auto 0;
      transform: rotate(45deg);
      background: #c6a564;
    }
    #shopByCategoriesSection .shop-categories-carousel {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-top: 2rem;
      max-width: 100%;
      width: 100%;
    }
    @media (min-width: 640px) {
      #shopByCategoriesSection .shop-categories-carousel {
        gap: 1rem;
      }
    }
    #shopByCategoriesSection .category-glide {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      margin: 0;
    }
    #shopByCategoriesSection .category-glide .glide__slides {
      align-items: stretch;
    }
    #shopByCategoriesSection .category-glide .glide__slide {
      display: flex;
      height: auto;
    }
    #shopByCategoriesSection .shop-categories-arrow {
      position: relative;
      z-index: 2;
      display: inline-flex;
      flex-shrink: 0;
      height: 2.65rem;
      width: 2.65rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 1px solid #e5dcc8;
      background: #fff;
      color: #6a5f4d;
      box-shadow: 0 6px 18px rgba(83, 63, 36, 0.08);
      transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }
    #shopByCategoriesSection .shop-categories-arrow:hover {
      border-color: rgba(198, 165, 108, 0.85);
      color: #1a1a1a;
      box-shadow: 0 10px 24px rgba(83, 63, 36, 0.12);
    }
    @media (max-width: 1023px) {
      #shopByCategoriesSection .shop-categories-carousel {
        gap: 0;
      }
      #shopByCategoriesSection .shop-categories-arrow {
        display: none !important;
      }
      #shopByCategoriesSection .category-glide {
        width: 100%;
      }
      #shopByCategoriesSection .category-glide .glide__slide {
        padding: 0 0.35rem;
      }
    }
    #shopByCategoriesSection .category-card {
      position: relative;
      display: flex;
      width: 100%;
      min-height: var(--category-card-min-h);
      flex-direction: column;
      overflow: hidden;
      border-radius: 1.1rem;
      border: 1px solid rgba(237, 228, 211, 0.95);
      background: #fff;
      box-shadow: 0 6px 20px rgba(83, 63, 36, 0.06);
      text-align: center;
      transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }
    #shopByCategoriesSection .category-card:hover,
    #shopByCategoriesSection .category-card:focus-visible {
      border-color: rgba(198, 165, 108, 0.45);
      box-shadow: 0 10px 26px rgba(83, 63, 36, 0.09);
    }
    #shopByCategoriesSection .category-card__media {
      display: flex;
      flex: 1;
      min-height: 12.5rem;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 0.85rem 0.6rem;
      background: #ffffff;
    }
    #shopByCategoriesSection .category-card__media img {
      max-height: 8.5rem;
      width: auto;
      max-width: 90%;
      object-fit: contain;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
      mix-blend-mode: multiply;
    }
    #shopByCategoriesSection .category-card:hover .category-card__media img,
    #shopByCategoriesSection .category-card:focus-visible .category-card__media img {
      transform: scale(1.05) translateY(-2px);
    }
    #shopByCategoriesSection .category-card__footer {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 0.35rem;
      padding: 0.65rem 0.65rem 0.75rem;
      background: #fff;
    }
    #shopByCategoriesSection .category-card__count-row {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 2.15rem;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    #shopByCategoriesSection .category-card__name {
      margin: 0;
      padding: 0;
      font-family: 'Gantari', system-ui, sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #1a1a1a;
    }
    #shopByCategoriesSection .category-card__count {
      margin: 0;
      padding: 0;
      font-family: 'Gantari', system-ui, sans-serif;
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #af8b46;
      transition: opacity 0.28s ease;
    }
    #shopByCategoriesSection .category-card:hover .category-card__count,
    #shopByCategoriesSection .category-card:focus-visible .category-card__count {
      opacity: 0;
    }
    #shopByCategoriesSection .category-card__explore {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      background: #141414;
      color: #c6a564;
      font-family: "customfont", Georgia, serif;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transform: translateY(100%);
      transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1);
    }
    #shopByCategoriesSection .category-card:hover .category-card__explore,
    #shopByCategoriesSection .category-card:focus-visible .category-card__explore {
      transform: translateY(0);
    }
    #shopByCategoriesSection .category-card__explore-arrow {
      display: block;
      flex-shrink: 0;
    }
    #ourServicesSection .premium-shell {
      position: relative;
      overflow: hidden;
      border-radius: 1.5rem;
      border: 1px solid rgba(232, 220, 200, 0.96);
      background-color: #fdfbf7;
      box-shadow: 0 22px 48px rgba(122, 95, 44, 0.08);
    }
    @media (max-width: 639px) {
      #ourServicesSection .premium-shell {
        border-radius: 1.25rem;
      }
    }
    #premiumEditorialSection #premiumProductsMount {
      width: 100%;
    }
    /* Match #headerMainNavRow gutters — logo left, login right */
    #premiumEditorialSection .premium-site-align {
      box-sizing: border-box;
      width: 100%;
      max-width: 90rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    @media (min-width: 640px) {
      #premiumEditorialSection .premium-site-align {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    @media (min-width: 1024px) {
      #premiumEditorialSection .premium-site-align {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
      }
    }
    #premiumEditorialSection .premium-hero-band {
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: clamp(20rem, 42vw, 28rem);
      background-color: #fdfbf7;
    }
    #premiumEditorialSection .premium-hero-band::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(90deg, rgba(253, 251, 247, 0.96) 0%, rgba(253, 251, 247, 0.82) 32%, rgba(253, 251, 247, 0.45) 58%, rgba(253, 251, 247, 0.1) 80%, rgba(253, 251, 247, 0) 100%),
        url("../images/ui/premium%20banner.png");
      background-repeat: no-repeat, no-repeat;
      /* Full-bleed cover (original width); focal point on diamond (right of source file) */
      background-position: center, 72% 40%;   /* slightly lower */
      background-size: 100% 100%, cover;
    }
    @media (min-width: 768px) {
      #premiumEditorialSection .premium-hero-band {
        min-height: clamp(22rem, 38vw, 30rem);
      }
    }
    @media (min-width: 1024px) {
      #premiumEditorialSection .premium-hero-band {
        min-height: clamp(24rem, 34vw, 32rem);
      }
    }
    #premiumEditorialSection .premium-hero-inner {
      position: relative;
      z-index: 1;
    }
    #premiumEditorialSection .premium-content {
      position: relative;
      z-index: 1;
      width: 100%;
    }
    #premiumEditorialSection .premium-filters {
      margin-bottom: 1.75rem;
    }
    #premiumEditorialSection .premium-filter-btn {
      display: inline-flex;
      min-height: 2rem;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(222, 209, 188, 0.96);
      background: rgba(255, 255, 255, 0.78);
      padding: 0.45rem 0.95rem;
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(87, 73, 48, 0.82);
      transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    #premiumEditorialSection .premium-filter-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(204, 174, 111, 0.82);
      color: #473925;
    }
    #premiumEditorialSection .premium-filter-btn[aria-pressed="true"] {
      border-color: rgba(208, 170, 102, 0.9);
      background: #d2b072;
      color: #fffaf1;
    }
    #premiumEditorialSection .premium-link-line {
      border-bottom: 1px solid rgba(198, 165, 108, 0.55);
      padding-bottom: 0.55rem;
    }
    /* Light-palette ports of the showcase hero + showcase card, scoped to the premium section. */
    #premiumEditorialSection .market-icon-ink {
      filter: brightness(0) saturate(100%) invert(13%) sepia(11%) saturate(1370%) hue-rotate(2deg) brightness(94%) contrast(90%);
      opacity: 0.85;
    }
    #premiumEditorialSection .showcase-hero-light-icon-ink {
      filter: brightness(0) saturate(100%) invert(13%) sepia(11%) saturate(1370%) hue-rotate(2deg) brightness(94%) contrast(90%);
      opacity: 0.82;
    }
    #premiumEditorialSection .showcase-hero-gem {
      max-height: 240px;
      filter: none;
      mix-blend-mode: multiply;
    }
    @media (min-width: 1024px) {
      #premiumEditorialSection .showcase-hero-gem {
        max-height: 300px;
      }
    }

    /* Light showcase hero card */
    #premiumEditorialSection .showcase-hero-light {
      /* background: #fdf8ec; */
      background: white;
      border: 1px solid rgba(198, 165, 108, 0.34);
      box-shadow: 0 22px 48px rgba(122, 95, 44, 0.1);
    }
    #premiumEditorialSection .showcase-hero-light-media-shell {
      /* was a cream gradient — mismatched against the plain white studio photos real
         products actually use, so this now matches the card's own white background. */
      background: #fff;
      border-right: 1px solid rgba(198, 165, 108, 0.22);
    }
    @media (max-width: 1023px) {
      #premiumEditorialSection .showcase-hero-light-media-shell {
        border-right: 0;
        border-bottom: 1px solid rgba(198, 165, 108, 0.22);
      }
    }
    #premiumEditorialSection .showcase-hero-light-media-glow {
      background: none;
    }
    #premiumEditorialSection .showcase-hero-light-media-inset {
      box-shadow: none;
    }
    #premiumEditorialSection .showcase-hero-light-body {
      /* background: #fdf8ec; */
      background: white;
      border-top: 1px solid rgba(198, 165, 108, 0.22);
    }
    @media (min-width: 1024px) {
      #premiumEditorialSection .showcase-hero-light-body {
        border-top: 0;
        border-left: 1px solid rgba(198, 165, 108, 0.22);
      }
    }
    #premiumEditorialSection .showcase-hero-light-actions {
      /* background: rgba(247, 238, 216, 0.62); */
      background: white;
      border-top: 1px solid rgba(198, 165, 108, 0.22);
    }
    #premiumEditorialSection .showcase-hero-light-actions > * + * {
      border-left: 1px solid rgba(198, 165, 108, 0.18);
    }

    /* Light showcase carousel card (mini) */
    #premiumEditorialSection .showcase-light-card {
      position: relative;
      display: flex;
      min-height: 100%;
      flex-direction: column;
      overflow: hidden;
      border-radius: 1.55rem;
      border: 1px solid rgba(198, 165, 108, 0.34);
      /* background: #fdf8ec; */
      background:white;
      box-shadow: 0 18px 36px rgba(122, 95, 44, 0.09);
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    #premiumEditorialSection .showcase-light-card:hover {
      transform: translateY(-3px);
      border-color: rgba(181, 144, 71, 0.6);
      box-shadow: 0 26px 48px rgba(122, 95, 44, 0.16);
    }
    #premiumEditorialSection .showcase-light-card__media {
      display: block;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: linear-gradient(135deg, #f7eed8 0%, #fbf4e2 55%, #f1e6cc 100%);
    }
    #premiumEditorialSection .showcase-light-card__media img {
      transition: transform 0.5s ease;
    }
    #premiumEditorialSection .showcase-light-card:hover .showcase-light-card__media img {
      transform: scale(1.04);
    }
    #premiumEditorialSection .showcase-light-card__divider {
      height: 1px;
      background: linear-gradient(90deg, rgba(198, 165, 108, 0) 0%, rgba(198, 165, 108, 0.6) 50%, rgba(198, 165, 108, 0) 100%);
    }
    #premiumEditorialSection .showcase-light-card__footer {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      margin-top: 1rem;
    }
    #premiumEditorialSection .showcase-light-card__footer-cell {
      padding: 0.1rem 0.18rem;
    }
    #premiumEditorialSection .showcase-light-card__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 2.25rem;
      width: 2.25rem;
      border-radius: 9999px;
      border: 1px solid rgba(198, 165, 108, 0.55);
      background: rgba(255, 251, 240, 0.92);
      color: #5b4a2d;
      transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
    }
    #premiumEditorialSection .showcase-light-card__action:hover {
      transform: translateY(-1px);
      border-color: rgba(181, 144, 71, 0.92);
      background: #fffdf6;
    }
    #premiumEditorialSection .showcase-light-card__action:focus-visible {
      outline: 2px solid rgba(181, 144, 71, 0.9);
      outline-offset: 2px;
    }
    /* Hero + 2 side cards — hero slightly narrower than 3:1:1 */
    #premiumEditorialSection .premium-listings-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      margin-bottom: 1rem;
      width: 100%;
    }
    #premiumEditorialSection .premium-listings-header .premium-filters {
      margin-bottom: 0;
    }
    #premiumEditorialSection .premium-listings-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      flex-shrink: 0;
    }
    #premiumEditorialSection .premium-listings-grid {
      display: grid;
      /* Below 1024px: hero spans both columns (full width, its own row), then the two
         side cards auto-flow into the next row side-by-side instead of each stacking
         in its own full-width row. */
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
      width: 100%;
    }
    #premiumEditorialSection .premium-listings-grid > .showcase-hero-light {
      grid-column: 1 / -1;
    }
    @media (min-width: 1024px) {
      #premiumEditorialSection .premium-listings-grid {
        grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        gap: 1.5rem;
        height: min(65vh, 550px);
      }
      #premiumEditorialSection .premium-listings-grid > .showcase-hero-light {
        grid-column: auto;
      }
      #premiumEditorialSection .premium-listings-grid > .showcase-hero-light,
      #premiumEditorialSection .premium-listings-grid > .showcase-light-card {
        height: 100%;
        min-height: 0;
        max-height: 100%;
      }
      #premiumEditorialSection .premium-listings-grid .showcase-light-card__media {
        aspect-ratio: auto;
        flex: 1 1 0;
        min-height: 0;
      }
      #premiumEditorialSection .premium-listings-grid .showcase-light-card__media img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
      #premiumEditorialSection .premium-listings-grid .showcase-light-card > .flex.flex-1.flex-col {
        flex: 0 0 auto;
      }
      #premiumEditorialSection .premium-listings-grid .showcase-hero-light > .flex {
        height: 100%;
        min-height: 0;
      }
    }
    @media (min-width: 1280px) {
      #premiumEditorialSection .premium-listings-grid {
        gap: 1.75rem;
      }
    }

    #premiumEditorialSection .premium-arrow {
      display: inline-flex;
      height: 2.45rem;
      width: 2.45rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 1px solid rgba(225, 212, 191, 0.96);
      background: rgba(255, 255, 255, 0.88);
      color: rgba(97, 81, 55, 0.85);
      transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    #premiumEditorialSection .premium-arrow:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(204, 174, 111, 0.96);
      color: #473925;
      background: #fffdf9;
    }
    #premiumEditorialSection .premium-arrow:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    #premiumEditorialSection .premium-arrow:focus-visible,
    #premiumEditorialSection .premium-filter-btn:focus-visible,
    #premiumEditorialSection [data-premium-dot]:focus-visible {
      outline: 2px solid rgba(191, 151, 79, 0.9);
      outline-offset: 2px;
    }
    #premiumEditorialSection .premium-dot {
      display: inline-flex;
      height: 0.45rem;
      width: 0.45rem;
      border-radius: 9999px;
      background: rgba(190, 171, 136, 0.55);
      transition: transform 0.25s ease, background-color 0.25s ease;
    }
    #premiumEditorialSection .premium-dot[aria-current="true"] {
      transform: scale(1.12);
      background: #c6a564;
    }
    @keyframes premiumFilterActivate {
      0% {
        transform: scale(0.96);
        box-shadow: 0 0 0 rgba(210, 176, 114, 0);
      }
      45% {
        transform: scale(1.04);
        box-shadow: 0 0 16px rgba(210, 176, 114, 0.42);
      }
      100% {
        transform: scale(1);
        box-shadow: none;
      }
    }
    @keyframes premiumCardOut {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      100% {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
        filter: blur(5px);
      }
    }
    @keyframes premiumCardIn {
      0% {
        opacity: 0;
        transform: translateY(-18px) scale(1.02);
        filter: blur(8px);
      }
      55% {
        opacity: 0.88;
        filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    #premiumEditorialSection .premium-filter-btn.is-filter-active-pulse {
      animation: premiumFilterActivate 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #premiumEditorialSection .premium-listings-grid.is-cinematic-out > * {
      animation: premiumCardOut 0.45s cubic-bezier(0.55, 0, 0.45, 1) forwards;
    }
    #premiumEditorialSection .premium-listings-grid.is-cinematic-out > *:nth-child(2) {
      animation-delay: 0.05s;
    }
    #premiumEditorialSection .premium-listings-grid.is-cinematic-out > *:nth-child(3) {
      animation-delay: 0.1s;
    }
    #premiumEditorialSection .premium-listings-grid.is-cinematic-in > * {
      animation: premiumCardIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    #premiumEditorialSection .premium-listings-grid.is-cinematic-in > *:nth-child(2) {
      animation-delay: 0.05s;
    }
    #premiumEditorialSection .premium-listings-grid.is-cinematic-in > *:nth-child(3) {
      animation-delay: 0.1s;
    }
    @media (prefers-reduced-motion: reduce) {
      #premiumEditorialSection .premium-filter-btn.is-filter-active-pulse,
      #premiumEditorialSection .premium-listings-grid.is-cinematic-out > *,
      #premiumEditorialSection .premium-listings-grid.is-cinematic-in > * {
        animation: none !important;
      }
    }
    /* ═══ Site header — 3-tier luxury marketplace nav ═══ */
    #siteHeader details > summary {
      list-style: none;
    }
    #siteHeader details > summary::-webkit-details-marker {
      display: none;
    }
    #siteHeader .header-announce-bar {
      background: #111111;
      color: #ffffff;
      overflow: hidden;
      max-height: 3rem;
      transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
    #siteHeader.is-scrolled .header-announce-bar {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
    }
    #siteHeader .header-announce-bar .header-announce-icon {
      color: #ffffff;
    }
    #siteHeader .header-announce-bar .header-announce-cluster > span,
    #siteHeader .header-announce-bar .header-announce-slide:not(a) {
      color: #ffffff;
    }
    #siteHeader .header-announce-bar .header-announce-link {
      color: #ffffff;
      transition: color 0.2s ease;
    }
    #siteHeader .header-announce-bar .header-announce-link:hover,
    #siteHeader .header-announce-bar .header-announce-link:focus-visible {
      color: #c6a86a;
    }
    #siteHeader .header-announce-cluster {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      column-gap: clamp(1.25rem, 4vw, 2.75rem);
      row-gap: 0.35rem;
    }
    @media (max-width: 1023px) {
      #siteHeader .header-announce-cluster {
        display: none !important;
      }
    }
    @media (min-width: 1024px) {
      #siteHeader .header-announce-rotator {
        display: none !important;
      }
    }
    #siteHeader .header-announce-rotator {
      position: relative;
      height: 1.25rem;
      overflow: hidden;
    }
    #siteHeader .header-announce-rotator-inner {
      position: relative;
      display: block;
      width: 100%;
      height: 1.25rem;
      overflow: hidden;
    }
    #siteHeader .header-announce-slide {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 100%;
      margin: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(100%);
      transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
      pointer-events: none;
    }
    #siteHeader .header-announce-slide.is-active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    #siteHeader .header-announce-slide.is-exit {
      opacity: 0;
      visibility: visible;
      transform: translateY(-100%);
    }
    @media (prefers-reduced-motion: reduce) {
      #siteHeader .header-announce-slide {
        transition: opacity 0.2s ease;
        transform: none;
      }
      #siteHeader .header-announce-slide.is-exit {
        transform: none;
      }
    }
    #siteHeader #headerMainNavRow {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 0.5rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
    @media (min-width: 640px) and (max-width: 1023px) {
      #siteHeader #headerMainNavRow {
        padding-left: 1rem;
        padding-right: 1rem;
        column-gap: 0.625rem;
      }
    }
    @media (min-width: 1024px) {
      #siteHeader #headerMainNavRow {
        /* Grid (not flex) so the nav column is always mathematically centered on the row —
           the two 1fr side columns get equal width no matter how wide their content is, so
           the guest "Login / Register" button vs. the logged-in account icon (very different
           widths) can never shift the centered nav left/right. */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
      }
      #siteHeader .header-primary-nav {
        justify-self: center;
      }
    }
    @media (max-width: 1023px) {
      #siteHeader .header-actions {
        gap: 0.35rem;
      }
      #siteHeader .header-mobile-menu-btn {
        width: 2.5rem;
        height: 2.5rem;
      }
      #siteHeader .header-icon-btn {
        height: 2.15rem;
        width: 2.15rem;
      }
    }
    #siteHeader .header-mobile-menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      border: 0;
      border-radius: 0.35rem;
      background: transparent;
      color: #111111;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    @media (min-width: 1024px) {
      #siteHeader .header-mobile-menu-btn {
        display: none;
      }
    }
    #siteHeader .header-mobile-menu-btn:hover,
    #siteHeader .header-mobile-menu-btn:focus-visible {
      background: rgba(17, 17, 17, 0.06);
      color: #c6a86a;
    }
    #siteHeader .header-logo-link {
      justify-self: center;
      min-width: 0;
    }
    @media (min-width: 1024px) {
      #siteHeader .header-logo-link {
        justify-self: start;
      }
    }
    #siteHeader .header-actions {
      justify-self: end;
    }
    #mobileNavDrawer {
      position: fixed;
      inset: 0;
      z-index: 76;
      pointer-events: none;
    }
    #mobileNavDrawer[hidden] {
      display: none;
    }
    #mobileNavDrawer.is-open {
      pointer-events: auto;
    }
    #mobileNavDrawer .mobile-nav__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(26, 20, 16, 0.4);
      opacity: 0;
      transition: opacity 0.28s ease;
    }
    #mobileNavDrawer.is-open .mobile-nav__backdrop {
      opacity: 1;
    }
    #mobileNavDrawer .mobile-nav__panel {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      width: min(100vw, 20rem);
      max-width: 88%;
      height: 100%;
      background: #faf8f5;
      border-right: 1px solid #ece6d8;
      box-shadow: 12px 0 40px rgba(26, 20, 16, 0.12);
      transform: translateX(-100%);
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #mobileNavDrawer.is-open .mobile-nav__panel {
      transform: translateX(0);
    }
    #mobileNavDrawer .mobile-nav__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.15rem 0.75rem;
      border-bottom: 1px solid #ece6d8;
    }
    #mobileNavDrawer .mobile-nav__title {
      margin: 0;
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size: 1.15rem;
      font-weight: 400;
      color: #252138;
    }
    #mobileNavDrawer .mobile-nav__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      border: 0;
      border-radius: 0.35rem;
      background: transparent;
      color: #5a5040;
      cursor: pointer;
    }
    #mobileNavDrawer .mobile-nav__close:hover {
      background: #f0ebe2;
      color: #252138;
    }
    #mobileNavDrawer .mobile-nav__scroll {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 0.75rem 1.15rem 1.25rem;
    }
    #mobileNavDrawer .mobile-nav__section-label {
      margin: 1rem 0 0.5rem;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #9a8e78;
    }
    #mobileNavDrawer .mobile-nav__section-label:first-child {
      margin-top: 0;
    }
    #mobileNavDrawer .mobile-nav__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.7rem 0;
      border-bottom: 1px solid #ece6d8;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      color: #111111;
    }
    #mobileNavDrawer .mobile-nav__link:hover,
    #mobileNavDrawer .mobile-nav__link:focus-visible {
      color: #c6a86a;
    }
    #mobileNavDrawer .mobile-nav__link--sub {
      font-size: 10px;
      letter-spacing: 0.12em;
      color: #5a5040;
    }
    #mobileNavDrawer .mobile-nav__footer {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.85rem 1.15rem 1.15rem;
      border-top: 1px solid #ece6d8;
    }
    #mobileNavDrawer .mobile-nav__footer-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 2.75rem;
      padding: 0.55rem 1rem;
      border: 1px solid #c9a050;
      border-radius: 0.45rem;
      background: transparent;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      color: #9a7030;
      cursor: pointer;
    }
    #siteHeader .header-main-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.45rem 0.65rem;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: normal;
      text-transform: uppercase;
      color: #111111;
      border-radius: 2px;
      transition: color 0.2s ease, box-shadow 0.2s ease;
      white-space: nowrap;
    }
    #siteHeader .header-main-link:hover,
    #siteHeader .header-main-link:focus-visible {
      color: #c6a86a;
      box-shadow: 0 1px 0 0 rgba(198, 168, 106, 0.65);
    }
    #siteHeader .header-icon-btn {
      display: inline-flex;
      height: 2.35rem;
      width: 2.35rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.45rem;
      border: 1px solid rgba(17, 17, 17, 0.12);
      background: rgba(255, 255, 255, 0.35);
      color: #111111;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }
    #siteHeader .header-icon-btn:hover,
    #siteHeader .header-icon-btn:focus-visible {
      color: #c6a86a;
      border-color: rgba(198, 168, 106, 0.45);
      background: rgba(255, 255, 255, 0.65);
    }
    #siteHeader .header-login-btn {
      display: none;
      align-items: center;
      gap: 0.45rem;
      border-radius: 0.45rem;
      border: 1px solid rgba(17, 17, 17, 0.18);
      background: rgba(255, 255, 255, 0.45);
      padding: 0.45rem 0.85rem;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #111111;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }
    @media (min-width: 1024px) {
      #siteHeader .header-login-btn {
        display: inline-flex;
      }
    }
    #siteHeader .header-login-btn:hover,
    #siteHeader .header-login-btn:focus-visible {
      color: #c6a86a;
      border-color: rgba(198, 168, 106, 0.5);
      background: #fff;
    }
    #siteHeader .header-dropdown-panel {
      position: absolute;
      left: 0;
      top: calc(100% + 0.55rem);
      z-index: 60;
      min-width: 13.5rem;
      border-radius: 0.5rem;
      border: 1px solid rgba(17, 17, 17, 0.08);
      background: #fdfcf9;
      padding: 0.35rem 0;
      box-shadow: 0 14px 36px rgba(17, 17, 17, 0.08);
    }
    #siteHeader .header-dropdown-panel a {
      display: block;
      padding: 0.55rem 1rem;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: #111111;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    #siteHeader .header-dropdown-panel a:hover,
    #siteHeader .header-dropdown-panel a:focus-visible {
      background: rgba(17, 17, 17, 0.04);
      color: #c6a86a;
    }

    /* Shop mega menu */
    #siteHeader .header-primary-nav-inner {
      display: flex;
      min-width: 0;
      flex: 1 1 auto;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.125rem;
      overflow-x: auto;
      overflow-y: visible;
    }
    @media (min-width: 640px) {
      #siteHeader .header-primary-nav-inner {
        gap: 0.25rem;
      }
    }
    @media (min-width: 1024px) {
      #siteHeader .header-primary-nav-inner {
        gap: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
    @media (min-width: 1280px) {
      #siteHeader .header-primary-nav-inner {
        gap: 0.625rem;
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }
    #siteHeader .header-shop-mega {
      position: relative;
    }
    #siteHeader .header-shop-mega-trigger {
      border: 0;
      margin: 0;
      background: none;
      cursor: pointer;
      text-align: left;
      appearance: none;
      -webkit-appearance: none;
    }
    #siteHeader .header-shop-mega-trigger.header-main-link {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: normal;
      text-transform: uppercase;
      color: #111111;
      line-height: 1.25;
    }
    #siteHeader .header-shop-mega-panel {
      position: fixed;
      right: auto;
      z-index: 65;
      /* left, width, top set by script from #headerMainNavRow for content alignment */
      max-height: min(88vh, 44rem);
      overflow-y: auto;
      border-radius: 0;
      border: 1px solid rgba(17, 17, 17, 0.08);
      background: #ffffff;
      padding: 1.35rem 1.25rem 1.5rem;
      box-shadow: 0 18px 48px rgba(17, 17, 17, 0.12);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(6px);
      transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
      top: 6.5rem;
    }
    @media (min-width: 1024px) {
      #siteHeader .header-shop-mega-panel {
        padding: 1.5rem 1.35rem 1.65rem;
        transform: translateY(4px);
      }
    }
    @media (max-width: 1023px) {
      #siteHeader .header-shop-mega-panel {
        max-height: 70vh;
      }
    }
    #siteHeader .header-shop-mega-panel::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -12px;
      height: 12px;
    }
    #siteHeader .header-shop-mega:hover .header-shop-mega-panel,
    #siteHeader .header-shop-mega:focus-within .header-shop-mega-panel,
    #siteHeader .header-shop-mega.is-open .header-shop-mega-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    #siteHeader .header-shop-mega-grid {
      display: grid;
      gap: 1.35rem 1.25rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
      #siteHeader .header-shop-mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (min-width: 1024px) {
      #siteHeader .header-shop-mega-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(17rem, 22rem);
        gap: 1.5rem 1.5rem;
        align-items: stretch;
      }
    }
    @media (min-width: 1280px) {
      #siteHeader .header-shop-mega-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(19rem, 26rem);
        gap: 1.65rem 1.65rem;
      }
    }
    #siteHeader .header-shop-mega-col {
      min-width: 0;
    }
    #siteHeader .header-shop-mega-heading {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1.1rem;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #111111;
    }
    #siteHeader .header-shop-mega-heading svg {
      flex-shrink: 0;
      opacity: 0.92;
      color: #c6a86a;
    }
    #siteHeader .header-shop-mega-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #siteHeader .header-shop-mega-list li + li {
      margin-top: 0.28rem;
    }
    #siteHeader .header-shop-mega-link {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.32rem 0;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: #1a1a1a;
      text-decoration: none;
      border-radius: 0.2rem;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    #siteHeader .header-shop-mega-link:hover,
    #siteHeader .header-shop-mega-link:focus-visible {
      color: #c6a86a;
      background: rgba(198, 168, 106, 0.06);
    }
    #siteHeader .header-shop-mega-foot {
      display: inline-flex;
      margin-top: 1.15rem;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #111111;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    #siteHeader .header-shop-mega-foot:hover,
    #siteHeader .header-shop-mega-foot:focus-visible {
      color: #c6a86a;
    }
    #siteHeader .header-shop-swatch {
      flex-shrink: 0;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 9999px;
      border: 1px solid rgba(17, 17, 17, 0.08);
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
    }
    #siteHeader .header-shop-swatch--sapphire {
      background: radial-gradient(circle at 32% 28%, #93c5fd, #1d4ed8 45%, #172554);
    }
    #siteHeader .header-shop-swatch--ruby {
      background: radial-gradient(circle at 32% 28%, #fecaca, #b91c1c 48%, #450a0a);
    }
    #siteHeader .header-shop-swatch--emerald {
      background: radial-gradient(circle at 32% 28%, #86efac, #15803d 48%, #052e16);
    }
    #siteHeader .header-shop-swatch--tourmaline {
      background: radial-gradient(circle at 32% 28%, #f9a8d4, #a21caf 50%, #4a044e);
    }
    #siteHeader .header-shop-swatch--spinel {
      background: radial-gradient(circle at 32% 28%, #fbcfe8, #db2777 48%, #831843);
    }
    #siteHeader .header-shop-swatch--aquamarine {
      background: radial-gradient(circle at 32% 28%, #e0f2fe, #38bdf8 48%, #0c4a6e);
    }
    #siteHeader .header-shop-swatch--garnet {
      background: radial-gradient(circle at 32% 28%, #fecdd3, #9f1239 48%, #450a0a);
    }
    #siteHeader .header-shop-swatch--tanzanite {
      background: radial-gradient(circle at 32% 28%, #c4b5fd, #5b21b6 48%, #1e1b4b);
    }
    #siteHeader .header-shop-ico {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      color: #c6a86a;
    }
    #siteHeader .header-shop-mega-promo {
      min-width: 0;
      border-radius: 0.45rem;
      overflow: hidden;
      background: #1a1917;
      display: flex;
      flex-direction: column;
    }
    #siteHeader .header-shop-mega-promo > a {
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      position: relative;
      overflow: hidden;
    }
    #siteHeader .header-shop-mega-promo img {
      display: block;
      width: 100%;
      height: auto;
    }
    @media (min-width: 1024px) {
      #siteHeader .header-shop-mega-promo {
        align-self: stretch;
        min-height: 17.5rem;
      }
      #siteHeader .header-shop-mega-promo > a {
        flex: 1;
        min-height: 17.5rem;
      }
      #siteHeader .header-shop-mega-promo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
      }
    }
    @media (max-width: 1023px) {
      #siteHeader .header-shop-mega-promo {
        grid-column: 1 / -1;
      }
      #siteHeader .header-shop-mega-promo > a {
        aspect-ratio: 16 / 9;
        max-height: 14rem;
      }
      #siteHeader .header-shop-mega-promo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
      }
    }

    #siteHeader .header-subnav-logo-spacer,
    #siteHeader .header-subnav-actions-spacer {
      flex-shrink: 0;
      pointer-events: none;
      visibility: hidden;
    }
    @media (max-width: 1023px) {
      #siteHeader .header-subnav-logo-spacer,
      #siteHeader .header-subnav-actions-spacer {
        display: none;
      }
    }
    #siteHeader .header-subnav-bar {
      order: 3;
      display: flex;
      width: 100%;
      min-width: 0;
      flex: 1 1 100%;
      justify-content: center;
      overflow-x: auto;
    }
    @media (min-width: 1024px) {
      #siteHeader .header-subnav-bar {
        order: 0;
        width: auto;
        flex: 1 1 auto;
      }
    }
    #siteHeader .header-subnav-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      width: max-content;
      max-width: 100%;
      column-gap: clamp(1.25rem, 2.8vw, 2rem);
    }
    @media (min-width: 1024px) {
      #siteHeader .header-subnav-inner {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
    @media (min-width: 1280px) {
      #siteHeader .header-subnav-inner {
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }
    #siteHeader .header-subnav-link {
      flex: 0 0 auto;
      padding: 0.65rem 0.15rem;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgb(255, 255, 255);
      border-bottom: 2px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
    }
    #siteHeader .header-subnav-link:hover,
    #siteHeader .header-subnav-link:focus-visible {
      color: #c6a86a;
    }
    #siteHeader .header-subnav-link[aria-current="page"] {
      color: #c6a86a;
      border-bottom-color: #c6a86a;
    }
    #siteHeader .header-primary-nav {
      position: relative;
    }
    #siteHeader .header-subnav-bar,
    #siteHeader .header-primary-nav-inner {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    #siteHeader .header-subnav-bar::-webkit-scrollbar,
    #siteHeader .header-primary-nav-inner::-webkit-scrollbar {
      display: none;
    }

    /* Search Gemstones modal */
    #searchModal .search-modal-dialog {
      max-height: min(90vh, 52rem);
      display: flex;
      flex-direction: column;
    }
    #searchModal .search-modal-section-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #c6a86a;
    }
    #searchModal .search-modal-panel {
      border-radius: 0.45rem;
      background: #f7f6f3;
      padding: 0.85rem 0.75rem;
    }
    #searchModal .search-modal-suggest-link {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.45rem 0.35rem;
      border-radius: 0.25rem;
      font-size: 13px;
      font-weight: 500;
      color: #1a1a1a;
      text-decoration: none;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    #searchModal .search-modal-suggest-link:hover,
    #searchModal .search-modal-suggest-link:focus-visible {
      background: rgba(198, 168, 106, 0.08);
      color: #a88b52;
    }
    #searchModal .search-modal-suggest-chevron {
      margin-left: auto;
      font-size: 1rem;
      line-height: 1;
      color: #b8b0a4;
    }
    #searchModal .search-modal-swatch {
      flex-shrink: 0;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 9999px;
      border: 1px solid rgba(17, 17, 17, 0.08);
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
    }
    #searchModal .search-modal-swatch--sapphire {
      background: radial-gradient(circle at 32% 28%, #93c5fd, #1d4ed8 45%, #172554);
    }
    #searchModal .search-modal-swatch--ruby {
      background: radial-gradient(circle at 32% 28%, #fecaca, #b91c1c 48%, #450a0a);
    }
    #searchModal .search-modal-swatch--emerald {
      background: radial-gradient(circle at 32% 28%, #86efac, #15803d 48%, #052e16);
    }
    #searchModal .search-modal-swatch--tourmaline {
      background: radial-gradient(circle at 32% 28%, #f9a8d4, #a21caf 50%, #4a044e);
    }
    #searchModal .search-modal-swatch--spinel {
      background: radial-gradient(circle at 32% 28%, #fbcfe8, #db2777 48%, #831843);
    }
    #searchModal .search-modal-swatch--aquamarine {
      background: radial-gradient(circle at 32% 28%, #e0f2fe, #38bdf8 48%, #0c4a6e);
    }
    #searchModal .search-modal-swatch--topaz {
      background: radial-gradient(circle at 32% 28%, #fde68a, #d97706 48%, #78350f);
    }
    #searchModal .search-modal-swatch--amethyst {
      background: radial-gradient(circle at 32% 28%, #e9d5ff, #9333ea 48%, #581c87);
    }
    #searchModal .search-modal-recent-row {
      display: flex;
      align-items: center;
    }
    #searchModal .search-modal-suggest-ico {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      color: #c6a86a;
    }
    #searchModal .search-modal-body-grid {
      align-items: stretch;
    }
    #searchModal .search-modal-results-col {
      display: flex;
      min-height: 0;
      min-width: 0;
      flex-direction: column;
    }
    #searchModal .search-modal-suggest-col {
      align-self: start;
    }
    #searchModal .search-modal-results-scroll {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: thin;
    }
    @media (min-width: 1024px) {
      #searchModal .search-modal-results-scroll {
        min-height: min(52vh, 28rem);
      }
    }
    #searchModal .search-modal-result-card {
      display: flex;
      gap: 0.85rem;
      padding: 0.75rem;
      border: 1px solid #ece6d8;
      border-radius: 0.45rem;
      background: #fff;
      text-decoration: none;
      color: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #searchModal .search-modal-result-card:hover,
    #searchModal .search-modal-result-card:focus-visible {
      border-color: rgba(198, 168, 106, 0.45);
      box-shadow: 0 4px 16px rgba(26, 20, 16, 0.06);
    }
    #searchModal .search-modal-result-thumb {
      flex-shrink: 0;
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 0.35rem;
      overflow: hidden;
      background: #f4f4f4;
    }
    #searchModal .search-modal-result-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #searchModal .search-modal-badge {
      display: inline-flex;
      padding: 0.15rem 0.4rem;
      border: 1px solid rgba(196, 154, 80, 0.45);
      border-radius: 0.2rem;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #9a7030;
      white-space: nowrap;
    }
    #searchModal .search-modal-wishlist {
      flex-shrink: 0;
      padding: 0.25rem;
      color: #9a8e78;
      background: none;
      border: 0;
      cursor: pointer;
      transition: color 0.15s ease;
    }
    #searchModal .search-modal-wishlist:hover {
      color: #c6a86a;
    }
    @media (max-width: 767px) {
      #searchModal .search-modal-result-card {
        flex-wrap: wrap;
      }
      #searchModal .search-modal-result-thumb {
        width: 100%;
        height: 7rem;
      }
    }

    /* Search modal — mobile full-screen */
    @media (max-width: 1023px) {
      #searchModal {
        padding: 0;
        overflow: hidden;
      }
      #searchModal .search-modal-backdrop {
        background: #fff;
        backdrop-filter: none;
      }
      #searchModal .search-modal-dialog {
        margin: 0;
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      #searchModal .search-modal-header {
        display: grid;
        grid-template-columns: 2.5rem 1fr 2.5rem;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid #ece6d8;
      }
      #searchModal .search-modal-header .search-modal-back {
        display: inline-flex;
      }
      #searchModal .search-modal-header .search-modal-title {
        margin: 0;
        text-align: center;
        font-family: Georgia, Cambria, "Times New Roman", Times, serif;
        font-size: 1.35rem;
        font-weight: 400;
        color: #252138;
      }
      #searchModal .search-modal-header .search-modal-close-desktop {
        display: none;
      }
      #searchModal .search-modal-header .search-modal-close-mobile {
        display: inline-flex;
        justify-self: end;
      }
      #searchModal .search-modal-search-wrap {
        padding: 0.75rem 0.85rem 0.65rem;
      }
      #searchModal .search-modal-input-row {
        position: relative;
      }
      #searchModal .search-modal-input-row .search-modal-input {
        height: 2.85rem;
        padding-left: 2.65rem;
        padding-right: 4.25rem;
        border-radius: 9999px;
        font-size: 0.88rem;
      }
      #searchModal .search-modal-input-clear {
        position: absolute;
        right: 2.35rem;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: #9a8e78;
      }
      #searchModal.search-modal--has-query .search-modal-input-clear {
        display: inline-flex;
      }
      #searchModal.search-modal--has-query .search-modal-input-mic {
        display: none;
      }
      #searchModal .search-modal-body-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 0 0.85rem 1rem;
      }
      #searchModal .search-modal-body-grid {
        display: block;
        padding: 0;
        overflow: visible;
      }
      #searchModal .search-modal-suggest-col {
        display: block;
      }
      #searchModal.search-modal--has-query .search-modal-suggest-col {
        display: none;
      }
      #searchModal .search-modal-results-col {
        display: none;
      }
      #searchModal.search-modal--has-query .search-modal-results-col {
        display: flex;
      }
      #searchModal .search-modal-panel {
        background: transparent;
        padding: 0;
        margin-bottom: 1.1rem;
      }
      #searchModal .search-modal-recent-panel {
        display: block;
      }
      #searchModal .search-modal-input-mic {
        display: block;
      }
      #searchModal .search-modal-popular-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
      }
      #searchModal .search-modal-popular-grid .search-modal-suggest-link {
        justify-content: flex-start;
        gap: 0.45rem;
        padding: 0.35rem 0.65rem;
        border: 1px solid #e5dfd3;
        border-radius: 9999px;
        background: #fff;
        font-size: 0.72rem;
      }
      #searchModal .search-modal-popular-grid .search-modal-suggest-chevron {
        display: none;
      }
      #searchModal .search-modal-popular-grid .search-modal-swatch {
        width: 1.5rem;
        height: 1.5rem;
      }
      #searchModal .search-modal-suggest-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
      }
      #searchModal .search-modal-footer {
        display: flex;
      }
      #searchModal .search-modal-footer .search-modal-view-all {
        display: flex;
      }
      #searchModal .search-modal-suggest-pills .search-modal-suggest-link {
        width: auto;
        padding: 0.4rem 0.75rem;
        border: 1px solid #e5dfd3;
        border-radius: 9999px;
        background: #fff;
        font-size: 0.72rem;
      }
      #searchModal .search-modal-suggest-pills .search-modal-suggest-chevron,
      #searchModal .search-modal-suggest-pills .search-modal-swatch {
        display: none;
      }
      #searchModal .search-modal-suggest-pills .search-modal-suggest-ico {
        width: 0.85rem;
        height: 0.85rem;
      }
      #searchModal .search-modal-desktop-suggest-list {
        display: none;
      }
      #searchModal .search-modal-recent-list {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      #searchModal .search-modal-recent-item {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        padding: 0.7rem 0;
        border: 0;
        border-bottom: 1px solid #f0ebe2;
        background: transparent;
        text-align: left;
        font-size: 0.82rem;
        color: #1a1a1a;
        text-decoration: none;
      }
      #searchModal .search-modal-recent-remove {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: #b8b0a4;
        cursor: pointer;
      }
      #searchModal .search-modal-results-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
      }
      #searchModal .search-modal-results-count {
        font-size: 0.72rem;
        color: #9a8e78;
      }
      #searchModal .search-modal-results-col .search-modal-results-scroll {
        max-height: none;
      }
      #searchModal .search-modal-result-card {
        flex-wrap: nowrap;
        margin-bottom: 0.65rem;
      }
      #searchModal .search-modal-result-card .search-modal-result-thumb {
        width: 4.25rem;
        height: 4.25rem;
      }
      #searchModal .search-modal-result-card .search-modal-result-mobile-meta {
        display: flex;
      }
      #searchModal .search-modal-results-col > .mb-3 a {
        display: none;
      }
      #searchModal .search-modal-footer {
        display: flex;
        padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #ece6d8;
        background: #fff;
      }
      #searchModal .search-modal-footer .search-modal-view-all {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        min-height: 2.85rem;
        border: 0;
        border-radius: 0.4rem;
        background: #c6a86a;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
      }
      #searchModal .search-modal-footer .search-modal-view-all-desktop {
        display: none;
      }
    }
    @media (min-width: 1024px) {
      #searchModal .search-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #ece6d8;
      }
      #searchModal .search-modal-back,
      #searchModal .search-modal-close-mobile,
      #searchModal .search-modal-input-mic,
      #searchModal .search-modal-input-clear,
      #searchModal .search-modal-recent-panel,
      #searchModal .search-modal-popular-grid,
      #searchModal .search-modal-suggest-pills {
        display: none;
      }
      #searchModal .search-modal-desktop-suggest-list {
        display: block;
      }
      #searchModal .search-modal-results-col,
      #searchModal.search-modal--has-query .search-modal-suggest-col {
        display: flex !important;
      }
      #searchModal .search-modal-suggest-col {
        display: block !important;
      }
      #searchModal .search-modal-results-count {
        display: none;
      }
      #searchModal .search-modal-footer {
        display: flex;
        justify-content: flex-end;
        padding: 1rem 1.5rem;
        border-top: 1px solid #ece6d8;
      }
      #searchModal .search-modal-footer .search-modal-view-all {
        display: none;
      }
      #searchModal .search-modal-footer .search-modal-view-all-desktop {
        display: inline-flex;
      }
    }
    #searchModal .search-modal-back,
    #searchModal .search-modal-close-mobile,
    #searchModal .search-modal-close-desktop {
      align-items: center;
      justify-content: center;
      padding: 0.35rem;
      border: 0;
      border-radius: 0.35rem;
      background: transparent;
      color: #252138;
      cursor: pointer;
    }
    #searchModal .search-modal-input-mic {
      position: absolute;
      right: 0.85rem;
      top: 50%;
      transform: translateY(-50%);
      color: #9a8e78;
      pointer-events: none;
    }
    #searchModal .search-modal-body-scroll {
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1 1 auto;
    }
    #searchModal .search-modal-footer {
      flex-shrink: 0;
    }

    /* Cart drawer — header mini cart */
    #cartDrawer {
      --cart-drawer-item-height: 8.75rem;
      --cart-drawer-item-gap: 0.75rem;
      position: fixed;
      inset: 0;
      z-index: 75;
      pointer-events: none;
    }
    #cartDrawer[hidden] {
      display: none;
    }
    #cartDrawer.is-open {
      pointer-events: auto;
    }
    #cartDrawer .cart-drawer__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(26, 20, 16, 0.35);
      opacity: 0;
      transition: opacity 0.28s ease;
    }
    #cartDrawer.is-open .cart-drawer__backdrop {
      opacity: 1;
    }
    #cartDrawer .cart-drawer__panel {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      width: min(100vw, 28rem);
      max-width: 100%;
      height: 100%;
      background: #faf8f5;
      border-left: 1px solid #ece6d8;
      box-shadow: -12px 0 40px rgba(26, 20, 16, 0.12);
      transform: translateX(100%);
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #cartDrawer.is-open .cart-drawer__panel {
      transform: translateX(0);
    }
    #cartDrawer .cart-drawer__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.35rem 1.35rem 0.65rem;
    }
    #cartDrawer .cart-drawer__title {
      margin: 0;
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size: 1.65rem;
      font-weight: 400;
      line-height: 1.15;
      color: #252138;
    }
    #cartDrawer .cart-drawer__title-count {
      color: #c49a50;
    }
    #cartDrawer .cart-drawer__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      margin-top: 0.15rem;
      padding: 0;
      border: 0;
      border-radius: 0.35rem;
      background: transparent;
      color: #5a5040;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    #cartDrawer .cart-drawer__close:hover {
      background: #f0ebe2;
      color: #252138;
    }
    #cartDrawer .cart-drawer__trust {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin: 0;
      padding: 0 1.35rem 1rem;
      font-size: 0.72rem;
      font-weight: 500;
      color: #9a8e78;
    }
    #cartDrawer .cart-drawer__trust svg {
      flex-shrink: 0;
      color: #c49a50;
    }
    #cartDrawer .cart-drawer__items {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 0 1.35rem;
    }
    #cartDrawer .cart-drawer__item {
      display: grid;
      grid-template-columns: 4.5rem minmax(0, 1fr);
      gap: 0.85rem;
      padding: 0.85rem;
      margin-bottom: 0.75rem;
      border: 1px solid #ece6d8;
      border-radius: 0.55rem;
      background: #fff;
    }
    #cartDrawer .cart-drawer__item-thumb {
      display: block;
      width: 4.5rem;
      height: 4.5rem;
      overflow: hidden;
      border-radius: 0.4rem;
      background: #f5f1e8;
    }
    #cartDrawer .cart-drawer__item-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    #cartDrawer .cart-drawer__item-main {
      min-width: 0;
    }
    #cartDrawer .cart-drawer__item-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.65rem;
    }
    #cartDrawer .cart-drawer__item-name {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 600;
      color: #1a1a1a;
    }
    #cartDrawer .cart-drawer__item-origin,
    #cartDrawer .cart-drawer__item-specs {
      margin: 0.12rem 0 0;
      font-size: 0.72rem;
      color: #9a8e78;
    }
    #cartDrawer .cart-drawer__item-price {
      margin: 0;
      flex-shrink: 0;
      font-size: 0.88rem;
      font-weight: 600;
      color: #1a1a1a;
      white-space: nowrap;
    }
    #cartDrawer .cart-drawer__item-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 0.5rem;
      margin-top: 0.55rem;
    }
    #cartDrawer .cart-drawer__item-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
    }
    #cartDrawer .cart-drawer__tag {
      display: inline-flex;
      padding: 0.12rem 0.45rem;
      border: 1px solid #e0bb7f;
      border-radius: 9999px;
      font-size: 0.62rem;
      font-weight: 600;
      color: #9a7030;
      white-space: nowrap;
    }
    #cartDrawer .cart-drawer__remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      padding: 0;
      border: 0;
      border-radius: 0.3rem;
      background: transparent;
      color: #9a8e78;
      cursor: pointer;
      transition: color 0.2s ease, background-color 0.2s ease;
    }
    #cartDrawer .cart-drawer__remove:hover {
      color: #5a5040;
      background: #f5f1e8;
    }
    #cartDrawer .cart-drawer__summary {
      flex-shrink: 0;
      padding: 0.85rem 1.35rem 0.75rem;
      border-top: 1px solid #ece6d8;
    }
    #cartDrawer .cart-drawer__summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.45rem;
      font-size: 0.82rem;
      color: #5a5040;
    }
    #cartDrawer .cart-drawer__summary-row:last-child {
      margin-bottom: 0;
    }
    #cartDrawer .cart-drawer__summary-value {
      font-size: 0.95rem;
      font-weight: 700;
      color: #252138;
    }
    #cartDrawer .cart-drawer__summary-value--free {
      color: #c49a50;
    }
    #cartDrawer .cart-drawer__actions {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 0.65rem;
      margin-top: 1rem;
      padding-top: 0.15rem;
    }
    #cartDrawer .cart-drawer__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      min-height: 2.75rem;
      padding: 0.55rem 0.85rem;
      border: 1px solid #c9a050;
      border-radius: 0.45rem;
      background: transparent;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      color: #9a7030;
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    #cartDrawer .cart-drawer__btn:hover {
      border-color: #b8923f;
      background: rgba(224, 187, 127, 0.08);
      color: #7a5a1e;
    }

    /* Cart drawer — mobile: scroll products (2 visible), subtotal + buttons always on screen */
    @media (max-width: 1023px) {
      #cartDrawer .cart-drawer__panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
      #cartDrawer .cart-drawer__header,
      #cartDrawer .cart-drawer__trust,
      #cartDrawer .cart-drawer__summary {
        flex-shrink: 0;
      }
      #cartDrawer .cart-drawer__items {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(2 * var(--cart-drawer-item-height) + var(--cart-drawer-item-gap));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      #cartDrawer .cart-drawer__summary {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        background: #faf8f5;
      }
      #cartDrawer .cart-drawer__actions {
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        gap: 0.65rem;
        margin-top: 0.85rem;
      }
      #cartDrawer .cart-drawer__btn {
        display: inline-flex;
        width: 100%;
        min-height: 2.75rem;
      }
    }

/* === Cart drawer footer (only defined on shop; preserved) === */
    #cartDrawer .cart-drawer__footer {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 0.65rem;
      padding: 0 1.35rem 1.35rem;
    }

/* === SHOP page sections (shared by shop + product) === */
    /* Shop page — filters + product grid (matches vendor product_card.blade.php) */
    #shopPageSection {
      background: #f3f1ec;
    }
    #shopPageSection .shop-filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      min-height: 2.35rem;
      padding: 0.4rem 0.85rem;
      border: 1px solid #ddd4c0;
      border-radius: 0.45rem;
      background: #fff;
      font-size: 0.8rem;
      font-weight: 500;
      color: #3d3428;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    #shopPageSection .shop-filter-btn:hover {
      border-color: #c9b896;
      background: #fdfbf7;
    }
    #shopPageSection .shop-filter-btn svg {
      flex-shrink: 0;
      opacity: 0.7;
    }
    #shopPageSection .shop-filter-select-wrap {
      position: relative;
      min-width: 0;
    }
    #shopPageSection .shop-filter-select {
      appearance: none;
      min-height: 2.35rem;
      padding: 0.35rem 1.75rem 0.35rem 0.75rem;
      border: 1px solid #ddd4c0;
      border-radius: 0.45rem;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b5c3e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
      font-size: 0.78rem;
      font-weight: 500;
      color: #3d3428;
      cursor: pointer;
    }
    #shopPageSection .shop-filter-select:focus {
      outline: 2px solid rgba(224, 187, 127, 0.45);
      outline-offset: 1px;
    }
    #shopPageSection .shop-active-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.65rem;
      margin-top: 0.85rem;
      padding: 0.65rem 0.15rem 0.15rem;
      font-size: 0.82rem;
    }
    #shopPageSection .shop-active-filters__label {
      font-weight: 600;
      color: #2c2416;
    }
    #shopPageSection .shop-active-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.65rem;
      border: 1px solid rgba(224, 187, 127, 0.45);
      border-radius: 9999px;
      background: rgba(224, 187, 127, 0.12);
      font-size: 0.72rem;
      font-weight: 600;
      color: #7a5a1e;
    }
    #shopPageSection .shop-active-tag button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border: 0;
      border-radius: 9999px;
      background: #e2c189;
      color: #7a5a1e;
      font-size: 0.65rem;
      line-height: 1;
      cursor: pointer;
    }
    #shopPageSection .shop-active-clear {
      margin-left: 0.15rem;
      border: 0;
      background: none;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #c49a50;
      cursor: pointer;
    }
    #shopPageSection .shop-active-clear:hover {
      color: #9a7030;
    }
    #shopPageSection .shop-product-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
      margin-top: 1rem;
    }
    @media (min-width: 640px) {
      #shopPageSection .shop-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
      }
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.6rem;
      }
    }
    #shopPageSection .shop-product-grid.is-list-view {
      grid-template-columns: 1fr;
    }
    #shopPageSection .shop-product-card {
      border-radius: 0.75rem;
    }
    #shopPageSection .shop-product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
    #shopPageSection .shop-product-card__body {
      padding: 0.35rem 0.4rem 0.3rem;
    }
    #shopPageSection .shop-product-card__title-wrap {
      min-height: 2.65rem;
      margin-bottom: 0.15rem;
    }
    #shopPageSection .shop-product-card .gemstone-title {
      font-size: 0.7rem;
      line-height: 1.2;
    }
    @media (min-width: 640px) {
      #shopPageSection .shop-product-card .gemstone-title {
        font-size: 0.74rem;
      }
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-product-card .gemstone-title {
        font-size: 0.78rem;
      }
    }
    #shopPageSection .shop-product-card__meta {
      gap: 0.25rem;
      padding: 0.1rem 0.25rem;
    }
    #shopPageSection .shop-product-card .gemstone-price {
      font-size: 0.8rem;
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-product-card .gemstone-price {
        font-size: 0.85rem;
      }
    }
    #shopPageSection .shop-product-card .gemstone-action-btn {
      font-size: 0.62rem;
      letter-spacing: 0.03em;
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-product-card .gemstone-action-btn {
        font-size: 0.65rem;
      }
    }
    #shopPageSection .shop-product-card__divider {
      margin: 0.2rem 0;
      border-color: #e5e7eb;
    }
    #shopPageSection .shop-product-card__actions {
      padding: 0 0.1rem;
    }
    #shopPageSection .shop-card-icon-btn {
      width: 1.65rem;
      height: 1.65rem;
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-card-icon-btn {
        width: 1.75rem;
        height: 1.75rem;
      }
    }
    #shopPageSection .shop-card-icon-btn img {
      width: 0.95rem;
      height: 0.95rem;
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-card-icon-btn img {
        width: 1rem;
        height: 1rem;
      }
    }
    #shopPageSection .shop-shipping-badge img {
      height: 2.75rem;
      width: auto;
    }
    @media (min-width: 640px) {
      #shopPageSection .shop-shipping-badge img {
        height: 3rem;
      }
    }
    /* All Filters — expanded panel (shop mockup) */
    #shopPageSection .shop-filters-card {
      background: #fff;
      border: 1px solid #e5e0d6;
      border-radius: 0.65rem;
      overflow: visible;
    }
    #shopPageSection .shop-filters-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.75rem;
      padding: 0.85rem 1rem;
    }
    #shopPageSection .shop-all-filters-btn.is-active {
      border-color: #c9a050;
      color: #9a7030;
      background: #fdfbf7;
      box-shadow: 0 0 0 1px rgba(201, 160, 80, 0.2);
    }
    #shopPageSection .shop-filter-pills {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem;
      min-width: 0;
    }
    #shopPageSection .shop-gemtype-filter .shop-gemtype-trigger {
      min-width: 0;
      width: auto;
    }
    #shopPageSection .shop-sort-wrap {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin-left: auto;
      flex-shrink: 0;
    }
    #shopPageSection .shop-sort-wrap__label {
      font-size: 0.78rem;
      font-weight: 500;
      color: #6b5c3e;
      white-space: nowrap;
    }
    #shopPageSection .shop-sort-select {
      min-width: 7rem;
    }
    #shopPageSection .shop-filters-card .shop-active-filters {
      margin-top: 0;
      padding: 0 1rem 0.75rem;
      border-top: 1px solid #f0ebe2;
    }
    #shopPageSection .shop-filters-panel {
      border-top: 1px solid #ebe4d6;
      padding: 1rem 1rem 0;
    }
    #shopPageSection .shop-filters-panel[hidden] {
      display: none;
    }
    #shopPageSection .shop-filters-panel__grids {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.25rem;
      row-gap: 1rem;
    }
    @media (min-width: 768px) {
      #shopPageSection .shop-filters-panel__grids {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (min-width: 1024px) {
      #shopPageSection .shop-filters-panel__grids {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
    #shopPageSection .shop-filters-panel__grid {
      display: contents;
    }
    #shopPageSection .shop-filters-panel__row-divider {
      grid-column: 1 / -1;
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-top: 1px solid #f0ebe2;
    }
    #shopPageSection .shop-filter-group {
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 0;
    }
    #shopPageSection .shop-filter-group__title {
      margin: 0 0 0.5rem;
      padding: 0;
      font-size: 0.8rem;
      font-weight: 700;
      color: #2c2416;
    }
    #shopPageSection .shop-filter-check {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.35rem;
      font-size: 0.76rem;
      font-weight: 500;
      color: #3d3428;
      cursor: pointer;
    }
    #shopPageSection .shop-filter-check input {
      width: 0.9rem;
      height: 0.9rem;
      accent-color: #c9a050;
      flex-shrink: 0;
    }
    #shopPageSection .shop-filter-more-link {
      margin-top: 0.15rem;
      padding: 0;
      border: 0;
      background: none;
      font-size: 0.72rem;
      font-weight: 600;
      color: #9a7030;
      cursor: pointer;
    }
    #shopPageSection .shop-filter-more-link:hover {
      color: #7a5a1e;
      text-decoration: underline;
    }
    #shopPageSection .shop-range-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem;
    }
    #shopPageSection .shop-range-input {
      width: 3.5rem;
      min-height: 2rem;
      padding: 0.3rem 0.45rem;
      border: 1px solid #ddd4c0;
      border-radius: 0.35rem;
      font-size: 0.75rem;
      color: #2c2416;
    }
    #shopPageSection .shop-range-input::placeholder {
      color: #9a8f7a;
    }
    #shopPageSection .shop-range-sep {
      font-size: 0.72rem;
      color: #6b5c3e;
    }
    #shopPageSection .shop-range-unit {
      min-height: 2rem;
      padding: 0.25rem 0.4rem;
      border: 1px solid #ddd4c0;
      border-radius: 0.35rem;
      font-size: 0.72rem;
      background: #fff;
    }
    #shopPageSection .shop-filters-panel__footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.65rem;
      padding: 0.85rem 0 1rem;
    }
    #shopPageSection .shop-filters-panel__reset {
      min-height: 2.35rem;
      padding: 0.4rem 1.1rem;
      border: 1px solid #ddd4c0;
      border-radius: 0.4rem;
      background: #fff;
      font-size: 0.78rem;
      font-weight: 600;
      color: #3d3428;
      cursor: pointer;
    }
    #shopPageSection .shop-filters-panel__reset:hover {
      border-color: #c9b896;
      background: #fdfbf7;
    }
    #shopPageSection .shop-filters-panel__apply {
      min-height: 2.35rem;
      padding: 0.4rem 1.25rem;
      border: 1px solid #c9a050;
      border-radius: 0.4rem;
      background: #c9a050;
      font-size: 0.78rem;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
    }
    #shopPageSection .shop-filters-panel__apply:hover {
      background: #b8923f;
      border-color: #b8923f;
    }

    /* Gem Type — custom dropdown + modal */
    #shopPageSection .shop-gemtype-filter {
      z-index: 30;
    }
    #shopPageSection .shop-gemtype-filter.is-open {
      z-index: 40;
    }
    #shopPageSection .shop-gemtype-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      min-width: 7.25rem;
      width: 100%;
      text-align: left;
      background-image: none;
      padding-right: 0.75rem;
    }
    #shopPageSection .shop-gemtype-trigger.is-active,
    #shopPageSection .shop-gemtype-filter.is-open .shop-gemtype-trigger,
    #shopPageSection .shop-gemtype-filter.is-open .shop-filter-btn.shop-gemtype-trigger {
      border-color: #c9a050;
      box-shadow: 0 0 0 1px rgba(201, 160, 80, 0.25);
    }
    #shopPageSection .shop-gemtype-trigger__chevron {
      flex-shrink: 0;
      opacity: 0.65;
      transition: transform 0.2s ease;
    }
    #shopPageSection .shop-gemtype-filter.is-open .shop-gemtype-trigger__chevron {
      transform: rotate(180deg);
    }
    #shopPageSection .shop-gemtype-panel {
      position: absolute;
      top: calc(100% + 0.35rem);
      left: 0;
      z-index: 50;
      min-width: 15.5rem;
      padding: 0.35rem 0;
      border: 1px solid #e5e0d6;
      border-radius: 0.55rem;
      background: #faf8f4;
      box-shadow: 0 14px 36px rgba(44, 36, 22, 0.14);
    }
    #shopPageSection .shop-gemtype-panel[hidden] {
      display: none;
    }
    #shopPageSection .shop-gemtype-panel__list {
      list-style: none;
      margin: 0;
      padding: 0.2rem 0;
    }
    #shopPageSection .shop-gemtype-option {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      width: 100%;
      padding: 0.55rem 0.85rem;
      border: 0;
      background: transparent;
      font-size: 0.82rem;
      font-weight: 500;
      color: #2c2416;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.15s ease;
    }
    #shopPageSection .shop-gemtype-option:hover,
    #shopPageSection .shop-gemtype-option:focus-visible {
      background: rgba(224, 187, 127, 0.14);
      outline: none;
    }
    #shopPageSection .shop-gemtype-panel__view-all {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 100%;
      margin-top: 0.15rem;
      padding: 0.7rem 0.85rem 0.55rem;
      border: 0;
      border-top: 1px solid #ebe4d6;
      background: transparent;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #9a7030;
      cursor: pointer;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    #shopPageSection .shop-gemtype-panel__view-all:hover {
      color: #7a5a1e;
      background: rgba(224, 187, 127, 0.08);
    }
    .gem-swatch {
      flex-shrink: 0;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 9999px;
      border: 1px solid rgba(17, 17, 17, 0.08);
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
    }
    .gem-swatch--sapphire { background: radial-gradient(circle at 32% 28%, #93c5fd, #1d4ed8 45%, #172554); }
    .gem-swatch--ruby { background: radial-gradient(circle at 32% 28%, #fecaca, #b91c1c 48%, #450a0a); }
    .gem-swatch--emerald { background: radial-gradient(circle at 32% 28%, #86efac, #15803d 48%, #052e16); }
    .gem-swatch--tourmaline { background: radial-gradient(circle at 32% 28%, #f9a8d4, #a21caf 50%, #4a044e); }
    .gem-swatch--spinel { background: radial-gradient(circle at 32% 28%, #fbcfe8, #db2777 48%, #831843); }
    .gem-swatch--aquamarine { background: radial-gradient(circle at 32% 28%, #e0f2fe, #38bdf8 48%, #0c4a6e); }
    .gem-swatch--garnet { background: radial-gradient(circle at 32% 28%, #fca5a5, #7f1d1d 50%, #450a0a); }
    .gem-swatch--tanzanite { background: radial-gradient(circle at 32% 28%, #c4b5fd, #5b21b6 50%, #2e1065); }
    .gem-swatch--alexandrite { background: radial-gradient(circle at 32% 28%, #a7f3d0, #059669 45%, #064e3b); }
    .gem-swatch--amethyst { background: radial-gradient(circle at 32% 28%, #ddd6fe, #7c3aed 48%, #4c1d95); }
    .gem-swatch--beryl { background: radial-gradient(circle at 32% 28%, #d9f99d, #65a30d 48%, #365314); }
    .gem-swatch--chrysoberyl { background: radial-gradient(circle at 32% 28%, #fde68a, #ca8a04 48%, #713f12); }
    .gem-swatch--citrine { background: radial-gradient(circle at 32% 28%, #fde68a, #eab308 48%, #854d0e); }
    .gem-swatch--kunzite { background: radial-gradient(circle at 32% 28%, #fbcfe8, #ec4899 48%, #9d174d); }
    .gem-swatch--morganite { background: radial-gradient(circle at 32% 28%, #fce7f3, #f472b6 48%, #9d174d); }
    .gem-swatch--opal { background: radial-gradient(circle at 32% 28%, #e0e7ff, #94a3b8 45%, #475569); }
    .gem-swatch--peridot { background: radial-gradient(circle at 32% 28%, #bef264, #4d7c0f 48%, #1a2e05); }
    .gem-swatch--topaz { background: radial-gradient(circle at 32% 28%, #bae6fd, #0284c7 48%, #0c4a6e); }
    .gem-swatch--zircon { background: radial-gradient(circle at 32% 28%, #e2e8f0, #64748b 48%, #1e293b); }
    .gem-swatch--pearl { background: radial-gradient(circle at 32% 28%, #fafafa, #d4d4d4 48%, #a3a3a3); }
    .gem-swatch--quartz { background: radial-gradient(circle at 32% 28%, #f5f5f4, #d6d3d1 48%, #78716c); }
    .gem-swatch--moissanite { background: radial-gradient(circle at 32% 28%, #f8fafc, #cbd5e1 40%, #64748b); }

    #gemTypeModal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    #gemTypeModal[hidden] {
      display: none;
    }
    #gemTypeModal .gem-type-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 18, 14, 0.52);
      backdrop-filter: blur(2px);
    }
    #gemTypeModal .gem-type-modal__dialog {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(920px, 100%);
      max-height: min(88vh, 720px);
      border-radius: 0.65rem;
      background: #fff;
      box-shadow: 0 24px 64px rgba(22, 18, 14, 0.22);
      overflow: hidden;
    }
    #gemTypeModal .gem-type-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid #ebe4d6;
    }
    #gemTypeModal .gem-type-modal__title {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.35rem;
      font-weight: 400;
      color: #2c2416;
    }
    #gemTypeModal .gem-type-modal__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border: 0;
      border-radius: 0.35rem;
      background: transparent;
      color: #6b5c3e;
      cursor: pointer;
      transition: background-color 0.15s ease;
    }
    #gemTypeModal .gem-type-modal__close:hover {
      background: #f7f0e4;
    }
    #gemTypeModal .gem-type-modal__body {
      display: grid;
      grid-template-columns: 11.5rem minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
    }
    @media (max-width: 640px) {
      #gemTypeModal .gem-type-modal__body {
        grid-template-columns: 1fr;
      }
      #gemTypeModal .gem-type-modal__sidebar {
        display: none;
      }
    }
    #gemTypeModal .gem-type-modal__sidebar {
      display: flex;
      flex-direction: column;
      padding: 0.75rem 0;
      border-right: 1px solid #ebe4d6;
      background: #fdfbf7;
    }
    #gemTypeModal .gem-type-modal__nav-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      padding: 0.7rem 1rem;
      border: 0;
      background: transparent;
      font-size: 0.78rem;
      font-weight: 500;
      color: #3d3428;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    #gemTypeModal .gem-type-modal__nav-btn.is-active {
      background: rgba(224, 187, 127, 0.18);
      color: #2c2416;
      font-weight: 600;
    }
    #gemTypeModal .gem-type-modal__nav-btn.is-active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.35rem;
      bottom: 0.35rem;
      width: 3px;
      border-radius: 0 2px 2px 0;
      background: #c9a050;
    }
    #gemTypeModal .gem-type-modal__nav-icon {
      width: 0.9rem;
      height: 0.9rem;
      color: #c9a050;
    }
    #gemTypeModal .gem-type-modal__clear {
      margin-top: auto;
      padding: 0.85rem 1rem;
      border: 0;
      background: transparent;
      font-size: 0.72rem;
      font-weight: 600;
      color: #9a7030;
      text-align: left;
      cursor: pointer;
    }
    #gemTypeModal .gem-type-modal__clear:hover {
      color: #7a5a1e;
    }
    #gemTypeModal .gem-type-modal__main {
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 1rem 1.15rem 0.5rem;
    }
    #gemTypeModal .gem-type-modal__toolbar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }
    #gemTypeModal .gem-type-modal__search-wrap {
      position: relative;
      flex: 1 1 auto;
    }
    #gemTypeModal .gem-type-modal__search {
      width: 100%;
      min-height: 2.35rem;
      padding: 0.45rem 2.25rem 0.45rem 0.75rem;
      border: 1px solid #ddd4c0;
      border-radius: 0.4rem;
      font-size: 0.8rem;
      color: #2c2416;
    }
    #gemTypeModal .gem-type-modal__search:focus {
      outline: 2px solid rgba(224, 187, 127, 0.45);
      outline-offset: 1px;
      border-color: #c9b896;
    }
    #gemTypeModal .gem-type-modal__search-icon {
      position: absolute;
      right: 0.65rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      color: #9a8f7a;
      pointer-events: none;
    }
    #gemTypeModal .gem-type-modal__count {
      flex-shrink: 0;
      font-size: 0.72rem;
      font-weight: 500;
      color: #9a8f7a;
      white-space: nowrap;
    }
    #gemTypeModal .gem-type-modal__list-head {
      margin: 0 0 0.5rem;
      font-size: 0.88rem;
      font-weight: 700;
      color: #2c2416;
    }
    #gemTypeModal .gem-type-modal__scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 0.25rem;
    }
    #gemTypeModal .gem-type-modal__letter {
      margin: 0.65rem 0 0.35rem;
      font-size: 0.82rem;
      font-weight: 700;
      color: #2c2416;
    }
    #gemTypeModal .gem-type-modal__letter:first-child {
      margin-top: 0;
    }
    #gemTypeModal .gem-type-modal__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.15rem 0.5rem;
    }
    @media (max-width: 768px) {
      #gemTypeModal .gem-type-modal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    #gemTypeModal .gem-type-modal__item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.35rem;
      border-radius: 0.35rem;
      cursor: pointer;
      transition: background-color 0.12s ease;
    }
    #gemTypeModal .gem-type-modal__item:hover {
      background: #faf8f4;
    }
    #gemTypeModal .gem-type-modal__item input {
      flex-shrink: 0;
      width: 0.95rem;
      height: 0.95rem;
      accent-color: #c9a050;
      cursor: pointer;
    }
    #gemTypeModal .gem-type-modal__item .gem-swatch {
      width: 1.5rem;
      height: 1.5rem;
    }
    #gemTypeModal .gem-type-modal__item-name {
      font-size: 0.78rem;
      font-weight: 500;
      color: #2c2416;
    }
    #gemTypeModal .gem-type-modal__footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.65rem;
      padding: 0.85rem 1.15rem;
      border-top: 1px solid #ebe4d6;
      background: #fff;
    }
    #gemTypeModal .gem-type-modal__btn {
      min-width: 5.5rem;
      min-height: 2.35rem;
      padding: 0.4rem 1.1rem;
      border-radius: 0.4rem;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    #gemTypeModal .gem-type-modal__btn--cancel {
      border: 1px solid #ddd4c0;
      background: #fff;
      color: #3d3428;
    }
    #gemTypeModal .gem-type-modal__btn--cancel:hover {
      border-color: #c9b896;
      background: #fdfbf7;
    }
    #gemTypeModal .gem-type-modal__btn--apply {
      border: 1px solid #c9a050;
      background: #c9a050;
      color: #fff;
    }
    #gemTypeModal .gem-type-modal__btn--apply:hover {
      background: #b8923f;
      border-color: #b8923f;
    }

    #shopPageSection .gemstone-title {
      font-family: 'The Youngest Serif', Georgia, 'Times New Roman', serif;
    }
    #shopPageSection .gemstone-price,
    #shopPageSection .gemstone-action-btn {
      font-family: Arial, 'Arial Unicode MS', sans-serif;
    }
    #shopPageSection .icon-bold {
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    #shopPageSection .icon-filter-gold {
      filter: invert(73%) sepia(42%) saturate(362%) hue-rotate(355deg) brightness(96%) contrast(90%);
    }
    @media (min-width: 768px) {
      #shopPageSection .shop-product-card {
        position: relative;
        overflow: hidden;
      }
      #shopPageSection .shop-product-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid transparent;
        border-radius: inherit;
        pointer-events: none;
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
      }
      #shopPageSection .shop-product-card:hover::after {
        border-color: #E0BB7F;
        box-shadow: 0 0 14px rgba(224, 187, 127, 0.45);
      }
    }
    #shopPageSection .product-thumb-img {
      height: auto;
      max-width: 100%;
      object-fit: cover;
      aspect-ratio: 1 / 1;
    }

/* === STORES page sections === */
    /* ═══ Stores page sections ═══ */
    :root {
      --site-header-h: 7.5rem;
    }
    .stores-page-main {
      background: #faf8f4;
    }
    #storesPageHero {
      position: relative;
      display: flex;
      align-items: center;
      height: calc(100vh - var(--site-header-h, 7.5rem));
      height: calc(100dvh - var(--site-header-h, 7.5rem));
      min-height: calc(100vh - var(--site-header-h, 7.5rem));
      min-height: calc(100dvh - var(--site-header-h, 7.5rem));
      max-height: calc(100dvh - var(--site-header-h, 7.5rem));
      overflow: hidden;
      border-bottom: 1px solid #ece6d8;
      box-sizing: border-box;
    }
    #storesPageHero .stores-banner-hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center right;
      pointer-events: none;
    }
    #storesPageHero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        90deg,
        rgba(250, 248, 244, 0.72) 0%,
        rgba(250, 248, 244, 0.45) 42%,
        rgba(250, 248, 244, 0.15) 58%,
        transparent 70%
      );
      pointer-events: none;
    }
    #storesPageHero .stores-banner-hero__inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 90rem;
      height: 100%;
      margin: 0 auto;
      padding: clamp(1.25rem, 3vh, 2.5rem) 1rem;
      box-sizing: border-box;
    }
    @media (min-width: 640px) {
      #storesPageHero .stores-banner-hero__inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    @media (min-width: 1024px) {
      #storesPageHero .stores-banner-hero__inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
      }
    }
    #storesPageHero .stores-banner-hero__content {
      max-width: 100%;
    }
    @media (min-width: 1024px) {
      #storesPageHero .stores-banner-hero__content {
        max-width: 42%;
      }
    }
    #storesPageHero .stores-banner-hero__trusted {
      display: block;
      margin: 0 0 0.2rem;
      font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-style: italic;
      font-weight: 400;
      line-height: 1.15;
      color: #c19a6b;
    }
    #storesPageHero .stores-banner-hero__title {
      display: block;
      margin: 0;
      font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
      font-size: clamp(2rem, 4.5vw, 3.35rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: #2b2b2b;
    }
    #storesPageHero .stores-banner-hero__divider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1.1rem 0 1rem;
      max-width: 26rem;
    }
    #storesPageHero .stores-banner-hero__divider-line {
      flex: 1;
      height: 1px;
      background: #c19a6b;
      opacity: 0.85;
    }
    #storesPageHero .stores-banner-hero__divider-gem {
      flex-shrink: 0;
      width: 0.45rem;
      height: 0.45rem;
      transform: rotate(45deg);
      background: #c19a6b;
    }
    #storesPageHero .stores-banner-hero__desc {
      margin: 0;
      max-width: 26rem;
      font-family: 'Gantari', system-ui, sans-serif;
      font-size: clamp(0.84rem, 1.5vw, 0.98rem);
      font-weight: 400;
      line-height: 1.7;
      color: #555555;
    }
    #storesPageHero .stores-banner-hero__features {
      display: flex;
      align-items: stretch;
      margin: clamp(1.25rem, 3vh, 2rem) 0 0;
      padding: 0;
      list-style: none;
      max-width: 36rem;
    }
    #storesPageHero .stores-banner-hero__feature {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0.55rem;
      padding: 0 0.65rem;
      text-align: center;
    }
    #storesPageHero .stores-banner-hero__feature:not(:first-child) {
      border-left: 1px solid rgba(90, 80, 64, 0.22);
    }
    #storesPageHero .stores-banner-hero__feature-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c19a6b;
    }
    #storesPageHero .stores-banner-hero__feature-icon svg {
      width: 1.65rem;
      height: 1.65rem;
    }
    #storesPageHero .stores-banner-hero__feature-label {
      font-family: 'Gantari', system-ui, sans-serif;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 1.35;
      text-transform: uppercase;
      color: #555555;
      max-width: 5.5rem;
    }
    @media (max-width: 767px) {
      #storesPageHero .stores-banner-hero__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0;
        max-width: 100%;
      }
      #storesPageHero .stores-banner-hero__feature {
        padding: 0 0.5rem 0.75rem;
      }
      #storesPageHero .stores-banner-hero__feature:not(:first-child) {
        border-left: 0;
      }
      #storesPageHero .stores-banner-hero__feature:nth-child(odd) {
        border-right: 1px solid rgba(90, 80, 64, 0.22);
      }
      #storesPageHero .stores-banner-hero__feature:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(90, 80, 64, 0.22);
        padding-bottom: 1rem;
      }
    }
    @media (max-width: 1023px) {
      #storesPageHero::before {
        background: linear-gradient(
          90deg,
          rgba(250, 248, 244, 0.96) 0%,
          rgba(250, 248, 244, 0.88) 55%,
          rgba(250, 248, 244, 0.5) 75%,
          transparent 90%
        );
      }
    }
    @media (max-width: 639px) {
      #storesPageHero .stores-banner-hero__bg {
        object-position: 65% center;
      }
    }
    @media (max-height: 720px) {
      #storesPageHero .stores-banner-hero__title {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
      }
      #storesPageHero .stores-banner-hero__divider {
        margin: 0.65rem 0 0.55rem;
      }
      #storesPageHero .stores-banner-hero__desc {
        font-size: 0.8rem;
        line-height: 1.5;
      }
    }
    .store-luxury-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      border-radius: 0.75rem;
      border: 1px solid rgba(198, 165, 108, 0.32);
      background: #fff;
      box-shadow: 0 4px 18px rgba(122, 95, 44, 0.06);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .store-luxury-card:hover {
      transform: translateY(-2px);
      border-color: rgba(181, 144, 71, 0.55);
      box-shadow: 0 10px 28px rgba(122, 95, 44, 0.1);
    }
    .store-luxury-card__media-wrap {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: linear-gradient(135deg, #f7eed8 0%, #fbf4e2 100%);
    }
    .store-luxury-card__media-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.45s ease;
    }
    .store-luxury-card:hover .store-luxury-card__media-wrap img {
      transform: scale(1.04);
    }
    .store-luxury-card__featured-badge {
      position: absolute;
      top: 0.65rem;
      left: 0.65rem;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.28rem 0.55rem;
      border-radius: 0.25rem;
      background: #e0bb7f;
      color: #1a1a1a;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .store-luxury-card__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 0.85rem 1rem 1rem;
    }
    .store-luxury-card__name {
      margin: 0 0 0.35rem;
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size: 1rem;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1.2;
    }
    .store-luxury-card__location {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin: 0 0 0.5rem;
      font-size: 0.72rem;
      color: #9a8e78;
    }
    .store-luxury-card__spec-label {
      margin: 0 0 0.35rem;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #9a8e78;
    }
    .store-luxury-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-bottom: 0.75rem;
    }
    .store-luxury-card__tag {
      padding: 0.2rem 0.55rem;
      border-radius: 9999px;
      border: 1px solid #e5dcc8;
      background: #faf8f4;
      font-size: 0.68rem;
      color: #5a5040;
    }
    .store-luxury-card__stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.35rem;
      margin-bottom: 0.85rem;
      padding-top: 0.65rem;
      border-top: 1px solid #ece6d8;
    }
    .store-luxury-card__stat {
      text-align: center;
    }
    .store-luxury-card__stat-value {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: #1a1a1a;
    }
    .store-luxury-card__stat-label {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.6rem;
      color: #9a8e78;
      text-transform: capitalize;
    }
    .store-luxury-card__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: auto;
      padding: 0.55rem 1rem;
      border-radius: 0.4rem;
      border: 1px solid #c49a50;
      background: transparent;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      color: #9a7030;
      text-decoration: none;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .store-luxury-card__cta:hover {
      background: rgba(224, 187, 127, 0.12);
      color: #7a5a20;
    }
    #featuredStoresSection .stores-glide,
    #storesNewProductsSection .stores-glide {
      overflow: hidden;
    }
    #featuredStoresSection .stores-glide .glide__slides,
    #storesNewProductsSection .stores-glide .glide__slides {
      align-items: stretch;
    }
    #featuredStoresSection .stores-glide .glide__slide,
    #storesNewProductsSection .stores-glide .glide__slide {
      display: flex;
      height: auto;
    }
    #featuredStoresSection .stores-glide .glide__slide > *,
    #storesNewProductsSection .stores-glide .glide__slide > * {
      width: 100%;
    }
    #featuredStoresSection .stores-glide-arrow,
    #storesNewProductsSection .stores-glide-arrow {
      display: inline-flex;
      height: 2.5rem;
      width: 2.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 1px solid #ddd4b8;
      background: #fff;
      color: #5a5040;
      transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    }
    #featuredStoresSection .stores-glide-arrow:hover,
    #storesNewProductsSection .stores-glide-arrow:hover {
      border-color: rgba(198, 165, 108, 0.85);
      color: #1a1a1a;
      background: #fffdf9;
    }
    #exploreGemTypeSection .stores-gem-type-header__left {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem 1.25rem;
    }
    #exploreGemTypeSection .stores-gem-type-search {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: min(100%, 16rem);
      max-width: 20rem;
      flex: 1 1 14rem;
      padding: 0.5rem 0.85rem;
      border: 1px solid #ddd4b8;
      border-radius: 0.5rem;
      background: #fff;
    }
    #exploreGemTypeSection .stores-gem-type-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      background: transparent;
      font-size: 0.82rem;
      color: #1a1a1a;
      outline: none;
    }
    #exploreGemTypeSection .stores-gem-type-search input::placeholder {
      color: #9a8e78;
    }
    #exploreGemTypeSection .stores-gem-type-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0.5rem;
      border-radius: 0.75rem;
      transition: background-color 0.2s ease;
    }
    #exploreGemTypeSection .stores-gem-type-tile:hover {
      background: rgba(224, 187, 127, 0.08);
    }
    #exploreGemTypeSection .stores-gem-type-tile__img {
      width: 5.5rem;
      height: 5.5rem;
      border-radius: 9999px;
      overflow: hidden;
      border: 2px solid rgba(198, 165, 108, 0.35);
      background: linear-gradient(135deg, #f7eed8, #fbf4e2);
    }
    @media (min-width: 640px) {
      #exploreGemTypeSection .stores-gem-type-tile__img {
        width: 6.25rem;
        height: 6.25rem;
      }
    }
    #exploreGemTypeSection .stores-gem-type-tile__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #exploreGemTypeSection .stores-gem-type-tile__name {
      margin: 0.65rem 0 0.2rem;
      font-size: 0.88rem;
      font-weight: 600;
      color: #1a1a1a;
    }
    #exploreGemTypeSection .stores-gem-type-tile__count {
      margin: 0;
      font-size: 0.72rem;
      color: #9a8e78;
    }
    #allVerifiedStoresSection .stores-filter-select {
      appearance: none;
      padding: 0.45rem 2rem 0.45rem 0.75rem;
      border: 1px solid #ddd4b8;
      border-radius: 0.4rem;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5040' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
      font-size: 0.78rem;
      color: #5a5040;
      cursor: pointer;
    }
    #allVerifiedStoresSection .stores-pagination {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      margin-top: 2.5rem;
    }
    #allVerifiedStoresSection .stores-pagination__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.25rem;
      height: 2.25rem;
      padding: 0 0.5rem;
      border-radius: 0.35rem;
      border: 1px solid #ddd4b8;
      background: #fff;
      font-size: 0.82rem;
      color: #5a5040;
      transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    #allVerifiedStoresSection .stores-pagination__btn:hover {
      border-color: #c49a50;
    }
    #allVerifiedStoresSection .stores-pagination__btn.is-active {
      border-color: #c49a50;
      background: #e0bb7f;
      color: #fff;
      font-weight: 600;
    }
    #storesNewProductsSection .stores-product-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      border-radius: 1rem;
      border: 1px solid rgba(198, 165, 108, 0.34);
      background: #fdf8ec;
      box-shadow: 0 10px 22px rgba(122, 95, 44, 0.08);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    #storesNewProductsSection .stores-product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(122, 95, 44, 0.12);
    }
    #storesNewProductsSection .stores-product-card__media {
      display: block;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: linear-gradient(135deg, #f7eed8 0%, #fbf4e2 55%, #f1e6cc 100%);
    }
    #storesNewProductsSection .stores-product-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    #storesNewProductsSection .stores-product-card:hover .stores-product-card__media img {
      transform: scale(1.04);
    }
    #storesNewProductsSection .stores-product-card__body {
      padding: 0.65rem 0.75rem 0.75rem;
    }
    #storesNewProductsSection .stores-product-card__title {
      margin: 0;
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size: 0.82rem;
      line-height: 1.25;
      color: #2f2419;
    }
    #storesNewProductsSection .stores-product-card__price {
      margin: 0.4rem 0 0.55rem;
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: #9f7a39;
    }
    #storesNewProductsSection .stores-product-card__actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.35rem;
      padding-top: 0.5rem;
      border-top: 1px solid rgba(198, 165, 108, 0.22);
    }
    #storesNewProductsSection .stores-product-card__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 1.75rem;
      width: 100%;
      border-radius: 9999px;
      border: 1px solid rgba(198, 165, 108, 0.55);
      background: rgba(255, 251, 240, 0.92);
      color: #5b4a2d;
      transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
    }
    #storesNewProductsSection .stores-product-card__action:hover {
      transform: translateY(-1px);
      border-color: rgba(181, 144, 71, 0.92);
      background: #fffdf6;
    }
    #storesNewProductsSection .stores-product-card__action svg {
      width: 0.85rem;
      height: 0.85rem;
    }

/* === PRODUCT detail page === */
      /* ---- Product detail page (scoped to #productPage) ---- */
      #productPage .pd-card { background:#fff; border:1px solid #ECE6D8; border-radius:14px; }
      #productPage .pd-divider { border-color:#ECE6D8; }
      #productPage .pd-cta { transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
      #productPage .pd-cta:hover { transform:translateY(-1px); }

      /* Gallery thumbnails */
      #productPage .pd-thumb { border:1.5px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; background:#F5F1E8; }
      #productPage .pd-thumb.is-active { border-color:#C49A50; box-shadow:0 0 0 2px rgba(224,187,127,.28); }
      #productPage .pd-thumb:hover { border-color:#DDD4B8; }

      /* Spec rows */
      #productPage .pd-spec { display:flex; align-items:center; gap:.65rem; padding:.7rem .85rem; border:1px solid #ECE6D8; border-radius:10px; background:#fff; }
      #productPage .pd-spec__ico { flex:0 0 auto; color:#C49A50; }
      #productPage .pd-spec__label { font-size:.7rem; letter-spacing:.04em; color:#9A8E78; }
      #productPage .pd-spec__value { font-size:.86rem; color:#1A1A1A; font-weight:500; }

      /* "You may also like" scroll row */
      #productPage .pd-scroll { display:flex; gap:1rem; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; padding-bottom:.25rem; }
      #productPage .pd-scroll::-webkit-scrollbar { display:none; }
      #productPage .pd-rel-card { scroll-snap-align:start; flex:0 0 auto; width:15.5rem; max-width:78vw; }
      #productPage .pd-arrow { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:9999px; border:1px solid #ECE6D8; background:#fff; color:#1A1A1A; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
      #productPage .pd-arrow:hover { background:#1A1A1A; color:#fff; border-color:#1A1A1A; }

      @media (prefers-reduced-motion: reduce) {
        #productPage .pd-scroll { scroll-behavior:auto; }
        #productPage .pd-cta:hover { transform:none; }
      }

      /* Shop-page product card styling, re-scoped for the related row (originals are scoped to #shopPageSection) */
      #pdRelatedScroll .shop-product-card { border-radius: 0.75rem; }
      #pdRelatedScroll .shop-product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
      #pdRelatedScroll .shop-product-card__body { padding: 0.55rem 0.6rem 0.5rem; }
      #pdRelatedScroll .shop-product-card__title-wrap { min-height: 2.9rem; margin-bottom: 0.15rem; }
      #pdRelatedScroll .shop-product-card .gemstone-title { font-family: 'The Youngest Serif', Georgia, 'Times New Roman', serif; font-size: 0.82rem; line-height: 1.25; }
      #pdRelatedScroll .shop-product-card__meta { gap: 0.25rem; padding: 0.1rem 0.25rem; }
      #pdRelatedScroll .shop-product-card .gemstone-price { font-family: Arial, 'Arial Unicode MS', sans-serif; font-size: 0.9rem; }
      #pdRelatedScroll .shop-product-card .gemstone-action-btn { font-family: Arial, 'Arial Unicode MS', sans-serif; font-size: 0.68rem; letter-spacing: 0.03em; }
      #pdRelatedScroll .shop-product-card__divider { margin: 0.3rem 0; border-color: #e5e7eb; }
      #pdRelatedScroll .shop-product-card__actions { padding: 0 0.1rem; }
      #pdRelatedScroll .shop-card-icon-btn { width: 1.85rem; height: 1.85rem; }
      #pdRelatedScroll .shop-card-icon-btn img { width: 1rem; height: 1rem; }
      #pdRelatedScroll .shop-shipping-badge img { height: 2.85rem; width: auto; }
      #pdRelatedScroll .icon-bold { transition: filter 0.2s ease, transform 0.2s ease; }
      #pdRelatedScroll .icon-filter-gold { filter: invert(73%) sepia(42%) saturate(362%) hue-rotate(355deg) brightness(96%) contrast(90%); }
      #pdRelatedScroll .product-thumb-img { height: auto; max-width: 100%; }

/* ============================================================
   MY FAVORITES / WISHLIST (#wishlistPage)
   ============================================================ */
    #wishlistPage {
      font-family: 'Gantari', system-ui, sans-serif;
      color: #1a1a1a;
    }
    #wishlistPage *,
    #wishlistPage *::before,
    #wishlistPage *::after { box-sizing: border-box; }
    #wishlistPage [hidden] { display: none !important; }

    /* --- Heading --- */
    #wishlistPage .wl-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #C08A2E;
    }
    #wishlistPage .wl-eyebrow__line { width: 1.75rem; height: 1px; background: #C08A2E; }
    #wishlistPage .wl-head__row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 0.4rem;
    }
    #wishlistPage .wl-title {
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 400;
      font-size: clamp(1.9rem, 4vw, 2.9rem);
      line-height: 1.05;
      color: #1a1a1a;
    }
    #wishlistPage .wl-title__accent { font-style: italic; color: #C49A50; }
    #wishlistPage .wl-subtitle { margin-top: 0.5rem; font-size: 0.9rem; color: #5A5040; }
    #wishlistPage .wl-clear {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.6rem 1.1rem;
      border: 1px solid #DDC9A6;
      border-radius: 0.55rem;
      background: #fff;
      font-size: 0.82rem;
      font-weight: 600;
      color: #9A7030;
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    #wishlistPage .wl-clear:hover { border-color: #C49A50; background: #FBF6EC; color: #7a5a1e; }

    /* --- Stats bar --- */
    #wishlistPage .wl-stats {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-top: 1.5rem;
      padding: 1rem 1.4rem;
      border: 1px solid #ECE6D8;
      border-radius: 0.85rem;
      background: #fff;
      box-shadow: 0 6px 20px rgba(83, 63, 36, 0.05);
    }
    #wishlistPage .wl-stat { display: flex; align-items: center; gap: 0.85rem; }
    #wishlistPage .wl-stat__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      border-radius: 9999px;
      background: #F6EAD4;
      color: #C49A50;
    }
    #wishlistPage .wl-stat__dot {
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 9999px;
      background: #28A745;
      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.16);
    }
    #wishlistPage .wl-stat__num { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1; color: #1a1a1a; }
    #wishlistPage .wl-stat__label { margin: 0.2rem 0 0; font-size: 0.78rem; color: #9A8E78; }
    #wishlistPage .wl-stats__divider { width: 1px; height: 2.5rem; background: #ECE6D8; }
    #wishlistPage .wl-sort { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
    #wishlistPage .wl-sort__label { font-size: 0.82rem; color: #5A5040; white-space: nowrap; }
    #wishlistPage .wl-sort__select { position: relative; }
    #wishlistPage .wl-sort__select select {
      appearance: none;
      -webkit-appearance: none;
      height: 2.6rem;
      padding: 0 2.4rem 0 0.9rem;
      border: 1px solid #E4DDCC;
      border-radius: 0.55rem;
      background: #fff;
      font-size: 0.84rem;
      font-weight: 500;
      color: #1a1a1a;
      cursor: pointer;
    }
    #wishlistPage .wl-sort__select select:focus { outline: none; border-color: #C49A50; box-shadow: 0 0 0 3px rgba(196, 154, 80, 0.16); }
    #wishlistPage .wl-sort__chevron {
      position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%);
      color: #9A8E78; pointer-events: none;
    }

    /* --- Table --- */
    #wishlistPage .wl-table {
      margin-top: 1.5rem;
      border: 1px solid #ECE6D8;
      border-radius: 0.85rem;
      overflow: hidden;
      background: #fff;
    }
    #wishlistPage .wl-table__head,
    #wishlistPage .wl-row {
      display: grid;
      grid-template-columns: 2.25rem 5.5rem minmax(0, 1fr) 7.5rem 7.5rem 13rem;
      align-items: center;
      gap: 1.1rem;
    }
    #wishlistPage .wl-table__head {
      padding: 0.8rem 1.4rem;
      background: #FAF8F4;
      border-bottom: 1px solid #ECE6D8;
    }
    #wishlistPage .wl-th {
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #9A8E78;
    }
    #wishlistPage .wl-th--center { text-align: center; }
    #wishlistPage .wl-row {
      padding: 1.25rem 1.4rem;
      border-bottom: 1px solid #F1ECE0;
    }
    #wishlistPage #wlRows > .wl-row:last-child { border-bottom: 0; }

    /* Checkbox */
    #wishlistPage .wl-row__check { display: inline-flex; cursor: pointer; }
    #wishlistPage .wl-row__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    #wishlistPage .wl-row__check-box {
      width: 1.25rem; height: 1.25rem;
      border: 1.5px solid #D4C9AE;
      border-radius: 0.35rem;
      background: #fff;
      position: relative;
      transition: border-color 0.18s ease, background-color 0.18s ease;
    }
    #wishlistPage .wl-row__check input:checked + .wl-row__check-box {
      border-color: #C49A50; background: #C49A50;
    }
    #wishlistPage .wl-row__check input:checked + .wl-row__check-box::after {
      content: ""; position: absolute; left: 6px; top: 2px;
      width: 5px; height: 10px;
      border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    }
    #wishlistPage .wl-row__check input:focus-visible + .wl-row__check-box { outline: 2px solid #C49A50; outline-offset: 2px; }

    /* Media */
    #wishlistPage .wl-row__media {
      width: 5.75rem; height: 5.75rem;
      border-radius: 0.6rem;
      overflow: hidden;
      background: #F5F1E8;
      border: 1px solid #ECE6D8;
      display: flex; align-items: center; justify-content: center;
    }
    #wishlistPage .wl-row__media img { width: 100%; height: 100%; object-fit: cover; }

    /* Details */
    #wishlistPage .wl-row__name {
      margin: 0;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.1rem;
      font-weight: 500;
      line-height: 1.25;
      color: #1a1a1a;
    }
    #wishlistPage .wl-row__meta {
      display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
      margin-top: 0.5rem;
      font-size: 0.8rem; color: #6b6150;
    }
    #wishlistPage .wl-row__meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
    #wishlistPage .wl-row__ico { display: inline-flex; color: #A89B82; }
    #wishlistPage .wl-row__ico svg { width: 0.95rem; height: 0.95rem; }
    #wishlistPage .wl-row__specs { margin: 0.4rem 0 0; font-size: 0.8rem; color: #6b6150; }
    #wishlistPage .wl-row__dot { color: #C9BE9F; margin: 0 0.15rem; }
    #wishlistPage .wl-row__verified {
      display: inline-flex; align-items: center; gap: 0.35rem;
      margin-top: 0.65rem;
      padding: 0.25rem 0.6rem;
      border-radius: 0.4rem;
      background: #FBF3E4;
      font-size: 0.72rem; font-weight: 600; color: #9A7030;
    }
    #wishlistPage .wl-row__verified .wl-row__ico { color: #C49A50; }

    /* Price */
    #wishlistPage .wl-row__price { text-align: center; }
    #wishlistPage .wl-row__price-val { margin: 0; font-size: 1.25rem; font-weight: 700; color: #1a1a1a; }
    #wishlistPage .wl-row.is-sold .wl-row__price-val { color: #9A8E78; }

    /* Availability */
    #wishlistPage .wl-row__availability { text-align: center; }
    #wishlistPage .wl-avail {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.3rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.76rem; font-weight: 600;
      white-space: nowrap;
    }
    #wishlistPage .wl-avail--in { background: #E8F6EC; color: #1E7A3D; }
    #wishlistPage .wl-avail__dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #28A745; }
    #wishlistPage .wl-avail--sold { background: #F1EDEA; color: #93857A; }
    #wishlistPage .wl-btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
    #wishlistPage .wl-btn--cart[disabled]:hover { background: #161616; }
    #wishlistPage .wl-btn--buy[disabled]:hover { filter: none; }

    /* Actions */
    #wishlistPage .wl-row__actions { display: flex; flex-direction: column; gap: 0.5rem; }
    #wishlistPage .wl-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
      width: 100%;
      padding: 0.6rem 0.9rem;
      border-radius: 0.5rem;
      border: 1px solid transparent;
      font-size: 0.8rem; font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, filter 0.18s ease;
    }
    #wishlistPage .wl-btn__ico { display: inline-flex; }
    #wishlistPage .wl-btn__ico svg { width: 1rem; height: 1rem; }
    #wishlistPage .wl-btn--cart { background: #161616; color: #fff; }
    #wishlistPage .wl-btn--cart:hover { background: #000; }
    #wishlistPage .wl-btn--cart.is-added { background: #1e7a3d; }
    #wishlistPage .wl-btn--buy { background: linear-gradient(180deg, #CDA968 0%, #C49A50 100%); color: #fff; }
    #wishlistPage .wl-btn--buy:hover { filter: brightness(1.05); }
    #wishlistPage .wl-btn--remove { background: #fff; border-color: #EAD9D6; color: #C0392B; }
    #wishlistPage .wl-btn--remove:hover { background: #FCF1EF; border-color: #E0B4AD; }

    /* Empty state */
    #wishlistPage .wl-empty {
      margin-top: 1.5rem;
      padding: 3.5rem 1.5rem;
      text-align: center;
      border: 1px solid #ECE6D8;
      border-radius: 0.85rem;
      background: #fff;
    }
    #wishlistPage .wl-empty__icon { display: inline-flex; color: #D8C9A6; }
    #wishlistPage .wl-empty__title { margin: 1rem 0 0; font-size: 1.15rem; font-weight: 700; color: #1a1a1a; }
    #wishlistPage .wl-empty__text { margin: 0.4rem 0 0; font-size: 0.88rem; color: #9A8E78; }
    #wishlistPage .wl-empty__cta {
      display: inline-flex; align-items: center; margin-top: 1.3rem;
      padding: 0.75rem 1.6rem; border-radius: 0.55rem;
      background: linear-gradient(180deg, #CDA968 0%, #C49A50 100%);
      color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; text-decoration: none;
    }
    #wishlistPage .wl-empty__cta:hover { filter: brightness(1.05); }

    /* Privacy note */
    #wishlistPage .wl-note {
      display: flex; align-items: center; justify-content: center; gap: 0.45rem;
      margin: 1.6rem 0 0;
      font-size: 0.8rem; color: #9A8E78;
    }
    #wishlistPage .wl-note svg { color: #B7AB92; }

    /* --- Tablet / mobile: 3-zone card --- */
    @media (max-width: 1023px) {
      #wishlistPage .wl-table__head { display: none; }
      #wishlistPage .wl-row {
        grid-template-columns: 6rem minmax(0, 1fr) 10rem;
        grid-template-areas:
          "media details price"
          "media details availability"
          "media details actions";
        align-items: start;
        gap: 0.5rem 1.1rem;
        padding: 1.1rem;
      }
      #wishlistPage .wl-row__check { display: none; }
      #wishlistPage .wl-row__media { grid-area: media; align-self: start; }
      #wishlistPage .wl-row__details { grid-area: details; }
      #wishlistPage .wl-row__price { grid-area: price; text-align: left; padding-left: 1.1rem; border-left: 1px solid #F1ECE0; }
      #wishlistPage .wl-row__availability { grid-area: availability; text-align: left; padding-left: 1.1rem; border-left: 1px solid #F1ECE0; }
      #wishlistPage .wl-row__actions { grid-area: actions; padding-left: 1.1rem; border-left: 1px solid #F1ECE0; margin-top: 0.5rem; }
    }

    /* --- Small phones: stack price + actions full width --- */
    @media (max-width: 560px) {
      #wishlistPage .wl-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
          "media details"
          "price availability"
          "actions actions";
        align-items: center;
        gap: 0.55rem 0.9rem;
      }
      #wishlistPage .wl-row__media { width: 5rem; height: 5rem; align-self: start; }
      #wishlistPage .wl-row__price {
        grid-area: price;
        text-align: left; padding-left: 0; border-left: 0;
        padding-top: 0.7rem; border-top: 1px solid #F1ECE0;
      }
      #wishlistPage .wl-row__price-val { font-size: 1.1rem; white-space: nowrap; }
      #wishlistPage .wl-row__availability {
        grid-area: availability;
        text-align: right; padding-left: 0; border-left: 0;
        padding-top: 0.7rem; border-top: 1px solid #F1ECE0;
      }
      #wishlistPage .wl-row__actions {
        flex-direction: row; flex-wrap: wrap;
        padding-left: 0; border-left: 0; margin-top: 0;
      }
      #wishlistPage .wl-row__actions .wl-btn { flex: 1 1 8rem; }
    }

    @media (max-width: 560px) {
      #wishlistPage .wl-stats { flex-wrap: wrap; gap: 1rem; }
      #wishlistPage .wl-sort { margin-left: 0; width: 100%; }
      #wishlistPage .wl-sort__select { flex: 1; }
      #wishlistPage .wl-sort__select select { width: 100%; }
    }

/* ============================================================
   CATEGORIES PAGE (#categoriesPage)
   ============================================================ */
    #categoriesPage {
      --category-card-min-h: 12.5rem;
      font-family: 'Gantari', system-ui, sans-serif;
      color: #1a1a1a;
      background: #fff;
    }
    #categoriesPage *,
    #categoriesPage *::before,
    #categoriesPage *::after { box-sizing: border-box; }
    #categoriesPage .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;
    }

    /* --- Hero --- */
    #categoriesPage .cat-hero {
      position: relative;
      background-color: #F4EDDE;
      background-image: url("../images/categories banner..PNG");
      background-repeat: no-repeat;
      background-position: right center;
      background-size: cover;
      border-bottom: 1px solid #ECE6D8;
    }
    #categoriesPage .cat-hero__inner {
      position: relative;
      max-width: 32rem;
      padding: 3.5rem 0 4rem;
    }
    #categoriesPage .cat-hero__ornament { display: block; color: #C49A50; margin-bottom: 0.4rem; }
    #categoriesPage .cat-hero__title {
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 400;
      letter-spacing: 0.06em;
      font-size: clamp(2.1rem, 5vw, 3.25rem);
      line-height: 1.05;
      color: #1a1a1a;
    }
    #categoriesPage .cat-hero__subtitle {
      margin-top: 0.9rem;
      font-size: 0.95rem;
      line-height: 1.7;
      color: #5A5040;
    }
    @media (max-width: 640px) {
      #categoriesPage .cat-hero { background-size: 150% auto; background-position: right -2rem top; }
      #categoriesPage .cat-hero__inner { padding: 2.5rem 0 9rem; max-width: 100%; }
    }

    /* --- Section eyebrow heading --- */
    #categoriesPage .cat-eyebrow {
      font-family: 'Gantari', system-ui, sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #C08A2E;
    }

    /* --- Featured carousel --- */
    #categoriesPage .cat-featured { padding: 2.5rem 0 1.5rem; }
    #categoriesPage .cat-featured__carousel {
      position: relative;
      margin-top: 1.25rem;
      padding: 0 2.75rem;
    }
    #categoriesPage .cat-featured-glide { overflow: hidden; }
    #categoriesPage .cat-featured-glide .glide__track { overflow: visible; }
    #categoriesPage .cat-featured-glide .glide__slides {
      display: flex;
      gap: 1rem;
      width: 100%;
      margin: 0;
      padding: 0.4rem 0.2rem;
      transform: none !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      white-space: normal;
    }
    #categoriesPage .cat-featured-glide .glide__slides::-webkit-scrollbar { display: none; }
    /* 5 cards fill the row exactly on desktop (gap 1rem ×4 = 4rem) */
    #categoriesPage .cat-featured-glide .glide__slide {
      flex: 0 0 calc((100% - 4rem) / 5);
      width: auto;
      height: auto;
      margin: 0 !important;
      scroll-snap-align: start;
    }
    @media (max-width: 1023px) {
      #categoriesPage .cat-featured-glide .glide__slide { flex-basis: calc((100% - 2rem) / 3); }
    }
    @media (max-width: 767px) {
      #categoriesPage .cat-featured-glide .glide__slide { flex-basis: calc((100% - 1rem) / 2); }
    }
    @media (max-width: 479px) {
      #categoriesPage .cat-featured-glide .glide__slide { flex-basis: 78%; }
    }
    #categoriesPage .cat-arrow {
      position: absolute;
      top: calc(50% - 1.6rem);
      transform: translateY(-50%);
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 9999px;
      border: 1px solid #E6DCC4;
      background: #fff;
      color: #6b5a3a;
      box-shadow: 0 6px 18px rgba(83, 63, 36, 0.1);
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    #categoriesPage .cat-arrow:hover { border-color: #C49A50; color: #9A7030; box-shadow: 0 8px 22px rgba(83, 63, 36, 0.14); }
    #categoriesPage .cat-arrow--prev { left: 0; }
    #categoriesPage .cat-arrow--next { right: 0; }

    #categoriesPage .cat-bullets {
      position: static;
      display: flex;
      justify-content: center;
      gap: 0.45rem;
      margin-top: 1.4rem;
      transform: none;
      width: 100%;
      left: auto;
    }
    #categoriesPage .cat-bullets .glide__bullet {
      width: 0.5rem;
      height: 0.5rem;
      margin: 0;
      padding: 0;
      border-radius: 9999px;
      border: 0;
      background: #E0D6C0;
      box-shadow: none;
      cursor: pointer;
      transition: width 0.25s ease, background-color 0.25s ease;
    }
    #categoriesPage .cat-bullets .glide__bullet--active {
      width: 1.5rem;
      background: #C49A50;
    }
    @media (max-width: 640px) {
      #categoriesPage .cat-featured__carousel { padding: 0 1.25rem; }
      #categoriesPage .cat-arrow { width: 2.1rem; height: 2.1rem; }
    }

    /* --- Category card (mirrors homepage categories cards) --- */
    #categoriesPage .category-card {
      position: relative;
      display: flex;
      width: 100%;
      min-height: var(--category-card-min-h);
      height: 100%;
      flex-direction: column;
      overflow: hidden;
      border-radius: 1.1rem;
      border: 1px solid rgba(237, 228, 211, 0.95);
      background: #fff;
      box-shadow: 0 6px 20px rgba(83, 63, 36, 0.06);
      text-align: center;
      text-decoration: none;
      transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }
    #categoriesPage .category-card:hover,
    #categoriesPage .category-card:focus-visible {
      border-color: rgba(198, 165, 108, 0.45);
      box-shadow: 0 10px 26px rgba(83, 63, 36, 0.09);
    }
    #categoriesPage .category-card__media {
      display: flex;
      flex: 1;
      min-height: 11rem;
      align-items: center;
      justify-content: center;
      padding: 1.4rem 0.85rem 0.6rem;
      background: #ffffff;
    }
    #categoriesPage .category-card__media img {
      max-height: 8rem;
      width: auto;
      max-width: 90%;
      object-fit: contain;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
      mix-blend-mode: multiply;
    }
    #categoriesPage .category-card:hover .category-card__media img,
    #categoriesPage .category-card:focus-visible .category-card__media img {
      transform: scale(1.05) translateY(-2px);
    }
    #categoriesPage .category-card__footer {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 0.35rem;
      padding: 0.65rem 0.65rem 0.8rem;
      background: #fff;
    }
    #categoriesPage .category-card__count-row {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 2.15rem;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    #categoriesPage .category-card__name {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #1a1a1a;
    }
    #categoriesPage .category-card__count {
      margin: 0;
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #af8b46;
      transition: opacity 0.28s ease;
    }
    #categoriesPage .category-card:hover .category-card__count,
    #categoriesPage .category-card:focus-visible .category-card__count { opacity: 0; }
    #categoriesPage .category-card__explore {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      background: #141414;
      color: #c6a564;
      font-family: "customfont", Georgia, serif;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transform: translateY(100%);
      transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1);
    }
    #categoriesPage .category-card:hover .category-card__explore,
    #categoriesPage .category-card:focus-visible .category-card__explore { transform: translateY(0); }
    #categoriesPage .category-card__explore-arrow { display: block; flex-shrink: 0; }

    /* --- Trust strip --- */
    #categoriesPage .cat-trust { padding: 1.25rem 0 2.25rem; }
    #categoriesPage .cat-trust__panel {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      padding: 1.4rem 1.5rem;
      border: 1px solid #ECE6D8;
      border-radius: 0.9rem;
      background: #fff;
      box-shadow: 0 6px 20px rgba(83, 63, 36, 0.05);
    }
    #categoriesPage .cat-trust__item {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0 0.5rem;
    }
    #categoriesPage .cat-trust__item + .cat-trust__item { border-left: 1px solid #F1ECE0; }
    #categoriesPage .cat-trust__icon { color: #C49A50; flex-shrink: 0; }
    #categoriesPage .cat-trust__title { margin: 0; font-size: 0.92rem; font-weight: 700; color: #1a1a1a; }
    #categoriesPage .cat-trust__text { margin: 0.15rem 0 0; font-size: 0.78rem; color: #9A8E78; }
    @media (max-width: 900px) {
      #categoriesPage .cat-trust__panel { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
      #categoriesPage .cat-trust__item:nth-child(odd) { border-left: 0; }
    }
    @media (max-width: 520px) {
      #categoriesPage .cat-trust__panel { grid-template-columns: 1fr; }
      #categoriesPage .cat-trust__item { border-left: 0 !important; }
    }

    /* --- All gem types --- */
    #categoriesPage .cat-all { padding: 0.5rem 0 3.5rem; }
    #categoriesPage .cat-all__toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    #categoriesPage .cat-all__title {
      font-family: 'Gantari', system-ui, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #1a1a1a;
    }
    #categoriesPage .cat-search { position: relative; width: min(20rem, 100%); }
    #categoriesPage .cat-search__input {
      width: 100%;
      height: 2.85rem;
      padding: 0 2.6rem 0 1rem;
      border: 1px solid #E4DDCC;
      border-radius: 0.6rem;
      background: #fff;
      font-size: 0.86rem;
      color: #1a1a1a;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    #categoriesPage .cat-search__input::placeholder { color: #A89B82; }
    #categoriesPage .cat-search__input:focus {
      outline: none;
      border-color: #C49A50;
      box-shadow: 0 0 0 3px rgba(196, 154, 80, 0.16);
    }
    #categoriesPage .cat-search__icon {
      position: absolute;
      top: 50%;
      right: 0.9rem;
      transform: translateY(-50%);
      color: #C49A50;
      pointer-events: none;
    }

    #categoriesPage .cat-alpha {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin: 1.4rem 0 1.6rem;
    }
    #categoriesPage .cat-alpha__btn {
      min-width: 2rem;
      height: 2rem;
      padding: 0 0.5rem;
      border: 1px solid transparent;
      border-radius: 0.45rem;
      background: transparent;
      font-size: 0.8rem;
      font-weight: 600;
      color: #5A5040;
      cursor: pointer;
      transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    #categoriesPage .cat-alpha__btn:hover:not(:disabled):not(.is-active) {
      background: #FAF6EC;
      color: #9A7030;
    }
    #categoriesPage .cat-alpha__btn.is-active {
      border-color: #C49A50;
      color: #9A7030;
      background: #FBF6EC;
    }
    #categoriesPage .cat-alpha__btn:disabled {
      color: #CFC6B2;
      cursor: not-allowed;
    }

    #categoriesPage .cat-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1rem;
    }
    #categoriesPage .cat-grid__cell { display: flex; }
    #categoriesPage .cat-grid__cell[hidden] { display: none; }
    @media (max-width: 1100px) { #categoriesPage .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 860px)  { #categoriesPage .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 560px)  { #categoriesPage .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }

    #categoriesPage .cat-empty {
      margin: 2.5rem 0;
      text-align: center;
      font-size: 0.9rem;
      color: #9A8E78;
    }

    #categoriesPage .cat-all__more { display: flex; justify-content: center; margin-top: 2rem; }
    #categoriesPage .cat-all__more[hidden] { display: none; }
    #categoriesPage .cat-view-more {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.7rem 1.6rem;
      border: 1px solid #DDD4B8;
      border-radius: 0.55rem;
      background: #fff;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6b5a3a;
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    #categoriesPage .cat-view-more:hover { border-color: #C49A50; background: #FBF6EC; color: #9A7030; }
    #categoriesPage .cat-view-more__chevron { transition: transform 0.25s ease; }
    #categoriesPage .cat-view-more.is-expanded .cat-view-more__chevron { transform: rotate(180deg); }

/* ============================================================
   LOGIN / REGISTER (#loginPage) — form-centric centered card (cream editorial)
   ============================================================ */
    #loginPage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2.5rem 1.25rem;
      overflow: hidden;
      font-family: 'Gantari', system-ui, sans-serif;
      color: #1a1a1a;
      background: radial-gradient(135% 110% at 50% -15%, #FCF8EF 0%, #F4EDDD 58%, #EDE3CF 100%);
    }
    #loginPage *, #loginPage *::before, #loginPage *::after { box-sizing: border-box; }

    /* Atmospheric backdrop — gold glow + faint gem watermark */
    #loginPage .login-bg-glow {
      position: absolute;
      top: -18%; left: 50%;
      width: 46rem; height: 46rem;
      transform: translateX(-50%);
      border-radius: 9999px;
      background: radial-gradient(circle, rgba(224, 187, 127, 0.28), transparent 62%);
      pointer-events: none;
    }
    #loginPage .login-bg-gem {
      position: absolute;
      right: -4rem; bottom: -5rem;
      width: 28rem; height: auto;
      color: #C49A50;
      opacity: 0.06;
      pointer-events: none;
    }

    /* Card */
    #loginPage .login-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 26.5rem;
      padding: 2.75rem 2.5rem 2.25rem;
      border: 1px solid #EFE7D4;
      border-radius: 1.4rem;
      background: #ffffff;
      box-shadow: 0 28px 70px rgba(70, 52, 22, 0.14), 0 4px 14px rgba(70, 52, 22, 0.05);
      animation: loginRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    #loginPage .login-card::before {
      content: "";
      position: absolute;
      top: 0; left: 14%; right: 14%;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, #C49A50, transparent);
    }
    @keyframes loginRise {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      #loginPage .login-card { animation: none; }
    }

    /* Focal mark */
    #loginPage .login-mark {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.5rem; height: 3.5rem;
      margin: 0 auto 1.25rem;
      border-radius: 9999px;
      border: 1px solid rgba(196, 154, 80, 0.5);
      background: radial-gradient(circle at 50% 35%, rgba(224, 187, 127, 0.22), rgba(224, 187, 127, 0.06));
      color: #C49A50;
      box-shadow: 0 6px 18px rgba(196, 154, 80, 0.18);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #loginPage .login-mark:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(196, 154, 80, 0.24); }
    #loginPage .login-mark svg { width: 1.6rem; height: 1.6rem; }

    /* Header (centered) */
    #loginPage .login-eyebrow {
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
      color: #C08A2E;
    }
    #loginPage .login-eyebrow__line { width: 1.4rem; height: 1px; background: rgba(192, 138, 46, 0.55); }
    #loginPage .login-title {
      margin-top: 0.7rem;
      text-align: center;
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 400;
      font-size: clamp(1.9rem, 4vw, 2.4rem);
      line-height: 1.08;
      color: #1a1a1a;
    }
    #loginPage .login-title__accent { font-style: italic; color: #C49A50; }
    #loginPage .login-subtitle { margin-top: 0.5rem; text-align: center; font-size: 0.9rem; color: #6b6150; }

    /* Google + divider */
    #loginPage .login-google {
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      width: 100%; margin-top: 1.7rem;
      padding: 0.8rem 1rem;
      border: 1px solid #E2DAC8; border-radius: 0.6rem;
      background: #fff;
      font-size: 0.88rem; font-weight: 600; color: #2c2c2c;
      cursor: pointer;
      transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    }
    #loginPage .login-google:hover { border-color: #D8C49A; background: #FCFAF5; box-shadow: 0 2px 10px rgba(83, 63, 36, 0.06); }
    #loginPage .login-divider {
      display: flex; align-items: center; gap: 0.9rem;
      margin: 1.3rem 0 0.3rem;
      color: #A89B82; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
    }
    #loginPage .login-divider::before, #loginPage .login-divider::after {
      content: ""; flex: 1; height: 1px; background: #ECE6D8;
    }

    /* Fields */
    #loginPage .login-fields { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 1.05rem; }
    #loginPage .login-field { display: flex; flex-direction: column; gap: 0.45rem; }
    #loginPage .login-field label { font-size: 0.8rem; font-weight: 600; color: #3f3a30; }
    #loginPage .login-input {
      position: relative; display: flex; align-items: center;
      border: 1px solid #E4DDCC; border-radius: 0.6rem; background: #fff;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    #loginPage .login-input:focus-within { border-color: #C49A50; box-shadow: 0 0 0 3px rgba(196, 154, 80, 0.16); }
    #loginPage .login-input__icon { display: inline-flex; padding-left: 0.9rem; color: #B7AA90; }
    #loginPage .login-input__icon svg { width: 1.1rem; height: 1.1rem; }
    #loginPage .login-input input {
      flex: 1; min-width: 0;
      border: 0; outline: none; background: transparent;
      padding: 0.85rem 0.9rem;
      font-size: 0.9rem; color: #1a1a1a;
    }
    #loginPage .login-input input::placeholder { color: #B3A78E; }
    #loginPage .login-eye {
      display: inline-flex; align-items: center; justify-content: center;
      margin-right: 0.4rem; padding: 0.4rem;
      border: 0; border-radius: 0.4rem; background: transparent;
      color: #C49A50; cursor: pointer;
      transition: background-color 0.18s ease, color 0.18s ease;
    }
    #loginPage .login-eye:hover { background: #FBF6EC; color: #9A7030; }
    #loginPage .login-eye svg { width: 1.2rem; height: 1.2rem; }
    #loginPage .login-eye__hide { display: none; }
    #loginPage .login-eye.is-on .login-eye__show { display: none; }
    #loginPage .login-eye.is-on .login-eye__hide { display: inline-flex; }

    /* Remember / forgot */
    #loginPage .login-row {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      margin-top: 0.2rem;
    }
    #loginPage .login-remember {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.82rem; color: #5A5040; cursor: pointer;
    }
    #loginPage .login-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    #loginPage .login-remember__box {
      position: relative; width: 1.1rem; height: 1.1rem;
      border: 1.5px solid #D4C9AE; border-radius: 0.3rem; background: #fff;
      transition: border-color 0.18s ease, background-color 0.18s ease;
    }
    #loginPage .login-remember input:checked + .login-remember__box { border-color: #C49A50; background: #C49A50; }
    #loginPage .login-remember input:checked + .login-remember__box::after {
      content: ""; position: absolute; left: 5px; top: 1px;
      width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    }
    #loginPage .login-remember input:focus-visible + .login-remember__box { outline: 2px solid #C49A50; outline-offset: 2px; }

    #loginPage .login-link {
      font-size: 0.82rem; font-weight: 600; color: #C49A50; text-decoration: none;
      transition: color 0.18s ease;
    }
    #loginPage .login-link:hover { color: #9A7030; text-decoration: underline; text-underline-offset: 3px; }
    #loginPage .login-link--bold { font-weight: 700; }

    /* Submit */
    #loginPage .login-submit {
      width: 100%; margin-top: 1.4rem;
      padding: 0.95rem 1rem;
      border: 0; border-radius: 0.6rem;
      background: linear-gradient(180deg, #CDA968 0%, #C49A50 100%);
      color: #fff; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 12px 26px rgba(196, 154, 80, 0.3);
      transition: filter 0.2s ease, transform 0.1s ease;
    }
    #loginPage .login-submit:hover { filter: brightness(1.05); }
    #loginPage .login-submit:active { transform: translateY(1px); }
    #loginPage .login-submit:disabled { opacity: 0.7; cursor: default; box-shadow: none; }

    #loginPage .login-signup { margin-top: 1.5rem; text-align: center; font-size: 0.88rem; color: #5A5040; }

    /* Trust badges */
    #loginPage .login-trust {
      display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.65rem;
      margin-top: 1.6rem; padding-top: 1.4rem;
      border-top: 1px solid #F1ECE0;
    }
    #loginPage .login-trust__item {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.76rem; font-weight: 600; color: #6b6150;
    }
    #loginPage .login-trust__item svg { width: 0.95rem; height: 0.95rem; color: #C49A50; }
    #loginPage .login-trust__dot { width: 3px; height: 3px; border-radius: 9999px; background: #D8CBB0; }

    #loginPage .login-secure {
      display: flex; align-items: center; justify-content: center; gap: 0.4rem;
      margin-top: 1rem;
      font-size: 0.72rem; color: #9A8E78;
    }
    #loginPage .login-secure svg { color: #C49A50; }

    @media (max-width: 480px) {
      #loginPage .login-card { padding: 2.25rem 1.5rem 2rem; }
    }

/* --- Footer (redesign) --- */
.footer-col-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C49A50;
}
.footer-link {
  color: white;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-eyebrow-link {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E0BB7F;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-eyebrow-link:hover { color: #f0cf94; text-decoration: underline; text-underline-offset: 3px; }

.footer-input {
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.82rem;
}
.footer-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.footer-input:focus { outline: none; border-color: #C49A50; box-shadow: 0 0 0 1px rgba(196, 154, 80, 0.35); }

.footer-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 0.4rem;
  background: #E0BB7F;
  color: #1A1A1A;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.footer-submit-btn:hover { background: #C49A50; }
.footer-submit-btn:disabled { opacity: 0.6; cursor: default; }

.footer-newsletter-msg--success { color: #9be7ab; }
.footer-newsletter-msg--error { color: #f3a6a6; }

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid #E0BB7F;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.footer-social-btn:hover { border-color: rgba(224, 187, 127, 0.55); color: #E0BB7F; background: rgba(255, 255, 255, 0.05); }

.footer-ica-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.35rem;
  text-align: center;
}
.footer-ica-badge__title {
  font-family: customfont, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1;
}
.footer-ica-badge__caption {
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
}