/** Shopify CDN: Minification failed

Line 2502:1 Expected "}" to go with "{"

**/
/* ══════════════════════════════════════════════════════════════
   MIROS LUXURY PERFUME — Global Theme Override for Shopify Dawn
   Paste this file into Assets/miros-theme.css
   Then add to layout/theme.liquid before </head>:
   {{ 'miros-theme.css' | asset_url | stylesheet_tag }}
══════════════════════════════════════════════════════════════ */
/* GLOBAL FULL WIDTH SITE */

.page-width{
  max-width: 1600px !important;
  width: 96% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --miros-bg:           #110f0c;
  --miros-bg-raised:    #1a1612;
  --miros-bg-card:      #1e1a15;
  --miros-gold:         #c9a84c;
  --miros-gold-bright:  #e8c96a;
  --miros-gold-light:   #e8d5a3;
  --miros-gold-dim:     rgba(201,168,76,0.35);
  --miros-gold-faint:   rgba(201,168,76,0.15);
  --miros-text:         #faf7f2;
  --miros-text-body:    #ddd4c2;
  --miros-text-muted:   #cfc4b0;
  --miros-text-dim:     #8a7e72;
  --miros-border:       rgba(201,168,76,0.2);
  --miros-serif:        'Cormorant Garamond', Georgia, serif;
  --miros-sans:         'Jost', 'Helvetica Neue', sans-serif;
}

/* ─────────────────────────────────────────────
   2. GLOBAL BASE
───────────────────────────────────────────── */
body {
  background-color: var(--miros-bg) !important;
  color: var(--miros-text-body) !important;
  font-family: var(--miros-sans) !important;
}

/* Selection colour */
::selection { background: rgba(201,168,76,0.3); color: #faf7f2; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--miros-bg); }
::-webkit-scrollbar-thumb { background: var(--miros-gold-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--miros-gold); }

/* ─────────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--miros-serif) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
  line-height: 1.1 !important;
}

p, li, span, div {
  font-family: var(--miros-sans);
}

a { color: var(--miros-gold); transition: color 0.25s; }
a:hover { color: var(--miros-gold-bright); }

/* Caption / label utility classes Dawn uses */
.caption-with-letter-spacing,
.caption-large,
.caption {
  font-family: var(--miros-sans) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-text-muted) !important;
}

/* Subtitle / eyebrow utility */
.subtitle {
  font-family: var(--miros-sans) !important;
  color: var(--miros-gold) !important;
  letter-spacing: 3px !important;
  font-weight: 300 !important;
}

/* Rich text content */
.rte p, .rte li {
  font-family: var(--miros-serif) !important;
  font-size: 17px !important;
  color: var(--miros-text-muted) !important;
  line-height: 1.9 !important;
}
.rte h2, .rte h3 {
  color: var(--miros-text) !important;
  margin-top: 32px !important;
}
.rte a { color: var(--miros-gold) !important; }
.rte strong { color: var(--miros-text) !important; font-weight: 400 !important; }

/* ─────────────────────────────────────────────
   4. COLOUR SCHEMES  (Dawn uses color-scheme-1 etc.)
───────────────────────────────────────────── */
/* ── Page background ── */
html,
body,
#MainContent,
main#MainContent,
.main-content,
.content-for-layout,
#shopify-section-collection-banner,
.collection,
.collection-hero,
.product-grid-container,
.collection-product-grid,
.page-width,
[id*="shopify-section"],
.shopify-section,
.section-collection-main,
.section-main-collection,
.section-main-product,
.section-template {
  background-color: #110f0c !important;
}

/* Override Dawn's white/light color schemes on page-level containers */
.color-background-1:not(.card__inner):not(.card__media):not(.media),
.color-background-2:not(.card__inner):not(.card__media):not(.media),
.color-scheme-1:not(.card__inner):not(.card__media):not(.media),
.color-scheme-2:not(.card__inner):not(.card__media):not(.media),
.gradient:not(.card__inner):not(.card__media):not(.media) {
  background-color: #110f0c !important;
}

/* Dawn color scheme CSS variables — override the variables themselves
   so Dawn's own rules render dark without us touching component structure */
/* Override Dawn's CSS variable triplets (RGB format: R, G, B) */
:root {
  --color-background: 17, 15, 12;
  --color-foreground: 240, 235, 224;
  --color-border: 201, 168, 76;
  --color-button: 201, 168, 76;
  --color-button-text: 17, 15, 12;
  --color-badge-foreground: 17, 15, 12;
  --color-badge-background: 201, 168, 76;
  --color-card-background: 26, 22, 18;
}
.color-scheme-1 { --color-background: 17, 15, 12; --color-foreground: 240, 235, 224; }
.color-scheme-2 { --color-background: 26, 22, 18; --color-foreground: 240, 235, 224; }
.color-scheme-3 { --color-background: 30, 26, 21; --color-foreground: 240, 235, 224; }

/* ── CARD IMAGE FIX ──
   Dawn's card structure:
     .card__inner (position:relative, ::before for aspect ratio)
       └── .card__media (position:absolute, top/right/bottom/left:0)
             └── .media (position:absolute, top/left/right/bottom:0)
                   └── img (width:100%, height:100%, object-fit:cover)
   We must NOT set background-color on any of these — it covers the img.
   Only safe to set on .card__information (below the image). */
.card__inner {
  background-color: transparent !important;
}
.card__media {
  background-color: transparent !important;
}
.card__media .media,
.card .media {
  background-color: transparent !important;
}

/* ─────────────────────────────────────────────
   5. HEADER / NAVIGATION
───────────────────────────────────────────── */
.header-wrapper,
.header {
  background-color: rgba(17,15,12,0.98) !important;
  border-bottom: 1px solid rgba(201,168,76,0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
/* Prevent any Dawn color scheme from overriding header bg */
.header-wrapper .color-scheme-1,
.header-wrapper .color-scheme-2,
.header-wrapper .gradient {
  background-color: transparent !important;
}

/* Logo */
.header__heading-link,
.header__heading,
.header__heading-link span {
  font-family: var(--miros-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  color: var(--miros-text) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
.header__heading-logo { filter: brightness(1.1); }

/* Nav links */
.header__menu-item,
.header__menu-item a,
.list-menu__item,
.list-menu__item a {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
  color: var(--miros-text-muted) !important;
  transition: color 0.25s !important;
  background: transparent !important;
  border: none !important;
  padding: 0 16px !important;
}
.header__menu-item:hover,
.header__menu-item a:hover,
.list-menu__item:hover,
.list-menu__item a:hover {
  color: var(--miros-gold) !important;
  background: transparent !important;
}
.header__menu-item--active > a,
.header__menu-item--active > .header__menu-item {
  color: var(--miros-gold) !important;
  border-bottom: 1px solid rgba(201,168,76,0.5) !important;
  padding-bottom: 2px !important;
}

/* Dropdown menus — only style actual dropdown panels, NOT the inline nav ul */
.header__submenu .list-menu,
.disclosure__panel {
  background: #1a1612 !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  padding: 8px 0 !important;
}

/* Header icons (search, cart, account) */
.header__icon,
.header__icon svg {
  color: var(--miros-text-muted) !important;
  stroke: var(--miros-text-muted) !important;
}
.header__icon:hover svg { stroke: var(--miros-gold) !important; }

/* Cart count bubble */
.cart-count-bubble {
  background: var(--miros-gold) !important;
  color: #110f0c !important;
}

/* Mobile hamburger */
.header__icon--menu svg { stroke: var(--miros-text-muted) !important; }

/* Mobile menu drawer */
/* Mobile Menu */
.menu-drawer__navigation a {
    font-family: var(--miros-sans) !important;
    font-size: 22px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    color: var(--miros-text-muted) !important;
    padding: 14px 0 !important;
    transition: all .3s ease;
}

.menu-drawer__navigation a:hover {
    color: var(--miros-gold) !important;
    padding-left: 8px;
}
/* ─────────────────────────────────────────────
   6. ANNOUNCEMENT BAR
───────────────────────────────────────────── */
.announcement-bar {
  background: #1a1612 !important;
  border-bottom: 1px solid rgba(201,168,76,0.3) !important;
  padding: 8px 0 !important;
  color: var(--miros-gold) !important;
}
.announcement-bar__message,
.announcement-bar__message a {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
  font-weight: 300 !important;
  text-decoration: none !important;
}

/* ─────────────────────────────────────────────
   7. BUTTONS  (global)
───────────────────────────────────────────── */
.button,
.btn,
button.shopify-payment-button__button {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
  border-radius: 0 !important;
  transition: all 0.35s !important;
}

/* Primary button — gold outline sweep */
.button--primary,
.button[type="submit"]:not(.product-form__submit),
.btn--primary {
  background: transparent !important;
  color: var(--miros-gold) !important;
  border: 1px solid var(--miros-gold) !important;
  padding: 16px 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.button--primary::before,
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--miros-gold);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.button--primary:hover { color: #110f0c !important; }
.button--primary:hover::before { transform: translateX(0); }
.button--primary > * { position: relative; z-index: 1; }

/* Secondary button */
.button--secondary,
.btn--secondary {
  background: transparent !important;
  color: var(--miros-text-muted) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  padding: 14px 32px !important;
}
.button--secondary:hover {
  border-color: var(--miros-gold) !important;
  color: var(--miros-gold) !important;
}

/* Tertiary / link style button */
.button--tertiary,
.link {
  color: var(--miros-gold) !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
}
.button--tertiary:hover, .link:hover {
  color: var(--miros-gold-bright) !important;
}

/* ─────────────────────────────────────────────
   8. FORM INPUTS
───────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.field__input,
.select__select {
  background: var(--miros-bg-card) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  border-radius: 0 !important;
  color: var(--miros-text) !important;
  font-family: var(--miros-sans) !important;
  font-size: 13px !important;
  padding: 14px 16px !important;
  transition: border-color 0.25s !important;
  -webkit-appearance: none !important;
}
input:focus,
textarea:focus,
select:focus,
.field__input:focus,
.select__select:focus {
  border-color: var(--miros-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.25) !important;
}
input::placeholder,
textarea::placeholder { color: var(--miros-text-dim) !important; opacity: 1 !important; }

/* Form labels */
.field__label,
label,
.form__label {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
  font-weight: 300 !important;
}

/* ─────────────────────────────────────────────
   9. PRODUCT CARDS  (collection grids, search, related)
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   PRODUCT CARD THEMING
   Rule: ONLY style border, background of outer containers.
   NEVER touch: position, width, height, top, left, display,
   overflow, z-index on .media, .card__media, img, or deferred-media.
   Dawn absolutely positions card images — any of those break display.
───────────────────────────────────────────────────────────── */
.card-wrapper {
  border: 1px solid var(--miros-border) !important;
  border-radius: 0 !important;
  transition: border-color 0.3s !important;
}
.card-wrapper:hover {
  border-color: var(--miros-gold) !important;
}

/* Only colour the text info area below the image */
.card__information {
  background-color: var(--miros-bg-raised) !important;
  padding: 20px 20px 24px !important;
}

/* Placeholder bg when no image */
.card-wrapper .placeholder-svg {
  fill: #2a2218 !important;
}




/* Card heading */
.card__heading,
.card__heading a,
.card__heading h2,
.card__heading h3 {
  font-family: var(--miros-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
  line-height: 1.2 !important;
  transition: color 0.25s !important;
}
.card__heading a:hover { color: var(--miros-gold-light) !important; }

/* Card vendor */
.card__vendor,
.visually-hidden + .caption-with-letter-spacing {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
  font-weight: 300 !important;
  margin-bottom: 8px !important;
}

/* Card price */
.price .price-item {
  font-family: var(--miros-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--miros-gold-light) !important;
}
.price .price-item--regular { color: var(--miros-gold-light) !important; }
.price .price-item--sale { color: var(--miros-gold-bright) !important; }
.price s, .price .price-item--regular + .price-item { color: var(--miros-text-dim) !important; font-size: 15px !important; }

/* Sale badge */
.badge,
.price__badge-sale,
.badge--sale {
  background: var(--miros-gold) !important;
  color: #110f0c !important;
  font-family: var(--miros-sans) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
}
.badge--sold-out {
  background: #3a3530 !important;
  color: var(--miros-text-dim) !important;
}

/* Quick add button */
.quick-add__submit,
.card__link {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  border-radius: 0 !important;
  transition: all 0.3s !important;
}
.quick-add__submit:hover {
  background: var(--miros-gold) !important;
  color: #110f0c !important;
}

/* Rating stars on cards */
.rating-star { --color-icon: var(--miros-gold) !important; }
.rating-text, .rating-count {
  font-family: var(--miros-sans) !important;
  color: var(--miros-text-muted) !important;
  font-size: 11px !important;
}

/* ─────────────────────────────────────────────
   10. COLLECTION PAGE
───────────────────────────────────────────── */
/* Hero banner */
.collection-hero,
.section-collection-hero {
  background: var(--miros-bg) !important;
}
.collection-hero__title {
  font-family: var(--miros-serif) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}
.collection-hero__description {
  font-family: var(--miros-serif) !important;
  font-size: 18px !important;
  color: var(--miros-text-muted) !important;
  line-height: 1.85 !important;
}

/* Filter / sort bar */
.facets-wrapper,
.collection-filters-drawer,
.facets__header {
  background: var(--miros-bg-raised) !important;
  border-bottom: 1px solid var(--miros-border) !important;
}
.facets__summary,
.mobile-facets__summary {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--miros-gold-dim) !important;
  border-radius: 0 !important;
  padding: 10px 20px !important;
}
.facets__summary:hover {
  border-color: var(--miros-gold) !important;
  color: var(--miros-gold) !important;
}

/* Filter panel */
.facets__form,
.mobile-facets__main {
  background: var(--miros-bg-raised) !important;
  border: 1px solid var(--miros-border) !important;
}
.facets__heading,
.mobile-facets__header {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
}

/* Filter checkboxes */
.facets__label,
.mobile-facets__label {
  font-family: var(--miros-sans) !important;
  font-size: 12px !important;
  color: var(--miros-text-muted) !important;
  letter-spacing: 1px !important;
}
.facets__label:hover { color: var(--miros-gold) !important; }

/* Custom checkbox styling */
.facets__checkbox,
.mobile-facets__checkbox {
  border: 1px solid var(--miros-gold-dim) !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: 16px !important;
  height: 16px !important;
}
.facets__checkbox:checked,
.mobile-facets__checkbox:checked {
  background: var(--miros-gold) !important;
  border-color: var(--miros-gold) !important;
}

/* Active filter pills */
.active-facets__button,
.facets-remove {
  background: rgba(201,168,76,0.12) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  color: var(--miros-gold) !important;
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
}
.active-facets__button:hover {
  background: rgba(201,168,76,0.2) !important;
}

/* Sort by dropdown */
.facet-filters__sort .select__select {
  background: var(--miros-bg-card) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  color: var(--miros-text-muted) !important;
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  border-radius: 0 !important;
}

/* Product count */
.product-count,
.facets__count {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: var(--miros-text-dim) !important;
}

/* ─────────────────────────────────────────────
   11. CART DRAWER
───────────────────────────────────────────── */
cart-drawer,
#CartDrawer,
.cart-drawer {
  background: #1a1612 !important;
  border-left: 1px solid var(--miros-border) !important;
}

.cart-drawer__header {
  background: #1a1612 !important;
  border-bottom: 1px solid var(--miros-border) !important;
}
.cart-drawer__heading {
  font-family: var(--miros-serif) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
  letter-spacing: 1px !important;
}

/* Cart items */
.cart-item {
  border-bottom: 1px solid var(--miros-border) !important;
  padding: 20px 0 !important;
}
.cart-item__name,
.cart-item__name a {
  font-family: var(--miros-serif) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}
.cart-item__name a:hover { color: var(--miros-gold-light) !important; }
.cart-item__vendor {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--miros-gold) !important;
}
.cart-item__price-wrapper .price-item {
  font-family: var(--miros-serif) !important;
  font-size: 20px !important;
  color: var(--miros-gold-light) !important;
  font-weight: 300 !important;
}

/* Quantity input in cart */
.cart-item .quantity {
  background: var(--miros-bg-card) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  border-radius: 0 !important;
}
.cart-item .quantity__button svg { stroke: var(--miros-gold) !important; }
.cart-item .quantity__input {
  background: transparent !important;
  color: var(--miros-text) !important;
  font-family: var(--miros-sans) !important;
}

/* Remove button */
.cart-item__delete svg { stroke: var(--miros-text-dim) !important; }
.cart-item__delete:hover svg { stroke: var(--miros-gold) !important; }

/* Cart subtotal */
.cart-drawer__footer {
  background: var(--miros-bg) !important;
  border-top: 1px solid var(--miros-border) !important;
}
.cart-drawer__subtotal,
.totals__subtotal {
  font-family: var(--miros-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}
.totals__subtotal-value {
  font-family: var(--miros-serif) !important;
  font-size: 26px !important;
  color: var(--miros-gold-light) !important;
}
.cart-drawer__footer .caption {
  font-family: var(--miros-sans) !important;
  color: var(--miros-text-dim) !important;
  font-size: 11px !important;
}

/* Checkout button in cart */
.cart__checkout-button,
#CartDrawer-Checkout {
  background: transparent !important;
  color: var(--miros-gold) !important;
  border: 1px solid var(--miros-gold) !important;
  border-radius: 0 !important;
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: color 0.4s !important;
  width: 100% !important;
}
.cart__checkout-button::before,
#CartDrawer-Checkout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--miros-gold);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.cart__checkout-button:hover,
#CartDrawer-Checkout:hover { color: #110f0c !important; }
.cart__checkout-button:hover::before,
#CartDrawer-Checkout:hover::before { transform: translateX(0); }
.cart__checkout-button span,
#CartDrawer-Checkout span { position: relative; z-index: 1; }

/* Empty cart */
.cart__empty-text {
  font-family: var(--miros-serif) !important;
  font-size: 20px !important;
  font-style: italic !important;
  color: var(--miros-text-muted) !important;
}

/* ─────────────────────────────────────────────
   12. CART PAGE
───────────────────────────────────────────── */
.cart__title {
  font-family: var(--miros-serif) !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}

.cart__table-head th {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
  border-bottom: 1px solid var(--miros-border) !important;
  background: transparent !important;
  padding: 12px 0 !important;
}

.cart-item__totals .price {
  font-family: var(--miros-serif) !important;
  font-size: 22px !important;
  color: var(--miros-gold-light) !important;
}

.cart__ctas {
  border-top: 1px solid var(--miros-border) !important;
  padding-top: 32px !important;
}

.cart__dynamic-checkout-buttons .shopify-payment-button__button {
  border-radius: 0 !important;
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
}

/* Order note */
.cart__note .form__label { color: var(--miros-gold) !important; }

/* ─────────────────────────────────────────────
   13. SEARCH
───────────────────────────────────────────── */
predictive-search,
.search-modal,
.search-modal__content {
  background: #1a1612 !important;
  border: 1px solid var(--miros-border) !important;
}

.search-modal__form .field__input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--miros-border) !important;
  font-family: var(--miros-serif) !important;
  font-size: 22px !important;
  color: var(--miros-text) !important;
  padding: 16px 0 !important;
}
.search-modal__form .field__input:focus {
  border-bottom-color: var(--miros-gold) !important;
  box-shadow: none !important;
}

/* Search results */
.predictive-search,
.predictive-search__results {
  background: #1a1612 !important;
  border: 1px solid var(--miros-border) !important;
}
.predictive-search__item {
  border-bottom: 1px solid var(--miros-border) !important;
}
.predictive-search__item:hover { background: rgba(201,168,76,0.05) !important; }

.predictive-search__item-heading {
  font-family: var(--miros-serif) !important;
  font-size: 16px !important;
  color: var(--miros-text) !important;
}
.predictive-search__item-vendor {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--miros-gold) !important;
}
.predictive-search__item-price {
  font-family: var(--miros-serif) !important;
  color: var(--miros-gold-light) !important;
}

.predictive-search__heading {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: var(--miros-gold) !important;
  border-bottom: 1px solid var(--miros-border) !important;
}

/* Search page */
.search__title {
  font-family: var(--miros-serif) !important;
  color: var(--miros-text) !important;
  font-weight: 300 !important;
}
.search-page .facets-wrapper {
  background: var(--miros-bg-raised) !important;
}

/* ─────────────────────────────────────────────
   14. BLOG / ARTICLES
───────────────────────────────────────────── */
.blog-articles .article-card,
.card--article {
  background: var(--miros-bg-raised) !important;
  border: 1px solid var(--miros-border) !important;
  border-radius: 0 !important;
  transition: border-color 0.3s !important;
}
.blog-articles .article-card:hover,
.card--article:hover { border-color: var(--miros-gold) !important; }

.article-card__title,
.card--article .card__heading {
  font-family: var(--miros-serif) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
  line-height: 1.2 !important;
}

.article-card__excerpt,
.card--article .article-card__information p {
  font-family: var(--miros-serif) !important;
  font-size: 16px !important;
  color: var(--miros-text-muted) !important;
  line-height: 1.8 !important;
}

.article-card__date,
.article-card__tags {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
}

/* Article page content */
.article__header {
  background: var(--miros-bg) !important;
  padding-top: 60px !important;
}
.article__title {
  font-family: var(--miros-serif) !important;
  font-size: clamp(32px, 5vw, 64px) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
  line-height: 1.1 !important;
}
.article__meta {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
}
.article__content p,
.article__content li {
  font-family: var(--miros-serif) !important;
  font-size: 19px !important;
  color: var(--miros-text-muted) !important;
  line-height: 1.95 !important;
}
.article__content h2,
.article__content h3 {
  font-family: var(--miros-serif) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}
.article__content blockquote {
  border-left: 2px solid var(--miros-gold) !important;
  padding-left: 24px !important;
  font-style: italic !important;
  color: var(--miros-text-muted) !important;
}

/* ─────────────────────────────────────────────
   15. PAGES (about, contact, faq etc.)
───────────────────────────────────────────── */
.main-page-title,
.page-title {
  font-family: var(--miros-serif) !important;
  font-size: clamp(32px, 5vw, 60px) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}
.page__content p,
.page__content li {
  font-family: var(--miros-serif) !important;
  font-size: 18px !important;
  color: var(--miros-text-muted) !important;
  line-height: 1.9 !important;
}
.page__content h2 { font-size: 32px !important; color: var(--miros-text) !important; }
.page__content h3 { font-size: 24px !important; color: var(--miros-text) !important; }
.page__content a { color: var(--miros-gold) !important; }

/* ─────────────────────────────────────────────
   16. CONTACT FORM
───────────────────────────────────────────── */
.contact__fields {
  display: grid !important;
  gap: 20px !important;
}
.contact .field__input,
.contact textarea {
  background: var(--miros-bg-card) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  color: var(--miros-text) !important;
}

/* ─────────────────────────────────────────────
   17. ACCOUNT PAGES
───────────────────────────────────────────── */
.account,
.account-page {
  background: var(--miros-bg) !important;
}
.account__title,
.orders__title {
  font-family: var(--miros-serif) !important;
  font-weight: 300 !important;
  color: var(--miros-text) !important;
}
.order-card {
  background: var(--miros-bg-raised) !important;
  border: 1px solid var(--miros-border) !important;
  border-radius: 0 !important;
}
.order-card__title {
  font-family: var(--miros-serif) !important;
  color: var(--miros-text) !important;
}
.order-card__price {
  font-family: var(--miros-serif) !important;
  color: var(--miros-gold-light) !important;
}

/* ─────────────────────────────────────────────
   18. FOOTER
───────────────────────────────────────────── */
.footer {
  background: #0d0b09 !important;
  border-top: 1px solid var(--miros-border) !important;
  padding-top: 80px !important;
}

.footer__heading {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--miros-gold) !important;
  font-weight: 300 !important;
  margin-bottom: 24px !important;
}

.footer__menu a,
.footer-block__details-content a {
  font-family: var(--miros-sans) !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  color: var(--miros-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.25s !important;
  display: block !important;
  padding: 5px 0 !important;
}
.footer__menu a:hover,
.footer-block__details-content a:hover { color: var(--miros-gold) !important; }

.footer__content-top {
  border-bottom: 1px solid var(--miros-border) !important;
  padding-bottom: 60px !important;
  margin-bottom: 40px !important;
}

/* Footer newsletter input */
.footer .field__input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  color: var(--miros-text) !important;
}
.footer .field__input:focus { border-color: var(--miros-gold) !important; }

/* Footer bottom bar */
.footer__content-bottom {
  padding: 24px 0 !important;
  border-top: 1px solid var(--miros-border) !important;
}
.footer__copyright,
.footer__copyright a {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: var(--miros-text-dim) !important;
  text-decoration: none !important;
}
.footer__copyright a:hover { color: var(--miros-gold) !important; }

/* Payment icons */
.footer__payment { opacity: 0.5 !important; filter: brightness(0) invert(1) !important; }
.footer__payment:hover { opacity: 0.8 !important; }

/* Footer logo */
.footer__logo { color: var(--miros-text) !important; }
.footer__logo img { filter: brightness(1.1); }

/* ─────────────────────────────────────────────
   19. MODALS / OVERLAYS
───────────────────────────────────────────── */
.modal__content,
.drawer__inner {
  background: #1a1612 !important;
  border: 1px solid var(--miros-border) !important;
}

.modal__close-button svg,
.drawer__close svg {
  stroke: var(--miros-gold) !important;
}

/* Overlay scrim */
.drawer__overlay,
.modal__overlay {
  background: rgba(10,8,5,0.85) !important;
}

/* ─────────────────────────────────────────────
   20. PAGINATION
───────────────────────────────────────────── */
.pagination__item {
  font-family: var(--miros-sans) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  color: var(--miros-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--miros-gold-dim) !important;
  border-radius: 0 !important;
  transition: all 0.25s !important;
}
.pagination__item:hover {
  border-color: var(--miros-gold) !important;
  color: var(--miros-gold) !important;
}
.pagination__item--current {
  background: var(--miros-gold) !important;
  border-color: var(--miros-gold) !important;
  color: #110f0c !important;
}

/* ─────────────────────────────────────────────
   21. BREADCRUMBS
───────────────────────────────────────────── */
.breadcrumbs,
nav[aria-label="breadcrumbs"] {
  font-family: var(--miros-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
.breadcrumbs a,
nav[aria-label="breadcrumbs"] a { color: var(--miros-text-dim) !important; }
.breadcrumbs a:hover { color: var(--miros-gold) !important; }
.breadcrumbs__separator { color: var(--miros-gold-dim) !important; }
.breadcrumbs .breadcrumbs__item:last-child { color: var(--miros-gold) !important; }

/* ─────────────────────────────────────────────
   22. LOADING STATES
───────────────────────────────────────────── */
.loading-overlay__spinner path { stroke: var(--miros-gold) !important; }
.placeholder-svg { fill: #2a2218 !important; }
.placeholder-svg .placeholder-svg__text { fill: var(--miros-gold-dim) !important; }
.skeleton-loader { background: linear-gradient(90deg, #1a1612 25%, #2a2218 50%, #1a1612 75%) !important; }

/* ─────────────────────────────────────────────
   23. SLIDESHOW / HERO (Dawn built-in)
───────────────────────────────────────────── */
.slideshow {
  background: var(--miros-bg) !important;
}
.slideshow__slide { background: var(--miros-bg) !important; }
.slideshow__text-wrapper { background: transparent !important; }

/* Slideshow controls */
.slideshow__control {
  background: rgba(17,15,12,0.6) !important;
  border: 1px solid var(--miros-gold-dim) !important;
  backdrop-filter: blur(8px) !important;
}
.slideshow__control svg { stroke: var(--miros-gold) !important; }
.slideshow__control:hover {
  background: var(--miros-gold) !important;
}
.slideshow__control:hover svg { stroke: #110f0c !important; }

/* Dot navigation */
.slideshow__controls .slider-counter__link {
  background: var(--miros-gold-dim) !important;
}
.slideshow__controls .slider-counter__link--active {
  background: var(--miros-gold) !important;
}

/* ─────────────────────────────────────────────
   24. ACCORDION (Dawn built-in collapsible content)
───────────────────────────────────────────── */
details.accordion {
  border-top: 1px solid var(--miros-border) !important;
}
details.accordion summary {
  font-family: var(--miros-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--miros-text-muted) !important;
  background: transparent !important;
  padding: 20px 0 !important;
}
details.accordion summary:hover { color: var(--miros-gold) !important; }
details.accordion[open] summary { color: var(--miros-gold) !important; }
details.accordion .accordion__content {
  font-family: var(--miros-serif) !important;
  font-size: 17px !important;
  color: var(--miros-text-muted) !important;
  line-height: 1.85 !important;
  padding: 0 0 24px !important;
  background: transparent !important;
}
details.accordion summary svg { stroke: var(--miros-gold) !important; }

/* ─────────────────────────────────────────────
   25. UTILITIES & MISC
───────────────────────────────────────────── */
/* Divider */
.section-separator,
hr {
  border: none !important;
  border-top: 1px solid var(--miros-border) !important;
}

/* Sticky header shadow */
.shopify-section-header-sticky {
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

/* Skip to content */
.skip-to-content-link {
  background: var(--miros-gold) !important;
  color: #110f0c !important;
}

/* Focus ring */
:focus-visible {
  outline: 1px solid var(--miros-gold) !important;
  outline-offset: 3px !important;
}

/* Visually hidden (keep accessible) */
.visually-hidden { position: absolute !important; clip: rect(0,0,0,0) !important; }

/* ─────────────────────────────────────────────
   26. RESPONSIVE ADJUSTMENTS
───────────────────────────────────────────── */
@media (max-width: 749px) {
  .header__heading-link,
  .header__heading { font-size: 20px !important; }

  .footer { padding-top: 48px !important; }
  .footer__heading { font-size: 9px !important; margin-bottom: 16px !important; }

  .cart-drawer__heading { font-size: 22px !important; }

  .article__title { font-size: 32px !important; }

  .card__heading,
  .card__heading h2 { font-size: 18px !important; }

  .price .price-item { font-size: 20px !important; }
}

@media (min-width: 990px) {
  .footer__heading { font-size: 11px !important; }
  .article__content p { font-size: 20px !important; }
  .card__heading { font-size: 24px !important; }
}
/* ================================================================
   PRODUCT PAGE — thumbnail layout (set in Shopify Theme Editor)
   Matches MYOP: vertical thumb strip LEFT + large hero image RIGHT
   ================================================================ */

/* 1. Full-bleed the section */
.product .page-width,
.section-main-product .page-width {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* 2. Page split: gallery column (55%) | info column (45%) */
.product.grid {
  display: grid !important;
  grid-template-columns: 55fr 45fr !important;
  gap: 0 !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Gallery wrapper fills its column fully */
.grid__item.product__media-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
}


.thumbnail-list__item:hover {
  opacity: 0.85 !important;
  border-color: rgba(201,168,76,0.5) !important;
}

.thumbnail-list__item[aria-current="true"],
.thumbnail-list__item.is-active {
  opacity: 1 !important;
  border-color: #c9a84c !important;
}

.thumbnail-list__item:hover .media img {
  transform: scale(1.08) !important;
}

.product__media-item:hover .media img {
  transform: scale(1.03) !important;
}

/* 8. Info panel: fills full 45% column, padded, sticky */
.grid__item.product__info-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 40px 48px 40px 44px !important;
  position: static !important;
  align-self: start !important;
  box-sizing: border-box !important;
}

.product__info-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Vendor */
.product__vendor {
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: #c9a84c !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* Title */
.product__title h1 {
  font-size: clamp(36px, 3.2vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 18px !important;
}
/* Sale badge */
/* Sale badge */
/* Sale badge */
.badge{
  background: #e8c07d;
  color: #000;
  padding: 4px 8px;
  font-size: 19px;
  letter-spacing: 1px;
  border-radius: 3px;
}

.product-form__input--pill input[type="radio"] + label{
  padding:12px 26px !important;
border-radius:999px !important;
  border:1px solid #c8a75b !important;
  background:transparent !important;
  color:#ffffff !important;
  font-size:20px !important;
  letter-spacing:2px !important;
   margin-right:12px !important;
  margin-bottom:10px;
  transition:all .25s ease;
}

.product-form__input--pill input[type="radio"]:checked + label{
  background:#c8a75b !important;
  color:#000 !important;
  border-color:#c8a75b !important;
 box-shadow:0 0 12px rgba(200,167,91,.35);
}

.product-form__input--pill input[type="radio"]:not(:checked) + label:hover{
  border-color:#e8c07d !important;
  color:#e8c07d !important;
}

.product-form__input{
margin-top:26px;
margin-bottom:10px;
}
.product-form__input--pill .form__label{
  font-size:25px !important;
  letter-spacing:3px !important;
  color:#c8a75b !important;
  margin-bottom:14px;
}
/* Variant block spacing */
.product-form__input--pill{
margin-top:30px;
margin-bottom:28px;
}

/* Variant label (SIZE) */
.product-form__input--pill .form__label{
font-size:18px !important;
letter-spacing:3px !important;
color:#c8a75b !important;
margin-bottom:18px !important;
display:block;
}

/* Variant pill spacing */
.product-form__input--pill label{
margin-right:14px !important;
margin-bottom:12px !important;
}
.badge{
  background:#c8a75b !important;
  color:#000 !important;
  padding:4px 10px !important;
  font-size:18px !important;
  letter-spacing:1px !important;
  border-radius:3px !important;
}
.product-form__input--pill label{
  display:inline-block;
  margin-bottom:8px;
}
.product-form__input--pill{
  margin-top:16px;
}

/* Old price only when product is on sale */
.price--on-sale .price-item--regular{
  font-size:18px !important;
  color:#8a7a5a !important;
  text-decoration:line-through !important;
  opacity:.7;
  margin-right:10px;
}

/* Normal price when not on sale */
.price:not(.price--on-sale) .price-item--regular{
  font-size:36px !important;
  color:#c8a75b !important;
  text-decoration:none !important;
  opacity:1 !important;
}

/* Current price */
.price .price-item--sale{
  font-size:36px !important;
  font-weight:600 !important;
  color:#c8a75b !important;
  letter-spacing:0.4px;
}
/* Current price */

.badge{
  background:#c8a75b !important;
  color:#000 !important;
  padding:4px 10px !important;
  font-size:18px !important;
  letter-spacing:1px !important;
  border-radius:3px !important;
  display:inline-block;
  margin-top:6px;
}
.badge{
white-space:nowrap;
}
.product__title{
margin-bottom:12px;
}

.price{
margin-bottom:22px;
}
.product-form__input--pill{
margin-top:22px;
margin-bottom:20px;
}
/* description text */

.product__description.rte p{
font-size:20px !important;
line-height:2 !important;
color:#d6d2c4 !important;
max-width:520px;
margin-top:22px;



margin-bottom:18px;
}
/* intro paragraph */
.product__description.rte p:first-child{
font-size:22px !important;
color:#ffffff;
font-style:italic;
}
.product__description{
color:#d8d2c4;
max-width:520px;
}
/* override Dawn description font */
.product__description.rte p{
font-size:21px !important;
line-height:1.9 !important;
color:#d6d2c4 !important;
}

/* intro paragraph */
.product__description.rte p:first-child{
font-size:22px !important;
color:#ffffff !important;
font-style:italic;

line-height:1.9 !important;
}
/* hide extra description paragraphs */
.product__description p.extra-desc{
display:none;
}

/* read more button */


.read-more-btn{
color:#c8a75b;
cursor:pointer;
font-size:18px;
letter-spacing:2px;
margin-top:14px;
display:inline-block;
transition:opacity .25s ease;
}

.read-more-btn:hover{
opacity:.7;
}

/* fragrance notes titles */
.product__info-wrapper details summary{
font-size:24px !important;
color:#c8a75b !important;
}

.lux-title{
font-size:22px;
letter-spacing:3px;
text-transform:uppercase;
color:#b7a47c;
margin-bottom:14px;
}
.lux-chip:hover{
background:#c8a75b;
color:#111;
}

.lux-chips{
display:flex;
flex-wrap:wrap;
gap:12px;
}
.lux-chip{
padding:8px 18px;
border-radius:999px;
border:1px solid #c8a75b;
color:#c8a75b;
font-size:20px;
background:transparent;
}

.lux-content{
margin-top:20px;
}
.lux-group{
margin-bottom:32px;
}


.lux-divider{
height:1px;
background:linear-gradient(
90deg,
transparent,
rgba(200,167,91,0.25),
transparent
);
margin:36px 0;
}

.lux-accordion{
border-top:1px solid rgba(200,167,91,0.35);
padding-top:20px;
margin-top:20px;
}
.lux-accordion + .lux-accordion{
border-top:1px solid rgba(200,167,91,0.35);
}
.lux-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:16px;
}
.lux-row span:first-child{
font-size:20px;
letter-spacing:2px;
text-transform:uppercase;
color:#9c8b67;
min-width:120px;
}
.lux-row span:last-child{
font-size:18px;
color:#e6e0cf;
text-align:right;
max-width:260px;
line-height:1.6;
}
.lux-row{
padding-bottom:14px;
border-bottom:1px solid rgba(200,167,91,0.12);
}
.lux-row:last-child{
border-bottom:none;
}
.lux-key{
margin-top:20px;
}
.lux-summary span{
font-size:20px;
color:#c8a75b;
letter-spacing:2px;
text-transform:uppercase;
}
.lux-summary{
margin-bottom:18px;
}
.lux-static{
margin-top:24px;
}
.lux-static{
margin-top:24px;
}
.product-form__submit.button{
height:60px !important;
font-size:24px !important;
letter-spacing:3px !important;
border:1px solid #c8a75b !important;
color:#c8a75b !important;
background:transparent !important;
transition:all .35s ease;
 font-weight:600 !important;
}
.product-form__submit.button:hover{
background:#c8a75b !important;
color:#000 !important;
box-shadow:0 0 16px rgba(200,167,91,.45);
transform:translateY(-1px);
}
.product-form__submit.button span{
font-size:20px !important;
letter-spacing:3px !important;
font-weight:600 !important;
}
.shopify-payment-button__button{
height:52px !important;
font-size:20px !important;
letter-spacing:2px !important;
border:1px solid rgba(200,167,91,.35) !important;
background:#0f0f0f !important;
font-weight:600 !important;
}
.product-form__buttons{
margin-top:24px;
display:flex;
flex-direction:column;
gap:14px;
}

.product__info-wrapper 
.shopify-payment-button__button{
height:54px !important;
font-size:22px !important;
letter-spacing:2px !important;
border:1px solid rgba(200,167,91,.35) !important;
background:#0f0f0f !important;
color:#ffffff !important;
 font-weight:600 !important;
}
.shopify-payment-button__button:hover{
border-color:#c8a75b !important;
color:#c8a75b !important;
}
.product__info-wrapper .product-form__submit.button span{
font-size:24px !important;
}
.product-form__buttons{
margin-top:26px;
display:flex;
flex-direction:column;
gap:14px;
}


.product-form__submit{
flex:1;
height:52px !important;
font-size:15px !important;
letter-spacing:3px !important;
}
.product__info-wrapper form{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:flex-end;
}

.product__info-wrapper .product-form__buttons{
flex:1;
display:flex;
flex-direction:column;
}
.product__info-wrapper .shopify-payment-button{
margin-top:14px;
}
/* QUANTITY LABEL */
.product__info-wrapper .form__label{
font-size:20px !important;
letter-spacing:3px !important;
color:#c8a75b !important;
margin-bottom:10px;
}


/* QUANTITY BOX */
.product__info-wrapper quantity-input.quantity{
display:flex !important;
align-items:center !important;
border:1px solid #c8a75b !important;
height:64px !important;
width:200px !important;
overflow:hidden;
}

/* MINUS / PLUS BUTTON */
.product__info-wrapper .quantity__button{
flex:0 0 60px !important;
height:64px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#c8a75b !important;
}

/* ICON SIZE */
.product__info-wrapper .quantity__button .svg-wrapper{
width:22px !important;
height:22px !important;
}

/* NUMBER FIELD */
.product__info-wrapper .quantity__input{
flex:1 !important;
text-align:center !important;
font-size:22px !important;
color:#ffffff !important;
background:transparent !important;
border:none !important;
}

/* HOVER */
.product__info-wrapper .quantity__button:hover{
background:#c8a75b !important;
}

.product__info-wrapper .quantity__button:hover svg{
stroke:#000 !important;
}
/* Card hover zoom */
.card__media img {
  transition: transform .6s ease;
}
.card:hover img {
  transform: scale(1.05);
}

/* ── MOBILE FIX: full width, single column ── */
@media screen and (max-width: 749px) {

  /* Force full viewport width — kill all container caps */
  .page-width,
  .product .page-width,
  .section-main-product .page-width {
    max-width: 100vw !important;
  width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Single column stack */
  .product.grid {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Gallery full width, not sticky */
 

  /* Info panel full width, normal padding */
  .grid__item.product__info-wrapper {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

 
 
}
/* Targeted fix for 1044x600 and similar short-height displays */

/* Targeted fix for 820px to 1050px width range */
@media screen and (min-width: 800px) and (max-width: 1050px) {
  .product.grid {
    display: flex !important;
    flex-direction: column !important; /* Stack info below image */
  }

  .grid__item.product__media-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  
  
  .grid__item.product__info-wrapper {
    padding-top: 20px !important;
  }
}
/* FIX: Disable Sticky Image for Tablet/Small Laptop Dimensions 
  Targets: 1044x600, 820x1180, 1042x1366, 912x1368
*/
@media screen and (min-width: 800px) and (max-width: 1100px), 
       screen and (max-height: 700px) and (min-width: 1000px) {

    /* 1. Force the grid to stack vertically instead of side-by-side */
    .product.grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Remove the 'Sticky' behavior that causes the overlap */
    .grid__item.product__media-wrapper {
        position: relative !important; /* Disables sticky */
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1;
}

    /* 3. Ensure the info panel stays below the image and doesn't slide over it */
    .grid__item.product__info-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 30px !important;
        background: var(--miros-bg) !important; /* Ensure background isn't transparent */
        z-index: 2;
    }

    /* 4. Ensure the image fits the screen height on short displays (like 1044x600) */
  
}
/* Targeted Fix for Description and Info Width 
   Dimensions: 1044x600, 820x1180, 1042x1366, 912x1368 
*/
@media screen and (min-width: 800px) and (max-width: 1100px), 
       screen and (max-height: 700px) and (min-width: 1000px) {

    /* 1. Ensure the info container expands to full width */
    .grid__item.product__info-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        display: block !important;
    }

    /* 2. Fix the description specifically */
    .product__description, 
    .product__info-container .rte,
    .product__info-wrapper .product__description {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        line-height: 1.6 !important; /* Better readability */
    }

    /* 3. Ensure accordions or tabs also span full width */
    .product__accordion, 
    details {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 4. Fix for the 1044x600 landscape view to prevent text overlap */
    .product__info-container > * {
        margin-bottom: 1.5rem !important;
    }
}
/* FINAL POLISHING FOR TABLET/LANDSCAPE DIMENSIONS 
   Targets: 1044x600, 820x1180, 1042x1366, 912x1368 
*//* REFINED MASTER FIX FOR TABLET & LANDSCAPE 
   Targets: 1044x600, 820x1180, 1042x1366, 912x1368 
*/
@media screen and (min-width: 800px) and (max-width: 1100px), 
       screen and (max-height: 700px) and (min-width: 1000px) {

    /* 1. Reset the Grid to a Clean Stack */
    .product.grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 2. Image Presentation - Give it breathing room */
   

    .product__media-item img {
        border-radius: 8px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }

    /* 3. The Info Container - This is where the magic happens */
    .grid__item.product__info-wrapper {
        width: 100% !important;
        max-width: 750px !important; /* Consistent width for all text */
        margin: 0 auto !important;
        padding: 0 40px 60px 40px !important;
        text-align: center !important;
}

    /* 4. Align all children to center */
    .product__info-container > * {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* 5. Fix the Description specifically */
    .product__description, .rte {
        font-size: 1.15rem !important;
        line-height: 1.8 !important;
        color: #d1d1d1 !important; /* Soften the white for luxury look */
        margin-top: 25px !important;
        text-align: justify !important; /* Gives a clean "block" look */
        text-justify: inter-word !important;
        padding-bottom: 30px !important;
        border-bottom: 1px solid rgba(201,168,76,0.2); /* Subtle gold divider */
    }

    /* 6. Buttons & Forms - Full width for tablet touch targets */
    .product-form, .product-form__buttons {
        max-width: 450px !important;
        width: 100% !important;
        margin-top: 30px !important;
    }

    .product-form__submit {
        height: 55px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
    }

    /* 7. Specific landscape tweak (1044x600) */
    @media (max-height: 650px) {
        .product__media-item img {
            max-height: 50vh !important;
        }
    }
}
/* FORCE FULL WIDTH LAYOUT FOR TABLET/LANDSCAPE 
   Targets: 1044x600, 820x1180, 1042x1366, 912x1368 
*/
@media screen and (min-width: 800px) and (max-width: 1100px), 
       screen and (max-height: 700px) and (min-width: 1000px) {

    /* 1. Remove Dawn's internal max-width constraints */
    .product__info-container,
    .product__info-wrapper,
    .product-form,
    .product__description {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 2. Make Description Full Width with safe side padding */
    .product__description, .rte {
        padding-left: 5% !important;
        padding-right: 5% !important;
        text-align: left !important; /* Changed to left for a cleaner look when full width */
    }

    /* 3. Make Buttons and Quantity Selector Full Width */
    .product-form__buttons,
    .product-form__submit,
    .shopify-payment-button__button,
    .quantity {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    }

    /* Ensure the "Buy It Now" button also expands */
    .shopify-payment-button__button--unbranded {
        width: 100% !important;
        padding: 18px !important;
    }

    /* 4. Quantity Box - make it look intentional when wide */
    .quantity {
        height: 50px !important;
        margin-bottom: 15px !important;
        border: 1px solid var(--miros-gold-dim) !important;
    }

    /* 5. Center align titles but keep description readable */
    .product__title, .price {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 6. Fix for the small height overlap (1044x600) */
    @media (max-height: 650px) {
        
        .product__title h1 {
            font-size: 1.8rem !important;
        }
    }
}
/* ULTRA FORCE FULL WIDTH & BUTTON POLISH 
   Targets: 1044x600, 820x1180, 1042x1366, 912x1368 
*/
@media screen and (min-width: 800px) and (max-width: 1100px), 
       screen and (max-height: 700px) and (min-width: 1000px) {

    /* 1. DESCRIPTION BOX - Breaking all Dawn container limits */
    .product__info-container .product__description,
    .product__info-container .rte,
    #product-description,
    .product-description-container {
        width: 100vw !important;
        max-width: 90% !important; /* Leaves a 5% margin on each side */
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 2. BUY IT NOW BUTTON - Centering and Visibility */
    .shopify-payment-button__button--unbranded {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 !important;
        min-height: 55px !important;
        font-weight: 700 !important;
        background-color: var(--miros-gold) !important; /* Ensuring visibility */
        color: #000 !important; /* High contrast black text on gold */
    }

    /* Force the specific Shopify button text to center and be visible */
    [data-testid="ShopifyPay-button"],
    .shopify-payment-button__button {
        font-size: 1.2rem !important;
        letter-spacing: 0.1rem !important;
        text-transform: uppercase !important;
        color: #000 !important;
    }

    /* 3. QUANTITY & ADD TO CART - Horizontal Alignment */
    .product-form__input.product-form__quantity {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    .product-form__buttons {
        gap: 10px !important;
        display: flex !important;
        flex-direction: column !important; /* Stacks Qty, ATC, and BIN */
    }

    /* 4. Ensure the Price is clearly visible above the new wide description */
    .price {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
        color: var(--miros-gold-bright) !important;
    }
}
/* ══════════════════════════════════════════════════════════════
   MOBILE INTERACTION & VISIBILITY FIX
   Ensures buttons and images look premium on touch screens
══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {
    /* 1. Fix "Buy It Now" Text Visibility */
    /* Often Shopify buttons have a 'hover' opacity of 0.8 that sticks on mobile */
    .shopify-payment-button__button--unbranded,
    .product-form__submit {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--miros-gold) !important;
        color: #000 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    /* 2. Convert Hover Glow to 'Tap' Glow */
    /* When the user touches a button, it should briefly glow */
    .product-form__submit:active,
    .shopify-payment-button__button--unbranded:active,
    .font-option-popup:active {
        transform: scale(0.98);
        filter: brightness(1.2);
        box-shadow: 0 0 15px var(--miros-gold-bright) !important;
    }

    /* 3. Image Hover fix for Mobile */
    /* Mobile doesn't support hover zoom, so we ensure the image is crisp and full width */
    .product__media-item img {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    /* 4. Fix for Personalization Font Options */
    /* On mobile, 'hover' states often stay "stuck" after you tap. 
       This ensures the selection is clear. */
    .font-option-popup {
        -webkit-tap-highlight-color: transparent;
    }
    
    .font-option-popup.selected {
        border: 2px solid var(--miros-gold-bright) !important;
        background: var(--miros-bg-raised) !important;
        box-shadow: 0 0 10px var(--miros-gold-dim) !important;
    }

    /* 5. Ensure the button text is always centered and visible */
    .shopify-payment-button__button--unbranded > span,
    .shopify-payment-button__button--unbranded {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }
}
/* ══════════════════════════════════════════════════════════════
   MASTER MOBILE TOUCH & INTERACTION OVERRIDE
   Targets all touch devices (Phone & Tablet)
══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1100px) {
    
    /* 1. REMOVE STUCK HOVER STATES */
    /* This prevents buttons from staying 'glowy' after a tap */
    .product-form__submit:hover,
    .shopify-payment-button__button--unbranded:hover,
    .font-option-popup:hover {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* 2. ADD INSTANT TACTILE FEEDBACK (TOUCH START) */
    /* This makes the button shrink slightly when pressed, like a real button */
    .product-form__submit:active,
    .shopify-payment-button__button--unbranded:active,
    .font-option-popup:active,
    .button:active {
        transform: scale(0.96) !important;
        background-color: var(--miros-gold-bright) !important;
        transition: transform 0.1s ease !important;
    }

    /* 3. FIX BUY IT NOW VISIBILITY */
    /* Ensure the text is centered and color is high-contrast */
    .shopify-payment-button__button--unbranded {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #000 !important;
        background-color: var(--miros-gold) !important;
        opacity: 1 !important;
        text-align: center !important;
    }

/* ══════════════════════════════════════════════════════════════
   DESKTOP EFFECT MIRROR FOR MOBILE (Touch/Active States)
══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {
    
    /* 1. Mirror Desktop Button Hover Glow on Tap */
    .product-form__submit:active,
    .shopify-payment-button__button--unbranded:active,
    .button:active {
        background-color: var(--miros-gold-bright) !important;
        box-shadow: 0 0 20px var(--miros-gold-dim) !important; /* Your Desktop Glow */
        transform: translateY(-2px) scale(0.98) !important; /* Your Desktop Lift */
        transition: all 0.1s ease !important;
    }

    /* 2. Mirror Personalization Card Effects */
    /* On mobile, we make the hover effect permanent or active on tap */
    .font-option-popup {
        transition: all 0.3s ease !important;
    }

    .font-option-popup:active {
        border-color: var(--miros-gold-bright) !important;
        box-shadow: 0 6px 20px rgba(201, 168, 76, 0.2) !important;
        transform: translateY(-2px) !important;
    }

    /* 3. Mirror Image Reveal/Glow */
    /* Since we can't hover, we add a subtle gold border to the main image 
       permanently on mobile to keep the "Luxury" feel */
    .product__media-item img {
        border: 1px solid rgba(201, 168, 76, 0.15) !important;
        transition: border 0.3s ease !important;
    }

    .product__media-item:active img {
        border-color: var(--miros-gold) !important;
        filter: brightness(1.1) !important;
    }

    /* 4. Fix for the "Sticking" Effect */
    /* This ensures that after you stop touching, the glow fades away 
       instead of staying stuck on the button */
    .product-form__submit, 
    .shopify-payment-button__button--unbranded {
        -webkit-tap-highlight-color: transparent;
    }
}
/* 🔥 FIX: Make mobile menu full screen (not inside header) */

.menu-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
}

/* Ensure header doesn't clip drawer */
.header,
.header-wrapper {
  overflow: visible !important;
}

/* Prevent any parent clipping */
body,
html {
  overflow-x: hidden;
}
/* 🔥 FORCE FIX: override inline hero stats */

.hero-stats {
  position: absolute !important;
  bottom: 40px !important;
  right: 40px !important;

  z-index: 1 !important;        /* lower than buttons */
  pointer-events: none !important; /* don't block clicks */
}

/* Ensure hero content stays above */
.hero-container,
.banner__content {
  position: relative;
  z-index: 2 !important;
}
/* contact page  */
/* ===== FORCE OVERRIDE DAWN ===== */

.contact .field {
  position: relative;
}

/* INPUT STYLE */
.contact .field__input,
.contact .text-area {
  background: transparent !important;
  border: 1px solid rgba(201,168,76,0.5) !important;
  color: #fff !important;
  padding: 16px !important;
  font-size: 14px !important;
}

/* FOCUS */
.contact .field__input:focus,
.contact .text-area:focus {
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 1px #c9a84c !important;
  outline: none !important;
}

/* LABEL FIX */
.contact .field__label {
  position: absolute !important;
  top: 12px !important;
  left: 16px !important;
  font-size: 11px !important;
  letter-spacing: 2px;
  color: #c9a84c !important;
  background: transparent !important;
}

/* FLOAT LABEL */
.contact .field__input:focus + .field__label,
.contact .field__input:not(:placeholder-shown) + .field__label,
.contact .text-area:focus + .field__label,
.contact .text-area:not(:placeholder-shown) + .field__label {
  top: -8px !important;
  font-size: 10px !important;
  background: #110f0c !important;
  padding: 0 6px;
}

/* GRID FIX */
.contact .contact__fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .contact .contact__fields {
    grid-template-columns: 1fr;
  }
}

/* TEXTAREA */
.contact .text-area {
  min-height: 140px !important;
}

/* BUTTON */
.contact .contact__button .button {
  background: transparent !important;
  border: 1px solid #c9a84c !important;
  color: #c9a84c !important;
  padding: 14px 40px !important;
  letter-spacing: 2px;
}

.contact .contact__button .button:hover {
  background: #c9a84c !important;
  color: #000 !important;
}
/* INSPIRED TEXT */
.miros-inspired span {
  font-size: 10px;
  opacity: 0.6;
}

.miros-inspired strong {
  font-weight: 400;
  color: #c9a84c;
}

.miros-disclaimer {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 20px;
  line-height: 1.6;
  max-width: 420px;
}
/* WRAPPER */
.miros-inspired-wrapper {
  margin-top: 10px;
}

/* BUTTON */
.miros-inspired-toggle {
  background: none;
  border: none;
  color: rgba(201,168,76,0.85);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  padding: 0;
}

/* HOVER */
.miros-inspired-toggle:hover {
  color: #c9a84c;
}

/* CONTENT (HIDDEN DEFAULT) */
.miros-inspired-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-top: 5px;
}

/* ACTIVE STATE */
.miros-inspired-wrapper.active .miros-inspired-content {
  max-height: 50px;
  opacity: 1;
}
/* ===== Luxury Mobile Menu ===== */
@media screen and (max-width: 989px){

.menu-drawer{
    background:#11100f !important;
}

.menu-drawer__navigation{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:75vh;
    padding:3rem 2.5rem !important;
}

.menu-drawer__menu{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.menu-drawer__menu-item{
    font-family:var(--miros-sans) !important;
    font-size:20px !important;
    font-weight:300 !important;
    letter-spacing:5px !important;
    text-transform:uppercase;
    color:var(--miros-text-muted) !important;
    padding:0 !important;
    transition:all .3s ease;
}

.menu-drawer__menu-item:hover{
    color:var(--miros-gold) !important;
    padding-left:12px !important;
    background:none !important;
}

.menu-drawer__utility-links{
    border-top:1px solid rgba(201,168,76,.25);
    padding:20px 25px;
}

}