/** Shopify CDN: Minification failed Line 336:24 Unexpected "#" Line 2661:0 Unexpected "<" Line 2666:20 Unexpected "{" Line 2666:29 Expected ":" Line 2666:36 Unexpected "{" Line 2671:20 Unexpected "{" Line 2671:29 Expected ":" Line 2672:20 Unexpected "{" Line 2672:29 Expected ":" Line 2673:20 Unexpected "{" ... and 18 more hidden warnings **/ @media(min-width:600px){ .template-index .slide-item .collection-item h3 { font-size: 14.9px; text-align: center; text-transform: uppercase; } .s-s p.link-s { text-align: center; text-decoration: underline; font-size: 19px; } .s-s .collection-item img { height: 220px !important; object-fit: cover; } .s-s p.link-s { margin: 0px; } .s-s .flickity-viewport { height: 300px !important; } } @media(max-width:600px){ .s-s .look__products__holder .flickity-slider .slide-item .collection-item { text-align: center; } div#shopify-section-header { background: #000; } .collection-split .collection-split__products .custom-scrollbar.small-down--show, .section-list-collections .custom-scrollbar.small-down--show { background: #000; } } .s-s p.link-s { text-decoration: underline; } .template-index .s-s .look__products__holder.look__products__holder--slides.look__products__holder--left.palette--dark.bg--invert.is-expanded { background: #000; } p.link-s { font-size: 12.75px !important; } .template-index .s-s button.flickity-button.flickity-prev-next-button { background: #000 !important; margin: 0px; } .s-s p.link-s:hover { text-decoration: none; } /* MOBILE logo size override */ @media screen and (max-width: 749px) { /* Common Shopify/Dawn logo image */ .header__heading-logo, .header__logo img, .site-header__logo img, .header-logo img { max-width: 220px !important; /* <-- change this */ width: 220px !important; /* <-- change this */ height: auto !important; } /* If the link/wrapper is constraining it */ .header__heading-link, .header__logo, .site-header__logo { max-width: 220px !important; /* <-- keep consistent */ } } /* ========================================================= PDP Desktop — EXTRA COMPACT + LONGER (TALLER) ATC + Size picker matches ATC width ========================================================= */ @media (min-width: 990px) { :root { --pdp-sticky-top: 120px; } /* Keep sticky */ body.template-product .product__main__content.grid__item{ position: sticky !important; top: var(--pdp-sticky-top) !important; align-self: flex-start !important; z-index: 20 !important; } /* Slightly narrower + tighter */ body.template-product .product__main__content .product__inner{ max-width: 700px !important; /* more compact */ margin-left: auto !important; /* ONE knob: set ATC width, size picker will match */ --pdp-atc-width: 760px; /* tweak: 680 / 720 / 760 / 800 */ } /* Kill vertical bloat globally inside the buy box */ body.template-product .product__main__content .product__inner > *{ margin-top: 4px !important; margin-bottom: 4px !important; } /* Common Pipeline blocks tend to add extra spacing */ body.template-product .product__main__content .product__block__description, body.template-product .product__main__content .tabs-wrapper, body.template-product .product__main__content .product__block__share, body.template-product .product__main__content .product__block__upsell, body.template-product .product__main__content .product__block__icon, body.template-product .product__main__content .product__block__text{ margin-top: 6px !important; margin-bottom: 6px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Title smaller */ body.template-product .product__main__content .product__inner h1, body.template-product .product__main__content .product__inner .product__title, body.template-product .product__main__content .product__inner .product__heading{ } /* Text smaller */ body.template-product .product__main__content .product__inner, body.template-product .product__main__content .product__inner p, body.template-product .product__main__content .product__inner .p, body.template-product .product__main__content .product__inner .price, body.template-product .product__main__content .product__inner .product__price{ line-height: 1.25 !important; } /* Variant/size tiles tighter */ body.template-product .product__main__content .variant-wrapper, body.template-product .product__main__content .selector-wrapper{ margin: 6px 0 !important; } body.template-product .product__main__content .radio__button, body.template-product .product__main__content .variant__button, body.template-product .product__main__content .product__option label{ padding: 7px 10px !important; font-size: 12px !important; } /* ========================================================= SIZE PICKER: constrain to match ATC width ========================================================= */ body.template-product .product__main__content .product__inner .selector-wrapper, body.template-product .product__main__content .product__inner .variant-wrapper, body.template-product .product__main__content .product__inner .product__option{ width: 100% !important; max-width: var(--pdp-atc-width) !important; margin-left: auto !important; /* centers like ATC */ margin-right: auto !important; box-sizing: border-box !important; } body.template-product .product__main__content .product__inner select, body.template-product .product__main__content .product__inner .select{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ========================================================= ATC BLOCK: match same width, even if wrapper is funky ========================================================= */ body.template-product .product__main__content .product__inner .product__block__buttons, body.template-product .product__main__content .product__inner .product__buttons, body.template-product .product__main__content .product__inner .product__form, body.template-product .product__main__content .product__inner form{ width: 100% !important; max-width: none !important; /* don't constrain the whole form */ } /* Force the visible ATC button width + center */ body.template-product .product__main__content .product__inner button[type="submit"], body.template-product .product__main__content .product__inner [type="submit"], body.template-product .product__main__content .product__inner .btn, body.template-product .product__main__content .product__inner .btn--solid, body.template-product .product__main__content .product__inner .product__submit, body.template-product .product__main__content .product__inner .product__add-to-cart{ width: 100% !important; max-width: var(--pdp-atc-width) !important; margin-left: auto !important; margin-right: auto !important; display: block !important; box-sizing: border-box !important; /* taller = “longer” feel */ padding: 18px 3px !important; min-height: 56px !important; font-size: 14px !important; letter-spacing: 0.06em !important; } } /* ========================================================= Desktop: lock page scroll when size dropdown is open ========================================================= */ @media (min-width: 990px) { html.en-scroll-locked, body.en-scroll-locked { overflow: hidden !important; } /* prevents layout shift when scrollbar disappears */ body.en-scroll-locked { width: 100%; } } /* ========================================================= Desktop: Size dropdown shows only 4 visible rows (Pipeline popout) ========================================================= */ @media (min-width: 990px) { /* Most common Pipeline popout list wrappers */ body.template-product .product__main__content .select-popout__list, body.template-product .product__main__content [data-popout-list] { max-height: calc(3 * 52px) !important; /* 4 rows visible */ overflow-y: auto !important; } /* Make row height consistent so “4 rows” is real */ body.template-product .product__main__content .select-popout__item, body.template-product .product__main__content [data-popout-option] { min-height: 52px !important; display: flex !important; align-items: center !important; } } @media (min-width: 990px) { body.template-product .product__price--off { border-radius: 0 !important; } } /* ========================================================= PDP: square SALE badge + inline SPRING SALE (desktop) ========================================================= */ @media (min-width: 990px) { body.template-product .product__price__main[data-price-wrapper]{ display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important; justify-content:flex-start !important; } body.template-product .product__price--off{ border-radius:0 !important; } body.template-product .free-shipping-box{ border:1px solid currentColor; border-radius:0 !important; padding:6px 12px; font-size:12px; line-height:1; white-space:nowrap; display:inline-flex; align-items:center; margin:0 !important; } /* Left-align with title */ body.template-product .product__headline, body.template-product .product__title__wrapper { text-align: left !important; align-items: flex-start !important; } } /* ========================================================= PDP Mobile — clean price stack (no phantom spacing) ========================================================= */ @media (max-width: 989px) { /* Title → price tighter */ body.template-product .product__title, body.template-product .product__heading { margin-bottom: 8px; } /* Price wrapper: single row, no gaps */ body.template-product .product__price__main[data-price-wrapper] { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; } /* Only show sale badge when real */ body.template-product .product__price--off.hide { display: none; } /* Spring sale removed on mobile */ body.template-product .free-shipping-box { display: none; } /* Afterpay closer */ body.template-product .shopify-payment-terms, body.template-product .afterpay-paragraph { margin-top: 6px; } } @media (min-width: 990px) { /* Make the entire SIZE row clickable (not just the letter) */ body.template-product #*-select-size, body.template-product [id$="select-size"], body.template-product [id*="select-size"]{ /* this targets the popout panel container */ } body.template-product [id$="select-size"] * , body.template-product [id*="select-size"] *{ /* nothing here; keeping specificity simple */ } /* Most themes render the options as buttons/links inside the popout */ body.template-product [id$="select-size"] button, body.template-product [id$="select-size"] a, body.template-product [id*="select-size"] button, body.template-product [id*="select-size"] a{ display: block !important; width: 100% !important; text-align: left !important; padding: 14px 16px !important; /* bigger click area */ box-sizing: border-box !important; } /* If options are list items, make the li full width too */ body.template-product [id$="select-size"] li, body.template-product [id*="select-size"] li{ width: 100% !important; } } /* Hide SPRING SALE pill */ .free-shipping-box { display: none !important; } /* Hide SPRING SALE on mobile only */ @media (max-width: 989px) { body.template-product .free-shipping-box { display: none !important; } } /* FIX: never show SALE badge when Pipeline marks it hidden */ @media (max-width: 989px) { body.template-product .product__price--off.hide, body.template-product .product__price--off[data-price-off-amount=""] { display: none !important; } } /* ========================================= Bundle spacing: add air under quantity selector (ONLY when our bundle UI exists) ========================================= */ html.ed-bundle-active .product__quantity, html.ed-bundle-active .quantity-selector, html.ed-bundle-active [data-quantity-selector]{ margin-bottom: 24px !important; /* adjust 20–32px if you want */ } /* ========================================= ED Bundle UI ========================================= */ .ed-bundle { margin: 14px 0; } /* Base title style */ .ed-bundle__title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; } /* Title between tier 1 and 2: centered with lines */ .ed-bundle__title--between{ display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0 12px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; opacity: .9; } .ed-bundle__title--between:before, .ed-bundle__title--between:after{ content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.15); /* very light grey lines */ } .ed-bundle__tiers { display: grid; gap: 10px; } .ed-bundle__tier { width: 100%; background: #000; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 12px; display: flex; justify-content: space-between; text-align: left; } .ed-bundle__tier.is-active { border-color: #fff; } /* Hide Kaching bundles UI (corrected selectors) */ .kaching-bundle, .kaching-bundles-block { display: none !important; } /* ========================================= Quantity -> space before bundle ========================================= */ body.template-product .product__block__quantity{ margin-bottom:12px !important; } body.template-product .quantity__wrapper[data-quantity-selector]{ margin-bottom:12px !important; } /* ========================================================= ED Bundle — centered, responsive, no desktop clipping ========================================================= */ body.template-product{ overflow-x:hidden; } /* allow shrinking inside Pipeline flex/grid wrappers */ body.template-product .product__content, body.template-product .product__info, body.template-product .product__form{ min-width:0 !important; } body.template-product [data-ed-bundle]{ display:block; margin-top:12px !important; width:min(100%, 600px) !important; max-width:600px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; min-width:0; } body.template-product [data-ed-bundle], body.template-product [data-ed-bundle] *{ box-sizing:border-box; } body.template-product [data-ed-bundle] .ed-bundle__tier[data-qty="1"]{ margin-top:0 !important; } /* ========================================= Bundle title ========================================= */ .ed-bundle__title--between{ display:flex; align-items:center; justify-content:center; gap:clamp(12px, 3vw, 18px); margin:18px 0 10px; text-align:center; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(12px, 2.6vw, 14px); opacity:1; } .ed-bundle__title--between:before, .ed-bundle__title--between:after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.28); } /* ========================================= Tiers (grid, always left/right) ========================================= */ .ed-bundle__tiers{ display:grid; gap:10px; } .ed-bundle__tier{ width:100%; display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; row-gap:8px; padding:14px; text-align:left; border:1px solid rgba(255,255,255,.18); max-width:100%; } .ed-bundle__tier-left{ min-width:0; } .ed-bundle__tier-right{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; white-space:nowrap; } /* ========================================= Typography ========================================= */ .ed-bundle__tier-label{ font-weight:800; font-size:clamp(20px, 3.6vw, 24px); line-height:1.05; } .ed-bundle__tier-price{ font-weight:900; font-size:clamp(22px, 4vw, 26px); line-height:1; } .ed-bundle__tier-compare{ font-size:clamp(16px, 3.1vw, 20px); opacity:.7; text-decoration:line-through; text-decoration-thickness:2px; } /* badge */ .ed-bundle__tier-badge{ display:inline-flex; align-items:center; justify-content:center; margin-top:8px; padding:5px 10px; background:#fff; color:#000; border-radius:999px; font-weight:800; font-size:clamp(12px, 3vw, 13px); letter-spacing:.02em; line-height:1.1; max-width:100%; overflow-wrap:anywhere; word-break:break-word; } /* description (force wrap; defeat theme clamp/ellipsis) */ .ed-bundle__tier-desc{ margin-top:8px; font-size:clamp(14px, 3.3vw, 16px); line-height:1.25; opacity:.92; max-width:100%; min-width:0; white-space:normal !important; overflow:visible !important; text-overflow:initial !important; overflow-wrap:anywhere; word-break:break-word; display:block !important; -webkit-line-clamp:unset !important; line-clamp:unset !important; -webkit-box-orient:initial !important; } /* ========================================= Mobile tighten (still left/right) ========================================= */ @media (max-width:520px){ .ed-bundle__tier{ padding:12px; column-gap:10px; } .ed-bundle__tier-price{ font-size:clamp(20px, 5.2vw, 24px); } .ed-bundle__tier-compare{ font-size:clamp(14px, 4.2vw, 18px); } } /* ========================================= Bundle Editor ========================================= */ .ed-bundle__editor{ display:none; padding-top:12px; } .ed-bundle__editor.is-open{ display:block; } .ed-bundle__editor-grid{ display:grid; gap:12px; } .ed-bundle__line{ display:grid; grid-template-columns:48px 1fr 1fr; gap:10px; align-items:end; } .ed-bundle__line-thumb{ width:48px; height:48px; border-radius:10px; background:rgba(255,255,255,.08); } .ed-bundle__field label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-bottom:6px; } /* ========================================= Bundle popout dropdown ========================================= */ .ed-line-popout{ position:relative; width:100%; } .ed-line-popout__toggle{ width:100%; height:44px; padding:10px 12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.18); color:#fff; text-align:left; cursor:pointer; } .ed-line-popout__toggle:after{ content:""; float:right; width:0; height:0; margin-top:8px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #f1cf54; } .ed-line-popout__menu{ position:absolute; left:0; right:0; top:calc(100% + 8px); max-width:100%; background:#000; border:1px solid rgba(255,255,255,.18); overflow-y:auto; max-height:min(260px, calc(100vh - 160px)); z-index:9999; box-shadow:0 18px 50px rgba(0,0,0,.55); } .ed-line-popout__option{ width:100%; padding:12px; background:transparent; border:0; color:#fff; text-align:left; cursor:pointer; } .ed-line-popout__option:hover{ background:rgba(255,255,255,.06); } .ed-bundle__line.is-invalid .ed-line-popout__toggle{ outline:2px solid rgba(255,80,80,.75); outline-offset:2px; } /* ========================================= Hide main quantity selector on bundle PDPs ========================================= */ html.ed-bundle-active .product__block__quantity, html.ed-bundle-active .quantity__wrapper[data-quantity-selector], html.ed-bundle-active input.quantity__input[data-quantity-input]{ display:none !important; } html.ed-bundle-active .product__block__quantity{ margin:0 !important; padding:0 !important; } /* ========================================= Mobile: editor stacks ========================================= */ @media (max-width:520px){ .ed-bundle__line{ grid-template-columns:44px 1fr; align-items:start; } .ed-bundle__line .ed-bundle__field{ grid-column:2 / -1; } .ed-bundle__line-thumb{ width:44px; height:44px; } .ed-line-popout__toggle{ height:42px; } } /* ========================================= 1-pack "Please select a size" warning ========================================= */ .ed-size-error{ margin:10px 0 8px; font-weight:700; letter-spacing:.01em; color:#ff3b3b; } .ed-size-error--focus{ outline:2px solid rgba(255,59,59,.85) !important; outline-offset:2px !important; } body.template-product .product__main__content .selector-wrapper--color { margin-bottom: 2px !important; } body.template-product .product__main__content .selector-wrapper[data-select-label="Size"] { margin-top: 0 !important; } body.template-product .product__price__main .glc-money { color: #F1CF54 !important; } body.template-product .select-popout__item, body.template-product .select-popout__option, body.template-product .select-popout__option span, body.template-product .select-popout__option.unavailable, body.template-product .select-popout__option.unavailable span { opacity: 1 !important; } body.template-product .select-popout__option.unavailable, body.template-product .select-popout__option.unavailable span { text-decoration: none !important; } /* ========================================= RETURN PORTAL — GLOBAL DARK THEME ========================================= */ /* First page card */ .return-card { background: #000 !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: none !important; font-family: var(--FONT-STACK-BODY) !important; } .return-card * { font-family: var(--FONT-STACK-BODY) !important; } /* Second page and later steps */ .return-widget-container, .return-widget-container * { font-family: var(--FONT-STACK-BODY) !important; } .return-widget-container { background: #000 !important; color: #fff !important; } /* ========================================= TYPOGRAPHY ========================================= */ .return-card .return-title, .return-widget-container h1, .return-widget-container h2, .return-widget-container h3, .return-widget-container h4, .return-widget-container #funnel-title, .return-widget-container #funnel-amount { color: #fff !important; font-family: var(--FONT-STACK-BODY) !important; } .return-card .return-subtitle, .return-widget-container .return-subtitle, .return-widget-container p, .return-widget-container span, .return-widget-container label, .return-widget-container .card p, .return-widget-container #funnel-description, .return-widget-container #funnel-no-more p { color: rgba(255,255,255,0.72) !important; } .return-card .form-label, .return-widget-container .form-label { color: #fff !important; } /* Fix app inline text colors */ .return-card p[style*="color: #6d7175"], .return-widget-container [style*="color: #6d7175"] { color: rgba(255,255,255,0.55) !important; } .return-widget-container [style*="color: #202223"] { color: #fff !important; } /* ========================================= INPUTS / FIELDS ========================================= */ .return-card .form-input, .return-card .form-select, .return-widget-container .form-input, .return-widget-container .form-select, .return-widget-container input, .return-widget-container select, .return-widget-container textarea { background: #000 !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: none !important; border-radius: 8px !important; } .return-card .form-input::placeholder, .return-widget-container .form-input::placeholder, .return-widget-container input::placeholder, .return-widget-container textarea::placeholder { color: rgba(255,255,255,0.45) !important; } .return-widget-container option, .return-widget-container optgroup { background: #111 !important; color: #fff !important; } /* ========================================= DIVIDERS / BORDERS ========================================= */ .return-card .divider, .return-widget-container .divider { color: rgba(255,255,255,0.5) !important; } .return-card [style*="border-top: 1px solid #e1e3e5"], .return-widget-container [style*="border-top: 1px solid #e1e3e5"] { border-top: 1px solid rgba(255,255,255,0.12) !important; } .return-widget-container hr, .return-widget-container [style*="border-bottom"] { border-color: rgba(255,255,255,0.16) !important; } /* ========================================= LINKS ========================================= */ .return-card a, .return-widget-container a { color: #F1CF54 !important; } .return-widget-container .back-link { color: rgba(255,255,255,0.72) !important; text-decoration: none !important; } .return-widget-container .back-link:hover { color: #fff !important; } /* ========================================= BUTTONS ========================================= */ .return-card .submit-btn, .return-widget-container .btn, .return-widget-container button, .return-widget-container .btn-primary, .return-widget-container .btn-secondary { background: #F1CF54 !important; color: #000 !important; border: none !important; box-shadow: none !important; font-family: var(--FONT-STACK-BODY) !important; letter-spacing: 0.06em !important; border-radius: 8px !important; text-transform: uppercase !important; /* ← THIS is the key */ } .return-card .submit-btn:hover, .return-widget-container .btn:hover, .return-widget-container button:hover, .return-widget-container .btn-primary:hover { opacity: 0.92; } .return-widget-container .btn-secondary, .return-widget-container button.btn-secondary { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 8px !important; box-shadow: none !important; } .return-widget-container .btn-secondary:hover, .return-widget-container button.btn-secondary:hover { border-color: rgba(255,255,255,0.3) !important; } .return-widget-container .btn-primary:disabled, .return-widget-container .btn-primary[disabled] { background: rgba(241,207,84,0.45) !important; color: rgba(0,0,0,0.7) !important; cursor: not-allowed; } /* ========================================= PROGRESS BAR / STEP FLOW ========================================= */ .return-widget-container .progress-bar, .return-widget-container .progress-steps { background: transparent !important; } .return-widget-container .progress-step { position: relative; } .return-widget-container .step-circle { background: #000 !important; color: rgba(255,255,255,0.72) !important; border: 2px solid rgba(255,255,255,0.28) !important; box-shadow: none !important; } .return-widget-container .progress-step.active .step-circle, .return-widget-container .step-circle.active, .return-widget-container .step-circle.current, .return-widget-container .step-circle#step-1-circle.active, .return-widget-container .step-circle#step-2-circle.active, .return-widget-container .step-circle#step-3-circle.active, .return-widget-container .step-circle#step-4-circle.active { background: #000 !important; color: #fff !important; border-color: #F1CF54 !important; } .step-label, .return-widget-container .step-label { color: rgba(255,255,255,0.75) !important; font-family: var(--FONT-STACK-BODY) !important; } .return-widget-container .progress-step.active .step-label, .return-widget-container .active .step-label, .step.active .step-label, .active .step-label { color: #fff !important; } /* ========================================= CARDS / PANELS ========================================= */ .return-widget-container .card, .return-widget-container .step-content { background: #000 !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: none !important; border-radius: 10px !important; } /* ========================================= ITEM SELECTION ========================================= */ .return-widget-container .item-card { background: #0b0b0b !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 10px !important; color: #fff !important; } .return-widget-container .item-card.selected { border-color: #F1CF54 !important; box-shadow: 0 0 0 1px rgba(241,207,84,0.25) inset !important; } .return-widget-container .item-card h4, .return-widget-container .item-card p { color: #fff !important; } .return-widget-container .item-checkbox-custom { border: 1px solid rgba(255,255,255,0.24) !important; background: transparent !important; } .return-widget-container .item-checkbox-custom.checked { background: #F1CF54 !important; border-color: #F1CF54 !important; } /* ========================================= RETURN REASONS / RADIO GROUPS ========================================= */ .return-widget-container .radio-group { display: grid; gap: 10px; } .return-widget-container .radio-group label { display: flex; align-items: center; gap: 12px; background: #0b0b0b !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 10px !important; padding: 14px 16px !important; color: #fff !important; cursor: pointer; } .return-widget-container .radio-group label:hover { border-color: rgba(241,207,84,0.45) !important; } .return-widget-container .radio-group input[type="radio"] { accent-color: #F1CF54; } .return-widget-container .radio-group input[type="radio"] + span { color: #fff !important; } /* ========================================= FUNNEL / REFUND OFFER ========================================= */ .return-widget-container #funnel-offer, .return-widget-container #funnel-no-more { color: #fff !important; } .return-widget-container #funnel-description { color: rgba(255,255,255,0.72) !important; } .return-widget-container .offer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .return-widget-container .offer-badge { background: #111 !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #fff !important; border-radius: 999px !important; padding: 8px 12px !important; font-size: 13px !important; } .return-widget-container .offer-badge-check { color: #F1CF54 !important; margin-right: 6px; } .return-widget-container .offer-note { border-radius: 8px !important; padding: 12px 14px !important; } .return-widget-container .offer-note-warning { background: rgba(241,207,84,0.08) !important; border: 1px solid rgba(241,207,84,0.22) !important; color: rgba(255,255,255,0.85) !important; } .return-widget-container .offer-note-info { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.82) !important; } /* ========================================= HELP / FOOTER ========================================= */ .return-widget-container a[href^="mailto:"] { color: #F1CF54 !important; text-decoration: none !important; } .return-widget-container a[href^="mailto:"]:hover { opacity: 0.92; } .return-widget-container div[style*="text-align: center"] p { color: rgba(255,255,255,0.6) !important; } /* ========================================= CTA / REVIEW LABEL FIXES ========================================= */ /* Base CTA styling */ .return-widget-container #funnel-accept { background: #F1CF54 !important; color: #000 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; font-family: var(--FONT-STACK-BODY) !important; font-weight: 500 !important; letter-spacing: 0.04em !important; position: relative; } /* Exchange state */ .return-widget-container #funnel-exchange-variants[style*="display: block"] ~ div[style*="flex"] #funnel-accept, .return-widget-container #funnel-warning[style*="display: block"] ~ div[style*="flex"] #funnel-accept { font-size: 0 !important; } .return-widget-container #funnel-exchange-variants[style*="display: block"] ~ div[style*="flex"] #funnel-accept::after, .return-widget-container #funnel-warning[style*="display: block"] ~ div[style*="flex"] #funnel-accept::after { content: "EXCHANGE ITEM"; font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: #000; font-family: var(--FONT-STACK-BODY) !important; } /* Refund state */ .return-widget-container #funnel-exchange-variants[style*="display: none"] ~ div[style*="flex"] #funnel-accept, .return-widget-container #funnel-partial-note[style*="display: block"] ~ div[style*="flex"] #funnel-accept { font-size: 0 !important; } .return-widget-container #funnel-exchange-variants[style*="display: none"] ~ div[style*="flex"] #funnel-accept::after, .return-widget-container #funnel-partial-note[style*="display: block"] ~ div[style*="flex"] #funnel-accept::after { content: "KEEP ITEM & GET REFUND"; font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: #000; font-family: var(--FONT-STACK-BODY) !important; } /* ========================================= SMART SECONDARY BUTTON TEXT ========================================= */ .return-widget-container #funnel-decline { background: transparent !important; border: none !important; color: rgba(255,255,255,0.58) !important; font-family: var(--FONT-STACK-BODY) !important; font-size: 0 !important; cursor: pointer !important; padding: 8px !important; text-decoration: none !important; box-shadow: none !important; position: relative; text-transform: uppercase !important; } /* EXCHANGE SCREEN */ .return-widget-container #funnel-warning[style*="display: block"] ~ div #funnel-decline::after { content: "VIEW REFUND OPTION"; font-size: 13px; color: rgba(255,255,255,0.58); } /* REFUND SCREEN */ .return-widget-container #funnel-partial-note[style*="display: block"] ~ div #funnel-decline::after { content: "VIEW OTHER OPTIONS"; font-size: 13px; color: rgba(255,255,255,0.58); } /* Hover */ .return-widget-container #funnel-decline:hover::after { color: rgba(255,255,255,0.82) !important; } .return-widget-container #funnel-decline:hover::after { color: rgba(255,255,255,0.82) !important; } /* Review page address label only */ .return-widget-container #review-content .review-item:nth-child(2) > strong { position: relative; font-size: 0 !important; } .return-widget-container #review-content .review-item:nth-child(2) > strong::after { content: "Return Address:"; font-size: 16px; font-weight: 600; color: #fff; font-family: var(--FONT-STACK-BODY) !important; } .enx-stock-status { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 4px; } .enx-stock-status__left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; overflow: visible !important; } .enx-stock-status__text { font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.2px; color: #f3f3f3; white-space: nowrap; } .enx-stock-status__dot { position: relative; width: 10px; height: 10px; min-width: 10px; min-height: 10px; border-radius: 50%; flex-shrink: 0; overflow: visible !important; } /* ---------------- LOW STOCK (RED PULSE) ---------------- */ .enx-stock-status.is-low-stock .enx-stock-status__dot { background: #ff6a57; } .enx-stock-status.is-low-stock .enx-stock-status__dot::before, .enx-stock-status.is-low-stock .enx-stock-status__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 106, 87, 0.55); transform: translate(-50%, -50%) scale(1); animation: enx-pulse-red 2.2s ease-out infinite; pointer-events: none; } .enx-stock-status.is-low-stock .enx-stock-status__dot::after { animation-delay: 1.1s; } @keyframes enx-pulse-red { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 70% { transform: translate(-50%, -50%) scale(2.4); opacity: 0.25; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } } /* ---------------- IN STOCK (GREEN PULSE) ---------------- */ .enx-stock-status.is-in-stock .enx-stock-status__dot { background: #22c55e; } .enx-stock-status.is-in-stock .enx-stock-status__dot::before, .enx-stock-status.is-in-stock .enx-stock-status__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(34, 197, 94, 0.5); transform: translate(-50%, -50%) scale(1); animation: enx-pulse-green 2.6s ease-out infinite; pointer-events: none; } .enx-stock-status.is-in-stock .enx-stock-status__dot::after { animation-delay: 1.3s; } @keyframes enx-pulse-green { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; } 70% { transform: translate(-50%, -50%) scale(2.6); opacity: 0.2; } 100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } } /* ---------------- BAR ---------------- */ .enx-low-stock-bar { position: relative; height: 4px; flex: 1; background: #2f2f2f; border-radius: 999px; overflow: hidden; } .enx-low-stock-bar__fill { display: block; width: 10%; height: 100%; background: #ff6a57; border-radius: 999px; } .trust-box { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .trust-image { border-radius: 50%; object-fit: cover; } .trust-text { font-size: 13px; color: #a1a1a1; /* muted luxury grey */ line-height: 1.4; } .trust-text strong { color: #fff; font-weight: 600; } /* full scrollbar background bar */ .collection-split .collection-split__products .custom-scrollbar.small-down--show, .section-list-collections .custom-scrollbar.small-down--show, .custom-scrollbar.small-down--show, .custom-scrollbar[data-custom-scrollbar] { background: #2A2A2A !important; border-radius: 999px; } /* active / current position bar */ .custom-scrollbar__track, .custom-scrollbar[data-custom-scrollbar] .custom-scrollbar__track { background: #B8B8B8 !important; /* change if you want */ border-radius: 999px; } /* Layout */ .product__price { display: inline-flex; align-items: center; gap: 8px; } /* Current price (gold) */ .product__price--sale, [data-product-price] { color: #c6a75e !important; } /* Compare price (muted gold) */ .product__price--compare { color: #8f7a2f !important; opacity: 0.55; text-decoration: line-through; } /* SALE TODAY badge */ .product__price__main .product__price--off, .product__price__main .product__price--off span, .product__price__main .product__price--off [data-price-off-type], .product__price__main .product__sale-today-label, .product__price__main .product__sale-today-label span { color: #34C759 !important; letter-spacing: 0.08em; font-weight: 600; } .grid__swatch__placeholder { color: #ffffff !important; } [data-price-off-type] { font-size: 0 !important; } [data-price-off-type]::after { content: "Sale Today"; font-size: 12px !important; line-height: inherit !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #34C759 !important; } /* MOBILE ONLY: make collection split products 2x2 instead of carousel */ @media screen and (max-width: 749px) { .collection-split .grid[data-custom-scrollbar-items] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; --grid-small-items: 2 !important; } .collection-split .grid[data-custom-scrollbar-items] .grid__item, .collection-split .collection-split__product { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; scroll-snap-align: unset !important; } .collection-split .product-grid-item__container { width: 100% !important; margin: 0 !important; } /* Hide mobile carousel scrollbar */ .collection-split .collection-split__products .custom-scrollbar.small-down--show, .collection-split .custom-scrollbar[data-custom-scrollbar] { display: none !important; } } /* MOBILE ONLY: stack collection carousel items 1x1x1 */ @media screen and (max-width: 749px) { .section-list-collections .grid[data-carousel][data-custom-scrollbar-items], .grid.flickity-disabled-mobile[data-carousel][data-custom-scrollbar-items] { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; --grid-small-items: 1 !important; } .section-list-collections .grid[data-carousel][data-custom-scrollbar-items] .grid__item, .grid.flickity-disabled-mobile[data-carousel][data-custom-scrollbar-items] .grid__item { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: none !important; position: relative !important; left: auto !important; transform: none !important; scroll-snap-align: unset !important; } .section-list-collections .custom-scrollbar.small-down--show, .section-list-collections .custom-scrollbar[data-custom-scrollbar] { display: none !important; } } /* MOBILE ONLY: testimonials stacked + truly centered */ @media screen and (max-width: 749px) { div[data-grid-flex][data-custom-scrollbar-items]:has(.index__column.grid__item.slide-item) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100vw !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; overflow-x: hidden !important; transform: none !important; left: auto !important; right: auto !important; box-sizing: border-box !important; --grid-small-items: 1 !important; } div[data-grid-flex][data-custom-scrollbar-items]:has(.index__column.grid__item.slide-item) > .index__column.grid__item.slide-item { width: 86% !important; max-width: 360px !important; min-width: 0 !important; flex: none !important; flex-basis: auto !important; display: block !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 34px !important; padding-left: 0 !important; padding-right: 0 !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important; text-align: center !important; box-sizing: border-box !important; } div[data-grid-flex][data-custom-scrollbar-items]:has(.index__column.grid__item.slide-item) h3, div[data-grid-flex][data-custom-scrollbar-items]:has(.index__column.grid__item.slide-item) .rte, div[data-grid-flex][data-custom-scrollbar-items]:has(.index__column.grid__item.slide-item) .rte--column, div[data-grid-flex][data-custom-scrollbar-items]:has(.index__column.grid__item.slide-item) p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= FLAT DRAWER MENU — FINAL CLEAN VERSION ========================================================= */ /* Drawer scroll */ .drawer[data-drawer="hamburger"] .drawer__content { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } .drawer[data-drawer="hamburger"] .drawer__inner { min-height: 0 !important; overflow: hidden !important; } .drawer[data-drawer="hamburger"] .drawer__menu { display: flex !important; flex-direction: column !important; height: calc(100vh - 70px) !important; max-height: calc(100vh - 70px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 34px 0 32px !important; background: #000 !important; } /* Section spacing */ .drawer-flat-menu__section { margin: 0 0 28px !important; padding: 0 !important; } .drawer-flat-menu__section:first-child { margin-top: 0 !important; } .drawer-flat-menu__item + .drawer-flat-menu__section { margin-top: 34px !important; } /* Muted category headers */ .drawer-flat-menu__heading { display: block !important; margin: 0 38px 16px !important; padding: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.13em !important; line-height: 1.2 !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.38) !important; text-decoration: none !important; } /* Full row links */ .drawer-flat-menu__link, .drawer-flat-menu__single { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: auto !important; margin: 0 38px !important; padding: 9px 0 !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.085em !important; line-height: 1.25 !important; text-transform: uppercase !important; color: #fff !important; text-decoration: none !important; } /* Text itself */ .drawer-flat-menu__text { position: relative !important; display: inline-block !important; } /* Underline relative to word width */ .drawer-flat-menu__text::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -5px !important; width: 100% !important; height: 1px !important; background: #F1CF54 !important; transform: translateX(-50%) scaleX(0) !important; transform-origin: center !important; transition: transform 0.28s ease !important; } .drawer-flat-menu__link:hover .drawer-flat-menu__text::after, .drawer-flat-menu__single:hover .drawer-flat-menu__text::after { transform: translateX(-50%) scaleX(1) !important; } /* Do not turn text gold on hover */ .drawer-flat-menu__link:hover, .drawer-flat-menu__single:hover { color: #fff !important; } /* Right aligned arrow for normal clickable links */ .drawer-flat-menu__link[href]::after, .drawer-flat-menu__single[href]::after { content: "›" !important; margin-left: auto !important; padding-left: 24px !important; font-size: 24px !important; font-weight: 300 !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.72) !important; transition: transform 0.22s ease !important; } .drawer-flat-menu__link:hover::after, .drawer-flat-menu__single:hover::after { color: rgba(255, 255, 255, 0.72) !important; transform: translateX(3px) !important; } /* Standalone item spacing */ .drawer-flat-menu__item { margin: 0 0 10px !important; padding: 0 !important; } /* Push footer group to bottom */ .drawer-flat-menu__item:has(> .drawer-flat-menu__single[href="/pages/contact"]) { margin-top: auto !important; } /* Footer utility links */ .drawer-flat-menu__single[href="/pages/contact"], .drawer-flat-menu__single[href="/apps/track"], .drawer-flat-menu__single[href="/apps/return"] { display: inline-flex !important; align-self: flex-start !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.08em !important; color: rgba(255, 255, 255, 0.42) !important; margin-left: 30px !important; margin-right: 0 !important; padding: 6px 0 !important; } /* Footer links stay muted */ .drawer-flat-menu__single[href="/pages/contact"]:hover, .drawer-flat-menu__single[href="/apps/track"]:hover, .drawer-flat-menu__single[href="/apps/return"]:hover { color: rgba(255, 255, 255, 0.42) !important; } /* No arrows on footer links */ .drawer-flat-menu__single[href="/pages/contact"]::after, .drawer-flat-menu__single[href="/apps/track"]::after, .drawer-flat-menu__single[href="/apps/return"]::after { content: none !important; display: none !important; } /* No underline on muted section headers */ .drawer-flat-menu__heading::before, .drawer-flat-menu__heading::after { display: none !important; } /* Mobile */ @media screen and (max-width: 749px) { .drawer[data-drawer="hamburger"] .drawer__menu { height: calc(100vh - 64px) !important; max-height: calc(100vh - 64px) !important; padding: 28px 0 32px !important; } .drawer-flat-menu__heading { margin-left: 30px !important; margin-right: 30px !important; font-size: 12px !important; } .drawer-flat-menu__link, .drawer-flat-menu__single { margin-left: 30px !important; margin-right: 30px !important; font-size: 15px !important; } .drawer-flat-menu__single[href="/pages/contact"], .drawer-flat-menu__single[href="/apps/track"], .drawer-flat-menu__single[href="/apps/return"] { margin-left: 30px !important; margin-right: 0 !important; } } /* ========================================================= TOP FEATURE LINKS — Rewards / VIP / Blog ========================================================= */ /* Make these top links bigger */ .drawer-flat-menu__single[href="/pages/rewards"], .drawer-flat-menu__single[href="/pages/vip"], .drawer-flat-menu__single[href="/blogs/sovereign-threads"] { font-size: 18px !important; font-weight: 500 !important; letter-spacing: 0.11em !important; color: #fff !important; margin-left: 38px !important; margin-right: 38px !important; padding: 12px 0 !important; } /* Remove arrows from these 3 */ .drawer-flat-menu__single[href="/pages/rewards"]::after, .drawer-flat-menu__single[href="/pages/vip"]::after, .drawer-flat-menu__single[href="/blogs/sovereign-threads"]::after { content: none !important; display: none !important; } /* Keep text white on hover */ .drawer-flat-menu__single[href="/pages/rewards"]:hover, .drawer-flat-menu__single[href="/pages/vip"]:hover, .drawer-flat-menu__single[href="/blogs/sovereign-threads"]:hover { color: #fff !important; } /* Optional: add space under these before OUTERWEAR */ .drawer-flat-menu__single[href="/blogs/sovereign-threads"] { margin-bottom: 36px !important; } /* Footer utility links — lighter on hover */ .drawer-flat-menu__single[href="/pages/contact"]:hover, .drawer-flat-menu__single[href="/apps/track"]:hover, .drawer-flat-menu__single[href="/apps/return"]:hover { color: rgba(255, 255, 255, 0.72) !important; } /* PDP size radio selected state: black letter on selected box */ body.template-product .radio__button input[type="radio"]:checked + label, body.template-product .radio__button input[type="radio"]:checked + label span { color: #000 !important; } /* Keep unselected size letters white */ body.template-product .radio__button input[type="radio"]:not(:checked) + label, body.template-product .radio__button input[type="radio"]:not(:checked) + label span { color: #fff !important; } /* Remove the theme's crossed-out unavailable look */ body.template-product .radio__button input.unavailable + label, body.template-product .radio__button input.unavailable + label span { opacity: 1 !important; text-decoration: none !important; } body.template-product .radio__button input.unavailable + label::before, body.template-product .radio__button input.unavailable + label::after, body.template-product .radio__button input.unavailable + label span::before, body.template-product .radio__button input.unavailable + label span::after { display: none !important; content: none !important; } /* Selected available size text black */ body.template-product .radio__button input[type="radio"]:checked:not([value="S"]) + label, body.template-product .radio__button input[type="radio"]:checked:not([value="S"]) + label span { color: #000 !important; opacity: 1 !important; } .cart__footer__savings, .cart__footer__savings .cart__footer__label, .cart__footer__savings .cart__footer__savings-value { color: #34C759 !important; } /* Sale price green */ .product__grid__price .price.on-sale, .product__grid__price .price.on-sale .glc-money { color: #34C759 !important; } /* Hide "2 colors available" */ .grid__swatch__container .grid__swatch__placeholder { display: none !important; } /* Keep original theme sizing, just force hover swatches visible */ .grid__swatch__container .grid__swatch__hover { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; position: static !important; } /* Collection swatches: circular elegant color dots, no product thumbnails */ .grid__swatch__container .swatch__button label { border-radius: 50% !important; overflow: hidden !important; background-image: none !important; --swatch-image: none !important; background: var(--swatch, #d8d8d8) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) !important; } /* Global collection swatch color map */ .grid__swatch__container label[data-swatch="Black"] { --swatch: #0A0A0B !important; } .grid__swatch__container label[data-swatch="White"] { --swatch: #F8F7F3 !important; } .grid__swatch__container label[data-swatch="Cream"] { --swatch: #EDE3CE !important; } .grid__swatch__container label[data-swatch="Beige"] { --swatch: #D8C4A8 !important; } .grid__swatch__container label[data-swatch="Brown"] { --swatch: #70503C !important; } .grid__swatch__container label[data-swatch="Grey"], .grid__swatch__container label[data-swatch="Gray"] { --swatch: #98989A !important; } .grid__swatch__container label[data-swatch="Charcoal"], .grid__swatch__container label[data-swatch="Charcoal Grey"], .grid__swatch__container label[data-swatch="Charcoal Gray"] { --swatch: #424244 !important; } .grid__swatch__container label[data-swatch="Navy"] { --swatch: #1D2B43 !important; } .grid__swatch__container label[data-swatch="Green"] { --swatch: #3D664D !important; } .grid__swatch__container label[data-swatch="Red"] { --swatch: #9B4945 !important; } .grid__swatch__container label[data-swatch="Gold"] { --swatch: #BBA16A !important; } .grid__swatch__container label[data-swatch="Silver"] { --swatch: #C2C0BB !important; } .grid__swatch__container label[data-swatch="Cheetah"] { --swatch: #C58D4F !important; } .grid__swatch__container label[data-swatch="Snow Leopard"] { --swatch: #BFC1C4 !important; } /* Fix collection swatches getting cut off at bottom */ .grid__swatch__container { overflow: visible !important; padding-bottom: 8px !important; margin-bottom: 4px !important; } .grid__swatch__container .grid__swatch__hover { overflow: visible !important; padding-bottom: 6px !important; } .grid__swatch__container .swatch__button { overflow: visible !important; } .grid__swatch__container .swatch__button label { overflow: hidden !important; } /* MOBILE ONLY: product image count indicator blocks */ @media screen and (max-width: 749px) { .product-grid-item, .product-grid-item__container, .grid__item { position: relative !important; } .en-mobile-image-dots { position: absolute !important; left: 50% !important; top: auto !important; bottom: -14px !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: auto !important; margin: 0 !important; z-index: 50 !important; pointer-events: none !important; } .en-mobile-image-dot { display: block !important; width: 11px !important; height: 3px !important; border-radius: 999px !important; background: rgba(170, 170, 170, 0.35) !important; transition: all 0.22s ease !important; } .en-mobile-image-dot.is-active { width: 18px !important; background: #F1CF54 !important; } } /* ========================================================= IPHONE BURGER MENU SCROLL FIX — CLEAN VERSION ========================================================= */ @media screen and (max-width: 899px) { .drawer[data-drawer="hamburger"] { z-index: 99999 !important; } .drawer[data-drawer="hamburger"] .drawer__content { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; background: #000 !important; } .drawer[data-drawer="hamburger"] .drawer__inner[data-drawer-scrolls] { height: calc(100dvh - 64px) !important; max-height: calc(100dvh - 64px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; background: #000 !important; } .drawer[data-drawer="hamburger"] .drawer__menu { height: auto !important; max-height: none !important; min-height: auto !important; overflow: visible !important; background: #000 !important; padding-bottom: 0 !important; } .drawer[data-drawer="hamburger"] .drawer__promo { background: #000 !important; } .drawer[data-drawer="hamburger"] .drawer__promo-image { height: 150px !important; } .drawer-flat-menu__item:has(> .drawer-flat-menu__single[href="/pages/contact"]) { margin-top: 34px !important; } } /* Push Contact / Track / Manage to bottom-left of burger menu */ @media screen and (max-width: 899px) { .drawer[data-drawer="hamburger"] .drawer__inner[data-drawer-scrolls] { display: flex !important; flex-direction: column !important; } .drawer[data-drawer="hamburger"] .drawer__menu { display: flex !important; flex-direction: column !important; min-height: 100% !important; } .drawer-flat-menu__item:has(> .drawer-flat-menu__single[href="/pages/contact"]) { margin-top: auto !important; padding-top: 48px !important; } .drawer-flat-menu__single[href="/pages/contact"], .drawer-flat-menu__single[href="/apps/track"], .drawer-flat-menu__single[href="/apps/return"] { margin-left: 16px !important; margin-right: 0 !important; padding: 8px 0 !important; font-size: 12px !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.42) !important; } } /* ========================================================= COLLECTION SWATCHES — no border + underline active label ========================================================= */ /* remove border/ring */ .grid__swatch__container radio-swatch.swatch__button label, .grid__swatch__container .swatch__button label { border: 0 !important; box-shadow: none !important; outline: 0 !important; position: relative !important; overflow: visible !important; } /* underline base */ .grid__swatch__container radio-swatch.swatch__button label::before, .grid__swatch__container .swatch__button label::before { content: "" !important; position: absolute !important; left: 50% !important; bottom: -8px !important; width: 28px !important; height: 1px !important; background: #F1CF54 !important; transform: translateX(-50%) scaleX(0) !important; transform-origin: center !important; display: block !important; opacity: 1 !important; pointer-events: none !important; z-index: 20 !important; } /* show underline only on active label */ .grid__swatch__container radio-swatch.swatch__button label.is-active::before, .grid__swatch__container .swatch__button label.is-active::before { transform: translateX(-50%) scaleX(1) !important; } /* Product image area should never be white behind images */ .product-grid-item, .product-grid-item__container, .product__grid__image, .product__grid__image__link, .product-item__image, [data-grid-image], .grid__image { background-color: #000 !important; } /* when JS active exists, don't force first one */ .grid__swatch__container:has(label.is-active) radio-swatch.swatch__button:first-of-type label:not(.is-active)::before, .grid__swatch__container:has(label.is-active) .swatch__button:first-of-type label:not(.is-active)::before { transform: translateX(-50%) scaleX(0) !important; } /* ========================================================= PRODUCT PAGE BOTTOM COLLECTION CARDS — SHOW REAL THEME SWATCHES Safe: only affects product page product-grid-item swatches ========================================================= */ /* Hide empty Variant King wrapper on product page cards */ .template-product product-grid-item variant-king-combined-listing { display: none !important; } /* Make product info area allow swatches to show */ .template-product product-grid-item .product__grid__info { overflow: visible !important; height: auto !important; max-height: none !important; padding-bottom: 24px !important; } /* Show swatch container */ .template-product product-grid-item .product__grid__info .grid__swatch__container { display: block !important; opacity: 1 !important; visibility: visible !important; height: auto !important; max-height: none !important; min-height: 42px !important; overflow: visible !important; margin-top: 12px !important; position: relative !important; z-index: 20 !important; } /* Hide "2 colors available" text */ .template-product product-grid-item .product__grid__info .grid__swatch__placeholder { display: none !important; } /* Force actual swatch form visible */ .template-product product-grid-item .product__grid__info .grid__swatch__hover { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; height: auto !important; max-height: none !important; width: 100% !important; overflow: visible !important; } /* Force each swatch button visible */ .template-product product-grid-item .product__grid__info radio-swatch.swatch__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; position: relative !important; flex: 0 0 auto !important; } /* Hide radio input but keep label clickable */ .template-product product-grid-item .product__grid__info radio-swatch.swatch__button input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } /* Actual visible circle */ .template-product product-grid-item .product__grid__info radio-swatch.swatch__button label { display: block !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border-radius: 50% !important; background-color: var(--swatch, #e5e5e5) !important; background-image: none !important; opacity: 1 !important; visibility: visible !important; position: relative !important; overflow: visible !important; cursor: pointer !important; } /* ========================================================= COLLECTION + PRODUCT PAGE SWATCHES — SUBTLE GOLD OUTLINE Helps black swatches show on black background ========================================================= */ .grid__swatch__container radio-swatch.swatch__button label, .grid__swatch__container .swatch__button label { border: 1px solid rgba(241, 207, 84, 0.35) !important; box-shadow: 0 0 0 1px rgba(241, 207, 84, 0.08) !important; } /* Slightly stronger on hover/focus */ .grid__swatch__container radio-swatch.swatch__button label:hover, .grid__swatch__container .swatch__button label:hover, .grid__swatch__container radio-swatch.swatch__button label:focus, .grid__swatch__container .swatch__button label:focus { border-color: rgba(241, 207, 84, 0.65) !important; box-shadow: 0 0 0 1px rgba(241, 207, 84, 0.18) !important; } /* Active swatch */ .grid__swatch__container radio-swatch.swatch__button label.is-active, .grid__swatch__container .swatch__button label.is-active { border-color: rgba(241, 207, 84, 0.85) !important; box-shadow: 0 0 0 1px rgba(241, 207, 84, 0.22) !important; } /* ========================================================= MOBILE COLLECTION TABS + FILTER BAR — FINAL LAYERING Drawer > sticky tabs/filter > product badges ========================================================= */ @media screen and (max-width: 749px) { :root { --mobile-header-height: 48px; --mobile-tabs-height: 30px; --mobile-filter-lift: 10px; } /* Sticky collection tabs */ [class^="ai-sticky-tabs-"].is-sticky { z-index: 100 !important; } [class^="ai-sticky-tabs-bar-"] { background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } /* Filter/sort bar — lifted slightly higher */ nav.collection__nav[data-collection-tools] { position: sticky !important; top: calc(var(--mobile-header-height) + var(--mobile-tabs-height) - var(--mobile-filter-lift)) !important; z-index: 99 !important; margin-top: calc(var(--mobile-filter-lift) * -1) !important; padding-top: 0 !important; background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } nav.collection__nav[data-collection-tools]::before { display: none !important; content: none !important; } nav.collection__nav[data-collection-tools] .collection__nav__buttons, nav.collection__nav[data-collection-tools] .collection__layout, nav.collection__nav[data-collection-tools] button, nav.collection__nav[data-collection-tools] .popout--navbar, nav.collection__nav[data-collection-tools] .popout__toggle { background: transparent !important; } /* Product sale badge must stay below tabs/filter */ .product__badge, .product__badge--sale, .product__badge.product__badge--sale { z-index: 1 !important; } .product-grid-item, .product-grid-item__container, .grid__item { position: relative !important; z-index: 0 !important; } /* Drawer must stay above everything */ [data-drawer="hamburger"], .drawer[data-drawer="hamburger"], .drawer[data-drawer="hamburger"] .drawer__content, .drawer[data-drawer="hamburger"] .drawer__inner, .drawer[data-drawer="hamburger"] .drawer__menu, #header-menu { z-index: 99999 !important; } } /* Cart free shipping success message */ .cart__message-success { color: #34C759 !important; } /* Hide scrollbar inside mobile drawer menu */ .drawer__inner, .drawer__content, .drawer__scrolls, .drawer__menu, .drawer[data-drawer="hamburger"] { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* old Edge */ } .drawer__inner::-webkit-scrollbar, .drawer__content::-webkit-scrollbar, .drawer__scrolls::-webkit-scrollbar, .drawer__menu::-webkit-scrollbar, .drawer[data-drawer="hamburger"]::-webkit-scrollbar { display: none !important; /* Chrome/Safari/iPhone */ } /* ========================================================= TOP FEATURE LINKS — Gold underline hover fallback For VIP / Rewards / Sovereign Threads ========================================================= */ .drawer-flat-menu__single[href="/pages/rewards"], .drawer-flat-menu__single[href="/pages/vip"], .drawer-flat-menu__single[href="/blogs/sovereign-threads"] { position: relative !important; display: inline-flex !important; width: fit-content !important; } /* gold underline directly on the link */ .drawer-flat-menu__single[href="/pages/rewards"]::before, .drawer-flat-menu__single[href="/pages/vip"]::before, .drawer-flat-menu__single[href="/blogs/sovereign-threads"]::before { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; width: 100% !important; height: 1px !important; background: #F1CF54 !important; transform: translateX(-50%) scaleX(0) !important; transform-origin: center !important; transition: transform 0.28s ease !important; display: block !important; pointer-events: none !important; } /* show underline on hover */ .drawer-flat-menu__single[href="/pages/rewards"]:hover::before, .drawer-flat-menu__single[href="/pages/vip"]:hover::before, .drawer-flat-menu__single[href="/blogs/sovereign-threads"]:hover::before { transform: translateX(-50%) scaleX(1) !important; } /* ========================================================= DRAWER STANDALONE COLLECTION LINKS — centered word underline Trousers / Glasses / Jewelry / Watches / Bags / Shoes ========================================================= */ .drawer-flat-menu__single[href="/collections/trousers"], .drawer-flat-menu__single[href="/collections/glasses"], .drawer-flat-menu__single[href="/collections/jewelry"], .drawer-flat-menu__single[href="/collections/watches"], .drawer-flat-menu__single[href="/collections/bags"], .drawer-flat-menu__single[href="/collections/shoes"] { position: relative !important; text-decoration: none !important; } /* Remove any text-decoration underline from the arrow */ .drawer-flat-menu__single[href="/collections/trousers"]::after, .drawer-flat-menu__single[href="/collections/glasses"]::after, .drawer-flat-menu__single[href="/collections/jewelry"]::after, .drawer-flat-menu__single[href="/collections/watches"]::after, .drawer-flat-menu__single[href="/collections/bags"]::after, .drawer-flat-menu__single[href="/collections/shoes"]::after { text-decoration: none !important; } /* Use the link's ::before as the animated underline */ .drawer-flat-menu__single[href="/collections/trousers"]::before, .drawer-flat-menu__single[href="/collections/glasses"]::before, .drawer-flat-menu__single[href="/collections/jewelry"]::before, .drawer-flat-menu__single[href="/collections/watches"]::before, .drawer-flat-menu__single[href="/collections/bags"]::before, .drawer-flat-menu__single[href="/collections/shoes"]::before { content: "" !important; position: absolute !important; left: 0 !important; bottom: 4px !important; height: 1px !important; background: #F1CF54 !important; transform: scaleX(0) !important; transform-origin: center !important; transition: transform 0.28s ease !important; pointer-events: none !important; display: block !important; } /* Exact word-width underline — tighter match */ .drawer-flat-menu__single[href="/collections/trousers"]::before { width: 84px !important; } .drawer-flat-menu__single[href="/collections/glasses"]::before { width: 70px !important; } .drawer-flat-menu__single[href="/collections/jewelry"]::before { width: 70px !important; } .drawer-flat-menu__single[href="/collections/watches"]::before { width: 76px !important; } .drawer-flat-menu__single[href="/collections/bags"]::before { width: 42px !important; } .drawer-flat-menu__single[href="/collections/shoes"]::before { width: 54px !important; } /* Expand from center on hover */ .drawer-flat-menu__single[href="/collections/trousers"]:hover::before, .drawer-flat-menu__single[href="/collections/glasses"]:hover::before, .drawer-flat-menu__single[href="/collections/jewelry"]:hover::before, .drawer-flat-menu__single[href="/collections/watches"]:hover::before, .drawer-flat-menu__single[href="/collections/bags"]:hover::before, .drawer-flat-menu__single[href="/collections/shoes"]:hover::before { transform: scaleX(1) !important; } /* Drawer account icon color */ .drawer__account .icon-account, .drawer__account .icon-account path { fill: #F1CF54 !important; color: #F1CF54 !important; } /* Drawer close X icon color */ .drawer__close .icon-close, .drawer__close .icon-close path, .drawer__close .icon-close g { fill: #F1CF54 !important; color: #F1CF54 !important; } /* ========================================================= MOBILE COLLECTION SWATCHES — final stable spacing ========================================================= */ @media screen and (max-width: 749px) { .product-grid-item, .product-grid-item__container, .product__grid__info, .grid__swatch__container { overflow: visible !important; } /* gives product info enough room so swatches/underline don't get clipped */ .product__grid__info { padding-bottom: 20px !important; } /* lock swatch row position so it does not jump after first tap */ .grid__swatch__container { display: block !important; position: relative !important; z-index: 60 !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin-top: 12px !important; /* gap from price */ margin-bottom: 0 !important; padding: 0 0 12px 0 !important; overflow: visible !important; transform: none !important; } .grid__swatch__container .grid__swatch__hover { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important; position: static !important; inset: auto !important; transform: none !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; pointer-events: auto !important; } .grid__swatch__container .swatch__button { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; position: relative !important; overflow: visible !important; flex: 0 0 28px !important; pointer-events: auto !important; } .grid__swatch__container .swatch__button label { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; position: relative !important; overflow: visible !important; pointer-events: auto !important; touch-action: manipulation !important; cursor: pointer !important; } .grid__swatch__container .swatch__button label::before { bottom: -8px !important; } .grid__swatch__container .swatch__button input { pointer-events: none !important; } } .ed-merged-upsells { display: block; margin: 28px 0; } /* Keep each theme upsell looking normal, but remove the spacing between them */ .ed-merged-upsell-item { margin: 0 !important; } /* Pull boxes together so they look like one continuous box */ .ed-merged-upsell-item + .ed-merged-upsell-item { margin-top: -1px !important; } /* hide repeated header only, do not hide product titles */ .ed-merged-upsell-item:not(.ed-merged-upsell-item--first) .upsell__heading, .ed-merged-upsell-item:not(.ed-merged-upsell-item--first) .upsell__label, .ed-merged-upsell-item:not(.ed-merged-upsell-item--first) .product-upsell__heading, .ed-merged-upsell-item:not(.ed-merged-upsell-item--first) .product-upsell__label { display: none !important; } /* Remove the fake gap where the hidden header was */ .ed-merged-upsell-item:not(.ed-merged-upsell-item--first) { padding-top: 0 !important; } .enx-stock-status.is-low-stock, .enx-stock-status.is-low-stock.count-is-unavailable { display: flex !important; opacity: 1 !important; visibility: visible !important; } .enx-stock-status.is-low-stock .enx-low-stock-bar { display: block !important; } /* ========================================================= COLLECTION STICKY TABS — centered on large screens, scroll-from-left on smaller desktop/laptop ========================================================= */ /* Large desktop: keep premium centered spread */ @media screen and (min-width: 1400px) { [class^="ai-sticky-tabs-container-"] { max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; } [class^="ai-sticky-tabs-list-"] { justify-content: center !important; gap: 22px !important; overflow-x: visible !important; } [class^="ai-sticky-tabs-link-"] { font-size: 13px !important; letter-spacing: 1.1px !important; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap !important; } [class^="ai-sticky-tabs-product-count-"] { font-size: 10px !important; margin-left: 4px !important; } } /* Laptop / smaller desktop: keep size, but scroll from Jackets */ @media screen and (min-width: 750px) and (max-width: 1399px) { [class^="ai-sticky-tabs-container-"] { max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; } [class^="ai-sticky-tabs-list-"] { justify-content: flex-start !important; gap: 18px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } [class^="ai-sticky-tabs-list-"]::-webkit-scrollbar { display: none !important; } [class^="ai-sticky-tabs-item-"] { flex: 0 0 auto !important; } [class^="ai-sticky-tabs-link-"] { font-size: 13px !important; letter-spacing: 1.1px !important; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap !important; } [class^="ai-sticky-tabs-product-count-"] { font-size: 10px !important; margin-left: 4px !important; } } /* Add Hats / Belts / Accessories to drawer standalone collection styling */ .drawer-flat-menu__single[href="/collections/hats"], .drawer-flat-menu__single[href="/collections/belts"], .drawer-flat-menu__single[href="/collections/accessories"] { position: relative !important; text-decoration: none !important; } /* Remove any text-decoration underline from the arrow */ .drawer-flat-menu__single[href="/collections/hats"]::after, .drawer-flat-menu__single[href="/collections/belts"]::after, .drawer-flat-menu__single[href="/collections/accessories"]::after { text-decoration: none !important; } /* Gold hover underline */ .drawer-flat-menu__single[href="/collections/hats"]::before, .drawer-flat-menu__single[href="/collections/belts"]::before, .drawer-flat-menu__single[href="/collections/accessories"]::before { content: "" !important; position: absolute !important; left: 0 !important; bottom: 4px !important; height: 1px !important; background: #F1CF54 !important; transform: scaleX(0) !important; transform-origin: center !important; transition: transform 0.28s ease !important; pointer-events: none !important; display: block !important; } /* Exact word-width underline */ .drawer-flat-menu__single[href="/collections/hats"]::before { width: 44px !important; } .drawer-flat-menu__single[href="/collections/belts"]::before { width: 48px !important; } .drawer-flat-menu__single[href="/collections/accessories"]::before { width: 112px !important; } /* Show underline on hover */ .drawer-flat-menu__single[href="/collections/hats"]:hover::before, .drawer-flat-menu__single[href="/collections/belts"]:hover::before, .drawer-flat-menu__single[href="/collections/accessories"]:hover::before { transform: scaleX(1) !important; } @media screen and (max-width: 749px) { /* Default: no bottom sticky ATC */ [class*="ai-roulette-floating-icon"], [class*="roulette-floating-icon"] { bottom: calc(8px + env(safe-area-inset-bottom)) !important; right: 18px !important; left: auto !important; z-index: 99998 !important; } [class*="ai-music-player"], [class*="music-player"] { bottom: calc(82px + env(safe-area-inset-bottom)) !important; right: 18px !important; left: auto !important; z-index: 99999 !important; } /* Music icon size */ [class*="ai-music-player"] button, [class*="music-player"] button, [class*="ai-music-player"] img, [class*="music-player"] img { width: 64px !important; height: 64px !important; } /* When sticky ATC is visible at the bottom */ body.enx-sticky-atc-bottom-visible [class*="ai-roulette-floating-icon"], body.enx-sticky-atc-bottom-visible [class*="roulette-floating-icon"] { bottom: calc(70px + env(safe-area-inset-bottom)) !important; } body.enx-sticky-atc-bottom-visible [class*="ai-music-player"], body.enx-sticky-atc-bottom-visible [class*="music-player"] { bottom: calc(144px + env(safe-area-inset-bottom)) !important; } } @media screen and (min-width: 750px) { /* Roulette stays bottom right */ [class*="ai-roulette-floating-icon"], [class*="roulette-floating-icon"] { bottom: calc(22px + env(safe-area-inset-bottom)) !important; right: 22px !important; left: auto !important; z-index: 99998 !important; } /* Music player stacks above roulette on desktop */ [class*="ai-music-player"], [class*="music-player"] { bottom: calc(98px + env(safe-area-inset-bottom)) !important; right: 22px !important; left: auto !important; z-index: 99999 !important; } } @media screen and (min-width: 750px) { [class*="ai-music-player-bubble"] { bottom: 70px !important; right: -4px !important; } [class*="ai-music-player-bubble"]::after { right: 34px !important; bottom: -7px !important; } } /* On sale: main price */ .product__price__main [data-product-price].product__price--sale { color: #34C759 !important; } /* Not on sale: main price */ .product__price__main [data-product-price]:not(.product__price--sale) { color: #F1CF54 !important; } /* Collection page: regular price when not on sale */ .product__grid__price .price:not(.on-sale) { color: #F1CF54 !important; } /* Collection page: sale price */ .product__grid__price .price.on-sale { color: #34C759 !important; } /* Collection page: crossed-off compare-at price */ .product__grid__price .compare-at { color: #8f7a2f !important; text-decoration: line-through; text-decoration-color: #8f7a2f; } /* Collection grid: align product titles with/without NEW SEASON badge */ /* Cancel the previous manual margin fix */ .product-grid-item .product__grid__info > a:not(:has(.product-badge)) .product__grid__title__wrapper { margin-top: 0 !important; } /* Add an invisible NEW SEASON row only when the real badge is missing */ .product-grid-item .product__grid__info > a:not(:has(.product-badge))::before { content: "NEW SEASON"; display: block; visibility: hidden; pointer-events: none; /* Match the real badge because it is a paragraph-style text row */ font: inherit; line-height: inherit; text-transform: uppercase; /* Mimics the real paragraph spacing without moving actual badges */ margin-block-start: 0.9em; margin-block-end: 0; } /* Your mobile/tablet badge CSS adds a tiny bottom margin */ @media screen and (max-width: 990px) { .product-grid-item .product__grid__info > a:not(:has(.product-badge))::before { margin-block-end: 1px; } } .price--inquiry { color: #F1CF54; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; } /* Fix Camel collection swatch color */ .grid__swatch__container label[data-swatch="Camel" i], .grid__swatch__container label[data-swatch="Tan" i], .grid__swatch__container label[data-swatch="Camel Brown" i] { --swatch: #AE8864 !important; } /* ========================================================= COLLECTION SWATCHES — exact same spacing first load + reload ========================================================= */ @media screen and (max-width: 749px) { .grid__swatch__container .grid__swatch__hover, .template-collection .grid__swatch__container .grid__swatch__hover, .template-product product-grid-item .product__grid__info .grid__swatch__hover { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; column-gap: 12px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; } .grid__swatch__container .swatch__button, .template-product product-grid-item .product__grid__info radio-swatch.swatch__button { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; margin: 0 !important; padding: 0 !important; } .grid__swatch__container .swatch__button label, .template-product product-grid-item .product__grid__info radio-swatch.swatch__button label { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= PDP image swatches: 9:16 vertical thumbnails bigger, no yellow border, single white active border ========================================================= */ body.template-product .radio__inputs--swatch { display: flex !important; flex-wrap: wrap !important; gap: 18px !important; align-items: flex-start !important; padding: 14px 0 18px !important; } /* Swatch wrapper size */ body.template-product radio-swatch.swatch__button:has(img.swatch__thumb), body.template-product .swatch__button:has(img.swatch__thumb) { width: 72px !important; height: auto !important; flex: 0 0 72px !important; margin: 0 !important; padding: 0 !important; } /* 9:16 vertical swatch */ body.template-product radio-swatch.swatch__button > label:has(img.swatch__thumb), body.template-product .swatch__button label:has(img.swatch__thumb) { position: relative !important; display: block !important; width: 72px !important; aspect-ratio: 9 / 16 !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border-radius: 0 !important; background: #000 !important; background-color: #000 !important; background-image: none !important; border: 2px solid transparent !important; outline: 0 !important; box-shadow: none !important; } /* Remove old circle/ring pseudo elements */ body.template-product radio-swatch.swatch__button > label:has(img.swatch__thumb)::before, body.template-product radio-swatch.swatch__button > label:has(img.swatch__thumb)::after, body.template-product .swatch__button label:has(img.swatch__thumb)::before, body.template-product .swatch__button label:has(img.swatch__thumb)::after { content: none !important; display: none !important; } /* Image fills the 9:16 swatch */ body.template-product radio-swatch.swatch__button .swatch__thumb, body.template-product .swatch__button label img.swatch__thumb { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; display: block !important; margin: 0 !important; } /* Selected swatch: one white border only */ body.template-product radio-swatch.swatch__button > input:checked + label:has(img.swatch__thumb), body.template-product .swatch__button input:checked + label:has(img.swatch__thumb), body.template-product .swatch__button input:checked ~ label:has(img.swatch__thumb), body.template-product label.is-active:has(img.swatch__thumb) { border: 2px solid #fff !important; outline: 0 !important; box-shadow: none !important; } /* Mobile */ @media screen and (max-width: 749px) { body.template-product radio-swatch.swatch__button:has(img.swatch__thumb), body.template-product .swatch__button:has(img.swatch__thumb), body.template-product radio-swatch.swatch__button > label:has(img.swatch__thumb), body.template-product .swatch__button label:has(img.swatch__thumb) { width: 60px !important; flex-basis: 60px !important; } body.template-product .radio__inputs--swatch { gap: 14px !important; } } /* ========================================================= PRODUCT PAGE COLLECTION LIST — FIX STRIPE SWATCH COLORS Overrides product-page rule that forces background-image:none ========================================================= */ /* Tobacco Stripe */ body.template-product product-grid-item .product__grid__info .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Tobacco Stripe" i], body.template-product product-grid-item .product__grid__info .grid__swatch__container .swatch__button label[data-swatch="Tobacco Stripe" i] { --swatch: #5f3a22 !important; background-color: #5f3a22 !important; background-image: repeating-linear-gradient( 90deg, #8a5a36 0 8px, #5f3a22 8px 13px, #0d0d0d 13px 17px, #7a4a2c 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* Ivory Stripe */ body.template-product product-grid-item .product__grid__info .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Ivory Stripe" i], body.template-product product-grid-item .product__grid__info .grid__swatch__container .swatch__button label[data-swatch="Ivory Stripe" i] { --swatch: #f4f1e8 !important; background-color: #f4f1e8 !important; background-image: repeating-linear-gradient( 90deg, #f4f1e8 0 8px, #ded8ca 8px 13px, #0b0b0b 13px 17px, #f4f1e8 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* Sandstone Stripe */ body.template-product product-grid-item .product__grid__info .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Sandstone Stripe" i], body.template-product product-grid-item .product__grid__info .grid__swatch__container .swatch__button label[data-swatch="Sandstone Stripe" i] { --swatch: #c7ad8a !important; background-color: #c7ad8a !important; background-image: repeating-linear-gradient( 90deg, #efe3cf 0 7px, #c7ad8a 7px 13px, #6b4328 13px 17px, #eadcc6 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* Emerald Stripe */ body.template-product product-grid-item .product__grid__info .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Emerald Stripe" i], body.template-product product-grid-item .product__grid__info .grid__swatch__container .swatch__button label[data-swatch="Emerald Stripe" i] { --swatch: #0f4a3f !important; background-color: #0f4a3f !important; background-image: repeating-linear-gradient( 90deg, #0f4a3f 0 8px, #07302b 8px 13px, #050505 13px 17px, #14594c 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* ========================================================= COLLECTION SWATCH COLORS — Emerald + Cream ========================================================= */ /* Emerald */ .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Emerald" i], .grid__swatch__container .swatch__button label[data-swatch="Emerald" i], .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Emerald Green" i], .grid__swatch__container .swatch__button label[data-swatch="Emerald Green" i] { --swatch: #0f4a3f !important; background: var(--swatch) !important; background-color: #0f4a3f !important; background-image: none !important; } /* Cream */ .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Cream" i], .grid__swatch__container .swatch__button label[data-swatch="Cream" i], .grid__swatch__container radio-swatch.swatch__button label[data-swatch="Ivory" i], .grid__swatch__container .swatch__button label[data-swatch="Ivory" i] { --swatch: #eee5d2 !important; background: var(--swatch) !important; background-color: #eee5d2 !important; background-image: none !important; } /* ========================================================= COLLECTION + PRODUCT PAGE LIST — STRIPE SWATCH COLORS ONLY Does not change spacing, size, position, or layout ========================================================= */ /* Tobacco Stripe */ .grid__swatch__container label[data-swatch="Tobacco Stripe" i] { --swatch: #5f3a22 !important; background-color: #5f3a22 !important; background-image: repeating-linear-gradient( 90deg, #8a5a36 0 8px, #5f3a22 8px 13px, #0d0d0d 13px 17px, #7a4a2c 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* Ivory Stripe */ .grid__swatch__container label[data-swatch="Ivory Stripe" i] { --swatch: #f4f1e8 !important; background-color: #f4f1e8 !important; background-image: repeating-linear-gradient( 90deg, #f4f1e8 0 8px, #ded8ca 8px 13px, #0b0b0b 13px 17px, #f4f1e8 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* Sandstone Stripe */ .grid__swatch__container label[data-swatch="Sandstone Stripe" i] { --swatch: #c7ad8a !important; background-color: #c7ad8a !important; background-image: repeating-linear-gradient( 90deg, #efe3cf 0 7px, #c7ad8a 7px 13px, #6b4328 13px 17px, #eadcc6 17px 28px ) !important; background-size: cover !important; background-position: center !important; } /* Emerald Stripe */ .grid__swatch__container label[data-swatch="Emerald Stripe" i] { --swatch: #0f4a3f !important; background-color: #0f4a3f !important; background-image: repeating-linear-gradient( 90deg, #0f4a3f 0 8px, #07302b 8px 13px, #050505 13px 17px, #14594c 17px 28px ) !important; background-size: cover !important; background-position: center !important; } .ed-bundle__tier { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ed-bundle__tier-left { flex: 1 1 auto; min-width: 0; } .ed-bundle__tier-label { font-size: 20px; line-height: 1.15; white-space: normal; } .ed-bundle__tier-right { flex: 0 0 auto; min-width: 90px; text-align: right; } .ed-bundle__tier-price { font-size: 28px; line-height: 1; } .ed-bundle__tier-compare { font-size: 18px; line-height: 1.2; } @media screen and (max-width: 749px) { .ed-bundle__tier-label { font-size: 15px; } .ed-bundle__tier-price { font-size: 22px; } .ed-bundle__tier-compare { font-size: 15px; } .ed-bundle__tier-right { min-width: 70px; } } /* ENANTIODROMIA — cart + hamburger dark glass */ /* Outer wrappers */ #drawer-cart, .drawer[data-drawer="hamburger"] { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Glass surface — clearer and more transparent */ #drawer-cart .drawer__content, .drawer[data-drawer="hamburger"] .drawer__content { background: rgba(12, 12, 16, 0.46) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; -webkit-backdrop-filter: blur(22px) saturate(175%) !important; backdrop-filter: blur(22px) saturate(175%) !important; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #drawer-cart .drawer__content, .drawer[data-drawer="hamburger"] .drawer__content { background: radial-gradient( ellipse at top left, rgba(255, 255, 255, 0.12), transparent 55% ), linear-gradient( 115deg, rgba(255, 255, 255, 0.055), transparent 35%, rgba(255, 255, 255, 0.015) 75%, rgba(255, 255, 255, 0.04) ), rgba(12, 12, 16, 0.46) !important; -webkit-backdrop-filter: blur(22px) saturate(175%) !important; backdrop-filter: blur(22px) saturate(175%) !important; } } /* CART — clear solid backgrounds */ #drawer-cart .drawer__body, #drawer-cart [data-cart-form], #drawer-cart [data-line-items], #drawer-cart .cart__items, #drawer-cart .cart__items__row, #drawer-cart .cart__items__grid, #drawer-cart .drawer__footer__subtotal, #drawer-cart .enantio-drawer-summary, #drawer-cart .drawer__bottom > form.cart, #drawer-cart .order-value-booster-side-cart, #drawer-cart [class*="free_shipping_card_wrapper_"], #drawer-cart [class*="free_shipping_products_wrapper_"], #drawer-cart [class*="free_shipping_card_product_"].cart_page, #drawer-cart .ship-insurance, #drawer-cart #tm_cart { background: transparent !important; } /* HAMBURGER — clear solid backgrounds */ .drawer[data-drawer="hamburger"] .drawer__inner, .drawer[data-drawer="hamburger"] .drawer__menu, .drawer[data-drawer="hamburger"] .drawer__promo, .drawer[data-drawer="hamburger"] .drawer-flat-menu__item, .drawer[data-drawer="hamburger"] .drawer-flat-menu__section, .drawer[data-drawer="hamburger"] .drawer-flat-menu__links, .drawer[data-drawer="hamburger"] .drawer-flat-menu__heading, .drawer[data-drawer="hamburger"] .drawer-flat-menu__link, .drawer[data-drawer="hamburger"] .drawer-flat-menu__single { background: transparent !important; } /* Headers */ #drawer-cart .drawer__top, .drawer[data-drawer="hamburger"] .drawer__top { background: rgba(255, 255, 255, 0.035) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Cart totals area */ #drawer-cart .drawer__bottom { background: rgba(12, 12, 16, 0.22) !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; } /* Transparent close buttons */ #drawer-cart .drawer__button.drawer__close, .drawer[data-drawer="hamburger"] .drawer__button.drawer__close { background: transparent !important; box-shadow: none !important; } #drawer-cart .drawer__button.drawer__close::before, #drawer-cart .drawer__button.drawer__close::after, .drawer[data-drawer="hamburger"] .drawer__button.drawer__close::before, .drawer[data-drawer="hamburger"] .drawer__button.drawer__close::after { background: transparent !important; box-shadow: none !important; } /* Gold checkout button */ #drawer-cart .checkout__button { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 2px rgba(0, 0, 0, 0.12) !important; } /* CART — sharp corners */ #drawer-cart .drawer__top, #drawer-cart .drawer__bottom, #drawer-cart .checkout__button, #drawer-cart .quantity__wrapper, #drawer-cart img, #drawer-cart #tm_cart, #drawer-cart [class*="free_shipping_card_"] { border-radius: 0 !important; } /* HAMBURGER — sharp corners */ .drawer[data-drawer="hamburger"] .drawer__top, .drawer[data-drawer="hamburger"] .drawer__inner, .drawer[data-drawer="hamburger"] .drawer__menu, .drawer[data-drawer="hamburger"] .drawer__promo, .drawer[data-drawer="hamburger"] .drawer__promo-link, .drawer[data-drawer="hamburger"] img, .drawer[data-drawer="hamburger"] button, .drawer[data-drawer="hamburger"] .drawer-flat-menu__link, .drawer[data-drawer="hamburger"] .drawer-flat-menu__single { border-radius: 0 !important; } /* Reduce space below Essential Free Shipping */ #drawer-cart .order-value-booster-side-cart { margin-bottom: 6px !important; padding-bottom: 0 !important; } #drawer-cart [class*="free_shipping_card_wrapper_"], #drawer-cart [class*="free_shipping_products_wrapper_"] { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Remove extra space above the first cart product */ #drawer-cart [data-cart-form], #drawer-cart [data-line-items], #drawer-cart .cart__items, #drawer-cart .cart__items__row:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* Continue shopping — same size as checkout, white with black text */ #drawer-cart .cart-continue-shopping { width: 100%; margin-top: 6px; background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; border-radius: 0 !important; box-shadow: none !important; } #drawer-cart .cart-continue-shopping:hover { background: #eeeeee !important; color: #000000 !important; border-color: #eeeeee !important; } /* Make both cart buttons exactly the same height */ #drawer-cart .checkout__button, #drawer-cart .cart-continue-shopping { box-sizing: border-box !important; height: 50px !important; min-height: 50px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; font-size: 12px !important; justify-content: center !important; } /* Smaller Essential Free Shipping message */ #drawer-cart [class*="free_shipping_card_title_"] { font-size: 13px !important; line-height: 1.35 !important; } /* Less space between the Cart header and upsell */ #drawer-cart .drawer__body { padding-top: 8px !important; } #drawer-cart .order-value-booster-side-cart { margin-top: 0 !important; padding-top: 0 !important; } #drawer-cart [class*="free_shipping_card_wrapper_"] { margin-top: 0 !important; padding-top: 8px !important; } #drawer-cart [class*="free_shipping_card_title_"] { margin-top: 0 !important; } /* Compact footer */ #drawer-cart .drawer__bottom { padding-top: 10px !important; padding-bottom: 10px !important; gap: 0 !important; } #drawer-cart .drawer__footer__subtotal { margin: 0 !important; padding: 0 !important; } #drawer-cart .enantio-drawer-summary { padding-bottom: 0 !important; } #drawer-cart .enantio-drawer-summary__row { margin-bottom: 5px !important; font-size: 13px !important; line-height: 1.3 !important; } #drawer-cart .enantio-drawer-summary__amount { font-size: 15px !important; } #drawer-cart .enantio-drawer-summary__total { margin-top: 4px !important; margin-bottom: 0 !important; padding-top: 7px !important; font-size: 16px !important; } #drawer-cart .enantio-drawer-summary__total .enantio-drawer-summary__amount { font-size: 21px !important; } #drawer-cart .enantio-drawer-summary__shipping { margin: 3px 0 6px !important; font-size: 10px !important; line-height: 1.3 !important; } #drawer-cart .enantio-drawer-summary__authorization { padding: 5px 4px !important; font-size: 10px !important; line-height: 1.3 !important; } #drawer-cart .drawer__bottom__meta { margin: 6px 0 !important; font-size: 10px !important; line-height: 1.3 !important; } /* Compact shipping protection */ #drawer-cart .ship-insurance { margin: 0 !important; padding: 0 !important; } #drawer-cart #tm_cart { margin: 0 !important; padding: 5px 0 !important; } #drawer-cart .tm_cart_content, #drawer-cart .tm_cart_f { margin: 0 !important; padding: 0 !important; } #drawer-cart .tm_cart_f_title { font-size: 12px !important; } #drawer-cart .tm_description { margin-top: 3px !important; margin-bottom: 0 !important; font-size: 10px !important; line-height: 1.35 !important; } #drawer-cart .tm_policy { font-size: 10px !important; } /* HAMBURGER — separate layer above the page and floating widgets */ #header-menu { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; z-index: 2147483646 !important; background: transparent !important; pointer-events: none !important; } #header-menu.drawer--visible { pointer-events: auto !important; } /* Remove the artificial tint strip */ #header-menu::after { content: none !important; display: none !important; } /* Panel above its native overlay */ #header-menu > .drawer__content { z-index: 2 !important; pointer-events: auto !important; } /* Native overlay intercepts taps outside the panel */ #header-menu > .drawer__underlay { z-index: 1 !important; pointer-events: auto !important; } /* MOBILE */ @media screen and (max-width: 899px) { #header-menu { height: 100% !important; } #header-menu > .drawer__content { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: calc(100% - 44px) !important; max-width: calc(100% - 44px) !important; height: 100% !important; max-height: none !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #header-menu .drawer__top { flex: 0 0 auto !important; height: 50px !important; min-height: 50px !important; box-sizing: border-box !important; } #header-menu .drawer__inner[data-drawer-scrolls] { flex: 1 1 0 !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch; background: transparent !important; box-sizing: border-box !important; padding-bottom: max( 16px, env(safe-area-inset-bottom, 0px) ) !important; } #header-menu .drawer__menu { flex: 0 0 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; background: transparent !important; } #header-menu .drawer__promo { flex: 0 0 auto !important; background: transparent !important; } /* Same native overlay treatment as the cart */ #header-menu > .drawer__underlay { display: block !important; position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; touch-action: none !important; } #header-menu .drawer__underlay__fill { background: #000 !important; opacity: 0.3 !important; } #header-menu .drawer__underlay__blur { -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; } } /* Hide floating music and signup widgets while the menu is open */ body:has(#header-menu.drawer--visible) :is( [class*="ai-music-player-button-floating-music-player"], [class*="ai-music-player-bubble"], [data-testid="form-teaser"], shopify-forms-embed, [class*="kl-teaser"] ) { display: none !important; pointer-events: none !important; } /* Mobile hamburger — square collection image */ @media screen and (max-width: 899px) { #header-menu .drawer__promo-link { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; overflow: hidden !important; } #header-menu .drawer__promo-image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; } } /* Keep image zoom above the floating music player */ .pswp { z-index: 2147483647 !important; } /* Mobile gallery: allow vertical page scrolling */ @media (max-width: 767px) { [data-product-slideshow].flickity-enabled, [data-product-slideshow].flickity-enabled .flickity-viewport { touch-action: pan-y pinch-zoom !important; } } /* Mobile: taller product images with less space below */ @media (max-width: 767px) { [data-product-slideshow] .product__media[data-type="image"] .lazy-image { padding-bottom: 28px !important; } .product__main__content .product__inner { padding-top: 2px !important; } } /* Mobile: keep zoom buttons fully inside the images */ @media (max-width: 767px) { [data-product-slideshow] .media__buttons__holder { transform: translateY(-10px) !important; } } /* Mobile: space above badges on collections and homepage grid */ @media (max-width: 767px) { .template-collection .product__grid__info .product-badge, .template-index .collection-split__product .product__grid__info .product-badge { padding-top: 10px !important; } } /* Mobile: space above badges in all product grids */ @media (max-width: 767px) { .product__grid__info .product-badge { padding-top: 10px !important; } } /* Temporarily hide music player */ floating-music-player-floating-music-player, body .ai-music-player-floating-music-player { display: none !important; } /* Desktop/tablet: unlock the entire product information column */ @media (min-width: 768px) { #MainContent .product-single .product__main__content, #MainContent .product-single .product__main__content > .product__inner { position: static !important; top: auto !important; bottom: auto !important; } } /* Desktop: Black close icon */ button.drawer__close, button.drawer__close svg, button.drawer__close svg path { fill: #000000 !important; color: #000000 !important; } /* Mobile: Gold close icon */ @media screen and (max-width: 989px) { button.drawer__close, button.drawer__close svg, button.drawer__close svg path { fill: #F1C544 !important; color: #F1C544 !important; } } /* ========================================================= PRODUCT CARD SWATCH ROW + +X — ONE CONSISTENT STYLE Collection page + PDP bottom product cards ========================================================= */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; column-gap: 12px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; width: 100% !important; height: auto !important; overflow: visible !important; } /* SWATCH WRAPPER */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > radio-swatch.swatch__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; margin: 0 !important; padding: 0 !important; } /* SWATCH CIRCLE */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > radio-swatch.swatch__button > label { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; } /* +1 / +2 / +3 COUNTER */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > a.en-swatch-more { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; align-self: center !important; margin: 0 !important; padding: 0 !important; position: relative !important; inset: auto !important; top: 0 !important; left: 0 !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #F1CF54 !important; -webkit-text-fill-color: #F1CF54 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; opacity: 1 !important; } /* DON'T CHANGE ON HOVER */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > a.en-swatch-more:hover, body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > a.en-swatch-more:focus { color: #F1CF54 !important; -webkit-text-fill-color: #F1CF54 !important; text-decoration: none !important; } /* Product card typography: badge, brand, title, then price. Shared by collection grids and product-page recommendations. */ html body product-grid-item .product__grid__info .product-badge { font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; margin-bottom: 2px !important; } html body product-grid-item .product__grid__info .product__grid__brand { display: block; margin: 0 0 2px !important; padding: 0 !important; font-family: inherit; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; } html body product-grid-item .product__grid__info .product__grid__title { font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; margin-top: 0 !important; } html body product-grid-item .product__grid__info .product__grid__price .price, html body product-grid-item .product__grid__info .product__grid__price .price .glc-money { font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } html body product-grid-item .product__grid__info .product__grid__price .compare-at { font-size: 13px !important; font-weight: 400 !important; } /* Enantiodromia PDP: editorial badge / brand / lowercase title / price hierarchy. Refined typography and spacing for both desktop and mobile. */ body.template-product .product__main__content .product__title__wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 0 !important; } body.template-product .product__main__content .product__title__wrapper .product-badge { font-family: var(--FONT-STACK-BODY, inherit) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: 0 !important; margin: 0 0 5px !important; } body.template-product .product__main__content .ed-pdp-brand { font-family: var(--FONT-STACK-BODY, inherit) !important; font-size: 19px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 5px !important; } body.template-product .product__main__content .product__title.ed-pdp-title { font-family: var(--FONT-STACK-BODY, inherit) !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: lowercase !important; margin: 0 !important; } body.template-product .product__main__content .product__price__wrap { margin-top: 9px !important; margin-bottom: 5px !important; padding-top: 0 !important; } body.template-product .product__main__content .product__price, body.template-product .product__main__content .product__price [data-product-price] { font-family: var(--FONT-STACK-BODY, inherit) !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; } body.template-product .product__main__content .product__price { padding: 0 !important; } @media (max-width: 749px) { body.template-product .product__main__content .product__title__wrapper .product-badge { font-size: 13px !important; } body.template-product .product__main__content .ed-pdp-brand { font-size: 22px !important; } body.template-product .product__main__content .product__title.ed-pdp-title { font-size: 14px !important; } body.template-product .product__main__content .product__price, body.template-product .product__main__content .product__price [data-product-price] { font-size: 16px !important; } } /* Current PDP price uses the same champagne gold on mobile and desktop, including sale and Shopify Markets currency-converted price spans. */ body.template-product .product__main__content .product__price__main [data-product-price]:not([data-inquiry-price]), body.template-product .product__main__content .product__price__main [data-product-price]:not([data-inquiry-price]).product__price--sale, body.template-product .product__main__content .product__price__main [data-product-price] .glc-money { color: #E7CA76 !important; font-weight: 500 !important; } /* PDP: Estimated time to ship, placed directly below PAY ONLY WHEN SHIPPED. */ body.template-product .product__main__content .ed-product-shipping-estimate { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; box-sizing: border-box; margin: 4px 0 16px; padding: 0; } body.template-product .product__main__content .ed-product-shipping-estimate__label { display: block; font-family: var(--FONT-STACK-BODY, inherit); color: #bdbdbd; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; } body.template-product .product__main__content .ed-product-shipping-estimate__days { display: block; font-family: var(--FONT-STACK-BODY, inherit); color: #f5f5f5; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin-top: 2px; } /* Enantiodromia compact three-card PDP reassurance row */ body.template-product .product__main__content .ed-pdp-benefits { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; width: 100% !important; max-width: 420px !important; margin: 12px 0 16px !important; align-items: stretch; } body.template-product .product__main__content .ed-pdp-benefits__tile { box-sizing: border-box; position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0 !important; width: 100% !important; height: 106px !important; min-height: 106px !important; max-height: 106px !important; padding: 9px 5px !important; background: #111111; border: 1px solid #343434; border-radius: 6px; text-align: center; transition: border-color 180ms ease, background-color 180ms ease; } body.template-product .ed-pdp-benefits__tile .ed-benefit-title { font-family: var(--FONT-STACK-BODY, inherit); font-size: 13px; font-weight: 500; line-height: 1.2; color: #f7f7f7; white-space: nowrap; } body.template-product .ed-pdp-benefits__tile .ed-benefit-description { font-family: var(--FONT-STACK-BODY, inherit); font-size: 11px; font-weight: 400; line-height: 1.3; color: #A6A6A6; white-space: nowrap; } body.template-product .ed-pdp-benefits__tile--afterpay { cursor: pointer; } @media (hover: hover) { body.template-product .ed-pdp-benefits__tile--afterpay:hover {border-color: #E7CA76;} } body.template-product .ed-pdp-benefits__tile--afterpay:focus-visible { outline: 2px solid #E7CA76; outline-offset: 2px; } body.template-product .ed-benefit-afterpay-brand { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; min-width: 0; pointer-events: none; } body.template-product .ed-benefit-afterpay-logo { display: block; width: 88px; max-width: calc(100% - 20px); max-height: 25px; height: auto; object-fit: contain; } body.template-product .ed-benefit-afterpay-info { display: inline-flex; flex: 0 0 14px; width: 14px; height: 14px; align-items: center; justify-content: center; border: 1px solid #A6A6A6; border-radius: 50%; color: #A6A6A6; font-size: 10px; font-weight: 500; line-height: 1; } body.template-product .ed-pdp-benefits__tile--afterpay .ed-benefit-native { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.template-product .ed-pdp-benefits__tile--returns .product__block__icon, body.template-product .ed-pdp-benefits__tile--stock .product__block__remaining { width: 100%; padding: 0 !important; margin: 0 !important; } body.template-product .ed-pdp-benefits__tile--returns .product__block__icon { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; gap: 0; } body.template-product .ed-pdp-benefits__tile--returns .icon-holder {margin: 0 !important;} body.template-product .ed-pdp-benefits__tile--returns .icon {width: 22px; height: 22px;} body.template-product .ed-pdp-benefits__tile--returns .product__block__icon p {display: none !important;} body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status, body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status__left { width: 100%; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; gap: 0; margin: 0 !important; } body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status__text {display: none !important;} body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status__dot {margin: 0;} body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status.is-in-stock .enx-stock-status__dot::before, body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status.is-in-stock .enx-stock-status__dot::after, body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status.is-low-stock .enx-stock-status__dot::before, body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status.is-low-stock .enx-stock-status__dot::after { animation-duration: 3.6s !important; } body.template-product .ed-pdp-benefits__tile--stock .enx-low-stock-bar { width: 75%; flex: none; height: 3px; margin: 2px 0 0; } @media (max-width: 749px) { body.template-product .product__main__content .ed-pdp-benefits { max-width: 100% !important; gap: 7px !important; } body.template-product .product__main__content .ed-pdp-benefits__tile { height: 96px !important; min-height: 96px !important; max-height: 96px !important; padding: 7px 3px !important; } body.template-product .ed-pdp-benefits__tile .ed-benefit-title {font-size: 12px;} body.template-product .ed-pdp-benefits__tile .ed-benefit-description {font-size: 10px; letter-spacing: -0.15px;} body.template-product .ed-benefit-afterpay-logo {width: 73px;} body.template-product .ed-benefit-afterpay-info {width: 12px; height: 12px; flex-basis: 12px; font-size: 9px;} body.template-product .ed-pdp-benefits__tile--returns .icon {width: 19px; height: 19px;} } @media (prefers-reduced-motion: reduce) { body.template-product .ed-pdp-benefits__tile {transition: none;} body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status__dot::before, body.template-product .ed-pdp-benefits__tile--stock .enx-stock-status__dot::after {animation: none !important;} } /* Enantiodromia PDP fulfillment bar v1 — only the main product form's adjacent info */ body.template-product .product__main__content .ed-fulfillment-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; box-sizing: border-box; margin: 14px 0 16px !important; min-height: 68px; padding: 0 !important; background: #111111; border: 1px solid #343434; border-radius: 6px; overflow: hidden; transition: border-color 180ms ease; } @media (hover: hover) { body.template-product .product__main__content .ed-fulfillment-bar:hover { border-color: rgba(216,191,120,.45); } } body.template-product .product__main__content .ed-fulfillment-bar__section { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: 10px 12px; gap: 5px; } body.template-product .product__main__content .ed-fulfillment-bar__section--dispatch { border-left: 1px solid #343434; } body.template-product .product__main__content .ed-fulfillment-bar__heading { display: flex; align-items: center; gap: 7px; min-width: 0; width: 100%; } body.template-product .product__main__content .ed-fulfillment-bar__icon { color: #D8BF78; flex: 0 0 17px; width: 17px; height: 17px; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-pay-when-shipped { margin: 0 !important; padding: 0 !important; width: auto !important; min-width: 0; text-align: left !important; display: block; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-pay-when-shipped__pill { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: #D8BF78 !important; font-family: var(--FONT-STACK-BODY, inherit); font-size: 11px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: .07em !important; text-transform: uppercase; white-space: nowrap; } body.template-product .product__main__content .ed-fulfillment-bar__dispatch-label { font-family: var(--FONT-STACK-BODY, inherit); color: #A0A0A0; font-size: 11px; font-weight: 500; line-height: 1.25; letter-spacing: .05em; white-space: nowrap; } body.template-product .product__main__content .ed-fulfillment-bar__secondary { font-family: var(--FONT-STACK-BODY, inherit); font-size: 11px; line-height: 1.3; font-weight: 400; color: #A0A0A0; padding-left: 24px; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-shipping-estimate { display: block !important; box-sizing: border-box; margin: 0 !important; padding: 0 0 0 24px !important; width: 100%; text-align: left !important; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-shipping-estimate__days { display: block; margin: 0 !important; font-family: var(--FONT-STACK-BODY, inherit); font-size: 14px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #D8BF78 !important; } @media (max-width: 749px) { body.template-product .product__main__content .ed-fulfillment-bar { margin-top: 12px !important; min-height: 64px; } body.template-product .product__main__content .ed-fulfillment-bar__section { padding: 10px 7px; gap: 5px; } body.template-product .product__main__content .ed-fulfillment-bar__heading {gap: 5px;} body.template-product .product__main__content .ed-fulfillment-bar__icon { width: 15px; height: 15px; flex-basis: 15px; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-pay-when-shipped__pill { font-size: clamp(8px, 2.45vw, 11px) !important; letter-spacing: .03em !important; } body.template-product .product__main__content .ed-fulfillment-bar__dispatch-label { font-size: clamp(9px, 2.6vw, 11px); letter-spacing: .02em; } body.template-product .product__main__content .ed-fulfillment-bar__secondary { padding-left: 20px; font-size: 10px; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-shipping-estimate { padding-left: 20px !important; } body.template-product .product__main__content .ed-fulfillment-bar .ed-product-shipping-estimate__days { font-size: 13px !important; } } @media (prefers-reduced-motion: reduce) { body.template-product .product__main__content .ed-fulfillment-bar {transition: none;} } /* Selected desktop color image goes into the first visual product-gallery slot. CSS order does not mutate Shopify's media DOM or the mobile gallery. */ @media (min-width: 768px) { body.template-product .product__grid[data-slideshow-desktop-style="none"]:not(.flickity-enabled) > .product__media.ed-desktop-color-hero { order: -1; } body.template-product .product__grid--mosaic[data-slideshow-desktop-style="none"]:not(.flickity-enabled) > .product__media.ed-desktop-color-hero { width: 100%; } body.template-product .product__grid--mosaic[data-slideshow-desktop-style="none"]:not(.flickity-enabled) > .product__media:first-child:not(.ed-desktop-color-hero):has(~ .ed-desktop-color-hero) { width: calc(50% - var(--IMAGE-SPACING) / 2); } } /* ========================================================= ENANTIODROMIA FABRIC PALETTE — individual product color overrides Existing 28px circles, gold outlines, image-switching and striped swatches retain their current layout/behavior. ========================================================= */ /* Product-specific metafield or Shopify native swatch colors override the generic named-color palette, including legacy CSS color rules. Pattern swatches without a custom color retain their fabric patterns. */ body .grid__swatch__container form[data-grid-swatches] label[data-en-swatch-custom="true"] { background: var(--swatch, #B7AC9F) !important; background-color: var(--swatch, #B7AC9F) !important; background-image: none !important; } /* Preserve the photo swatches on actual product pages. */ body.template-product .radio__inputs--swatch label:has(img.swatch__thumb) { background-image: none !important; } /* ========================================================= ENANTIODROMIA: SQUARED FABRIC COLOR SWATCHES Only product-card swatches (collections, homepage, recommendations). Product-page 9:16 photo variant selectors remain unchanged. ========================================================= */ /* Petite 28px fabric cubes; keep existing card spacing and color sources. */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > radio-swatch.swatch__button > label, body .grid__swatch__container radio-swatch.swatch__button > label, body .grid__swatch__container .swatch__button > label { border-radius: 3px !important; border: 1px solid rgba(191, 161, 106, 0.26) !important; box-shadow: 0 0 0 1px rgba(191, 161, 106, 0.07) !important; outline: 0 !important; } /* Replace legacy bright-gold underline with an outline on the square itself. */ body .grid__swatch__container radio-swatch.swatch__button > label::before, body .grid__swatch__container .swatch__button > label::before { content: none !important; display: none !important; } /* Remove the theme's inset circular ring so the chosen cube uses only the muted-gold perimeter below. Keep selection handled by existing JS. */ body .grid__swatch__container .swatch__button > input:checked ~ label::after, body .grid__swatch__container .swatch__button > label.is-active::after { content: none !important; display: none !important; } /* Chosen color: understated antique/champagne gold perimeter. */ body .product__grid__info .grid__swatch__container form.en-fabric-swatch-row[data-grid-swatches] > radio-swatch.swatch__button > label.is-active, body .grid__swatch__container radio-swatch.swatch__button > label.is-active, body .grid__swatch__container .swatch__button > label.is-active, body .grid__swatch__container radio-swatch.swatch__button > input:checked + label, body .grid__swatch__container radio-swatch.swatch__button > input:checked ~ label, body .grid__swatch__container .swatch__button > input:checked + label, body .grid__swatch__container .swatch__button > input:checked ~ label { border-color: #BFA16A !important; box-shadow: 0 0 0 2px rgba(191, 161, 106, 0.76) !important; } /* Gentle hover; keyboard focus is more visible without altering layout. */ @media (hover: hover) { body .grid__swatch__container radio-swatch.swatch__button > label:not(.is-active):hover, body .grid__swatch__container .swatch__button > label:not(.is-active):hover { border-color: rgba(191, 161, 106, 0.7) !important; box-shadow: 0 0 0 1px rgba(191, 161, 106, 0.25) !important; } } body .grid__swatch__container radio-swatch.swatch__button > label:focus-visible, body .grid__swatch__container .swatch__button > label:focus-visible { outline: 2px solid #BFA16A !important; outline-offset: 3px !important; } /* Infinite collection pagination: keep native links as a failure fallback, but hide them whenever the infinite loader is mounted, including AJAX visits. This lives in the global stylesheet so navigated page inline styles cannot be lost by the #MainContent replacement. */ body [data-section-type="collection"] [data-infinite-collection-grid][data-infinite-scroll-ready] > [data-infinite-pagination] { display: none !important; } /* ========================================================= ENANTIODROMIA PDP — DESKTOP IMAGE / DETAILS REBALANCE Give the editorial image gallery more room while anchoring a narrower, unified buy box to the right edge. Product pages only; tablet/mobile layouts, cart UI and checkout untouched. ========================================================= */ @media screen and (min-width: 990px) { body.template-product .product-section .product-page .product-single > .product__media__wrapper { flex: 0 0 63% !important; width: 63% !important; max-width: 63% !important; box-sizing: border-box; padding-right: clamp(14px, 1.8vw, 30px) !important; } body.template-product .product-section .product-page .product-single > .product__main__content { flex: 0 0 37% !important; width: 37% !important; max-width: 37% !important; min-width: 0; } body.template-product .product-section .product-page .product__main__content > .product__inner { box-sizing: border-box !important; width: 100% !important; max-width: 510px !important; margin-left: auto !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; --pdp-atc-width: 100%; } /* Let the three existing benefits span the compact buy box, instead of stopping at their old 420px cap. */ body.template-product .product-section .product-page .product__main__content .ed-pdp-benefits { width: 100% !important; max-width: 100% !important; gap: 8px !important; margin-top: 10px !important; margin-bottom: 13px !important; } body.template-product .product-section .product-page .product__main__content .ed-pdp-benefits__tile { height: 96px !important; min-height: 96px !important; max-height: 96px !important; padding: 8px 4px !important; } body.template-product .product-section .ed-pdp-benefits__tile .ed-benefit-title { font-size: 12px; } body.template-product .product-section .ed-pdp-benefits__tile .ed-benefit-description { font-size: 10px; } body.template-product .product-section .ed-benefit-afterpay-logo { width: 79px; } /* Main product form only: narrower and slightly lower ATC, preserving the existing variant, price and add-to-cart behavior. */ body.template-product .product-section .product-page .product__main__content .product__inner button[data-add-to-cart] { width: 100% !important; max-width: 100% !important; min-height: 50px !important; padding: 13px 10px !important; font-size: 12px !important; letter-spacing: .05em !important; } body.template-product .product-section .product-page .product__main__content .ed-fulfillment-bar { min-height: 62px; margin: 12px 0 14px !important; } body.template-product .product-section .product-page .product__main__content .ed-fulfillment-bar__section { padding: 9px 10px; } } /* Keep the buy box comfortably readable on smaller desktop screens, while still giving the gallery more than its original 50% share. */ @media screen and (min-width: 990px) and (max-width: 1199px) { body.template-product .product-section .product-page .product-single > .product__media__wrapper { flex-basis: 58% !important; width: 58% !important; max-width: 58% !important; } body.template-product .product-section .product-page .product-single > .product__main__content { flex-basis: 42% !important; width: 42% !important; max-width: 42% !important; } } .product__block__buttons .ed-atc-row { display: flex; align-items: stretch; width: 100%; border: 1px solid #F1CF54; padding: 3px; gap: 3px; box-sizing: border-box; } .product__block__buttons .ed-atc-row__price { display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 80px; max-width: 42%; padding: 8px 14px; color: #F1CF54; font-size: 13px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; box-sizing: border-box; } .product__block__buttons .ed-atc-row__price .atc-compare { display: block; font-size: .8em; font-weight: 400; line-height: 1.2; text-decoration: line-through; opacity: .55; } .product__block__buttons .ed-atc-row__price .atc-compare[hidden] { display: none; } html body.template-product .product-section .product-page .product__main__content .product__inner .ed-atc-row button[data-add-to-cart], .product__block__buttons .ed-atc-row button[data-add-to-cart] { flex: 1 1 0; width: auto !important; min-width: 0; margin: 0; border-radius: 0; background: #F1CF54 !important; color: #000; } @media (max-width: 479px) { .product__block__buttons .ed-atc-row__price { min-width: 72px; padding: 8px 10px; font-size: 12px; } }