/** Shopify CDN: Minification failed

Line 343:0 Unexpected "}"

**/
/* MY ATHOOR LONDON — Targeted Fixes */

/* Hide broken empty elements on cart page */
.cart__dynamic-checkout-buttons:empty,
.cart__dynamic-checkout-buttons shopify-accelerated-checkout:empty,
.shopify-accelerated-checkout:empty {
  display: none !important;
  height: 0 !important;
}

/* Product card hover on desktop */
@media screen and (min-width: 750px) {
  .card--product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card--product:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  }
}

/* ============================================
   STICKY HEADER — Bulletproof fixed positioning
   ============================================ */
.shopify-section-header-hidden {
  transform: translateY(0) !important;
}

#shopify-section-headers.athoor-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07) !important;
}

#shopify-section-headers.athoor-fixed .index-header,
#shopify-section-headers.athoor-fixed header.index-header {
  position: relative !important;
  background: transparent !important;
}

/* Compact header when fixed */
#shopify-section-headers.athoor-fixed .header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Prevent logo jerk — lock dimensions and use will-change */
#shopify-section-headers .header__heading,
#shopify-section-headers .header__heading-link {
  display: flex !important;
  align-items: center !important;
}

#shopify-section-headers .header__heading-logo,
#shopify-section-headers .header__heading-link img {
  transform: translateZ(0);
}

/* Dark, visible icons/menu/logo against white fixed background */
#shopify-section-headers.athoor-fixed header svg {
  fill: #1a1a1a !important;
  color: #1a1a1a !important;
}
#shopify-section-headers.athoor-fixed .header__menu-item,
#shopify-section-headers.athoor-fixed .header__active-menu-item,
#shopify-section-headers.athoor-fixed .header__menu-item span,
#shopify-section-headers.athoor-fixed a:not(.menu-drawer__menu-item):not(.menu-drawer__close-button) {
  color: #1a1a1a !important;
}
/* Prevent the athoor-fixed color override from leaking into the open drawer and
   creating a gold/dark ghost on menu items (the drop-shadow filter on .menu-drawer
   repaints text colour during the hover transition). */
#shopify-section-headers.athoor-fixed .menu-drawer .menu-drawer__menu-item,
#shopify-section-headers.athoor-fixed .menu-drawer .menu-drawer__menu-item span {
  color: rgba(var(--color-foreground), 0.75);
}
#shopify-section-headers.athoor-fixed .menu-drawer .menu-drawer__menu-item:hover,
#shopify-section-headers.athoor-fixed .menu-drawer .menu-drawer__menu-item--active {
  color: rgb(var(--color-foreground));
}

/* DESKTOP — make sticky header noticeably smaller */
@media screen and (min-width: 990px) {
  #shopify-section-headers.athoor-fixed .header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  #shopify-section-headers.athoor-fixed .header__heading-logo,
  #shopify-section-headers.athoor-fixed .header__heading-link img {
    max-width: 60px !important;
  }
  /* Center logo in sticky when nav is hidden */
  #shopify-section-headers.athoor-fixed .header__heading,
  #shopify-section-headers.athoor-fixed .header__heading-link {
    justify-self: center !important;
  }
  /* Hide Shop/Contact nav in sticky state */
  #shopify-section-headers.athoor-fixed .header__inline-menu,
  #shopify-section-headers.athoor-fixed nav#AccessibleNav {
    display: none !important;
  }
  /* Reduce icon size slightly in sticky */
  #shopify-section-headers.athoor-fixed header svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
  }
}

/* MOBILE sticky */
@media screen and (max-width: 749px) {
  #shopify-section-headers.athoor-fixed .header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  #shopify-section-headers.athoor-fixed .header__heading-logo,
  #shopify-section-headers.athoor-fixed .header__heading-link img {
    max-width: 56px !important;
  }
}

/* ============================================
   SLIDESHOW TEXT — Force bottom-center position
   ============================================ */
.slideshow__text-wrapper.banner__content--bottom-center,
.banner__content--bottom-center {
  align-items: flex-end !important;
  justify-content: center !important;
}

.slideshow .banner__content--bottom-center .banner__box,
.slideshow .banner__content--bottom-center .slideshow__text,
.banner__content--bottom-center > * {
  margin-bottom: 5rem !important;
  text-align: center !important;
}

@media screen and (max-width: 749px) {
  .slideshow .banner__content--bottom-center .banner__box,
  .slideshow .banner__content--bottom-center .slideshow__text,
  .banner__content--bottom-center > * {
    margin-bottom: 3.5rem !important;
  }
}

/* Marquee — ensure visible on all sizes */
.maqruee-section-wrapper {
  display: block !important;
}


/* ============================================
   MOBILE MARQUEE FIX — clean seamless scroll
   ============================================ */
@media screen and (max-width: 749px) {
  /* Each block sizes to its own text (no overlap) */
  .maqruee-section-wrapper .marquee-section .marquee-wrapper li.marquee-block {
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 0 1.4rem !important;
    white-space: nowrap !important;
  }

  .maqruee-section-wrapper .marquee-section .marquee-wrapper li.marquee-block .marquee-title {
    font-size: 1rem !important;
    letter-spacing: 0.12em !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  /* Full-width content row, animate with our own keyframe (content duplicated by JS) */
  .maqruee-section-wrapper .marquee-section .marquee-wrapper.athoor-marquee-mobile {
    width: max-content !important;
    animation: athoorMarqueeScroll 22s linear infinite !important;
  }

  @keyframes athoorMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Tidy marquee section height/padding on mobile */
  .maqruee-section-wrapper .marquee-section {
    height: auto !important;
  }
  .maqruee-section-wrapper .section-padding,
  .maqruee-section-wrapper [class*="-padding"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ============================================
   REWARDS BANNER — smaller on mobile
   ============================================ */
@media screen and (max-width: 749px) {
  .athoor-rewards-banner {
    padding: 6px 12px !important;
  }
  .athoor-rewards-banner a {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }
}

/* ============================================
   LUXURY REDESIGN v2 — LV / Sunnamusk aesthetic
   ============================================ */
:root {
  --athoor-gold: #B8960C;
  --athoor-tan: #A8895C;
  --athoor-cream: #F4F0E9;
  --athoor-ink: #1A1A1A;
  --athoor-muted: #8C8279;
  --athoor-line: #E3DCD0;
  --athoor-card-bg: #EDE7DD;
}

/* ---------- PRODUCT GRID — clean, spacious, large images ---------- */
.product-grid,
.collection .grid {
  gap: 28px 18px !important;
}

/* Each product image sits on a soft luxury background, large */
.card--product .card__inner,
.card--media .card__inner,
.card__media,
.card--product .media {
  background: var(--athoor-card-bg) !important;
  border-radius: 3px !important;
  overflow: hidden;
}

.card__media img,
.card--product .media img {
  mix-blend-mode: multiply;       /* blends white product bg into cream */
  padding: 8% 12%;                /* breathing room around the bottle */
  object-fit: contain !important;
}

/* Card text — minimal, elegant (LV style) */
.card__content {
  padding: 14px 2px 18px 2px !important;
  border-bottom: none !important;
  text-align: left;
}

.card__product-type {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--athoor-muted);
  margin: 0 0 6px 0;
  text-transform: uppercase;
}

.card__heading,
.card__heading.h5 {
  font-family: Georgia, serif !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin: 0 0 6px 0 !important;
  line-height: 1.35 !important;
}

.fragrance-notes {
  font-size: 10.5px !important;
  letter-spacing: 0.02em;
  color: var(--athoor-muted) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.5;
}

.card__points {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--athoor-tan);
  margin: 8px 0 0 0;
  font-weight: 500;
}

.price-item--regular {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* Wishlist heart top-right (LV style) */
.card__media .quick-add,
.card-wrapper .icn-wishlist,
.card-wrapper [data-wishlist] {
  z-index: 3;
}

/* ---------- PRODUCT PAGE — large image, generous layout ---------- */
.product__media-wrapper,
.product__column-sticky,
.product__media-list {
  background: transparent;
}

.product__media .media,
.product-media-container {
  background: var(--athoor-card-bg) !important;
  border-radius: 3px;
}

.product__media img {
  mix-blend-mode: multiply;
}

.product__title,
.product__title h1,
.product__title.h1 {
  font-family: Georgia, serif !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-weight: 400 !important;
}

.product__text.subtitle,
.product .price {
  letter-spacing: 0.03em;
}

/* ---------- BEST SELLERS / FEATURED — horizontal slide mobile ---------- */

}

/* ---------- SECTION HEADINGS ---------- */
.featured-collection .title,
.collection .title,
.title-wrapper h2,
.section-header h2 {
  font-family: Georgia, serif !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}

/* ---------- HERO reveal-up ---------- */
.slideshow__text-wrapper .banner__box,
.slideshow .banner__content > * {
  animation: athoorRevealUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes athoorRevealUp {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
.slideshow .banner__heading,
.banner__heading {
  font-family: Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

/* ---------- BUTTONS ---------- */
.button, .product-form__submit, .cart__checkout-button {
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-size: 12px !important;
  border-radius: 2px !important;
}

/* ---------- GOLD ACCENTS ---------- */
.link, .underlined-link { color: var(--athoor-tan); }
a:hover { color: var(--athoor-gold); }

/* ---------- CART ---------- */
.cart-item__name {
  font-family: Georgia, serif !important;
  font-size: 15px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}
.totals__total, .totals__subtotal { font-family: Georgia, serif; letter-spacing: 0.04em; }


/* ============================================
   LV-STYLE IMAGE BANNER (.athoor-lv-banner)
   Side-by-side images + text below, SAME on mobile & desktop
   ============================================ */

/* Kill forced height + dark overlay */
.athoor-lv-banner.image--banner,
.athoor-lv-banner.banner--medium,
.athoor-lv-banner.banner {
  min-height: 0 !important;
  height: auto !important;
}
.athoor-lv-banner .banner__content::before { display: none !important; }
.athoor-lv-banner .banner__media::after { opacity: 0.12 !important; }

/* Banner = row-wrap: [img | img] then text below — ALL screen sizes */
.athoor-lv-banner.banner {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Two images side by side, 50/50 */
.athoor-lv-banner .banner__media,
.athoor-lv-banner .banner__media-half {
  position: relative !important;
  flex: 0 0 50% !important;
  width: 50% !important;
  aspect-ratio: auto !important;
  height: 60vh !important;
  min-height: 0 !important;
  max-height: 60vh !important;
}

/* Smaller image aspect on mobile so banner stays compact */
@media screen and (max-width: 749px) {
  .athoor-lv-banner .banner__media,
  .athoor-lv-banner .banner__media-half {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    max-height: 46vh !important;
  }
}

/* Images fill their half */
.athoor-lv-banner .banner__media img,
.athoor-lv-banner .banner__media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Text block — full width below the two images */
.athoor-lv-banner .banner__content {
  flex: 0 0 100% !important;
  width: 100% !important;
  order: 9 !important;
  position: relative !important;
  inset: auto !important;
  background: transparent !important;
  padding: 26px 20px 34px 20px !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.athoor-lv-banner .banner__box {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Hide the duplicate 'list' label (same text as heading) */
.athoor-lv-banner .banner__box [class*="banner-list"],
.athoor-lv-banner .banner__box .list,
.athoor-lv-banner .banner__box ul {
  display: none !important;
}

/* Heading */
.athoor-lv-banner .banner__heading {
  font-family: Georgia, serif !important;
  font-size: clamp(20px, 3.5vw, 30px) !important;
  letter-spacing: 0.05em !important;
  color: #1a1a1a !important;
  font-weight: 400 !important;
  margin: 0 0 12px 0 !important;
  text-transform: uppercase !important;
  display: block !important;
  visibility: visible !important;
}

/* Body text */
.athoor-lv-banner .banner__text {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #3a3a3a !important;
  margin: 0 0 20px 0 !important;
  display: block !important;
  visibility: visible !important;
  letter-spacing: 0.04em !important;
}

/* Button — force visible, LV outlined pill */
.athoor-lv-banner .banner__buttons {
  display: flex !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 4px !important;
}
.athoor-lv-banner .banner__buttons .button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 40px !important;
  padding: 13px 36px !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.athoor-lv-banner .banner__buttons .button:hover {
  background: #1a1a1a !important;
  color: #fff !important;
}

.athoor-lv-banner.banner, .athoor-lv-banner.image--banner { overflow: visible !important; }

/* FORCE center button alignment on ALL screens */
.athoor-lv-banner .banner__buttons {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}
.athoor-lv-banner .banner__box,
.athoor-lv-banner .banner__content {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}
.athoor-lv-banner .banner__box * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================
   PRODUCT CARD — Sunnamusk exact match
   ============================================ */

/* --- Card image: SMALLER, contained on cream bg --- */
.card--media .card__inner,
.card__media {
  background: #f5f1ec !important;
  border-radius: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.card__media img {
  object-fit: contain !important;
  padding: 14% !important;
  mix-blend-mode: multiply !important;
}

/* --- Product type: tiny like Sunnamusk "Eau De Parfum" --- */
.card__product-type {
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  color: #6b6b6b !important;
  margin: 10px 0 2px 0 !important;
  text-transform: capitalize !important;
  font-weight: 400 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* --- Product name: bold, small, sans-serif --- */
.card__heading, .card__heading.h5 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.3 !important;
}

/* --- Price --- */
.card-information .price-item--regular,
.card__information .price-item--regular {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* --- Hide fragrance notes on card (too cluttered) --- */
.fragrance-notes { display: none !important; }

/* --- Hide stars on card (Sunnamusk doesn't show them in slider) --- */
.card-information .rating,
.card-information .rating-text,
.card-information .rating-count {
  display: none !important;
}

/* --- Size "50ml" --- */
.card__size {
  font-size: 10px !important;
  color: #6b6b6b !important;
  margin: 1px 0 0 0 !important;
  font-weight: 400 !important;
}

/* --- Earn Points with line above --- */
.card__points {
  font-size: 10px !important;
  color: #6b6b6b !important;
  margin: 6px 0 0 0 !important;
  padding-top: 6px !important;
  border-top: 1px solid #e0e0e0 !important;
  font-weight: 400 !important;
}

/* --- Card content: left aligned, compact --- */
.card__content {
  padding: 0 4px 12px 4px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  text-align: left !important;
}

/* --- Quick Add: small luxury boxed icon (bag + plus) --- */
.quick-add {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
}
.quick-add__submit {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  color: #1a1a1a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  font-size: 0 !important;
}
.quick-add__submit span { display: none !important; }
.quick-add__submit::after {
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a1a1a' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* --- Wishlist: clean heart outline top-right --- */
.card-wrapper .icn-wishlist,
.card-wrapper [data-wishlist],
.card-wrapper .wishlist-btn,
.card-wrapper .dt-sc-btn-wishlist {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  background: transparent !important;
  border: none !important;
  width: 24px !important;
  height: 24px !important;
}
.card-wrapper .icn-wishlist svg,
.card-wrapper [data-wishlist] svg,
.card-wrapper .dt-sc-btn-wishlist svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #1a1a1a !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

/* --- LIMITED EDITION badge --- */
.card__badge .badge, .card__badge span {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  font-size: 8px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  font-weight: 500 !important;
}

/* --- Hide big ADD TO CART overlay on hover --- */
.card--product .card__inner .quick-add .button--full-width {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide quick-view eye button (keep cart icon) */
.product-icons modal-opener,
.product-icons modal-opener + quick-add-modal,
.product-icons modal-opener + quick-add-modal + tooltip {
  display: none !important;
}

/* --- Wishlist + Cart icons: always visible (not just on hover) --- */
.product-icons {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
.product-icons li {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Quick-view modal: visible close button + smaller modal --- */
.quick-add-modal__content {
  max-width: 420px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  border-radius: 4px !important;
  padding: 20px !important;
  position: relative !important;
}
.quick-add-modal__toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 999 !important;
  width: 32px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}
.quick-add-modal__toggle svg {
  width: 14px !important;
  height: 14px !important;
}

/* --- Quick-view modal: ensure add-to-cart button shows inside --- */
.quick-add-modal__content-info .product-form__submit,
.quick-add-modal__content-info .shopify-product-form .button {
  display: flex !important;
  visibility: visible !important;
  width: 100% !important;
  margin-top: 12px !important;
}

/* --- Cart icon on card: remove square border, make plain black icon like wishlist --- */
.product-icons product-form .quick-add__submit,
.product-icons .quick-add__submit,
.product-icons li product-form button {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.product-icons product-form .quick-add__submit::after {
  content: none !important;
}
.product-icons product-form .quick-add__submit svg,
.product-icons li product-form button svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #1a1a1a !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  display: block !important;
}

/* --- Both cart + wishlist icons: always visible on card (not hover only) --- */
.card-wrapper .product-icons,
.card-wrapper ul.product-icons {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: none !important;
  transition: none !important;
}
.card-wrapper .product-icons li {
  opacity: 1 !important;
  visibility: visible !important;
}
.card-wrapper:not(:hover) .product-icons {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Pause marquee on hover */
.athoor-product-marquee:hover {
  animation-play-state: paused !important;
}
/* Hide slider arrows/pagination for marquee section */
.slider-component-full-width .slider-buttons {
  display: none !important;
}

/* --- TRENDING title: smaller --- */
.collection__title .title.h2,
.collection__title h2 {
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}
.collection__title .subtitle,
.collection-list-title__text {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
}

/* --- CART BUTTON: remove ALL square/border (force plain icon) --- */
.product-icons li product-form button,
.product-icons li product-form .quick-add__submit,
.product-icons product-form button,
ul.product-icons button,
.product-icons button.quick-add__submit {
  width: 24px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.product-icons button.quick-add__submit::after {
  content: none !important;
  display: none !important;
}
.product-icons button.quick-add__submit svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #1a1a1a !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

/* ============================================
   MOBILE — Force show account/login icon
   ============================================ */
@media screen and (max-width: 749px) {
  .header__icons .header__icon--account,
  a.header__icon--account.small-hide,
  .header__icon--account.small-hide {
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Slightly smaller icons on mobile to avoid crowding */
  .header__icons .header__icon svg,
  .header__icons .header__icon--account svg {
    width: 1.7rem !important;
    height: 1.7rem !important;
  }
  .header__icons a.header__icon:not(:last-child) {
    margin-left: 1.4rem !important;
  }

  /* Remove wishlist/love icon on mobile */
  .header__icons .header__icon--wishlist,
  .header__icons .header__icon--compare {
    display: none !important;
  }

  /* Reorder icons: Cart, Profile, Search */
  .header__icons {
    display: flex !important;
    align-items: center !important;
  }
  .header__icons .header__icon--cart { order: 1 !important; }
  .header__icons .header__icon--account { order: 2 !important; }
  .header__icons .header__search,
  .header__icons .header__icon--search { order: 3 !important; }
}

/* ============================================
   IDENTITY PRODUCT PAGE — Atkinsons style (mobile)
   White bg, large centered image, clean layout
   ============================================ */
@media screen and (max-width: 749px) {
  /* Hide breadcrumb banner on product pages */
  .product-template .breadcrumb,
  body[class*="product"] .breadcrumb,
  .breadcrumb {
    display: none !important;
  }

  /* Homepage featured-product image — compact on mobile */
  .featured-product .product__media-list,
  .featured-product .product__media-item,
  .featured-product .product__media.media {
    padding-top: 0 !important;
    height: 320px !important;
    max-height: 320px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #f0ebe4 !important;
    border-radius: 3px !important;
  }
  .featured-product .product__media.media img,
  .featured-product .product__media-item img {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
  }

  /* Clean product info section */
  .product .product__info-wrapper {
    padding: 20px 20px 0 !important;
    text-align: center !important;
  }

  /* Product type badge (like "PARFUM INTENSE") — filled grey pill */
  .product .product__text.subtitle,
  .product .product__type {
    display: inline-block !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border: none !important;
    background: #efece7 !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    color: #6b6258 !important;
    margin: 0 auto 16px !important;
    font-weight: 500 !important;
  }

  /* Product title — large, bold, uppercase (like PLATINUM BLEND) */
  .product__title h1,
  .product__title.h1,
  .product .product__title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 30px !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 10px !important;
    line-height: 1.1 !important;
  }

  /* Subtitle/tagline */
  .product .product__text.body,
  .product .product__description-short {
    text-align: center !important;
    font-size: 15px !important;
    color: #5a5450 !important;
    font-weight: 300 !important;
    margin-bottom: 22px !important;
  }

  /* Size + Price row */
  .product .price {
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    justify-content: center !important;
  }
  .product .product-weight {
    text-align: center !important;
    font-size: 17px !important;
    color: #5a5450 !important;
    font-weight: 300 !important;
    margin-bottom: 6px !important;
  }

  /* Wishlist heart top-right of image */
  .product .product__media-wrapper .dt-sc-btn-wishlist,
  .product .product__media-wrapper [data-wishlist] {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
  }
}

/* ============================================
   DESKTOP — Featured product image smaller
   ============================================ */
/* Homepage featured product: show ONLY the featured image (hide extra stacked media that render as blank boxes) */
.featured-product .product__media-list > .product__media-item:not(:first-child) {
  display: none !important;
}
@media screen and (min-width: 750px) {
  .featured-product .product__media-wrapper,
  .featured-product .product__media-list,
  .featured-product .product__media-item,
  .featured-product .product__media .media {
    max-height: 560px !important;
  }
  .featured-product .product__media img,
  .featured-product .product__media .media img {
    max-height: 540px !important;
    object-fit: contain !important;
    width: auto !important;
    margin: 0 auto !important;
  }
  /* Keep image column from dominating the row */
  .featured-product .product__media-wrapper {
    max-width: 50% !important;
  }
  /* Light side padding so content doesn't touch screen edges */
  .featured-product .page-width,
  .featured-product > .page-width,
  .featured-product .product {
    padding-left: 90px !important;
    padding-right: 90px !important;
  }

  /* Show wishlist button on desktop in a maintained size */
  .featured-product .dT_VProdWishList,
  .featured-product .add-wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .featured-product .add-wishlist {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 4px !important;
    background: #fff !important;
    margin-top: 10px !important;
  }
  .featured-product .add-wishlist:before,
  .featured-product .add-wishlist svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* IDENTITY heading — large, letter-spaced like reference */
  .featured-product .product__title,
  .featured-product .product__title h1,
  .featured-product .product__title h2,
  .featured-product .product__title .h0,
  .featured-product .product__title .h1 {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 30px !important;
    letter-spacing: 0.14em !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    margin: 0 0 18px !important;
    color: #1a1a1a !important;
  }

  /* ADD TO CART — prominent black full-width button (like Sunnamusk) */
  .featured-product .product-form__submit,
  .featured-product button.product-form__submit,
  .featured-product .product-form__submit.button--secondary {
    background: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    width: 100% !important;
    height: 54px !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    order: -1 !important;
    margin-bottom: 10px !important;
  }
  .featured-product .product-form__submit span {
    color: #fff !important;
  }
  /* Stack ADD TO CART above Buy with Shop */
  .featured-product .product-form__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ============================================
   DESKTOP — Main product page (NOT featured)
   Atkinsons style: white bg, square, moveUp anim
   ============================================ */
@media screen and (min-width: 750px) {
  .product:not(.featured-product) .product__media-wrapper,
  .product:not(.featured-product) .product__media-list,
  .product:not(.featured-product) .product__media-item,
  .product:not(.featured-product) .product__media .media {
    max-height: 560px !important;
    background: #ffffff !important;
    border-radius: 3px !important;
  }
  .product:not(.featured-product) .product__media img,
  .product:not(.featured-product) .product__media .media img {
    max-height: 540px !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
    padding-right: 20px !important;
    width: auto !important;
    margin: 0 auto !important;
    background: transparent !important;
    animation: athoorMoveUp 2s ease-in-out !important;
  }
  /* Image column not too wide */
  .product:not(.featured-product) .product__media-wrapper {
    max-width: 48% !important;
  }
}

/* Atkinsons-style product image entrance animation */
@keyframes athoorMoveUp {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}



/* ============================================
   Review stars (social proof on product cards)
   ============================================ */
.athoor-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 8px;
  line-height: 1;
}
.athoor-stars__star {
  font-size: 13px;
  color: #d8d2c8;
}
.athoor-stars__star.is-on {
  color: #B8960C;
}
.athoor-stars__count {
  font-size: 11px;
  color: #8a8079;
  margin-left: 5px;
  letter-spacing: 0.02em;
}


/* ============================================
   PDP assurance block (luxury reassurance)
   ============================================ */
.athoor-assurance { margin: 16px 0 4px; }
.athoor-assurance__stock {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #b54b2e;
  margin: 0 0 14px;
  font-weight: 500;
}
.athoor-assurance__list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #ece6dd;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.athoor-assurance__list li {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: #4a443d;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 300;
}
.athoor-assurance__list li::before {
  content: "\2713";
  color: #B8960C;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}


/* Lift the Shopify Inbox chat button on mobile so it clears the cart bar / footer */
@media screen and (max-width: 749px) {
  #shopify-chat,
  #shopify-chat iframe,
  iframe[title*="chat" i],
  iframe[id*="chat" i] {
    bottom: 84px !important;
  }
}


/* Remove the product image zoom icon + disable click-to-zoom everywhere */
.product__media-icon,
.product__modal-opener .product__media-icon { display: none !important; }
.product__media-toggle { pointer-events: none !important; cursor: default !important; }


/* Mobile: product image background -> clean white with a soft white shade */
@media screen and (max-width: 749px) {
  .product__media-item,
  .product__media-item .media,
  .product__media-list .product__media-item .media {
    background: linear-gradient(160deg, #ffffff 0%, #f6f3ef 100%) !important;
  }
}


/* ===== EXPLORE THE COLLECTION button: black + underline ===== */
.slideshow .banner__buttons .button,
.slideshow .banner__buttons .button--secondary {
  background: transparent !important;
  border: none !important;
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1px !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.slideshow .banner__buttons .button:hover,
.slideshow .banner__buttons .button--secondary:hover {
  color: #000000 !important;
  text-decoration-thickness: 2px !important;
  opacity: 0.8 !important;
}


/* ===== FOOTER: Black background, white text ===== */
.section-footer,
footer.footer,
.footer {
  background: #000 !important;
  color: #fff !important;
}
.footer a,
.footer h2,
.footer h3,
.footer h4,
.footer .footer-block__heading,
.footer .footer__content-top a,
.footer label,
.footer p,
.footer span,
.footer .copyright__content,
.footer .copyright a {
  color: #fff !important;
}
.footer a:hover {
  color: #B8960C !important;
}
.footer input,
.footer .field__input {
  background: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
.footer input::placeholder {
  color: rgba(255,255,255,0.6) !important;
}
.footer .field__button svg,
.footer .icon {
  color: #fff !important;
  fill: #fff !important;
}
.footer .footer__content-bottom {
  border-top-color: rgba(255,255,255,0.15) !important;
}
.footer .payment-icons .icon {
  fill: #fff !important;
}

/* Footer logo — invert to white */
.footer img,
.footer .footer-block__details-content img,
.footer .footer__logo img {
  filter: brightness(0) invert(1) !important;
}


/* ===== Product page: Subscribe & Get 15% Off interface ===== */
.athoor-signup-offer {
  margin-top: 16px;
  padding: 16px 18px;
  background: #faf8f5;
  border: 1px solid #ece6dd;
  border-radius: 6px;
}
.athoor-signup-offer__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  font-weight: 500;
  text-transform: uppercase;
}
.athoor-signup-offer__trigger svg {
  width: 16px; height: 16px; fill: none; stroke: #B8960C; stroke-width: 1.5;
}
.athoor-signup-offer__trigger span {
  color: #B8960C; font-weight: 600;
}
.athoor-signup-offer__body {
  display: none;
  margin-top: 14px;
}
.athoor-signup-offer.is-open .athoor-signup-offer__body {
  display: block;
}
.athoor-signup-offer__desc {
  font-size: 12px;
  color: #6b6258;
  margin: 0 0 12px;
  line-height: 1.5;
}
.athoor-signup-offer__field {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.athoor-signup-offer__input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font-body-family);
  outline: none;
}
.athoor-signup-offer__input:focus {
  border-color: #1a1a1a;
}
.athoor-signup-offer__submit {
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.athoor-signup-offer__submit:hover { background: #333; }
.athoor-signup-offer__code-box {
  display: none;
  background: #fff;
  border: 1px dashed #B8960C;
  border-radius: 6px;
  padding: 14px 16px;
  text-align: center;
}
.athoor-signup-offer__code-box.is-visible { display: block; }
.athoor-signup-offer__code-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8079;
  margin: 0 0 6px;
}
.athoor-signup-offer__code-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  margin: 0 0 10px;
  font-family: var(--font-heading-family);
}
.athoor-signup-offer__copy-btn {
  background: #B8960C;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.athoor-signup-offer__copy-btn:hover { background: #9a7d0a; }
.athoor-signup-offer__success {
  font-size: 11px;
  color: #2d6b4f;
  margin-top: 8px;
}




.wishlist-table td,
.wishlist-page td,
[class*="wishlist"] table td {
  padding: 12px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}

.wishlist-table img,
.wishlist-page img,
[class*="wishlist"] table img {
  width: 60px !important;
  height: 75px !important;
  object-fit: contain !important;
}

.wishlist-table .btn,
.wishlist-page .btn,
[class*="wishlist"] table .btn,
[class*="wishlist"] table button {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  padding: 10px 18px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
}




/* ===== WISHLIST — Clean minimal styling (no grid override) ===== */
.page-width.wishlist {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
dtx-wishlist-grid table {
  border: none !important;
}
dtx-wishlist-grid table thead > tr {
  background: #faf8f5 !important;
  border: none !important;
}
dtx-wishlist-grid table thead > tr th {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  padding: 12px 10px !important;
  border: none !important;
}
dtx-wishlist-grid table tbody > tr {
  border-bottom: 1px solid #f0ece6 !important;
}
dtx-wishlist-grid table tbody > tr td {
  border: none !important;
  padding: 16px 10px !important;
  vertical-align: middle !important;
  font-size: 12px !important;
}
dtx-wishlist-grid table tbody > tr td.product-thumbnail {
  width: 80px !important;
}
dtx-wishlist-grid table tbody > tr td.product-thumbnail img {
  width: 70px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
dtx-wishlist-grid table tbody > tr td.product-name a {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
}
dtx-wishlist-grid table tbody > tr td.product-cart a,
dtx-wishlist-grid table tbody > tr td.product-cart button {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
dtx-wishlist-grid table tbody > tr td a.remove-item svg {
  width: 16px !important;
  height: 16px !important;
}

/* ===== WISHLIST — Clean luxury style ===== */
/* Hide template/placeholder rows that show raw variables */
dtx-wishlist-grid table tbody tr:not([data-product-id]) {
  display: none !important;
}

/* Page spacing */
.page-width.wishlist {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  text-align: center !important;
}

/* Heading above wishlist */
.page-width.wishlist::before {
  content: "Don't forget your favourites";
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.page-width.wishlist::after {
  content: "Sign in or create an account to save your selection";
  display: block;
  font-size: 13px;
  color: #6b6258;
  margin-bottom: 32px;
}

/* Table: cleaner borders + spacing */
dtx-wishlist-grid table {
  border: none !important;
  border-collapse: collapse !important;
}
dtx-wishlist-grid table thead > tr {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #ece7df !important;
  margin-bottom: 1rem !important;
}
dtx-wishlist-grid table thead > tr th {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 400 !important;
  color: #8a8079 !important;
  padding: 10px 12px !important;
  border: none !important;
}
dtx-wishlist-grid table tbody > tr {
  border-bottom: 1px solid #f0ece6 !important;
}
dtx-wishlist-grid table tbody > tr td {
  border: none !important;
  padding: 16px 12px !important;
  vertical-align: middle !important;
}
/* Smaller product images */
dtx-wishlist-grid table tbody > tr td.product-thumbnail {
  width: 80px !important;
}
dtx-wishlist-grid table tbody > tr td.product-thumbnail img {
  width: 70px !important;
  height: 90px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
/* Product name */
dtx-wishlist-grid table tbody > tr td.product-name a {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
}
/* Price */
dtx-wishlist-grid table tbody > tr td.product-price {
  font-size: 12px !important;
  color: #1a1a1a !important;
}
/* Select options button */
dtx-wishlist-grid table tbody > tr td.product-cart a,
dtx-wishlist-grid table tbody > tr td.product-cart button {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
dtx-wishlist-grid table tbody > tr td.product-cart a:hover {
  background: #333 !important;
}
/* Remove icon */
dtx-wishlist-grid a.remove-item svg {
  width: 16px !important;
  height: 16px !important;
  color: #aaa !important;
}
dtx-wishlist-grid a.remove-item:hover svg {
  color: #1a1a1a !important;
}

/* Wishlist Drawer */
.athoor-wishlist-drawer,
[class*="wishlist-drawer"],
[id*="wishlist-drawer"] {
  max-width: 340px !important;
}
@media (max-width: 749px) {
  .athoor-wishlist-drawer,
  [class*="wishlist-drawer"],
  [id*="wishlist-drawer"] {
    max-width: 100vw !important;
    width: 100vw !important;
  }
}

/* ============================================
   MOBILE HEADER ICONS — Force wishlist/cart/account visible
   Only affects mobile (max-width: 749px)
   ============================================ */
@media screen and (max-width: 749px) {
  /* Hide ALL search icons/modals in header icons area */
  .header__icons .header__search,
  .header__icons details-modal,
  .header__icons details-modal.header__search {
    display: none !important;
  }

  /* Force wishlist heart icon visible */
  a.header__icon.header__icon--wishlist,
  .header__icons a.header__icon--wishlist {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Force cart icon visible */
  a.header__icon.header__icon--cart,
  .header__icons a.header__icon--cart {
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* Force account icon visible (override small-hide) */
  a.header__icon.header__icon--account,
  a.header__icon.header__icon--account.small-hide,
  .header__icons a.header__icon--account {
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* Flexbox order: heart, cart, account */
  .header__icons {
    display: flex !important;
    align-items: center;
    gap: 1rem;
  }
  a.header__icon--wishlist { order: 1 !important; margin-right: -0.4rem !important; }
  a.header__icon--cart,
  a#cart-icon-bubble { order: 2 !important; }
  a.header__icon--account { order: 3 !important; }

  /* Reset margins */
  .header__icons a.header__icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ============================================
   MOBILE: Fix club-popup layout (Athoor Community signup)
   Desktop untouched.
   ============================================ */
@media screen and (max-width: 749px) {
  #club-popup {
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #club-popup > div {
    flex-direction: column !important;
    width: 92vw !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }
  #club-popup > div > div {
    width: 100% !important;
  }
  /* Hide the right-side image on mobile */
  #club-popup > div > div:last-child {
    display: none !important;
  }
  /* Left content area */
  #club-popup > div > div:first-child {
    padding: 28px 24px !important;
    width: 100% !important;
  }
  #club-popup h2 {
    font-size: 20px !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
  }
  #club-popup h3 {
    font-size: 36px !important;
    margin-bottom: 14px !important;
  }
  #club-popup p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }
  #club-popup input[type="email"] {
    height: 46px !important;
    font-size: 14px !important;
  }
  #club-popup button[type="submit"] {
    height: 46px !important;
    font-size: 13px !important;
  }
  #club-popup #close-popup {
    top: 12px !important;
    right: 12px !important;
    font-size: 26px !important;
  }
}


/* ============================================
   MOBILE: Fix athoor-sub-toast notification position
   Moves below sticky header so it's fully visible
   Desktop untouched.
   ============================================ */
@media screen and (max-width: 749px) {
  .athoor-sub-toast.is-visible {
    top: 72px !important;
    font-size: 11px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    max-width: 88vw !important;
  }
}

/* ============================================
   MOBILE ONLY: Fix green glitch from athoor-sub-toast
   The toast was rendering at top:16px behind the sticky header.
   Force it hidden by default and only show properly below header.
   ============================================ */
@media screen and (max-width: 768px) {
  /* The subscribe toast: when hidden (default) ensure it's fully off-screen */
  .athoor-sub-toast {
    top: -80px !important;
    opacity: 0 !important;
  }
  /* When visible, show below the sticky header */
  .athoor-sub-toast.is-visible {
    top: 74px !important;
    opacity: 1 !important;
    font-size: 11px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    max-width: 88vw !important;
    z-index: 100000 !important;
  }
  /* Ensure sticky header has no overflow issues */
  .header-wrapper.athoor-fixed,
  #shopify-section-headers.athoor-fixed {
    overflow: visible !important;
    z-index: 9999 !important;
  }
}



/* ============================================
   Header icon spacing — equal gaps between wishlist/cart/profile
   ============================================ */
.header__icons a.header__icon--wishlist {
  margin-right: 2rem;
}
@media screen and (max-width: 749px) {
  .header__icons a.header__icon--wishlist {
    margin-right: 0 !important;
  }
}


/* ============================================
   MOBILE: Prevent iOS auto-zoom on Subscribe+ input
   iOS zooms in when input font-size < 16px. Setting 16px prevents this.
   ============================================ */
@media screen and (max-width: 768px) {
  .athoor-sub-drawer__input,
  .athoor-sub-drawer input[type="email"],
  .athoor-sub-drawer input[type="text"] {
    font-size: 16px !important;
  }
}


/* Hide Shopify native cookie consent banner (we use our own LV-style version) */
#shopify-pc__banner,
[id*="shopify-pc__"],
.shopify-pc-banner {
  display: none !important;
}


/* ── Athoor: keep the floating widgets clear of the sticky purchase bar (mobile) ──
   The sticky add-to-cart bar is position:fixed; bottom:0 and 81px tall
   (see .athoor-sticky-atc in section-main-product.css). Chatway positions its
   launcher with an inline bottom:20px, so the 60px bubble sat inside the bar's
   0-81px band: it covered the Add to Cart button and a hit test at the button's
   right edge returned Chatway's launcher instead of the button.

   Stacking from the bottom up, measured:
     sticky bar    0 - 81px
     chat launcher 93 - 153px   (81 + 12px gap)
     back-to-top   165 - 205px  (93 + 60 + 12px gap)

   The back-to-top button has to move too, otherwise it would sit inside the
   launcher's new band - the two overlap horizontally.

   Scoped with :has() so only pages that actually render the bar are affected;
   the homepage and other templates keep their original offsets. !important is
   required because Chatway applies `bottom` as an inline style. Only the
   collapsed preview bubble is moved - the opened chat panel keeps Chatway's own
   positioning so it is never left floating mid-screen. */
@media screen and (max-width: 749px) {
  body:has(.athoor-sticky-atc) .chatway--trigger-container {
    bottom: 93px !important;
  }
  body:has(.athoor-sticky-atc) .chatway--frame-container.chatway--preview--only--container {
    bottom: 163px !important;
  }
  body:has(.athoor-sticky-atc) #to-top.dt-sc-to-top.scroll-button {
    bottom: 165px !important;
  }
}

/* Mobile hamburger menu - Shop and Contact crisp dark text.
   athoor-custom.css sets ".link { color: var(--athoor-tan) }" globally.
   Mobile menu items have class "link link--text", so they inherit the
   tan/gold colour at rest. Override with the existing --athoor-ink token
   (#1A1A1A) so the resting state matches the crisp dark header context.
   Hover/focus keep the subtle accent from component-menu-drawer.css.
   Scoped tightly: nothing outside .menu-drawer is touched. */
.menu-drawer .link,
.menu-drawer .link--text,
.menu-drawer .menu-drawer__menu-item {
  color: var(--athoor-ink);
}
.menu-drawer .menu-drawer__menu-item:hover,
.menu-drawer .menu-drawer__menu-item:focus,
.menu-drawer .menu-drawer__menu-item--active {
  color: var(--athoor-tan);
  background-color: rgba(0,0,0,0.04);
}

/* Footer premium polish */
/* Use !important on typography only: section-footer.css injects after theme layout CSS */
.footer .footer-block__heading,.footer .footer-block__heading.right{font-size:1.1rem !important;letter-spacing:.16em !important;text-transform:uppercase !important;font-weight:400 !important;margin-bottom:1.2rem !important}
.footer .footer-block__details-content .list-menu__item--link{line-height:1.5 !important;padding-top:0.2rem !important;padding-bottom:0.2rem !important;font-size:1.4rem !important;letter-spacing:.04em !important}
.footer .footer-block__newsletter>p{font-size:1.3rem !important;line-height:1.6 !important;letter-spacing:.02em !important}
@media screen and (min-width:750px){
.footer__content-top .footer__blocks-wrapper.grid--4-col-tablet{grid-template-columns:repeat(5,1fr) !important;gap:0 clamp(16px,2.5vw,40px) !important;max-width:1000px !important;margin:0 auto !important}
.footer:not(.color-background-1){margin:0 !important;padding-left:clamp(24px,4vw,60px) !important;padding-right:clamp(24px,4vw,60px) !important}
.footer-block.grid__item{padding:0 !important}
.footer-block.grid__item.footer-block--menu{width:auto !important}
}
@media screen and (min-width:990px){
.athoor-lv-banner .banner__content{padding-top:4rem !important;padding-bottom:4rem !important}
}

/* ============================================================================
   TASK 14 — "Why not also try" (product-recommendations) quick-add bag ONLY
   ----------------------------------------------------------------------------
   SCOPE PROOF (measured live, 2026, theme 205900054867 role=main):
     • A PRODUCT page renders EXACTLY ONE <product-recommendations> element
       (document.querySelectorAll('product-recommendations').length === 1), so the
       custom element is a stable unique wrapper. No Liquid change is required.
       (The section id is template-scoped —
       `section-template--31729908711763__product-recommendations-padding` — so the
       section-class is NOT portable; the custom element is.)
     • The BOXED quick-add variant (`.quick-add > product-form > form > button`)
       exists ONLY inside that section. Measured `.quick-add__submit` counts:
         product page   12  — all 12 inside product-recommendations, 0 outside
         search page    10  — all 10 OUTSIDE, 0 of them inside a `.quick-add`
                              (they live in `ul.product-icons`, already borderless)
         collection      0
         home            0
       Every selector below is additionally gated on `.quick-add`, so the
       `ul.product-icons` buttons on search/collection cards cannot be reached.
     • The GLOBAL `.quick-add` / `.quick-add__submit` rules earlier in this file
       are deliberately LEFT UNTOUCHED — other surfaces depend on them.
     • `!important` is used only because the global rule being overridden uses
       `!important`; each declaration is the narrowest override needed.
     • Specificity is 0,4,1 (`product-recommendations .card-wrapper .card__inner
       .quick-add .quick-add__submit`) so it also outranks the 0,4,0
       `.card--product .card__inner .quick-add .button--full-width` rule.

   REFERENCE = the APPROVED wishlist heart `.card-wrapper a.add-wishlist`, measured:
       rest   47x47, border-radius 50%, background transparent,
              ::before glyph 18x18 background-color rgba(0,0,0,.9),
              transition .3s linear
       hover  background-color rgba(0,0,0,.7), colour #fff, ::before glyph #fff
       tooltip  sibling <tooltip class="tooltip">, hidden at rest
              (visibility:hidden; opacity:0), revealed on hover,
              background #000, colour #f4f0e9, 14px, padding 5px 15px
   The wishlist heart itself is NOT modified anywhere below.
   ============================================================================ */

/* --- REST: clean bag glyph. No box, no border, no background. --- */
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit {
  width: 47px !important;
  height: 47px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1a1a1a !important;
  overflow: visible !important;
  transition: background-color .25s linear, color .25s linear !important;
}

/* The theme paints an animated black clip-path fill in ::before at z-index:-1.
   It was masked by the old solid white background; with a transparent background
   it would show through, so it is suppressed inside this section only. */
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit::before {
  content: none !important;
  display: none !important;
}

/* The bag glyph — sized to the heart's 18x18. */
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit::after {
  width: 18px !important;
  height: 18px !important;
  box-shadow: none !important;
  transition: none !important;
}

/* --- HOVER / KEYBOARD FOCUS: the heart's black circle + white glyph. --- */
product-recommendations .card-wrapper .card__inner .quick-add:hover .quick-add__submit,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:hover,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:focus-visible {
  background-color: rgba(0, 0, 0, .7) !important;
  color: #fff !important;
  opacity: 1 !important;
  border: 0 !important;
}
product-recommendations .card-wrapper .card__inner .quick-add:hover .quick-add__submit::after,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:hover::after,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:focus-visible::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E") !important;
}

/* Keyboard-only focus ring, in addition to the circle, so the control is
   reachable and visible without a mouse. Not applied to the heart. */
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:focus-visible {
  outline: 2px solid rgba(0, 0, 0, .9) !important;
  outline-offset: 2px !important;
}

/* --- PRESSED (mouse + touch) --- */
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:active {
  background-color: rgba(0, 0, 0, .88) !important;
  color: #fff !important;
  opacity: 1 !important;
}
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E") !important;
}

/* --- TOOLTIP: match the heart's behaviour and treatment. ---
   Measured before: the bag tooltip never became visible on hover AND its text
   colour computed to #000 on a #000 background. Both are corrected here. */
product-recommendations .card-wrapper .card__inner .quick-add tooltip {
  color: #f4f0e9 !important;
  font-size: 14px !important;
  padding: 5px 15px !important;
  left: auto !important;
  right: 0 !important;
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  transform: none !important;
  white-space: nowrap !important;
}
product-recommendations .card-wrapper .card__inner .quick-add:hover tooltip,
product-recommendations .card-wrapper .card__inner .quick-add:focus-within tooltip {
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- MOBILE / TOUCH ---
   Measured before: `.quick-add` computes opacity:0 at 390px and there is no
   hover to reveal it, while the `ul.product-icons` add-to-cart <li> is
   display:none — so a touch user had a CLICKABLE BUT INVISIBLE add-to-cart on
   every recommendation card. Revealing it (inside this section only) is what
   makes the pressed state below perceivable at all. */
@media screen and (max-width: 749px) {
  product-recommendations .card-wrapper .card__inner .quick-add {
    opacity: 1 !important;
  }
}

/* ============================================================================
   TASK 15 — "Why not also try" (product-recommendations) MOBILE SIZING ONLY
   ----------------------------------------------------------------------------
   SCOPE: every rule is prefixed with the `product-recommendations` custom element
   (a PRODUCT page renders EXACTLY ONE of them — measured) and every rule lives
   inside `@media screen and (max-width: 749px)`. Desktop and tablet ≥750px are
   therefore untouched by construction.

   MEASURED BEFORE (390 x 844, live, theme 205900054867 role=main):
     cards per row .......... 1
     card ................... 330 x 537.1  (first card; 511.1 thereafter)
     media box (.card__inner) 330 x 330    (square — forced globally by
                              `.card--media .card__inner,.card__media
                               {aspect-ratio:1/1 !important}`)
     text block ............. 330 x 207.1  (.card__information padding 25px 13px)
     card image ............. object-fit:contain, padding 14% (46.2px each side)
     grid gaps .............. row 28px / column 18px
     section padding ........ 45px top / 30px bottom
     heading ................ 22px, margin-bottom 30px
     TOTAL SECTION HEIGHT ... 2288px  ← 4 stacked full-width cards
     title 12px / price 15px  ← already small; NOT reduced further (see below)

   WHY 2-UP IS THE FIX, NOT A REDESIGN:
     • `templates/product.json` sets this section's `columns_mobile: "2"`.
     • The rendered `sizes` attribute already declares the 2-up width for phones:
       `calc((100vw - 35px) / 2)` = 177px at 390px.
     • But the theme's own base.css contains
         @media (max-width:576px){ .grid--2-col-tablet-down .grid__item
                                   { width:calc(100% - …); max-width:100% } }
       which silently overrides the merchant's setting BELOW 576px only. At
       577–749px the section is ALREADY 2-up. So 1-up at 390px is an internal
       inconsistency, and it makes the browser paint the 177px image candidate
       into a 330px box — a ~1.9x upscale (image natural size 177 x 206).
     • Restoring 2-up therefore (a) honours the section setting, (b) matches the
       `sizes` contract so the image is no longer upscaled, (c) removes the
       575px/577px discontinuity, and (d) roughly quarters the scroll depth.

   IMAGES STAY PROPORTIONAL AND UNCROPPED: the global
   `.card__media img { object-fit: contain !important }` is NOT touched, and no
   rule below sets a fixed image height, `object-fit: cover`, or a crop. Only the
   inner breathing-room padding is reduced (14% -> 9%) so the bottle keeps visual
   presence inside the smaller square box.

   TEXT IS DELIBERATELY NOT SHRUNK: the card title already computes 12px and the
   price 15px. Reducing either would hurt scannability and push the title below a
   comfortable mobile reading size, so the compactness is taken from layout and
   padding instead. Reported rather than silently skipped.

   `!important` is used ONLY where the rule being overridden already uses it
   (`.product-grid{gap:…!important}` and `.card__media img{padding:…!important}`).
   The grid-item, `.card__information`, section-padding and heading overrides win
   on specificity alone.
   ============================================================================ */

@media screen and (max-width: 749px) {
  /* 1. Two cards per row — restores columns_mobile:"2" below 576px.
        Specificity 0,3,2 beats the theme's 0,2,0 rule, so no !important.
        9px = half the 18px column-gap that stays in force below. */
  product-recommendations ul.grid.grid--2-col-tablet-down > li.grid__item {
    width: calc(50% - 9px);
    max-width: calc(50% - 9px);
  }

  /* 2. Tighter vertical rhythm between rows (28px -> 20px). Column gap is
        restated at its existing 18px because the width math above depends on it. */
  product-recommendations ul.grid.product-grid {
    row-gap: 20px !important;
    column-gap: 18px !important;
    margin-bottom: 0 !important;
  }

  /* 3. Text block: 25px/13px padding is generous for a 156px-wide card. */
  product-recommendations .card-wrapper .card__information {
    padding: 12px 8px;
  }

  /* 4. Give the (now smaller) bottle more of its square box back. Still
        `contain`, still uncropped — only the inset changes. */
  product-recommendations .card-wrapper .card__media img {
    padding: 9% !important;
  }

  /* 5. Clearance. On the narrower 156px card the `.quick-add` padding box ended
        exactly 1px inside the `ul.product-icons` padding box (icons box bottom
        619px vs quick-add box top 618px; the visible glyphs were already 6px
        apart). Nudging ONLY the quick-add wrapper down 4px restores a clean
        10px gap between glyphs and removes the box touch entirely. The wishlist
        heart and `ul.product-icons` are NOT modified. The control stays fully
        inside the media box (bottom 669px vs media bottom 676px). */
  product-recommendations .card-wrapper .card__inner .quick-add {
    bottom: 6px !important;
  }

  /* 6. Section chrome: 45/30 -> 36/24, heading gap 30px -> 18px. */
  product-recommendations.product-recommendations {
    padding-top: 36px;
    padding-bottom: 24px;
  }
  product-recommendations h2.product-recommendations__heading {
    margin-bottom: 18px;
  }
}

/* ============================================================================
   ROUND 3 / ITEM 1 — separate the WISHLIST + COMPARE counters from the CART counter
   ----------------------------------------------------------------------------
   WHY
     `sections/header.liquid` had the wishlist and compare counters REUSE the cart's
     class:
       <dtx-wish-count class="dtxc-wishlist-count cart-count-bubble" …>
       <dtx-wish-count class="dtxc-compare-count cart-count-bubble" …>
     while the REAL cart bubble is a <div class="cart-count-bubble"> that appears LATER
     in DOM order. Consequence, measured live: `document.querySelector('.cart-count-bubble')`
     returned the WISHLIST node, so any unscoped read of "the cart count" read the wishlist
     count instead. Those two nodes have been given their own `dtx-count-bubble` class, so
     `.cart-count-bubble` now resolves to exactly one node — the real cart bubble.
   THIS BLOCK
     re-supplies, byte-faithfully, every declaration those two nodes were previously
     receiving THROUGH `.cart-count-bubble`, so their appearance is unchanged. Nothing else
     is added: no new colour, size, spacing or transition.
   PROVENANCE OF EVERY DECLARATION BELOW
     • assets/base.css  (sha16 69263677a4f9d60b) lines 2382-2400 — `.cart-count-bubble:empty`
       and `.cart-count-bubble`. Copied verbatim.
     • assets/component-mega-menu.css (sha16 5d7f5c625da44e24) lines 959-973 — the
       `@media (min-width:991px) .header__icons.icon__fallback-content .cart-count-bubble`
       trio (base rule + ::before "(" + ::after ")"). Copied verbatim. This host class is
       NOT present on the live header today (measured: false), so these three rules are
       currently inert — they are replicated anyway so the two counters keep behaving
       identically to the cart bubble if the merchant ever enables the fallback-text header.
   CASCADE
     athoor-custom.css loads at layout/theme.liquid line 326, after base.css (294) and
     component-mega-menu.css (295), so equal-specificity selectors here win by order.
     No `!important` is used or needed.
   SCOPE
     `.dtx-count-bubble` exists on exactly the two header counter nodes and nowhere else,
     so these rules cannot reach any other surface. The cart bubble, the wishlist heart,
     `.grid-count-bubble` and every `.dtxc-*` behavioural hook are untouched.
   ============================================================================ */
.dtx-count-bubble:empty {
  display: none;
}

.dtx-count-bubble {
  position: absolute;
  background-color: var(--gradient-base-accent-1);
  color: var(--gradient-base-background-1);
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  bottom: 1.6rem;
  left: 1.6rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

@media screen and (min-width: 991px) {
  .header__icons.icon__fallback-content .dtx-count-bubble {
    position: relative;
    background: transparent;
    color: rgb(var(--color-foreground));
    line-height: 1.8rem;
    top: auto;
    right: auto;
    margin-left: 0.6rem;
  }
  .header__icons.icon__fallback-content .dtx-count-bubble:before {
    content: "(";
  }
  .header__icons.icon__fallback-content .dtx-count-bubble:after {
    content: ")";
  }
}

/* ============================================================================
   ROUND 3 / ITEM 2 — "Why not also try" quick-add bag: visible on LIGHT *and* DARK imagery
   ----------------------------------------------------------------------------
   THE APPROVED RESTING STATE IS KEPT EXACTLY: no square, no circle, no filled
   background plate. Only the glyph's own rendering changes.
   MEASURED BEFORE (live, 390 x 844, per-pixel WCAG contrast of the painted glyph against
   the imagery it covers — see R3_item2_before.json):
       card 0 "The House Collection"  backdrop mean luminance 0.273  ratio p90 1.23 : 1
       card 1 "IDENTITY"              backdrop mean luminance 0.564  ratio p90 1.60 : 1
       card 2 "GISSAH D'AURA"         backdrop mean luminance 0.553  ratio p90 1.58 : 1
   i.e. over dark bottle imagery the single-tone #1a1a1a stroke was effectively invisible.
   At 1440 the same glyph measured p90 15.49 : 1 over the light part of the imagery, but its
   per-pixel MINIMUM was 1.32 : 1 — so even on desktop parts of the glyph already dissolved
   into the dark pixels within the control area (backdrop min luminance 0.10-0.17).
   THE FIX — dual-tone stroke + restrained drop-shadow, no plate:
     • the same heroicons bag path is drawn TWICE in one data-URI SVG: first a white
       stroke-width 4 / stroke-opacity .9 halo, then the original #1a1a1a stroke-width 1.5
       glyph on top. On light imagery the halo is invisible and the dark glyph reads; on dark
       imagery the halo carries the shape. Nothing is filled — `fill='none'` throughout.
     • a two-part restrained drop-shadow adds edge definition on mid-tone imagery: a 1px
       white glow (helps on dark) and a 1px 30%-black offset shadow (helps on light).
   HOVER / FOCUS / ACTIVE ARE UNCHANGED: the Task-14 black circle with the white glyph and
   the tooltip keep winning the cascade because those selectors carry :hover / :focus-visible
   / :active and therefore a HIGHER specificity (0,5,1) than the resting rule below (0,4,1).
   The only thing added for those states is `filter: none`, so the resting halo/shadow does
   not turn into a glow around the white glyph on the black circle.
   SCOPE: every selector is prefixed with the `product-recommendations` custom element, of
   which a product page renders exactly one, and additionally gated on `.quick-add`. The
   wishlist heart, the main and sticky Add-to-Cart, and collection/search cards are untouched.
   ============================================================================ */
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ffffff' stroke-opacity='.9' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3Cpath stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) !important;
}
product-recommendations .card-wrapper .card__inner .quick-add:hover .quick-add__submit::after,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:hover::after,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:focus-visible::after,
product-recommendations .card-wrapper .card__inner .quick-add .quick-add__submit:active::after {
  filter: none !important;
}

/* ============================================================================
   ROUND 3 / ITEM 3 — chat launcher overlap at 390px  (v2 — corrected placement)
   ----------------------------------------------------------------------------
   THE CHAT IS NOT TOUCHED. Nothing below selects, moves, restyles, hides or re-stacks any
   Chatway element. Only the "Why not also try" quick-add POSITION at <=749px changes.
   MEASURED BEFORE (live, 390 x 844, section scrolled into view — R3_item3_before.json):
     Chatway's viewport-fixed surfaces
       div.chatway--frame-container    [127, 604.5, 250, 92]    z-index 998
       iframe.chatway--widget-frame    [227, 557.3, 150, 55.2]   (inside that container)
       div.chatway--trigger-container  [317, 706.5,  60, 60]    z-index 998
     quick-add controls, bottom-right of each media box
       card 0 [129, 203.36, 47, 47]  top-most = the control                  ✅
       card 1 [303, 203.36, 47, 47]  top-most = the control                  ✅
       card 2 [129, 576.05, 47, 47]  top-most = the control                  ✅
       card 3 [303, 576.05, 47, 47]  top-most = iframe.chatway--widget-frame ❌ OBSCURED
     A zoomed capture of card 3's control showed only the chat greeting panel
     (screenshots/R3_item2_before_390_card3_glyph.png).
   WHY RE-STACKING IS NOT AN OPTION: base.css `.isolate { position: relative; z-index: 0 }`
   and the section carries `class="… isolate"`, so <product-recommendations> forms a stacking
   context at z-index 0. No z-index on a descendant can rise above Chatway's z-index 998, and
   raising the section itself would paint the grid over the chat — i.e. hide the launcher —
   which is forbidden. Position is therefore the only correct lever.
   WHY `bottom`, NOT `top`: `.quick-add`'s containing block is `div.card__content`, measured
   to be only ~12px tall and sitting at the BOTTOM of the square media box (computed
   `top: -41px` alongside `bottom: 6px`). `top: 6px` therefore lands the control BELOW the
   media box, over the card title — which is exactly what the first attempt did. A LARGER
   `bottom` is what raises the control, so the offset is expressed against the card width.
   THE VALUE: at <=749px the grid is 2-up with `width: calc(50% - 9px)` inside a section
   padded 15px each side, and `.card--media .card__inner` is forced square, so the media box
   height tracks the card width. `calc(50vw - 93px)` places the control exactly 6px below the
   media box's top edge; verified at 360 / 390 / 430 / 540 / 749 px, where the control is
   inside the media box at every width (R3_pos_explore2.json / R3_pos_explore3.log).
   RESULT (measured at all five widths, section scrolled into view):
     control inside its media box ............................. true at 360/390/430/540/749
     control is the top-most hit-test target at its centre .... true at 360/390/430/540/749
     intersection with EVERY Chatway fixed rect ............... ZERO at 360/390/430/540/749
     intersection with `ul.product-icons` ..................... none (the control is now
       top-LEFT while the wishlist/quickview cluster stays top-RIGHT, which also retires the
       bottom-corner clearance note recorded in Task 15)
   THE TWO-COLUMN T15 LAYOUT IS PRESERVED: no grid, width, gap, padding, image or type rule
   is touched here — only `top` / `bottom` / `left` / `right` on `.quick-add`, plus the tooltip
   flip below so the tooltip opens downward from a top-anchored control instead of upward out
   of the media box.
   `!important` is used only because the rules being overridden (`.quick-add` earlier in this
   file, and the Task-15 `bottom`) already use it.
   ============================================================================ */
@media screen and (max-width: 749px) {
  product-recommendations .card-wrapper .card__inner .quick-add {
    top: auto !important;
    bottom: calc(50vw - 93px) !important;
    left: 6px !important;
    right: auto !important;
  }
  /* The control is now top-anchored, so the tooltip opens downward and aligns left,
     keeping it inside the media box. Hover/focus reveal behaviour is unchanged. */
  product-recommendations .card-wrapper .card__inner .quick-add tooltip {
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
  }
}