/** Shopify CDN: Minification failed

Line 76:0 All "@import" rules must come first

**/
/*
  ================================================================
  PARFFRAGRANCE — ENHANCEMENT DROPS
  File: parffragrance-enhancements.css
  
  HOW TO DEPLOY:
  1. Go to Shopify Admin → Online Store → Themes → Edit Code
  2. Open: assets/parffragrance-enhancements.css (create new file)
  3. Paste this entire file
  4. In layout/theme.liquid, add this line just before </head>:
     {{ 'parffragrance-enhancements.css' | asset_url | stylesheet_tag }}
  
  ZERO structural changes. Zero JS. Zero risk.
  ================================================================
*/


/* ================================================================
   ANTI-FLICKER & THEME TRANSITIONS
   Smooth transitions between Luxury and Regular modes
   ================================================================ */

/* Prevent flash of unstyled content during luxury toggle */
html {
  transition: background-color 0.1s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth color transitions for all theme-dependent elements */
.header-wrapper,
.announcement-bar,
.facets__heading,
.facets__summary,
.facets__label,
.facet-checkbox__text,
.facet-checkbox__text-label,
input[type='checkbox'] {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease, 
              box-shadow 0.3s ease !important;
}

/* Hide content briefly during initial render to prevent flash */
html:not(.luxury-mode):not([data-luxury-checked]) body {
  opacity: 0;
  animation: fadeInBody 0.15s ease 0.05s forwards;
}

@keyframes fadeInBody {
  to {
    opacity: 1;
  }
}

/* Mark that luxury check has been processed */
html[data-luxury-checked] {
  visibility: visible;
}


/* ================================================================
   1. TYPOGRAPHY — Import Playfair Display
      Adds editorial serif for headings only. Montserrat stays for body.
      Impact: product names and headings immediately feel premium.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/* Apply Playfair to headings only */
h1, h2, h3,
.card__heading,
.card__heading a,
.product__title,
.main-product-title,
[class*="__title"],
.section__header h2,
.title.inline-richtext {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* Product title on collection cards — was harsh red, now ink */
.card__information h3 a {
  color: #1C1A19 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease;
}
.card__information h3 a:hover {
  color: #C73543 !important;
}

/* Product page main title — controlled red, not screaming */
h1.product__title,
.product__title {
  color: #1C1A19 !important;
}


/* ================================================================
   2. PRODUCT CARDS — Warmth + hover lift
      Removes the clinical white box. Adds a warm card background,
      subtle elevation on hover, and a bottom border accent.
   ================================================================ */

/* Card base — warm white instead of pure white */
.card.card--card {
  background: #FDFAF6 !important;
  border: 1px solid #EDE8E2 !important;
  border-radius: 4px !important;
  transition: box-shadow 0.35s cubic-bezier(0.16,1,0.3,1),
              transform 0.35s cubic-bezier(0.16,1,0.3,1) !important;
  overflow: hidden;
}

/* Card hover — lifts off the page */
.card-wrapper:hover .card.card--card {
  box-shadow: 0 12px 40px rgba(12,10,9,0.12), 0 2px 8px rgba(12,10,9,0.06) !important;
  transform: translateY(-4px) !important;
}

/* Card bottom accent line — appears on hover */
.card.card--card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #C73543;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  z-index: 10;
}
.card-wrapper:hover .card.card--card::before {
  transform: scaleX(1);
}

/* Card image area — slightly warmer bg */
.card__inner {
  background: #F8F4EF !important;
}

/* Card content bottom border — warmer than grey */
.card__content {
  border-bottom-color: #EDE8E2 !important;
}


/* ================================================================
   3. CARD IMAGE — Smoother zoom on hover
      Current: scale(1.03) — barely perceptible.
      Enhanced: scale(1.06) with longer ease — feels intentional.
   ================================================================ */

@media (hover: hover) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
  }
  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.06) !important;
  }
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0 !important;
  }
}


/* ================================================================
   4. PRICE — Hierarchy fix
      Current: price and compare-at look similar. 
      Enhanced: compare-at is clearly secondary, regular price is prominent.
   ================================================================ */

.price__regular .price-item--regular {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1C1A19 !important;
}

.price__sale .price-item--sale {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #C73543 !important;
}

.price__sale .price-item--regular,
s.price-item {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #AEA8A2 !important;
  text-decoration: line-through !important;
}


/* ================================================================
   5. BUTTONS — Transitions + hover states
      Dawn buttons have almost no hover feedback. This adds a clean
      lift and slight darkening — works with existing red/black scheme.
   ================================================================ */

.button,
.quick-add__submit {
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.25s cubic-bezier(0.16,1,0.3,1),
              background-color 0.2s ease !important;
}

.button:not([disabled]):hover,
.quick-add__submit:not([disabled]):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(12,10,9,0.15) !important;
}

.button:not([disabled]):active,
.quick-add__submit:not([disabled]):active {
  transform: translateY(0px) !important;
  box-shadow: none !important;
}


/* ================================================================
   6. QUICK-ADD BUTTON — Styled properly for the brand
      Currently inherits generic "button--secondary" styling.
      This makes it clean, brand-consistent, not an afterthought.
   ================================================================ */

.quick-add .quick-add__submit {
  background-color: #1C1A19 !important;
  color: #FAF8F5 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  min-height: 42px !important;
  border: none !important;
}

.quick-add .quick-add__submit:hover {
  background-color: #C73543 !important;
}

/* "Choose Options" variant button — appears when product has multiple variants.
   Override the global pill radius and make it consistent with our quick-add style. */
.quick-add modal-opener .quick-add__submit,
.quick-add modal-opener .button {
  background-color: #1C1A19 !important;
  color: #FAF8F5 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  min-height: 42px !important;
  border: none !important;
}
.quick-add modal-opener .quick-add__submit:hover,
.quick-add modal-opener .button:hover {
  background-color: #C73543 !important;
}

body.luxury .quick-add modal-opener .quick-add__submit,
body.luxury .quick-add modal-opener .button {
  background-color: transparent !important;
  color: var(--gold-dark, #8B6914) !important;
  border: 1px solid rgba(219,177,92,0.5) !important;
  border-radius: 2px !important;
}
body.luxury .quick-add modal-opener .quick-add__submit:hover,
body.luxury .quick-add modal-opener .button:hover {
  background-color: #DBB15C !important;
  color: #fff !important;
  border-color: #DBB15C !important;
}


/* ================================================================
   7. HEADER — Sticky transition + standard mode colour fix
      The header snaps on scroll. This fades it in smoothly.
      Also adds a subtle red bottom accent to standard mode.
   ================================================================ */

.header-wrapper {
  transition: background-color 0.4s ease,
              box-shadow 0.4s ease !important;
}

/* Scrolled state — adds depth */
.scrolled-past-header .header-wrapper,
sticky-header[data-sticky-type] .header-wrapper {
  box-shadow: 0 1px 0 rgba(12,10,9,0.08),
              0 4px 16px rgba(12,10,9,0.06) !important;
}

/* Standard mode bottom accent line on header */
body:not(.luxury) .header-wrapper {
  border-bottom: 2px solid rgba(199,53,67,0.12) !important;
}

/* Luxury mode — gold bottom accent */
body.luxury .header-wrapper {
  border-bottom: 1px solid rgba(219,177,92,0.2) !important;
}

/* Nav link hover — red underline slide-in */
.header__inline-menu .list-menu__item--link {
  position: relative;
  overflow: hidden;
}
.header__inline-menu .list-menu__item--link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: #C73543;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.header__inline-menu .list-menu__item--link:hover::after {
  transform: translateX(0);
}

body.luxury .header__inline-menu .list-menu__item--link::after {
  background: #DBB15C;
}


/* ================================================================
   8. LUXURY MODE — Card aesthetic
      White cards with gold border and gold accents.
      Works with Dawn's existing color scheme, no variable overrides.
   ================================================================ */

body.luxury .card.card--card {
  border-color: rgba(219,177,92,0.3) !important;
  box-shadow: 0 2px 16px rgba(219,177,92,0.08) !important;
}

/* Gold bottom accent line on hover instead of red */
body.luxury .card.card--card::before {
  background: #DBB15C;
}

body.luxury .card__content {
  border-bottom-color: rgba(219,177,92,0.15) !important;
}

/* Product title — ink default, deep red hover (same as standard, luxury border provides the differentiation) */
body.luxury .card__information h3 a {
  color: #1C1A19 !important;
}
body.luxury .card__information h3 a:hover {
  color: #C73543 !important;
}

/* Price — plain ink, readable on white. Gold border + accent line signals luxury. */
body.luxury .price__regular .price-item--regular,
body.luxury .price__sale .price-item--sale,
body.luxury .price-item {
  color: #1C1A19 !important;
}

/* Luxury quick-add button — gold ghost */
body.luxury .quick-add .quick-add__submit {
  background-color: transparent !important;
  color: #8B6914 !important;
  border: 1px solid rgba(219,177,92,0.5) !important;
}
body.luxury .quick-add .quick-add__submit:hover {
  background-color: #DBB15C !important;
  color: #fff !important;
  border-color: #DBB15C !important;
}


/* ================================================================
   9. COLLECTION PAGE — Filter sidebar polish
      Text styling only (NO custom checkbox styling to avoid conflicts)
   ================================================================ */

.facets__heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1C1A19 !important;
  letter-spacing: 0 !important;
}

/* Layout only - no checkbox sizing */
.facets__item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
}

.facets__label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Text styling only */
.facet-checkbox__text {
  font-size: 13px !important;
  color: #6B6460 !important;
}

.facet-checkbox__text:hover {
  color: #1C1A19 !important;
}

.facet-checkbox__count {
  color: #9B9590 !important;
  font-size: 12px !important;
}

/* ================================================================
   THEME-AWARE LABEL COLORS ONLY (No checkbox styling!)
   ================================================================ */

/* REGULAR MODE - Red label color when checked */
body:not(.luxury) .facets input[type="checkbox"]:checked + label .facet-checkbox__text,
html:not(.luxury-mode) .facets input[type="checkbox"]:checked + label .facet-checkbox__text {
  color: #C73543 !important;
  font-weight: 500 !important;
}

/* LUXURY MODE - Gold label color when checked */
body.luxury .facets input[type="checkbox"]:checked + label .facet-checkbox__text,
html.luxury-mode .facets input[type="checkbox"]:checked + label .facet-checkbox__text {
  color: #DBB15C !important;
  font-weight: 500 !important;
}

/* Mobile spacing */
@media screen and (max-width: 749px) {
  .facets__item {
    padding: 10px 0 !important;
  }
}


/* ================================================================
   10. PRODUCT PAGE — Sticky info refinements


/* ================================================================
   10. PRODUCT PAGE — Sticky info refinements
       The product title color, description text weight, and 
       variant button polish. All targeting existing classes.
   ================================================================ */

/* Variant/size buttons — pill style */
.product-form__input--pill input[type="radio"] + label {
  border-radius: 2px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  min-width: 48px !important;
  text-align: center !important;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s !important;
  padding: 8px 16px !important;
}

.product-form__input--pill input[type="radio"]:checked + label {
  border-color: #C73543 !important;
  background: rgba(199,53,67,0.06) !important;
  color: #C73543 !important;
}

body.luxury .product-form__input--pill input[type="radio"]:checked + label {
  border-color: #DBB15C !important;
  background: rgba(219,177,92,0.08) !important;
  color: #8B6914 !important;
}

/* Product description text — currently grey #808080, too light */
.product__description,
.product__description p {
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: #5A5450 !important;
}

/* Page background — product page gets warm off-white */
body:not(.luxury) .main-product-section {
  background: #FDFAF6;
}


/* ================================================================
   11. MOBILE — Cart drawer and drawer menu polish
   ================================================================ */

/* Drawer menu — already has red/gold bg from inline styles, just add transitions */
.menu-drawer__menu {
  transition: background-color 0.4s ease !important;
}

.menu-drawer__menu .list-menu__item--link {
  transition: padding-left 0.2s ease, opacity 0.2s ease !important;
}
.menu-drawer__menu .list-menu__item--link:hover {
  padding-left: 8px !important;
}

/* Cart item name */
.cart-item__name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
}


/* ================================================================
   12. GLOBAL POLISH — Section spacing, focus states, scrollbar
   ================================================================ */

/* Scrollbar — subtle brand colour */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F2EDE6; }
::-webkit-scrollbar-thumb { background: #C73543; border-radius: 3px; }
body.luxury ::-webkit-scrollbar-thumb { background: #DBB15C; }

/* Focus rings — brand colour instead of default blue */
:focus-visible {
  outline: 2px solid #C73543 !important;
  outline-offset: 3px !important;
}
body.luxury :focus-visible {
  outline-color: #DBB15C !important;
}

/* Announcement bar text — if present, make it punchy */
.announcement-bar__message {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Sale badge — make it pop */
.badge--sale,
.badge[class*="sale"] {
  background: #C73543 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 3px 8px !important;
}

/* Pagination — consistent with brand */
.pagination__item--active .pagination__item-link,
.pagination__item--current {
  border-color: #C73543 !important;
  color: #C73543 !important;
}
body.luxury .pagination__item--active .pagination__item-link,
body.luxury .pagination__item--current {
  border-color: #DBB15C !important;
  color: #DBB15C !important;
}

/* Image render quality */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* Smooth transitions sitewide */
a, button { transition-duration: 0.2s; }


/* ================================================================
   13. CART DRAWER — Branded premium feel
       The drawer slides in with no personality. This adds a warm
       background, branded header, and item-level polish.
   ================================================================ */

/* Drawer background — warm off-white, not clinical white */
cart-drawer .drawer__inner,
cart-drawer .cart-drawer__form {
  background: #FDFAF6 !important;
}

/* Cart items wrapper — tighter horizontal padding */
cart-drawer .cart-drawer__form,
cart-drawer .drawer__cart-items-wrapper {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Drawer footer — checkout button area */
cart-drawer .drawer__footer {
  background: #fff !important;
  border-top: 1px solid #EDE8E2 !important;
  padding: 16px 20px !important;
}

/* Drawer header — clean, minimal, fits the white drawer */
cart-drawer .drawer__header {
  background: #FDFAF6 !important;
  border-bottom: 2px solid #C73543 !important;
  padding: 14px 20px !important;
  min-height: unset !important;
}

cart-drawer .drawer__heading {
  color: #1C1A19 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  letter-spacing: 0.3px !important;
}

/* Close button */
cart-drawer .drawer__close {
  color: rgba(12,10,9,0.35) !important;
  transition: color 0.2s !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
}
cart-drawer .drawer__close:hover {
  color: #C73543 !important;
}

/* Luxury mode — gold underline */
body.luxury cart-drawer .drawer__header {
  background: #FDFAF6 !important;
  border-bottom-color: #DBB15C !important;
}
body.luxury cart-drawer .drawer__heading {
  color: #1C1A19 !important;
}
body.luxury cart-drawer .drawer__close:hover {
  color: #DBB15C !important;
}

/* Cart item rows */
.cart-drawer .cart-item {
  border-bottom: 1px solid #EDE8E2 !important;
  padding: 18px 0 !important;
  transition: background 0.2s !important;
}
.cart-drawer .cart-item:hover {
  background: rgba(199,53,67,0.02) !important;
}

/* Cart item product name */
.cart-item__name,
.cart-item__name a {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1C1A19 !important;
  line-height: 1.35 !important;
}

/* Cart item price */
.cart-item .price-item {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1C1A19 !important;
}

/* Checkout button — make it unmissable */
cart-drawer .cart__checkout-button {
  background: #C73543 !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  transition: background 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
cart-drawer .cart__checkout-button:hover {
  background: #a8293a !important;
  transform: translateY(-1px) !important;
}

body.luxury cart-drawer .cart__checkout-button {
  background: transparent !important;
  border: 1px solid rgba(219,177,92,0.5) !important;
  color: #DBB15C !important;
}
body.luxury cart-drawer .cart__checkout-button:hover {
  background: rgba(219,177,92,0.08) !important;
  border-color: #DBB15C !important;
}

/* Hide the ugly PRODUCT / TOTAL column headers */
.cart-drawer .cart-items thead,
.cart-drawer .cart-items .visually-hidden-thead,
table.cart-items thead {
  display: none !important;
}

/* Quantity stepper — kill the pill shape, make it compact and sharp */
.cart-drawer .quantity {
  border-radius: 2px !important;
  border-color: #EDE8E2 !important;
  height: 36px !important;
  min-width: 90px !important;
}
.cart-drawer .quantity__button {
  border-radius: 2px !important;
  width: 32px !important;
  color: #1C1A19 !important;
}
.cart-drawer .quantity__input {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1C1A19 !important;
}

/* Remove button — subtler */
.cart-drawer .cart-item__remove .icon {
  color: #AEA8A2 !important;
  transition: color 0.2s !important;
}
.cart-drawer .cart-item__remove:hover .icon {
  color: #C73543 !important;
}

/* Variant text (Size, Intensity etc.) */
.cart-drawer .product-option {
  font-size: 12px !important;
  color: #AEA8A2 !important;
  font-weight: 300 !important;
}

/* Item price — right aligned, prominent */
.cart-drawer .cart-item__totals .price-item {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1C1A19 !important;
}

/* Totals row — estimated total */
.cart-drawer .totals {
  padding: 16px 0 !important;
  border-top: 1px solid #EDE8E2 !important;
}
.cart-drawer .totals__subtotal {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1C1A19 !important;
}
.cart-drawer .totals__subtotal-value {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1C1A19 !important;
}

/* Shipping note */
.cart-drawer .cart__ctas small,
.cart-drawer .cart__ctas p,
.cart-drawer [class*="shipping"] {
  font-size: 12px !important;
  color: #AEA8A2 !important;
  line-height: 1.6 !important;
}

/* Checkout button — sharp corners, no pill */
cart-drawer .cart__checkout-button {
  border-radius: 2px !important;
}

/* Luxury mode quantity stepper */
body.luxury .cart-drawer .quantity {
  border-color: rgba(219,177,92,0.25) !important;
}
body.luxury .cart-drawer .quantity__button,
body.luxury .cart-drawer .quantity__input {
  color: #1C1A19 !important;
}


/* ================================================================
   14. CART NOTIFICATION (Add-to-cart popup) — Premium feedback
       The "Item added" popup is completely unstyled. This gives it
       a branded treatment that reinforces trust at the exact moment
       a customer commits to buying.
   ================================================================ */

.cart-notification {
  background: #1A1714 !important;
  border: 1px solid rgba(219,177,92,0.15) !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(12,10,9,0.25), 0 4px 16px rgba(12,10,9,0.15) !important;
}

.cart-notification__heading {
  color: #FAF8F5 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}

/* Checkmark icon — brand red */
.cart-notification__heading .icon-checkmark path,
.cart-notification__heading .icon-checkmark polyline {
  stroke: #50C878 !important;
}

.cart-notification-product__name {
  color: rgba(250,248,245,0.85) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 13px !important;
}

/* View cart / checkout links in notification */
.cart-notification__links .button {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}


/* ================================================================
   15. PREDICTIVE SEARCH — Makes search feel premium
       The search dropdown is a raw white box. This transforms it
       into a branded experience — the moment a customer searches
       is a high-intent moment, it should feel special.
   ================================================================ */

.predictive-search {
  background: #1A1714 !important;
  border: 1px solid rgba(219,177,92,0.12) !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 20px 50px rgba(12,10,9,0.3) !important;
}

.predictive-search__heading {
  color: var(--gold, #DBB15C) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(219,177,92,0.1) !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
}

.predictive-search__item {
  border-radius: 2px !important;
  transition: background 0.15s !important;
}
.predictive-search__item[aria-selected='true'],
.predictive-search__item:hover {
  background: rgba(219,177,92,0.06) !important;
}

.predictive-search__item-heading,
.predictive-search__item .price-item {
  color: #FAF8F5 !important;
}

.predictive-search__item-vendor {
  color: rgba(250,248,245,0.4) !important;
}

/* Search input itself — when focused */
.search__input:focus,
.field__input:focus {
  border-color: rgba(199,53,67,0.4) !important;
  box-shadow: 0 0 0 2px rgba(199,53,67,0.08) !important;
}
body.luxury .search__input:focus,
body.luxury .field__input:focus {
  border-color: rgba(219,177,92,0.4) !important;
  box-shadow: 0 0 0 2px rgba(219,177,92,0.08) !important;
}


/* ================================================================
   16. PAGE LOAD ENTRANCE — Staggered card reveals
       Dawn's scroll animations are already on, but they all fire
       at the same speed. This staggers product cards so they cascade
       in sequence — far more cinematic than simultaneous reveal.
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Stagger product cards in grid */
  .product-grid .grid__item:nth-child(1)  { animation-delay: 0.05s !important; }
  .product-grid .grid__item:nth-child(2)  { animation-delay: 0.10s !important; }
  .product-grid .grid__item:nth-child(3)  { animation-delay: 0.15s !important; }
  .product-grid .grid__item:nth-child(4)  { animation-delay: 0.20s !important; }
  .product-grid .grid__item:nth-child(5)  { animation-delay: 0.25s !important; }
  .product-grid .grid__item:nth-child(6)  { animation-delay: 0.30s !important; }
  .product-grid .grid__item:nth-child(7)  { animation-delay: 0.10s !important; }
  .product-grid .grid__item:nth-child(8)  { animation-delay: 0.15s !important; }

  /* Smoother slide-in — Dawn's default is a bit abrupt */
  .scroll-trigger.animate--slide-in {
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
  }
  .scroll-trigger.animate--fade-in {
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1) !important;
  }
}


/* ================================================================
   17. SECTION DIVIDERS — Remove the blank spacing between sections
       Dawn uses padding for section spacing but leaves everything
       flat. A subtle warm divider between sections creates rhythm.
   ================================================================ */

body:not(.luxury) .shopify-section + .shopify-section > * {
  border-top: 1px solid rgba(12,10,9,0.05);
}

body.luxury .shopify-section + .shopify-section > * {
  border-top: 1px solid rgba(219,177,92,0.06);
}


/* ================================================================
   18. IMAGE BANNER TEXT OVERLAY — Add gradient for readability
       Any image banner with text on top has no overlay gradient,
       so text often disappears into bright backgrounds. This adds
       a contextual gradient that makes text always readable.
   ================================================================ */

.banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(12,10,9,0.35) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.banner__box {
  position: relative;
  z-index: 2;
}


/* ================================================================
   19. MOBILE BOTTOM BAR — Sticky add-to-cart on product pages
       On mobile, the ATC button scrolls off screen. This pins it
       to the bottom on small screens — the single highest-impact
       mobile CRO change possible with pure CSS.
   ================================================================ */

@media screen and (max-width: 749px) {
  /* Sticky product form bottom bar */
  .product__info-container .product-form__buttons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: #fff !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -4px 20px rgba(12,10,9,0.1) !important;
    border-top: 1px solid #EDE8E2 !important;
    /* Slide up on load */
    animation: slide-up-bar 0.4s 0.3s cubic-bezier(0.16,1,0.3,1) both;
  }

  @keyframes slide-up-bar {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Give the product info bottom padding so content isn't hidden behind bar */
  .product__info-wrapper {
    padding-bottom: 90px !important;
  }

  body.luxury .product__info-container .product-form__buttons {
    background: #1A1714 !important;
    border-top-color: rgba(219,177,92,0.15) !important;
  }
}


/* ================================================================
   20. LUXURY MODE — Ambient background texture
       A very subtle noise grain on the luxury page background.
       CSS-only. Makes the dark background feel like velvet
       rather than a flat div.
   ================================================================ */

body.luxury {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E") !important;
  background-attachment: fixed !important;
}


/* ================================================================
   21. SLIDESHOW ENHANCEMENTS
       - Hide pause button
       - Style nav controls for Normal & Luxury modes  
       - Make entire banner clickable
       - Smooth scrolling for anchor links
   ================================================================ */

/* --- Hide pause button --- */
.slideshow__autoplay {
  display: none !important;
}

/* --- Style nav controls (Normal Mode - Red) --- */

/* Position controls on banner */
.slideshow__controls {
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  border-top: 2px solid rgba(199, 53, 67, 0.3) !important;
}

/* Hide slideshow controls when mobile menu is open */
body:has(menu-drawer[open]) .slideshow__controls,
body:has(.menu-drawer[open]) .slideshow__controls,
body:has([aria-hidden="false"].menu-drawer) .slideshow__controls,
.menu-drawer--open ~ * .slideshow__controls,
.js-menu-open .slideshow__controls,
body[class*="menu"] .slideshow__controls,
body[class*="drawer"] .slideshow__controls,
body.overflow-hidden .slideshow__controls,
#MainContent:has(~ menu-drawer[open]) .slideshow__controls,
.shopify-section:has(~ menu-drawer[open]) .slideshow__controls {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Alternative: Lower z-index when menu is potentially open */
menu-drawer[open] ~ * .slideshow__controls,
menu-drawer:not([aria-hidden="true"]) ~ * .slideshow__controls,
.header-wrapper:has(~ menu-drawer[open]) + * .slideshow__controls,
.header-wrapper:has(~ .menu-drawer[open]) + * .slideshow__controls {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Force hide with very high specificity */
html body:has(.menu-drawer[open]) .slideshow__controls,
html body:has(menu-drawer[open]) .slideshow__controls {
  display: none !important;
}

/* Also hide when any drawer/modal is open */
.drawer--open .slideshow__controls,
cart-drawer[aria-hidden="false"] ~ * .slideshow__controls,
.search-modal[aria-hidden="false"] ~ * .slideshow__controls {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Arrow buttons */
.slideshow__controls .slider-button {
  background: transparent !important;
  border: none !important;
  color: #1C1A19 !important;
  width: 36px !important;
  height: 36px !important;
  transition: all 0.3s ease !important;
  border-radius: 50% !important;
}

.slideshow__controls .slider-button:hover {
  color: #C73543 !important;
  background: rgba(199, 53, 67, 0.1) !important;
  transform: scale(1.1) !important;
}

.slideshow__controls .slider-button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Pagination dots */
.slideshow__controls .slider-counter__link .dot {
  width: 10px !important;
  height: 10px !important;
  background: rgba(28, 26, 25, 0.3) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.slideshow__controls .slider-counter__link:hover .dot {
  background: rgba(199, 53, 67, 0.5) !important;
}

.slideshow__controls .slider-counter__link--active .dot,
.slideshow__controls .slider-counter__link[aria-current="true"] .dot {
  background: #C73543 !important;
  transform: scale(1.2) !important;
}

.slideshow__control-wrapper {
  gap: 12px !important;
}

/* --- Luxury Mode (Gold) --- */

body.luxury .slideshow__controls {
  background: rgba(26, 23, 20, 0.9) !important;
  box-shadow: 0 4px 20px rgba(219, 177, 92, 0.25) !important;
  border-top: 2px solid rgba(219, 177, 92, 0.4) !important;
}

body.luxury .slideshow__controls .slider-button {
  color: #FAF8F5 !important;
}

body.luxury .slideshow__controls .slider-button:hover {
  color: #DBB15C !important;
  background: rgba(219, 177, 92, 0.15) !important;
}

body.luxury .slideshow__controls .slider-counter__link .dot {
  background: rgba(250, 248, 245, 0.35) !important;
}

body.luxury .slideshow__controls .slider-counter__link:hover .dot {
  background: rgba(219, 177, 92, 0.6) !important;
}

body.luxury .slideshow__controls .slider-counter__link--active .dot,
body.luxury .slideshow__controls .slider-counter__link[aria-current="true"] .dot {
  background: #DBB15C !important;
}

/* --- Make banner clickable --- */

/* Set cursor on slide */
.slideshow__slide {
  cursor: pointer !important;
}

/* Extend button to cover entire slide */
.slideshow__slide .banner__content a.button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  z-index: 5 !important;
  cursor: pointer !important;
}

/* Keep text above invisible button */
.slideshow__text {
  position: relative !important;
  z-index: 6 !important;
}

/* Keep controls clickable above banner */
.slideshow__controls {
  z-index: 20 !important;
}

/* --- Smooth scrolling for anchor links --- */

html {
  scroll-behavior: smooth;
}

/* Offset for sticky header */
:target {
  scroll-margin-top: 150px;
}

/* --- Mobile --- */

@media screen and (max-width: 749px) {
  .slideshow__controls {
    bottom: 20px !important;
    padding: 8px 16px !important;
  }
  
  .slideshow__controls .slider-button {
    width: 32px !important;
    height: 32px !important;
  }
  
  .slideshow__controls .slider-counter__link .dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  :target {
    scroll-margin-top: 120px;
  }
}


/* ================================================================
   22. SEO & ACCESSIBILITY ENHANCEMENTS (Zero Visual Impact)
       - Screen reader helper classes
       - Better focus states
       - Reduced motion support
       - Print styles
       - Schema markup helpers
   ================================================================ */

/* --- 1. Screen Reader Helper Classes --- */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip to content link - only visible on focus */
.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: #C73543 !important;
  color: white !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  z-index: 9999 !important;
  font-weight: 500 !important;
  border-radius: 0 0 4px 0 !important;
}

.skip-link:focus {
  top: 0 !important;
}

body.luxury .skip-link {
  background: #DBB15C !important;
  color: #1A1714 !important;
}

/* --- 2. Better Focus States (Subtle) --- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #C73543 !important;
  outline-offset: 2px !important;
}

body.luxury a:focus-visible,
body.luxury button:focus-visible,
body.luxury input:focus-visible,
body.luxury select:focus-visible,
body.luxury textarea:focus-visible,
body.luxury [tabindex]:focus-visible {
  outline-color: #DBB15C !important;
}

/* --- 3. Reduced Motion Support --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .slideshow__slide,
  .card-wrapper .card,
  .media.media--hover-effect > img {
    transition: none !important;
    transform: none !important;
  }
  
  .scroll-trigger.animate--slide-in,
  .scroll-trigger.animate--fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- 4. Print Styles --- */

@media print {
  /* Hide interactive elements */
  .slideshow__controls,
  .header-wrapper,
  .cart-drawer,
  .announcement-bar,
  .shopify-section-header-group,
  .shopify-section-footer-group,
  .predictive-search,
  .cart-notification,
  .menu-drawer,
  .product-form__buttons,
  .quick-add,
  .product__modal-opener {
    display: none !important;
  }
  
  /* Ensure content is visible */
  main#MainContent {
    margin-top: 0 !important;
  }
  
  /* Clean product display */
  .product__title {
    font-size: 24pt !important;
    color: #000 !important;
    margin-bottom: 12pt !important;
  }
  
  .product__description {
    font-size: 12pt !important;
    line-height: 1.6 !important;
    color: #333 !important;
  }
  
  .price-item {
    font-size: 18pt !important;
    color: #000 !important;
  }
  
  /* Show URLs after links */
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " (" attr(href) ")" !important;
    font-size: 9pt !important;
    color: #666 !important;
    font-weight: normal !important;
  }
  
  /* Ensure images print */
  img {
    max-width: 100% !important;
    page-break-inside: avoid !important;
  }
  
  /* Clean cards */
  .card {
    border: 1pt solid #ddd !important;
    break-inside: avoid !important;
  }
}

/* --- 5. Schema Markup Helpers (Invisible) --- */

/* JSON-LD visibility - keep hidden but accessible */
script[type="application/ld+json"] {
  display: none;
}

/* Structured data attributes - no visual change */
[data-schema="Product"],
[data-schema="LocalBusiness"],
[data-schema="BreadcrumbList"] {
  /* Attributes only, no styling needed */
}

/* Product availability indicators for AI parsing */
.product__inventory {
  position: relative;
}

/* Visually hidden product meta for SEO */
.product-meta-seo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* High contrast mode support (Windows) */
@media (prefers-contrast: high) {
  .button,
  .slider-button,
  .quantity__button {
    border: 2px solid currentColor !important;
  }
  
  .card.card--card {
    border: 2px solid #000 !important;
  }
}

/* Focus visible polyfill support */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}


/* ================================================================
   23. MOBILE HEADER/BANNER SPACING FIX
       Remove awkward white space between header and slideshow
   ================================================================ */

@media screen and (max-width: 749px) {
  /* Remove top padding from slideshow section */
  .shopify-section slideshow-component,
  .shopify-section .slideshow,
  .shopify-section .slideshow.banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove spacing from section wrapper */
  .shopify-section:has(slideshow-component) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove margin from banner itself */
  .slideshow.banner {
    margin-top: 0 !important;
  }
  
  /* Remove padding from banner media container */
  .slideshow__media,
  .banner__media {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* If there's a specific spacing section setting */
  .spacing-sections-mobile,
  .shopify-section + .shopify-section {
    margin-top: 0 !important;
  }
  
  /* Remove any spacer elements */
  .shopify-section .spacer,
  .shopify-section .section-spacer {
    display: none !important;
  }
}


/* ================================================================
   24. BANNER CLICKABLE - FIXED VERSION
       Makes entire banner clickable - opacity:0 blocks clicks!
   ================================================================ */

/* HIDE banner text content */
.slideshow__heading,
.banner__heading,
.slideshow__subheading,
.banner__text {
  display: none !important;
}

/* HIDE the white box background */
.slideshow__text,
.banner__box,
.content-container {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* MAKE BUTTON NEARLY INVISIBLE BUT CLICKABLE 
   (opacity:0 blocks clicks, use 0.01 instead) */
.banner__buttons {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5 !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* The actual button - nearly invisible but clickable */
.banner__content .button,
.banner__buttons .button {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.01 !important; /* Nearly invisible but clickable */
  z-index: 5 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  pointer-events: auto !important; /* Ensure clicks work */
}

/* Ensure text container doesn't block clicks */
.slideshow__text,
.banner__box {
  position: relative !important;
  z-index: 6 !important;
  pointer-events: none !important; /* Let clicks pass through to button */
}

/* Re-enable clicks on the button itself */
.banner__buttons,
.banner__buttons .button {
  pointer-events: auto !important;
}

/* Keep controls clickable above everything */
.slideshow__controls {
  z-index: 20 !important;
}

/* Already included in section CSS, but can be overridden here if needed */
.floating-discount-btn {
  z-index: 999;
}

/* Ensure button stays below cart drawer (z-index: 1000+ typically) */
.drawer {
  z-index: 1000;
}