/** Shopify CDN: Minification failed Line 16:591 Unexpected "\\n\\n" Line 16:641 Expected ":" Line 16:664 Expected ":" Line 16:908 Unexpected "\\n\\n" Line 16:926 Expected ":" Line 16:1007 Expected ":" Line 16:1101 Expected ":" Line 16:1882 Unexpected "\\n\\n" Line 16:2171 Expected ":" Line 16:2193 Expected ":" ... and 70 more hidden warnings **/ /* ==========================================================================\n NOIR & OR — corrections layer\n Loaded after noir.css, before noir-responsive.css.\n\n !important appears where the rule being corrected is scoped by section id\n (#shopify-section-xxxx), which this shared file cannot out-specify.\n ========================================================================== */\n\n/* --------------------------------------------------------------------------\n 1. Colour inheritance\n -------------------------------------------------------------------------- */\n\n.noir-hero,\n.noir-scene,\n.noir-statement {\n color: var(--text);\n}\n\n.noir-hero .noir-marquee__item { color: var(--text); }\n\n/* --------------------------------------------------------------------------\n 2. Rail alignment\n -------------------------------------------------------------------------- */\n\n.noir-rail {\n padding-inline: max(var(--noir-pad-x), calc((100vw - var(--noir-maxw)) / 2));\n scroll-padding-inline-start: max(var(--noir-pad-x), calc((100vw - var(--noir-maxw)) / 2));\n}\n\n/* --------------------------------------------------------------------------\n 3. Placeholder legibility\n\n Shopify's lifestyle and collection placeholders are dark line art and are\n invisible on a black surface. Inverting them makes layout reviewable before\n real photography lands.\n\n This list previously named .noir-split__lead / .noir-split__side, which\n stopped existing when that section was rebuilt around .noir-flows — so the\n rule silently did nothing and several sections looked empty. Every dark\n media container is now covered.\n\n Product placeholders (the coloured apparel illustrations) are deliberately\n NOT inverted: they already read correctly.\n -------------------------------------------------------------------------- */\n\n.noir-hero__media svg,\n.noir-story__shot svg,\n.noir-flows__lead svg,\n.noir-flows__side svg,\n.noir-crafted__media svg,\n.noir-feature__media svg,\n.noir-bh__media svg,\n.noir-art__hero svg,\n.noir-cb__media svg,\n.noir-colcard svg,\n.noir-bento__media svg,\n.noir-pop__media svg {\n filter: invert(1);\n opacity: 0.16;\n}\n\n.noir-card__placeholder { background: var(--noir-surface-2); }\n\n/* --------------------------------------------------------------------------\n 4. Reveal directions\n \"none\" opts a element out of the shared reveal system entirely — used where\n a parent already drives the entrance from scroll progress, so the two do not\n animate the same element twice.\n -------------------------------------------------------------------------- */\n\n[data-noir-reveal=\"none\"] {\n opacity: 1;\n transform: none;\n clip-path: none;\n transition: none;\n}\n\n/* --------------------------------------------------------------------------\n 5. Card polish\n -------------------------------------------------------------------------- */\n\n.noir-card__badge--muted {\n background: var(--noir-surface-2);\n color: var(--text-muted);\n}\n\n.noir-card__info { display: grid; gap: 6px; }\n.noir-card__title a { color: inherit; text-decoration: none; }\n.noir-card__swatch-more { font-size: var(--fs-micro); color: var(--text-muted); }\n\n/* --------------------------------------------------------------------------\n 6. Quick add visibility\n Horizon reveals quick add through rules keyed to its own .product-card\n classes, which NOIR cards do not carry.\n -------------------------------------------------------------------------- */\n\n.noir-card__actions quick-add-component,\n.noir-card__actions .quick-add,\n.noir-card__actions .quick-add__product-form-component,\n.noir-card__actions .quick-add__button {\n opacity: 1 !important;\n visibility: visible !important;\n transform: none !important;\n pointer-events: auto;\n}\n\n.noir-card__actions quick-add-component,\n.noir-card__actions .quick-add {\n display: block !important;\n inline-size: 100%;\n}\n\n.noir-card__actions .quick-add__button {\n inline-size: 100%;\n min-block-size: 44px;\n border-radius: var(--radius-pill);\n}\n\n/* Desktop hover: keep the gold quick-add fully inside the product image. */\n@media (hover: hover) and (pointer: fine) {\n .noir-card {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: auto auto;\n }\n\n .noir-card__media {\n grid-column: 1;\n grid-row: 1;\n }\n\n .noir-card__actions {\n position: relative;\n inset: auto;\n grid-column: 1;\n grid-row: 1;\n align-self: end;\n justify-self: stretch;\n margin: 12px;\n }\n\n .noir-card__info {\n grid-column: 1;\n grid-row: 2;\n }\n}\n\n/* --------------------------------------------------------------------------\n 7. Product page panel width\n -------------------------------------------------------------------------- */\n\n@media (min-width: 990px) {\n .noir-pdp {\n grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 520px) !important;\n }\n}\n\n/* --------------------------------------------------------------------------\n 8. Header hover\n Restricted to navigation links: an earlier version matched buttons and any\n descendant link, and colour inherits down, so hovering anywhere in the bar\n tinted the whole header.\n -------------------------------------------------------------------------- */\n\n#header-component nav a:hover,\n#header-component nav a:focus-visible,\n.header__menu > li > a:hover,\n.menu-list > li > a:hover {\n color: var(--gold);\n transition: color var(--t-hover) var(--ease-noir);\n}\n\n#header-component nav a[aria-current],\n.header__menu a[aria-current],\n.menu-list a[aria-current] {\n color: var(--text);\n}\n\n#header-component nav a[aria-current]:hover { color: var(--gold); }\n\n/* --------------------------------------------------------------------------\n 9. Medallions\n The circles were clipped along their top edge: .noir-section sets\n overflow-x: clip, and per spec one clipped axis forces the other to clip\n too, so overflow-y could not stay visible. The idle float animated\n margin-block-start, pushing each circle outside the box. It now floats with\n a transform, and the row carries vertical padding as well.\n -------------------------------------------------------------------------- */\n\n@keyframes noir-med-float-safe {\n from { transform: translate3d(0, 0, 0); }\n to { transform: translate3d(0, -9px, 0); }\n}\n\n.noir-med__row {\n padding-inline: clamp(20px, 6vw, 90px);\n padding-block: 18px;\n}\n\n.noir-med__item {\n --spread: calc((var(--i) - var(--mid)) * var(--noir-progress) * 52px) !important;\n animation-name: noir-med-float-safe !important;\n margin-block-start: 0 !important;\n isolation: isolate;\n}\n\n.noir-med__item svg { transform: scale(2.1); transform-origin: center; }\n\n@media (prefers-reduced-motion: reduce) {\n .noir-med__item { --spread: 0px !important; }\n}\n\n/* --------------------------------------------------------------------------\n 10. Collection filter drawer close button\n Belongs to the mobile drawer but is always rendered; its styling only\n existed inside the mobile media query, so on desktop it appeared as a stray\n unstyled x before any filter had been applied.\n -------------------------------------------------------------------------- */\n\n.noir-facets__close { display: none; }\n\n@media (max-width: 749px) {\n .noir-facets__close { display: grid; place-items: center; }\n}\n\n.noir-facet__panel { color: var(--text); }\n.noir-facet__panel label { color: inherit; }\n