/** Shopify CDN: Minification failed Line 591:269 Expected "}" to go with "{" **/ /* ============================================================ DESIGNERS 4 LESS — LUXURY BLACK + GOLD OVERRIDES v5 Fixed: unit-price slash hidden, spacing tightened ============================================================ */ /* ── 0. GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap'); /* ── 1. ROOT VARIABLES ── */ :root { --color-bg: #0a0a0a; --color-bg-2: #111111; --color-gold: #C9A84C; --color-gold-hover: #E8C96A; --color-text: #FFFFFF; --color-text-sec: #A0A0A0; --color-border: #2a2a2a; } /* ── 2. GLOBAL ── */ html, body { background-color: #0a0a0a !important; color: #FFFFFF !important; } /* ── 3. ALL SECTIONS — DARK ── */ [class*="color-scheme-"] { background-color: #0a0a0a !important; color: #FFFFFF !important; --color-foreground: 255,255,255; --color-background: 10,10,10; --color-border: 42,42,42; --color-base-text: 255,255,255; --color-base-background-1: 10,10,10; --color-base-background-2: 17,17,17; } /* ── 4. TICKER / ANNOUNCEMENT BAR — GOLD ── */ div.ticker, div.ticker[class*="color-scheme-"], .shopify-section > .ticker, .ticker-wrapper, section > div.ticker { background-color: #C9A84C !important; color: #000000 !important; } .ticker p, .ticker a, .ticker span, .ticker__content, .ticker__item { color: #000000 !important; } /* ── 5. HEADER ── */ header, .header, .header-wrapper { background-color: #0a0a0a !important; border-bottom-color: #2a2a2a !important; } .header__heading-link, .header__menu-item, header a, nav a, .header a { color: #FFFFFF !important; } .header__heading-link:hover, header a:hover, nav a:hover { color: #C9A84C !important; } .header__icon, .header__icon svg, .header__icon path { color: #FFFFFF !important; fill: #FFFFFF !important; stroke: #FFFFFF !important; } /* ── 6. PRODUCT CARDS ── */ .card-wrapper { background-color: #111111 !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; } .card, .card--product { background-color: #111111 !important; color: #FFFFFF !important; box-shadow: none !important; } .card__inner { background-color: #111111 !important; } .card__inner .media { background-color: #111111 !important; } /* Card info area — uniform height + tight layout */ .card-information { background-color: #111111 !important; padding: 12px 14px 14px !important; min-height: 130px !important; display: flex !important; flex-direction: column !important; } .card-information__wrapper { display: flex !important; flex-direction: column !important; flex: 1 !important; } .card-information-block { display: flex !important; flex-direction: column !important; flex: 1 !important; } /* ── 7. PRODUCT TITLE ── */ .card__title, .card__title a { font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; color: #FFFFFF !important; font-size: 0.92rem !important; line-height: 1.35 !important; margin-bottom: 0 !important; margin-top: 0 !important; } /* ── 8. VENDOR ── */ .card-information .caption, .card__vendor { color: #A0A0A0 !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-family: 'Montserrat', sans-serif !important; } /* ── 9. PRICES — WAS / NOW STACKED ── */ .price { margin-top: auto !important; padding-top: 8px !important; display: block !important; } /* Non-sale: single gold price */ .price:not(.price--on-sale) .price-item--regular { color: #C9A84C !important; font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; font-size: 0.9rem !important; } /* SALE card: price__sale is a flex column */ .price--on-sale .price__sale { display: flex !important; flex-direction: column !important; gap: 1px !important; } /* Hide: regular price row when on sale */ .price--on-sale .price__regular { display: none !important; } /* Hide: DT labels inside price */ .price dt { display: none !important; } /* WAS price (compare-at): order 1 (top) */ dd.price__compare { display: block !important; order: 1 !important; } dd.price__compare .price-item--regular { color: #888888 !important; text-decoration: line-through !important; font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; font-size: 0.76rem !important; } dd.price__compare .price-item--regular::before { content: 'WAS '; font-size: 0.62rem !important; font-weight: 400 !important; color: #888888 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; } /* NOW price (sale price): order 2 (below WAS) */ .price--on-sale .price__sale dd:not(.price__compare) { display: block !important; order: 2 !important; } .price-item--sale { color: #C9A84C !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 0.9rem !important; } .price-item--sale::before { content: 'NOW '; font-size: 0.62rem !important; font-weight: 400 !important; color: #A0A0A0 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* HIDE unit price "/" completely */ dl.unit-price, .unit-price, .price .unit-price, .card-information .unit-price, dl.unit-price.caption.hidden, .price dl.unit-price { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* ── 10. SALE BADGE ── */ .badge, .badge--sale, [class*="badge"][class*="sale"] { background-color: #C9A84C !important; color: #000000 !important; border: none !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.08em !important; font-size: 0.65rem !important; padding: 3px 8px !important; border-radius: 0 !important; } /* ── 11. BUTTONS ── */ .button, .btn, button.button, .button--primary, [class*="button--primary"], .quick-add__submit, .card__link.button--primary, input[type="submit"], .shopify-payment-button__button { background-color: #C9A84C !important; color: #000000 !important; border: 1px solid #C9A84C !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-radius: 0 !important; } .button:hover, .button--primary:hover, .quick-add__submit:hover { background-color: #E8C96A !important; color: #000000 !important; border-color: #E8C96A !important; } .button--secondary, [class*="button--secondary"], .button--outline { background-color: transparent !important; color: #C9A84C !important; border: 1px solid #C9A84C !important; border-radius: 0 !important; } .button--secondary:hover { background-color: #C9A84C !important; color: #000000 !important; } .card__link { background-color: #C9A84C !important; color: #000000 !important; border: none !important; } /* ── 12. HEADINGS ── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #FFFFFF !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; } /* ── 13. LINKS + TEXT ── */ a { color: #FFFFFF !important; } a:hover { color: #C9A84C !important; } p { color: #A0A0A0 !important; } /* ── 14. INPUTS ── */ input, textarea, select { background-color: #111111 !important; border: 1px solid #2a2a2a !important; color: #FFFFFF !important; border-radius: 0 !important; } input:focus, textarea:focus, select:focus { border-color: #C9A84C !important; outline: none !important; box-shadow: 0 0 0 1px #C9A84C !important; } input::placeholder, textarea::placeholder { color: #A0A0A0 !important; } /* ── 15. FOOTER ── */ footer, .footer, .footer-wrapper { background-color: #0a0a0a !important; border-top: 1px solid #2a2a2a !important; } footer h1, footer h2, footer h3, footer h4, footer .footer__heading { color: #FFFFFF !important; } footer a { color: #A0A0A0 !important; } footer a:hover { color: #C9A84C !important; } /* ── 16. COLLECTION / PRODUCT PAGES ── */ .collection, .product-grid, main { background-color: #0a0a0a !important; } .product__title { color: #FFFFFF !important; } .product__price .price-item { color: #C9A84C !important; } .product-form__submit { background-color: #C9A84C !important; color: #000000 !important; } .product__description { color: #A0A0A0 !important; } /* ── 17. SECTION TITLES ── */ .collection__title, .featured-collection__title, .section-header h2, [class*="__title"] { color: #FFFFFF !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; } /* ── 18. PAGINATION ── */ .pagination a, .pagination span { color: #FFFFFF !important; border-color: #2a2a2a !important; } .pagination a:hover { background-color: #C9A84C !important; color: #000000 !important; } /* ── 19. CART ── */ .cart-drawer, cart-drawer, .cart-drawer__inner { background-color: #0a0a0a !important; } .cart-items td, .cart-items th { border-color: #2a2a2a !important; } .cart__subtotal { color: #C9A84C !important; } .cart__checkout-button { background-color: #C9A84C !important; color: #000000 !important; } /* ── 20. DROPDOWNS + MENUS ── */ .dropdown, .predictive-search, .predictive-search__results-groups { background-color: #111111 !important; border: 1px solid #2a2a2a !important; } .localization-selector, select option { background-color: #111111 !important; color: #FFFFFF !important; } /* ── 21. SCROLLBAR + SELECTION ── */ ::-webkit-scrollbar { width: 6px; background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #2a2a2a; } ::-webkit-scrollbar-thumb:hover { background: #C9A84C; } ::selection { background: #C9A84C; color: #000000; } /* ── 22. MOBILE ── */ @media (max-width: 768px) { .card-information { min-height: 115px !important; padding: 10px !important; } .card__title { font-size: 0.82rem !important; } .price-item--sale { font-size: 0.82rem !important; } dd.price__compare .price-item--regular { font-size: 0.7rem !important; } } /* ── BADGE / TAG TEXT FIX — all text inside tags must be black ── */ .card__badge, .card__badge *, .badge, .badge *, .badge--sale, .badge--sale *, span.badge, span.badge *, [class*="badge"], [class*="badge"] * { color: #000000 !important; } /* ── BUTTON TEXT — ALL buttons must have black text on gold background ── */ /* Target all button variants site-wide, desktop and mobile */ .button, .button *, .btn, .btn *, a.button, a.button *, button.button, button.button *, .button--primary, .button--primary *, .button--simple, .button--simple *, .button--secondary, .button--secondary *, .button-animation, .button-animation *, [class*="button--"], [class*="button--"] * { color: #000000 !important; } /* Specifically fix Log in, Create Account, and nav buttons */ .menu-drawer__account.button, .menu-drawer__account.button *, a.button.button--simple, a.button.button--simple * { color: #000000 !important; } /* ══════════════════════════════════════════════════════ PAGINATION — Collection pages (desktop + mobile) Default (inactive): white bg, black number Active/current: gold bg (#C9A84C), black number ══════════════════════════════════════════════════════ */ /* Reset any inherited white text on pagination */ nav.pagination, nav.pagination *, .pagination__list, .pagination__list * { color: #000000 !important; } /* Inactive page buttons — white background, black number */ .pagination__item, a.pagination__item, .pagination__item.link { background-color: #FFFFFF !important; color: #000000 !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; } /* Inactive page button spans (number label inside anchor) */ .pagination__item span, a.pagination__item span { color: #000000 !important; } /* Inactive hover */ .pagination__item:hover, a.pagination__item:hover { background-color: #C9A84C !important; color: #000000 !important; border-color: #C9A84C !important; } /* ACTIVE / current page — gold background, black number */ .pagination__item--current, span.pagination__item--current { background-color: #C9A84C !important; color: #000000 !important; border: 1px solid #C9A84C !important; border-radius: 0 !important; } /* Arrow buttons (prev/next) — white bg, black arrow */ .pagination__item-arrow, a.pagination__item-arrow, a.pagination__item--prev, a.pagination__item--next { background-color: #FFFFFF !important; color: #000000 !important; border: 1px solid #2a2a2a !important; } .pagination__item-arrow svg, .pagination__item-arrow path, a.pagination__item--prev svg, a.pagination__item--prev path, a.pagination__item--next svg, a.pagination__item--next path { fill: #000000 !important; stroke: #000000 !important; color: #000000 !important; } .pagination__item-arrow:hover { background-color: #C9A84C !important; border-color: #C9A84C !important; } /* Ellipsis dots */ .pagination__item--dots { background-color: transparent !important; color: #FFFFFF !important; border: none !important; } /* Mobile — same rules apply */ @media (max-width: 768px) { .pagination__item, a.pagination__item { background-color: #FFFFFF !important; color: #000000 !important; border: 1px solid #2a2a2a !important; } .pagination__item--current, span.pagination__item--current { background-color: #C9A84C !important; color: #000000 !important; border-color: #C9A84C !important; } /* ============================================================ FILTER SIDEBAR v4 — ALWAYS VISIBLE SIDEBAR + ACCORDION ============================================================ */ /* test */ /* ── Layout: filter sidebar + product grid side by side ── */ .collection-wrapper { display: flex !important; align-items: flex-start !important; gap: 0 !important; position: relative !important; } /* ── Sidebar wrapper: fixed width, always visible ── */ .facets-container { width: 260px !important; min-width: 260px !important; flex-shrink: 0 !important; flex-grow: 0 !important; position: sticky !important; top: 20px !important; align-self: flex-start !important; overflow: visible !important; z-index: auto !important; } /* ── Hide the top "Filters" toggle button row (not needed) ── */ .facets__horizontal-top { display: none !important; } /* ── The inner filter panel: always shown, not an overlay ── */ .facets__container { position: static !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 260px !important; height: auto !important; max-height: none !important; overflow-y: visible !important; overflow-x: visible !important; background-color: #0a0a0a !important; box-shadow: none !important; z-index: auto !important; padding: 0 16px 20px 0 !important; display: block !important; } /* ── Product grid takes remaining space ── */ #ProductGridContainer, .products-grid { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } /* ── Make the facets form fill the container ── */ .facets__form--vertical { width: 100% !important; } /* ── Each filter group: accordion style ── */ .facets__disclosure { border-bottom: 1px solid #2a2a2a !important; padding: 0 !important; overflow: hidden !important; } /* ── Header row: always visible, clickable to toggle ── */ .facets__disclosure-header { cursor: pointer !important; padding: 14px 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; user-select: none !important; } .facets__disclosure-header .subtitle { color: #C9A84C !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 600 !important; } /* ── Arrow icon on each header ── */ .facets__disclosure-header::after { content: '+' !important; color: #C9A84C !important; font-size: 18px !important; font-weight: 300 !important; line-height: 1 !important; transition: transform 0.25s ease !important; flex-shrink: 0 !important; } /* ── When group is open: rotate to × ── */ .facets__disclosure.is-open .facets__disclosure-header::after { content: '−' !important; } /* ── Filter content: hidden by default ── */ .facets__display { display: none !important; padding: 0 0 14px 0 !important; } /* ── Filter content: visible when group is open ── */ .facets__disclosure.is-open .facets__display { display: block !important; } /* ── Checkbox & label styling inside filters ── */ .facets__item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 4px 0 !important; } .facets__label { color: #FFFFFF !important; font-size: 13px !important; cursor: pointer !important; } /* ── Price range inputs ── */ .facets__price { padding: 8px 0 !important; } /* ── RESET buttons ── */ .facets__reset, .facets__reset-button, button.facets__reset { background: transparent !important; border: 1px solid #2a2a2a !important; color: #C9A84C !important; font-size: 10px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 5px 10px !important; cursor: pointer !important; margin-top: 6px !important; } /* ── Hide the old floating trigger / mask ── */ .facets__button-show, .facets-mask, .facets__top { display: none !important; } /* ── Active facets bar ── */ .active-facets { margin-bottom: 12px !important; } /* ── Mobile: stack layout ── */ @media screen and (max-width: 749px) { .collection-wrapper { display: block !important; } .facets-container { width: auto !important; min-width: 0 !important; position: static !important; } .facets__container { position: fixed !important; top: 0 !important; left: -85vw !important; width: 85vw !important; max-width: 320px !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; z-index: 200 !important; padding: 20px 16px !important; box-shadow: 4px 0 20px rgba(0,0,0,0.5) !important; background-color: #111111 !important; transition: left 0.3s ease !important; } .facets-container:has(details[open]) .facets__container { left: 0 !important; display: block !important; } .facets__horizontal-top { display: flex !important; } .facets__display { display: block !important; } }