/** Shopify CDN: Minification failed Line 846:0 Unexpected "}" Line 3096:0 Expected "}" to go with "{" **/ /* custom.css — Taraash theme styles. Plain CSS (previously src/tailwind.css). Tailwind was never actually used: no tw- utility classes anywhere; this file is hand-written overrides. */ /* Product images are 2:3 everywhere (500x750 source recommended — matches exactly, so cover-crop never actually crops anything). Overrides Dawn's own .media--portrait (125% = 4:5); loads after base.css in , so no !important needed here — unlike the section-specific overrides below, which fight stylesheets Dawn links inline later in the page. */ .media--portrait { padding-bottom: 160%; } /* Ensure product cards use taller portrait ratio (160%) across listing pages */ .card__inner { --ratio-percent: 160% !important; } /* Product grid gap for collection / listing page */ .product-grid { column-gap: 2.4rem !important; row-gap: 3.6rem !important; } @media screen and (max-width: 749px) { .product-grid { column-gap: 1.2rem !important; row-gap: 2.4rem !important; } } .related-products__heading { text-align: center; font-size: 3.2rem; text-transform: uppercase; font-weight: 400 !important; } /* Related Products cards: "portrait" here isn't the .media--portrait class above at all — card-product.liquid computes its own --ratio-percent inline per card (hardcoded to 0.8 = 4:5 = 125% for "portrait"), consumed by base.css's generic .ratio::before { padding-bottom: var(--ratio-percent) }. !important needed to beat that inline style; component-card.css loads inline inside related-products.liquid, later than this file, same reason as every other override here. */ .related-products .card__inner { --ratio-percent: 150% !important; max-width: 80% !important; margin-left: auto !important; margin-right: auto !important; } .related-products .card__heading { font-weight: 400 !important; text-align: center !important; } .related-products .card-information, .related-products .card__information { text-align: center !important; } /* Site-wide brand treatment — uppercase/tracked labels, matches header nav. */ .button, .button--secondary, .button--primary { text-transform: uppercase; letter-spacing: 0.08em; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } .button:not([disabled]):hover, .button--secondary:not([disabled]):hover, .button--primary:not([disabled]):hover { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } .button:after, .button--secondary:after, .button--primary:after, .button:not([disabled]):hover::after, .button--secondary:not([disabled]):hover::after, .button--primary:not([disabled]):hover::after { --border-offset: 0px !important; box-shadow: none !important; } /* Space footer columns with generous inset padding and wide spacing */ @media screen and (min-width: 750px) { .footer__blocks-wrapper--2-col { display: flex !important; justify-content: space-between !important; max-width: 1100px !important; margin: 0 auto 3rem auto !important; padding-left: 8rem !important; padding-right: 8rem !important; } .footer__blocks-wrapper--2-col .footer-block { flex: 0 0 auto !important; width: auto !important; min-width: 200px !important; } .footer__blocks-wrapper--3-col { display: flex !important; justify-content: space-between !important; max-width: 1200px !important; margin: 0 auto 3rem auto !important; padding-left: 5rem !important; padding-right: 5rem !important; } .footer__blocks-wrapper--3-col .footer-block { flex: 0 0 auto !important; width: auto !important; min-width: 180px !important; } } @media screen and (max-width: 749px) { .footer__content-top { padding-top: 2.5rem !important; padding-bottom: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .footer__blocks-wrapper--2-col { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 1.5rem !important; width: 100% !important; margin: 0 auto !important; } .footer__blocks-wrapper--2-col .footer-block { flex: 1 1 0 !important; width: calc(50% - 0.75rem) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .footer__blocks-wrapper:not(.footer__blocks-wrapper--2-col) { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 2.4rem !important; margin: 0 auto !important; } .footer-block.grid__item { margin: 0 !important; padding: 0 !important; } .footer-block__details-content { margin-bottom: 0 !important; } .footer-block__heading { margin-bottom: 1.2rem !important; } .footer-block__details-content .list-menu__item--link { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; display: inline-block !important; } .footer__content-bottom { padding-top: 2rem !important; padding-bottom: 4.5rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .footer__content-bottom-wrapper { justify-content: center !important; text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } .footer__copyright { margin-top: 0 !important; text-align: center !important; width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; } .copyright__content { font-size: 1.2rem !important; line-height: 1.6 !important; display: inline-block !important; max-width: 100% !important; word-wrap: break-word !important; } } /* Filter Bar Alignment: Center product count, right-align Category dropdown on desktop */ @media screen and (min-width: 750px) { .facets__form { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; width: 100% !important; border-top: none !important; border-bottom: none !important; padding: 0.6rem 0 !important; margin-bottom: 2.5rem !important; min-height: 4.8rem !important; } #FacetsWrapperDesktop { grid-column: 3 !important; justify-self: end !important; align-self: center !important; display: flex !important; align-items: center !important; margin: 0 !important; } .facets__form .product-count { grid-column: 2 !important; justify-self: center !important; align-self: center !important; display: flex !important; align-items: center !important; margin: 0 !important; text-align: center !important; } } /* Filter Bar Alignment: Clean flex layout on mobile */ @media screen and (max-width: 749px) { .facets-container { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } .facets__form { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; border-top: none !important; border-bottom: none !important; padding: 0.8rem 1.5rem !important; margin-bottom: 2rem !important; min-height: 4.4rem !important; } .facets__form .product-count { grid-column: auto !important; justify-self: start !important; display: flex !important; align-items: center !important; margin: 0 !important; text-align: left !important; } .product-count__text { font-size: 1.15rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(0, 0, 0, 0.6) !important; margin: 0 !important; line-height: 1 !important; white-space: nowrap !important; } #FacetsWrapperDesktop { grid-column: auto !important; justify-self: end !important; display: flex !important; align-items: center !important; margin: 0 !important; } .category-dropdown__summary { height: 3.4rem !important; padding: 0.5rem 1rem !important; gap: 0.6rem !important; } .category-dropdown__label { font-size: 1.1rem !important; letter-spacing: 0.06em !important; } } .product-count__text { font-size: 1.2rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(0, 0, 0, 0.6) !important; margin: 0 !important; line-height: 1 !important; } .category-dropdown__summary { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; position: relative !important; padding: 0.6rem 1.4rem !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; background: #ffffff !important; cursor: pointer !important; list-style: none !important; margin: 0 !important; height: 3.6rem !important; line-height: 1 !important; } .category-dropdown__summary::-webkit-details-marker { display: none !important; } .category-dropdown__label { font-size: 1.2rem !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #000000 !important; white-space: nowrap !important; line-height: 1 !important; } .category-dropdown__caret { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; margin-left: 0.8rem !important; flex-shrink: 0 !important; transition: transform 0.2s ease !important; } details[open] .category-dropdown__caret { transform: rotate(180deg) !important; } .card__heading { text-transform: uppercase; letter-spacing: 0.05em; } .multicolumn-card__info h3 { text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.4rem; } /* text-transform/letter-spacing only — font-size now comes from the footer section's "Column heading size" setting (sections/footer.liquid). */ .footer .footer-block__heading { text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.2rem; } /* padding-left / max-width for these two now come from this section's own "Custom layout" settings (sections/main-product.liquid), not here. */ .product__info-wrapper .product__title h1, .product__info-wrapper .product__title h2 { text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.65rem; font-weight: 500; line-height: 1.3; color: #121212; margin-bottom: 0.6rem; } .product__info-wrapper .product__sku { color: #767676; font-size: 1.2rem; letter-spacing: 0.05em; margin-bottom: 1.8rem; display: block; } .product__info-wrapper .price { font-size: 1.85rem; letter-spacing: 0.04em; font-weight: 400; color: #555555 !important; } .product__info-wrapper .price .price-item { font-size: 1.85rem; letter-spacing: 0.04em; font-weight: 400; color: #555555 !important; } .product__info-wrapper .product__tax { color: #767676; font-size: 1.15rem; margin-top: 0.4rem; margin-bottom: 2.0rem; } .product-form__input .form__label-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 0.8rem; } .product-form__input .form__label { font-size: 1.3rem; letter-spacing: 0.04em; font-weight: 400; color: #121212; margin: 0; } .product-popup-modal__opener, .product__info-wrapper .product-popup-modal__opener, modal-opener.product-popup-modal__opener { display: flex !important; justify-content: flex-end !important; width: 100% !important; margin-left: auto !important; margin-top: 0.4rem; margin-bottom: 1.2rem; text-align: right !important; } .product-form__input .form__label-wrapper .product-popup-modal__opener { width: auto !important; margin-top: 0; margin-bottom: 0; } .product-popup-modal__button, .product__info-wrapper .product-popup-modal__button { font-size: 1.05rem !important; letter-spacing: 0.04em !important; text-decoration: underline !important; text-underline-offset: 0.25rem !important; color: #767676 !important; background: none !important; border: none !important; padding: 0 !important; min-height: auto !important; } /* Mobile Size Guide Modal Layout Fixes */ @media screen and (max-width: 749px) { .product-popup-modal__content { width: 92% !important; padding: 2.2rem 1.6rem 2rem 1.6rem !important; box-sizing: border-box !important; } .product-popup-modal__content-info { padding-right: 0 !important; padding-left: 0 !important; width: 100% !important; box-sizing: border-box !important; } .product-popup-modal__content-info > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .product-popup-modal__content table { display: table !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; margin: 0 !important; } } /* Dawn caps this at max-width:44rem (section-main-product.css), narrower than the full-width buttons row below it — the dropdown looked out of step with everything else in the column. */ .product__info-wrapper .product-form__input { max-width: none; } .product__info-wrapper .select__select { font-size: 1.5rem; height: 4.4rem; border: 0.1rem solid #d0d0d0; border-radius: 0; letter-spacing: 0.04em; padding: 0 1.4rem; color: #121212; } /* Custom size dropdown (src/theme.ts enhances .select on load). The native stays in the DOM, driving Dawn's variant-picker logic exactly as before (JS sets its .value and dispatches 'change'); it's just visually replaced by this styled trigger + panel. */ .product__info-wrapper .select.select--enhanced { position: relative; } .product__info-wrapper .select.select--enhanced .select__select { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .product__info-wrapper .select__label { display: block; width: 100%; height: 4.4rem; line-height: 4.2rem; padding: 0 1.4rem; font-size: 1.5rem; letter-spacing: 0.04em; color: #121212; border: 0.1rem solid #d0d0d0; background: rgb(var(--color-background)); cursor: pointer; user-select: none; transition: border-color 0.2s ease; } .product__info-wrapper .select--open .select__label { border-color: #000000; } .product__info-wrapper .select--enhanced .svg-wrapper { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .product__info-wrapper .select--open .svg-wrapper { transform: translateY(-50%) rotate(180deg); } .product__info-wrapper .select__panel { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 5; margin: 0; padding: 0.4rem 0; list-style: none; background: rgb(var(--color-background)); border: 0.1rem solid #000000; max-height: 24rem; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-0.6rem); transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s; } .product__info-wrapper .select--open .select__panel { opacity: 1; visibility: visible; transform: translateY(0); } .product__info-wrapper .select__option { padding: 1rem 1.4rem; font-size: 1.4rem; letter-spacing: 0.03em; cursor: pointer; transition: background-color 0.15s ease; } .product__info-wrapper .select__option:hover, .product__info-wrapper .select__option[aria-selected='true'] { background-color: rgba(var(--color-foreground), 0.06); } .product__info-wrapper .select__option[aria-disabled='true'] { color: rgba(var(--color-foreground), 0.35); cursor: not-allowed; } .product__info-wrapper .product__text.subtitle { color: rgba(var(--color-foreground), 0.6); font-size: 1.15rem; } .product__info-wrapper a.link { font-size: 1.1rem; } .product__info-wrapper .button { font-size: 1.15rem; letter-spacing: 0.12em; font-weight: 600; } .product-form__buttons-row { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; margin: 1.5rem 0 !important; padding-left: 0 !important; } .product-form__buttons-row > * { width: 100% !important; flex: none !important; min-width: 0; margin-left: 0 !important; } .product-form__buttons-row > *:first-child { margin-left: 0 !important; } .product-form__buttons-row .product-form, .product-form__buttons-row .product-form__buttons, .product-form__buttons-row .form { display: block; width: 100% !important; margin: 0 !important; } .product-form__buttons-row .product-form__submit, .product-form__buttons-row > .product-form__appointment-button { position: relative !important; overflow: hidden !important; z-index: 1 !important; min-width: 0 !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; font-size: 1.15rem; letter-spacing: 0.08em; font-weight: 600; border-radius: 0 !important; height: 4.6rem; min-height: 4.6rem; box-shadow: none !important; cursor: pointer; transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .product-form__buttons-row .product-form__submit::after, .product-form__buttons-row > .product-form__appointment-button::after { display: none !important; content: none !important; box-shadow: none !important; border: none !important; } .product-form__buttons-row .product-form__submit::before, .product-form__buttons-row > .product-form__appointment-button::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; transform: translateY(100%) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .product-form__buttons-row .product-form__submit::before { background-color: #ffffff !important; } .product-form__buttons-row > .product-form__appointment-button::before { background-color: #000000 !important; } .product-form__buttons-row .product-form__submit:hover::before, .product-form__buttons-row > .product-form__appointment-button:hover::before { transform: translateY(0%) !important; } .product-form__buttons-row .product-form__submit { width: 100% !important; background-color: #000000 !important; color: #ffffff !important; border: 0.1rem solid #000000 !important; margin-top: 0 !important; } .product-form__buttons-row .product-form__submit:hover { color: #000000 !important; border-color: #000000 !important; } .product-form__buttons-row > .product-form__appointment-button { background-color: #ffffff !important; color: #000000 !important; border: 0.1rem solid #000000 !important; } .product-form__buttons-row > .product-form__appointment-button:hover { color: #ffffff !important; border-color: #000000 !important; } .product__info-wrapper .accordion { margin-top: 0; margin-bottom: 0; } .product__info-wrapper .accordion summary { padding: 1.3rem 0; } .product__info-wrapper .accordion__title { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 500; } /* Extra `.product__accordion` outranks Dawn's `.product__accordion .accordion__content` (section-main-product.css loads after this file). No `!important`: it would beat the JS open/close animation, which has to drive padding to 0 — see animateAccordion in src/theme.ts. */ .product__info-wrapper .product__accordion .accordion__content { border-top: 0.1rem solid rgba(var(--color-foreground), 0.12); font-size: 10px; line-height: 2.0; padding-top: 2.0rem; padding-bottom: 2.0rem; color: rgba(var(--color-foreground), 0.85); } .product__info-wrapper .accordion__content > :first-child { margin-top: 0 !important; } .product__info-wrapper .accordion__content p, .product__info-wrapper .accordion__content div { margin-bottom: 1.4rem; line-height: 2.0; } .product__info-wrapper .accordion__content ul, .product__info-wrapper .accordion__content ol { margin-top: 1.4rem; margin-bottom: 1.4rem; padding-left: 1.8rem; line-height: 2.0; } .product__info-wrapper .accordion__content li { margin-bottom: 1.2rem; line-height: 2.0; } /* Explicit list-style so these show as real bullet points regardless of whatever markup precedes them in tab_content (product description / custom metafield HTML, which we don't control the shape of). */ .product__info-wrapper .accordion__content .product__category-specs { list-style: disc; list-style-position: outside; padding-left: 1.8rem; margin-top: 1.4rem; } .product__info-wrapper .accordion__content .product__category-specs li { margin-bottom: 0.6rem; } .product__info-wrapper .accordion summary .icon-caret { transition: transform var(--accordion-speed, 650ms) cubic-bezier(0.25, 1, 0.5, 1); } @media screen and (min-width: 990px) { .product--large:not(.product--no-media) .product__media-wrapper { max-width: 60% !important; width: calc(60% - var(--grid-desktop-horizontal-spacing) / 2) !important; } .product__info-wrapper { position: relative !important; } /* Scoped to .product__info-wrapper: `.product__column-sticky` is NOT unique to the info panel — Dawn's product-media-gallery.liquid puts the same class on the element itself when sticky info is enabled (its own, different sticky-media behavior for non-thumbnail layouts). An unscoped selector here made this rule apply to the whole image gallery too, capping and clipping it — the images appeared to stop scrolling entirely. Only the info panel should get this. max-height + overflow:hidden (no scrollbar, no scroll container of its own): when content (e.g. an expanded accordion tab) is taller than the available viewport, giving this panel a real overflow-y:auto scroll box meant the browser routed wheel input to IT instead of the page the moment the cursor was over it — the two sides scrolled independently. There must be exactly one scrollable thing (the page) for both to move together no matter where the cursor is. src/theme.ts instead applies a transform: translateY() to .product__info-scroll-inner (the actual content), computed from page scroll position every frame — this element only clips that translated content to the viewport-height box so it doesn't spill past the panel's edges. */ .product__info-wrapper .product__column-sticky, .product__info-wrapper .product__info-container { display: block !important; position: sticky !important; top: calc(var(--header-height, 60px) + 2rem) !important; max-height: calc(100vh - var(--header-height, 60px) - 4rem) !important; overflow: hidden !important; z-index: 2 !important; } } } /* Navbar (hamburger) drawer: Dawn's own transition system (--duration-default: 200ms, JS-toggled .menu-opening class) already works — this builds on it with a slower eased curve (matches the "slow luxury" motion used elsewhere, e.g. the 650ms accordion), a fade layered on top of Dawn's transform-only slide, backdrop blur, brand nav typography on the menu items, and a staggered per-item reveal instead of everything appearing at once. component-menu-drawer.css loads inline inside header.liquid, later in the page than this file, so !important guarantees the win regardless of source order (same pattern as every other Dawn override in this file). */ /* Fix header & menu drawer stacking context over sticky filter bar (z-index 20) */ .section-header, .shopify-section-group-header-group, .shopify-section-header-sticky { z-index: 50 !important; } /* Lock page background scroll when the menu drawer is open. Overflow: hidden on body/html (what Dawn's own overflow-hidden-desktop class, and an earlier version of this rule, both did) breaks position: sticky on the header the moment the page has actually scrolled: body becomes a new scroll container, the header's sticky containing-block reference gets redirected to it, and the header falls back to its static flow position — i.e. it renders off-screen at whatever scrollY was and appears to "vanish" or "jump" instead of staying put. The header is already sticky_header_type: always (sections/header-group.json) and needs zero help staying in place — it was this lock that was knocking it loose. Same story for the search modal (assets/details-modal.js DetailsModal.open() adds body.overflow-hidden) — src/theme.ts strips that class itself right after adding ours, rather than overriding it here: overflow-hidden is shared by cart-drawer.js/cart-disclosure-modal.js/pickup-availability.js too, and forcing position: fixed on THOSE via a blanket body.overflow-hidden selector would break them the same way (they have no matching scrollY offset, so they'd jump the page to scrollY 0 instead of freezing it). Fix: freeze via position: fixed + a negative top offset (src/theme.ts toggles body.scroll-locked on each trigger's native `toggle` event) — that takes body out of flow without ever touching overflow, so the header's sticky reference (the viewport) never moves. */ body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: visible !important; } .menu-drawer-container, header-drawer { z-index: 100 !important; } /* Dark backdrop overlay - starts below header bar so navbar stays clear */ menu-drawer > details[open] > summary::before, header-drawer > details[open] > summary::before, .menu-drawer-container > details[open] > summary::before { z-index: 80 !important; position: fixed !important; top: var(--header-bottom-position, 60px) !important; left: 0 !important; width: 100vw !important; height: calc(100vh - var(--header-bottom-position, 60px)) !important; height: calc(100dvh - var(--header-bottom-position, 60px)) !important; } /* Menu drawer fixed directly below header - decreased width */ .menu-drawer { position: fixed !important; top: var(--header-bottom-position, 60px) !important; left: 0 !important; width: 320px !important; max-width: 85vw !important; height: calc(100vh - var(--header-bottom-position, 60px)) !important; height: calc(100dvh - var(--header-bottom-position, 60px)) !important; z-index: 90 !important; } @media screen and (min-width: 750px) { .menu-drawer { width: 320px !important; max-width: 350px !important; } } .js details[open] > .menu-drawer, .js details[open] > .menu-drawer__submenu { transition-duration: 380ms !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-property: transform, visibility, opacity !important; } .js .menu-drawer { opacity: 0; } .js details[open].menu-opening > .menu-drawer { opacity: 1; } menu-drawer > details[open] > summary::before { transition-duration: 380ms !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; backdrop-filter: blur(2px); } .menu-drawer__menu-item, .menu-drawer .menu-drawer__menu-item, .menu-drawer .menu-drawer__close-button, .menu-drawer .list-menu__item { text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 500 !important; font-size: 16px !important; padding: 1.0rem 2.0rem !important; transition: background-color 0.25s ease, padding-left 0.25s ease !important; } .menu-drawer__menu-item:hover { padding-left: 2.5rem !important; } /* Each top-level item fades/slides in on its own delay instead of the whole list appearing as one flat block — a small but noticeably more polished open. Capped at 6 items; anything past that just appears with the last item's delay, which is an acceptable floor for a nav this size. */ .js .menu-drawer__navigation > .menu-drawer__menu > li > .menu-drawer__menu-item { opacity: 0; transform: translateX(-0.8rem); transition: opacity 0.3s ease, transform 0.3s ease; } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li > .menu-drawer__menu-item { opacity: 1; transform: translateX(0); } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(1) > .menu-drawer__menu-item { transition-delay: 0.08s; } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(2) > .menu-drawer__menu-item { transition-delay: 0.13s; } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(3) > .menu-drawer__menu-item { transition-delay: 0.18s; } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(4) > .menu-drawer__menu-item { transition-delay: 0.23s; } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(5) > .menu-drawer__menu-item { transition-delay: 0.28s; } .js details[open].menu-opening .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(n+6) > .menu-drawer__menu-item { transition-delay: 0.33s; } /* Search modal: full-screen takeover (brand wordmark, pill search bar, suggested products) instead of Dawn's stock compact dropdown-with-scrim. Dawn's .modal__content is position: absolute; inset: 0 — its containing block ends up being .header-wrapper (the only positioned ancestor), so without this it's sized to the header bar's own height, not the viewport. position: fixed sidesteps that entirely (viewport-relative regardless of ancestors, since nothing here sets a transform to create a new one). */ .header__search .search-modal { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; background: rgb(var(--color-background)) !important; border-bottom: none !important; z-index: 200 !important; animation: none !important; opacity: 0 !important; transform: translateY(-20px) scale(0.98) !important; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: opacity, transform; } details.menu-opening > .header__search .search-modal, .header__search details.menu-opening > .search-modal { animation: none !important; opacity: 1 !important; transform: translateY(0) scale(1) !important; } details.menu-closing > .header__search .search-modal, .header__search details.menu-closing > .search-modal { animation: none !important; opacity: 0 !important; transform: translateY(-16px) scale(0.98) !important; transition: opacity 0.28s cubic-bezier(0.7, 0, 0.84, 0), transform 0.28s cubic-bezier(0.7, 0, 0.84, 0) !important; } .search-modal__field-pill { opacity: 0; transform: translateY(12px) scale(0.97); transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.06s, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.06s !important; } details.menu-opening .search-modal__field-pill { opacity: 1; transform: translateY(0) scale(1); } details.menu-closing .search-modal__field-pill { opacity: 0; transform: translateY(-8px) scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease !important; } /* No dark scrim needed once the modal itself is a full white takeover. */ .header__search .modal-overlay { display: none !important; } .header__search .search-modal__content, .search-modal__content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .header__search .search-modal__form, .header__search form.search-modal__form, .search-modal__form, predictive-search.search-modal__form, form.search-modal__form { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; display: flex !important; flex-direction: column !important; align-items: center !important; overflow: hidden !important; } .search-modal__header { flex: 0 0 auto !important; width: 100% !important; background: rgb(var(--color-background)) !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding-top: 2.4rem !important; padding-bottom: 2rem !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; z-index: 10 !important; position: relative !important; } .search-modal__brand { display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 1.8rem !important; } .search-modal__brand-link { font-size: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; } .search-modal__results-body { flex: 1 1 auto !important; width: 100% !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 3.2rem 0 6rem !important; box-sizing: border-box !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .search-modal__results-body::-webkit-scrollbar { display: none !important; } /* Always pinned top-right, at every breakpoint — Dawn's stock rule makes this position: initial (inline, after the form) at 990px+, which only made sense in the old single-row compact layout. */ .header__search .search-modal__close-button { position: absolute !important; top: 2rem !important; right: 2rem !important; z-index: 250 !important; margin: 0 !important; } .search-modal__field-pill.field { width: 100% !important; max-width: 74.2rem !important; margin: 0 auto !important; } /* Pill-shaped search input, bigger than Dawn's default field. The visible border/shadow "box" around a Dawn .field is never drawn by the input itself (.field__input has border: 0) — it's .field:before/ :after, sized off the theme's --inputs-radius setting (near-square by default). Rounding just .field__input left that outer box square while the input's own background fill was a pill — the "square border" in the screenshot. Rounding the pseudo-elements too fixes the outer box; killing the input's own :focus box-shadow removes the second, mismatched round ring that only .field__input (already rounded below) was picking up on click — the "round bold" appearing on click. */ .search-modal__field-pill.field:before, .search-modal__field-pill.field:after { border-radius: 999px !important; } .search-modal__field-pill .field__input { height: 5.6rem; border-radius: 999px !important; padding-left: 2.4rem !important; } .search-modal__field-pill .field__input:focus, .search-modal__field-pill .field__input:focus-visible, .search-modal__field-pill .field__input:not(:placeholder-shown) { padding-left: 2.4rem !important; box-shadow: none !important; outline: none !important; } /* Dawn positions both of these with a fixed `top` (label) / `top: 0` + fixed `height` (button) calibrated for its own 4.5rem-tall .field — a value baked in assuming that exact height, not computed relative to it. Our field is 5.6rem, so both sat too high instead of centered. top: 50% + translateY(-50%) centers against whatever height the field actually is, so it stays correct regardless. */ .search-modal__field-pill .field__label { left: 2.4rem !important; top: 50% !important; transform: translateY(-50%) !important; } .search-modal__field-pill .field__input:focus ~ .field__label, .search-modal__field-pill .field__input:not(:placeholder-shown) ~ .field__label { top: 1.1rem !important; transform: none !important; } .search-modal__field-pill .field__button { top: 50% !important; transform: translateY(-50%) !important; } .search-modal__featured { width: 100% !important; max-width: 100% !important; margin-top: 2rem; padding-left: 2rem !important; padding-right: 2rem !important; box-sizing: border-box !important; } .search-modal__featured-heading { text-align: center; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.4rem; font-weight: 500; margin-bottom: 2.4rem; } .search-modal__featured-grid, .predictive-search__results-list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1.6rem 1.6rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .search-modal__featured-grid .search-modal__featured-item, .search-modal__featured-grid .grid__item, .predictive-search__results-list .grid__item, .predictive-search__results-list .predictive-search__list-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .search-modal__featured-grid .card-wrapper, .search-modal__featured-grid .card, .predictive-search__results-list .card-wrapper, .predictive-search__results-list .card { width: 100% !important; max-width: 100% !important; } /* Enforce uniform 2:3 portrait ratio on all product cards in search */ .search-modal__featured-grid .card__inner, .predictive-search__results-list .card__inner { position: relative !important; width: 100% !important; aspect-ratio: 2 / 3 !important; padding-bottom: 0 !important; height: auto !important; overflow: hidden !important; } .search-modal__featured-grid .card__media, .search-modal__featured-grid .media, .predictive-search__results-list .card__media, .predictive-search__results-list .media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .search-modal__featured-grid .media img, .predictive-search__results-list .media img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } .search-modal__featured-grid .card__heading, .search-modal__featured-grid .card__heading a, .predictive-search__results-list .card__heading, .predictive-search__results-list .card__heading a { font-size: 1.25rem !important; font-weight: 400 !important; text-align: center !important; line-height: 1.4 !important; word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } @media screen and (min-width: 750px) { .search-modal__featured { padding-left: 3rem !important; padding-right: 3rem !important; } .search-modal__featured-grid, .predictive-search__results-list { grid-template-columns: repeat(4, 1fr) !important; gap: 2.4rem 2rem !important; } } @media screen and (min-width: 990px) { .search-modal__featured-grid, .predictive-search__results-list { grid-template-columns: repeat(5, 1fr) !important; gap: 2.4rem 2rem !important; } } @media screen and (min-width: 1300px) { .search-modal__featured { padding-left: 4rem !important; padding-right: 4rem !important; } .search-modal__featured-grid, .predictive-search__results-list { grid-template-columns: repeat(6, 1fr) !important; gap: 2.4rem 2rem !important; } } /* Header search predictive search results inline styling (no floating popup overlay) */ .header__search predictive-search { position: static !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .header__search .predictive-search { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; margin-top: 4.8rem !important; background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box !important; } .header__search .predictive-search__results-groups-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; border-bottom: none !important; padding-bottom: 0 !important; gap: 2.4rem !important; } .predictive-search__suggestions-container { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; margin-bottom: 1.6rem !important; } .predictive-search__suggestions-label { font-size: 1.2rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: rgba(var(--color-foreground), 0.6) !important; } .predictive-search__suggestions-list { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.8rem !important; } .predictive-search__suggestion-pill { display: inline-block !important; padding: 0.6rem 1.4rem !important; border: 1px solid rgba(var(--color-foreground), 0.18) !important; border-radius: 999px !important; font-size: 1.2rem !important; letter-spacing: 0.04em !important; color: rgb(var(--color-foreground)) !important; text-decoration: none !important; transition: all 0.2s ease !important; } .predictive-search__suggestion-pill:hover { border-color: #000 !important; background-color: #000 !important; color: #fff !important; } .predictive-search__suggestion-pill mark { background: transparent !important; font-weight: 600 !important; color: inherit !important; } /* Suggested products are the empty-query state — hide them once a real query has produced results. predictive-search.js toggles the `open` attribute on the element itself (not just its results div), so this only needs a sibling selector, no extra JS. */ predictive-search[open] .search-modal__featured, predictive-search[open] ~ .search-modal__featured, .search-modal__form[open] .search-modal__featured, .header__search predictive-search[open] .search-modal__featured { display: none !important; } /* Disable stock keyframe animation for search modal so smooth CSS transition handles both opening and closing */ details[open] > .header__search .search-modal, .header__search details[open] > .search-modal { animation: none !important; } /* Footer's 5 blocks always fit one row on desktop — Dawn's own grid-class calculator only handles 1/2/4/6/9-block counts cleanly, not 5. Gap itself comes from the "Gap between columns" setting (sections/footer.liquid). */ @media screen and (min-width: 990px) { .footer__blocks-wrapper { display: flex; flex-wrap: nowrap; } .footer__blocks-wrapper .footer-block { flex: 1 1 0; width: auto; max-width: none; } } /* PDP: vertical thumbnail rail on the left of the main image. Dawn's gallery_layout "thumbnail" only builds the thumbnail markup — it never actually positions it (data-desktop-layout is read by JS for an unrelated a11y tweak, not by any CSS rule in Dawn core). This is genuinely custom layout, not a settings toggle. */ @media screen and (min-width: 750px) { media-gallery[data-desktop-layout='thumbnail'] { display: flex !important; flex-direction: row-reverse !important; align-items: flex-start !important; gap: 1.5rem !important; } media-gallery[data-desktop-layout='thumbnail'] > .thumbnail-slider { display: block !important; position: sticky !important; top: calc(var(--header-height, 60px) + 2rem) !important; flex: 0 0 64px !important; width: 64px !important; z-index: 2 !important; } media-gallery[data-desktop-layout='thumbnail'] > .thumbnail-slider .slider-button { display: none; } media-gallery[data-desktop-layout='thumbnail'] > .thumbnail-slider .thumbnail-list { display: flex; flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: calc(100vh - var(--header-height, 0px) - 4rem); gap: 1rem; scrollbar-width: none; -ms-overflow-style: none; } media-gallery[data-desktop-layout='thumbnail'] > .thumbnail-slider .thumbnail-list::-webkit-scrollbar { display: none; } media-gallery[data-desktop-layout='thumbnail'] > .thumbnail-slider .thumbnail-list__item { width: 100%; } /* Dawn squares every thumbnail via .thumbnail-list__item::before { padding-bottom: 100% } (section-main-product.css). 2:3 portrait needs height/width * 100%. */ media-gallery[data-desktop-layout='thumbnail'] > .thumbnail-slider .thumbnail-list__item::before { padding-bottom: 150%; } /* Active state is the border only — no dimming of inactive thumbnails. Border width stays constant so nothing shifts when the active one moves. Width itself comes from this section's "Active thumbnail border width" setting (sections/main-product.liquid), not from here. */ media-gallery[data-desktop-layout='thumbnail'] .thumbnail { border-style: solid !important; border-color: transparent !important; box-shadow: none !important; transition: border-color 0.15s ease; } media-gallery[data-desktop-layout='thumbnail'] .thumbnail[aria-current] { border-color: rgb(var(--color-foreground)) !important; } media-gallery[data-desktop-layout='thumbnail'] > slider-component:not(.thumbnail-slider) { flex: 1; min-width: 0; } /* Show every image stacked in one column instead of Dawn's default single-active-image swap (.product__media-item:not(.is-active) { display: none } in section-main-product.css). */ media-gallery[data-desktop-layout='thumbnail'] .product__media-item { display: block !important; } media-gallery[data-desktop-layout='thumbnail'] .product__media-list { display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 1.0rem !important; row-gap: 1.0rem !important; } media-gallery[data-desktop-layout='thumbnail'] .product__media-item { width: 100%; max-width: 100%; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; scroll-snap-align: none; /* Keeps thumbnail click-to-scroll from parking an image under the navbar. */ scroll-margin-top: calc(var(--header-height, 0px) + 2rem); } } /* Main product gallery images: uncap max-width & max-height, scale height dynamically in exact 2:3 ratio (height = 1.5 * width) */ media-gallery .product-media-container, media-gallery .product__media-item, media-gallery .product__modal-opener, media-gallery .product__media, .product__media-list .product-media-container { max-width: 100% !important; width: 100% !important; max-height: none !important; } media-gallery .product-media-container.media-type-image, .product__media-list .product-media-container { --aspect-ratio: 0.6667; aspect-ratio: 2000 / 3000 !important; padding-bottom: 0 !important; height: auto !important; position: relative !important; width: 100% !important; overflow: hidden !important; } /* max-width cap + centering only makes sense once there's a media column to center within (desktop, min-width:750px below). Unscoped, it was also capping mobile at 460px with auto margins either side — mobile's own gallery spec calls for full-bleed (edge-to-edge), not a centered, gutter'd box. */ @media screen and (min-width: 750px) { media-gallery .product-media-container.media-type-image, .product__media-list .product-media-container { max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; } } @media screen and (max-width: 749px) { .product__media-wrapper { padding: 0px 15px 12px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; width: 100% !important; } .product__media-list { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 1.5rem !important; width: 100% !important; gap: 1.5rem !important; padding: 0 !important; scroll-padding-left: 0 !important; } .product__media-list .product__media-item { width: 100% !important; padding: 0 !important; } .product__media-icon { top: 1rem !important; left: 1rem !important; } } media-gallery .product-media-container.media-type-image img, .product__media-list img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* Mobile gallery full-bleed breakout: removing the media-container's own max-width (above) wasn't enough — the whole section still sits inside .page-width's padding:0 1.5rem (base.css), so the image was still gutter'd by the PARENT, not by anything of its own. Pulling the media column out to the viewport edges escapes that without touching .page-width itself (which every other section still needs padded). margin: calc(50% - 50vw) instead of the previous hardcoded -1.5rem: that value only cancels out correctly if .page-width's padding is exactly 1.5rem with nothing else in between — .product__media-wrapper is actually nested inside .product too, so if that assumption is even slightly off the element ends up wider than its container with nothing clipping it, adding real horizontal scroll room to the whole page (the entire page shifting left on scroll, text clipped on one edge, was this exact bug). The calc(50% - 50vw) form is pure viewport math — it doesn't need to know or guess any ancestor's padding at all, so it can't be wrong the same way. width must be 100vw here, not 100% — margin's "50%" resolves against the containing block's own width, but width:100% ALSO resolves against that same containing block, so it doesn't grow to fill the space the negative margins just freed up; the box stayed its original (narrower, padded) width, just shifted left, leaving a gap on the right equal to the full padding amount. width:100vw is the only value that's consistent with the 50vw term in the margins — both measure the same way, so together they cancel out to exactly the true viewport edges regardless of what vw happens to include on a given browser. */ @media screen and (max-width: 749px) { .product__media-wrapper { margin-left: -1.5rem !important; margin-right: -1.5rem !important; width: calc(100% + 3rem) !important; max-width: calc(100% + 3rem) !important; } } /* Hide the page scrollbar everywhere — scrolling still works, just no persistent scrollbar chrome, matching the site's minimal aesthetic. */ html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } /* Strict horizontal overflow prevention without breaking position: sticky */ html, body { overflow-x: clip !important; max-width: 100vw !important; } /* Menu drawer open jump: Chrome's scroll anchoring re-measures an anchor node when DOM near the top of the viewport changes (the drawer's `open` attribute + menu-opening class flipping, the header gaining .menu-open). It then "corrects" scrollY to keep that anchor's on-screen position stable — which reads as the page jumping by about one header height the instant the drawer opens. Nothing under the sticky header is actually supposed to move, so anchoring has nothing worth preserving here. */ html, body, .section-header, .menu-drawer { overflow-anchor: none; } #MainContent, main, .section-header, .header-wrapper, header { overflow-x: clip !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Full-screen lightbox modal with smooth opening & closing animation */ .product-media-modal { background-color: #f4f4f4 !important; z-index: 100000 !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 350ms cubic-bezier(0.25, 1, 0.5, 1), visibility 350ms cubic-bezier(0.25, 1, 0.5, 1) !important; } .product-media-modal[open] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .product-media-modal__dialog { background-color: #f4f4f4 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100vh !important; width: 100vw !important; padding: 0 !important; margin: 0 !important; position: fixed !important; top: 0 !important; left: 0 !important; transform: scale(0.97); transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1) !important; } .product-media-modal[open] .product-media-modal__dialog { transform: scale(1) !important; } .product-media-modal__content { background-color: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 100vh !important; width: 100% !important; max-width: 100vw !important; margin: 0 auto !important; padding: 1.0rem 0 !important; overflow: hidden !important; } .product-media-modal__content > * { display: none !important; opacity: 0; } .product-media-modal__content > *.active, .product-media-modal__content [data-media-id].active { display: flex !important; align-items: center !important; justify-content: center !important; max-height: 96vh !important; max-width: 95vw !important; width: auto !important; height: 96vh !important; opacity: 1 !important; animation: modalImageFadeIn 320ms cubic-bezier(0.25, 1, 0.5, 1) forwards; } @keyframes modalImageFadeIn { from { opacity: 0; transform: scale(0.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .product-media-modal__content img { height: 94vh !important; max-height: 94vh !important; max-width: 95vw !important; width: auto !important; object-fit: contain !important; border-radius: 0 !important; box-shadow: none !important; } /* Floating 3-button circular controls bar at bottom center */ .product-media-modal__controls { position: fixed !important; bottom: 2.2rem !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 100001 !important; display: flex !important; align-items: center !important; gap: 1.2rem !important; } .product-media-modal__nav-button { width: 4.4rem !important; height: 4.4rem !important; border-radius: 50% !important; background-color: #ffffff !important; color: #333333 !important; border: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; padding: 0 !important; } .product-media-modal__nav-button:hover { transform: scale(1.06) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important; } .product-media-modal__toggle { position: static !important; top: auto !important; right: auto !important; } /* Product cards taller aspect ratio (160%) across product listing pages */ .card__inner { --ratio-percent: 160% !important; } /* Product grid gap for collection / listing page - generous breathing space */ .product-grid { --grid-desktop-horizontal-spacing: 40px !important; --grid-desktop-vertical-spacing: 56px !important; column-gap: 4rem !important; row-gap: 5.6rem !important; } @media screen and (max-width: 989px) { .product-grid { --grid-desktop-horizontal-spacing: 24px !important; --grid-desktop-vertical-spacing: 36px !important; --grid-mobile-horizontal-spacing: 20px !important; --grid-mobile-vertical-spacing: 36px !important; column-gap: 2rem !important; row-gap: 3.6rem !important; } } /* Product card text styling across product listing pages: refined text size, no bold, center aligned */ .card__heading, .card__heading a { font-size: 1.4rem !important; font-weight: 400 !important; text-align: center !important; } .card__content, .card__information, .card-information { text-align: center !important; } /* Product card price styling: 2px smaller than card title (10px), grey color, centered under product name */ .card-information > .price, .card__information .price, .card-wrapper .price, .product-card-wrapper .price, .card__price { font-size: 10px !important; color: #767676 !important; font-weight: 400 !important; text-align: center !important; margin-top: 4px !important; margin-bottom: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } .card-information > .price .price-item, .card__information .price .price-item, .card-wrapper .price .price-item, .product-card-wrapper .price .price-item, .card__price .price-item, .card-information > .price .price-item--last, .card__information .price .price-item--last { font-size: 10px !important; color: #767676 !important; font-weight: 400 !important; letter-spacing: 0.05em !important; } .card-information > .price .price-item--regular, .card__information .price .price-item--regular, .card-wrapper .price .price-item--regular { color: #a0a0a0 !important; font-size: 9px !important; } /* Hide product card prices on home page */ .template-index .card-information > .price, .template-index .card__information .price, .template-index .card-wrapper .price, .template-index .product-card-wrapper .price, .template-index .card__price, .template-index .collection-tabs .price, .template-index .featured-collection .price, main[data-template="index"] .card-information > .price, main[data-template="index"] .card__information .price, main[data-template="index"] .card-wrapper .price, main[data-template="index"] .product-card-wrapper .price, main[data-template="index"] .card__price, main[data-template="index"] .collection-tabs .price, main[data-template="index"] .featured-collection .price { display: none !important; } /* Related Products Section: Top divider line & larger full-width product images */ .related-products { border-top: 1.5px solid #d0d0d0 !important; margin-top: 6rem !important; padding-top: 4.5rem !important; } .related-products__heading { text-align: center !important; font-size: 2.8rem !important; font-weight: 300 !important; -webkit-font-smoothing: antialiased !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 4rem !important; } .related-products .card__inner { max-width: 100% !important; width: 100% !important; margin: 0 !important; --ratio-percent: 160% !important; } .related-products .card-wrapper { max-width: 100% !important; width: 100% !important; } .related-products .card__heading, .related-products .card__heading a { font-size: 1.25rem !important; font-weight: 400 !important; text-align: center !important; } .related-products .price, .related-products .price-item, .related-products .price * { color: #767676 !important; font-size: 1.25rem !important; text-align: center !important; } .related-products .card-information, .related-products .card__information { text-align: center !important; } /* Related Products Carousel Slider & Navigation Controls */ .related-products__slider { position: relative !important; display: block !important; } .related-products .slider-buttons { position: absolute !important; top: 38% !important; left: 0.5rem !important; right: 0.5rem !important; width: calc(100% - 1rem) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; pointer-events: none !important; z-index: 10 !important; margin: 0 !important; padding: 0 !important; } .related-products .slider-button { pointer-events: auto !important; width: 4.4rem !important; height: 4.4rem !important; border-radius: 50% !important; background-color: #ffffff !important; color: #121212 !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease !important; } .related-products .slider-button:hover:not([disabled]) { transform: scale(1.08) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important; } /* Not display:none: that removes the button from the flex layout entirely, and .slider-buttons' justify-content:space-between only actually spaces between TWO items — with just one left (e.g. only "next" on the first slide, "prev" disabled), it collapses to flex-start, landing the one remaining button on the left instead of staying on its own side. Keeping its flex slot reserved (invisible + non-interactive, not removed) is what keeps the other button correctly pinned to the opposite edge. */ .related-products .slider-button[disabled], .related-products .slider-button.disabled { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .related-products .slider-button .svg-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; } /* Dawn's base.css rotates/shrinks .icon inside slider-button--prev/--next (transform: rotate(90deg)/rotate(-90deg), height:0.6rem) — leftover rules built for its own down-pointing caret icon, which needed that rotation to become left/right-pointing. This markup uses pre-oriented chevron-left/ chevron-right SVGs instead (already point the right way, no rotation needed) with their own width/height="20" attributes — Dawn's old rules still matched .icon generically and both rotated an already-correct arrow an extra 90°, landing it pointing up, and shrunk it to 6px tall. Undoing both directly on the icon itself (not .svg-wrapper — that's the wrapping span, a different element than what Dawn's rules actually target). */ .related-products .slider-button .icon { transform: none !important; height: 2rem !important; width: 2rem !important; } @media screen and (max-width: 749px) { .related-products .slider-buttons { left: 0.2rem !important; right: 0.2rem !important; width: calc(100% - 0.4rem) !important; top: 35% !important; } .related-products .product-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; scrollbar-width: none !important; -ms-overflow-style: none !important; column-gap: 0 !important; margin: 0 !important; padding: 0 !important; } .related-products .product-grid::-webkit-scrollbar { display: none !important; } .related-products .grid__item { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; scroll-snap-align: center !important; padding: 0 1rem !important; box-sizing: border-box !important; } } @media screen and (min-width: 750px) { .related-products .product-grid { column-gap: 4.8rem !important; row-gap: 6rem !important; } .related-products .card__inner { --ratio-percent: 165% !important; min-height: 420px !important; } .related-products .slider-buttons.desktop-hide { display: none !important; } } /* Collection page hero - centered title, big font, font-weight 400 */ .collection-hero { padding-top: 1rem !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center !important; } .collection-hero__inner { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; justify-content: center !important; text-align: center !important; } .collection-hero__text-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; text-align: center !important; width: 100% !important; max-width: 100% !important; } .collection-hero__title { text-align: center !important; font-size: 16px !important; font-weight: 300 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #121212 !important; margin-bottom: 0.8rem !important; } @media screen and (max-width: 749px) { .collection-hero__title { font-size: 16px !important; } } /* Remove grid container top padding */ collection-component > div, [class*="main-collection-product-grid"] > div, div[class*="section-"][class*="-padding"] { padding-top: 0 !important; margin-top: 0 !important; } /* Sticky collection filter bar, aligned to the product grid. The wrapper carries the .page-width class in the markup, so it must be centred and capped at --page-width like the grid's .collection.page-width container — otherwise the bar and its divider drift left of the products on screens wider than --page-width. position:sticky is declared once (a second `position` later in the same rule used to silently cancel the pin). Note: .facets-container is Dawn's inner wrapper INSIDE .facets-wrapper (snippets/facets.liquid), not the same element — only the outer wrapper is sticky and bordered; the inner one just gets its spacing reset. */ .facets-wrapper, aside.facets-wrapper, #main-collection-filters { position: sticky !important; top: var(--header-height, 60px) !important; z-index: 20 !important; background: #ffffff !important; /* Match the product grid's container exactly (.collection.page-width): centred, capped at the theme page width. The old width:100vw + margin:calc(50% - 50vw) full-bleed collapsed to margin-left:0 (the containing block is ~100vw, so 50% ≈ 50vw) while width:100vw was clamped by the .page-width class's inherited max-width — leaving the bar the grid's width but pinned left on screens wider than --page-width. */ width: 100% !important; max-width: var(--page-width, 100rem) !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 3rem !important; padding: 0 !important; border-top: none !important; border-bottom: none !important; } /* While the menu drawer (or search modal) is open the page can't scroll, so the filter bar has no reason to sit above anything. Drop it below the header/drawer stacking context so the drawer and its scrim cover it instead of the bar punching through. Keyed off body.overflow-hidden-* (Dawn's HeaderDrawer.openMenuDrawer adds it synchronously with the details[open] flip) rather than .scroll-locked (assets/custom.js sets that from the async `toggle` event, one frame later — that gap is one frame of the bar still on top, i.e. the flicker). */ body.overflow-hidden-desktop .facets-wrapper, body.overflow-hidden-desktop aside.facets-wrapper, body.overflow-hidden-desktop #main-collection-filters, body.overflow-hidden-mobile .facets-wrapper, body.overflow-hidden-mobile aside.facets-wrapper, body.overflow-hidden-mobile #main-collection-filters, body.scroll-locked .facets-wrapper, body.scroll-locked aside.facets-wrapper, body.scroll-locked #main-collection-filters { z-index: 0 !important; } /* Grey divider sits on .facets__form's content edges (which already match the product grid's .page-width content box) via this pseudo-element, not on .facets-wrapper's full page-width box — otherwise the line overhangs the dropdowns, product count and cards by the form's 5rem side padding. */ .facets__form { position: relative !important; } .facets__form::after { content: "" !important; position: absolute !important; left: 5rem !important; right: 5rem !important; bottom: 0 !important; border-bottom: 1px solid #e0e0e0 !important; } @media screen and (max-width: 749px) { .facets__form::after { left: 20px !important; right: 20px !important; } } .facets-container { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; } .facets-container facet-filters-form.facets { display: block !important; width: 100% !important; } .price__badge-sold-out, .badge--sold-out, .badge.price__badge-sold-out, [class*="sold_out"], [class*="sold-out"].badge, .label-unavailable { display: none !important; } .facets__heading { display: none !important; } .facets__wrapper details.facets__disclosure:not([id^="Details-Category-"]):not([id^="Details-Price-Sort-"]) { display: none !important; } .active-facets.active-facets-desktop { display: none !important; margin: 0 !important; padding: 0 !important; } /* Remove unwanted pseudo-element box */ .facets__form::before { display: none !important; content: none !important; } /* Desktop layout: flex row with product count on left, Category & Price on right */ @media screen and (min-width: 750px) { .facets__form { display: flex !important; flex-direction: row-reverse !important; justify-content: space-between !important; align-items: center !important; position: relative !important; max-width: var(--page-width, 1200px) !important; width: 100% !important; height: 4.8rem !important; margin: 0 auto !important; padding: 0 5rem !important; box-sizing: border-box !important; } .facets__form .product-count, .product-count-vertical { position: static !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; height: 100% !important; } .product-count__text { font-size: 1.2rem !important; color: #333333 !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1 !important; } .facets__right-container { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .facets__right-container #FacetsWrapperDesktop, .facets__right-container .facets__wrapper { display: flex !important; align-items: center !important; gap: 2rem !important; height: 100% !important; margin: 0 !important; } .facets__right-container details.facets__disclosure[id^="Details-Category-"], .facets__right-container details.facets__disclosure[id^="Details-Price-Sort-"] { margin: 0 !important; } } /* Hide Dawn's default mobile menu drawer wrapper and duplicate standalone product count */ .mobile-facets__wrapper, .active-facets.active-facets-mobile, .facets-container > .product-count, .facets-wrapper > .product-count, div.product-count:not(.facets__form .product-count) { display: none !important; } /* Mobile layout: clean split sticky bar aligned with product grid */ @media screen and (max-width: 749px) { .facets-wrapper, aside.facets-wrapper, #main-collection-filters { margin: 0 auto 2rem auto !important; width: 100% !important; max-width: 100% !important; } .facets__form { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 4.4rem !important; margin: 0 !important; padding: 0 20px !important; box-sizing: border-box !important; } /* Right side: Total Product Count */ .facets__form .product-count, .product-count-vertical { flex: 0 0 auto !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; border-right: none !important; border-left: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; text-align: right !important; } .product-count__text { width: auto !important; font-size: 1.05rem !important; color: #333333 !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1 !important; white-space: nowrap !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; text-align: right !important; } /* Left side: By Category & Price Dropdowns */ .facets__right-container { flex: 0 0 auto !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .facets__right-container #FacetsWrapperDesktop, .facets__right-container .facets__wrapper { width: auto !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 1.4rem !important; margin: 0 !important; padding: 0 !important; } .facets__right-container details.facets__disclosure[id^="Details-Category-"], .facets__right-container details.facets__disclosure[id^="Details-Price-Sort-"] { width: auto !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; } .category-dropdown__summary { width: auto !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; border: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } .category-dropdown__label { font-size: 1.05rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #333333 !important; line-height: 1 !important; white-space: nowrap !important; } div[id^="Facet-Category-"], div[id^="Facet-Price-Sort-"] { top: calc(100% + 4px) !important; transform: none !important; width: 20rem !important; max-width: calc(100vw - 2rem) !important; padding-left: 1.2rem !important; box-sizing: border-box !important; } div[id^="Facet-Category-"] { left: 1rem !important; right: auto !important; } div[id^="Facet-Price-Sort-"] { left: 7rem !important; right: auto !important; } div[id^="Facet-Category-"] li, div[id^="Facet-Price-Sort-"] li { padding-left: 1.6rem !important; padding-right: 1.6rem !important; } } /* Hide loading circle/spinner during sort/filter changes */ .facets-container .loading__spinner, facet-filters-form .loading__spinner, .product-count .loading__spinner, .facet-filters .loading__spinner, .collection .loading__spinner, .loading-overlay__spinner { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* All collections page & collection list styling */ .collection-card-wrapper .icon-wrap, .collection-list .icon-wrap, .contains-card--collection .icon-wrap { display: none !important; } .collection-card-wrapper .card__inner, .collection-list .card__inner, .contains-card--collection .card__inner, .collection-card-wrapper .media, .collection-list .media, .contains-card--collection .media { --ratio-percent: 150% !important; aspect-ratio: 2 / 3 !important; padding-bottom: 150% !important; border-radius: 4px; overflow: hidden; width: 100% !important; } /* Base Title */ h1.title--primary, .main-list-collections .title, .template-list-collections .title--primary { text-align: center !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; } /* Base Collection Item Titles */ .collection-card-wrapper .card__information, .collection-list .card__information, .contains-card--collection .card__information { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 1.2rem !important; } .collection-card-wrapper .card__heading, .collection-list .card__heading, .contains-card--collection .card__heading, .collection-card-wrapper .card__heading a, .collection-list .card__heading a { text-align: center !important; font-weight: 400 !important; text-transform: uppercase !important; } /* Mobile Layout (< 750px) */ @media screen and (max-width: 749px) { .template-list-collections .section, .template-list-collections main > .page-width, .section-collection-list { padding-top: 2rem !important; padding-bottom: 3.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } h1.title--primary, .main-list-collections .title, .template-list-collections .title--primary { font-size: 2.4rem !important; letter-spacing: 0.1em !important; margin-top: 0.5rem !important; margin-bottom: 2.25rem !important; } .collection-list { display: grid !important; grid-template-columns: 1fr !important; row-gap: 3rem !important; padding: 0 !important; } .collection-list__item { width: 100% !important; max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } .collection-card-wrapper .card__heading a, .collection-list .card__heading a { font-size: 1.45rem !important; letter-spacing: 0.08em !important; } } /* Desktop Layout (>= 750px) */ @media screen and (min-width: 750px) { .template-list-collections .section, .template-list-collections main > .page-width, .section-collection-list { padding-top: 5rem !important; padding-bottom: 6rem !important; } h1.title--primary, .main-list-collections .title, .template-list-collections .title--primary { font-size: 3.2rem !important; margin-top: 1rem !important; margin-bottom: 3.5rem !important; } .collection-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 320px)) !important; justify-content: center !important; column-gap: 3.5rem !important; row-gap: 4.5rem !important; padding: 1rem 0 !important; } .collection-list__item { width: 100% !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; } .collection-card-wrapper .card__heading a, .collection-list .card__heading a { font-size: 1.45rem !important; letter-spacing: 0.08em !important; } } /* Home page Explore Collection / Collection Tabs centering & heading size */ .collection-tabs__heading { text-align: center !important; font-size: 24px !important; } .collection-tabs__nav { display: flex !important; justify-content: center !important; align-items: center !important; } @media screen and (max-width: 749px) { .collection-tabs__nav { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; gap: 2rem !important; padding: 0 1.5rem 0.5rem !important; margin-left: 0 !important; margin-right: 0 !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .collection-tabs__nav::-webkit-scrollbar { display: none !important; } .collection-tabs__tab { flex: 0 0 auto !important; white-space: nowrap !important; } } /* Header Submenu & Dropdown Menu Styling */ .header__submenu { border-radius: 0 !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; padding: 1rem 0 !important; background: #ffffff !important; min-width: 220px !important; } .header__submenu .header__menu-item { font-size: 1.25rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important; padding: 0.9rem 2.2rem !important; color: #121212 !important; transition: all 0.2s ease !important; } .header__submenu .header__menu-item:hover { background: rgba(18, 18, 18, 0.04) !important; color: #000000 !important; padding-left: 2.6rem !important; } /* Hover disclosure support on desktop */ @media screen and (min-width: 990px) { header-menu details:hover > summary + .header__submenu, header-menu details[open] > .header__submenu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } header-menu details summary { cursor: pointer; } } /* Drawer Submenu Accordion / Dropdown Styling */ .js .menu-drawer__submenu { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; bottom: auto !important; transform: none !important; visibility: visible !important; background-color: transparent !important; padding-left: 2.5rem !important; display: none !important; } .menu-drawer details[open] > .menu-drawer__submenu { display: block !important; } .menu-drawer__inner-submenu .menu-drawer__close-button { display: none !important; } .menu-drawer summary.menu-drawer__menu-item .icon-arrow, .menu-drawer summary.menu-drawer__menu-item > .svg-wrapper:first-of-type { display: none !important; } .menu-drawer summary.menu-drawer__menu-item .icon-caret, .menu-drawer summary.menu-drawer__menu-item > .svg-wrapper:last-of-type { display: inline-block !important; transition: transform 0.3s ease !important; } .menu-drawer details[open] > summary.menu-drawer__menu-item > .svg-wrapper:last-of-type { transform: translateY(-50%) rotate(180deg) !important; } .menu-drawer__submenu .menu-drawer__menu-item { font-size: 12px !important; padding: 0.8rem 2.0rem !important; } /* Prevent parent navigation from hiding when submenu is open */ .js .menu-drawer__navigation .submenu-open { visibility: visible !important; } /* Legal Policy Pages Styling (Terms of Service & Privacy Policy) */ .legal-policy { max-width: 900px !important; margin: 0 auto !important; padding-top: 4.5rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .legal-policy__header { padding-top: 1rem !important; margin-bottom: 3.5rem !important; } .legal-policy__subtitle { display: block; font-size: 1.1rem; letter-spacing: 0.25em; text-transform: uppercase; color: #71717a; margin-bottom: 0.8rem; font-weight: 500; } .legal-policy__title { font-size: 3.2rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #121212; margin: 0 0 1.6rem 0; } .legal-policy__divider { width: 60px; height: 1px; background-color: #121212; margin: 0 auto; } .legal-policy__container { display: flex; flex-direction: column; gap: 3.5rem; } .legal-policy__section { border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 3rem; } .legal-policy__section:last-child { border-bottom: none; } .legal-policy__section-heading { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #18181b; margin: 0 0 1.4rem 0; } .legal-policy__content { font-size: 1.45rem; line-height: 1.85; color: #3f3f46; } .legal-policy__content p { margin: 0 0 1.2rem 0; } .legal-policy__content p:last-child { margin-bottom: 0; } .legal-policy__content ul { margin: 1rem 0 1.5rem 2rem; padding: 0; list-style-type: disc; } .legal-policy__content li { margin-bottom: 0.8rem; } .legal-policy__content a { color: #000000; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; } .legal-policy__content a:hover { opacity: 0.7; } .legal-policy__content li, .contact-info-details p { font-family: var(--font-body-family); } size-guide-tabs.size-guide-container, .size-guide-container { margin-top: 16px !important; display: block !important; } .legal-policy__contact-email { font-weight: 600; font-size: 1.5rem; color: #121212; } @media screen and (max-width: 749px) { .legal-policy__title { font-size: 2.5rem; } .legal-policy__section-heading { font-size: 1.4rem; } .legal-policy__content { font-size: 1.35rem; } } /* Floating reCAPTCHA badge */ .grecaptcha-badge { visibility: hidden !important; } .shopify-challenge__container { display: block !important; max-width: 500px !important; margin: 60px auto !important; padding: 30px 20px !important; text-align: center !important; } .shopify-challenge__container iframe { display: inline-block !important; margin: 20px auto !important; } .shopify-challenge__button { display: inline-block !important; margin-top: 20px !important; padding: 12px 32px !important; background: #121212 !important; color: #ffffff !important; border: none !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; } /* Site-Wide Typography Directives: Page Titles (16px), Product Titles (16px), Sub Headings (12px), Description (10px) */ /* 1. Page & Section Titles: 16px */ h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .hxxl, .hxl, .title, .title-wrapper, .page-title, .main-page-title, .section-heading, .related-products__heading, .article-card__title, .footer-block__heading, .menu-drawer__heading, .header__heading, .header__heading-link, .multicolumn-card__info h3, .rich-text__heading, .banner__heading, .collection__title, .collection-hero__title, .legal-policy__title, .legal-policy__section-heading, .cart-drawer__heading, .cart-notification__heading, .modal__title, .quick-add-modal__content-info h2, .size-guide-modal__title, .size-guide-title, .product-recommendations__heading { font-size: 16px !important; } /* 1b. Home Page Section Titles: 20px */ .template-index h1, .template-index h2, .template-index h3, .template-index h4, .template-index h5, .template-index h6, .template-index .h0, .template-index .h1, .template-index .h2, .template-index .h3, .template-index .h4, .template-index .h5, .template-index .title, .template-index .title-wrapper, .template-index .page-title, .template-index .section-heading, .template-index .related-products__heading, .template-index .collapsible-content__heading, .template-index .rich-text__heading, .template-index .collection-tabs__title, .template-index .multicolumn-card__info h3 { font-size: 20px !important; } /* 1c. Explore Collection, Responsive Banner & Multicolumn Headings: 24px desktop, 16px mobile, not bold */ .multicolumn__title, .responsive-banner-wrapper .title-wrapper-with-link { justify-content: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .collection-tabs__heading, .template-index .collection-tabs__heading, .collection-tabs h2, .responsive-banner__section-heading, .multicolumn__title .title { text-align: center !important; font-size: 24px !important; font-weight: 300 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; width: 100% !important; } @media screen and (max-width: 749px) { .collection-tabs__heading, .template-index .collection-tabs__heading, .collection-tabs h2, .responsive-banner__section-heading, .multicolumn__title .title { font-size: 16px !important; text-align: center !important; } } /* 1d. Banner & Discover Collection Headings: 28px desktop, 16px mobile */ .banner__heading, .banner__box .banner__heading, .template-index .banner__heading, .slideshow .banner__heading, .image-banner .banner__heading { font-size: 28px !important; font-weight: 300 !important; } @media screen and (max-width: 749px) { .banner__heading, .banner__box .banner__heading, .template-index .banner__heading, .slideshow .banner__heading, .image-banner .banner__heading { font-size: 16px !important; } .banner__buttons .button, .slideshow .button, .image-banner .button, .banner__box .button { font-size: 11px !important; padding: 0.7rem 1.6rem !important; min-height: 3.6rem !important; min-width: auto !important; letter-spacing: 0.08em !important; } } /* 2. Main Product Title (PDP): 16px */ .product__title, .product__title h1, .product__title h2 { font-size: 16px !important; } /* 2b. Product Card Titles (Listing Grids, Carousels, Cart): 12px */ .card__heading, .card__heading a, .card-information .card__heading, .card-wrapper .card__heading, .product-card-wrapper .card__heading, .collection-tabs .card__heading, .cart-item__name, .cart-notification-product__name { font-size: 12px !important; } .collection-card-item__title, .collection-card-item__title span { font-size: 14px !important; font-weight: 400 !important; color: #000000 !important; } /* 3. Sub Headings, Accordion Titles, Menu & Sub-Menu Items: 12px */ .accordion__title, .product__accordion .accordion__title, .collapsible-content__heading, .sub-heading, .subheading, .subtitle, .sub-title, .section-subheading, .banner__subheading, .rich-text__caption, .caption, .caption-with-letter-spacing, .caption-with-letter-spacing--medium, .caption-with-letter-spacing--large, .caption-large, .product-form__input .form__label, .category-dropdown__label, .product-count__text, .product__sku, .article-card__subheading, .multicolumn-card__info h4, .price, .price-item, .product__price, .copyright__content, .footer-block__heading--sub, .facet-checkbox, .facets__summary, .header__menu-item, .menu-drawer__menu-item, .menu-drawer__animated-link, .list-menu__item, .list-menu__item--link, .footer-block__details-content .list-menu__item--link, .header__submenu .header__menu-item, .header__submenu .list-menu__item, .menu-drawer__menu-item--child, .menu-drawer__menu-item--grandchild, .menu-drawer__submenu .menu-drawer__menu-item, .menu-drawer__childlist .menu-drawer__menu-item { font-size: 12px !important; } /* 4. Descriptions / Body Text / Content / Accordion Content: 10px */ body, .text-body, p, .rte, .rte p, .description, .product__description, .product-description, .accordion__content, .product__accordion .accordion__content, .accordion__content p, .accordion__content div, .accordion__content li, .footer-block__details-content, .card__information, .card-information, .multicolumn-card__info p, .article-card__excerpt, .rich-text__text, .legal-policy__content, .legal-policy__content p, .legal-policy__content li, .product-popup-modal__button, .product__tax { font-size: 10px !important; } .menu-drawer__localization { display: none !important; } /* Related Products 2x2 Grid on Mobile */ @media screen and (max-width: 749px) { .related-products .product-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; column-gap: 1.2rem !important; row-gap: 2rem !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-wrap: wrap !important; } .related-products .product-grid .grid__item { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .related-products .slider-buttons { display: none !important; }