/*! source-md5:443151015b127ba3a2868f58cda7c427 — generated by scripts/purge-home-css.js, do not edit */
/* ============================================================
   GemstoneSafe - consolidated stylesheet
   Canonical chrome (header/modals/cart/footer) from index.html;
   page-specific sections are ID-scoped (no collisions).
   ============================================================ */

/* --- Typography (client "Final Developer Handoff": DM Serif Display + Inter) ---------------
   Tokens + element/role defaults live in public/css/typography.css (loaded after this file and any
   pushed styles by layouts.app, and last by the legacy layouts). DM Serif Display = editorial hierarchy only; Inter =
   every marketplace/transactional surface. Product cards, prices, buttons, badges are Inter ONLY.
   DM Serif Display ships a single 400 weight — never bold it; hierarchy comes from size.
   --font-heading / --font-body and the --fs-* scale are kept as aliases so existing rules keep
   working — they now resolve to the handoff sizes (desktop / <=767px mobile). */
:root {
  --font-heading: var(--font-display);
  --font-body:    var(--font-ui);

  --fs-hero: var(--hero-title-size);      /* 48 / 34 */
  --fs-h1:   var(--page-title-size);      /* 33 / 26 */
  --fs-h2:   var(--section-title-size);   /* 27 / 23 */
  --fs-h3:   var(--ui-heading-size);      /* drawer / modal headings = UI heading (17.82 / 16.83) */
  --fs-h4:   var(--ui-heading-size);
}

/* --- Navigation --- */
    #siteHeader, #mobileNavDrawer { font-family: var(--font-body); }

/* === Base helpers + HOMEPAGE sections + canonical CHROME (from index.html) === */

    /* Kills the "black border stuck on a button after clicking it" bug seen on the cart icon,
       wishlist heart, and glide carousel arrows. Root cause: Bootstrap's Reboot CSS
       (assets/plugins/bootstrap/css/bootstrap.min.css, loaded on-demand for the Make-an-Offer
       modal via @push('styles') — see product-card-v1/shop-product-card's own doc comments)
       ships `button:focus { outline: 5px auto -webkit-focus-ring-color; }` with no
       :focus-visible distinction, and it loads AFTER this file (both land in <head> via
       layouts.app's @stack('styles'), which comes after this <link>), so it wins for every
       plain <button>/<a> that doesn't define its own :focus rule (most of ours only style
       :hover/:focus-visible). Buttons keep focus after a mouse click in Chrome/Firefox, so
       that outline just sits there until focus moves elsewhere. !important is required to
       beat Bootstrap's rule regardless of load order/page. :not(:focus-visible) means real
       keyboard/switch users still get an outline (Bootstrap's own, or a component's nicer
       gold :focus-visible style where one exists) — only mouse-click focus is silenced. */
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible) {
      outline: none !important;
    }

    /* Same bug, same fix, for radio/checkbox inputs (e.g. the shop filter sidebar's Form radios
       and every other .shop-filter-check box) — these aren't <button>/<a>/[role="button"], so the
       rule above doesn't reach them, and clicking one leaves a dark native focus ring stuck on it
       until focus moves elsewhere. */
    input[type="radio"]:focus:not(:focus-visible),
    input[type="checkbox"]:focus:not(:focus-visible) {
      outline: none !important;
    }

    /* Master product card (.gs-shop-card, components/shop-product-card.blade.php): the badge
       row optionally carries a second "Make an Offer" pill (MAO products only). A fixed
       min-height keeps Buy Now / Make an Offer cards the same height in a mixed rail — Buy
       Now cards only ever show the certification badge on this row. */
    .gs-shop-card .gs-card-badges {
      min-height: 1.75rem;
    }
    /* Site-wide type scale — every page H1/section H2 and every eyebrow label uses these exact
       values (page-scoped .xm-heading/.pd-section-title/.cat-*__title mirror them 1:1). */
    .gs-heading {
      font-family: var(--font-display);
      font-size: var(--section-title-size);
      font-weight: 400;
      letter-spacing: normal;
      line-height: 1.1;
    }
    h1.gs-heading {
      font-size: var(--page-title-size);
      line-height: 1.05;
    }
    .gs-eyebrow {
      font-family: var(--font-body);
      font-size: var(--eyebrow-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* 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 */
    /* The button is a transparent 24x24 hit area (WCAG 2.5.8 target size — the old 10px dot was
       the button itself); the visible 10px dot is its ::before, unchanged in size and styling. */
    #heroCarousel .hero-carousel-dot {
      position: relative;
      box-sizing: border-box;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      border-radius: 9999px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    #heroCarousel .hero-carousel-dot::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      box-sizing: border-box;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 9999px;
      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::before {
      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::before {
        transition: none;
      }
      #heroCarousel .hero-carousel-dot.glide__bullet--active::before {
        transform: none;
      }
    }
    /* -4px offset on the 24px button = the same 16px ring the 10px dot had with offset 3px. */
    #heroCarousel .hero-carousel-dot:focus-visible {
      outline: 2px solid #fff;
      outline-offset: -4px;
    }

    /* Hero carousel — content typography pinned 1:1 to GS-Homepage-Redesign.html's .hero
       section (eyebrow + h1 with an inline italic <em> emphasis + description + two buttons).
       Both slides share this exact template (see resources/views/partials/home/hero.blade.php)
       so they read as one consistent design rather than two different layouts. Scoped under
       #heroCarousel so it can't bleed into any other section's typography. */
    #heroCarousel .hero-slide-content {
      max-width: 560px;
    }
    #heroCarousel .hero-eyebrow {
      font-family: var(--font-body);
      font-size: var(--eyebrow-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #e0bb7f;
    }
    #heroCarousel .hero-title {
      font-family: var(--font-display);
      font-size: var(--hero-title-size);
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1.02;
      margin: 14px 0 16px;
      color: #ffffff;
    }
    #heroCarousel .hero-title em {
      font-style: italic;
      color: #e0bb7f;
    }
    #heroCarousel .hero-description {
      font-family: var(--font-body);
      font-size: var(--hero-text-size);
      line-height: 1.5;
      color: #dddddd;
      margin: 0 0 28px;
      max-width: 34rem;
    }
    #heroCarousel .hero-slide-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    #heroCarousel .hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #ffffff;
      padding: 12px 18px;
      font-family: var(--font-body);
      font-size: var(--button-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: transparent;
      color: #ffffff;
      text-decoration: none;
      transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    #heroCarousel .hero-btn:hover {
      transform: translateY(-2px);
      text-decoration: none;
    }
    #heroCarousel .hero-btn--gold {
      background: #e0bb7f;
      border-color: #e0bb7f;
      color: #1a1a1a;
    }
    #heroCarousel .hero-btn--gold:hover {
      background: #e5c788;
      color: #1a1a1a;
    }
    #heroCarousel .hero-btn--ghost:hover {
      background: rgba(255, 255, 255, 0.14);
    }

    /* 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: flex-start;
        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-title {
        font-size: var(--hero-title-size);
        line-height: 1.08;
        margin: 8px 0 10px;
      }
      #heroCarousel .hero-description {
        max-width: 17rem;
        font-size: var(--hero-text-size);
        line-height: 1.6;
        margin-bottom: 16px;
      }
      #heroCarousel .hero-eyebrow {
        font-size: var(--eyebrow-size);
        letter-spacing: 0.16em;
      }
      #heroCarousel .hero-slide-actions {
        gap: 0.5rem;
      }
      #heroCarousel .hero-btn {
        flex: 1 1 0%;
        min-width: 0;
        justify-content: center;
        padding: 0.625rem 0.75rem;
        font-size: var(--button-size);
        letter-spacing: 0.14em;
      }
      #heroCarousel .glide__slide > .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;
      }
    }

    /* Hero content gutter — the Tailwind classes on .hero-slide-shell (px-6 sm:px-10 md:px-16
       lg:px-20) don't match the site's shared gutter (#headerMainNavRow / .gs-section-container:
       0.75rem / 1rem / 1.75rem). Below 1024px the mobile override above already unifies it to
       1.25rem; this covers the remaining >=1024px case (lg:px-20 = 5rem vs the 1.75rem everything
       else uses), which is what made the hero copy start well right of the logo/heading/cards. */
    @media (min-width: 1024px) {
      #heroCarousel .hero-slide-shell {
        padding-left: 1.75rem;
      }
    }

    /* Showcase hero — icon filters + hero price font */

    /* Showcase hero — hero gem image only */
    /* Showcase product carousel — gold outline arrows only */
    .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;
    }
    @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);
      }
    }

    /* ── Royal cinematic gem-change transition for the showcase hero card ── */
    @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); }
    }
    #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;
    }
    /* Same showcase/premium light cards */
    #shopPageSection .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;
    }
    #shopPageSection .showcase-light-card ,
    #newArrivalsSection .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;
    }
    #shopPageSection .showcase-light-card:hover ,
    #newArrivalsSection .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);
    }
    #shopPageSection .showcase-light-card > .flex.flex-1 ,
    #newArrivalsSection .showcase-light-card > .flex.flex-1   {      padding: 0.55rem 0.65rem 0.5rem !important;
    }
    #shopPageSection .showcase-light-card h4 ,
    #newArrivalsSection .showcase-light-card h4   {      font-size: var(--product-title-size) !important;
      line-height: 1.25;
    }
    #shopPageSection .showcase-light-card .font-serif.leading-none ,
    #newArrivalsSection .showcase-light-card .font-serif.leading-none   {      font-size: var(--product-price-size) !important;
    }
    #shopPageSection .showcase-light-card > .flex .mt-4 ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4   {      margin-top: 0.45rem !important;
    }
    #shopPageSection .showcase-light-card > .flex .mt-4 > p span:first-child ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 > p span:first-child   {      font-size: var(--product-meta-size);
      letter-spacing: 0.12em;
    }
    #shopPageSection .showcase-light-card > .flex .mt-4 > p span:last-child ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 > p span:last-child   {      font-size: var(--product-price-size) !important;
      margin-left: 0.2rem !important;
    }
    #shopPageSection .showcase-light-card > .flex .mt-4 a ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 a   {      font-size: var(--text-link-size);
      letter-spacing: 0.1em;
    }
    #shopPageSection .showcase-light-card > .flex .mt-4 a span[aria-hidden] ,
    #newArrivalsSection .showcase-light-card > .flex .mt-4 a span[aria-hidden]   {      display: none;
    }
    #shopPageSection .action-button.wishlist.is-wishlisted ,
    #newArrivalsSection .action-button.wishlist.is-wishlisted   {      border-color: rgba(196, 154, 80, 0.9);
      background: #fdf3e2;
    }
    /* Shop by Category carousel */
    #shopByCategoriesSection {
      --category-card-min-h: 12.5rem;
    }
    @media (min-width: 1280px) {
      #shopByCategoriesSection {
        --category-card-min-h: 13.75rem;
      }
    }
    #shopByCategoriesSection .category-glide .glide__slides {
      align-items: stretch;
    }
    #shopByCategoriesSection .category-glide .glide__slide {
      display: flex;
      height: auto;
    }
    @media (max-width: 1023px) {
      #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: 0;
      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;
      margin-bottom:20px;
    }
    #shopByCategoriesSection .category-card:focus-visible {
      border-color: rgba(198, 165, 108, 0.45);
      box-shadow: 0 10px 26px rgba(83, 63, 36, 0.09);
      text-decoration: none;
    }
    @media (hover: hover) and (pointer: fine) {
      #shopByCategoriesSection .category-card:hover {
        border-color: rgba(198, 165, 108, 0.45);
        box-shadow: 0 10px 26px rgba(83, 63, 36, 0.09);
        text-decoration: none;
      }
    }
    #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:focus-visible .category-card__media img {
      transform: scale(1.05) translateY(-2px);
    }
    @media (hover: hover) and (pointer: fine) {
      #shopByCategoriesSection .category-card:hover .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: var(--font-display); /* handoff: card/category heading = DM Serif Display 400 */
      font-size: var(--category-title-size);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: normal;
      color: #1a1a1a;
    }
    #shopByCategoriesSection .category-card__count {
      margin: 0;
      padding: 0;
      font-family: var(--font-body);
      font-size: var(--result-count-size);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #af8b46;
      transition: opacity 0.28s ease;
    }
    #shopByCategoriesSection .category-card:focus-visible .category-card__count {
      opacity: 0;
    }
    @media (hover: hover) and (pointer: fine) {
      #shopByCategoriesSection .category-card:hover .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: var(--font-ui);
      font-size: var(--text-link-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transform: translateY(100%);
      transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1);
    }
    #shopByCategoriesSection .category-card:focus-visible .category-card__explore {
      transform: translateY(0);
    }
    @media (hover: hover) and (pointer: fine) {
      #shopByCategoriesSection .category-card:hover .category-card__explore {
        transform: translateY(0);
      }
    }
    #shopByCategoriesSection .category-card__explore-arrow {
      display: block;
      flex-shrink: 0;
    }
    /* Home's "Find Your Stone" grid at 2-up (phones, <640px): the tablet/desktop media-box
       height (12.5rem+) left a small icon swimming in a mostly-empty tile. Shrink just the
       icon area here so the grid reads as a dense row of tiles instead of a tall, sparse
       one — tablet (sm:grid-cols-3) and desktop are untouched. */
    @media (max-width: 639px) {
      #shopByCategoriesSection {
        --category-card-min-h: auto;
      }
      #shopByCategoriesSection .category-card__media {
        min-height: 6.5rem;
        padding: 1rem 0.75rem 0.4rem;
      }
      #shopByCategoriesSection .category-card__media img {
        max-height: 4.75rem;
      }
    }
    /* Match #headerMainNavRow gutters — logo left, login right */
    /* 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);
    }
    /* Hero + 2 side cards — hero slightly narrower than 3:1:1 */
    #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);
      }
    }
    /* ═══ 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: nowrap;
      white-space: nowrap;
      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: 1.75rem;
        padding-right: 1.75rem;
      }
      #siteHeader .header-primary-nav {
        justify-self: center;
      }
    }
    /* Homepage section container — mirrors #headerMainNavRow's own gutters exactly (same
       breakpoints/values) so every section lines up with the header above it. A plain custom
       class rather than Tailwind's px-3/sm:px-4/lg:px-10 utilities: Bootstrap (loaded globally
       via the shop-product-card component for the Make-an-Offer modal) ships identically named
       .px-3/.px-4/etc utilities with !important, which silently clobbers Tailwind's non-important
       ones and pins every section to a flat 1rem regardless of breakpoint. */
    .gs-section-container {
      margin-left: auto;
      margin-right: auto;
      max-width: 100rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
    @media (min-width: 640px) and (max-width: 1023px) {
      .gs-section-container {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
    @media (min-width: 1024px) {
      .gs-section-container {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
      }
    }
    @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;
      }
    }
    /* Smallest phones (≤359px, e.g. 320px). The fixed-height logo (h-7) plus the Tailwind
       img max-width:100% squashed the wordmark horizontally once menu + icons ate the row.
       Tighten the side controls so the logo keeps its full size, and if it still can't fit,
       scale it proportionally (height:auto) instead of distorting it. */
    @media (max-width: 359.98px) {
      #siteHeader #headerMainNavRow {
        column-gap: 0.375rem;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
      }
      #siteHeader .header-actions {
        gap: 0.25rem;
      }
      #siteHeader .header-mobile-menu-btn {
        width: 2.25rem;
        height: 2.25rem;
      }
      #siteHeader .header-icon-btn {
        height: 2rem;
        width: 2rem;
      }
      #siteHeader .header-logo-link img {
        height: auto;
        max-height: 1.75rem;
        width: auto;
        max-width: 100%;
      }
    }
    #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;
        /* Optical nudge only — the box itself is already flush with the gutter (matches
           .gs-section-container exactly). The wordmark's leading "G" has natural left-bearing
           (round letterform), so its ink sits a couple px inside the box compared to flat-edged
           content below (card borders, straight-stroked heading letters); this compensates so
           the visible glyph reads flush too. */
        margin-left: -14px;
      }
    }
    #siteHeader .header-actions {
      justify-self: end;
    }
    /* Mobile/tablet header (< lg). The logo was centred inside the middle grid column, so the
       column's slack showed up as a gap on its left; and its fixed h-7 height + max-width:100%
       squashed the wordmark horizontally whenever the column was narrower than ~233px (e.g. 375px
       phones), which made it look smaller than at 320/425. Now: logo left-aligned next to the
       menu button, scaled proportionally (max 1.75rem tall). The menu button's icon is pulled
       flush to the gutter (its hit area just overlaps the padding) to give the logo more room.
       Placed after the base .header-mobile-menu-btn rule so it wins the cascade. */
    @media (max-width: 1023.98px) {
      #siteHeader .header-mobile-menu-btn {
        width: 2.25rem;
        height: 2.5rem;
        margin-left: -0.5rem;
      }
      #siteHeader .header-logo-link {
        justify-self: start;
      }
      #siteHeader .header-logo-link img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 1.75rem;
      }
    }
    #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: var(--font-ui);
      font-size: var(--ui-heading-size);
      font-weight: 600;
      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__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.7rem 0;
      border-bottom: 1px solid #ece6d8;
      font-size: var(--nav-size);
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      color: #111111;
    }
    #mobileNavDrawer .mobile-nav__link:hover,
    #mobileNavDrawer .mobile-nav__link:focus-visible {
      color: #c6a86a;
    }
    #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: var(--button-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      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: var(--nav-size);
      font-weight: 500;
      letter-spacing: normal;
      text-transform: uppercase;
      color: #111111;
      border-radius: 2px;
      transition: color 0.2s ease;
      white-space: nowrap;
    }
    #siteHeader .header-main-link:hover,
    #siteHeader .header-main-link:focus-visible {
      color: #c6a86a;
    }
    #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);
    }
    /* Phones: slightly smaller icon buttons so the logo keeps close to full size.
       After the base .header-icon-btn rule (above) so it actually applies. */
    @media (max-width: 419.98px) {
      #siteHeader .header-actions {
        gap: 0.3rem;
      }
      #siteHeader .header-icon-btn {
        height: 2rem;
        width: 2rem;
      }
    }
    #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: var(--button-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      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;
    }

    /* 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-subnav-logo-spacer,
    #siteHeader .header-subnav-actions-spacer {
      flex-shrink: 0;
      pointer-events: none;
      visibility: hidden;
    }
    /* Spacers mirror the logo + action icons so the links sit under the primary nav.
       Below 1280px there isn't room for both spacers and all links on one row,
       so drop them and center the links across the full width. */
    @media (max-width: 1279px) {
      #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: var(--nav-size);
      font-weight: 500;
      letter-spacing: 0.08em;
      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;
    }
    #siteHeader .header-login-label-short {
      display: none;
    }

    /* Compact desktop tier (iPad Pro landscape / small laptops, 1024–1279px). The default
       1fr-auto-1fr grid leaves each side column ~165px at 1032px — too narrow for the icons +
       "Login / Register", so the button wrapped to two lines and the logo got squeezed. Here the
       side columns size to their content, the nav takes the remaining middle space (centered
       inside it), and links/buttons tighten so everything sits on one line. ≥1280px untouched. */
    @media (min-width: 1024px) and (max-width: 1279.98px) {
      #siteHeader #headerMainNavRow {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 1rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
      }
      #siteHeader .header-logo-link {
        flex-shrink: 0;
        margin-left: -10px;
      }
      #siteHeader .header-logo-link img {
        height: 1.75rem;
        width: auto;
        max-width: none;
      }
      #siteHeader .header-primary-nav-inner {
        gap: 0.125rem;
        padding-left: 0;
        padding-right: 0;
      }
      #siteHeader .header-main-link {
        padding: 0.45rem clamp(0.45rem, 0.7vw, 0.65rem);
        font-size: var(--nav-size);
      }
      #siteHeader .header-actions {
        gap: 0.375rem;
      }
      #siteHeader .header-icon-btn {
        height: 2.25rem;
        width: 2.25rem;
      }
      #siteHeader .header-login-btn {
        height: 2.25rem;
        padding: 0 0.75rem;
        white-space: nowrap;
      }
      #siteHeader .header-login-label-full {
        display: none;
      }
      #siteHeader .header-login-label-short {
        display: inline;
      }
    }

    /* Search Gemstones modal */
    #searchModal .search-modal-dialog {
      max-height: min(90vh, 52rem);
      display: flex;
      flex-direction: column;
    }
    #searchModal .search-modal-section-label {
      font-size: var(--eyebrow-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #c6a86a;
    }
    #searchModal .search-modal-panel {
      border-radius: 0.45rem;
      /* background: #f7f6f3; */
      padding: 0.85rem 0.75rem;
      border: 1px solid #ece6d8;
    }
    #searchModal .search-modal-suggest-link {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.45rem 0.35rem;
      border-radius: 0.25rem;
      font-size: var(--text-link-size);
      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 img.search-modal-swatch--img {
      display: block;
      object-fit: cover;
      background: #f6f3ee;
    }
    #searchModal .search-modal-swatch[hidden] {
      display: none;
    }
    #searchModal .search-modal-recent-row {
      display: flex;
      align-items: center;
    }
    #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: var(--verification-badge-size);
      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: var(--font-display);
        font-size: var(--ui-heading-size);
        font-weight: 400;
        line-height: 1.2;
        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: var(--form-size);
      }
      #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: var(--text-link-size);
      }
      #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-footer {
        display: flex;
      }
      #searchModal .search-modal-footer .search-modal-view-all {
        display: flex;
      }
      #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: var(--product-meta-size);
        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: var(--result-count-size);
        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-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: var(--text-link-size);
        font-weight: 700;
        letter-spacing: 0.08em;
        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 {
        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 {
      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;
      min-height: 0;
      width: min(100vw, 28rem);
      max-width: 100%;
      height: 100%;
      overflow: hidden;
      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;
      flex-shrink: 0;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.35rem 1.35rem 0.65rem;
    }
    /* Wraps the AJAX-refreshed items + summary; must flex/shrink so the items list
       (not this wrapper) is what scrolls, keeping the summary + CTA buttons on screen. */
    #cartDrawer #cartDrawerBody {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    #cartDrawer .cart-drawer__title {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--ui-heading-size);
      font-weight: 400;
      line-height: 1.2;
      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;
      flex-shrink: 0;
      align-items: center;
      gap: 0.4rem;
      margin: 0;
      padding: 0 1.35rem 1rem;
      font-size: var(--product-meta-size);
      font-weight: 500;
      color: #9a8e78;
    }
    #cartDrawer .cart-drawer__trust svg {
      flex-shrink: 0;
      color: #c49a50;
    }
    #cartDrawer .cart-drawer__items {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 1.35rem;
    }
    #cartDrawer .cart-drawer__view-more {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin: 0.15rem 0 0.85rem;
      padding: 0.6rem 0.85rem;
      border: 1px dashed #ddd4b8;
      border-radius: 0.5rem;
      background: transparent;
      font-size: var(--text-link-size);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #9a7030;
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    #cartDrawer .cart-drawer__view-more:hover {
      border-color: #c9a050;
      background: rgba(224, 187, 127, 0.08);
    }
    #cartDrawer .cart-drawer__view-more-chevron {
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    #cartDrawer .cart-drawer__view-more.is-expanded .cart-drawer__view-more-chevron {
      transform: rotate(180deg);
    }
    #cartDrawer .cart-drawer__loading {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      min-height: 12rem;
      padding: 2rem;
    }
    #cartDrawer .cart-drawer__spinner {
      width: 1.75rem;
      height: 1.75rem;
      border: 2px solid #ece6d8;
      border-top-color: #c49a50;
      border-radius: 9999px;
      animation: cartDrawerSpin 0.7s linear infinite;
    }
    @keyframes cartDrawerSpin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      #cartDrawer .cart-drawer__spinner { animation-duration: 1.4s; }
    }
    #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;
    }
    /* The rule above sets display:grid unconditionally, which (being an author rule)
       outranks the browser's built-in "[hidden] { display: none }" regardless of the
       hidden attribute being present — so items beyond the first 3 were rendering (and
       taking up scroll space) even while "hidden". This re-asserts display:none with
       higher specificity so the attribute actually hides them. */
    #cartDrawer .cart-drawer__item[hidden] {
      display: none;
    }
    #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: var(--product-title-size);
      font-weight: 600;
      color: #1a1a1a;
    }
    #cartDrawer .cart-drawer__item-origin,
    #cartDrawer .cart-drawer__item-specs {
      margin: 0.12rem 0 0;
      font-size: var(--product-meta-size);
      color: #9a8e78;
    }
    #cartDrawer .cart-drawer__item-price {
      margin: 0;
      flex-shrink: 0;
      font-size: var(--product-price-size);
      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: var(--verification-badge-size);
      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: var(--product-meta-size);
      color: #5a5040;
    }
    #cartDrawer .cart-drawer__summary-row:last-child {
      margin-bottom: 0;
    }
    #cartDrawer .cart-drawer__summary-value {
      font-size: var(--product-price-size);
      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: var(--button-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      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: only the item list scrolls; subtotal + buttons always on screen.
       Item count itself is capped to 3 by default via the "View more" toggle above, so no
       extra max-height clamp is needed here — the base #cartDrawer__items rule already
       scrolls if the visible items (or an expanded list) don't fit the panel height. */
    @media (max-width: 1023px) {
      #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) === */

/* === SHOP page sections (shared by shop + product) === */
    /* Shop page — filters + product grid (matches vendor product_card.blade.php) */
    #shopPageSection {
      background: white;
    }
    #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: var(--filter-chip-size);
      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: var(--button-size);
      line-height: 1;
      cursor: pointer;
    }
    /* 768-1279px covers phones-in-landscape through iPad Pro portrait (1032px):
       2 columns here — the filter sidebar (unlike home's full-width grid) leaves
       less room per card, so 3 columns felt cramped at iPad Pro's width. */
    /* x-shop-product-card's redesigned horizontal mobile layout (see gs-shop-card-m in
       components/shop-product-card.blade.php): scoped to the component's GRID usages (Shop,
       Store detail, Home's Exceptional Stones + New Arrivals, customer dashboard's Popular
       Items) — each of those already collapses to a single column on narrow screens, so the
       full-row horizontal card fits. The same component also renders inside narrow horizontal
       scrollers (PDP related/seller Glide rails, Stores page's New Products Glide rail, Home's
       Recently Viewed CSS scroll-snap rail) where a full-row card doesn't have room to work —
       those keep the existing (already-responsive) desktop card at every width. */
    .gs-shop-card-m {
      display: none !important;
    }
    /* #shopPageSection .shop-product-grid already forces 1 column up to 768px on its own
       (see the shop-product-grid rules above) — not repeated here. */
    /* :not(...) matters here — Tailwind's bare `grid` utility class is reused deep inside the
       card itself (.gs-card-actions / .gs-card-m-actions, the action-button rows), and a plain
       descendant selector would also catch those, collapsing the card's own button row to 1
       column. Only the section-level listing wrapper should match. */
    
    section[aria-labelledby="exceptional-stones-heading"] .grid:not(.gs-card-actions):not(.gs-card-m-actions),
    #newArrivalsSection .grid:not(.gs-card-actions):not(.gs-card-m-actions) {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    @media (min-width: 768px) {
      section[aria-labelledby="exceptional-stones-heading"] .grid:not(.gs-card-actions):not(.gs-card-m-actions) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }
    }
    /* iPad Mini and similar ~768-1023px tablets: 2 cards, matching the shop grid's own
       768-1023px step (#shopPageSection .shop-product-grid above), instead of jumping
       straight to the 4-column desktop layout. */
    @media (min-width: 768px) and (max-width: 1023px) {
      #newArrivalsSection .grid:not(.gs-card-actions):not(.gs-card-m-actions) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (min-width: 1024px) and (max-width: 1279px) {
      #newArrivalsSection .grid:not(.gs-card-actions):not(.gs-card-m-actions) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }
    @media (min-width: 1280px) {
      #newArrivalsSection .grid:not(.gs-card-actions):not(.gs-card-m-actions) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 767px) {
      #shopPageSection .gs-shop-card,
      section[aria-labelledby="exceptional-stones-heading"] .gs-shop-card,
      #newArrivalsSection .gs-shop-card,
      section[aria-labelledby="recently-viewed-heading"] .gs-shop-card,
      #pdRelatedGlide .gs-shop-card,
      #pdSellerGlide .gs-shop-card {
        display: none !important;
      }
      #shopPageSection .gs-shop-card-m,
      section[aria-labelledby="exceptional-stones-heading"] .gs-shop-card-m,
      #newArrivalsSection .gs-shop-card-m,
      section[aria-labelledby="recently-viewed-heading"] .gs-shop-card-m,
      #pdRelatedGlide .gs-shop-card-m,
      #pdSellerGlide .gs-shop-card-m {
        display: flex !important;
      }
    }
    /* All Filters — expanded panel (shop mockup) */
    /* Active-filter count on the "Filters" button (shop-page.js renderActiveTags()). Explicit
       [hidden] rule: the inline-flex below would otherwise out-rank the UA's hidden styling. */
    /* shop_filter_variant_1 result bar (partials/shop/result-bar-v1.blade.php), 768–1023px only:
       row 1 — compact Filters | "Showing…" summary | Sort, all vertically centred; row 2 —
       Active Filters chips (only when any are set).
       Other widths keep the markup's own layout. #shopResultsSummary's margin reset matters:
       Bootstrap (loaded on this page) gives every <p> margin-bottom:1rem, which made the summary
       block taller than its text and pinned the text to the top of the row. */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      /* display:contents dissolves the summary wrapper so its two children become row items
         of their own: the "Showing…" text sits between Filters and Sort, while the Active
         Filters chips (order 3, full width) wrap onto their own row underneath. */
    }
    /* Sticky result bar (all widths): pinned under the sticky #siteHeader (z-50) so Filters, Sort
       and the active-filter chips stay reachable anywhere in a long grid. z-30 keeps it under the
       header and the mobile filter drawer/backdrop (z-50/z-40) but over product cards, so the
       Sort dropdown still opens above the grid. .is-stuck is toggled by shop-page.js from
       #shopResultBarSentinel. */
    /* Stuck: chips collapse to ONE horizontally scrollable row (never grows the bar taller as
       filters are added); the "Active Filters:" label is dropped to save width. */
    /* Below lg the bar spans the full viewport width when stuck (background bleeds past the
       container gutters without adding scroll width). Not at lg+: there the sticky filter sidebar
       sits to the left and a bleeding background would cover its top.
       Done with a horizontal border-image outset (ink overflow — never adds scroll width) rather
       than a 100vmax spread shadow + clip-path: the clip-path also clipped descendants, cutting
       the open Sort/pill dropdown panels off 16px below the bar whenever it was stuck. The
       gradient's bottom 1px redraws the bottom rule (border-image replaces border drawing). */
    /* Phones: drop the "Showing X of Y" line while stuck — Filters/Sort + one chip row is the
       most vertical space the bar should take on a short screen. */
    /* Mobile filter bar: quick-pills (Gem Form, Gem Type, …) are hidden entirely — tapping
       "Filters" already opens #shopFiltersPanel below, which has every one of those fields in
       its own grid, so nothing is lost. Only "Filters" + "Sort" stay, as one compact row. */
    /* Sidebar v1's scrollable option lists (#shopSpeciesList, #shopVarietyList) — and #shopSidebarV1
       itself, whose own overflow-y-auto only kicks in once an expanded section pushes it past its
       max-height — otherwise render the OS's full native scrollbar (a wide track plus up/down
       arrow buttons on Windows), eating real width out of an already-narrow 240px column. That's
       exactly why the sticky "Filter Gems"/"Clear all" row wrapped to two lines only once a
       section was expanded far enough to trigger #shopSidebarV1's own scrollbar (nothing scrolled
       while every section was collapsed and short, so no scrollbar, so no width lost). Thin it
       down everywhere, same pattern as #searchModal .search-modal-results-scroll. */
    #shopPageSection #shopSpeciesList,
    #shopPageSection #shopVarietyList,
    #shopSidebarV1 {
      scrollbar-width: thin;
      -ms-overflow-style: none;
    }
    #shopPageSection #shopSpeciesList::-webkit-scrollbar,
    #shopPageSection #shopVarietyList::-webkit-scrollbar,
    #shopSidebarV1::-webkit-scrollbar {
      width: 5px;
    }
    #shopPageSection #shopSpeciesList::-webkit-scrollbar-track,
    #shopPageSection #shopVarietyList::-webkit-scrollbar-track,
    #shopSidebarV1::-webkit-scrollbar-track {
      background: transparent;
    }
    #shopPageSection #shopSpeciesList::-webkit-scrollbar-thumb,
    #shopPageSection #shopVarietyList::-webkit-scrollbar-thumb,
    #shopSidebarV1::-webkit-scrollbar-thumb {
      background-color: #ded2b8;
      border-radius: 9999px;
    }

    /* Gem Type — custom dropdown + modal */
    .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); */
      /* Default for any Gem Type outside the curated palette below (the catalog has ~95). */
      /* background: radial-gradient(circle at 32% 28%, #f3e3c2, #c6a86a 48%, #6b5527); */
      /* When used on an <img> (real category photo) instead of a <span> (color swatch). */
      object-fit: cover;
    }

    .shop-filter-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .shop-filter-modal[hidden] {
      display: none;
    }
    .shop-filter-modal .shop-filter-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 18, 14, 0.52);
      backdrop-filter: blur(2px);
    }
    .shop-filter-modal .shop-filter-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;
    }
    .shop-filter-modal .shop-filter-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid #ebe4d6;
    }
    .shop-filter-modal .shop-filter-modal__title {
      font-family: var(--font-ui);
      font-size: var(--ui-heading-size);
      font-weight: 600;
      color: #2c2416;
    }
    .shop-filter-modal .shop-filter-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;
    }
    .shop-filter-modal .shop-filter-modal__close:hover {
      background: #f7f0e4;
    }
    .shop-filter-modal .shop-filter-modal__body {
      display: grid;
      grid-template-columns: 11.5rem minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
    }
    @media (max-width: 640px) {
      .shop-filter-modal .shop-filter-modal__body {
        grid-template-columns: 1fr;
      }
      .shop-filter-modal .shop-filter-modal__sidebar {
        display: none;
      }
    }
    .shop-filter-modal .shop-filter-modal__sidebar {
      display: flex;
      flex-direction: column;
      padding: 0.75rem 0;
      border-right: 1px solid #ebe4d6;
      background: #fdfbf7;
    }
    .shop-filter-modal .shop-filter-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: var(--filter-chip-size);
      font-weight: 500;
      color: #3d3428;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .shop-filter-modal .shop-filter-modal__nav-btn.is-active {
      background: rgba(224, 187, 127, 0.18);
      color: #2c2416;
      font-weight: 600;
    }
    .shop-filter-modal .shop-filter-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;
    }
    .shop-filter-modal .shop-filter-modal__nav-icon {
      width: 0.9rem;
      height: 0.9rem;
      color: #c9a050;
    }
    .shop-filter-modal .shop-filter-modal__clear {
      margin-top: auto;
      padding: 0.85rem 1rem;
      border: 0;
      background: transparent;
      font-size: var(--text-link-size);
      font-weight: 600;
      color: #9a7030;
      text-align: left;
      cursor: pointer;
    }
    .shop-filter-modal .shop-filter-modal__clear:hover {
      color: #7a5a1e;
    }
    .shop-filter-modal .shop-filter-modal__main {
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 1rem 1.15rem 0.5rem;
    }
    .shop-filter-modal .shop-filter-modal__toolbar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }
    .shop-filter-modal .shop-filter-modal__search-wrap {
      position: relative;
      flex: 1 1 auto;
    }
    .shop-filter-modal .shop-filter-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: var(--form-size);
      color: #2c2416;
    }
    .shop-filter-modal .shop-filter-modal__search:focus {
      outline: 2px solid rgba(224, 187, 127, 0.45);
      outline-offset: 1px;
      border-color: #c9b896;
    }
    .shop-filter-modal .shop-filter-modal__search-icon {
      position: absolute;
      right: 0.65rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      color: #9a8f7a;
      pointer-events: none;
    }
    .shop-filter-modal .shop-filter-modal__count {
      flex-shrink: 0;
      font-size: var(--result-count-size);
      font-weight: 500;
      color: #9a8f7a;
      white-space: nowrap;
    }
    .shop-filter-modal .shop-filter-modal__list-head {
      margin: 0 0 0.5rem;
      font-size: var(--eyebrow-size);
      font-weight: 700;
      color: #2c2416;
    }
    .shop-filter-modal .shop-filter-modal__scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 0.25rem;
    }
    .shop-filter-modal .shop-filter-modal__letter {
      margin: 0.65rem 0 0.35rem;
      font-size: var(--eyebrow-size);
      font-weight: 700;
      color: #2c2416;
    }
    .shop-filter-modal .shop-filter-modal__letter:first-child {
      margin-top: 0;
    }
    .shop-filter-modal .shop-filter-modal__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.15rem 0.5rem;
    }
    @media (max-width: 768px) {
      .shop-filter-modal .shop-filter-modal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    .shop-filter-modal .shop-filter-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;
    }
    .shop-filter-modal .shop-filter-modal__item[hidden] {
      display: none;
    }
    .shop-filter-modal .shop-filter-modal__item:hover {
      background: #faf8f4;
    }
    .shop-filter-modal .shop-filter-modal__item input {
      flex-shrink: 0;
      width: 0.95rem;
      height: 0.95rem;
      accent-color: #c9a050;
      cursor: pointer;
    }
    .shop-filter-modal .shop-filter-modal__item .gem-swatch {
      width: 2.5rem;
      height: 2.5rem;
    }
    .shop-filter-modal .shop-filter-modal__item-name {
      font-size: var(--filter-chip-size);
      font-weight: 500;
      color: #2c2416;
    }
    .shop-filter-modal .shop-filter-modal__footer {
      display: flex;
      justify-content: flex-end;
      gap: 0.65rem;
      padding: 0.85rem 1.15rem;
      border-top: 1px solid #ebe4d6;
      background: #fff;
    }
    .shop-filter-modal .shop-filter-modal__btn {
      min-width: 5.5rem;
      min-height: 2.35rem;
      padding: 0.4rem 1.1rem;
      border-radius: 0.4rem;
      font-size: var(--button-size);
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .shop-filter-modal .shop-filter-modal__btn--cancel {
      border: 1px solid #ddd4c0;
      background: #fff;
      color: #3d3428;
    }
    .shop-filter-modal .shop-filter-modal__btn--cancel:hover {
      border-color: #c9b896;
      background: #fdfbf7;
    }
    .shop-filter-modal .shop-filter-modal__btn--apply {
      border: 1px solid #c9a050;
      background: #c9a050;
      color: #fff;
    }
    .shop-filter-modal .shop-filter-modal__btn--apply:hover {
      background: #b8923f;
      border-color: #b8923f;
    }

    #shopPageSection .gemstone-title {
      font-family: var(--font-ui);
    }
    #shopPageSection .gemstone-price,
    #shopPageSection .gemstone-action-btn {
      font-family: var(--font-body);
    }
    #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;
    }
    /* max-width/padding here match .gs-section-container (and #headerMainNavRow) exactly, so the
       hero content's left/right edges line up with the header above it — this rule needs its own
       copy rather than the shared class because it also carries flex/height/vertical-padding
       hero-specific layout the shared class doesn't. */
    .store-luxury-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      border-radius: 0;
      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: var(--verification-badge-size);
      font-weight: 700;
      letter-spacing: 0.08em;
      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: var(--font-display); /* handoff: card heading = DM Serif Display 400 */
      font-size: var(--category-title-size);
      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: var(--product-meta-size);
      color: #9a8e78;
    }
    .store-luxury-card__spec-label {
      margin: 0 0 0.35rem;
      font-size: var(--eyebrow-size);
      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: var(--filter-chip-size);
      color: #5a5040;
    }
    .store-luxury-card__tag--more {
      font-weight: 600;
      color: #9a7030;
      background: #f3ead2;
      border-color: #e0bb7f;
    }
    .store-luxury-card__spec-empty {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.75rem;
      padding: 0.5rem 0.65rem;
      border: 1px dashed #e5dcc8;
      border-radius: 0.4rem;
      background: #faf8f4;
      font-size: var(--product-meta-size);
      color: #9a8e78;
    }
    .store-luxury-card__spec-empty svg {
      width: 0.95rem;
      height: 0.95rem;
      flex-shrink: 0;
      color: #c2b79e;
    }
    .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-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }
    .store-luxury-card__stat-icon {
      width: 0.85rem;
      height: 0.85rem;
      flex-shrink: 0;
      color: #c19a6b;
    }
    .store-luxury-card__stat-value {
      font-size: var(--product-meta-size);
      font-weight: 600;
      color: #1a1a1a;
    }
    .store-luxury-card__stat-label {
      display: block;
      margin-top: 0.15rem;
      font-size: var(--eyebrow-size);
      color: #9a8e78;
      text-transform: capitalize;
    }
    .store-luxury-card__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 100%;
      margin-top: auto;
      padding: 0.55rem 1rem;
      border-radius: 0.4rem;
      border: 1px solid #c49a50;
      background: #c49a50;
      font-size: var(--button-size);
      font-weight: 600;
      letter-spacing: 0.1em;
      color: #fff;
      text-decoration: none;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    .store-luxury-card__cta:hover {
      background: #9a7030;
      border-color: #9a7030;
      color: #fff;
    }
    #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%;
    }
    /* Large phones / small landscape: 2-up store grid instead of one huge full-width card. */
    @media (min-width: 480px) and (max-width: 639px) {
      #allStoresGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
      }
    }
    #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: var(--button-size);
      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;
    }

/* === PRODUCT detail page === */
      /* ---- Product detail page (scoped to #productPage) ---- */

      /* Gallery thumbnails */

      /* Spec rows */

      /* "You may also like" scroll row */

      /* Shop-page product card styling, re-scoped for the related/seller rows (originals are
         scoped to #shopPageSection). #pdRelatedScroll is the pre-Glide id, kept for safety;
         #pdRelatedGlide / #pdSellerGlide are the current "You May Also Like" / "More from this
         seller" Glide carousels on the product detail page. */
      
      #pdRelatedGlide .shop-product-card,
      #pdSellerGlide .shop-product-card { border-radius: 0.75rem; }
      
      #pdRelatedGlide .shop-product-card:hover,
      #pdSellerGlide .shop-product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
      
      #pdRelatedGlide .shop-product-card__body,
      #pdSellerGlide .shop-product-card__body { padding: 0.55rem 0.6rem 0.5rem; }
      
      #pdRelatedGlide .shop-product-card__title-wrap,
      #pdSellerGlide .shop-product-card__title-wrap { min-height: 2.9rem; margin-bottom: 0.15rem; }
      
      #pdRelatedGlide .shop-product-card .gemstone-title,
      #pdSellerGlide .shop-product-card .gemstone-title { font-family: var(--font-ui); font-weight: 600; font-size: var(--product-title-size); line-height: 1.3; }
      
      #pdRelatedGlide .shop-product-card__meta,
      #pdSellerGlide .shop-product-card__meta { gap: 0.25rem; padding: 0.1rem 0.25rem; }
      
      #pdRelatedGlide .shop-product-card .gemstone-price,
      #pdSellerGlide .shop-product-card .gemstone-price { font-family: var(--font-ui); font-weight: 700; font-size: var(--product-price-size); font-variant-numeric: tabular-nums; }
      
      #pdRelatedGlide .shop-product-card .gemstone-action-btn,
      #pdSellerGlide .shop-product-card .gemstone-action-btn { font-family: var(--font-body); font-size: var(--button-size); letter-spacing: 0.03em; }
      
      #pdRelatedGlide .shop-product-card__divider,
      #pdSellerGlide .shop-product-card__divider { margin: 0.3rem 0; border-color: #e5e7eb; }
      
      #pdRelatedGlide .shop-product-card__actions,
      #pdSellerGlide .shop-product-card__actions { padding: 0 0.1rem; }
      
      #pdRelatedGlide .shop-card-icon-btn,
      #pdSellerGlide .shop-card-icon-btn { width: 1.85rem; height: 1.85rem; }
      
      #pdRelatedGlide .shop-card-icon-btn img,
      #pdSellerGlide .shop-card-icon-btn img { width: 1rem; height: 1rem; }
      
      #pdRelatedGlide .shop-shipping-badge img,
      #pdSellerGlide .shop-shipping-badge img { height: 2.85rem; width: auto; }
      
      #pdRelatedGlide .icon-bold,
      #pdSellerGlide .icon-bold { transition: filter 0.2s ease, transform 0.2s ease; }
      
      #pdRelatedGlide .icon-filter-gold,
      #pdSellerGlide .icon-filter-gold { filter: invert(73%) sepia(42%) saturate(362%) hue-rotate(355deg) brightness(96%) contrast(90%); }
      
      #pdRelatedGlide .product-thumb-img,
      #pdSellerGlide .product-thumb-img { height: auto; max-width: 100%; }

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

    /* --- Heading ---
       Typography follows the account-page scale (dashboard / orders / support cases / offers):
       DM Serif Display 400 for the title; Inter for row names, stat numbers and everything else;
       one 11px uppercase spec for labels, 13px body, 12px secondary lines, 11px pills. */
    /* Same treatment as the dashboard greeting's name accent */

    /* --- Stats bar --- */
    /* Same spec as dashboard .stat-number: numbers are Inter 700 + tabular figures */

    /* --- Table --- */

    /* Checkbox */

    /* Media */

    /* Details */
    /* Row name = card title (same spec as dashboard .card-title) */

    /* Price */

    /* Availability */

    /* Actions */

    /* Empty state */

    /* Privacy note */

    /* --- Tablet / mobile: 3-zone card --- */

    /* --- Stats bar wraps before it can overflow --- */

    /* --- Phones: details beside image, then price/availability + full-width actions --- */
    @media (max-width: 600px) {
      /* Price + availability share one full-width row: one unbroken divider above,
         price pinned left, pill pinned right. */
    }

    /* --- Very narrow phones (≤360px) --- */

/* ============================================================
   CATEGORIES PAGE (#categoriesPage)
   ============================================================ */
    #categoriesPage {
      --category-card-min-h: 12.5rem;
      font-family: var(--font-body);
      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 --- */
    /* Banner photo (categories_hero.jpg, 624x351) is drawn at or below its native width so it
       never upscales/blurs; bg-color = the photo's own flat cream so its edges are invisible. */
    /* Photo occupies the right 52% of the row at most, so the copy is capped at 44% and never
       runs over the gems on desktop/tablet. */
    /* Phones/small tablets: stack — copy on top, full-width photo anchored to the bottom.
       Bottom padding reserves the photo's height (100vw * 351/624 = 56.25vw, minus its empty
       cream top band) so text never overlaps the gems. */

    /* --- Section eyebrow heading --- */

    /* --- Featured carousel --- */
    #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); }
    }
    /* Mobile: compact cards (see category-card mobile block) with a peek of the next card
       so the row reads as scrollable — ~3.3 visible on phones, ~2.4 on small phones. */
    @media (max-width: 767px) {
      #categoriesPage .cat-featured-glide .glide__slides { gap: 0.625rem; }
      #categoriesPage .cat-featured-glide .glide__slide { flex-basis: calc((100% - 1.875rem) / 3.3); }
    }
    @media (max-width: 399px) {
      #categoriesPage .cat-featured-glide .glide__slide { flex-basis: calc((100% - 1.25rem) / 2.4); }
    }
    #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;
    }
    /* Phones/small tablets: side arrows would sit on top of the cards, so the track goes
       full-width and the arrows drop into a centered row underneath it. */

    /* --- 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-family: var(--font-display); /* handoff: card/category heading = DM Serif Display 400 */
      font-size: var(--category-title-size);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: normal;
      color: #1a1a1a;
    }
    #categoriesPage .category-card__count {
      margin: 0;
      font-size: var(--result-count-size);
      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: var(--font-ui);
      font-size: var(--text-link-size);
      font-weight: 600;
      letter-spacing: 0.08em;
      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; }
    /* Mobile: compact card — shorter media box, smaller image, tighter footer */
    @media (max-width: 767px) {
      #categoriesPage { --category-card-min-h: auto; }
      #categoriesPage .category-card { border-radius: 0.8rem; box-shadow: 0 4px 14px rgba(83, 63, 36, 0.05); }
      #categoriesPage .category-card__media { min-height: 6.25rem; padding: 0.85rem 0.5rem 0.25rem; }
      #categoriesPage .category-card__media img { max-height: 4.75rem; }
      #categoriesPage .category-card__footer { gap: 0.15rem; padding: 0.4rem 0.4rem 0.55rem; }
      #categoriesPage .category-card__count-row { min-height: 1.5rem; }
    }

    /* --- Trust strip --- */
    /* Trust strip is desktop/tablet only — hidden on mobile */

    /* --- All gem types --- */
    /* Mobile: keep heading + search on one row */
    #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: var(--filter-chip-size);
      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;
    }

/* ============================================================
   LOGIN / REGISTER (#loginPage) — form-centric centered card (cream editorial)
   ============================================================ */

    /* Atmospheric backdrop — gold glow + faint gem watermark */

    /* Card */
    @keyframes loginRise {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }

    /* Focal mark */

    /* Header (centered) */

    /* Google + divider */

    /* Fields */

    /* Remember / forgot */

    /* Submit */

    /* Trust badges */

    /* Alerts, field errors and helper text shared by every auth page built on #loginPage
       (password reset request/reset, email verification). login.blade.php still carries its
       own identical copy of the alert/error rules in a @push block. */

/* ============================================================
   STATUS PAGES (#gsStatusPage) — order confirmed, payment cancelled/failed, CCAvenue result,
   Stripe redirect, order-tracking lookup. One centred card + optional detail list, info
   panel and help strip. Moved off the legacy layout.app onto layouts.app.
   ============================================================ */

    /* Form fields (order-tracking lookup) */

/* --- Footer (redesign) --- */
.footer-col-title {
  /* Rendered as <h2> (valid heading order after any page content; was <h4>). Pin the face and
     line-height the old <h4> got from typography.css's h3–h6 rule, which h2's editorial
     DM Serif rule would otherwise replace. */
  font-family: var(--font-ui);
  line-height: 1.3;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  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 responsive layout. Mobile-first: 1 col on very narrow phones, 2-up link columns on
   phones, 3-up on tablets (Follow Us drops to a full-width row with icons + QR side by side),
   4-up from 1024px (Tailwind lg). */
.gs-footer .footer-col-title { margin-bottom: 0; }
.gs-footer .footer-link { display: inline-block; padding-block: 0.125rem; overflow-wrap: anywhere; }
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.footer-qr p { max-width: 16rem; }

@media (min-width: 360px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.25rem; }
  .footer-col--social { grid-column: 1 / -1; }
}

@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
}

@media (min-width: 360px) and (max-width: 1023.98px) {
  .footer-col--social { padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .footer-social-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem 2rem;
  }
  .footer-social-body > ul { margin-top: 1rem; }
  .footer-qr { display: flex; align-items: center; gap: 1rem; margin-top: 0; }
  .footer-qr p { margin-top: 0; max-width: 12rem; }
}

@media (max-width: 479.98px) {
  .gs-footer .footer-brand-row { gap: 0.75rem; padding-bottom: 1.75rem; }
  .gs-footer .footer-cols { padding-top: 2rem; }
  .footer-social-body { flex-direction: column; }
}

@media (min-width: 1024px) {
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .footer-col--social { grid-column: auto; }
}

.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:not(.footer-social-btn--brand):hover { border-color: rgba(224, 187, 127, 0.55); color: #E0BB7F; background: rgba(255, 255, 255, 0.05); }

/* Brand-colored variants — real platform colors instead of the plain outline style, per icon. */
.footer-social-btn--brand {
  border: none;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.footer-social-btn--brand:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.footer-social-btn--facebook { background: #1877F2; }
.footer-social-btn--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-social-btn--linkedin { background: #0A66C2; }
.footer-social-btn--pinterest { background: #E60023; }

/* Site header links (topbar, main nav, category sub-nav, mobile drawer — all inside
   #siteHeader in layouts/app.blade.php) are never underlined. Tailwind's preflight leaves
   links at text-decoration:inherit, but pages that also load Bootstrap 5's CSS (the RFQ
   account pages) bring its reboot rule `a { text-decoration: underline }`, which underlined
   every header link there. The id selector outranks that regardless of stylesheet order. */
#siteHeader a,
#siteHeader a:hover,
#siteHeader a:focus {
  text-decoration: none;
}