/** Shopify CDN: Minification failed Line 2669:151 Expected "}" to go with "{" **/ html { font-size: calc(var(--font-body-scale, 1) * 100%) !important } cart-items { visibility: hidden; opacity: 0; transition: opacity 0.3s ease } cart-items.is-empty, cart-items.section-padding, cart-items:not([hidden]) { visibility: visible; opacity: 1 } :root { --paper: #fbfaf8; --bone: #f3efe9; --bone-deep: #e9e3da; --linen: #e4ddd2; --line: #e2dcd3; --line-soft: #eeeae3; --ink: #171310; --ink-2:#2a221c; --ink-3:#4a3f37; --muted: #7c716a; --muted-2:#9a9089; --cane: #d8b489; --cane-soft: #ecd9bf; --walnut: #6b4a33; --red: #e01b22; --red-ink: #b9151b; --red-wash: #fdecec; --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-accent: "Instrument Serif", Georgia, serif; --t-hero: clamp(2.5rem, 5.2vw, 5rem); --t-display: clamp(2.1rem, 4.4vw, 4.25rem); --t-h2:clamp(1.85rem, 3.3vw, 3.1rem); --t-h3:clamp(0.94rem, 1.5vw, 1.4rem); --t-lead: clamp(1rem, 1.15vw, 1.15rem); --t-body: 1.0313rem; --t-sm: 0.875rem; --t-label: 0.75rem; --container: 1440px; --container-wide: 1760px; --gutter: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(4.5rem, 3.8vw, 9.5rem); --r-xs: 3px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(23, 19, 16, 0.05); --shadow-sm: 0 4px 18px rgba(23, 19, 16, 0.06); --shadow-md: 0 14px 40px rgba(23, 19, 16, 0.09); --shadow-lg: 0 28px 70px rgba(23, 19, 16, 0.15); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1); --header-h: 76px; --announce-h: 38px } *, *::before, *::after { box-sizing: border-box } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% } html { overflow-x: clip; scrollbar-gutter: stable } body { margin: 0; font-family: var(--font); font-size: var(--t-body); line-height: 1.7; font-weight: 400; color: var(--ink-2); letter-spacing: normal; background: var(--paper) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip } img { max-width: 100%; display: block } body a { color: inherit; text-decoration: none } ul, ol { margin: 0; padding: 0; list-style: none } body button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0 } body input { font: inherit } body p { margin: 0 } body h1, body h2, body h3, body h4, body h5 { margin: 0; font-family: var(--font) !important; font-weight: 600 !important; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink) } .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em } ::selection { background: var(--ink); color: var(--paper) } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 2000; background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600 } .skip-link:focus { top: 1rem } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } #shopify-section-template--22645103526085__custom_testimonials_FiqAXh .section-head { text-align: center; justify-content: center } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter) } .container--wide { max-width: var(--container-wide) } .page-width {max-width: var(--container) !important;padding-left: var(--gutter) !important;padding-right: var(--gutter) !important;margin: 0 auto !important;width: 100% !important;} .section { padding-block: var(--section-y) } .section--tight { padding-block: clamp(3rem, 5vw, 5rem) } .section--bone { background: var(--bone) } .section--ink { background: var(--ink); color: var(--bone) } .section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff } .dew { display: inline-block; width: 7px; height: 7px; flex: none; background: var(--red); transform: rotate(45deg) } .dew--sm { width: 5px; height: 5px } .eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted) } .section--ink .eyebrow { color: var(--cane) } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 4vw, 4rem) } .section-head__text { max-width: 46ch } .section-head h2 { font-size: var(--t-h2); margin-top: 1rem } .section-head p { margin-top: 1.1rem; color: var(--muted); font-size: var(--t-lead) } .section-head .eyebrow { font-size: var(--t-lead) } .faq--flush h2, .faq--flush h4 {font-size: var(--label);font-weight: 400 !important;} .dews-complete-look {padding-bottom: 3.5rem;padding-top:1rem;} a.nav__link::after {position: absolute;width: 100%;height: 35px;transform: translate(-50%, -50%);display: block;left: 50%;top: 46px;content: "";} .dews-header .nav__link {position: relative;} body button.MuiButtonBase-root.MuiIconButton-root.jss6.wishlist-hero-header-close { top: 18px !important; } .rte p>strong {display: inline-block !important;margin: 0!important;font-size: 1rem !important;} @media screen and (max-width: 989px) { .section-head .eyebrow { font-size: var(--t-label) } .collection-banner { padding-bottom: 0 !important;} section#shopify-section-template--28496397631669__reviews-heading {padding-top: 40px;padding-bottom: 0;} section#shopify-section-template--28496397631669__judgeme-reviews { padding-top: 0; } .contact-info .eyebrow { margin-bottom: 8px; font-size: var(--t-label);} } .section--ink .section-head p { color: #b9afa6 } .section-head--center { flex-direction: column; align-items: center; text-align: center } .section-head--center .section-head__text { text-align: center } .dews-reviews-heading { padding-block: 0; } .dews-reviews-heading .section { padding-block: 0; } .dews-reviews-heading .section-head { margin-bottom: 0; } section#shopify-section-template--28471031693493__reviews-heading { padding-block-start: 4.5rem; background-color: var(--bone); } section#shopify-section-template--28471390666933__reviews-heading { background-color: var(--bone); padding-top: 4.3rem; } section#shopify-section-template--28482456912053__reviews-heading { background-color: var(--bone); padding-block-start: 4.3rem; } body.template-index section.dews-reviews-heading { background-color: var(--bone); padding-block-start: 4.3rem; } body.template-index [id$="__1788325876b6967a8d"], body.template-index [id$="-1788325876b6967a8d"] { padding-block-end: 2.5rem; background: var(--bone); padding-top: 0; } #shopify-section-template--22920630862021__1788325876b6967a8d { padding-top: 0; background-color: var(--bone); } [id$="__judgeme-reviews"] { padding-block: 0; } [id$="__judgeme-reviews"] .jdgm-widget { margin-block: 0; } .btn { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 1.9rem; min-height: 52px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; text-align: center; position: relative; overflow: hidden; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease) } .btn:hover { transform: translateY(-2px) } .btn:active { transform: translateY(0) } .btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease) } .btn:hover svg { transform: translateX(3px) } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(23, 19, 16, 0.22) } .btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink) } .btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff } .btn--light:hover { --btn-bg: var(--cane); --btn-bd: var(--cane) } .btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.35) } .btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff } .btn--block { width: 100% } .link-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--ink); padding-bottom: 0.35rem; position: relative } .section--ink .link-arrow { color: #fff } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform-origin: right; transform: scaleX(1); transition: transform 0.45s var(--ease) } .link-arrow:hover::after { transform: scaleX(0) } .link-arrow svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease) } .link-arrow:hover svg { transform: translateX(4px) } .announce { background: var(--ink); color: #e8e2da; font-size: 0.78rem; letter-spacing: 0.08em; height: 38px; display: flex; align-items: center; overflow: hidden; position: relative; z-index: 60 } .announce__viewport { width: 100%; overflow: hidden } .announce__track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: ticker 42s linear infinite } .announce__track span { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap } .announce:hover .announce__track { animation-play-state: paused } @keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } } .header { position: sticky; top: 0; z-index: 100; background: rgba(251, 250, 248, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease) } .shopify-section-group-header-group { position: sticky !important; top: 0; z-index: 100 !important } .header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-xs) } .header__row { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-h); display: grid; align-items: center; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) } .logo { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: center } .logo__mark { width: 26px; height: 26px; flex: none } .logo__word { font-size: 1.06rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); white-space: nowrap } .nav { display: flex; align-items: center; gap: 0.35rem; min-width: 0 } .nav--end { justify-content: flex-end } .nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.65rem 0.85rem; border-radius: var(--r-sm); font-size: 0.845rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-2); transition: color 0.25s var(--ease) } .nav__link:hover { color: var(--red-ink) } .nav__link .caret { width: 11px; height: 11px; opacity: 0.55; transition: transform 0.3s var(--ease) } .nav__item:hover .caret { transform: rotate(180deg) } .nav__item { position: static } .mega { position: absolute; top: 100%; left: 0; transform: translate(10px, 10px); width: min(880px, 88vw); padding: 2.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: flex; gap: 2.25rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s } .nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(10px, 0) } .nav--start { position: relative } .mega__label { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.1rem } .mega ul { display: grid; gap: 0.7rem } .mega ul a { font-size: 0.92rem; color: var(--ink-2); transition: color 0.25s var(--ease), padding-left 0.25s var(--ease) } .mega ul a:hover { color: var(--red-ink); padding-left: 5px } .mega--wide { width: min(1140px, 94vw); } .mega > div { flex: 1 1 0; min-width: 0 } .mega > .mega__promo { flex: 1.15 1 0; min-width: 0 } .mega__promo { position: relative; border-radius: var(--r-sm); overflow: hidden } .mega__promo img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.8s var(--ease) } .mega__promo:hover img { transform: scale(1.05) } .mega__promo span { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.1rem 0.9rem; background: linear-gradient(transparent, rgba(23, 19, 16, 0.82)); color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em } .actions { display: flex; align-items: center; gap: 0.15rem; margin-left: 0.5rem } .icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); color: var(--ink-2); position: relative; transition: background 0.25s var(--ease), color 0.25s var(--ease) } .icon-btn:hover { background: var(--bone); color: var(--ink) } .icon-btn svg { width: 19px; height: 19px } .cart-count { position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--red); color: #fff; border-radius: var(--r-pill); font-size: 0.625rem; font-weight: 700; line-height: 17px; text-align: center } .hamburger { display: none } .search { max-height: 0; overflow: clip; border-top: 1px solid transparent; transition: max-height 0.45s var(--ease), border-color 0.45s var(--ease) } .search.is-open { max-height: 110px; border-top-color: var(--line) } .search__inner { max-width: var(--container-wide); margin-inline: auto; padding: 1.15rem var(--gutter); display: flex; align-items: center; gap: 1rem } .search__inner svg { width: 19px; height: 19px; color: var(--muted); flex: none } .search input { flex: 1; border: 0; background: none; font-size: 1.05rem; color: var(--ink); padding: 0.4rem 0; box-shadow: none; border: 0; outline: 0 } .search input::placeholder { color: var(--muted-2) } .scrim { position: fixed; inset: 0; z-index: 190; background: rgba(23, 19, 16, 0.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s } .scrim.is-open { opacity: 1; visibility: visible } .site-mobile-drawer { position: fixed; inset: 0 auto 0 0; z-index: 200; width: min(370px, 86vw); background: var(--paper); transform: translateX(-100%); transition: transform 0.45s var(--ease-out); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain } .site-mobile-drawer.is-open { transform: translateX(0) } .site-mobile-drawer .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 2 } .site-mobile-drawer .drawer__nav { padding: 1rem 0.75rem 2rem } .site-mobile-drawer .drawer__nav > li { border-bottom: 1px solid var(--line-soft) } .site-mobile-drawer .drawer__nav a, .site-mobile-drawer .drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.05rem 0.75rem; font-size: 1rem; font-weight: 500; color: var(--ink); text-align: left } .site-mobile-drawer .drawer__toggle svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease) } .site-mobile-drawer .drawer__toggle.is-open svg { transform: rotate(90deg) } .site-mobile-drawer .drawer__sub { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease);padding-left:9px; } .site-mobile-drawer .drawer__sub a { padding: 0.7rem 0.75rem 0.7rem 1.6rem; font-size: 0.92rem; font-weight: 400; color: var(--muted) } .site-mobile-drawer .drawer__foot { margin-top: auto; padding: 1.5rem; border-top: 1px solid var(--line) } .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; min-height: clamp(560px, 88vh, 900px); background: var(--bone); overflow: hidden } .hero__rail { position: absolute; left: 1.4rem; top: 50%; z-index: 3; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; display: flex; align-items: center; gap: 1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted-2) } .hero__rail::after { content: ""; width: 1px; height: 64px; background: var(--line) } .hero__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4.5rem) clamp(3rem, 6vw, 5rem) clamp(3.5rem, 6vw, 7rem); position: relative; z-index: 2 } .hero__watermark { position: absolute; z-index: 0; pointer-events: none; user-select: none; left: -7%; top: 50%; transform: translateY(-50%); width: min(540px, 80%); height: auto; opacity: 0.07 } .hero__content > *:not(.hero__watermark) { position: relative; z-index: 1 } .hero h1 { font-size: var(--t-hero); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; margin: 1.5rem 0 0 } .hero h1 .accent { display: inline; font-weight: 400; letter-spacing: -0.02em } .hero__lead { margin-top: 1.75rem; max-width: 42ch; font-size: var(--t-lead); color: var(--muted); line-height: 1.75 } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.5rem } .hero__proof { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted) } .hero__proof strong { color: var(--ink); font-weight: 600 } .hero__proof-item { display: inline-flex; align-items: center; gap: 0.5rem } .hero__proof-item svg { width: 17px; height: 17px; color: var(--ink-3); flex: none } .stars { color: var(--red); letter-spacing: 0.12em; font-size: 0.82rem } .hero__media { position: relative; overflow: hidden } .hero__media img { width: 100%; height: 100%; object-fit: cover } .hotspot { position: absolute; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.94); box-shadow: 0 3px 14px rgba(23, 19, 16, 0.28); cursor: pointer } .hotspot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.6); animation: pulse 2.6s var(--ease-out) infinite } .hotspot::after { content: ""; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); position: relative; z-index: 1; transition: transform 0.35s var(--ease) } .hotspot:hover::after { transform: rotate(45deg) scale(1.25) } @keyframes pulse { 0% { transform: scale(1); opacity: 0.85 } 70% { transform: scale(2.1); opacity: 0 } 100% { transform: scale(2.1); opacity: 0 } } .hotspot__card { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); width: 230px; padding: 0.85rem; background: var(--paper); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.8rem; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s } .hotspot:hover .hotspot__card, .hotspot:focus-visible .hotspot__card, .hotspot.is-open .hotspot__card { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) } .hotspot__card img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-xs); flex: none } .hotspot__card b { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); line-height: 1.35 } .hotspot__card span { font-size: 0.8rem; color: var(--muted) } .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted) } .hero__scroll svg { width: 14px; height: 14px; animation: nudge 2.2s var(--ease) infinite } @keyframes nudge { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(4px) } } .ribbon { background: var(--ink); color: #ded6cd; padding: 1.15rem 0; overflow: hidden } .ribbon__track { display: flex; align-items: center; gap: 2.75rem; width: max-content; animation: ticker 46s linear infinite } .ribbon__track > div { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase } .ribbon__track svg { width: 18px; height: 18px; color: var(--cane); flex: none } .ribbon:hover .ribbon__track { animation-play-state: paused } .rooms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center } .rooms__list { border-top: 1px solid var(--line) } .rooms__item { border-bottom: 1px solid var(--line) } .rooms__link { display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 2.4vw, 2rem) 0.25rem; position: relative; transition: padding-left 0.45s var(--ease) } .rooms__link:hover, .rooms__item.is-active .rooms__link { padding-left: 1.1rem } .rooms__num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--muted-2); width: 26px; flex: none; transition: color 0.35s var(--ease) } .rooms__item.is-active .rooms__num { color: var(--red) } .rooms__name { flex: 1; font-size: clamp(1.5rem, 2.9vw, 2.6rem); font-weight: 500 !important; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); transition: color 0.35s var(--ease) } .rooms__meta { font-size: var(--t-sm); color: var(--muted); flex: none } .rooms__link svg { width: 20px; height: 20px; flex: none; color: var(--ink); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease) } .rooms__link:hover svg, .rooms__item.is-active .rooms__link svg { opacity: 1; transform: translateX(0) } .rooms__thumb { display: none } .rooms__stage { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--bone-deep) } .rooms__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.7s var(--ease), transform 1.1s var(--ease) } .rooms__stage img.is-active { opacity: 1; transform: scale(1) } .rooms__note { margin-top: 2rem; display: flex; align-items: center; gap: 0.7rem; font-size: var(--t-sm); color: var(--muted) } .product { position: relative; display: flex; flex-direction: column } .product__media { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--bone); aspect-ratio: 1/1 } .product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s var(--ease), transform 1s var(--ease) } .product__media .img-hover { opacity: 0 } .product:hover .img-base { opacity: 0 } .product:hover .img-hover { opacity: 1 } .product:hover .product__media img { transform: scale(1.04) } body .product__media .badge { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; padding: 0.35rem 0.7rem; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: #fff } body .product__media .badge--sale { background: var(--red) } body .product__media .badge--new { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs) } .product__tools { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3; display: flex; flex-direction: column; gap: 0.5rem; opacity: 0; transform: translateX(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease) } .product:hover .product__tools, .product:focus-within .product__tools { opacity: 1; transform: translateX(0) } .product__swatch { cursor: pointer } .product__swatch { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease } .product__swatch:hover, .product__swatch.is-active { transform: scale(0.75); box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1a1a1a } .tool-btn { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(251, 250, 248, 0.95); border-radius: var(--r-pill); color: var(--ink-2); box-shadow: var(--shadow-xs); transition: background 0.25s var(--ease), color 0.25s var(--ease) } .tool-btn:hover { background: var(--ink); color: #fff } .tool-btn svg { width: 17px; height: 17px } .tool-btn.is-saved { background: var(--red); color: #fff } .product__add { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; z-index: 3; padding: 0.9rem 1rem; border-radius: var(--r-pill); background: rgba(251, 250, 248, 0.96); color: var(--ink); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease) } .product:hover .product__add, .product:focus-within .product__add { opacity: 1; transform: translateY(0) } .product__add:hover { background: var(--ink); color: #fff } .product__info { padding-top: 1.15rem; display: flex; flex-direction: column; gap: 0.4rem } .product__rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--muted-2) } .product__info h3 { font-size: var(--t-h3) !important; font-weight: 500 !important; letter-spacing: -0.015em; line-height: 1.3 } .product__info h3 a:hover { color: var(--red-ink) } #shopify-section-template--22645103493317__product-grid {padding-block-start: 0;padding-block-end: 2rem;} .section-template--22645103493317__product-grid-padding {padding-bottom: 0 !important;padding-top: 0 !important;} .collection #product-grid {row-gap: 2rem;} .product__swatches { display: flex; gap: 0.35rem; margin-top: 0.15rem } .product__swatch { width: 15px; height: 15px; border-radius: var(--r-pill); border: 1px solid rgba(23, 19, 16, 0.14) } /* Product card price row (collection grid) */ .price-row { display: flex; align-items: baseline; gap: .6rem; margin-top: .2rem; flex-wrap: wrap; gap: 0 .6rem !important; line-height: 1.2; } .price-row .price { font-size: 0.9rem; font-weight: 600; color: var(--ink); letter-spacing: normal; } .price-row .price--was { font-size: 0.8rem; color: var(--muted-2); text-decoration: line-through; } .price-row .price-save, .price--save { font-size: 0.75rem; font-weight: 700; color: var(--red-ink); letter-spacing: 0.04em; } .rail { position: relative; --rail-gap: clamp(1rem, 2vw, 1.75rem); --rail-per-view: 4 } .rail__track { display: flex; gap: var(--rail-gap); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: none; -ms-overflow-style: none } .rail__track::-webkit-scrollbar { display: none } .rail__track > * { flex: 0 0 auto; scroll-snap-align: start; width: calc((100% - (var(--rail-per-view) - 1) * var(--rail-gap)) / var(--rail-per-view)) } .rail__foot { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.25rem } .rail__progress { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: var(--r-pill) } .rail__bar { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--ink); border-radius: inherit; transition: transform 0.25s var(--ease) } .section--ink .rail__progress { background: rgba(255, 255, 255, 0.18) } .section--ink .rail__bar { background: var(--cane) } .rail__nav { display: flex; gap: 0.5rem } .rail__btn { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease) } .rail__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff } .rail__btn:disabled { opacity: 0.3; cursor: not-allowed } .rail__btn svg { width: 17px; height: 17px } .craft { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center } .craft__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1vw, 0.9rem) } .craft__shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4/3; background: var(--ink-2) } .craft__shot--main { grid-column: 1/-1; aspect-ratio: 16/10 } .craft__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease) } .craft__shot:hover img { transform: scale(1.05) } .craft__shot figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem 0.95rem 0.8rem; background: linear-gradient(transparent, rgba(23, 19, 16, 0.8)); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: flex-start; gap: 0.55rem } .craft__step-no { color: var(--cane) } .craft__badge { position: absolute; right: 1.25rem; top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--r-sm); background: rgba(23, 19, 16, 0.82); backdrop-filter: blur(8px); color: #fff; text-align: center } .craft__badge strong { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1 } .craft__badge span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cane) } .steps { margin-top: 2.5rem; display: grid; gap: 0.25rem } .step { display: flex; gap: 1.35rem; padding: 1.35rem 0; border-top: 1px solid rgba(255, 255, 255, 0.13) } .step__num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--cane); flex: none; padding-top: 0.4rem; width: 28px } .step h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em } .step p { margin-top: 0.4rem; font-size: 0.93rem; color: #a89e95; line-height: 1.65 } .materials { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); justify-content: center } .material { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; width: 104px; text-align: center } .material__chip { width: 64px; height: 64px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(23, 19, 16, 0.1), var(--shadow-sm); transition: transform 0.45s var(--ease) } .material:hover .material__chip { transform: translateY(-5px) scale(1.05) } .material span { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); line-height: 1.4 } .looks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start } .look--offset { margin-top: clamp(2rem, 5vw, 5rem) } .look__media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3 } .look__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease) } .look:hover .look__media img { transform: scale(1.05) } .look__tag { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; border-radius: var(--r-pill); background: rgba(251, 250, 248, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink) } .look__body { position: relative; z-index: 2; margin: clamp(-4rem, -4vw, -2.5rem) clamp(0.75rem, 2vw, 1.5rem) 0; padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md) } .look__body h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -0.03em } .look__body > p { margin-top: 0.7rem; color: var(--muted); font-size: 0.94rem; line-height: 1.7 } .look__items { margin-top: 1.35rem; border-top: 1px solid var(--line-soft) } .look__items li { border-bottom: 1px solid var(--line-soft) } .look__items a { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.2rem; transition: padding-left 0.3s var(--ease) } .look__items a:hover { padding-left: 0.45rem } .look__items img { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: var(--r-xs); background: var(--bone) } .look__item-name { flex: 1; min-width: 0; font-size: 0.89rem; font-weight: 500; color: var(--ink) } .look__item-price { font-size: 0.89rem; font-weight: 600; color: var(--ink); flex: none } .look__items a:hover .look__item-price { color: var(--red-ink) } @media (max-width: 749px) { .look__items a { flex-wrap: wrap;gap: 0px .85rem; } .look__item-price { flex: 0 0 100%; margin-left: calc(48px + 0.85rem); } } .look__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem } .look__count { font-size: 0.8rem; color: var(--muted-2) } .arrivals { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start } .arrivals > .product, .arrivals .product__info, .arrivals .product__info h3 { min-width: 0 } .arrivals__feature .product__media { aspect-ratio: 4/5 } .arrivals__stack { display: grid; gap: clamp(1rem, 2vw, 1.75rem) } .promo { position: relative; border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; background: var(--ink); color: #fff } .promo__body { padding: clamp(2.25rem, 5vw, 4.5rem) } .promo h2 { font-size: var(--t-h2); color: #fff; margin: 1.1rem 0 1.1rem } .promo p { color: #a89e95; max-width: 44ch; font-size: var(--t-lead) } .promo__media { position: relative; align-self: stretch; min-height: 300px } .promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover } .countdown { display: flex; gap: 2rem; margin: 2.25rem 0 } .countdown__unit { display: flex; flex-direction: column; gap: 0.3rem } .countdown__unit strong { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums } .countdown__unit span { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cane) } .promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden } .promise__item { background: var(--paper); padding: clamp(1.75rem, 3vw, 2.5rem); transition: background 0.4s var(--ease) } .promise__item:hover { background: var(--bone) } .promise__icon { width: 40px; height: 40px; color: var(--ink); margin-bottom: 1.35rem } .promise__icon svg { width: 100%; height: 100% } .promise__item h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 0.55rem } .promise__item p { font-size: 0.9rem; color: var(--muted); line-height: 1.65 } [id$="__1788325876b6967a8d"] {background: var(--bone);} .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem) } .review { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(1.75rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease) } .review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) } .review__body { font-size: 1rem; line-height: 1.75; color: var(--ink-2); flex: 1 } .review__foot { display: flex; align-items: center; gap: 0.85rem; padding-top: 1rem; border-top: 1px solid var(--line-soft) } .review__avatar { width: 42px; height: 42px; border-radius: var(--r-pill); flex: none; background: var(--bone-deep); color: var(--ink-3); display: grid; place-items: center; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em } .review__name { font-size: 0.9rem; font-weight: 600; color: var(--ink) } .review__verified { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--muted) } .review__verified svg { width: 13px; height: 13px; color: #1f7a4d } .placeholder-note { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem 1.15rem; border-radius: var(--r-sm); background: var(--red-wash); border: 1px dashed rgba(224, 27, 34, 0.32); font-size: 0.82rem; color: var(--red-ink); line-height: 1.6 } .placeholder-note svg { width: 16px; height: 16px; flex: none; margin-top: 0.2rem } .footer__signup { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.12) } .footer__signup h2 { font-size: clamp(1.55rem, 2.6vw, 2.35rem); color: #fff; margin: 1rem 0 0.85rem } .footer__signup-text > p:last-child { color: #a89e95; font-size: var(--t-lead); max-width: 44ch } .footer__signup .newsletter__form { margin: 0; max-width: none } .footer__signup .newsletter__form input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: #fff } .footer__signup .newsletter__form input::placeholder { color: #8d8378 } .footer__signup .newsletter__form input:focus { border-color: #fff } .footer__signup .newsletter__perks { justify-content: flex-start; color: #a89e95; margin-top: 1.35rem } .footer__signup .fineprint { color: #8d8378 } .footer__signup .form-msg.is-ok { color: #8ddcb0 } .footer__signup .form-msg.is-err { color: #ff9a9e } .footer__contact-text { font-size: 0.92rem; line-height: 1.75; color: #a89e95; display: grid; gap: 0.8rem } .footer__contact-text a { transition: color 0.25s var(--ease) } .footer__contact-text a:hover { color: #fff } .faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line) } .faq__item { border-bottom: 1px solid var(--line) } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.6rem 0.25rem; text-align: left; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; transition: color 0.3s var(--ease) } .faq__q:hover { color: var(--red-ink) } .faq__icon { position: relative; width: 16px; height: 16px; flex: none } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease) } .faq__icon::after { transform: rotate(90deg) } .faq__item.is-open .faq__icon::after { transform: rotate(0) } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease) } .faq__a p { padding: 0 0.25rem 1.75rem; color: var(--muted); font-size: 0.98rem; line-height: 1.8; max-width: 70ch } .newsletter__form { display: flex; gap: 0.6rem; max-width: 520px; margin: 2.25rem auto 0; flex-wrap: wrap } .newsletter__form input { flex: 1 1 240px; min-width: 0; padding: 1rem 1.35rem; min-height: 52px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.95rem; color: var(--ink); transition: border-color 0.3s var(--ease) } .newsletter__form input:focus { border-color: var(--ink) } .newsletter__form input::placeholder { color: var(--muted-2) } .newsletter__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.75rem; font-size: 0.82rem; color: var(--muted) } .newsletter__perks div { display: inline-flex; align-items: center; gap: 0.45rem } .newsletter__perks svg { width: 14px; height: 14px; color: #1f7a4d } .form-msg { margin-top: 1rem; font-size: 0.88rem; min-height: 1.3em } .newsletter__form .form-msg { flex-basis: 100%; } .form-msg.is-ok { color: #1f7a4d } .form-msg.is-err { color: var(--red-ink) } .fineprint { margin-top: 1.25rem; font-size: 0.76rem; color: var(--muted-2) } .footer { background: var(--ink); color: #a89e95; padding-top: clamp(3.5rem, 7vw, 6rem) } .footer h3 { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 1.35rem } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem) } .footer__brand p { margin: 1.35rem 0 1.75rem; font-size: 0.92rem; line-height: 1.75; max-width: 38ch } .footer .logo__word { color: #fff } .footer__col ul { display: grid; gap: 0.8rem } .footer__col a { font-size: 0.92rem; transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); display: inline-block } .footer__col a:hover { color: #fff; padding-left: 4px } .socials { display: flex; gap: 0.6rem } .socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-pill); color: #fff; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease) } .socials a:hover { background: #fff; color: var(--ink); border-color: #fff } .socials svg { width: 17px; height: 17px } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem } .pay { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap } .pay span { padding: 0.35rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-xs); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: #cfc6bd } .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.25rem; background: rgba(23, 19, 16, 0.62); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s } .modal.is-open { opacity: 1; visibility: visible } .modal__panel { position: relative; width: min(880px, 100%); max-height: 90vh; overflow: auto; background: var(--paper); border-radius: var(--r-md); display: grid; grid-template-columns: 1fr 1fr; transform: translateY(16px) scale(0.98); transition: transform 0.4s var(--ease-out) } .modal.is-open .modal__panel { transform: none } .modal__media { background: var(--bone) } .modal__media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px } .modal__body { padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: 0.85rem } .modal__body h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 600 } /* Quick view: Judge.me preview badge, sits directly above the product title */ .modal__body .qv-rating { min-height: 20px; margin-bottom: -0.25rem } .modal__body .qv-rating[hidden] { display: none } .modal__body .desc { font-size: 0.95rem; color: var(--muted); line-height: 1.75 } .modal__actions { display: flex; gap: 0.6rem; margin-top: 0.75rem } .modal__close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(251, 250, 248, 0.94); border-radius: var(--r-pill); color: var(--ink); box-shadow: var(--shadow-xs); transition: background 0.25s var(--ease), color 0.25s var(--ease) } .modal__close:hover { background: var(--ink); color: #fff } .modal__close svg { width: 17px; height: 17px } .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: none; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(251, 250, 248, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.45s var(--ease-out) } .mobile-cta.is-visible { transform: translateY(0) } .mobile-cta .btn { flex: 1; min-height: 48px; padding-block: 0.8rem } .reveal { transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); transition-delay: var(--d, 0s) } .js .reveal { opacity: 0; transform: translateY(26px) } .reveal.is-in { opacity: 1; transform: none } .reveal-img { transition: clip-path 1.1s var(--ease-out); transition-delay: var(--d, 0s) } .js .reveal-img { clip-path: inset(0 0 100% 0) } .reveal-img.is-in { clip-path: inset(0 0 0 0) } .main-page-title, .page-title { font-family: var(--font-heading-family, inherit) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; font-size: clamp(2.5rem, 5vw, 4rem) !important; color: #1a1a1a !important; text-align: center; margin-top: 5rem !important; margin-bottom: 3rem !important } .rte { font-family: inherit !important; font-size: 1rem !important; color: #4a4a4a !important; max-width: 100% !important; width: 100% !important } .shopify-policy__title { text-align: left; margin-bottom: 2rem } .shopify-policy__container { max-width: 96%; margin-block: 4rem } .rte p { margin-bottom: 1.5rem !important; line-height: 1.8 !important } .rte ul, .rte ol { margin-bottom: 1.8rem !important; padding-left: 1rem !important; list-style: disc; list-style-position: outside !important } .rte li { margin-bottom: 0.6rem !important; line-height: 1.7 !important } .rte h1, .rte h2, .rte h3, .rte h4 { font-family: var(--font-heading-family, inherit) !important; color: #1a1a1a !important; margin-top: 2.5rem !important; margin-bottom: 1rem !important } .cart__contents { animation: cartFadeIn 0.5s ease-in forwards } @keyframes cartFadeIn { from { opacity: 0 } to { opacity: 1 } } .cart-item__image-container .cart-item__image { max-width: 100% !important } .product-option dt { font-weight: bold; color: var(--ink-2) } .cart-item__name { font-family: var(--font-heading-family, inherit) !important; font-size: 1.15rem !important; font-weight: 600 !important; color: #1a1a1a !important; text-decoration: none !important; display: block !important; margin-bottom: 0.3rem !important; line-height: 1.3 !important } .cart-item__price-wrapper .price, .cart-item__totals .price { font-size: 0.95rem !important; font-weight: 500 !important; color: #1a1a1a !important } .product-option { font-size: 0.85rem !important; color: #555555 !important; display: flex !important; align-items: center !important; gap: 6px !important } .totals > h2, .totals .totals__total-value { font-size: var(--r-lg) !important } .cart__footer-wrapper:last-child .cart__footer .tax-note { margin-block: var(--r-lg) } .cart__footer-wrapper:last-child .cart__footer .cart__ctas { margin-top: 0 } .quantity-popover-wrapper { margin-top: 0px !important; flex-wrap: nowrap !important } .cart-item__quantity-wrapper .button.button--tertiary { min-width: fit-content; height: 100% !important; min-height: 100% !important; align-items: center } .quantity { min-height: 40px !important; height: 40px !important; width: 110px !important; border-radius: 30px !important; border: 1px solid #ddd !important; background-color: transparent !important } .quantity:before, .quantity:after { display: none !important } .quantity__input { font-size: 0.95rem !important; text-align: center !important; pointer-events: auto !important } .quantity__button { width: 35px !important; pointer-events: auto !important } .cart__blocks { display: flex !important; flex-direction: column !important; align-items: flex-end !important } .cart__checkout-button { background-color: #1a1a1a !important; color: #ffffff !important; border-radius: 30px !important; padding: 14px 35px !important; font-size: 1.05rem !important; font-weight: 500 !important; min-height: 48px !important; max-width: 380px !important; width: 100% !important; transition: background-color 0.3s ease, transform 0.3s ease !important; border: none !important } .cart__checkout-button:hover { background-color: #4a4a4a !important; transform: translateY(-2px) !important } .cart__checkout-button::after { display: none !important } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important } .reveal, .reveal-img { opacity: 1; transform: none; clip-path: none } } .nav__item:hover .mega, .nav__item:focus-within .mega { transform: translate(10px,17px); } .mega ul li { line-height: 1.2; } button.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover { background-color: var(--cane); } .collection--empty a.underlined-link.link { font-size: 1rem; } /* ========================================================= 8. COLLECTION PAGE OVERHAUL (Clean Banner & Layout) ========================================================= */ .shopify-section.section:has(.collection-hero) { padding-top: 0 !important; padding-bottom: 0 !important; } .collection-hero { background: var(--bone) !important; border-bottom: 1px solid var(--line-soft) !important; padding: clamp(3rem, 6vw, 5rem) 0 !important; } .collection-hero.gradient { background-image: none !important; } .collection-hero .section-head { margin-bottom: 0 !important; } .collection-hero__title { font-size: var(--t-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); margin-top: 1.25rem; text-transform: none; } .collection-hero__desc { margin-top: 1.25rem; color: var(--muted); font-size: var(--t-lead); line-height: 1.75; max-width: 62ch; } .collection-hero__desc p { margin: 0; } /* Collection page shell: toolbar + grid */ .collection-page { padding-top: 0; padding-bottom: 0; } .collection-toolbar { border-bottom: 1px solid var(--line); } .collection-page .grid-products { align-items: start; } /* Keep AJAX-replaced cards visible (facets.js re-renders #ProductGridContainer, so reveal animations would otherwise leave new cards hidden) */ #product-grid .product, .collection-page .grid-products .product, .collection-page .grid-products .product.reveal, .grid__item article.product, .grid__item .product.reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; } .details-section.wrap { padding-top: 3rem !important; } body .share-button__button { font-size: 1rem; } /* ========================================================= FINAL BULLETPROOF DAWN CART DRAWER ALIGNMENT ========================================================= */ /* 1. Make the cart-drawer host container cover the whole screen layout */ cart-drawer { position: fixed !important; top: 0 !important; left: 0 !important; /* 100% (not 100vw) — 100vw is wider than the visible area and was pushing the page sideways. */ width: 100% !important; height: 100vh !important; /* On a phone `100vh` is the LARGE viewport — the height the page would have with the address bar hidden. That makes the drawer taller than the space you can actually see, so the footer with the Checkout button sits below the fold and looks like it is stuck. 100dvh tracks the visible area as the browser chrome shows and hides. Browsers without dvh keep the 100vh above. */ height: 100dvh !important; z-index: 999999 !important; pointer-events: none; /* Allows clicking outside overlay */ } /* When drawer is active/open, enable pointer events */ cart-drawer.active, cart-drawer[open], cart-drawer.animate.active { pointer-events: auto !important; } /* 2. Force the inner drawer container to lock to the right side */ cart-drawer .cart-drawer { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 450px !important; height: 100% !important; background: #ffffff !important; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important; transform: translateX(100%); transition: transform 0.3s ease !important; display: flex !important; flex-direction: column !important; } /* 3. Slide in when active */ cart-drawer.active .cart-drawer, cart-drawer[open] .cart-drawer, cart-drawer.animate.active .cart-drawer { transform: translateX(0) !important; } /* 4. Fix the inner content wrapper and ADD SAFE PADDING */ cart-drawer .drawer__inner { width: 100% !important; max-width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; padding: 0 1.5rem !important; /* Padding fix applied here */ } /* 5. Dark Background Overlay */ cart-drawer .cart-drawer__overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.5) !important; z-index: -1 !important; } /* 3. Compact drawer header — smaller "Cart" heading + smaller close button */ cart-drawer .drawer__header { position: relative; display: flex !important; align-items: center !important; justify-content: space-between !important; padding-block: 1.15rem !important; } cart-drawer .drawer__heading { margin: 0 !important; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } cart-drawer .drawer__close { position: absolute !important; top: 0.85rem !important; right: -0.5rem !important; min-width: 2.5rem !important; min-height: 2.5rem !important; width: 2.5rem !important; height: 2.5rem !important; display: grid !important; place-items: center !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } cart-drawer .cart-drawer__warnings .drawer__close { right: -0.5rem !important; } cart-drawer .drawer__close .svg-wrapper { width: 1.05rem !important; height: 1.05rem !important; display: grid !important; place-items: center !important; } cart-drawer .drawer__close .svg-wrapper svg, cart-drawer .drawer__close .icon-close { width: 100% !important; height: 100% !important; display: block !important; } /* 1. Safe bottom space for Checkout button */ cart-drawer .drawer__footer { padding-bottom: 30px !important; } /* 2. Fix 'Siz e:' text breaking issue */ cart-drawer .product-option { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } cart-drawer .product-option dt { white-space: nowrap !important; margin: 0 !important; } cart-drawer .product-option dd { margin: 0 !important; word-break: break-word; display: flex; align-items: center; } /* 3. Color Swatch Circle CSS */ .cart-color-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .MuiDialogTitle-root { flex: 0 0 auto; margin: 0; padding: 16px 24px; display: flex; align-items: center; } .MuiDialog-root .MuiTypography-h5.wishlist-hero-header-title { display: inline-block; flex: 1 1 auto !important; order: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-family: var(--font-accent) !important; font-size: clamp(1.05rem, 3.4vw, 1.3rem) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--ink, #171310) !important; text-align: left !important; text-transform: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } button.MuiButtonBase-root.MuiIconButton-root.jss15.wishlist-hero-header-close {top: auto !important;} .buy .product-form__submit {border:none;} .buy .product-form__submit:hover {background: var(--ink-3);border: none;} /* RESPONSIVE CSS */ @media (max-width:1280px) { .hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) } .hero__rail { display: none } .rail { --rail-per-view: 3 } .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr) } .footer__col--last { grid-column: span 3 } .logo__word,.nav__link {font-size: 13px;} body .nav {gap: 0;} body .nav__link {padding: 0;margin-inline: 11px;} body .dews-header .header__row {max-width: 100%;padding-inline: 10px;} } .buy__wishlist .wishlist-hero-custom-button button:hover svg {transform:none;} /* ========================================================= 13. PRODUCT PAGE LAYOUT ========================================================= */ @media screen and (min-width:990px) { .product.grid { display: grid !important; grid-template-columns:1fr 1fr !important; column-gap: 2rem !important; align-items: flex-start !important; } .product__media-wrapper { width: 100% !important; max-width: 100% !important; } .product__info-wrapper { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-top: 0 !important; } .product-form__buttons { max-width: 100% !important; } } @media screen and (max-width:989px) { .product.grid { display: flex !important; flex-direction: column !important; gap: 2rem !important; } .product__media-wrapper, .product__info-wrapper { width: 100% !important; } .craft__badge {right: auto;left: 50%;transform: translateX(-50%);} .craft__shot figcaption {justify-content: center; } .hotspot.is-open .hotspot__card { transform: translate(-20%, 0) } } @media (max-width:1024px) { :root { --header-h: 66px } .nav--start .nav__link, .nav--end .nav__link, .nav__item { display: none } button.MuiButtonBase-root.MuiIconButton-root.jss15 {top: 1.05rem !important;} .hamburger { display: inline-flex } .nav--start { gap: 0; display: none } .newsletter__form input { flex: 1 } body .dews-header .header__row { padding-inline: 10px; gap: 0; display: flex !important; align-items: center; justify-content: space-between } .header__row { gap: 1.2rem; display: flex; justify-content: space-between; align-items: center } .nav.nav--end { display: flex; width: fit-content } .hero { grid-template-columns: 1fr; min-height: 0 } .hero__content { padding: clamp(2.5rem, 7vw, 4rem) var(--gutter); order: 2 } .hero__media { order: 1; aspect-ratio: 16/11 } .hero__scroll { display: none } .rooms { grid-template-columns: 1fr; gap: 2.5rem } .rooms__stage { display: none } .rooms__thumb { display: block; width: 76px; height: 76px; flex: none; border-radius: var(--r-sm); overflow: hidden; background: var(--bone-deep) } .rooms__thumb img { width: 100%; height: 100%; object-fit: cover } .rooms__link svg { opacity: 1; transform: none } .craft { grid-template-columns: 1fr } .craft__media { grid-template-columns: 2fr 1fr } .craft__shot--main { grid-column: 1; grid-row: span 2; aspect-ratio: auto } .arrivals { grid-template-columns: repeat(2, minmax(0, 1fr)) } .arrivals__feature { grid-column: 1/-1 } .arrivals__feature .product__media { aspect-ratio: 16/10 } .promo { grid-template-columns: 1fr } .promo__media { order: -1; aspect-ratio: 16/9; min-height: 0 } .promise { grid-template-columns: 1fr 1fr } .modal__panel { grid-template-columns: 1fr } } @media screen and (min-width: 750px) { .page-width { padding-left: var(--gutter, 2rem) !important; padding-right: var(--gutter, 2rem) !important; } } @media screen and (max-width:990px) { .cart-items, .cart-items tbody, .cart-item { display: block !important; width: 100% !important } .cart-items thead { display: none !important } .cart-item { display: grid !important; grid-template-columns: 100px 1fr !important; gap: 1.5rem !important; padding-bottom: 1.5rem !important; margin-bottom: 1.5rem !important; border-bottom: 1px solid #eaeaea !important; align-items: start !important } .cart-item__media { width: 100% !important; grid-column: 1 !important; grid-row: 1 / 3 !important } .cart-item__details { width: 100% !important; padding: 0 !important; grid-column: 2 !important; grid-row: 1 !important } .cart-item__quantity { padding: 0 !important; grid-column: 2 !important; grid-row: 2 !important } .cart-item__totals { display: none !important } .rail { --rail-per-view: 2 } .reviews { grid-template-columns: 1fr } .looks { grid-template-columns: 1fr } .look--offset { margin-top: 0 } .footer__signup { grid-template-columns: 1fr } .footer__grid { grid-template-columns: 1fr 1fr } .footer__brand { grid-column: 1/-1 } .footer__col--last { grid-column: auto } } @media (max-width:768px) { body { padding-bottom: 0 } .mobile-cta { display: flex } body.has-mobile-cta { padding-bottom: 76px } .section-head { flex-direction: column; align-items: flex-start } .section-head--center { align-items: center } .hero__proof { gap: 1rem 1.25rem } .countdown { gap: 1.5rem } .rail__foot { gap: 1rem } .cart__blocks { align-items: center !important; text-align: center !important } .totals { justify-content: center !important } .cart__checkout-button { max-width: 100% !important } .product-grid .product .price {font-size: 14px;} } @media screen and (max-width:749px) { .cart__blocks { align-items: center !important; text-align: center !important } .totals { justify-content: center !important } .cart__checkout-button { max-width: 100% !important } .collection-hero { padding: 3rem 0 !important; } .facets__form { flex-direction: column !important; align-items: flex-start !important; gap: 1.5rem !important; } .facets-wrapper { width: 100% !important; } .facet-filters { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding-left: 0 !important; } .facet-filters__field { width: 100% !important; justify-content: space-between !important; } } @media (max-width:576px) { .rail { --rail-per-view: 2 } .promise { grid-template-columns: 1fr } .craft__media { grid-template-columns: 1fr 1fr } .craft__shot--main { grid-column: 1/-1; grid-row: auto; aspect-ratio: 16/10 } .rooms__name { font-size: 1.35rem } .rooms__meta { display: none } .hide-sm { display: none } .dews-header .actions .wishlist-hero-header-icon, .dews-header .site-header__icon.wishlist-hero-header-icon { display: none !important; } .header__row { gap: 0.5rem } .icon-btn { width: 38px; height: 38px } .icon-btn svg { width: 23px; height: 23px;} .metafield-rich_text_field ul li, .metafield-rich_text_field ul li strong {font-size: 0.95rem;gap: 10px;} .metafield-rich_text_field ul li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .metafield-rich_text_field ul li::before { flex: 0 0 6px; } .metafield-rich_text_field ul li strong { flex: 0 0 115px; width: 115px; min-width: 115px; } .MuiDialogContent-dividers { padding: 16px 0px;} .footer__col a:hover {padding-left: 0;} .metafield-rich_text_field ul li::before {position: relative;top: -2px;} .logo__word { font-size: 0.92rem } .logo__mark { width: 22px; height: 22px } .newsletter__form { flex-direction: column } .newsletter__form .btn { width: 100% } .footer__grid { grid-template-columns: 1fr } .footer__bottom { flex-direction: column; align-items: flex-start } .product .product__info h3 a {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} } @media (max-width:400px) { :root { --gutter: 1.1rem } .rail { --rail-per-view: 2 } .hero__ctas { flex-direction: column; align-items: stretch } .hero__ctas .btn { width: 100% } .countdown { gap: 1.1rem } .countdown__unit strong { font-size: 1.5rem } .logo__word { font-size: 0.95rem } .MuiDialog-root:has(.wishlisthero-customer-view-listing) .MuiDialogTitle-root button, .MuiDialog-root:has(.wishlisthero-customer-view-listing) .MuiDialogTitle-root .MuiIconButton-root { width: 24px !important; height: 20px !important; } .material { width: 84px } .material__chip { width: 54px; height: 54px } .hotspot__card { width: 217px } .hotspot:hover .hotspot__card, .hotspot:focus-visible .hotspot__card, .hotspot.is-open .hotspot__card {transform: translate(-30%, 0);} .rooms__link { gap: 0.9rem } .rooms__thumb { width: 58px; height: 58px } .rooms__num { width: 20px } } /* ========================================================= Wishlist Hero — Dew's Furniture integration App-powered: enable "Wishlist Hero" under Theme > App embeds. These rules make the app's buttons match Dew's styling. ========================================================= */ /* --- Product cards: app button inside the .product__tools rail --- */ /* NOTE: the app's own CSS tries to absolutely-position .wishlisthero-floating, which made it overlap the quick-view icon. These overrides force it back into the vertical tools stack (heart on top, quick-view below). */ .product__tools .wishlist-hero-custom-button { display: grid; place-items: center; position: relative; width: 38px; height: 38px; margin: 0; padding: 0 } .product__tools .wishlist-hero-custom-button.wishlisthero-floating { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important } .product__tools .wishlist-hero-custom-button:empty { display: none } .product__tools .wishlist-hero-custom-button a, .product__tools .wishlist-hero-custom-button button { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; float: none !important; width: 38px !important; height: 38px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center; background: rgba(251, 250, 248, 0.95) !important; border: 0 !important; border-radius: var(--r-pill) !important; color: var(--ink-2) !important; opacity: 1 !important; box-shadow: var(--shadow-xs) !important; line-height: 1; transition: background 0.25s var(--ease), color 0.25s var(--ease) } .product__tools .wishlist-hero-custom-button a:hover, .product__tools .wishlist-hero-custom-button button:hover { background: var(--ink) !important; color: #fff !important; opacity: 1 !important } .product__tools .wishlist-hero-custom-button svg { width: 17px !important; height: 17px !important } .product__tools .wishlist-hero-custom-button a:hover svg, .product__tools .wishlist-hero-custom-button a:hover svg *, .product__tools .wishlist-hero-custom-button button:hover svg, .product__tools .wishlist-hero-custom-button button:hover svg * { fill: #fff !important; stroke: #fff !important; } /* Touch devices have no hover — keep the card image clean, show only badges. Quick view / wishlist / quick add stay hidden so the product image is clear. */ @media (hover: none) { .product .product__tools, .product .product__add { display: none !important; } } @media (max-width: 749px) { .product .product__tools, .product .product__add { display: none !important; } body .product__media .badge { font-size: 0.56rem; letter-spacing: 0.06em; padding: 0.28rem 0.55rem; top: 0.6rem; left: 0.6rem; } .totals { justify-content: space-between !important; } .search input {font-size:14px;} } /* --- Header: match .icon-btn --- */ .dews-header .actions .wishlist-hero-header-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); color: var(--ink-2); position: relative; transition: background 0.25s var(--ease), color 0.25s var(--ease) } .dews-header .actions .wishlist-hero-header-icon:hover { background: var(--bone); color: var(--ink) } .dews-header .actions .wishlist-hero-header-icon svg { width: 19px; height: 19px } /* App count bubble (class name varies by app version) — pin to the corner and style it exactly like the cart count badge (red pill, white bold text). !important is needed because the Wishlist Hero app ships its own badge CSS. */ .dews-header .actions .wishlist-hero-header-icon [class*="count"], .dews-header .actions .wishlist-hero-header-icon [class*="Count"], .dews-header .actions .wishlist-hero-header-icon [class*="bubble"] { position: absolute !important; top: 5px !important; right: 4px !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; background: var(--red) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-pill) !important; font-family: var(--font) !important; font-size: 0.625rem !important; font-weight: 700 !important; line-height: 17px !important; letter-spacing: 0 !important; text-align: center !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; pointer-events: none; /* the app sizes the badge with an inline stretched span — keep it hugging its number instead of stretching, and cancel any left offset it ships */ width: fit-content !important; left: auto !important; } /* make sure the app's own "empty / zero" state never leaves a blank dot */ .dews-header .actions .wishlist-hero-header-icon [class*="count"]:empty, .dews-header .actions .wishlist-hero-header-icon [class*="Count"]:empty, .dews-header .actions .wishlist-hero-header-icon [class*="bubble"]:empty { display: none !important } @media (max-width: 576px) { .dews-header .actions .wishlist-hero-header-icon { width: 38px; height: 38px } } /* --- Product page: wishlist button below the buy buttons --- */ .dews-wishlist-pdp { margin-top: 1rem } .dews-wishlist-pdp:has(> .wishlist-hero-custom-button:empty) { display: none; margin-top: 0 } /* --- Complete the look / Recently viewed product grids (design reference) --- */ .grid-products{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,1.75rem); } @media (max-width:860px){ .grid-products{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:480px){ .grid-products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(0.75rem,2vw,1rem); } } /* Collection page sections — remove the extra outer .section padding-y so there's no doubled gap above/below. The inner .section keeps its normal padding. */ .dews-more-collections { padding-block: 0; } .dews-collection-about { padding-block: 0; } .dews-recently-viewed { padding-block: 0; } .dews-recently-viewed .rail { --rail-per-view: 3; } .dews-related-wrapper { padding-block: 0; } [id$="__contact_form"] { padding-block: 0; } @media (max-width: 990px) { .dews-recently-viewed .rail { --rail-per-view: 2; } } /* --- breadcrumb (page head) — shared with PDP --- */ .page-head{ padding-block:clamp(1.25rem,2.5vw,2rem) 0; } .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; font-size:.8rem; color:var(--muted); list-style:none; margin:0; padding:0; } /* Separator dots align with the FIRST line when a crumb wraps onto two lines. align-items:center put the dot in the middle of the whole (wrapped) block; flex-start + a half-line top margin parks it on the first line instead — which is identical to centre while the crumb fits on one line. */ .breadcrumb li{ display:inline-flex; align-items:flex-start; gap:.55rem; } .breadcrumb li + li::before{ content:''; width:3px; height:3px; border-radius:50%; background:var(--muted-2); flex:none; margin-top: calc(0.85em - 1.5px); /* half of the 1.7 line-height, less half the dot */ margin-top: calc(0.5lh - 1.5px); /* exact, where the lh unit is supported */ } .breadcrumb a{ color:var(--muted); } .breadcrumb a:hover{ color:var(--red-ink); } .breadcrumb [aria-current]{ color:var(--ink); font-weight:500; } /* --- Page content section (Track order / app forms) — centered card --- */ .dews-page-content { padding-top: 0; } .page-content-wrap { max-width: 720px; margin: 0 auto; } .page-content-rte { max-width: 100% !important; } .page-content-rte form, .page-content-rte .tracking-form, .page-content-rte > div { width: 100%; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } .form-msg.is-ok:focus-visible { border: 1px solid; outline: 0; box-shadow: none; padding: 4px 4px; line-height: normal; } .footer__signup .newsletter__form input:focus-visible { box-shadow: none; border: 1px solid; } .template-cart .cart__warnings a.button { line-height: normal; min-height: auto; min-width: auto; padding: 0.8rem 1.7rem; font-size: 1.25rem; border-radius: 50px; } .template-cart .cart__warnings a.button:hover { background: var(--cane); } .template-cart .cart__warnings { padding-block: 3.5rem; } .template-cart h1.cart__empty-text { font-size: 2.2rem; padding: 0; line-height: normal; margin: 0; margin-bottom: 2rem; } .template-cart .cart__warnings a.button::before,.cart__warnings a.button::after{display:none;} .template-cart .cart__login-title { margin: 1rem 0; font-size: 1.1rem; } /* ========================================================= Predictive search dropdown — Dew's styling Dawn's component relies on --color-foreground/--color-background which are only defined inside .color-scheme-* wrappers, so the dropdown rendered transparent with oversized Dawn heading fonts. These rules pin it to Dew's palette + typography. ========================================================= */ .predictive-search { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); max-height: min(70vh, 560px); } .search-section { padding-block: 0; } .predictive-search--search-template { z-index: 5; } .predictive-search__results-groups-wrapper { border-bottom-color: var(--line-soft); } .predictive-search__heading { border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 1.25rem; padding: 1rem 0 0.6rem; line-height: 1.3; } .predictive-search__item { padding: 0.7rem 1.25rem; color: var(--ink-2); text-decoration: none; } .predictive-search__item:hover { color: var(--ink); background: var(--bone); } .predictive-search__item-heading, .predictive-search__item-heading.h5 { font-size: 0.85rem; font-weight: 500; letter-spacing: normal; line-height: 1.4; color: inherit; font-family: inherit; } .predictive-search__item-query-result, .predictive-search__item-query-result mark { font-weight: 600; } .predictive-search__item--link-with-thumbnail { grid-template-columns: 3.5rem 1fr; grid-column-gap: 1rem; } .predictive-search__image { width: 3.5rem; height: 3.5rem; border-radius: var(--r-xs); object-fit: cover; } .predictive-search__item .price { font-size: 0.9rem; } .predictive-search__item--term { padding: 1rem 1.25rem; font-size: 0.95rem; font-weight: 600; border-top: 1px solid var(--line-soft); } .predictive-search__item--term .icon-arrow { width: 1rem; height: 1rem; color: var(--ink); } .predictive-search__loading-state { padding: 1.5rem; } /* ========================================================= MOBILE: NO HORIZONTAL (LEFT-RIGHT) SCROLLING Safety net for anything that still spills past the viewport on phones. Written to only ever *shrink/clip* — it never changes the desktop layout. ========================================================= */ @media screen and (max-width: 989px) { /* 100vw ignores the scrollbar, so it is always slightly too wide */ cart-drawer, .drawer { width: 100% !important; } .template-cart h1.cart__empty-text {font-size: 1.2rem;} .template-cart .cart__warnings a.button {font-size:0.9rem;} .template-cart .cart__warnings {padding-block: 40px;} /* grid / flex children must be allowed to shrink under their content width */ .container, .section, .pdp, .arrivals, .looks, .rooms, .craft, .grid-products, .footer__grid, .promise, .reviews, .promo, .hero, .faq { max-width: 100%; min-width: 0; } .container > *, .section > * { min-width: 0; } /* one long word / URL / email must never push the page sideways */ h1, h2, h3, h4, h5, p, a, li, td, th, dd, dt { overflow-wrap: break-word; word-wrap: break-word; } /* marquee tracks are wider than the screen by design — keep them clipped */ .announce, .announce__viewport, .ribbon { overflow: hidden !important; max-width: 100%; } } /* ========================================================= HOMEPAGE · no horizontal scrolling (root cause fixes) These only ever reduce sizes / allow shrinking on mobile — the desktop layout is untouched. ========================================================= */ @media (max-width: 1024px) { /* Rooms list — 5 items in one flex row (num · thumb · name · meta · arrow). .rooms__name had no min-width:0 and .rooms__meta was flex:none, so the row could not shrink and pushed ~16px past the viewport on a 390px phone. */ .rooms__link { gap: 0.85rem; } .rooms__name { min-width: 0; overflow-wrap: anywhere; } .rooms__meta { flex: 0 1 auto; min-width: 0; } } @media (max-width: 480px) { .rooms__thumb { width: 60px; height: 60px; } .rooms__link { gap: 0.7rem; } /* promo countdown: 4 units + 3 gaps — allow wrapping on very small phones */ .countdown { flex-wrap: wrap; gap: 1.25rem 1.5rem; } } @media (max-width: 1024px) { body .dews-header .header__row { gap: 0.5rem; } /* beats the `gap:0` rule above */ .dews-header .icon-btn { width: 38px; height: 38px; } .dews-header .icon-btn svg { width: 18px; height: 18px; } .dews-header .actions .wishlist-hero-header-icon { width: 38px; height: 38px; } .dews-header .actions { margin-left: auto; } /* let the wordmark shrink instead of pushing the icons off the row */ .dews-header .logo { min-width: 0; overflow: hidden; } .dews-header .logo__word { overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 576px) { .dews-header .icon-btn { width: 36px; height: 36px; } .dews-header .icon-btn svg { width: 17px; height: 17px; } .dews-header .actions .wishlist-hero-header-icon { width: 36px; height: 36px; } .dews-header .logo__word { font-size: 0.86rem; } } /* ========================================================= MOBILE / TABLET · tighter vertical rhythm Desktop keeps --section-y; phones and tablets get a compact 30px so the page reads as one continuous scroll instead of separate slides. ========================================================= */ @media (max-width: 989px) { .section, .section--tight { padding-block: 40px; } /* the eyebrow must not add its own top margin on top of the 30px, or the gap above a section doubles */ .section-head p { margin-top: 0; } /* …but a description sitting directly under an h2 still needs its gap */ .section-head h2 + p { margin-top: 1.1rem; } section#shopify-section-template--28491440226485__reviews-heading { padding-bottom: 0; } section#shopify-section-template--28491440226485__judgeme-reviews { padding-block: 0; } .jm-review-widget.jm-review-widget--minimal-header { padding-block: 0 !important; } } /* ========================================================= CART DRAWER — empty state, scroll layout, typography ========================================================= */ cart-drawer.is-empty .drawer__header { display: none !important; } cart-drawer:has(.drawer__inner-empty) .drawer__header { display: none !important; } cart-drawer.is-empty .drawer__inner-empty { position: relative; /* containing block for the close button */ width: 100%; align-self: stretch; } cart-drawer .cart-drawer__warnings .drawer__close, cart-drawer.is-empty .cart-drawer__empty-content .drawer__close { position: absolute !important; top: 0.85rem !important; right: 0 !important; /* 1.5rem from the drawer edge */ min-width: 2.5rem !important; min-height: 2.5rem !important; width: 2.5rem !important; height: 2.5rem !important; display: grid !important; place-items: center !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } cart-drawer .cart-drawer__warnings .drawer__close .svg-wrapper, cart-drawer.is-empty .cart-drawer__empty-content .drawer__close .svg-wrapper { width: 1.05rem !important; height: 1.05rem !important; display: grid !important; place-items: center !important; } cart-drawer .cart-drawer__warnings .drawer__close svg, cart-drawer.is-empty .cart-drawer__empty-content .drawer__close svg { width: 100% !important; height: 100% !important; display: block !important; } /* normal (non-empty) header close — same optical inset as the empty one */ cart-drawer .drawer__close { right: 0 !important; } /* --- 2. "Continue shopping" hover --------------------------------------- */ cart-drawer.is-empty .drawer__inner-empty .button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px #0000001f!important; background-color: var(--cane); } /* --- 3. "Log in to check out faster" link ------------------------------- */ .cart__login-paragraph a { font-size: inherit; color: #666; text-decoration: none; border-bottom: 1px solid #666; } /* --- 4. Scroll layout: fixed header · scrolling items · fixed footer ---- */ cart-drawer .drawer__inner { overflow: hidden !important; } cart-drawer .drawer__header { flex: none !important; } cart-drawer-items { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin; /* iOS will not give the list momentum scrolling without this, which made the drawer feel like it was not scrollable at all on a real phone. */ -webkit-overflow-scrolling: touch; } cart-drawer .drawer__footer { flex: none !important; /* Keep the Checkout button clear of the iPhone home indicator. */ padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); } /* Dawn flips both of these on short screens — keep the same split instead */ @media screen and (max-height: 650px) { cart-drawer-items { overflow-y: auto !important; } cart-drawer .drawer__inner { overflow: hidden !important; } } /* --- 5. Cart item typography & spacing ---------------------------------- */ cart-drawer .cart-item { gap: 0.9rem 1rem !important; padding-block: 1rem !important; border-bottom: 1px solid var(--line-soft); } cart-drawer .cart-item:last-child { border-bottom: 0; } cart-drawer .cart-item__media { grid-row: 1 / 3; } cart-drawer .cart-item__image { width: 100%; border-radius: var(--r-xs); } cart-drawer .cart-item__name, cart-drawer .cart-item__title { font-size: 0.9rem !important; font-weight: 600 !important; line-height: 1.35 !important; } cart-drawer .cart-item__details { font-size: 0.8rem !important; line-height: 1.5; } cart-drawer .cart-item__price-wrapper, cart-drawer .cart-item__totals, cart-drawer .cart-item__final-price { font-size: 0.85rem !important; } cart-drawer .cart-item__old-price { font-size: 0.78rem !important; } cart-drawer .product-option { font-size: 0.78rem !important; } /* --- 6. Judge.me review widget inside the drawer ------------------------ */ /* Scoped to the drawer so the storefront widget is untouched. */ cart-drawer .jm-review-widget[data-v-d92151cd] { padding-block: 0.75rem !important; } cart-drawer .jm-text[data-v-6d928e9f] { font-size: 1rem !important; line-height: 1.35 !important; } /* ========================================================= BATCH — cart drawer extras, +/- icons, filter drawer, footer rhythm, homepage reviews, mobile typography ========================================================= */ /* --- (2a) Cart note + drawer footer disclosure --------------------------- */ .cart__note { height: fit-content; top: 0; } .drawer__footer summary { display: flex; position: relative; line-height: normal; padding: 1rem; font-size: 0.8rem; } /* --- (2b) Checkout button hover ----------------------------------------- */ .cart__checkout-button:hover { background-color: var(--cane) !important; transform: translateY(-2px) !important; } /* --- (2c) Totals — desktop size was oversized --------------------------- */ /* component-totals.css ships `.totals__total-value{font-size:1.8rem}` and component-cart-drawer.css pins the drawer copy to 1.2rem; both of those are enqueued after this file, so !important is the only way to win cleanly. */ .totals > h2, .totals .totals__total, .totals .totals__total-value { font-size: 0.9rem !important; line-height: normal !important; } /* --- (2d) Mobile cart row ----------------------------------------------- */ /* Scoped to the drawer: on the cart PAGE .cart-item is a , and forcing display:grid there would collapse the table layout. */ @media screen and (max-width: 990px) { cart-drawer .cart-item { display: grid !important; grid-template-columns: 100px 1fr !important; gap: 1.5rem !important; padding-top: 1rem !important; padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid #eaeaea !important; align-items: start !important; } cart-drawer .cart-item:last-child { border-bottom: 0 !important; } /* an earlier rule pins the thumb to column 1 / rows 1-3; keep the line total in column 2 under the details instead of wrapping under the thumb */ cart-drawer .cart-item__totals { grid-column: 2 !important; grid-row: auto !important; } } .cart__blocks .tax-note a {border-bottom: 1px solid;text-decoration: none;outline: none;padding-bottom: 2px;} /* --- (4) Footer rhythm on mobile ---------------------------------------- */ @media (max-width: 989px) { .footer { padding-top: 30px; } .totals > h2, .totals .totals__total, .totals .totals__total-value {font-size: 0.9rem !important;} } .faq__icon, .facet__q .faq__icon { position: relative; width: 16px !important; height: 16px !important; flex: none; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -0.75px; background: currentColor; transition: transform 0.4s var(--ease); } .faq__icon::after { transform: rotate(90deg); } .faq__item.is-open .faq__icon::after, .facet[open] .faq__icon::after { transform: rotate(0); } @media screen and (max-width: 1100px) { html .mobile-facets { z-index: 99999 !important; } html .mobile-facets__inner { z-index: 100000 !important; } html body:has(.mobile-facets__disclosure[open]) .shopify-section-group-header-group, html body:has(.mobile-facets__disclosure[open]) .header, html body:has(.mobile-facets__disclosure[open]) .dews-header { z-index: 1 !important; } .facets-container {border-bottom: 0;} } @media (max-width: 989px) { :root { --t-hero: clamp(2.2rem, 8.5vw, 3rem); --t-display: clamp(1.85rem, 6.8vw, 2.5rem); --t-h2: clamp(1.65rem, 6.4vw, 2.1rem); --t-h3: clamp(0.95rem, 3.6vw, 1.15rem); --t-lead: clamp(0.95rem, 3.8vw, 1.05rem); --t-body: 0.95rem; --section-y: 30px; } .collection-page .shop {padding-bottom:0;} /* cart totals one more step down on a phone */ .totals > h2, .totals .totals__total, .totals .totals__total-value { font-size: 1rem !important; } /* section head sits closer to the grid it introduces */ .section-head { margin-bottom: 1.5rem; gap: 1rem; } .section-head p, .section-head__text p { font-size: 0.9rem; line-height: 1.65; } /* product / content grids breathe less on a phone */ .grid-products { gap: 1.15rem 1rem; } .footer__contact-text p a, .footer__col ul li a {font-size: 14px;} .footer__grid {gap: 1.75rem;grid-template-columns: 1fr 1fr;} .footer__signup h2 { font-size: clamp(1.3rem, 6vw, 1.75rem); } .footer__contact-text, .footer__brand p { font-size: 0.86rem; line-height: 1.7;margin-top:8px; } /* long-form copy */ .seo-copy p, .seo-copy li { font-size: 0.88rem; line-height: 1.7; } .section li, .section p { line-height: 1.7; } /* reviews: 30px above the heading, 30px below the app widget, so the two sections that are not one wrapper still read as one 30px rhythm */ .section.dews-reviews-heading { padding-block-start: 30px; } body.template-index [id$="__1788325876b6967a8d"], body.template-index [id$="-1788325876b6967a8d"] { padding-block-end: 30px; } } /* ========================================================= MOBILE POLISH — headings, rhythm, component spacing ========================================================= */ @media (max-width: 989px) { /* --- double padding fix ------------------------------------------------ The `.section, .section--tight` rule a few lines up is what gives mobile its 40px rhythm, but it now wins over the two collection-page rules that zero their own padding-block (they sit earlier in this file and have the same specificity). Re-asserted here so those sections do not double up. */ .dews-collection-about, .dews-more-collections { padding-block: 0; } /* --- reviews: 30px above the heading, nothing below -------------------- The Judge.me widget section below it supplies the tail gap, so the two halves together still read as one section. */ body.template-index section.dews-reviews-heading { background-color: var(--bone); padding-block-start: 30px; padding-bottom: 0; } /* --- heading offsets --------------------------------------------------- */ .section-head h2 { margin-top: 8px; } .hero h1 { margin-top: 0.75rem; } /* --- "Our craft" heading ----------------------------------------------- #craft-title is a bare

(no .section-head h2 wrapper), so it was falling back to Dawn's base h2 — calc(--font-heading-scale * 2rem) — which is far bigger than --t-h2. Pin it to the same scale. */ #craft-title { font-size: var(--t-h2); } /* --- craft step numbers: sit on the heading's baseline ------------------ */ .step__num { padding-top: 0; } /* --- ribbon ------------------------------------------------------------ */ .ribbon { padding: 10px 0; } /* --- collection page --------------------------------------------------- */ .chero .chero__meta { display: flex; flex-wrap: wrap; gap: 2px 15px; margin-top: 15px; } .shop { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; } } @media (max-width: 576px) { .rooms__name { font-size: 1.2rem; } .contact-page .contact-row {gap:0;} } /* ========================================================= BATCH — list dots, search page, hero proof ========================================================= */ /* --- (1) Red diamond bullets ------------------------------------------- Our craft / Material / Sustainability all render the same .craft-content .rte list, which was using the default round marker tinted --cane. Swap it for the same 5px red diamond used by .seo-copy and .dew elsewhere. Scoped to .craft-content so nothing else changes. !important because dews-pages.css is enqueued from the section, i.e. after this file. */ .craft-content .rte ul { list-style: none !important; padding-left: 0 !important; } .craft-content .rte li { position: relative; padding-left: 1.15rem;line-height:normal !important; } .craft-content .rte li::before { content: ''; position: absolute; left: 0; top: calc(0.56em - 2.5px); width: 5px; height: 5px; background: var(--red); transform: rotate(45deg); } .craft-content .rte li::marker { color: transparent !important; } /* --- (2) Search page only ---------------------------------------------- .chero--single also renders on collection / list-collections banners when there is no hero image, so everything here is scoped to body.template-search (the template name is emitted on by layout/theme.liquid). */ body.template-search .chero--single .chero__text { max-width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; } /* the search field was capped at 34rem — let it fill the centred column */ body.template-search .search-page__form { max-width: 100%; width: 100%; } body.template-search predictive-search[open] .predictive-search, body.template-search predictive-search[loading] .predictive-search { display: block; width: 100%; z-index: 9; } /* The collection toolbar is sticky at z-index 10, so the popup's own z-index 9 alone would still let the toolbar paint over it. Drop the toolbar for as long as the predictive results are open. */ body.template-search:has(predictive-search[open]) .toolbar { z-index: 1 !important; } /* --- (4) Hero proof badges on phones ------------------------------------ */ @media (max-width: 768px) { .hero__proof { gap: 3px 20px; } .cart-drawer .tax-note { margin: 10px; font-size: 14px !important;} } @media (max-width: 989px) { /* --- Promise boxes ---------------------------------------------------- */ .promise__item { padding: 15px; } .promise__icon { width: 30px; height: 30px; color: var(--ink); margin-bottom: 10px; } .promo__body .eyebrow { font-size: var(--t-label); } /* --- Footer newsletter perks ------------------------------------------ */ .newsletter__perks { gap: 8px 20px; } /* --- Judge.me cards carousel: default bottom margin ------------------- Applies to both the homepage and the PDP — the widget markup is identical on the two. */ .jdgm-widget.jdgm-cards-carousel .jdgm-content { margin-bottom: 0; } /* --- PDP sections: cancel the doubled 40px --------------------------- .dews-related-wrapper, .dews-recently-viewed and .dews-complete-look each carry `padding-block: 0` earlier in this file, but the mobile `.section, .section--tight { padding-block: 40px }` rule sits further down with the same specificity, so it wins and stacks 40px twice. Re-asserted here so each section keeps the 40px rhythm once. */ .dews-related-wrapper { padding-block: 0 !important; } .dews-recently-viewed { padding-block: 0; } .dews-complete-look { padding-block: 0; } .contact-page {padding-block: 0 !important;} } /* --- Reviews: strip the app widget's own default gaps ------------------- */ section#shopify-section-template--28486573293749__reviews-heading { padding-bottom: 0; } section#shopify-section-template--28486573293749__judgeme-reviews { padding-block: 0; } .jm-review-widget.jm-review-widget--minimal-header { padding-block: 0; } .jdgm-tabs.jm-review-widget-minimal-header__tabs { margin-block: 0; } .contact-info__list a, .contact-info__list .contact-info__row {width:fit-content;} .contact-submit { flex-wrap: wrap; gap: 1rem; margin-top:10px;} /* --------------------------------------------------------------------------- Mobile drawer menu — restyle supplied by the store owner --------------------------------------------------------------------------- */ .site-mobile-drawer .drawer__nav a, .site-mobile-drawer .drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 4px; font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; } .site-mobile-drawer .drawer__nav a:hover, .site-mobile-drawer .drawer__toggle:hover {background-color:var(--cane);} /* --------------------------------------------------------------------------- Policy + plain page content (refund, privacy, terms, shipping, contact info) These render through templates/page.json into sections/main-page.liquid, so the body is whatever Shopify's policy editor produces: one .rte block of bare h2/h3, p, ul/ol and occasional tables, with no classes to hook onto. Everything below is written after the earlier .rte rules (around line 470) so these values win. Two real bugs fixed here: - The old rule set `list-style: disc` on ul AND ol, so every numbered policy list rendered with bullets instead of numbers. - .rte headings had no font-size at all, so they fell back to the browser default 1.5em/1.17em, which never matched the rest of the theme. --------------------------------------------------------------------------- */ /* Container ---------------------------------------------------------------- */ .page-width--narrow, .shopify-policy__container { max-width: 76rem; margin-inline: auto; } .shopify-policy__container { margin-block: 3rem !important; padding-inline: 1.5rem; } /* Title ------------------------------------------------------------------- */ .main-page-title, .page-title, .shopify-policy__title h1, .shopify-policy__title { font-family: var(--font-heading-family, var(--font-accent)) !important; font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important; line-height: 1.18 !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: var(--ink, #171310) !important; text-align: left !important; margin-top: 3rem !important; margin-bottom: 1.5rem !important; } /* Body -------------------------------------------------------------------- */ .rte { font-size: var(--t-body, 1.0313rem) !important; line-height: 1.8 !important; color: var(--ink-2, #2a221c) !important; } .rte > *:first-child { margin-top: 0 !important } .rte > *:last-child { margin-bottom: 0 !important } .rte p { margin-top: 0 !important; margin-bottom: 1.25rem !important; line-height: 1.8 !important; } /* Headings ---------------------------------------------------------------- */ .rte h1, .rte h2 { font-family: var(--font-heading-family, var(--font-accent)) !important; font-size: clamp(1.3rem, 2.2vw, 1.6rem) !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--ink, #171310) !important; margin-top: 2.5rem !important; margin-bottom: 1rem !important; } .rte h3 { font-family: var(--font-heading-family, var(--font-accent)) !important; font-size: clamp(1.12rem, 1.7vw, 1.28rem) !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--ink, #171310) !important; margin-top: 2rem !important; margin-bottom: 0.75rem !important; } .rte h4, .rte h5, .rte h6 { font-size: 1.05rem !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--ink, #171310) !important; margin-top: 1.75rem !important; margin-bottom: 0.6rem !important; } /* Lists — ul keeps discs, ol gets its numbers back ------------------------ */ .rte ul { list-style: disc outside !important; padding-left: 1.5rem !important } .rte ol { list-style: decimal outside !important; padding-left: 1.75rem !important } .rte ul, .rte ol { margin-top: 0 !important; margin-bottom: 1.5rem !important; } .rte li { margin-bottom: 0.55rem !important; line-height: 1.75 !important; } .rte li:last-child { margin-bottom: 0 !important } .rte ul ul, .rte ol ol, .rte ul ol, .rte ol ul { margin-top: 0.55rem !important; margin-bottom: 0 !important; } /* Inline + media ---------------------------------------------------------- */ .rte a { color: var(--ink, #171310); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } .rte a:hover { color: var(--walnut, #6b4a33) } .rte strong, .rte b { font-weight: 600; color: var(--ink, #171310) } .rte img { max-width: 100%; height: auto; border-radius: var(--r-sm, 6px); } .rte blockquote { margin: 1.75rem 0 !important; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--cane, #d8b489); color: var(--muted, #7c716a); font-style: italic; } /* Tables — refund and shipping policies usually carry one ----------------- */ .rte table { width: 100%; margin: 1.5rem 0 !important; border-collapse: collapse; font-size: 0.95rem; } .rte th, .rte td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line, #e2dcd3); text-align: left; vertical-align: top; } .rte th { font-weight: 600; background: var(--bone, #f3efe9); color: var(--ink, #171310); } /* Mobile ------------------------------------------------------------------ */ @media screen and (max-width: 749px) { .main-page-title, .page-title, .shopify-policy__title h1, .shopify-policy__title { font-size: 1.75rem !important; margin-top: 1.5rem !important; margin-bottom: 1.25rem !important; } .shopify-policy__container { margin-block: 2rem !important } .rte { font-size: 1rem !important; line-height: 1.75 !important } .rte p { margin-bottom: 1.1rem !important } .rte h1, .rte h2 { font-size: 1.25rem !important; margin-top: 2rem !important; margin-bottom: 0.8rem !important; } .rte h3 { font-size: 1.12rem !important; margin-top: 1.6rem !important; margin-bottom: 0.6rem !important; } .rte ul, .rte ol { margin-bottom: 1.25rem !important } /* A wide policy table would otherwise push the whole page sideways. */ .rte table { display: block; overflow-x: auto } .rte th, .rte td { min-width: 8rem } } /* --------------------------------------------------------------------------- Policy copy pasted as plain text inside a single

The policy templates were pasted with blank lines between sentences but all inside one

. The editor turned every one of those blank lines into a
, and two in a row stack to more than a full paragraph gap — which is why the pages read as one enormous block of whitespace. CSS cannot split a

into paragraphs, so the breaks are collapsed instead and the sentences flow as the single paragraph the markup actually is. --------------------------------------------------------------------------- */ /* Collapse the line breaks the editor added inside paragraphs. */ .rte p br, .rte li br { display: none; } /* Empty paragraphs were used as spacers between sections. A

holding only one or more (now hidden) breaks is the same thing. */ .rte p:empty { display: none !important; } .rte p:has(> br:only-child) { display: none !important; } /* Headings were written as a bold lead at the top of a paragraph. Making that bold run a block puts it on its own line, so it reads as a heading instead of running into the body copy now that the
after it is gone. */ .rte p > strong:first-child { display: block; font-family: var(--font-heading-family, var(--font-accent)); font-size: clamp(1.12rem, 1.7vw, 1.28rem); line-height: 1.35; font-weight: 600; color: var(--ink, #171310); margin-top: 1.25rem; margin-bottom: 0.6rem; } /* The first bold lead on a page should not carry that extra top margin. */ .rte > p:first-child > strong:first-child { margin-top: 0; } /* --------------------------------------------------------------------------- Policy + plain page lists — red diamond bullets The policy HTML (privacy, terms, refund) carries