/** Shopify CDN: Minification failed

Line 2336:51 Unexpected "/"

**/
/* ==========================================================================
   PopsyKosy — Apple Liquid Glass System
   Inspired by Apple WWDC 2025 Liquid Glass design language.
   Budget: iPhone 14+ (A16) GPU. Single-layer blur, no nested filters.
   Brand overlay: PopsyKosy Cream (#FDF6EE) + Gold (#C8A96E) + Charcoal (#2D2D2D)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Base glass surfaces */
  --pk-glass-blur: 22px;
  --pk-glass-blur-lg: 32px;
  --pk-glass-saturate: 180%;
  --pk-glass-brightness: 108%;

  /* Light glass (on warm/bright backgrounds) */
  --pk-glass-bg-light: rgba(253, 246, 238, 0.55);
  --pk-glass-bg-light-heavy: rgba(253, 246, 238, 0.72);
  --pk-glass-bg-light-subtle: rgba(255, 255, 255, 0.35);

  /* Dark glass (on imagery / hero) */
  --pk-glass-bg-dark: rgba(24, 20, 18, 0.36);
  --pk-glass-bg-dark-heavy: rgba(24, 20, 18, 0.52);

  /* Rim highlights — the signature Liquid Glass edge light */
  --pk-glass-rim: rgba(255, 255, 255, 0.45);
  --pk-glass-rim-dark: rgba(255, 255, 255, 0.18);
  --pk-glass-rim-gold: rgba(200, 169, 110, 0.55);

  /* Inner specular */
  --pk-glass-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                          inset 0 -1px 0 rgba(200, 169, 110, 0.12);
  --pk-glass-inner-dark: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                         inset 0 -1px 0 rgba(0, 0, 0, 0.35);

  /* Drop shadows — soft, stacked, brand-aware */
  --pk-glass-shadow-sm: 0 2px 10px rgba(45, 45, 45, 0.06),
                       0 1px 2px rgba(45, 45, 45, 0.04);
  --pk-glass-shadow-md: 0 8px 28px rgba(45, 45, 45, 0.10),
                       0 2px 6px rgba(45, 45, 45, 0.06);
  --pk-glass-shadow-lg: 0 20px 60px rgba(45, 45, 45, 0.14),
                       0 6px 16px rgba(45, 45, 45, 0.08);

  /* Timing */
  --pk-glass-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. CAPABILITY GATES
   Devices without backdrop-filter (Android Chrome < 76, old Safari) get
   an opaque fallback so nothing looks broken.
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --pk-glass-bg-light: rgba(253, 246, 238, 0.96);
    --pk-glass-bg-light-heavy: rgba(253, 246, 238, 0.98);
    --pk-glass-bg-dark: rgba(24, 20, 18, 0.92);
    --pk-glass-bg-dark-heavy: rgba(24, 20, 18, 0.96);
  }
}

/* --------------------------------------------------------------------------
   3. CORE GLASS UTILITIES
   Apply these classes to any surface that should frost.
   -------------------------------------------------------------------------- */
.pk-glass {
  background: var(--pk-glass-bg-light);
  -webkit-backdrop-filter: blur(var(--pk-glass-blur)) saturate(var(--pk-glass-saturate)) brightness(var(--pk-glass-brightness));
  backdrop-filter: blur(var(--pk-glass-blur)) saturate(var(--pk-glass-saturate)) brightness(var(--pk-glass-brightness));
  border: 1px solid var(--pk-glass-rim);
  box-shadow: var(--pk-glass-inner-light), var(--pk-glass-shadow-md);
  border-radius: 18px;
  transition: background 320ms var(--pk-glass-ease),
              box-shadow 320ms var(--pk-glass-ease),
              transform 320ms var(--pk-glass-ease);
}

.pk-glass--heavy {
  background: var(--pk-glass-bg-light-heavy);
  -webkit-backdrop-filter: blur(var(--pk-glass-blur-lg)) saturate(var(--pk-glass-saturate));
  backdrop-filter: blur(var(--pk-glass-blur-lg)) saturate(var(--pk-glass-saturate));
}

.pk-glass--dark {
  background: var(--pk-glass-bg-dark);
  border: 1px solid var(--pk-glass-rim-dark);
  box-shadow: var(--pk-glass-inner-dark), var(--pk-glass-shadow-md);
  color: rgba(253, 246, 238, 0.96);
}

.pk-glass--dark.pk-glass--heavy {
  background: var(--pk-glass-bg-dark-heavy);
}

.pk-glass--gold-rim {
  border-color: var(--pk-glass-rim-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(200, 169, 110, 0.35),
    0 0 0 1px rgba(200, 169, 110, 0.15),
    var(--pk-glass-shadow-md);
}

/* Shimmer — a specular sweep that reads as refraction.
   Only runs on hover / focus and only on devices that allow motion. */
.pk-glass--shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pk-glass--shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.35) 52%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 900ms var(--pk-glass-ease);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.pk-glass--shimmer:hover::after,
.pk-glass--shimmer:focus-visible::after {
  transform: translateX(120%);
}

/* --------------------------------------------------------------------------
   4. HEADER / STICKY NAV — the single most visible Liquid Glass surface
   -------------------------------------------------------------------------- */
.shopify-section-group-header-group .header-wrapper,
.shopify-section-header .header-wrapper,
sticky-header.shopify-section-header-sticky,
.header-wrapper--sticky,
header.lp-header,
.lp-section.lp-header,
[class*="lp-header"] {
  -webkit-backdrop-filter: blur(20px) saturate(175%) brightness(108%);
  backdrop-filter: blur(20px) saturate(175%) brightness(108%);
  background: rgba(253, 246, 238, 0.68) !important;
  border-bottom: 1px solid rgba(200, 169, 110, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 4px 18px rgba(45, 45, 45, 0.06);
  transition: background 320ms var(--pk-glass-ease),
              backdrop-filter 320ms var(--pk-glass-ease);
}

/* When page has scrolled, header gets slightly heavier (Safari-style intensity bump) */
.shopify-section-header.scrolled .header-wrapper,
sticky-header.scrolled,
.lp-header.is-scrolled {
  background: rgba(253, 246, 238, 0.82) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 24px rgba(45, 45, 45, 0.08);
}

/* Mobile: tighten blur radius for perf (heavy blur is expensive on iOS) */
@media (max-width: 767px) {
  header.lp-header,
  [class*="lp-header"] {
    -webkit-backdrop-filter: blur(16px) saturate(170%) brightness(106%);
    backdrop-filter: blur(16px) saturate(170%) brightness(106%);
  }
  .lp-header.is-scrolled {
    -webkit-backdrop-filter: blur(20px) saturate(175%);
    backdrop-filter: blur(20px) saturate(175%);
  }
}

/* Offset site content below the fixed .lp-header so nothing gets hidden
   underneath it. Value is overridden at runtime by the inline script in
   lp-header.liquid (ResizeObserver → --lp-header-h). Desktop: 36 (ann) +
   56 (brand) + 42 (nav) = 134px. Mobile: ann + brand ≈ 88px (mobile nav
   collapses into hamburger). */
:root { --lp-header-h: 134px; }
@media (max-width: 767px) { :root { --lp-header-h: 88px; } }
main#MainContent { padding-top: var(--lp-header-h); }

/* HERO FULLBLEED EXCEPTION
   On pages whose first section is the .pk-hero-v4 hero, suppress the global
   padding-top so the hero extends UNDER the fixed Liquid Glass header. The
   hero then absorbs the header's vertical space via its own padding-top — no
   blank strip appears at the top of the page, and the header's backdrop-blur
   shows the hero photo through the glass instead of an empty white band. */
main#MainContent:has(> .shopify-section:first-of-type .pk-hero-v4) {
  padding-top: 0;
}
.pk-hero-v4 {
  padding-top: var(--lp-header-h);
  /* Keep the visible hero area at its original 680–860px by extending total
     bounds; the top var(--lp-header-h) of the hero sits behind the header. */
  min-height: calc(680px + var(--lp-header-h)) !important;
  max-height: calc(860px + var(--lp-header-h)) !important;
}
.pk-hero-v4__image,
.pk-hero-v4__image-wrap { min-height: inherit; }
/* NOTE: .pk-hero-v4__copy uses top:50% — its containing block is
   .pk-hero-v4__image (which starts at y=var(--lp-header-h) inside the padded
   hero), so the copy is already centered in the VISIBLE area without any
   adjustment. Do NOT add a top offset here or the copy will sit too low. */

/* --------------------------------------------------------------------------
   5. DRAWERS & MODALS
   Cart drawer, search drawer, mobile menu, newsletter popup.
   -------------------------------------------------------------------------- */
details-disclosure .header__submenu,
.header__submenu,
cart-drawer,
cart-drawer .drawer__inner,
quick-search,
quick-search .drawer__inner,
menu-drawer,
menu-drawer .drawer__inner,
modal-dialog .modal__content,
.cart-notification {
  background: rgba(253, 246, 238, 0.88) !important;
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--pk-glass-shadow-lg);
}

/* The modal scrim itself gets dark glass (defocuses page behind) */
.overlay--scrim,
modal-dialog::backdrop,
.modal-overlay {
  background: rgba(24, 20, 18, 0.28) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* --------------------------------------------------------------------------
   6. PRODUCT CARDS — frosted surface + gold rim on hover
   -------------------------------------------------------------------------- */
.card-wrapper.product-card-wrapper .card {
  position: relative;
  border-radius: 18px;
  transition: transform 420ms var(--pk-glass-ease),
              box-shadow 420ms var(--pk-glass-ease);
}

.card-wrapper.product-card-wrapper .card .card-inner {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 6px 20px rgba(45, 45, 45, 0.06);
  transition: box-shadow 420ms var(--pk-glass-ease);
}

.card-wrapper.product-card-wrapper .card:hover {
  transform: translateY(-4px);
}

.card-wrapper.product-card-wrapper .card:hover .card-inner {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(200, 169, 110, 0.28),
    0 22px 48px rgba(45, 45, 45, 0.14),
    0 6px 14px rgba(200, 169, 110, 0.08);
}

/* Force product card text-align center site-wide
   (overrides any legacy text-align--left passed explicitly) */
.card-wrapper.product-card-wrapper .card-content,
.card-wrapper.product-card-wrapper .card-content .card-heading,
.card-wrapper.product-card-wrapper .card-content .card-price,
.card-wrapper.product-card-wrapper .card-content .card-others {
  text-align: center;
}

.card-wrapper.product-card-wrapper .card-content .card-swatches {
  display: flex;
  justify-content: center;
}

.card-wrapper.product-card-wrapper .card-content .product-card-rating {
  justify-content: center;
  display: flex;
}

/* Center the media within the card cleanly */
.card-wrapper.product-card-wrapper .card-media,
.card-wrapper.product-card-wrapper .card-media-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-wrapper.product-card-wrapper .card-media img,
.card-wrapper.product-card-wrapper .card-media .placeholder-svg {
  margin: auto;
  object-position: center center;
}

/* --------------------------------------------------------------------------
   7. BUTTONS — liquid-glass primary/secondary
   -------------------------------------------------------------------------- */
.button--primary,
.button.button--primary,
button[name="add"],
.shopify-payment-button__button--unbranded {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  border: 1px solid rgba(200, 169, 110, 0.4);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(200, 169, 110, 0.10) 100%),
    rgba(200, 169, 110, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  color: #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(200, 169, 110, 0.25);
  transition: transform 280ms var(--pk-glass-ease),
              box-shadow 280ms var(--pk-glass-ease),
              background 280ms var(--pk-glass-ease);
}

.button--primary:hover,
.button.button--primary:hover,
button[name="add"]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(200, 169, 110, 0.35);
}

.button--secondary,
.button.button--secondary {
  border-radius: 999px;
  border: 1px solid rgba(45, 45, 45, 0.15);
  background: rgba(253, 246, 238, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  color: #2d2d2d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 2px 8px rgba(45, 45, 45, 0.05);
  transition: background 240ms var(--pk-glass-ease);
}
.button--secondary:hover,
.button.button--secondary:hover {
  background: rgba(253, 246, 238, 0.82);
}

/* --------------------------------------------------------------------------
   8. STICKY ATC BAR / FLOATING CTAs
   -------------------------------------------------------------------------- */
.product-sticky-form,
.sticky-atc-bar,
sticky-add-to-cart {
  background: rgba(253, 246, 238, 0.78) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(200, 169, 110, 0.2);
  box-shadow: 0 -4px 24px rgba(45, 45, 45, 0.08);
}

/* --------------------------------------------------------------------------
   9. BANNERS / BADGES / CHIPS — small glass pills
   -------------------------------------------------------------------------- */
.badge,
.product-badge,
.discount-badge {
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 2px 8px rgba(45, 45, 45, 0.08);
}

/* --------------------------------------------------------------------------
   10. MOBILE (≤ 749px) — reduce blur radius to protect iPhone GPU
   iPhone 14/15/16 handle full blur fine, but older 12/13 benefit from
   slightly lighter effects. Keep it premium but leaner.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  :root {
    --pk-glass-blur: 18px;
    --pk-glass-blur-lg: 24px;
  }

  .shopify-section-group-header-group .header-wrapper,
  sticky-header.shopify-section-header-sticky {
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
  }

  .card-wrapper.product-card-wrapper .card:hover {
    transform: none; /* no lift on mobile */
  }
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION — kill shimmer + lift
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pk-glass,
  .pk-glass--shimmer,
  .card-wrapper.product-card-wrapper .card,
  .button--primary,
  .button--secondary {
    transition: none !important;
  }
  .pk-glass--shimmer::after {
    display: none;
  }
  .card-wrapper.product-card-wrapper .card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. DARK SECTION ADAPTATIONS
   When a section has .color-scheme-inverse (dark bg), glass swaps to dark.
   -------------------------------------------------------------------------- */
.color-scheme-inverse .pk-glass,
.color-background-dark .pk-glass,
[data-color-scheme="dark"] .pk-glass {
  background: var(--pk-glass-bg-dark);
  border-color: var(--pk-glass-rim-dark);
  box-shadow: var(--pk-glass-inner-dark), var(--pk-glass-shadow-md);
  color: rgba(253, 246, 238, 0.96);
}

/* --------------------------------------------------------------------------
   13. BENTO / HERO CARDS (homepage) — extra polish
   -------------------------------------------------------------------------- */
.lp-bento-card,
.lp-bento-grid__card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  transition: transform 520ms var(--pk-glass-ease),
              box-shadow 520ms var(--pk-glass-ease);
}
.lp-bento-card::before,
.lp-bento-grid__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
              inset 0 -1px 0 rgba(200, 169, 110, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  z-index: 2;
}
.lp-bento-card:hover,
.lp-bento-grid__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(45, 45, 45, 0.14),
              0 6px 16px rgba(200, 169, 110, 0.12);
}

/* --------------------------------------------------------------------------
   14. CL-CARD (live collection product cards) — center everything
   Applies to sections/lp-collection-playmats.liquid (cl-products grid)
   -------------------------------------------------------------------------- */
.cl-card {
  text-align: center;
}
.cl-card__info {
  text-align: center !important;
  align-items: center !important;
}
.cl-card__title,
.cl-card__variant,
.cl-card__price,
.cl-card__price-from {
  text-align: center !important;
  width: 100%;
}
.cl-card__rating {
  justify-content: center !important;
}
.cl-card__bottom {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.cl-card__sizes {
  justify-content: center !important;
}
/* Media centered within card container — show FULL product (no top/bottom crop) */
.cl-card__media {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden;
  background: #f7f3eb; /* cream letterbox — matches brand neutral bg */
}
.cl-card__img,
.cl-card__img--primary,
.cl-card__img--hover {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto;
  padding: 4%; /* breathing room so product doesn't touch edges */
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   15. UNIVERSAL PRODUCT MEDIA CENTERING SAFETY NET
   Catches any product image across any custom card implementation
   -------------------------------------------------------------------------- */
[class*="card"] img,
[class*="product"] img,
[class*="tile"] img {
  object-position: center center;
}
[class*="card__media"],
[class*="card-media"],
[class*="product__media"] {
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. VISIBILITY BOOST — make Liquid Glass actually show on pages
   Problem: collection/product pages have flat white bg, so glass = solid.
   Fix: (a) add warm gradient tint under content so glass has refraction,
        (b) make cl-card itself a glass surface, (c) glass-ify primary buttons,
        (d) glass separator at footer top.
   -------------------------------------------------------------------------- */

/* (a) Warm ambient backdrop — just enough color for header/glass to refract */
body {
  background:
    radial-gradient(ellipse 1200px 600px at 20% 0%, rgba(253, 226, 200, 0.28), transparent 60%),
    radial-gradient(ellipse 1000px 500px at 85% 10%, rgba(200, 169, 110, 0.14), transparent 65%),
    radial-gradient(ellipse 900px 700px at 50% 80%, rgba(247, 238, 225, 0.5), transparent 70%),
    linear-gradient(180deg, #fdf6ee 0%, #fbf4ea 50%, #f8efe0 100%) !important;
  background-attachment: fixed !important;
}

/* (b) cl-card as Liquid Glass surface */
.cl-card {
  background: var(--pk-glass-bg-light-heavy) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.04) !important;
  backdrop-filter: blur(18px) saturate(180%) brightness(1.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(200, 169, 110, 0.14),
    0 2px 12px rgba(45, 35, 25, 0.06),
    0 8px 28px rgba(45, 35, 25, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform 0.45s var(--pk-glass-ease),
              box-shadow 0.45s var(--pk-glass-ease),
              border-color 0.45s var(--pk-glass-ease);
}
.cl-card:hover {
  transform: translateY(-4px);
  border-color: var(--pk-glass-rim-gold) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(200, 169, 110, 0.22),
    0 4px 18px rgba(45, 35, 25, 0.08),
    0 18px 48px rgba(45, 35, 25, 0.16),
    0 0 0 1px rgba(200, 169, 110, 0.28) !important;
}
/* Inner media tile keeps its own letterbox; bottom panel inherits glass */
.cl-card__media {
  background: rgba(247, 238, 225, 0.65) !important;
}
.cl-card__info,
.cl-card__bottom {
  background: transparent !important;
}

/* (c) Primary buttons → glass pill */
.cl-btn,
.cl-btn-primary,
.cl-card__cta,
.button--primary,
.btn-primary,
[class*="btn-primary"],
button[type="submit"].button,
.shopify-payment-button__button--unbranded,
.product-form__submit {
  background: rgba(200, 169, 110, 0.18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.06) !important;
  backdrop-filter: blur(14px) saturate(180%) brightness(1.06) !important;
  border: 1px solid rgba(200, 169, 110, 0.45) !important;
  color: #3b2820 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(200, 169, 110, 0.25),
    0 2px 10px rgba(200, 169, 110, 0.18),
    0 6px 18px rgba(45, 35, 25, 0.08) !important;
  border-radius: 999px !important;
  transition: all 0.35s var(--pk-glass-ease);
}
.cl-btn:hover,
.cl-btn-primary:hover,
.cl-card__cta:hover,
.button--primary:hover,
.btn-primary:hover,
[class*="btn-primary"]:hover,
.shopify-payment-button__button--unbranded:hover,
.product-form__submit:hover {
  background: rgba(200, 169, 110, 0.32) !important;
  border-color: rgba(200, 169, 110, 0.7) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(200, 169, 110, 0.35),
    0 4px 14px rgba(200, 169, 110, 0.28),
    0 10px 28px rgba(45, 35, 25, 0.14) !important;
}

/* (d) Footer — glass transition strip at top so the dark block feels floated */
footer, .lp-footer, [class*="footer"][class*="lp"] {
  position: relative;
}
footer::before, .lp-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.35) 20%,
    rgba(200, 169, 110, 0.55) 50%,
    rgba(200, 169, 110, 0.35) 80%,
    transparent 100%);
  pointer-events: none;
}

/* (e) Cart drawer glass */
cart-drawer, .cart-drawer, .drawer__inner, .drawer {
  background: var(--pk-glass-bg-light-heavy) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.06) !important;
  backdrop-filter: blur(24px) saturate(180%) brightness(1.06) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* (f) Announcement bar / mini sticky elements */
.announcement-bar,
.lp-announcement,
[class*="announcement"] {
  background: rgba(253, 246, 238, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

/* (g) Filter / sort pills on collection pages */
.cl-toolbar,
.cl-sort,
.cl-filter,
[class*="facets"],
[class*="toolbar"] {
  background: rgba(253, 246, 238, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   17. MOBILE QA PATCHES (2026-04-20) — full-site mobile polish
   Triggered by mobile visual audit at 390–606px viewport. Addresses:
   (a) announcement slider slide-bleed
   (b) hero title/CTA readability + stacking
   (c) hero meta badge overflow
   (d) collection-tile text contrast
   (e) dead-vertical-space trim on prose interludes
   (f) touch-target minimums (44px) for nav/social/CTAs
   (g) horizontal-scroll guard for rogue overflow
   ========================================================================== */

/* (a) Announcement slider — prevent two slides showing at once mid-transition.
   Shopify's default slider keeps neighbor slides visible for drag. On a
   narrow mobile viewport that reads as overlapping text. Pin opacity to the
   active slide only. */
@media (max-width: 749px) {
  .announcement-bar .slider-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms var(--pk-glass-ease);
  }
  .announcement-bar .slider-slide.is-active,
  .announcement-bar .slider-slide[aria-current="true"],
  .announcement-bar .slider-slide[data-slide-active="true"] {
    opacity: 1;
    visibility: visible;
  }
  /* The slider wrapper is transform-animated; clipping prevents the next
     slide from peeking through while the current slide is sliding out. */
  .announcement-bar .slider-container,
  .announcement-bar .slider-wrapper {
    overflow: hidden !important;
  }
  /* Keep announcement text on ONE line with ellipsis so long copy doesn't
     wrap into two rows and bump the header height. */
  .announcement-bar .slider-slide .link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 88vw;
    display: block;
    font-size: 12.5px;
  }
}

/* (b) Hero copy — legibility + CTA stacking on mobile.
   Problem: on mobile the child photo fills the copy area with zero contrast
   behind "Where safety feels like home." Original .pk-hero-v4__image::after
   only adds a bottom→up cream fade, which doesn't cover the title. */
@media (max-width: 749px) {
  /* Stronger cream veil from top so eyebrow + title sit on legible ground */
  .pk-hero-v4__image::after {
    background:
      linear-gradient(180deg,
        rgba(253, 246, 238, 0.55) 0%,
        rgba(253, 246, 238, 0.22) 32%,
        rgba(253, 246, 238, 0) 55%,
        rgba(253, 246, 238, 0.92) 100%) !important;
  }
  /* Copy block: pull up, constrain, add cream card behind for Liquid-Glass
     readability — functions as a mini-glass panel on busy photography */
  .pk-hero-v4__copy {
    padding: 28px 22px 34px !important;
    background: linear-gradient(180deg,
      rgba(253, 246, 238, 0) 0%,
      rgba(253, 246, 238, 0.96) 18%);
  }
  .pk-hero-v4__title {
    font-size: clamp(2.1rem, 8.8vw, 2.8rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.012em !important;
  }
  .pk-hero-v4__subtitle {
    font-size: 15px !important;
    line-height: 1.62 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }
  /* CTA row: STACK vertically so buttons don't collide. Primary = full-width
     pill, secondary = centered text link with visible underline bar. */
  .pk-hero-v4__cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .pk-hero-v4__cta {
    justify-content: center !important;
    width: 100% !important;
    padding: 16px 28px !important;
    font-size: 13px !important;
  }
  .pk-hero-v4__secondary {
    align-self: flex-start !important;
    padding: 8px 0 !important;
    font-size: 12.5px !important;
  }
}

/* (c) Hero trust-meta strip — stack vertically at very narrow widths so it
   doesn't wrap into two uneven rows. Also shrinks the font. */
@media (max-width: 480px) {
  .pk-hero-v4__meta {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 8.5px !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }
  .pk-hero-v4__badge {
    left: 12px !important;
    bottom: 12px !important;
    font-size: 9.5px !important;
    padding: 10px 14px !important;
  }
}

/* (d) Collection tile overlays (e.g., "Signature Collection" on homepage) —
   the hover-only scrim leaves body text invisible on mobile where there's
   no hover. Add a permanent bottom-weighted scrim so text stays readable. */
@media (max-width: 749px) {
  .lp-brand-story .collection-card::after,
  .featured-collection .collection-card::after,
  [class*="collection-tile"]::after,
  [class*="collection-card"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(20, 16, 12, 0) 40%,
      rgba(20, 16, 12, 0.32) 75%,
      rgba(20, 16, 12, 0.52) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .lp-brand-story .collection-card *,
  .featured-collection .collection-card *,
  [class*="collection-tile"] > *,
  [class*="collection-card"] > * {
    position: relative;
    z-index: 2;
  }
}

/* (e) Prose interludes — "The difference is quiet…" style full-bleed quote
   blocks that read as dead space on mobile. Compress vertical padding. */
@media (max-width: 749px) {
  .lp-brand-story,
  .lp-cta-newsletter,
  [class*="lp-brand"],
  section[class*="quote"],
  section[class*="pullquote"] {
    padding-top: clamp(48px, 12vw, 72px) !important;
    padding-bottom: clamp(48px, 12vw, 72px) !important;
  }
}

/* (f) Touch target minimums — anything a finger taps should be ≥ 44px high
   per Apple HIG / WCAG 2.5.5. Prevents mis-taps on the dense top bar. */
@media (max-width: 749px) {
  .pk-lang-switcher a,
  .announcement-bar .nav-button,
  header a,
  header button,
  footer .social-list a,
  footer .social-list li a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Language switcher pill: tighter spacing so EN|ES|FR still feels compact */
  .pk-lang-switcher {
    padding: 3px;
  }
  .pk-lang-switcher a {
    padding: 6px 10px;
    min-width: 38px;
    min-height: 32px;
  }
}

/* (g) Horizontal-scroll guard — catches rogue overflow from full-bleed
   sections that use negative margins or `width: 100vw` without a scrollbar
   compensator. Common culprit on mobile since the URL bar can shift vw. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
@media (max-width: 749px) {
  main#MainContent > .shopify-section {
    overflow-x: clip;
  }
}

/* (h) Email input + submit on CTA newsletter — make both a full 52px row
   height so the 10% CTA doesn't feel cramped next to the thumb. */
@media (max-width: 749px) {
  .lp-cta-newsletter input[type="email"],
  .lp-cta-newsletter button[type="submit"],
  .lp-cta__input,
  .lp-cta__form input[type="email"],
  .lp-cta__form button[type="submit"],
  .lp-footer__nl-input,
  [class*="newsletter"] input[type="email"],
  [class*="newsletter"] button[type="submit"],
  input[type="email"],
  input[type="tel"],
  input[type="text"],
  textarea,
  select {
    min-height: 48px !important;
    font-size: 16px !important; /* iOS: prevents zoom-on-focus */
  }
}

/* ==========================================================================
   18. MOBILE HEADER FIX (2026-04-20 v4) — pill hidden + logo truly centered
   v3 hid the .lp-hdr__lang-wrap pill, but .lp-hdr__brand-left/right still had
   `flex: 1`, so each cluster occupied 50% of the row. The absolutely-centered
   logo (`.lp-hdr__brand-center { position:absolute; left:50% }`) landed
   directly on top of the right cluster's icons (search / account / cart) —
   hence the visible overlap of POPSYKOSY wordmark with icon shapes.
   Fix on mobile (≤749px):
     • Collapse left & right flex clusters to their intrinsic content width
       so `.lp-hdr__brand`'s justify-content:space-between pins hamburger to
       the left, icons to the right, freeing the center lane for the logo.
     • Shrink logo height slightly (28→24px) for a safety margin.
   Language switching: moved to first-load `pk-lang-modal` snippet.
   ========================================================================== */
@media (max-width: 749px) {
  /* Hide header lang pill on mobile — real selector + legacy catch-alls */
  .lp-hdr__lang-wrap,
  .lp-hdr__lang,
  .pk-lang-switcher,
  header .pk-lang-switcher,
  .lp-header .pk-lang-switcher,
  sticky-header .pk-lang-switcher,
  .header-wrapper .pk-lang-switcher,
  [class*="lang-switcher"]:not(footer *):not(.lp-footer *),
  [class*="lang-wrap"]:not(footer *):not(.lp-footer *),
  .lp-hdr__brand-right form.shopify-localization-form,
  .lp-header form.shopify-localization-form,
  header form.shopify-localization-form {
    display: none !important;
  }
  /* Collapse left & right flex clusters to intrinsic width — frees center lane */
  .lp-hdr__brand > div:first-child,
  .lp-hdr__brand-right {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  /* Tighten right cluster so icons hug the right edge */
  .lp-hdr__brand-right {
    gap: 0.35rem !important;
  }
  /* Elevate logo above icons (both are in the same stacking context) */
  .lp-hdr__brand-center {
    z-index: 3 !important;
    pointer-events: auto !important;
  }
  .lp-hdr__logo svg {
    height: 24px !important;
    max-width: 46vw;
  }
  /* Legacy-selector safety for other theme eras */
  .header__heading-logo-wrapper,
  .lp-header__logo,
  .lp-hdr__logo,
  h1.header__heading,
  .header__heading {
    z-index: 3 !important;
    position: relative !important;
  }
}

/* ==========================================================================
   19. MOBILE DRAWER — STYLE ACCORDION CENTER (2026-04-20)
   The mobile drawer's "Style" dropdown button uses `justify-content:
   space-between` (text left / chevron right). Every other mobile nav link
   (Playmats, Bestsellers, Sale, Our Difference, Reviews) sits visually
   centered, so Style looked out of line. Center its contents as a single
   group (text + chevron together) so it matches the column rhythm.
   ========================================================================== */
@media (max-width: 749px) {
  .lp-hdr__mobile-style-btn {
    justify-content: center !important;
    text-align: center !important;
    gap: 0.4rem !important;
  }
  /* Also center every plain mobile link explicitly, in case theme layer
     left alignment ever leaks back in */
  .lp-hdr__mobile-link,
  .lp-hdr__mobile-nav > a {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   20. LIQUID GLASS PRO — FULL-SITE UPGRADE (2026-04-20)
   Goal: stronger frosted blur, gold+white dual rim, deeper layered shadows,
   shimmer on more surfaces. Covers header/drawer, hero CTAs, product cards,
   newsletter form, footer social chips.
   --------------------------------------------------------------------------
   Strategy: declare upgrade tokens so older sections unaffected unless they
   opt in. Then override key zones with the Pro tokens via !important to
   beat theme defaults.
   ========================================================================== */

/* --- 20.1 Pro token layer ------------------------------------------------- */
/* Perf note: desktop uses richer blur (22-28px); mobile drops to 14-18px to
   keep GPU cheap. Shimmer is gated to (hover:hover) so touch devices never
   allocate the extra paint layer. */
:root {
  --pk-glass-blur-pro:       22px;
  --pk-glass-blur-pro-lg:    30px;
  --pk-glass-saturate-pro:   170%;
  --pk-glass-brightness-pro: 106%;
  --pk-glass-bg-pro-light:       rgba(253, 246, 238, 0.52);
  --pk-glass-bg-pro-light-heavy: rgba(253, 246, 238, 0.72);
  --pk-glass-bg-pro-dark:        rgba(24, 20, 18, 0.32);
  --pk-glass-rim-pro-outer:      rgba(200, 169, 110, 0.55);
  --pk-glass-rim-pro-inner:      rgba(255, 255, 255, 0.75);

  /* Dual-rim inset shadow: outer gold halo + inner white highlight + bottom amber trace */
  --pk-glass-rim-dual:
    inset 0 0 0 1px rgba(200, 169, 110, 0.35),
    inset 0 1px 0   rgba(255, 255, 255, 0.85),
    inset 0 -1px 0  rgba(200, 169, 110, 0.22);
  --pk-glass-rim-dual-hover:
    inset 0 0 0 1px rgba(200, 169, 110, 0.55),
    inset 0 1px 0   rgba(255, 255, 255, 0.95),
    inset 0 -1px 0  rgba(200, 169, 110, 0.35);

  /* Layered shadow stack: close contact + mid float + deep ambient */
  --pk-glass-shadow-pro:
    0 1px 2px    rgba(45, 45, 45, 0.06),
    0 4px 12px   rgba(45, 45, 45, 0.09),
    0 18px 44px  rgba(45, 45, 45, 0.12);
  --pk-glass-shadow-pro-lg:
    0 2px 4px    rgba(45, 45, 45, 0.08),
    0 8px 22px   rgba(45, 45, 45, 0.12),
    0 28px 72px  rgba(45, 45, 45, 0.18);
  --pk-glass-shadow-pro-gold:
    0 1px 2px    rgba(45, 45, 45, 0.08),
    0 6px 18px   rgba(200, 169, 110, 0.28),
    0 18px 44px  rgba(200, 169, 110, 0.16);
}

/* --- 20.2 Shimmer — desktop-hover only, no blend-mode (perf) --------------- */
/* Gated behind (hover:hover) AND (pointer:fine) so touch devices never allocate
   the extra paint layer. Removed mix-blend-mode (forces costly rasterization).
   Shimmer ::after is created ONLY on :hover — not by default — so idle cards
   don't pay the layer cost. */
@media (hover: hover) and (pointer: fine) {
  .pk-shimmer-on,
  .cl-card,
  .lp-bento-card,
  .lp-bento-grid__card,
  .pk-hero-v4__cta,
  .button--primary,
  .btn-primary,
  .product-form__submit,
  [class*="newsletter"] button[type="submit"] {
    position: relative;
    overflow: hidden;
  }
  .pk-shimmer-on:hover::after,
  .cl-card:hover::after,
  .lp-bento-card:hover::after,
  .lp-bento-grid__card:hover::after,
  .pk-hero-v4__cta:hover::after,
  .button--primary:hover::after,
  .btn-primary:hover::after,
  .product-form__submit:hover::after,
  [class*="newsletter"] button[type="submit"]:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 70%
    );
    transform: translate3d(-120%, 0, 0);
    animation: pk-shimmer-sweep 0.9s var(--pk-glass-ease) forwards;
    pointer-events: none;
    z-index: 1;
  }
  @keyframes pk-shimmer-sweep {
    to { transform: translate3d(120%, 0, 0); }
  }
}

/* --- 20.3 HEADER + ANNOUNCEMENT — stronger frosted (compositor-friendly) --- */
/* `transform: translateZ(0)` promotes header to its own compositor layer so
   scrolling the page below doesn't re-paint it every frame. */
header.lp-header,
.lp-section.lp-header,
[class*="lp-header"],
.shopify-section-group-header-group .header-wrapper,
sticky-header.shopify-section-header-sticky {
  -webkit-backdrop-filter: blur(var(--pk-glass-blur-pro)) saturate(var(--pk-glass-saturate-pro)) brightness(var(--pk-glass-brightness-pro)) !important;
  backdrop-filter: blur(var(--pk-glass-blur-pro)) saturate(var(--pk-glass-saturate-pro)) brightness(var(--pk-glass-brightness-pro)) !important;
  background: var(--pk-glass-bg-pro-light) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(200, 169, 110, 0.22),
    0 8px 28px rgba(45, 45, 45, 0.10) !important;
  transform: translateZ(0);
  will-change: backdrop-filter;
}
@media (max-width: 749px) {
  /* Mobile GPUs: lighter blur, no will-change (spares battery/memory) */
  header.lp-header,
  .lp-section.lp-header,
  [class*="lp-header"],
  sticky-header.shopify-section-header-sticky {
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    will-change: auto;
  }
}
.lp-header.is-scrolled,
sticky-header.scrolled {
  -webkit-backdrop-filter: blur(var(--pk-glass-blur-pro-lg)) saturate(var(--pk-glass-saturate-pro)) !important;
  backdrop-filter: blur(var(--pk-glass-blur-pro-lg)) saturate(var(--pk-glass-saturate-pro)) !important;
  background: var(--pk-glass-bg-pro-light-heavy) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(200, 169, 110, 0.3),
    0 14px 38px rgba(45, 45, 45, 0.14) !important;
}
.announcement-bar,
.lp-announcement,
[class*="announcement"] {
  -webkit-backdrop-filter: blur(20px) saturate(175%) brightness(1.04) !important;
  backdrop-filter: blur(20px) saturate(175%) brightness(1.04) !important;
  background: rgba(253, 246, 238, 0.55) !important;
  border-bottom: 1px solid rgba(200, 169, 110, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* --- 20.4 MOBILE DRAWER — glass body + per-row rim hover ------------------ */
@media (max-width: 749px) {
  .lp-hdr__mobile-nav,
  .lp-hdr__mobile-nav--open {
    background: var(--pk-glass-bg-pro-light-heavy) !important;
    -webkit-backdrop-filter: blur(var(--pk-glass-blur-pro)) saturate(var(--pk-glass-saturate-pro)) !important;
    backdrop-filter: blur(var(--pk-glass-blur-pro)) saturate(var(--pk-glass-saturate-pro)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 12px 32px rgba(45, 45, 45, 0.14) !important;
    border-top: 1px solid rgba(200, 169, 110, 0.25) !important;
  }
  .lp-hdr__mobile-link,
  .lp-hdr__mobile-style-btn {
    border-radius: 10px;
    transition: background 0.28s var(--pk-glass-ease), color 0.2s ease !important;
  }
  .lp-hdr__mobile-link:active,
  .lp-hdr__mobile-link:focus-visible,
  .lp-hdr__mobile-style-btn:active,
  .lp-hdr__mobile-style-btn:focus-visible {
    background: rgba(200, 169, 110, 0.10) !important;
    outline: none;
  }
}

/* --- 20.5 HERO CTA — rim-dual + shimmer ------------------------------------ */
.pk-hero-v4__cta,
.pk-hero-v4__cta.button--primary {
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.08) !important;
  backdrop-filter: blur(16px) saturate(180%) brightness(1.08) !important;
  border: 1px solid rgba(200, 169, 110, 0.45) !important;
  box-shadow:
    var(--pk-glass-rim-dual),
    var(--pk-glass-shadow-pro-gold) !important;
  transition:
    transform 0.32s var(--pk-glass-ease),
    box-shadow 0.32s var(--pk-glass-ease),
    background 0.32s var(--pk-glass-ease) !important;
}
.pk-hero-v4__cta:hover,
.pk-hero-v4__cta.button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    var(--pk-glass-rim-dual-hover),
    var(--pk-glass-shadow-pro-lg) !important;
}

/* --- 20.6 PRIMARY BUTTONS everywhere (Shop, Add-to-cart, CTA) --------------- */
.button--primary,
.button.button--primary,
button[name="add"],
.shopify-payment-button__button--unbranded,
.btn-primary,
.product-form__submit,
.cl-btn,
.cl-btn-primary,
.cl-card__cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(200, 169, 110, 0.12)),
              rgba(200, 169, 110, 0.92) !important;
  border: 1px solid rgba(200, 169, 110, 0.45) !important;
  box-shadow:
    var(--pk-glass-rim-dual),
    var(--pk-glass-shadow-pro-gold) !important;
  color: #1a1a1a !important;
  transition:
    transform 0.3s var(--pk-glass-ease),
    box-shadow 0.3s var(--pk-glass-ease),
    background 0.3s var(--pk-glass-ease) !important;
}
.button--primary:hover,
.button.button--primary:hover,
button[name="add"]:hover,
.shopify-payment-button__button--unbranded:hover,
.btn-primary:hover,
.product-form__submit:hover,
.cl-btn:hover,
.cl-btn-primary:hover,
.cl-card__cta:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    var(--pk-glass-rim-dual-hover),
    var(--pk-glass-shadow-pro-lg) !important;
}

/* --- 20.7 PRODUCT CARDS — rim-dual + deeper shadow (scroll-smooth) --------- */
/* Desktop: full frosted glass. Mobile: backdrop-filter REMOVED (the primary
   cause of scroll jank on product grids) — substituted with an opaque glass
   bg that reads identically on a solid cream canvas.
   `contain: paint layout` stops repaints bleeding into neighbors. */
.cl-card,
.card-wrapper.product-card-wrapper .card {
  background: var(--pk-glass-bg-pro-light-heavy) !important;
  -webkit-backdrop-filter: blur(var(--pk-glass-blur-pro)) saturate(var(--pk-glass-saturate-pro)) brightness(var(--pk-glass-brightness-pro)) !important;
  backdrop-filter: blur(var(--pk-glass-blur-pro)) saturate(var(--pk-glass-saturate-pro)) brightness(var(--pk-glass-brightness-pro)) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    var(--pk-glass-rim-dual),
    var(--pk-glass-shadow-pro) !important;
  border-radius: 20px !important;
  contain: paint layout;
  transition:
    transform 0.35s var(--pk-glass-ease),
    box-shadow 0.35s var(--pk-glass-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  .cl-card:hover,
  .card-wrapper.product-card-wrapper .card:hover {
    transform: translate3d(0, -6px, 0) !important;
    border-color: var(--pk-glass-rim-pro-outer) !important;
    box-shadow:
      var(--pk-glass-rim-dual-hover),
      var(--pk-glass-shadow-pro-lg) !important;
  }
}
@media (max-width: 749px) {
  /* Mobile: drop backdrop-filter (scroll-jank killer); use opaque glass bg.
     Simpler shadow stack. No hover transform. */
  .cl-card,
  .card-wrapper.product-card-wrapper .card {
    background: rgba(253, 246, 238, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 2px 10px rgba(45, 45, 45, 0.06),
      0 10px 24px rgba(45, 45, 45, 0.09) !important;
    transition: none !important;
  }
}

/* --- 20.8 BENTO / COLLECTION TILES ---------------------------------------- */
.lp-bento-card,
.lp-bento-grid__card {
  border-radius: 24px !important;
  transition:
    transform 0.52s var(--pk-glass-ease),
    box-shadow 0.52s var(--pk-glass-ease) !important;
}
.lp-bento-card::before,
.lp-bento-grid__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: var(--pk-glass-rim-dual);
  border-radius: inherit;
  z-index: 2;
}
.lp-bento-card:hover,
.lp-bento-grid__card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pk-glass-shadow-pro-lg) !important;
}

/* --- 20.9 NEWSLETTER FORM — glass field + glass submit ---------------------
   Scoped to the LIGHT-BG newsletter card (`section.lp-cta-newsletter`) only.
   The FOOTER's "Join the Family" newsletter (`.lp-footer__nl`) lives on a
   DARK #1A1410 editorial surface and has its own styling in
   `sections/lp-footer.liquid`; do NOT override it here, or the light glass
   pill + dark text combo becomes unreadable on dark.
---------------------------------------------------------------------------- */
.lp-cta-newsletter,
section.lp-cta-newsletter [class*="newsletter"] {
  position: relative;
}
.lp-cta-newsletter input[type="email"],
.lp-cta__form input[type="email"],
section.lp-cta-newsletter input[type="email"] {
  background: rgba(253, 246, 238, 0.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(200, 169, 110, 0.28) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(45, 45, 45, 0.06) !important;
  color: #2c2118 !important;
  transition:
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease !important;
}
.lp-cta-newsletter input[type="email"]:focus,
section.lp-cta-newsletter input[type="email"]:focus {
  background: rgba(253, 246, 238, 0.72) !important;
  border-color: rgba(200, 169, 110, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(200, 169, 110, 0.14),
    0 4px 14px rgba(45, 45, 45, 0.1) !important;
  outline: none !important;
}
.lp-cta-newsletter button[type="submit"],
.lp-cta__form button[type="submit"],
section.lp-cta-newsletter button[type="submit"] {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(200, 169, 110, 0.14)),
              rgba(200, 169, 110, 0.94) !important;
  border: 1px solid rgba(200, 169, 110, 0.5) !important;
  box-shadow:
    var(--pk-glass-rim-dual),
    var(--pk-glass-shadow-pro-gold) !important;
  color: #1a1a1a !important;
  transition: transform 0.3s var(--pk-glass-ease), box-shadow 0.3s var(--pk-glass-ease) !important;
}
.lp-cta-newsletter button[type="submit"]:hover,
section.lp-cta-newsletter button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    var(--pk-glass-rim-dual-hover),
    var(--pk-glass-shadow-pro-lg) !important;
}

/* --- 20.10 FOOTER — REVERTED 2026-04-20 ------------------------------------
   Prior versions of this block forced `footer, .lp-footer` to a light glass
   background `rgba(253,246,238,0.45)` which collided with the native
   `lp-footer.liquid` design (dark #1A1410 editorial footer with cream text,
   gold "Join the Family" eyebrow, Cormorant Garamond serif heading, and
   ornamental diamond divider — see sections/lp-footer.liquid scoped CSS).

   The original was Beverly Hills + Hollywood editorial-dark by intent. Letting
   pk-liquid-glass.css repaint it into a light glass surface broke brand
   consistency (lower-half-of-homepage appeared "wrong" to user on 2026-04-20).

   Resolution: NO FOOTER OVERRIDES in pk-liquid-glass.css. Let the native
   `.lp-footer` scoped CSS from `sections/lp-footer.liquid` win. Any future
   footer-level glass work must happen inside that section's `<style>` block,
   not here, so the dark editorial palette stays intact.
---------------------------------------------------------------------------- */

/* --- 20.11 CART DRAWER / SEARCH / MODAL — stronger frosted ----------------- */
cart-drawer,
cart-drawer .drawer__inner,
quick-search,
quick-search .drawer__inner,
menu-drawer,
menu-drawer .drawer__inner,
modal-dialog .modal__content,
.cart-notification {
  -webkit-backdrop-filter: blur(var(--pk-glass-blur-pro-lg)) saturate(var(--pk-glass-saturate-pro)) brightness(var(--pk-glass-brightness-pro)) !important;
  backdrop-filter: blur(var(--pk-glass-blur-pro-lg)) saturate(var(--pk-glass-saturate-pro)) brightness(var(--pk-glass-brightness-pro)) !important;
  background: var(--pk-glass-bg-pro-light-heavy) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    var(--pk-glass-shadow-pro-lg) !important;
}

/* --- 20.12 Reduced-motion + low-GPU fallback ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pk-shimmer-on::after,
  .cl-card::after,
  .lp-bento-card::after,
  .lp-bento-grid__card::after,
  .pk-hero-v4__cta::after,
  .button--primary::after,
  .btn-primary::after,
  .product-form__submit::after,
  [class*="newsletter"] button[type="submit"]::after {
    display: none !important;
  }
  .cl-card,
  .card-wrapper.product-card-wrapper .card,
  .lp-bento-card,
  .lp-bento-grid__card,
  .pk-hero-v4__cta,
  .button--primary {
    transition: none !important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.lp-header,
  .lp-header.is-scrolled,
  .announcement-bar,
  .lp-hdr__mobile-nav,
  cart-drawer .drawer__inner,
  menu-drawer .drawer__inner,
  .cl-card,
  footer,
  .lp-footer {
    background: rgba(253, 246, 238, 0.96) !important;
  }
}

/* ==========================================================================
   20.13 PERF — scroll smoothness + render-cost containment
   2026-04-20 FIX: Removed `content-visibility: auto` from all sections.
   Mini reported "網頁下半部崩潰" — on Safari + certain Chromium builds,
   content-visibility:auto sections sometimes fail to re-render after
   entering the viewport (especially with Shopify lazy-loaded images +
   IntersectionObserver race), leaving the lower half of the homepage
   collapsed at the 600px intrinsic size with no content. Trade-off: we
   lose the small paint-cost win for off-screen sections, but homepage
   renders reliably. Keep the other perf tweaks (transform-only hover,
   overscroll cap, slow-update media query).
   ========================================================================== */
/* content-visibility rule DISABLED 2026-04-20 — caused visual "crash" on
   lower half of homepage. Do NOT re-enable without testing across Safari
   iOS + desktop with cold cache and slow 3G throttling. */
/* Force transform-only transitions on the big interactive components so they
   never trigger layout during hover. (Shadows are still animated on cards above
   — but only within a hover context and on desktop where GPU can handle it.) */
.button--primary,
.btn-primary,
.product-form__submit,
.pk-hero-v4__cta,
.cl-btn,
.cl-btn-primary {
  will-change: transform;
}
/* Cap over-scroll bounce rendering cost */
html {
  overscroll-behavior-y: contain;
}
/* Reduce transition churn on low-end devices reporting less-than-4GB memory
   (Chromium-only heuristic, graceful fallback everywhere else) */
@media (update: slow) {
  .cl-card,
  .card-wrapper.product-card-wrapper .card,
  .lp-bento-card,
  .button--primary,
  .pk-hero-v4__cta {
    transition: none !important;
  }
}

/* ==========================================================================
   20.14 EDITORIAL TYPOGRAPHY — Beverly Hills + Hollywood (2026-04-21)
   ------------------------------------------------------------------
   Purpose: unify the 7 sections between trust_bar and footer around the
   same editorial language the footer already owns (Cormorant Garamond
   serif titles + gold eyebrows + diamond dividers + italic pull quotes).
   Root cause this fixes: theme-level H2/H3 rules with !important were
   outranking section-scoped `font-family: var(--lp-font-serif)`, so 6 of
   7 section titles were falling back to Inter. We use !important here
   to win the cascade — same pattern as §20.10 FOOTER / lp-footer.liquid.

   Sections targeted:
     lp-bento / lp-usp / lp-brand-story / lp-compare / lp-reviews /
     lp-tech / lp-video
   ========================================================================== */

/* --- 20.14.1  Serif titles (ALL 7 sections) ------------------------------ */
.lp-bento__title,
.lp-usp__title,
.lp-brand-story__heading,
.lp-compare__title,
.lp-reviews__heading,
.lp-tech__title,
.lp-video__heading {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #2A1F15 !important;
}

/* --- 20.14.2  Gold editorial eyebrows ------------------------------------
   Existing eyebrow spans (.lp-*__eyebrow) are forced serif + gold + wide
   tracking. For sections that have NO eyebrow element in liquid
   (bento / reviews / tech / video), we inject one via ::before on the
   title itself — pure CSS, no liquid changes.
-------------------------------------------------------------------------- */
.lp-usp__eyebrow,
.lp-brand-story__eyebrow,
.lp-compare__eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.32em !important;
  color: #C4A265 !important;
  opacity: 1 !important;
}

/* Injected eyebrows for sections that don't ship one in liquid */
.lp-bento__title::before,
.lp-reviews__heading::before,
.lp-tech__title::before,
.lp-video__heading::before {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: #C4A265;
  margin-bottom: 1rem;
  line-height: 1;
}
.lp-bento__title::before   { content: 'THE COLLECTION'; }
.lp-reviews__heading::before { content: 'TESTIMONIALS'; }
.lp-tech__title::before    { content: 'ENGINEERED WITHIN'; }
.lp-video__heading::before { content: 'IN MOTION'; }

/* --- 20.14.3  Ornamental diamond divider under each title ---------------- */
.lp-bento__title::after,
.lp-usp__title::after,
.lp-brand-story__heading::after,
.lp-compare__title::after,
.lp-reviews__heading::after,
.lp-tech__title::after,
.lp-video__heading::after {
  content: '\25C6';  /* ◆ */
  display: block;
  margin: 0.85rem auto 0;
  font-size: 0.45em;
  color: #C4A265;
  opacity: 0.75;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

/* --- 20.14.4  Italic serif pull quotes ----------------------------------- */
.lp-usp__quote,
.lp-compare__quote {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  line-height: 1.5 !important;
  color: #3B2820 !important;
  letter-spacing: -0.005em !important;
}
.lp-reviews__quote {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* --- 20.14.5  Brand story — italic gold signature + drop cap ------------- */
.lp-brand-story__signature {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #C4A265 !important;
  letter-spacing: 0.04em !important;
}
.lp-brand-story__text::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 3.4em !important;
  float: left !important;
  line-height: 0.85 !important;
  padding: 0.08em 0.12em 0 0 !important;
  margin-top: 0.06em !important;
  color: #C4A265 !important;
  font-weight: 400 !important;
}

/* --- 20.14.6  Compare side-by-side labels: gold + serif ------------------ */
.lp-compare__label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.28em !important;
  color: #C4A265 !important;
}

/* --- 20.14.7  Bento buttons → gold editorial pills ----------------------- */
.lp-bento__card-btn,
.lp-bento__card-btn--dark,
.lp-bento__card-btn--white {
  background: linear-gradient(135deg, #C4A265 0%, #A58449 100%) !important;
  color: #1A1410 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(196, 162, 101, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px -4px rgba(196, 162, 101, 0.45) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.lp-bento__card-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 12px 28px -6px rgba(196, 162, 101, 0.6) !important;
}

/* --- 20.14.8  Dark editorial variant for lp-tech -------------------------
   Breaks up the long cream stretch between trust_bar and footer with a
   cinematic "inside the engineering" moment. Mirrors the footer's dark
   Beverly Hills treatment.
-------------------------------------------------------------------------- */
.lp-tech {
  background: radial-gradient(ellipse at 50% 0%, #2A1F15 0%, #1A1410 70%) !important;
  color: #F7F3EB !important;
  padding: 6rem 0 !important;
}
.lp-tech::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1px !important; height: 56px !important;
  background: linear-gradient(to bottom, transparent, #C4A265) !important;
  opacity: 0.7 !important;
  z-index: 2 !important;
}
.lp-tech {
  position: relative !important;
}
.lp-tech__title {
  color: #F7F3EB !important;
}
.lp-tech__title::before {
  color: #C4A265 !important;
}
.lp-tech__title::after {
  color: #C4A265 !important;
  opacity: 0.9 !important;
}
.lp-tech .lp-tech__list-text,
.lp-tech__list-item .lp-tech__list-text,
.lp-tech p,
.lp-tech li,
.lp-tech__visual *,
.lp-tech .lp-tech__visual-label,
.lp-tech .lp-tech__layer-num,
.lp-tech .lp-tech__layer-name,
.lp-tech .lp-tech__caption {
  color: rgba(247, 243, 235, 0.92) !important;
}
.lp-tech .lp-tech__layer-num,
.lp-tech .lp-tech__visual .lp-tech__layer-num {
  color: #C4A265 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}
.lp-tech__icon-box {
  background: rgba(196, 162, 101, 0.12) !important;
  border: 1px solid rgba(196, 162, 101, 0.35) !important;
  color: #C4A265 !important;
}
.lp-tech__icon-box svg,
.lp-tech__icon-box i {
  color: #C4A265 !important;
  stroke: #C4A265 !important;
}
.lp-tech__list-item {
  border-bottom: 1px solid rgba(196, 162, 101, 0.15) !important;
}

/* --- 20.14.9  Section spacing — editorial breathing room ----------------- */
.lp-bento__header,
.lp-usp__header,
.lp-compare__header,
.lp-reviews__header,
.lp-tech__header,
.lp-video__header {
  text-align: center !important;
  margin-bottom: 3rem !important;
}

/* --- 20.14.10  Gold hairline section transitions ------------------------- */
main#MainContent > .shopify-section + .shopify-section::before {
  content: '';
  display: block;
  max-width: 120px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196, 162, 101, 0.35), transparent);
  opacity: 0.85;
}
/* Skip the hairline on the dark tech section (it has its own gold accent)
   and on the footer (its own treatment). */
main#MainContent > .shopify-section:has(.lp-tech)::before,
main#MainContent > .shopify-section:has(.lp-footer)::before {
  display: none;
}

/* --- 20.14.11  Fade-in reveal fallback (tech section fix) ----------------
   Safari/older Chrome occasionally leaves `.lp-fade-in.lp-visible` at
   opacity:0 when the observer fires before the transition is paint-ready.
   Force the revealed state as a post-animation fallback. */
.lp-fade-in.lp-visible,
.lp-tech .lp-fade-in.lp-visible,
.lp-tech__content.lp-fade-in.lp-visible,
.lp-tech .lp-fade-in-delay-1.lp-visible {
  opacity: 1 !important;
  transform: none !important;
}
/* Hard guarantee for lp-tech: if for any reason the fade-in class never
   fires (IntersectionObserver on a freshly scrolled-to section), make
   sure the content is visible. */
.lp-tech .lp-fade-in:not(.lp-visible) {
  animation: lp-tech-fade-in 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.2s forwards;
}
@keyframes lp-tech-fade-in {
  to { opacity: 1; transform: none; }
}

/* ===================================================================
   §21 — PK Sale Tag (Beverly Hills 40% OFF badge)
   Rendered via snippets/sale-badge-pk.liquid.
   Appears on any product that's in the 'sale' collection,
   across collection cards, related-product cards, and PDP.
   =================================================================== */

/* 2026-04-23 redesign — cream Liquid-Glass pill, replaces dark charcoal
   (dark tag was reading as a muddy blob on pattern-rich product imagery).
   New spec: warm cream frosted glass + deeper editorial gold hairline +
   dark ink type. Reads clean on any product color, feels Beverly Hills. */
.pk-sale-tag {
  --pk-tag-bg: rgba(253, 246, 238, 0.92);   /* warm cream */
  --pk-tag-fg: #2C2118;                      /* deep ink brown */
  --pk-tag-accent: #A5824A;                  /* deeper brand gold on cream */
  --pk-tag-ring: rgba(165, 130, 74, 0.48);
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 6;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 11px 8px;
  min-width: 48px;
  background: linear-gradient(165deg, rgba(253, 246, 238, 0.96) 0%, rgba(247, 236, 222, 0.92) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  color: var(--pk-tag-fg);
  border: 1px solid var(--pk-tag-ring);
  border-radius: 3px;
  box-shadow:
    0 6px 18px -8px rgba(44, 33, 24, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 0 0.5px rgba(165, 130, 74, 0.22);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0;
  line-height: 1;
  transform-origin: top right;
  animation: pk-sale-tag-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}
.pk-sale-tag::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(165, 130, 74, 0.26);
  border-radius: 2px;
  pointer-events: none;
}
.pk-sale-tag__eyebrow {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pk-tag-accent);
  opacity: 1;
  margin-bottom: 1px;
}
.pk-sale-tag__pct {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  font-style: italic;
  color: var(--pk-tag-fg);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.pk-sale-tag__pct-sym {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  color: var(--pk-tag-accent);
  margin-left: 1px;
  letter-spacing: 0;
  transform: translateY(-4px);
}

/* PDP variant: inline, a bit larger, sits next to title/price */
.pk-sale-tag--pdp {
  position: relative;
  top: auto; right: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  min-width: 0;
  animation: none;
}
.pk-sale-tag--pdp .pk-sale-tag__eyebrow { margin-bottom: 0; }
.pk-sale-tag--pdp .pk-sale-tag__pct { font-size: 22px; }
.pk-sale-tag--pdp .pk-sale-tag__pct-sym { font-size: 11px; }

@media (max-width: 768px) {
  .pk-sale-tag { top: 0.625rem; right: 0.625rem; padding: 6px 9px 7px; min-width: 42px; }
  .pk-sale-tag__eyebrow { font-size: 7.5px; letter-spacing: 0.22em; }
  .pk-sale-tag__pct { font-size: 17px; }
  .pk-sale-tag__pct-sym { font-size: 9px; transform: translateY(-3px); }
}

@keyframes pk-sale-tag-in {
  0% { opacity: 0; transform: translateY(-6px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ensure card-product / related / recently-viewed cards give the tag an anchor */
.card-product,
.card,
.card__inner,
.card-wrapper,
.grid__item {
  position: relative;
}

/* --------------------------------------------------------------------------
   §22 TWO-TONE PRODUCT CARD (2026-04-23 Mini brief)
   每張產品卡 = 上半 warm white 圖片區 (#FAFAFA, full-bleed)，
                下半保留原本 cream (transparent → 透回 .cl-card 的 cream glass)。
   分界線維持原本「圖片底邊 / 標題上方」位置不變。
   範圍：所有 collection 頁面 (/collections/all, /sale, /style, ...) — 用的是
        sections/lp-collection-playmats.liquid 的 .cl-card 結構。
   .cl-card 本身有 border-radius:18px + overflow:hidden，所以白色會自動
   被切成上方圓角，下方 .cl-card__info 透明，cream 自然透回來。
   -------------------------------------------------------------------------- */
.cl-card .cl-card__media {
  background: #FAFAFA !important;     /* warm white — 撐滿卡片上半部 left↔right */
}

/* 下半 .cl-card__info 已是 transparent (見 §16-585)，cream 自然透回，不動 */
/* sale-tag--card gold pill 在下方 sale-tag override block 已處理 */

/* SAVE 40% badge — card variant 改色：原本 cream pill 在白底上看不出來，
   改成 deep editorial gold pill + cream type，Beverly Hills sale tag 質感。
   PDP variant (.pk-sale-tag--pdp) 不動，繼續用 cream。 */
.pk-sale-tag--card {
  background: linear-gradient(165deg, #A5824A 0%, #8E6B38 100%);
  border-color: rgba(44, 33, 24, 0.22);
  color: #FDF6EE;
  box-shadow:
    0 8px 22px -10px rgba(44, 33, 24, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 0 0 0.5px rgba(44, 33, 24, 0.12);
}
.pk-sale-tag--card::before {
  border-color: rgba(253, 246, 238, 0.34);  /* cream 內框 */
}
.pk-sale-tag--card .pk-sale-tag__eyebrow {
  color: rgba(253, 246, 238, 0.86);          /* "SAVE" 米白色 */
}
.pk-sale-tag--card .pk-sale-tag__pct {
  color: #FDF6EE;                            /* "40" 米白色 */
}
.pk-sale-tag--card .pk-sale-tag__pct-sym {
  color: rgba(253, 246, 238, 0.82);          /* "%" 略淡米白 */
}

/* --------------------------------------------------------------------------
   §23 PDP RIGHT COLUMN REFINEMENT (2026-04-23 Mini brief)
   目標：清掉「先前刪欄位」留下的視覺垃圾 — 從 8+ 條分隔線 → 2 條。
   範圍：單品頁 .product-info-inner (PDP right column only)
        所有 .cl-card / collection 頁面不受影響。

   原結構（top→bottom）: sku / title / variant / price ★雙線 /
                       quantity+buy / lux-trust ★雙線 / 5×accordion ★5條 /
                       info-others ★1條 = 8+ 條線堆疊
   優化後: sku / title / variant / price (無線) / buy (無 qty) /
          lux-trust (★保留 editorial) / 5×accordion (只保留 group 上下各一) /
          info-others (無線) = 2 條分隔線，整欄呼吸感。
   -------------------------------------------------------------------------- */

/* ① 價格區：拔掉雙線（.product-price 與 .price-container 各有一條 border-bottom）*/
.product-info-inner .product-price,
.product-info-inner .product-price .price-container {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.product-info-inner .product-price-tax {
  padding-bottom: 0 !important;
}

/* ② Accordion 堆疊去連續線：5 個中間的 border-top 全拔，只保留
      第一個 accordion 的上邊（整段起點）+ 最後一個的下邊（整段終點）。
      視覺效果：5 條細線 → 2 條 editorial group 框線。*/
.product-info-inner .product-accordion {
  border-top: 0 !important;
}
.product-info-inner .product-accordion:first-of-type {
  border-top: 1px solid rgba(44, 33, 24, 0.09) !important;
  margin-top: 32px !important;
  padding-top: 4px;
}
.product-info-inner .product-accordion:last-of-type {
  border-bottom: 1px solid rgba(44, 33, 24, 0.09) !important;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
/* 中間 accordion 之間用 margin 呼吸取代 border 切分 */
.product-info-inner .product-accordion + .product-accordion {
  margin-top: 8px !important;
}

/* ③ Quantity pill — restored above Add to Cart (2026-04-23 revision).
      背景：cart drawer 已退役 (見 sections/cart-drawer.liquid 註解)，所以需要
            在 PDP 上把 qty 還原，讓 Mini 不必先加到購物車再去 /cart 改數量。
      需求：圓角 pill 外觀與 drawer/cart-item qty 視覺一致；pill 單獨一排，
            Add to Cart 在下方整排寬度，兩者間 12px 呼吸。              */

/* label 仍然收掉 — pill 本身就說明了用途，多一個「Quantity:」會變囉唆 */
.product-info-inner .quantity-selector .quantity-label {
  display: none !important;
}

/* wrapper 改縱向排 — pill 上、Add to Cart 下 */
.product-info-inner .quantity-selector .quantity-input-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

/* pill 容器：inline-flex + 圓角 999px + 細暖灰邊 */
.product-info-inner .quantity-selector quantity-input.quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 128px !important;
  max-width: 160px !important;
  height: 44px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(44, 33, 24, 0.12) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(44, 33, 24, 0.04) !important;
  overflow: visible !important;
}

/* - / + 按鈕：36px 圓形 tap target，透明背景 + hover 柔和填色 */
.product-info-inner .quantity-selector quantity-input.quantity button.quantity-button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #5C4A3A !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.product-info-inner .quantity-selector quantity-input.quantity button.quantity-button:hover {
  background: rgba(139, 98, 66, 0.08) !important;
  color: #2C2118 !important;
}

/* 中間數字輸入：透明背景，品牌字級，可直接輸入 */
.product-info-inner .quantity-selector quantity-input.quantity input.quantity-input {
  flex: 1 1 auto !important;
  width: 40px !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2C2118 !important;
  font-family: var(--lux-sans, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.product-info-inner .quantity-selector quantity-input.quantity input.quantity-input::-webkit-inner-spin-button,
.product-info-inner .quantity-selector quantity-input.quantity input.quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}
.product-info-inner .quantity-selector quantity-input.quantity input.quantity-input:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px rgba(139, 98, 66, 0.3) !important;
  border-radius: 6px !important;
}

/* Add to Cart 按鈕占整排 */
.product-info-inner .quantity-selector .add-cart-button,
.product-info-inner .quantity-selector button[name="add"] {
  width: 100% !important;
  flex: none !important;
}
.product-info-inner .product-form-buttons {
  gap: 0 !important;
}

/* ④ product-info-others 冗餘 border-top 移除 */
.product-info-inner .product-info-others {
  border-top: 0 !important;
  margin-top: 16px !important;
  padding-top: 0 !important;
}

/* =============================================================================
   §24  quick-search + menu-drawer z-index (2026-04-23)
   -----------------------------------------------------------------------------
   Cart drawer retired 2026-04-23; its z-index hotfix is now obsolete. But the
   same bug class applies to quick-search (top-of-page search overlay) and
   menu-drawer (mobile nav) — they must still outrank .lp-header (z:1000) or
   they'll be clipped by the fixed site header. Keep the rule for those two.
   ============================================================================= */
quick-search,
menu-drawer {
  z-index: 1050 !important;
}
quick-search .modal-overlay,
menu-drawer .modal-overlay {
  z-index: 1040 !important;
}

/* =============================================================================
   §25–§28  Cart drawer layout/blur/X-hit-target fixes — RETIRED 2026-04-23
   -----------------------------------------------------------------------------
   Cart drawer removed (see sections/cart-drawer.liquid). These rules targeted
   `.cart-drawer` and `cart-drawer` which are no longer emitted. Removed to
   shrink CSS; history in git.
   ============================================================================= */

/* =============================================================================
   §29  Cart qty center number: clickable & editable (2026-04-23)
   -----------------------------------------------------------------------------
   Mini's request: "直接新增按中間數字可以自己手動輸入數量" — make the center
   qty number between - and + buttons clearly tappable so users can type a
   quantity directly instead of clicking +/- repeatedly.

   The underlying <input type="number" class="quantity-input"> is already
   editable (readonly=false, pointer-events=auto, cursor=text). The gap is
   pure visual affordance: 32×32 transparent box with no border, no hover
   state — users don't realize it's clickable.

   Fix: add hover outline + focus ring + slight padding, hide native number
   spinners. Scope to cart-items (covers both cart-drawer and /cart page;
   does NOT touch PDP qty which lives inside product-form).

   Bonus: this is a workaround for the qty +/- drawer-disappear bug —
   typing a number fires a single `change` event on blur, bypassing the
   click-event-sequence that triggers the disappearance.
   ============================================================================= */
cart-items .quantity-input,
cart-items input.quantity-input {
  min-width: 2.75rem !important;
  width: 2.75rem !important;
  height: 2rem;
  padding: 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: rgb(var(--color-foreground));
  caret-color: rgb(var(--color-foreground));
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px transparent;
  cursor: text;
  transition: background 160ms ease, box-shadow 160ms ease;
}

/* Hover: whisper-soft outline so the eye knows this is tappable */
cart-items .quantity-input:hover {
  background: rgba(var(--color-foreground), 0.04);
  box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.18);
}

/* Focus: clear ring while typing */
cart-items .quantity-input:focus,
cart-items .quantity-input:focus-visible {
  outline: none;
  background: rgba(var(--color-foreground), 0.06);
  box-shadow: inset 0 0 0 1.5px rgba(var(--color-foreground), 0.4);
}

/* Strip Chrome/Safari native number spinners — keep the centered number clean */
cart-items .quantity-input::-webkit-inner-spin-button,
cart-items .quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
cart-items .quantity-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Mobile touch target: ensure tap area is finger-friendly */
@media (max-width: 749px) {
  cart-items .quantity-input,
  cart-items input.quantity-input {
    min-width: 3rem !important;
    width: 3rem !important;
    height: 2.25rem;
    font-size: 1rem;
  }
}

/* =============================================================================
   §30  View cart button = Checkout button style (2026-04-23)
   -----------------------------------------------------------------------------
   Mini's request: "把 view cart 按鈕的樣式做的跟 checkout 一模一樣"

   The markup uses `button--secondary` (cream outlined) for View cart and
   `button--primary` (amber glass) for Checkout. Mini wants them identical:
   both should wear the amber-glass primary treatment.

   Scope: cart-drawer context (where both buttons are visible side-by-side) AND
   /cart page (main-cart-content — though .view-cart-button is display:none
   there via component-cart-details.css, we match the style anyway so any
   future visibility change inherits the same treatment).

   Override order matters:
   - Beats pk-cart-polish.css `.main-cart .view-cart-button.button`
     (transparent/ink-outline) via higher specificity + !important.
   - Beats `.button--secondary` inherited in pk-liquid-glass.css §7.
   ============================================================================= */
/* Fix 2026-04-23: real live Checkout renders at rgba(200,169,110,0.18) via
   the earlier multi-selector rule (button[type="submit"].button …) — NOT
   0.92 heavy primary. Using 0.18 makes View cart truly identical to Checkout
   and restores correct hierarchy ("不能付錢" was caused by inverted weights). */
.cart-drawer .view-cart-button.button,
cart-drawer .view-cart-button.button,
.main-cart .view-cart-button.button,
.main-cart-content .view-cart-button.button,
a.view-cart-button.button,
a.view-cart-button.button.button--secondary {
  position: relative !important;
  isolation: isolate !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200, 169, 110, 0.4) !important;
  background: rgba(200, 169, 110, 0.18) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  color: #1a1a1a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(200, 169, 110, 0.14) !important;
  transition: transform 280ms var(--pk-glass-ease),
              box-shadow 280ms var(--pk-glass-ease),
              background 280ms var(--pk-glass-ease) !important;
  /* Kill pk-cart-polish tan/ink outlined treatment */
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 500 !important;
}

.cart-drawer .view-cart-button.button:hover,
cart-drawer .view-cart-button.button:hover,
.main-cart .view-cart-button.button:hover,
.main-cart-content .view-cart-button.button:hover,
a.view-cart-button.button:hover,
a.view-cart-button.button.button--secondary:hover {
  transform: translateY(-1px) !important;
  background: rgba(200, 169, 110, 0.28) !important;
  border-color: rgba(200, 169, 110, 0.55) !important;
  color: #1a1a1a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(200, 169, 110, 0.22) !important;
}

/* ================================================================
   §31 SALE CARD — UNIFIED PRICE TYPOGRAPHY + BADGE CORNER FIX
   2026-04-23 Mini brief:
   (1) SAVE 40% badge 右上角被 .cl-card border-radius:20px 裁切 →
       推到圓角曲線外 (top:22px right:22px desktop / 18px mobile)
   (2) 全站折扣商品價格風格字體統一：
       "From" = Inter uppercase 12px, 品牌淡棕
       現價 = Cormorant Garamond italic 19px 編輯部 ink
       原價 = Inter strikethrough 13px with currency suffix
   範圍：所有 .cl-card 卡片 (/collections/sale, /collections/all,
         /collections/style, /collections/bestsellers, /collections/:style)
   ================================================================ */

/* §31.1 — Badge corner clip fix: push past card border-radius curve.
   Covers two card systems:
     a) .cl-card (collection pages, custom) — radius:20px
     b) .card-wrapper / .card-inner / .card-media-wrapper (PDP related products,
        Shopify default card-product.liquid) — radius:18–20px, badge is placed
        INSIDE .card-media-wrapper which nests inside .card-inner overflow:hidden,
        so same clip applies. */
.cl-card .pk-sale-tag,
.cl-card .pk-sale-tag--card,
.card-wrapper .pk-sale-tag,
.card-wrapper .pk-sale-tag--card,
.card-media-wrapper .pk-sale-tag,
.card-media-wrapper .pk-sale-tag--card,
.card-inner .pk-sale-tag,
.card-inner .pk-sale-tag--card {
  top: 1.375rem !important;    /* 22px, outside 18–20px radius clip zone */
  right: 1.375rem !important;
}
@media (max-width: 768px) {
  .cl-card .pk-sale-tag,
  .cl-card .pk-sale-tag--card,
  .card-wrapper .pk-sale-tag,
  .card-wrapper .pk-sale-tag--card,
  .card-media-wrapper .pk-sale-tag,
  .card-media-wrapper .pk-sale-tag--card,
  .card-inner .pk-sale-tag,
  .card-inner .pk-sale-tag--card {
    top: 1.125rem !important;  /* 18px mobile */
    right: 1.125rem !important;
  }
}

/* §31.2 — Unified sale price typography (site-wide .cl-card price block) */
.cl-card__bottom {
  align-items: baseline !important;
  gap: 0.75rem !important;
}
.cl-card__price {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.375rem !important;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-size: 1.1875rem !important;   /* 19px — editorial current price */
  font-weight: 600 !important;
  font-style: italic !important;
  color: #2C2118 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
}
.cl-card__price-from {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.6875rem !important;   /* 11px — eyebrow */
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(44, 33, 24, 0.56) !important;
  line-height: 1 !important;
}
.cl-card__price-current {
  /* Inherits .cl-card__price font (Cormorant italic 19px) */
  color: #2C2118 !important;
  font-variant-numeric: lining-nums !important;
}
.cl-card__price-compare {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.8125rem !important;   /* 13px */
  font-style: normal !important;
  font-weight: 400 !important;
  color: rgba(44, 33, 24, 0.42) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(44, 33, 24, 0.38) !important;
  text-decoration-thickness: 1px !important;
  letter-spacing: 0 !important;
  font-variant-numeric: lining-nums !important;
  margin-left: 0.125rem !important;
}

/* Mobile scaling */
@media (max-width: 768px) {
  .cl-card__price {
    font-size: 1.0625rem !important;   /* 17px */
  }
  .cl-card__price-from {
    font-size: 0.625rem !important;    /* 10px */
    letter-spacing: 0.12em !important;
  }
  .cl-card__price-compare {
    font-size: 0.75rem !important;     /* 12px */
  }
}

/* §31.2b — Hide default Shopify .card-badges pill on product cards.
   `pk-sale-tag` already renders a Beverly Hills editorial badge via
   sale-badge-pk.liquid; leaving the default `.card-badges > .badge.sale-badge`
   visible causes a pink/orange "40% off" oval to stack under the editorial
   badge (Mini screenshot 2026-04-24). Scoped to card contexts only so the
   main PDP's own badge zone (if any) is untouched. */
.card-wrapper .card-badges,
.card-inner .card-badges,
.card-media-wrapper .card-badges,
.cl-card .card-badges {
  display: none !important;
}

/* §31.3 — PDP related-products & Shopify default card-product.liquid price
   typography: match .cl-card sale typography exactly so /products/*/related
   and any .card-wrapper grid visually aligns with /collections/* cards.
   price.liquid structure: .card-price > .price > .price-container >
     b.price-item (current, may contain "From") + s.price-item (compare_at) */
.card-wrapper .card-price .price,
.card-wrapper .card-price .price-container,
.card-price .price-container {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.375rem !important;
  line-height: 1.15 !important;
}
.card-wrapper .card-price b.price-item,
.card-price b.price-item {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-size: 1.1875rem !important;   /* 19px — matches .cl-card__price */
  font-weight: 600 !important;
  font-style: italic !important;
  color: #2C2118 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
  font-variant-numeric: lining-nums !important;
}
.card-wrapper .card-price s.price-item,
.card-price s.price-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.8125rem !important;   /* 13px */
  font-weight: 400 !important;
  font-style: normal !important;
  color: rgba(44, 33, 24, 0.42) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(44, 33, 24, 0.38) !important;
  text-decoration-thickness: 1px !important;
  letter-spacing: 0 !important;
  font-variant-numeric: lining-nums !important;
}
/* "From" prefix sitting inside b.price-item (product.price.from_price_html)
   — Shopify wraps it in plain text, so fade the non-numeric portion. We
   can't isolate "From" semantically here, so we keep the whole b italic +
   Cormorant which still reads editorial. If needed later, override the
   from_price_html translation in locales/*.json to wrap it in a span. */
@media (max-width: 768px) {
  .card-wrapper .card-price b.price-item,
  .card-price b.price-item {
    font-size: 1.0625rem !important;   /* 17px */
  }
  .card-wrapper .card-price s.price-item,
  .card-price s.price-item {
    font-size: 0.75rem !important;     /* 12px */
  }
}