/* COSMOSKIN Mobile Redesign v1 — mobile-only architecture layer. Desktop protection: every visual rule is scoped under max-width/tablet media queries. */ /* Desktop: hide mobile-only hero product media (shown only under cs-mobile-v1-active). */ .home-hero__media { display: none; } @media (max-width: 768px) { :root { --cs-mobile-bg: #f7f1ea; --cs-mobile-surface: #fffaf4; --cs-mobile-surface-2: #efe4d8; --cs-mobile-ink: #17120d; --cs-mobile-muted: #756b61; --cs-mobile-soft: #a49483; --cs-mobile-line: rgba(42, 32, 22, .12); --cs-mobile-accent: #1f1710; --cs-mobile-accent-soft: #d9c7b4; --cs-mobile-radius-card: 22px; --cs-mobile-radius-panel: 28px; --cs-mobile-radius-pill: 999px; --cs-mobile-shadow-soft: 0 18px 42px rgba(56, 43, 31, .10); --cs-mobile-container: 16px; --cs-mobile-section-gap: 22px; --cs-mobile-header-height: 62px; --cs-mobile-bottom-nav-height: 74px; --cs-mobile-sticky-height: 84px; --cs-mobile-safe-bottom: env(safe-area-inset-bottom, 0px); } html, body { max-width: 100%; overflow-x: hidden !important; } /* overflow-x:hidden makes a scroll container, and a sticky element resolves against its nearest scroll container — body, which never scrolls, so nothing on mobile could actually stick. `clip` contains the same horizontal overflow without creating that scrollport. keeps hidden: it is the viewport scroller, which is what sticky needs to resolve against. */ @supports (overflow: clip) { body { overflow-x: clip !important; overflow-y: visible !important; } } body.cs-mobile-v1-active { background: var(--cs-mobile-bg) !important; color: var(--cs-mobile-ink) !important; padding-bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 18px) !important; -webkit-text-size-adjust: 100%; } html.cs-mobile-lock, body.cs-mobile-lock { overflow: hidden !important; height: 100% !important; touch-action: none; } body.cs-mobile-v1-active * { box-sizing: border-box; } body.cs-mobile-v1-active img { max-width: 100%; height: auto; } body.cs-mobile-v1-active a, body.cs-mobile-v1-active button, body.cs-mobile-v1-active input, body.cs-mobile-v1-active select, body.cs-mobile-v1-active textarea { -webkit-tap-highlight-color: transparent; } /* Legacy/conflicting mobile systems are disabled by JS, but also hidden defensively on mobile. */ body.cs-mobile-v1-active .m-header, body.cs-mobile-v1-active .m-search-bar, body.cs-mobile-v1-active .m-cat-strip, body.cs-mobile-v1-active .cm-mobile-redesign-root, body.cs-mobile-v1-active #cm-mobile-redesign-root, body.cs-mobile-v1-active .cm-bottom-nav--fallback, body.cs-mobile-v1-active nav.cm-bottom-nav:not(.cs-mobile-v1-bottom-nav) { display: none !important; } /* Original desktop chrome hidden on mobile only; new mobile v1 shell replaces it. Header is moved into #cs-mobile-v1-page-stage, so it is no longer a direct body child — match both placements or the legacy .header-tools bar leaks under the v1 header. */ body.cs-mobile-v1-active > header.header, body.cs-mobile-v1-active #cs-mobile-v1-page-stage > header.header, body.cs-mobile-v1-active header.account-header, body.cs-mobile-v1-active .mobile-nav, body.cs-mobile-v1-active #mobileNav, body.cs-mobile-v1-active .site-search-form--mobile, body.cs-mobile-v1-active header.header .header-tools { display: none !important; } /* Mobile announcement. This block used to be a third, separate ticker design (34px, #1a1510, title-case at .08em) sitting alongside the desktop premium header's and the account page's, so the bar looked different depending on where you were. assets/announcement-bar.css owns the ticker at every width now; all that is left here is the placement the mobile shell needs — the v1 header is sticky above it, so the bar rides in normal flow instead of sticking. */ body.cs-mobile-v1-active .announcement, body.cs-mobile-v1-active .announcement.cs-premium-announcement { position: relative !important; top: auto !important; z-index: 6490 !important; width: 100% !important; } .cs-mobile-v1-header { position: sticky; top: 0; z-index: 6500; min-height: var(--cs-mobile-header-height); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 4px; padding: 10px 4px 10px var(--cs-mobile-container); background: rgba(255, 250, 244, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--cs-mobile-line); box-shadow: 0 10px 30px rgba(42, 32, 22, .06); } .cs-mobile-v1-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); grid-column: 1 / -1; justify-self: center; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: max-content; max-width: calc(100% - 120px); color: var(--cs-mobile-ink); text-decoration: none; font-family: "Cormorant Garamond", Didot, "Bodoni 72", Georgia, serif; font-size: clamp(21px, 5.9vw, 29px); font-weight: 400; line-height: .92; letter-spacing: clamp(.24em, .9vw, .36em); text-transform: uppercase; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; pointer-events: auto; z-index: 1; } .cs-mobile-v1-header > .cs-mobile-v1-iconbtn, .cs-mobile-v1-tools { position: relative; z-index: 2; } .cs-mobile-v1-header > .cs-mobile-v1-iconbtn[data-cs-open="menu"] { grid-column: 1; justify-self: start; } .cs-mobile-v1-logo span { display: block; overflow: visible; white-space: nowrap; padding-left: 0; margin-right: -.24em; transform: translateY(-.02em); } .cs-mobile-v1-iconbtn { width: 44px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; border: 0; background: transparent; color: var(--cs-mobile-ink); box-shadow: none; padding: 0; position: relative; appearance: none; -webkit-appearance: none; } .cs-mobile-v1-iconbtn:focus-visible { outline: 2px solid rgba(181, 138, 74, .45); outline-offset: 2px; } .cs-mobile-v1-iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .cs-mobile-v1-header > .cs-mobile-v1-iconbtn[data-cs-open="menu"] svg { width: 22px; height: 22px; } .cs-mobile-v1-tools .cs-mobile-v1-iconbtn[data-cs-open="cart"] svg { width: 21px; height: 21px; transform: translateY(.5px); } .cs-mobile-v1-tools { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; margin-left: 0; margin-right: 0; } .cs-mobile-v1-tools .cs-mobile-v1-iconbtn { width: 38px; min-width: 38px; } .cs-mobile-v1-tools .cs-mobile-v1-iconbtn[data-cs-open="search"] { margin-right: -4px; } .cs-mobile-v1-badge { position: absolute; top: 1px; right: -1px; box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; padding: 0; border-radius: 999px; border: 1.5px solid #fffaf4; background: #17120d; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; line-height: 1; letter-spacing: 0; text-align: center; text-indent: 0; box-shadow: 0 3px 8px rgba(26, 18, 11, 0.2); pointer-events: none; z-index: 2; } .cs-mobile-v1-badge:not([hidden]) { /* keep circle when 1 digit; grow slightly for 10+ */ } .cs-mobile-v1-badge.is-wide { width: auto; min-width: 20px; padding: 0 5px; } .cs-mobile-v1-tools .cs-mobile-v1-iconbtn[data-cs-open="cart"] { position: relative; } .cs-mobile-v1-tools .cs-mobile-v1-iconbtn[data-cs-open="cart"] .cs-mobile-v1-badge { top: 2px; right: 0; } .cs-mobile-v1-bottom-nav .cs-mobile-v1-badge { top: 4px; right: calc(50% - 20px); width: 17px; height: 17px; min-width: 17px; font-size: 9.5px; } .cs-mobile-v1-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6400; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom)); padding: 8px 8px calc(8px + var(--cs-mobile-safe-bottom)); background: rgba(255, 250, 244, .96); border-top: 1px solid var(--cs-mobile-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -16px 34px rgba(37, 29, 21, .10); isolation: isolate; --cs-tab-indicator-index: 0; } .cs-mobile-v1-tab-indicator { position: absolute; top: 8px; left: 8px; width: calc((100% - 16px) / 5); height: calc(100% - 16px - var(--cs-mobile-safe-bottom)); border-radius: 18px; background: rgba(31, 23, 16, .055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42); transform: translate3d(calc(var(--cs-tab-indicator-index, 0) * 100%), 0, 0); transition: transform .28s cubic-bezier(.22, .9, .28, 1), opacity .2s ease; pointer-events: none; z-index: 0; will-change: transform; } body.cs-checkout-mobile .cs-mobile-v1-bottom-nav { display: none !important; } body.cs-mobile-v1-active .cs-toast, body.cs-route-account .cs-toast { z-index: 13000 !important; bottom: calc(var(--cs-mobile-bottom-nav-height, 72px) + var(--cs-mobile-safe-bottom, 0px) + 12px) !important; left: 50% !important; right: auto !important; max-width: calc(100% - 28px) !important; } body.cs-checkout-mobile { padding-bottom: calc(var(--cs-mobile-safe-bottom) + 16px) !important; } .cs-mobile-v1-bottom-nav a { min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--cs-mobile-muted); text-decoration: none; border-radius: 18px; font: 700 10px/1.15 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.01em; position: relative; transition: color .24s ease, transform .24s cubic-bezier(.22, .9, .28, 1); z-index: 1; } .cs-mobile-v1-bottom-nav a.is-active { color: var(--cs-mobile-ink); background: transparent; } .cs-mobile-v1-bottom-nav svg { display: block; flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } /* Favorites heart — Sephora/Rhode fill burst on tab arrive */ .cs-mobile-v1-bottom-nav .cs-nav-heart { overflow: visible; transform-origin: 50% 55%; } .cs-mobile-v1-bottom-nav .cs-nav-heart__fill { fill: transparent; stroke: none; opacity: 0; transform-origin: 50% 55%; transform-box: fill-box; } /* The heart is red on every tab, active or not — the one warm mark in a nav of muted ink, so the destination of a flying favourite is legible before the user ever taps. Only the fill carries active/inactive. */ .cs-mobile-v1-bottom-nav [data-cs-nav-heart] .cs-nav-heart__stroke { fill: none; stroke: var(--cs-fav-red, #d0342c); stroke-width: 1.65; } /* On the favorites tab the heart stays a solid red heart; every other tab leaves it as the red outline. The fill animates in once on arrival and then holds — it is a state, not a one-shot flourish. */ .cs-mobile-v1-bottom-nav a.is-active[data-cs-nav-heart] .cs-nav-heart__fill { fill: var(--cs-fav-red, #d0342c); opacity: 1; } /* Heartbeat on arriving at the Favorites tab. Scale from the glyph's own centre only: the SVG box, the baseline and the nav row never move. */ .cs-mobile-v1-bottom-nav a.is-heart-burst .cs-nav-heart { animation: csNavHeartBeat .52s cubic-bezier(.22, 1, .36, 1) both; } .cs-mobile-v1-bottom-nav a.is-heart-burst .cs-nav-heart__fill { animation: csNavHeartFill .52s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes csNavHeartFill { 0% { fill: var(--cs-fav-red, #d0342c); opacity: 0; } 45% { fill: var(--cs-fav-red, #d0342c); opacity: 1; } 100% { fill: var(--cs-fav-red, #d0342c); opacity: 1; } } @keyframes csNavHeartBeat { 0% { transform: scale(1); } 28% { transform: scale(1.16); } 52% { transform: scale(0.96); } 76% { transform: scale(1.10); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cs-mobile-v1-bottom-nav a.is-heart-burst .cs-nav-heart { animation: none !important; } /* The state still reads: the fill arrives, it just does not beat. */ .cs-mobile-v1-bottom-nav a.is-heart-burst .cs-nav-heart__fill { animation: csNavHeartFadeIn .18s linear both; } } @keyframes csNavHeartFadeIn { 0% { fill: var(--cs-fav-red, #d0342c); opacity: 0; } 100% { fill: var(--cs-fav-red, #d0342c); opacity: 1; } } .cs-mobile-v1-bottom-nav.cs-tab-indicator-hidden .cs-mobile-v1-tab-indicator { opacity: 0; } /* Bottom tab navigation — horizontal slide transitions */ .cs-mobile-v1-page-stage { position: relative; width: 100%; min-height: calc(100dvh - var(--cs-mobile-bottom-nav-height) - var(--cs-mobile-safe-bottom)); will-change: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; } body.cs-mobile-tab-navigating { overflow-x: clip; } /* Short, shallow slide: enough to read as a tab change, not enough to sit between the tap and the next page appearing. */ .cs-mobile-v1-page-stage.cs-mobile-tab-exit { transition: transform .14s cubic-bezier(.4, 0, .2, 1), opacity .14s ease; will-change: transform, opacity; pointer-events: none; } .cs-mobile-v1-page-stage.cs-mobile-tab-exit--forward { transform: translate3d(-7%, 0, 0); opacity: .5; } .cs-mobile-v1-page-stage.cs-mobile-tab-exit--back { transform: translate3d(7%, 0, 0); opacity: .5; } .cs-mobile-v1-page-stage.cs-mobile-tab-enter { opacity: .72; transform: translate3d(var(--cs-tab-enter-x, 7%), 0, 0); will-change: transform, opacity; } .cs-mobile-v1-page-stage.cs-mobile-tab-enter--forward { --cs-tab-enter-x: 7%; } .cs-mobile-v1-page-stage.cs-mobile-tab-enter--back { --cs-tab-enter-x: -7%; } .cs-mobile-v1-page-stage.cs-mobile-tab-enter-active { transition: transform .2s cubic-bezier(.22, .9, .28, 1), opacity .18s ease; transform: translate3d(0, 0, 0); opacity: 1; } body.cs-mobile-tab-navigating .cs-mobile-v1-bottom-nav a { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .cs-mobile-v1-page-stage.cs-mobile-tab-exit, .cs-mobile-v1-page-stage.cs-mobile-tab-enter, .cs-mobile-v1-page-stage.cs-mobile-tab-enter-active { transition: none !important; transform: none !important; opacity: 1 !important; } .cs-mobile-v1-tab-indicator { transition: none !important; } } .cs-mobile-v1-backdrop { position: fixed; inset: 0; z-index: 7000; background: rgba(25, 18, 12, .38); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .cs-mobile-v1-backdrop.is-open { opacity: 1; pointer-events: auto; } .cs-mobile-v1-sheet { position: fixed; z-index: 7010; background: var(--cs-mobile-surface); color: var(--cs-mobile-ink); box-shadow: var(--cs-mobile-shadow-soft); transform: translate3d(0, 110%, 0); transition: transform .28s cubic-bezier(.22, .8, .24, 1); pointer-events: none; } .cs-mobile-v1-sheet.is-open { transform: translate3d(0,0,0); pointer-events: auto; } .cs-mobile-v1-sheet--bottom { left: 0; right: 0; bottom: 0; max-height: min(84dvh, 720px); border-radius: 30px 30px 0 0; padding-bottom: var(--cs-mobile-safe-bottom); overflow: hidden; } .cs-mobile-v1-sheet--side { top: 0; left: 0; bottom: 0; width: min(90vw, 392px); max-width: 392px; transform: translate3d(-110%,0,0); border-radius: 0 26px 26px 0; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #fffdf9 0%, #fbf5ec 58%, #f7efe3 100%); box-shadow: 0 30px 80px rgba(40, 29, 18, .28); } .cs-mobile-v1-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 18px; border-bottom: 1px solid var(--cs-mobile-line); } .cs-mobile-v1-sheet-head strong { font: 800 14px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; } .cs-mobile-v1-close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--cs-mobile-line); background: #fff; color: var(--cs-mobile-ink); font-size: 24px; line-height: 1; } .cs-mobile-v1-sheet-body { max-height: calc(84dvh - 64px - var(--cs-mobile-safe-bottom)); overflow: auto; -webkit-overflow-scrolling: touch; padding: 18px; } /* ===== Premium side menu ===== */ .cs-mobile-v1-menu-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 26px) 22px 22px; } .cs-mobile-v1-menu-head::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(181, 138, 74, .38), rgba(42, 32, 22, .10) 55%, transparent); } .cs-mobile-v1-menu-brand { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .cs-mobile-v1-menu-kicker { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .42em; text-transform: uppercase; color: #b58a4a; padding-left: 2px; } .cs-mobile-v1-menu-title { font: 600 34px/1 "Cormorant Garamond", "Cormorant", Georgia, serif; letter-spacing: .005em; color: #1a1510; } .cs-mobile-v1-menu-close { flex: 0 0 auto; width: 42px; height: 42px; margin: -6px -6px 0 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: #2a2016; border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: color .18s ease, transform .18s ease; } .cs-mobile-v1-menu-close svg { width: 22px; height: 22px; display: block; } .cs-mobile-v1-menu-close:active { transform: scale(.92); color: #b58a4a; } .cs-mobile-v1-menu-close:focus-visible { outline: 2px solid rgba(181, 138, 74, .5); outline-offset: 3px; } .cs-mobile-v1-sheet-body--menu { flex: 1 1 auto; max-height: none; padding: 8px 22px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; } .cs-mobile-v1-menu { display: flex; flex-direction: column; } .cs-mobile-v1-menu-group { padding: 10px 0; } .cs-mobile-v1-menu-group + .cs-mobile-v1-menu-group { border-top: 1px solid rgba(42, 32, 22, .09); } .cs-mobile-v1-menu-label { margin: 8px 2px 4px; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--cs-mobile-soft); } .cs-mobile-v1-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 6px 2px; color: #211a12; text-decoration: none; border: none; background: transparent; } .cs-mobile-v1-menu a span { font: 500 17px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.01em; } .cs-mobile-v1-menu-chevron { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cs-mobile-soft); transition: transform .2s ease, color .2s ease; } .cs-mobile-v1-menu a:active { color: #b58a4a; } .cs-mobile-v1-menu a:active .cs-mobile-v1-menu-chevron { transform: translateX(3px); color: #b58a4a; } /* Account / auth footer */ .cs-mobile-v1-menu-account { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 12px; } .cs-mobile-v1-menu-account::before { content: ""; display: block; width: 100%; height: 1px; margin-bottom: 6px; background: linear-gradient(90deg, rgba(181, 138, 74, .4), rgba(42, 32, 22, .08) 60%, transparent); } /* Signed-out: premium login CTA */ .cs-mobile-v1-signin { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; border-radius: 16px; text-decoration: none; color: #fdf7ee; background: linear-gradient(135deg, #241a11 0%, #3a2c1c 100%); box-shadow: 0 12px 26px rgba(31, 23, 16, .28); font: 600 15px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; appearance: none; -webkit-appearance: none; transition: transform .18s ease, box-shadow .18s ease; } .cs-mobile-v1-signin svg { width: 19px; height: 19px; color: #d8b071; } .cs-mobile-v1-signin:active { transform: translateY(1px) scale(.99); box-shadow: 0 8px 18px rgba(31, 23, 16, .24); } .cs-mobile-v1-signup-link { text-align: center; font: 500 13px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--cs-mobile-muted); text-decoration: none; } .cs-mobile-v1-signup-link strong { color: #8a6a34; font-weight: 700; } /* Signed-in: account card + sign out */ .cs-mobile-v1-account-card { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 18px; text-decoration: none; color: #211a12; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(247,239,227,.72)); border: 1px solid rgba(181, 138, 74, .26); box-shadow: 0 10px 24px rgba(56, 43, 31, .08); } .cs-mobile-v1-account-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b2013, #4a3823); color: #f4dcb4; font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(216, 176, 113, .35); } .cs-mobile-v1-account-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; } .cs-mobile-v1-account-meta strong { font: 600 15px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-mobile-v1-account-meta small { font: 500 12px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--cs-mobile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-mobile-v1-account-card .cs-mobile-v1-menu-chevron { color: var(--cs-mobile-soft); } .cs-mobile-v1-account-card:active { transform: scale(.995); } .cs-mobile-v1-signout { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(42, 32, 22, .16); background: transparent; color: #6a5f54; font: 600 13px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; transition: color .18s ease, border-color .18s ease, background .18s ease; } .cs-mobile-v1-signout svg { width: 17px; height: 17px; } .cs-mobile-v1-signout:active { color: #a8443a; border-color: rgba(168, 68, 58, .4); background: rgba(168, 68, 58, .06); } .cs-mobile-v1-search-form { display: grid; gap: 12px; } .cs-mobile-v1-search-form input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--cs-mobile-line); background: #fff; font: 600 15px/1 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--cs-mobile-ink); } .cs-mobile-v1-primary, .cs-mobile-v1-secondary { min-height: 48px; border-radius: 999px; border: 1px solid var(--cs-mobile-ink); padding: 0 18px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .cs-mobile-v1-primary { background: var(--cs-mobile-ink); color: #fff; } .cs-mobile-v1-secondary { background: transparent; color: var(--cs-mobile-ink); border-color: var(--cs-mobile-line); } /* Premium product search sheet — Sephora / Rhode / Apple grade */ .cs-mobile-v1-sheet--search { background: linear-gradient(180deg, #fffdf9 0%, #fdf7ee 46%, #f9f1e5 100%); border-radius: 30px 30px 0 0; box-shadow: 0 -18px 60px rgba(40, 29, 18, .22), 0 -1px 0 rgba(255, 255, 255, .6) inset; padding-bottom: calc(18px + var(--cs-mobile-safe-bottom)); } .cs-mobile-v1-sheet-grip { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 999px; background: rgba(42, 32, 22, .16); } .cs-mobile-v1-search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 20px 16px; } .cs-mobile-v1-search-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .cs-mobile-v1-search-kicker { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #b58a4a; } .cs-mobile-v1-search-heading strong { font: 500 27px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .005em; color: var(--cs-mobile-ink); } .cs-mobile-v1-search-close { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--cs-mobile-line); background: rgba(255, 255, 255, .72); color: var(--cs-mobile-ink); transition: background-color .18s ease, border-color .18s ease, transform .16s ease; } .cs-mobile-v1-search-close svg { width: 19px; height: 19px; } .cs-mobile-v1-search-close:active { transform: scale(.94); background: #fff; border-color: rgba(42, 32, 22, .24); } .cs-mobile-v1-sheet-body--search { padding: 4px 20px 8px; } .cs-mobile-v1-search-field { position: relative; display: flex; align-items: center; } .cs-mobile-v1-search-ico { position: absolute; left: 17px; width: 19px; height: 19px; color: var(--cs-mobile-soft); pointer-events: none; } .cs-mobile-v1-sheet--search .cs-mobile-v1-search-form input { min-height: 56px; padding: 0 18px 0 46px; border-radius: 16px; border: 1px solid var(--cs-mobile-line); background: #fffdfa; box-shadow: 0 2px 10px rgba(42, 30, 20, .04); font: 500 15px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--cs-mobile-ink); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .cs-mobile-v1-sheet--search .cs-mobile-v1-search-form input::placeholder { color: var(--cs-mobile-soft); font-weight: 500; } .cs-mobile-v1-sheet--search .cs-mobile-v1-search-form input:focus { outline: none; border-color: rgba(181, 138, 74, .55); background: #fff; box-shadow: 0 0 0 3px rgba(181, 138, 74, .14), 0 6px 18px rgba(42, 30, 20, .06); } .cs-mobile-v1-search-field .cs-mobile-v1-search-ico { transition: color .18s ease; } .cs-mobile-v1-search-form input:focus + .cs-mobile-v1-search-ico { color: #b58a4a; } .cs-mobile-v1-search-submit { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; border: 1px solid var(--cs-mobile-ink); background: var(--cs-mobile-ink); color: #fff; font: 700 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 12px 28px rgba(23, 18, 13, .22); transition: transform .16s ease, box-shadow .18s ease, opacity .18s ease; } .cs-mobile-v1-search-submit svg { width: 17px; height: 17px; } .cs-mobile-v1-search-submit:active { transform: scale(.985); box-shadow: 0 6px 16px rgba(23, 18, 13, .2); } .cs-mobile-v1-search-suggest { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } .cs-mobile-v1-search-suggest-title { margin: 6px 0 0; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--cs-mobile-muted); } .cs-mobile-v1-search-suggest-title:not(:first-child) { margin-top: 12px; } .cs-mobile-v1-search-chips { display: flex; flex-wrap: wrap; gap: 9px; } .cs-mobile-v1-search-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cs-mobile-line); background: rgba(255, 253, 249, .8); color: var(--cs-mobile-ink); font: 600 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .01em; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s ease; } .cs-mobile-v1-search-chip:active { transform: scale(.97); background: var(--cs-mobile-ink); border-color: var(--cs-mobile-ink); color: #fff; } .cs-mobile-v1-search-chip--brand { font-weight: 650; color: var(--cs-mobile-accent); border-color: rgba(181, 138, 74, .32); background: rgba(181, 138, 74, .07); } .cs-mobile-v1-search-chip--brand:active { background: #b58a4a; border-color: #b58a4a; color: #fff; } .cs-mobile-v1-search-close:focus-visible, .cs-mobile-v1-search-chip:focus-visible, .cs-mobile-v1-search-submit:focus-visible { outline: 2px solid #b58a4a; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cs-mobile-v1-search-close, .cs-mobile-v1-search-submit, .cs-mobile-v1-search-chip, .cs-mobile-v1-sheet--search .cs-mobile-v1-search-form input { transition: none; } } /* Product listing mobile polish — hide desktop sidebars */ body.cs-route-listing .filters-sidebar, body.cs-route-listing aside[class*="filter"]:not([data-cs-mobile-sheet]):not(.cs-ap-sidebar), body.cs-route-listing .desktop-filter { display: none !important; } /* Collections / other listings: keep plpbar. All-products uses native filter drawer + sort. */ body.cs-mobile-v1-active:has(.cs-allproducts) .cs-mobile-v1-plpbar { display: none !important; } /* Restore allproducts native filter sheet — do NOT force display:block; allproducts.css uses flex column so Temizle/Uygula stay pinned at bottom. */ body.cs-mobile-v1-active:has(.cs-allproducts) .cs-ap-sidebar { display: flex !important; flex-direction: column !important; } .cs-mobile-v1-plpbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px var(--cs-mobile-container) 14px; padding: 0; align-items: stretch; } .cs-mobile-v1-plpbar__btn, .cs-mobile-v1-plpbar__sort { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; height: 40px; max-height: 40px; width: 100%; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(26, 21, 16, .14); background: rgba(255, 253, 249, .92); color: var(--cs-mobile-ink); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px rgba(28, 20, 14, .05); font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; transition: background-color .16s ease, border-color .16s ease, transform .14s ease; } .cs-mobile-v1-plpbar__btn { appearance: none; -webkit-appearance: none; cursor: pointer; } .cs-mobile-v1-plpbar__btn:active, .cs-mobile-v1-plpbar__sort:active { transform: scale(.985); background: #fff; border-color: rgba(181, 138, 74, .45); } .cs-mobile-v1-plpbar__btn svg, .cs-mobile-v1-plpbar__sort-ico svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .88; } .cs-mobile-v1-plpbar__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-mobile-v1-plpbar__sort { position: relative; justify-content: flex-start; padding-right: 28px; cursor: pointer; } .cs-mobile-v1-plpbar__sort-ico { display: inline-flex; flex: 0 0 auto; color: #8a6a34; } .cs-mobile-v1-plpbar__sort select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 28px 0 34px; border: 0; border-radius: 999px; background: transparent; color: var(--cs-mobile-ink); font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; } .cs-mobile-v1-plpbar__sort select:focus-visible { outline: 2px solid rgba(181, 138, 74, .45); outline-offset: 2px; } .cs-mobile-v1-plpbar__chev { position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-65%) rotate(45deg); opacity: .55; pointer-events: none; } .cs-mobile-v1-plpbar button, .cs-mobile-v1-plpbar select { /* legacy fallback if old markup is cached */ min-height: 40px; max-height: 40px; } .cs-mobile-v1-plpbar > button svg { width: 15px !important; height: 15px !important; } body.cs-mobile-v1-active .product-grid, body.cs-mobile-v1-active .products-grid, body.cs-mobile-v1-active .cs-ap-grid, body.cs-mobile-v1-active .collection-grid, body.cs-mobile-v1-active .cs-recs-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding-left: var(--cs-mobile-container); padding-right: var(--cs-mobile-container); } body.cs-mobile-v1-active .product-card, body.cs-mobile-v1-active .cs-static-product-card { border-radius: 20px !important; overflow: hidden; min-width: 0; background: var(--cs-mobile-surface) !important; border: 1px solid var(--cs-mobile-line) !important; box-shadow: 0 12px 28px rgba(38, 30, 22, .07) !important; } body.cs-mobile-v1-active .product-media, body.cs-mobile-v1-active .product-media-wrap { aspect-ratio: 1 / 1.08; min-height: 0 !important; } body.cs-mobile-v1-active .product-media img, body.cs-mobile-v1-active .product-card img { width: 100%; height: 100%; object-fit: contain !important; padding: 10px; background: #f9f3ec; } body.cs-mobile-v1-active .product-body { padding: 11px !important; min-width: 0; } body.cs-mobile-v1-active .brandline { font-size: 10px !important; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-mobile-v1-active .product-body h3 { font-size: 13px !important; line-height: 1.28 !important; min-height: 34px; max-height: 50px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body.cs-mobile-v1-active .product-body p, body.cs-mobile-v1-active .meta-note, body.cs-mobile-v1-active .price-note { font-size: 10px !important; line-height: 1.35 !important; } body.cs-mobile-v1-active .price-row { display: grid !important; gap: 9px !important; align-items: stretch !important; } body.cs-mobile-v1-active .price { font-size: 15px !important; } body.cs-mobile-v1-active .price-row .btn, body.cs-mobile-v1-active .product-card [data-add-cart] { width: 100%; min-height: 42px; padding: 0 8px !important; font-size: 10px !important; border-radius: 999px !important; } body.cs-mobile-v1-active .favorite-btn { width: 38px !important; height: 38px !important; top: 8px !important; right: 8px !important; background: rgba(255, 253, 249, 0.96) !important; border: 1px solid rgba(26, 21, 16, 0.12) !important; color: #15110d !important; box-shadow: 0 10px 22px rgba(18, 13, 8, 0.10) !important; } body.cs-mobile-v1-active .favorite-btn .favorite-btn-icon svg, body.cs-mobile-v1-active .favorite-btn svg { display: block !important; width: 18px !important; height: 18px !important; } body.cs-mobile-v1-active .favorite-btn .favorite-btn-icon svg path, body.cs-mobile-v1-active .favorite-btn svg path { stroke: #15110d !important; fill: none !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } body.cs-mobile-v1-active .favorite-btn.active .favorite-btn-icon svg path, body.cs-mobile-v1-active .favorite-btn.is-active .favorite-btn-icon svg path, body.cs-mobile-v1-active .favorite-btn[aria-pressed="true"] .favorite-btn-icon svg path { stroke: #d0342c !important; fill: #d0342c !important; animation: csFavPop .38s cubic-bezier(.22, 1, .36, 1); } @keyframes csFavPop { 0% { transform: scale(.82); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } } body.cs-mobile-v1-active #bestsellers .bestseller-card .favorite-btn, body.cs-mobile-v1-active #bestsellers .bestseller-card__favorite { width: 36px !important; height: 36px !important; top: 9px !important; right: 9px !important; box-shadow: 0 6px 14px rgba(42, 30, 20, 0.08) !important; } body.cs-mobile-v1-active #bestsellers .bestseller-card .favorite-btn .favorite-btn-icon, body.cs-mobile-v1-active #bestsellers .bestseller-card__favorite .favorite-btn-icon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; } body.cs-mobile-v1-active #bestsellers .bestseller-card .favorite-btn .favorite-btn-icon svg, body.cs-mobile-v1-active #bestsellers .bestseller-card .favorite-btn svg, body.cs-mobile-v1-active #bestsellers .bestseller-card__favorite .favorite-btn-icon svg { width: 16px !important; height: 16px !important; } body.cs-mobile-v1-active .badge { max-width: calc(100% - 54px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-mobile-v1-filter-group { margin-bottom: 18px; } .cs-mobile-v1-filter-group h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-mobile-muted); } .cs-mobile-v1-chipgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; } .cs-mobile-v1-chip { min-height: 46px; border: 1px solid var(--cs-mobile-line); border-radius: 16px; background: #fff; color: var(--cs-mobile-ink); font-weight: 700; padding: 8px 10px; } .cs-mobile-v1-chip.is-active { background: var(--cs-mobile-ink); color: #fff; border-color: var(--cs-mobile-ink); } .cs-mobile-v1-sheet-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0 0; background: linear-gradient(180deg, rgba(255,250,244,0), var(--cs-mobile-surface) 24%); } /* ===== Premium filter bottom sheet — Sephora / Rhode grade ===== */ .cs-mobile-v1-sheet--filter { display: flex; flex-direction: column; max-height: min(86dvh, 760px); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #fffdf9 0%, #fbf6ee 42%, #f8f1e6 100%); box-shadow: 0 -18px 50px rgba(28, 20, 14, .22); overflow: hidden; padding-bottom: 0; } .cs-mobile-v1-sheet--filter .cs-mobile-v1-sheet-grip { top: 10px; width: 36px; height: 4px; background: rgba(42, 32, 22, .18); } .cs-mobile-v1-backdrop.is-open { background: rgba(18, 13, 9, .46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .cs-mobile-v1-filter-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 28px 20px 14px; flex: 0 0 auto; } .cs-mobile-v1-filter-head::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(181,138,74,.35), rgba(42,32,22,.08) 55%, transparent); } .cs-mobile-v1-filter-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .cs-mobile-v1-filter-kicker { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #b58a4a; } .cs-mobile-v1-filter-heading strong { font: 500 28px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: -.01em; color: #17130f; text-transform: none; } .cs-mobile-v1-filter-close { flex: 0 0 auto; width: 40px; height: 40px; margin: -4px -4px 0 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; border: 0; background: transparent; color: #2a2016; -webkit-tap-highlight-color: transparent; transition: transform .16s ease, color .16s ease, opacity .16s ease; } .cs-mobile-v1-filter-close svg { width: 18px; height: 18px; display: block; stroke-width: 1.55; } .cs-mobile-v1-filter-close:active { transform: scale(.92); color: #b58a4a; opacity: .9; } .cs-mobile-v1-sheet-body--filter { flex: 1 1 auto; max-height: none; padding: 16px 20px 0; overflow: auto; -webkit-overflow-scrolling: touch; } .cs-mobile-v1-filter { display: flex; flex-direction: column; min-height: 100%; padding-bottom: calc(12px + var(--cs-mobile-safe-bottom)); } .cs-mobile-v1-filter__lede { margin: 0 0 18px; max-width: 34ch; font: 500 12.5px/1.45 "Plus Jakarta Sans", system-ui, sans-serif; color: #6b6057; } .cs-mobile-v1-sheet--filter .cs-mobile-v1-filter-group { margin: 0 0 22px; } .cs-mobile-v1-sheet--filter.is-open .cs-mobile-v1-filter-group { animation: csFilterGroupIn .42s cubic-bezier(.22, .8, .24, 1) both; } .cs-mobile-v1-sheet--filter.is-open .cs-mobile-v1-filter-group:nth-of-type(1) { animation-delay: .04s; } .cs-mobile-v1-sheet--filter.is-open .cs-mobile-v1-filter-group:nth-of-type(2) { animation-delay: .1s; } .cs-mobile-v1-filter-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 11px; } .cs-mobile-v1-filter-group__head h4 { margin: 0; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8a8076; } .cs-mobile-v1-filter-group__head span { font: 600 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .04em; color: #b58a4a; } .cs-mobile-v1-sheet--filter .cs-mobile-v1-chipgrid { display: flex; flex-wrap: wrap; gap: 8px; } .cs-mobile-v1-sheet--filter .cs-mobile-v1-chip { flex: 0 0 auto; min-height: 34px; height: 34px; max-width: 100%; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(42, 32, 22, .12); background: rgba(255, 253, 249, .92); color: #211a12; box-shadow: 0 1px 0 rgba(255,255,255,.65) inset; font: 600 12px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .14s ease, box-shadow .16s ease; } .cs-mobile-v1-sheet--filter .cs-mobile-v1-chip:active { transform: scale(.97); } .cs-mobile-v1-sheet--filter .cs-mobile-v1-chip.is-active { background: #17130f; border-color: #17130f; color: #fffdf9; box-shadow: 0 8px 18px rgba(23, 19, 15, .18); } .cs-mobile-v1-sheet--filter .cs-mobile-v1-chipgrid--stock .cs-mobile-v1-chip { flex: 1 1 auto; justify-content: center; text-align: center; min-width: calc(50% - 4px); } .cs-mobile-v1-sheet--filter .cs-mobile-v1-sheet-actions { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: .9fr 1.2fr; gap: 8px; margin-top: auto; padding: 14px 0 calc(10px + var(--cs-mobile-safe-bottom)); background: linear-gradient(180deg, rgba(251,246,238,0) 0%, #fbf6ee 28%, #fbf6ee 100%); } .cs-mobile-v1-filter-clear, .cs-mobile-v1-filter-apply { min-height: 46px; height: 46px; border-radius: 999px; font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; transition: transform .14s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; } .cs-mobile-v1-filter-clear { border: 1px solid rgba(42, 32, 22, .14); background: rgba(255,253,249,.88); color: #3a322b; } .cs-mobile-v1-filter-apply { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #17130f; background: #17130f; color: #fffdf9; box-shadow: 0 12px 26px rgba(23, 19, 15, .2); } .cs-mobile-v1-filter-apply em { font-style: normal; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,253,249,.16); font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: 0; } .cs-mobile-v1-filter-clear:active, .cs-mobile-v1-filter-apply:active { transform: scale(.985); } @keyframes csFilterGroupIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cs-mobile-v1-sheet--filter .cs-mobile-v1-filter-group { animation: none !important; opacity: 1 !important; transform: none !important; } .cs-mobile-v1-filter-clear, .cs-mobile-v1-filter-apply, .cs-mobile-v1-sheet--filter .cs-mobile-v1-chip, .cs-mobile-v1-filter-close { transition: none !important; } } /* PDP */ body.cs-route-pdp main, body.cs-route-pdp .product-page, body.cs-route-pdp .pdp, body.cs-route-pdp .product-detail { padding-left: var(--cs-mobile-container) !important; padding-right: var(--cs-mobile-container) !important; } body.cs-route-pdp .product-layout, body.cs-route-pdp .pdp-grid, body.cs-route-pdp .product-main { display: block !important; } body.cs-route-pdp .product-gallery, body.cs-route-pdp .product-info { width: 100% !important; max-width: 100% !important; } body.cs-route-pdp .pdp5-brand-lockup img { width: auto !important; height: 22px !important; max-width: 140px !important; max-height: 22px !important; object-fit: contain !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-purchase-card { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 18px !important; border-radius: 20px !important; background: #fffdf9 !important; border: 1px solid rgba(26, 21, 16, 0.07) !important; box-shadow: 0 10px 36px rgba(18, 13, 8, 0.06) !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-purchase-card > .pdp5-price-row { order: 1 !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-purchase-card > .pdp-quantity-control { order: 2 !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-purchase-card > .pdp5-actions { order: 3 !important; margin-top: 0 !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-purchase-card > .pdp5-delivery-grid { order: 4 !important; margin-top: 0 !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-purchase-card > .pdp8-club-points { order: 5 !important; margin: 0 !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-actions { grid-template-columns: 1fr 44px !important; gap: 8px !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-actions .favorite-btn.pdp5-favorite { position: static !important; top: auto !important; right: auto !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-self: start !important; align-self: center !important; } body.cs-mobile-v1-active.cs-route-pdp .pdp5-actions .favorite-btn.pdp5-favorite .favorite-btn-icon svg, body.cs-mobile-v1-active.cs-route-pdp .pdp5-actions .favorite-btn.pdp5-favorite svg { width: 24px !important; height: 24px !important; } body.cs-route-pdp .product-title, body.cs-route-pdp .pdp5-info h1, body.cs-route-pdp h1 { font-family: "Cormorant Garamond", Georgia, serif !important; font-size: clamp(1.85rem, 7vw, 2.35rem) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -.02em !important; } .cs-mobile-v1-pdp-sticky { position: fixed; left: 0; right: 0; bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom)); z-index: 6300; padding: 10px 14px; background: rgba(255,250,244,.96); border-top: 1px solid var(--cs-mobile-line); backdrop-filter: blur(18px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; align-items: center; } .cs-mobile-v1-pdp-sticky strong { font-size: 14px; } .cs-mobile-v1-pdp-sticky button { min-height: 48px; border-radius: 999px; border: 0; background: var(--cs-mobile-ink); color: #fff; font-weight: 800; } body.cs-route-pdp { padding-bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-sticky-height) + var(--cs-mobile-safe-bottom) + 28px) !important; } /* Sticky PDP CTA must stay viewport-fixed above bottom nav */ body.cs-mobile-v1-active #mobileStickyPdp, body.cs-mobile-v1-active .mobile-sticky-pdp { position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 8px) !important; z-index: 6400 !important; } body.cs-route-pdp .mobile-sticky-pdp { bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 8px) !important; z-index: 6400 !important; } /* ============================================================ ORDER TRACKING — premium mobile utility (Sephora / Rhode grade) Unified editorial shell: intro + form as one composition. ============================================================ */ body.cs-mobile-v1-active.cs-route-order-tracking { --cs-track-gold: #b58a4a; --cs-track-ink: #17120d; --cs-track-muted: #6a5f55; --cs-track-line: rgba(53, 40, 29, .1); } body.cs-mobile-v1-active.cs-route-order-tracking #cs-mobile-v1-page-stage { background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(181, 138, 74, .1), transparent 55%), linear-gradient(180deg, #f8f3ec 0%, #eee4d9 42%, #f7f1ea 100%) !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-page { min-height: 0 !important; background: transparent !important; padding-top: calc(var(--cs-mobile-header-height) + 38px + 12px) !important; padding-left: var(--cs-mobile-container) !important; padding-right: var(--cs-mobile-container) !important; padding-bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 36px) !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-shell { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border: 1px solid var(--cs-track-line) !important; border-radius: 28px !important; background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(181, 138, 74, .11), transparent 52%), linear-gradient(165deg, #fffdf9 0%, #f8f1e9 55%, #f3ebe2 100%) !important; box-shadow: 0 16px 40px rgba(51, 38, 27, .07) !important; overflow: hidden; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-hero, body.cs-mobile-v1-active.cs-route-order-tracking .tracking-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-hero { position: relative; padding: 24px 22px 16px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-hero::after { content: ""; position: absolute; right: -48px; top: -42px; width: 118px; height: 118px; border: 1px solid rgba(181, 138, 74, .15); border-radius: 50%; pointer-events: none; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-kicker { position: relative; z-index: 1; margin: 0 0 10px !important; font: 700 10px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .24em !important; color: #9a7344 !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-hero h1 { position: relative; z-index: 1; margin: 0 0 10px !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(1.95rem, 8.2vw, 2.4rem) !important; line-height: 1.02 !important; letter-spacing: -.028em !important; color: var(--cs-track-ink) !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-lede { position: relative; z-index: 1; max-width: 34ch !important; margin: 0 !important; font: 500 13px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-track-muted) !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-trust { position: relative; z-index: 1; margin: 12px 0 0 !important; gap: 6px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-trust li { min-height: 30px !important; padding: 0 10px !important; background: rgba(255, 253, 249, .72) !important; border-color: rgba(53, 40, 29, .09) !important; font-size: 10px !important; font-weight: 650 !important; color: #5f554c !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-note { position: relative; z-index: 1; margin-top: 12px !important; padding-top: 0 !important; border-top: 0 !important; font: 500 11.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #85786c !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-card { padding: 0 22px 22px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-card-head { margin: 0 0 14px !important; padding-top: 16px !important; border-top: 1px solid rgba(53, 40, 29, .09); } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-card-head strong { font: 600 1.35rem/1.15 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; color: var(--cs-track-ink) !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-card-head span { margin-top: 5px !important; font: 500 12.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-form { gap: 14px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field { gap: 7px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field label { font: 700 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .18em !important; color: #7a6f64 !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field input { height: 48px !important; width: 100% !important; border: 1px solid rgba(53, 40, 29, .13) !important; border-radius: 14px !important; background: rgba(255, 253, 249, .92) !important; padding: 0 15px !important; font: 500 16px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-track-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field input::placeholder { color: #a89a8c !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field input:focus { border-color: var(--cs-track-gold) !important; box-shadow: 0 0 0 4px rgba(181, 138, 74, .15) !important; background: #fff !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field input:-webkit-autofill, body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field input:-webkit-autofill:hover, body.cs-mobile-v1-active.cs-route-order-tracking .tracking-field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--cs-track-ink) !important; box-shadow: 0 0 0 1000px #fffdf9 inset !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-btn { min-height: 50px !important; margin-top: 2px; border-radius: 999px !important; background: var(--cs-track-ink) !important; color: #fffdf9 !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .05em !important; box-shadow: 0 10px 24px rgba(23, 18, 13, .16); } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-btn:active { transform: scale(.985); } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-btn.secondary { background: rgba(255, 253, 249, .92) !important; color: var(--cs-track-ink) !important; border: 1px solid rgba(53, 40, 29, .14) !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-status { min-height: 18px !important; font: 500 12.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-result { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(53, 40, 29, .09); gap: 12px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-summary { border: 1px solid rgba(53, 40, 29, .1) !important; border-radius: 20px !important; background: rgba(255, 253, 249, .88) !important; padding: 16px !important; gap: 11px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-summary-row { gap: 12px !important; padding-bottom: 10px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-summary-row span { font-size: 9.5px !important; letter-spacing: .14em !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-summary-row strong { font-size: 13px !important; word-break: break-word; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-items { gap: 8px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-item { grid-template-columns: 52px 1fr auto !important; gap: 11px !important; padding: 11px !important; border-radius: 16px !important; background: rgba(255, 253, 249, .9) !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-item img { width: 52px !important; height: 52px !important; } body.cs-mobile-v1-active.cs-route-order-tracking .tracking-item b { grid-column: auto !important; } /* ============================================================ CART SHEET — premium Sephora / Rhode grade composition ============================================================ */ .cs-mobile-v1-sheet--cart { max-height: min(90dvh, 780px); border-radius: 32px 32px 0 0; background: radial-gradient(circle at 100% 0%, rgba(181,138,74,.10), transparent 42%), linear-gradient(180deg, #fffdf9 0%, #f8f0e7 48%, #f3ebe1 100%); box-shadow: 0 -28px 80px rgba(28, 20, 14, .22); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; } .cs-mobile-v1-sheet--cart .cs-mobile-v1-sheet-grip { top: 10px; width: 42px; height: 4px; background: rgba(42, 32, 22, .18); } .cs-mobile-v1-cart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 28px 20px 14px; border-bottom: 1px solid rgba(42, 32, 22, .07); } .cs-mobile-v1-cart-head__copy { display: grid; gap: 4px; min-width: 0; } .cs-mobile-v1-cart-kicker { font: 800 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a2835d; } .cs-mobile-v1-cart-title { font: 500 clamp(30px, 8vw, 38px)/.92 "Cormorant Garamond", Georgia, serif; letter-spacing: -.03em; color: #17120d; } .cs-mobile-v1-cart-count { justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(26, 21, 16, .06); color: #6f6358; font: 750 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; font-style: normal; letter-spacing: .04em; } .cs-mobile-v1-cart-close { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(42, 32, 22, .12); background: rgba(255, 253, 249, .92); color: #17120d; display: inline-grid; place-items: center; box-shadow: 0 8px 20px rgba(28, 20, 14, .06); flex: 0 0 auto; } .cs-mobile-v1-cart-close svg { width: 16px; height: 16px; } .cs-mobile-v1-sheet-body--cart { flex: 1 1 auto; max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; } .cs-mobile-v1-cart-studio { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .cs-mobile-v1-cart-items { display: grid; gap: 0; padding: 6px 20px 8px; overflow: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; } .cs-mobile-v1-cart-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px 0; border: 0; border-bottom: 1px solid rgba(42, 32, 22, .08); background: transparent; border-radius: 0; animation: csCartItemIn .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--cs-cart-i, 0) * 45ms); } .cs-mobile-v1-cart-item:last-child { border-bottom: 0; } @keyframes csCartItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .cs-mobile-v1-cart-item__media { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 20px; background: linear-gradient(160deg, #fffdf9, #f3e8dc); overflow: hidden; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); } .cs-mobile-v1-cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; background: transparent; border-radius: 0; } .cs-mobile-v1-cart-item__body { min-width: 0; display: grid; gap: 12px; align-content: start; } .cs-mobile-v1-cart-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .cs-mobile-v1-cart-item__copy { min-width: 0; display: grid; gap: 4px; } .cs-mobile-v1-cart-item__copy small { font: 800 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a2835d; } .cs-mobile-v1-cart-item__copy strong { font: 650 14px/1.32 "Plus Jakarta Sans", system-ui, sans-serif; color: #17120d; letter-spacing: -.01em; } .cs-mobile-v1-cart-item__price { flex: 0 0 auto; font: 800 14px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; color: #17120d; white-space: nowrap; } .cs-mobile-v1-cart-item__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cs-mobile-v1-qty { display: inline-flex; align-items: center; gap: 0; margin-top: 0; border: 1px solid rgba(42, 32, 22, .12); border-radius: 999px; overflow: hidden; background: #fffdf9; box-shadow: 0 4px 12px rgba(28, 20, 14, .04); } .cs-mobile-v1-qty button { width: 36px; height: 36px; border: 0; background: transparent; color: #17120d; font: 700 16px/1 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-v1-qty button:active { background: rgba(26, 21, 16, .05); } .cs-mobile-v1-qty span { min-width: 28px; text-align: center; font: 800 13px/1 "Plus Jakarta Sans", system-ui, sans-serif; color: #17120d; } .cs-mobile-v1-cart-remove { border: 0; background: transparent; color: #8a7463; font: 750 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; cursor: pointer; } .cs-mobile-v1-cart-dock { margin-top: auto; padding: 14px 20px calc(16px + var(--cs-mobile-safe-bottom)); border-top: 1px solid rgba(42, 32, 22, .08); background: linear-gradient(180deg, rgba(255,253,249,.55), rgba(248,240,231,.96) 18%, #f4ebe1); display: grid; gap: 12px; box-shadow: 0 -18px 40px rgba(28, 20, 14, .06); } .cs-mobile-v1-cart-shipnote { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 253, 249, .72); border: 1px solid rgba(181, 138, 74, .18); color: #6f6358; font: 650 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-v1-cart-shipnote span { width: 7px; height: 7px; border-radius: 50%; background: #b58a4a; box-shadow: 0 0 0 4px rgba(181, 138, 74, .14); flex: 0 0 auto; } .cs-mobile-v1-cart-shipnote.is-free { border-color: rgba(31, 107, 74, .16); color: #2f6b4f; } .cs-mobile-v1-cart-shipnote.is-free span { background: #2f6b4f; box-shadow: 0 0 0 4px rgba(47, 107, 79, .12); } .cs-mobile-v1-cart-shipnote strong { color: #17120d; font-weight: 800; } .cs-mobile-v1-cart-coupon { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; } .cs-mobile-v1-cart-coupon label { margin: 0; font: 800 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8a7868; } .cs-mobile-v1-cart-coupon__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .cs-mobile-v1-cart-coupon input { min-height: 46px; border-radius: 999px; border: 1px solid rgba(42, 32, 22, .12); background: #fffdf9; padding: 0 16px; font: 650 13px/1 "Plus Jakarta Sans", sans-serif; color: #1a1510; text-transform: uppercase; } .cs-mobile-v1-cart-coupon input:focus { outline: 0; border-color: rgba(181, 138, 74, .55); box-shadow: 0 0 0 3px rgba(181, 138, 74, .14); } .cs-mobile-v1-cart-coupon__apply { min-height: 46px; min-width: 92px; padding: 0 16px; border-radius: 999px; border: 1px solid #17120d; background: #17120d; color: #fffdf9; font: 800 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .cs-mobile-v1-cart-coupon__status { min-height: 14px; font-size: 12px; font-weight: 700; line-height: 1.4; color: #74675d; } .cs-mobile-v1-cart-coupon__status.is-error { color: #8a3b2f; } .cs-mobile-v1-cart-coupon__status.is-success { color: #1f6b4a; } .cs-mobile-v1-cart-coupon__status.is-pending { color: #8a7358; } .cs-mobile-v1-cart-coupon__clear { justify-self: start; border: 0; background: transparent; color: #8a3b2f; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer; } .cs-mobile-v1-cart-totals { display: grid; gap: 8px; padding-top: 2px; } .cs-mobile-v1-cart-summary-row { display: flex; justify-content: space-between; gap: 16px; color: #6f6358; font: 650 13px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-v1-cart-summary-row strong { color: #17120d; font-weight: 800; } .cs-mobile-v1-cart-summary-row.is-discount strong { color: #1f6b4a; } .cs-mobile-v1-cart-summary-row.is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(42, 32, 22, .1); color: #17120d; font-size: 14px; } .cs-mobile-v1-cart-summary-row.is-total strong { font-size: 18px; letter-spacing: -.02em; } .cs-mobile-v1-cart-cta { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px; background: #17120d; color: #fffdf9 !important; text-decoration: none !important; font: 800 12px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 16px 34px rgba(23, 18, 13, .22); transition: transform .18s ease, box-shadow .18s ease; } .cs-mobile-v1-cart-cta:active { transform: scale(.985); box-shadow: 0 10px 22px rgba(23, 18, 13, .18); } .cs-mobile-v1-cart-trust { margin: 0; text-align: center; color: #8a7868; font: 650 11px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .02em; } .cs-mobile-v1-cart-empty { margin: 28px 20px 36px; padding: 36px 22px; text-align: center; border-radius: 28px; background: linear-gradient(160deg, rgba(255,253,249,.95), rgba(245,236,226,.88)); border: 1px solid rgba(42, 32, 22, .08); display: grid; gap: 10px; justify-items: center; } .cs-mobile-v1-cart-empty__mark { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(26, 21, 16, .05); color: #17120d; margin-bottom: 4px; } .cs-mobile-v1-cart-empty__mark svg { width: 26px; height: 26px; } .cs-mobile-v1-cart-empty strong { font: 500 28px/.95 "Cormorant Garamond", Georgia, serif; letter-spacing: -.03em; color: #17120d; } .cs-mobile-v1-cart-empty p { margin: 0 0 8px; max-width: 26ch; color: #74675d; font: 500 13px/1.55 "Plus Jakarta Sans", system-ui, sans-serif; } body.cs-mobile-cart-open .cs-mobile-v1-backdrop { background: rgba(22, 16, 12, .48); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cs-mobile-v1-sheet--cart { transition: transform .4s cubic-bezier(.22, 1, .36, 1); } /* Checkout — premium mobile (Sephora / Rhode) */ body.cs-checkout-mobile { --cs-co-ink: #1a1510; --cs-co-muted: #74675d; --cs-co-gold: #b58a4a; --cs-co-surface: #fffdf9; --cs-co-soft: #f8f0e7; --cs-co-line: rgba(26, 21, 16, .1); } body.cs-checkout-mobile .cs-checkout-page { padding: 10px var(--cs-mobile-container) calc(var(--cs-mobile-safe-bottom) + 28px) !important; background: transparent !important; } body.cs-checkout-mobile .cs-checkout-shell { width: 100% !important; max-width: 100% !important; padding: 0 !important; } body.cs-checkout-mobile .cs-checkout-topline { display: grid !important; gap: 12px !important; margin-bottom: 16px !important; padding: 4px 2px 0 !important; } body.cs-checkout-mobile .cs-checkout-eyebrow { margin: 0 0 6px !important; color: var(--cs-co-gold) !important; font: 700 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase !important; } body.cs-checkout-mobile .cs-checkout-title h1 { font-size: clamp(34px, 9vw, 42px) !important; line-height: .96 !important; letter-spacing: -.015em !important; font-weight: 400 !important; } body.cs-checkout-mobile .cs-checkout-title p { max-width: 26ch !important; margin-top: 10px !important; color: var(--cs-co-muted) !important; font: 500 13.5px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-checkout-mobile .cs-checkout-secure { justify-self: start !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cs-co-muted) !important; font: 650 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; } body.cs-checkout-mobile .cs-checkout-secure .cs-checkout-icon { width: 14px !important; height: 14px !important; color: var(--cs-co-gold) !important; } body.cs-checkout-mobile .cs-mobile-v1-checkout-note { display: none !important; } body.cs-checkout-mobile .cs-checkout-grid { display: block !important; } body.cs-checkout-mobile .cs-checkout-main, body.cs-checkout-mobile .cs-checkout-summary { width: 100% !important; max-width: 100% !important; } body.cs-checkout-mobile .cs-checkout-summary { position: static !important; margin-top: 14px !important; display: grid !important; gap: 12px !important; } body.cs-checkout-mobile .cs-checkout-stepper { margin: 4px 0 18px !important; padding: 2px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.cs-checkout-mobile .cs-checkout-stepper__rail { top: 13px !important; left: 12% !important; right: 12% !important; height: 1px !important; background: rgba(26, 21, 16, .12) !important; } body.cs-checkout-mobile .cs-checkout-stepper__fill { background: linear-gradient(90deg, #1a1510, #b58a4a) !important; transition: transform .55s cubic-bezier(.22, 1, .36, 1) !important; } body.cs-checkout-mobile .cs-checkout-stepper__steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; } body.cs-checkout-mobile .cs-checkout-step { min-height: 0 !important; min-width: 0 !important; gap: 8px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-checkout-mobile .cs-checkout-step.is-active { background: transparent !important; box-shadow: none !important; } body.cs-checkout-mobile .cs-checkout-step__dot { width: 26px !important; height: 26px !important; border-radius: 999px !important; box-shadow: 0 0 0 4px #fffdf9 !important; } body.cs-checkout-mobile .cs-checkout-step.is-active .cs-checkout-step__dot { box-shadow: 0 0 0 4px #fffdf9, 0 0 0 5px rgba(181, 138, 74, .45) !important; } body.cs-checkout-mobile .cs-checkout-step strong { font-size: 9px !important; letter-spacing: .1em !important; } body.cs-checkout-mobile .cs-checkout-summary-card, body.cs-checkout-mobile .cs-checkout-card, body.cs-checkout-mobile .cs-checkout-section, body.cs-checkout-mobile .cs-checkout-empty--commerce { border-radius: 16px !important; box-shadow: none !important; } body.cs-checkout-mobile .cs-checkout-empty--commerce { min-height: 0 !important; padding: 36px 20px !important; gap: 10px !important; } body.cs-checkout-mobile .cs-checkout-empty-mark { width: 52px !important; height: 52px !important; } body.cs-checkout-mobile .cs-checkout-input, body.cs-checkout-mobile input, body.cs-checkout-mobile select, body.cs-checkout-mobile textarea { min-height: 48px !important; width: 100% !important; font-size: 16px !important; border-radius: 12px !important; } body.cs-checkout-mobile .cs-checkout-primary, body.cs-checkout-mobile #csCheckoutAction { min-height: 52px !important; width: 100% !important; border-radius: 999px !important; letter-spacing: .08em !important; } body.cs-checkout-mobile .cs-checkout-payment-card, body.cs-checkout-mobile .bank-account-card, body.cs-checkout-mobile [data-payment-method] { min-height: 56px; border-radius: 14px !important; } body.cs-checkout-mobile .cs-checkout-trust-strip { display: none !important; } body.cs-checkout-mobile .cs-checkout-summary-toggle { display: none !important; } body.cs-checkout-mobile .cs-checkout-shell { padding-bottom: 36px !important; } body.cs-checkout-mobile .cs-checkout-summary-cta { display: grid !important; gap: 10px !important; margin: 16px 0 14px !important; padding-top: 4px !important; } body.cs-checkout-mobile .cs-checkout-summary-cta .cs-checkout-primary { width: 100% !important; min-height: 54px !important; } body.cs-checkout-mobile .cs-checkout-summary-cta .cs-checkout-mini-note { margin: 0 !important; color: rgba(26, 21, 16, .55) !important; font-size: 11.5px !important; text-align: center !important; } body.cs-checkout-mobile .cs-checkout-summary-cta .cs-checkout-status:empty { display: none !important; } body.cs-checkout-mobile .cs-checkout-summary-card--action { display: none !important; } /* ============================================================ ACCOUNT — premium mobile experience (Sephora / Rhode / Apple grade) Scoped to body.cs-route-account inside max-width:767px. Overrides the desktop-first account-premium.css collapse rules with a cohesive, readable, conversion-focused mobile layout. ============================================================ */ body.cs-route-account { --cs-acc-gold: #b58a4a; --cs-acc-gold-deep: #8a663c; --cs-acc-ink: #17130f; --cs-acc-ink-soft: #5f554c; --cs-acc-muted: #8a7d6f; --cs-acc-surface: #fffdf9; --cs-acc-surface-soft: #f6efe4; --cs-acc-line: rgba(42, 32, 22, .11); --cs-acc-line-strong: rgba(42, 32, 22, .2); --cs-acc-shadow: 0 14px 34px rgba(46, 34, 22, .07); --cs-acc-shadow-soft: 0 8px 22px rgba(46, 34, 22, .05); --cs-acc-radius: 20px; } body.cs-route-account .cs-account-shell { padding-top: 6px !important; background: transparent !important; } body.cs-route-account .cs-account-layout { display: block !important; padding: 12px var(--cs-mobile-container) 6px !important; } body.cs-route-account .cs-account-layout[hidden], body.cs-route-account #accountApp[data-state="loading"] .cs-account-layout, body.cs-route-account #accountApp[data-state="error"] .cs-account-layout { display: none !important; } body.cs-route-account .cs-account-loading[hidden] { display: none !important; } body.cs-route-account .cs-account-sidebar { width: 100% !important; position: static !important; margin: 0 0 18px !important; display: grid !important; gap: 14px !important; } body.cs-route-account .cs-account-sidebar[hidden], body.cs-route-account #accountApp[data-state="auth"] .cs-account-sidebar, body.cs-account-auth .cs-account-sidebar { display: none !important; } body.cs-route-account .cs-account-content { display: grid !important; gap: 16px !important; min-width: 0 !important; } body.cs-route-account .cs-panel { width: 100% !important; max-width: 100% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* Guest auth gate — only logged-out account surface */ body.cs-route-account #accountApp[data-state="auth"] .cs-account-layout, body.cs-account-auth .cs-account-layout { padding-top: 18px !important; padding-bottom: 28px !important; } body.cs-route-account .cs-account-gate { display: grid !important; gap: 14px !important; margin: 0 !important; padding: 28px 22px 24px !important; border: 1px solid var(--cs-acc-line) !important; border-radius: 24px !important; background: radial-gradient(circle at 12% 0%, rgba(181, 138, 74, .12), transparent 42%), linear-gradient(180deg, #fffdf9 0%, #f7f0e6 100%) !important; box-shadow: var(--cs-acc-shadow-soft) !important; text-align: left !important; } body.cs-route-account .cs-account-gate__kicker { margin: 0 !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-account-gate h1, body.cs-route-account .cs-account-gate #csAccountGateTitle { margin: 0 !important; max-width: 12ch !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(30px, 8.4vw, 36px) !important; line-height: 1.05 !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-account-gate__lede, body.cs-route-account .cs-account-gate > p { margin: 0 !important; max-width: 34ch !important; color: var(--cs-acc-ink-soft) !important; font: 500 14px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-gate-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 8px 0 0 !important; } body.cs-route-account .cs-gate-actions .cs-pill-btn { width: 100% !important; min-height: 48px !important; justify-content: center !important; border-radius: 999px !important; font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; } body.cs-route-account .cs-gate-actions .cs-pill-btn--quiet { background: transparent !important; border-color: transparent !important; color: var(--cs-acc-ink-soft) !important; min-height: 40px !important; text-decoration: underline !important; text-underline-offset: 3px !important; letter-spacing: .04em !important; text-transform: none !important; font-weight: 600 !important; } body.cs-route-account .cs-account-gate__benefits { list-style: none !important; margin: 8px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--cs-acc-line) !important; display: grid !important; gap: 10px !important; } body.cs-route-account .cs-account-gate__benefits li { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; color: var(--cs-acc-ink-soft) !important; font: 600 12.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-account-gate__benefits li span { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--cs-acc-gold) !important; flex: 0 0 auto !important; } /* Profile identity card — premium (Apple / Sephora / Rhode grade) */ body.cs-route-account .cs-profile-card { position: relative !important; display: grid !important; gap: 0 !important; padding: 0 !important; border-radius: 24px !important; border: 1px solid var(--cs-acc-line) !important; background: radial-gradient(120% 90% at 88% -10%, rgba(181, 138, 74, .16), rgba(181, 138, 74, 0) 58%), linear-gradient(158deg, #fffefb 0%, #fdf7ee 46%, #f7efe2 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 42px rgba(46, 34, 22, .09) !important; overflow: hidden !important; isolation: isolate !important; } body.cs-route-account .cs-profile-card__aura { position: absolute !important; inset: auto -30% 40% auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(197, 158, 106, .22), rgba(197, 158, 106, 0) 70%); z-index: 0; pointer-events: none; } body.cs-route-account .cs-profile-card__head { position: relative; z-index: 1; display: grid !important; grid-template-columns: 62px minmax(0, 1fr) !important; align-items: center !important; gap: 15px !important; padding: 18px 18px 16px !important; } body.cs-route-account .cs-profile-info__top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 1px !important; } body.cs-route-account .cs-profile-avatar { position: relative !important; width: 62px !important; height: 62px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: linear-gradient(145deg, #f8f1e7 0%, #efe2d0 55%, #e5d4bc 100%) !important; color: #5a4330 !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), 0 0 0 3px #fffdf9, 0 0 0 4.5px rgba(181, 138, 74, .28), 0 8px 18px rgba(90, 64, 34, .14) !important; transition: background .28s ease, color .28s ease, box-shadow .28s ease !important; } body.cs-route-account .cs-profile-avatar--essential { background: linear-gradient(145deg, #f8f1e7 0%, #efe2d0 55%, #e5d4bc 100%) !important; color: #5a4330 !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), 0 0 0 3px #fffdf9, 0 0 0 4.5px rgba(181, 138, 74, .26), 0 8px 18px rgba(90, 64, 34, .12) !important; } body.cs-route-account .cs-profile-avatar--signature { background: linear-gradient(145deg, #f0d78a 0%, #d4a85a 48%, #b58a4a 100%) !important; color: #2f2112 !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 0 0 3px #fffdf9, 0 0 0 4.5px rgba(181, 138, 74, .48), 0 8px 18px rgba(120, 80, 30, .22) !important; } body.cs-route-account .cs-profile-avatar--elite { background: linear-gradient(145deg, #5a2d78 0%, #3b1a55 52%, #1f0d32 100%) !important; color: #f4ebf8 !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .16), 0 0 0 3px #fffdf9, 0 0 0 4.5px rgba(90, 45, 120, .5), 0 8px 18px rgba(40, 16, 60, .28) !important; } body.cs-route-account .cs-profile-avatar--elite .cs-profile-avatar__badge { background: linear-gradient(150deg, #1a0d28, #3b1a55) !important; box-shadow: 0 0 0 2.5px #f4ebf8, 0 3px 8px rgba(31, 13, 50, .4); } body.cs-route-account .cs-profile-avatar--elite .cs-profile-avatar__badge svg { color: #e8c9f2; } body.cs-route-account .cs-profile-avatar--signature .cs-profile-avatar__badge { background: linear-gradient(150deg, #2a1c0e, #5a3f1c) !important; box-shadow: 0 0 0 2.5px #f7edd8, 0 3px 8px rgba(90, 64, 34, .35); } body.cs-route-account .cs-profile-avatar--signature .cs-profile-avatar__badge svg { color: #f0d78a; } body.cs-route-account .cs-profile-avatar__text { font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: .02em !important; line-height: 1 !important; color: inherit !important; } body.cs-route-account .cs-profile-avatar--essential .cs-profile-avatar__text { color: #5a4330 !important; } body.cs-route-account .cs-profile-avatar--signature .cs-profile-avatar__text { color: #2f2112 !important; } body.cs-route-account .cs-profile-avatar--elite .cs-profile-avatar__text { color: #f4ebf8 !important; } body.cs-route-account .cs-profile-avatar__badge { position: absolute !important; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, #1d1712, #3a2c1c) !important; box-shadow: 0 0 0 2.5px #fdf7ee, 0 3px 8px rgba(29, 21, 14, .35); } body.cs-route-account .cs-profile-avatar__badge svg { width: 13px; height: 13px; color: #e7c894; } body.cs-route-account .cs-profile-info { min-width: 0 !important; display: grid !important; gap: 3px !important; text-align: left !important; } body.cs-route-account .cs-profile-kicker { font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-profile-info strong { display: block !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-size: 24px !important; line-height: 1.08 !important; letter-spacing: -.01em !important; color: var(--cs-acc-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-route-account .cs-profile-info span { display: block !important; font: 500 12.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-route-account .cs-profile-tier { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 6px 11px 6px 9px !important; border-radius: 999px !important; background: linear-gradient(150deg, #241a10, #4a3720) !important; color: #f0dcb6 !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .05em !important; box-shadow: 0 4px 12px rgba(45, 32, 18, .22) !important; white-space: nowrap; } body.cs-route-account .cs-profile-tier svg { width: 12px; height: 12px; color: #e7c894; } body.cs-route-account .cs-profile-tier em { font-style: normal !important; } body.cs-route-account .cs-profile-card__meta { position: relative; z-index: 1; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; padding: 13px 18px 15px !important; margin-top: 2px !important; border-top: 1px solid rgba(181, 138, 74, .16) !important; background: linear-gradient(180deg, rgba(255, 253, 249, 0), rgba(181, 138, 74, .05)) !important; } body.cs-route-account .cs-profile-meta-item { min-width: 0 !important; display: grid !important; gap: 3px !important; text-align: left !important; } body.cs-route-account .cs-profile-meta-item:last-child { text-align: right !important; } body.cs-route-account .cs-profile-meta-item b { font: 700 16px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-route-account .cs-profile-meta-item small { font: 600 9.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-profile-meta-divider { width: 1px; height: 30px; background: rgba(42, 32, 22, .12); margin: 0 14px; } /* Membership hub — Sephora/Rhode list destinations (v5) */ body.cs-route-account .cs-account-hub { display: grid !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } body.cs-route-account .cs-account-hub__head { display: grid !important; gap: 4px !important; padding: 2px 4px 0 !important; } body.cs-route-account .cs-account-hub__kicker { margin: 0 !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-account-hub__sub { display: block !important; margin: 0 !important; font: 500 12.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-account-hub__grid, body.cs-route-account .cs-account-hub__list { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border-radius: 22px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: linear-gradient(180deg, rgba(255,254,251,.99) 0%, rgba(252,246,238,.96) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 14px 36px rgba(46, 34, 22, .06) !important; overflow: hidden !important; } body.cs-route-account .cs-account-hub__item { position: relative !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto 18px !important; align-items: center !important; gap: 12px !important; min-height: 68px !important; padding: 12px 14px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(42, 32, 22, .06) !important; background: transparent !important; box-shadow: none !important; color: var(--cs-acc-ink) !important; text-decoration: none !important; text-align: left !important; transition: background .18s ease, transform .16s cubic-bezier(.22,1,.36,1) !important; animation: csAccHubIn .42s cubic-bezier(.22,1,.36,1) both; } body.cs-route-account .cs-account-hub__item:last-child { border-bottom: 0 !important; } body.cs-route-account .cs-account-hub__item:nth-child(1) { animation-delay: .02s; } body.cs-route-account .cs-account-hub__item:nth-child(2) { animation-delay: .05s; } body.cs-route-account .cs-account-hub__item:nth-child(3) { animation-delay: .08s; } body.cs-route-account .cs-account-hub__item:nth-child(4) { animation-delay: .11s; } body.cs-route-account .cs-account-hub__item:nth-child(5) { animation-delay: .14s; } body.cs-route-account .cs-account-hub__item:nth-child(6) { animation-delay: .17s; } body.cs-route-account .cs-account-hub__item:nth-child(7) { animation-delay: .2s; } body.cs-route-account .cs-account-hub__item:nth-child(8) { animation-delay: .23s; } @keyframes csAccHubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-account-hub__item:active { transform: scale(.995) !important; background: rgba(181, 138, 74, .07) !important; } body.cs-route-account .cs-account-hub__item.is-active { background: linear-gradient(90deg, rgba(181, 138, 74, .1), rgba(181, 138, 74, .03)) !important; } body.cs-route-account .cs-account-hub__icon { width: 44px !important; height: 44px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; background: linear-gradient(160deg, #fffefb 0%, #efe3d2 100%) !important; color: #1a1510 !important; border: 1px solid rgba(42, 32, 22, .12) !important; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 6px 14px rgba(90, 64, 34, .1) !important; } body.cs-route-account .cs-account-hub__icon .cs-hub-svg, body.cs-route-account .cs-account-hub__icon svg { width: 21px !important; height: 21px !important; display: block !important; color: #1a1510 !important; stroke: #1a1510 !important; stroke-width: 1.9 !important; fill: none !important; } body.cs-route-account .cs-account-hub__icon img { display: none !important; /* never use opaque img icons in hub */ } body.cs-route-account .cs-account-hub__copy { display: grid !important; gap: 3px !important; min-width: 0 !important; } body.cs-route-account .cs-account-hub__label { font: 700 14px/1.15 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.01em !important; color: var(--cs-acc-ink) !important; min-width: 0 !important; } body.cs-route-account .cs-account-hub__hint { display: block !important; font: 500 11.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-account-hub__chev { width: 7px; height: 7px; border-right: 1.7px solid rgba(42,32,22,.32); border-bottom: 1.7px solid rgba(42,32,22,.32); transform: rotate(-45deg); justify-self: end; opacity: .7; } body.cs-route-account .cs-account-hub__badge { position: static !important; top: auto; right: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #1a1510 !important; color: #fffaf3 !important; font: 800 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .02em; } body.cs-route-account .cs-account-hub__badge[hidden] { display: none !important; } /* Profile v5 — greeting as hero on mobile, full name secondary */ body.cs-route-account .cs-profile-card--v5 .cs-profile-hello { display: block !important; margin: 0 !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-size: 26px !important; line-height: 1.05 !important; letter-spacing: -.015em !important; color: var(--cs-acc-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-route-account .cs-profile-card--v5 .cs-profile-display-name { display: block !important; margin-top: 3px !important; font: 600 12px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: #6f6358 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-route-account .cs-profile-card--v5 .cs-profile-info > #accountEmail { margin-top: 1px !important; } body.cs-route-account .cs-profile-card__progress, body.cs-route-account .cs-profile-meter { position: relative !important; z-index: 1 !important; display: grid !important; gap: 9px !important; padding: 2px 18px 18px !important; cursor: pointer !important; --cs-meter-fill: 0%; } body.cs-route-account .cs-profile-meter__head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; } body.cs-route-account .cs-profile-meter__kicker { font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #8d663c !important; } body.cs-route-account .cs-profile-meter__pct { font: 800 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.02em !important; color: #17130f !important; font-variant-numeric: tabular-nums !important; } body.cs-route-account .cs-profile-card__progress-track, body.cs-route-account .cs-profile-meter__track { position: relative !important; height: 12px !important; min-height: 12px !important; border-radius: 999px !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } body.cs-route-account .cs-profile-meter__rail, body.cs-route-account .cs-profile-card__progress-track > span, body.cs-route-account .cs-profile-meter__fill, body.cs-route-account .cs-profile-card__progress-fill, body.cs-route-account .cs-profile-meter__sheen, body.cs-route-account .cs-profile-meter__glow, body.cs-route-account .cs-profile-meter__tip { margin: 0 !important; } body.cs-route-account .cs-profile-meter__rail { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(255, 253, 249, .55), rgba(255, 253, 249, 0) 45%), linear-gradient(90deg, rgba(42, 32, 22, .08), rgba(42, 32, 22, .12)) !important; box-shadow: inset 0 1px 2px rgba(42, 32, 22, .12), inset 0 -1px 0 rgba(255, 255, 255, .35) !important; overflow: hidden !important; } body.cs-route-account .cs-profile-card__progress-track > span.cs-profile-meter__fill, body.cs-route-account .cs-profile-meter__fill, body.cs-route-account .cs-profile-card__progress-fill { position: absolute !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: 0 !important; width: 0 !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; max-height: 100% !important; display: block !important; border-radius: inherit !important; overflow: visible !important; background: linear-gradient(180deg, rgba(255, 248, 232, .55) 0%, rgba(255, 248, 232, 0) 42%), linear-gradient(90deg, #7a5528 0%, #b58a4a 38%, #d4b078 72%, #f0d7a8 100%) !important; box-shadow: 0 0 0 1px rgba(154, 111, 53, .18), 0 4px 14px rgba(181, 138, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .45) !important; transition: width 1.15s cubic-bezier(.16, 1, .3, 1) !important; will-change: width; } body.cs-route-account .cs-profile-meter.is-animated .cs-profile-meter__fill { width: var(--cs-meter-fill, 0%) !important; } body.cs-route-account .cs-profile-meter__sheen { position: absolute !important; inset: 0 !important; border-radius: inherit !important; overflow: hidden !important; pointer-events: none !important; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) !important; background-size: 220% 100% !important; opacity: .0 !important; } body.cs-route-account .cs-profile-meter.is-animated .cs-profile-meter__sheen { animation: csMeterSheen 1.8s cubic-bezier(.22, 1, .36, 1) .35s 1 both !important; } body.cs-route-account .cs-profile-meter__glow { position: absolute !important; right: -2px !important; top: 50% !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; transform: translate(30%, -50%) !important; background: radial-gradient(circle, rgba(240, 215, 168, .75) 0%, rgba(181, 138, 74, .2) 45%, transparent 72%) !important; pointer-events: none !important; filter: blur(.2px) !important; } body.cs-route-account .cs-profile-meter__tip { position: absolute !important; right: 0 !important; top: 50% !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; transform: translate(35%, -50%) !important; background: radial-gradient(circle at 35% 30%, #fff8e8 0%, #e8c78a 42%, #8d663c 100%) !important; box-shadow: 0 0 0 2.5px #fdf7ee, 0 0 12px rgba(181, 138, 74, .55), 0 3px 8px rgba(42, 32, 22, .18) !important; pointer-events: none !important; } body.cs-route-account .cs-profile-meter:not(.is-animated) .cs-profile-meter__tip, body.cs-route-account .cs-profile-meter:not(.is-animated) .cs-profile-meter__glow { opacity: 0 !important; } body.cs-route-account .cs-profile-meter.is-animated .cs-profile-meter__tip, body.cs-route-account .cs-profile-meter.is-animated .cs-profile-meter__glow { opacity: 1 !important; transition: opacity .35s ease .55s !important; } body.cs-route-account .cs-profile-meter[style*="--cs-meter-fill:0%"] .cs-profile-meter__tip, body.cs-route-account .cs-profile-meter[style*="--cs-meter-fill:0%"] .cs-profile-meter__glow { display: none !important; } body.cs-route-account .cs-profile-card__progress-meta, body.cs-route-account .cs-profile-meter__meta { display: flex !important; justify-content: space-between !important; gap: 10px !important; margin: 2px 0 0 !important; font: 600 10.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .02em !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-profile-card__progress-meta span:first-child, body.cs-route-account .cs-profile-meter__meta span:first-child { color: var(--cs-acc-gold-deep) !important; text-transform: uppercase !important; letter-spacing: .08em !important; font-weight: 700 !important; } body.cs-route-account .cs-profile-card__progress-spend, body.cs-route-account .cs-profile-meter__spend { display: flex !important; justify-content: space-between !important; gap: 10px !important; margin: 0 !important; font: 700 12.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #17130f !important; font-variant-numeric: tabular-nums !important; } body.cs-route-account .cs-profile-card__progress-spend span:last-child, body.cs-route-account .cs-profile-meter__spend span:last-child { color: #8a7d6f !important; font-weight: 600 !important; } @keyframes csMeterSheen { from { opacity: 0; background-position: 120% 0; } 25% { opacity: .85; } to { opacity: 0; background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-profile-meter__fill { transition: none !important; } body.cs-route-account .cs-profile-meter.is-animated .cs-profile-meter__sheen { animation: none !important; opacity: 0 !important; } } /* Desktop-style horizontal pill nav hidden on mobile — hub replaces it */ body.cs-route-account .cs-account-nav { display: none !important; } /* Composition: profile → hub → content → help → logout */ body.cs-route-account .cs-account-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; } body.cs-route-account .cs-account-sidebar { display: contents !important; } body.cs-route-account .cs-profile-card { order: 1; width: 100%; margin: 0 !important; } body.cs-route-account .cs-account-hub { order: 2; width: 100%; } body.cs-route-account .cs-account-content { order: 3; width: 100%; } body.cs-route-account .cs-help-card { order: 4; width: 100%; margin: 4px 0 0 !important; } body.cs-route-account .cs-logout { order: 5; width: 100%; margin: 0 0 8px !important; } /* Drill-in: focus on the section (hide chrome clutter) */ body.cs-route-account.cs-account-drill .cs-profile-card, body.cs-route-account.cs-account-drill .cs-account-hub, body.cs-route-account.cs-account-drill .cs-help-card, body.cs-route-account.cs-account-drill .cs-logout { display: none !important; } body.cs-route-account.cs-account-drill .cs-account-sidebar { margin-bottom: 0 !important; gap: 0 !important; } body.cs-route-account .cs-panel-back { display: inline-flex !important; align-items: center !important; gap: 6px !important; min-height: 36px !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; color: var(--cs-acc-gold-deep) !important; font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; cursor: pointer !important; } body.cs-route-account .cs-panel-back svg { width: 18px; height: 18px; } body.cs-route-account:not(.cs-account-drill) .cs-panel-back { display: none !important; } body.cs-route-account .cs-tab-title--premium { display: grid !important; gap: 10px !important; margin: 0 0 16px !important; } body.cs-route-account .cs-tab-title--home .cs-panel-back, body.cs-route-account .cs-tab-title--desktop-only { display: none !important; } body.cs-route-account .cs-overview-module--desktop-only { display: none !important; } body.cs-route-account .cs-overview-more, body.cs-route-account .cs-overview-more--v2, body.cs-route-account .cs-overview-more--v3 { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 4px 0 10px !important; padding: 0 !important; border-radius: 22px !important; background: linear-gradient(165deg, #fffdf9 0%, #faf4ec 100%) !important; border: 1px solid rgba(42, 32, 22, .07) !important; box-shadow: 0 10px 28px rgba(42, 32, 22, .055) !important; overflow: hidden !important; } body.cs-route-account .cs-overview-more__head { display: flex !important; align-items: center !important; padding: 14px 16px 8px !important; border-bottom: 1px solid rgba(42, 32, 22, .06) !important; } body.cs-route-account .cs-overview-more__head span { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-route-account .cs-overview-more__list { display: grid !important; } body.cs-route-account .cs-overview-more a, body.cs-route-account .cs-overview-more__link { position: relative !important; min-height: 64px !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; justify-content: stretch !important; padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(42, 32, 22, .055) !important; background: transparent !important; color: var(--cs-acc-ink) !important; font: inherit !important; text-align: left !important; text-decoration: none !important; animation: csMoreReveal .44s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-more-i, 0) * 50ms) !important; transition: background .18s ease !important; } body.cs-route-account .cs-overview-more__link:last-child { border-bottom: 0 !important; } body.cs-route-account .cs-overview-more__link:active { background: rgba(247, 239, 228, .7) !important; } body.cs-route-account .cs-overview-more__link:active .cs-overview-more__icon { transform: scale(.96) !important; } body.cs-route-account .cs-overview-more__link:active .cs-more-chev { transform: translateX(2px) !important; color: #8d663c !important; } @keyframes csMoreReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-overview-more__icon { width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; color: #8d663c !important; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .98), transparent 52%), linear-gradient(155deg, #f8f1e7 0%, #eadfce 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(181, 138, 74, .12), 0 6px 14px rgba(141, 102, 60, .08) !important; transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease !important; } body.cs-route-account .cs-overview-more__icon .cs-hub-svg, body.cs-route-account .cs-overview-more__icon .cs-more-svg { width: 20px !important; height: 20px !important; display: block !important; } body.cs-route-account .cs-overview-more__copy { display: grid !important; gap: 3px !important; min-width: 0 !important; } body.cs-route-account .cs-overview-more__label { font: 700 13.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.01em !important; } body.cs-route-account .cs-overview-more__hint { font: 500 11.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-overview-more__trail { display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.cs-route-account .cs-overview-more__badge { display: inline-grid !important; place-items: center !important; min-width: 22px !important; height: 22px !important; padding: 0 6px !important; border-radius: 999px !important; background: #1a1510 !important; color: #fffaf3 !important; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; box-shadow: 0 4px 10px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-overview-more__chev { width: 8px !important; height: 8px !important; border-right: 1.6px solid rgba(42, 32, 22, .28) !important; border-bottom: 1.6px solid rgba(42, 32, 22, .28) !important; transform: rotate(-45deg) !important; margin-right: 4px !important; } body.cs-route-account .cs-more-chev { width: 14px !important; height: 14px !important; color: rgba(42, 32, 22, .28) !important; transition: transform .18s ease, color .18s ease !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-overview-more__link { animation: none !important; } body.cs-route-account .cs-overview-more__icon, body.cs-route-account .cs-more-chev { transition: none !important; } } body.cs-route-account .cs-stat--link { text-decoration: none !important; color: inherit !important; } body.cs-route-account .cs-stat-grid--pulse { margin: 0 0 4px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 7px !important; } body.cs-route-account .cs-stat-grid--pulse .cs-stat { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; min-height: 0 !important; padding: 12px 10px !important; border-radius: 16px !important; background: linear-gradient(160deg, #fffefb, #f7efe4) !important; box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 8px 18px rgba(46,34,22,.04) !important; } body.cs-route-account .cs-stat-grid--pulse .cs-stat-icon { width: 28px !important; height: 28px !important; border-radius: 9px !important; } body.cs-route-account .cs-stat-grid--pulse .cs-stat-icon svg { width: 15px !important; height: 15px !important; } body.cs-route-account .cs-stat-grid--pulse .cs-stat small { font-size: 9px !important; letter-spacing: .06em !important; text-transform: uppercase !important; -webkit-line-clamp: 1 !important; } body.cs-route-account .cs-stat-grid--pulse .cs-stat strong { font-size: 17px !important; margin: 0 !important; } body.cs-route-account .cs-stat-grid--pulse .cs-stat em { display: none !important; } body.cs-route-account .cs-overview-hero-grid--v3 { display: grid !important; gap: 12px !important; margin: 0 0 14px !important; } body.cs-route-account .cs-overview-modules--v3 { display: grid !important; gap: 14px !important; } body.cs-route-account .cs-panel--enter { animation: csAccPanelEnter .36s cubic-bezier(.22, 1, .36, 1) both !important; } @keyframes csAccPanelEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-panel--enter, body.cs-route-account .cs-account-hub__item { animation: none !important; } } /* Shell atmosphere — stay ivory through content so product text never lands on dark */ body.cs-route-account .cs-account-shell { background: radial-gradient(90% 50% at 50% -8%, rgba(181, 138, 74, .14), transparent 55%), linear-gradient(180deg, #fbf6ee 0%, #f4ebe0 52%, #f7f1ea 100%) !important; padding-bottom: calc(12px + var(--cs-mobile-bottom-nav-height, 72px) + var(--cs-mobile-safe-bottom, 0px)) !important; } body.cs-route-account .cs-account-layout { padding-bottom: 0 !important; } body.cs-route-account .cs-loyalty-detail { padding-bottom: 2px !important; } body.cs-route-account .cs-ledger--v2 { margin-bottom: 0 !important; } /* Soft cream seam into dark mobile footer — never paint over product cards */ body.cs-route-account.cs-has-mobile-footer #accountApp { position: relative !important; padding-bottom: 8px !important; } body.cs-route-account.cs-has-mobile-footer #accountApp::after { content: none !important; display: none !important; } body.cs-route-account .cs-mobile-footer { position: relative !important; z-index: 3 !important; margin-top: 0 !important; padding-top: 22px !important; border-radius: 22px 22px 0 0 !important; background: linear-gradient(180deg, #1a1510 0%, #0b0b0b 48px), #0b0b0b !important; box-shadow: 0 -12px 32px rgba(19, 14, 10, .12) !important; } body.cs-route-account .cs-mobile-footer::before { content: "" !important; position: absolute !important; left: 14px !important; right: 14px !important; top: 10px !important; height: 1px !important; border-radius: 999px !important; background: linear-gradient(90deg, transparent, rgba(232, 198, 144, .26), transparent) !important; pointer-events: none !important; z-index: 1 !important; } body.cs-route-account .cs-profile-card__aura { animation: csAccAura 7s ease-in-out infinite alternate; } @keyframes csAccAura { from { transform: translate(0, 0) scale(1); opacity: .85; } to { transform: translate(-8%, 6%) scale(1.08); opacity: 1; } } /* Legacy section nav styles kept for desktop fallback if hub disabled */ body.cs-route-account .cs-account-nav.cs-account-nav--pills { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 8px !important; padding: 4px 2px 10px !important; margin: 0 -2px !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; background: transparent !important; } body.cs-route-account .cs-account-nav::-webkit-scrollbar { display: none; } body.cs-route-account .cs-account-nav { scrollbar-width: none; } body.cs-route-account .cs-nav-label { display: none !important; } body.cs-route-account .cs-account-nav a { flex: 0 0 auto !important; scroll-snap-align: start; display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 42px !important; padding: 0 15px !important; border-radius: 999px !important; white-space: nowrap !important; border: 1px solid var(--cs-acc-line-strong) !important; background: rgba(255, 253, 249, .8) !important; color: var(--cs-acc-ink) !important; font: 700 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .005em !important; box-shadow: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s ease !important; } body.cs-route-account .cs-account-nav a:active { transform: scale(.97); } body.cs-route-account .cs-account-nav a.is-active { background: var(--cs-acc-ink) !important; border-color: var(--cs-acc-ink) !important; color: #fffaf3 !important; } body.cs-route-account .cs-account-nav a.is-active:before { display: none !important; } body.cs-route-account .cs-account-nav .cs-nav-icon { width: 19px !important; height: 19px !important; flex: 0 0 auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--cs-acc-gold-deep) !important; display: grid !important; place-items: center !important; } body.cs-route-account .cs-account-nav .cs-nav-icon img, body.cs-route-account .cs-account-nav .cs-nav-icon svg { width: 18px !important; height: 18px !important; } body.cs-route-account .cs-account-nav a.is-active .cs-nav-icon { color: #f3dcb9 !important; } body.cs-route-account .cs-account-nav a em { margin-left: 1px !important; min-width: 20px !important; height: 19px !important; padding: 0 6px !important; border-radius: 999px !important; background: rgba(181, 138, 74, .16) !important; color: var(--cs-acc-gold-deep) !important; font: 800 10px/19px "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; display: inline-flex; align-items: center; justify-content: center; } body.cs-route-account .cs-account-nav a.is-active em { background: rgba(255, 250, 243, .18) !important; color: #f3dcb9 !important; } /* Help card + logout */ body.cs-route-account .cs-help-card { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; padding: 18px !important; border-radius: 20px !important; background: #15110d !important; color: #fff8ef !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 16px 38px rgba(18, 12, 8, .18) !important; text-decoration: none !important; } body.cs-route-account .cs-help-card .cs-help-icon { grid-row: 1 / 3 !important; width: 46px !important; height: 46px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; color: #e8c690 !important; background: rgba(255, 250, 242, .08) !important; border: 1px solid rgba(232, 198, 144, .28) !important; } body.cs-route-account .cs-help-card .cs-help-icon img, body.cs-route-account .cs-help-card .cs-help-icon svg { width: 22px !important; height: 22px !important; } body.cs-route-account .cs-help-card strong { color: #e8c690 !important; font: 500 20px/1.1 "Cormorant Garamond", Georgia, serif !important; } body.cs-route-account .cs-help-card small { color: rgba(255, 248, 239, .74) !important; font-size: 12px !important; line-height: 1.5 !important; } body.cs-route-account .cs-logout { width: 100% !important; min-height: 50px !important; border-radius: 16px !important; background: #fffaf3 !important; border: 1px solid var(--cs-acc-line) !important; color: #7a3226 !important; font: 800 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; } body.cs-route-account .cs-logout:active { transform: scale(.99); } /* Tab title header */ body.cs-route-account .cs-tab-title { display: grid !important; gap: 12px !important; margin: 0 0 16px !important; } body.cs-route-account .cs-tab-title.cs-tab-title--desktop-only, body.cs-route-account .cs-tab-title--overview.cs-tab-title--desktop-only { display: none !important; } body.cs-route-account .cs-tab-title h1 { margin: 0 !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(27px, 7.6vw, 33px) !important; line-height: 1.04 !important; letter-spacing: -.01em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-tab-title p { margin: 0 !important; max-width: 40ch !important; color: var(--cs-acc-ink-soft) !important; font: 500 13.5px/1.6 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-overline { display: inline-flex !important; align-items: center !important; gap: 7px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-overline img, body.cs-route-account .cs-overline svg { width: 14px !important; height: 14px !important; flex: 0 0 auto !important; } /* Safety net: no oversized inline icon images anywhere in account content */ body.cs-route-account .cs-account-content img.cs-icon { width: 1.15em; height: 1.15em; } body.cs-route-account .cs-panel-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } body.cs-route-account .cs-panel-actions .cs-pill-btn { flex: 1 1 auto !important; } /* Buttons */ body.cs-route-account .cs-pill-btn { min-height: 48px !important; border-radius: 999px !important; padding: 0 18px !important; border: 1px solid var(--cs-acc-line-strong) !important; background: rgba(255, 253, 249, .85) !important; color: var(--cs-acc-ink) !important; font: 700 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .09em !important; text-transform: uppercase !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.cs-route-account .cs-pill-btn--dark { background: var(--cs-acc-ink) !important; border-color: var(--cs-acc-ink) !important; color: #fffaf3 !important; } body.cs-route-account .cs-pill-btn:active, body.cs-route-account .cs-mini-btn:active { transform: scale(.985); } body.cs-route-account .cs-mini-btn { min-height: 42px !important; border-radius: 999px !important; padding: 0 15px !important; border: 1px solid var(--cs-acc-line-strong) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 11.5px/1.15 "Plus Jakarta Sans", system-ui, sans-serif !important; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center; } body.cs-route-account .cs-mini-btn.dark { background: var(--cs-acc-ink) !important; border-color: var(--cs-acc-ink) !important; color: #fffaf3 !important; } /* Cards + card heads */ body.cs-route-account .cs-card, body.cs-route-account .cs-overview-module, body.cs-route-account .cs-account-welcome-card, body.cs-route-account .cs-skin-profile-card--mini, body.cs-route-account .cs-coupon-tabs, body.cs-route-account .cs-content-help-card { border-radius: var(--cs-acc-radius) !important; border: 1px solid var(--cs-acc-line) !important; box-shadow: var(--cs-acc-shadow-soft) !important; min-width: 0 !important; } body.cs-route-account .cs-club-mini.cs-loyalty-card--mini { border-radius: 22px !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 16px 34px rgba(25,18,13,.16) !important; padding: 18px 16px 16px !important; } body.cs-route-account .cs-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 16px 0 !important; } body.cs-route-account .cs-card-head span { font: 800 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-card-head a { font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-gold-deep) !important; text-decoration: none !important; } /* Overview: hide redundant welcome hero (greeting + chips duplicate the tab title + stat grid) */ body.cs-route-account .cs-account-welcome-card { display: none !important; } body.cs-route-account .cs-overview-hero-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; margin: 0 0 16px !important; } body.cs-route-account .cs-overview-modules, body.cs-route-account .cs-overview-grid--final-minimal { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; padding: 0 !important; } body.cs-route-account .cs-overview-module--order { grid-column: auto !important; } /* Stat grid — compact 2-column */ body.cs-route-account .cs-stat-grid, body.cs-route-account .cs-stat-grid--six { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; margin: 0 0 16px !important; } body.cs-route-account .cs-stat { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 74px !important; padding: 13px !important; border-radius: 16px !important; background: var(--cs-acc-surface) !important; border: 1px solid var(--cs-acc-line) !important; box-shadow: none !important; } body.cs-route-account .cs-stat-icon { flex: 0 0 auto !important; width: 38px !important; height: 38px !important; border-radius: 12px !important; display: grid !important; place-items: center !important; background: rgba(181, 138, 74, .12) !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-stat-icon img, body.cs-route-account .cs-stat-icon svg { width: 19px !important; height: 19px !important; } body.cs-route-account .cs-stat > div { min-width: 0 !important; } body.cs-route-account .cs-stat small { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 10.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; overflow: hidden; } body.cs-route-account .cs-stat strong { display: block !important; margin: 4px 0 2px !important; font: 700 20px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; font-variant-numeric: tabular-nums; } body.cs-route-account .cs-stat em { display: block !important; font: 500 9.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; color: var(--cs-acc-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Club mini card (dark studio) */ body.cs-route-account .cs-loyalty-card--mini { padding: 20px !important; border-radius: 20px !important; } body.cs-route-account .cs-club-mini h2, body.cs-route-account .cs-loyalty-card--mini h2 { font-size: 28px !important; margin: 0 !important; } body.cs-route-account .cs-loyalty-card--mini .cs-loyalty-progress, body.cs-route-account .cs-loyalty-card--mini .cs-loyalty-meta { max-width: none !important; } body.cs-route-account .cs-club-mini__actions.cs-loyalty-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 2px !important; } body.cs-route-account .cs-club-mini__btn { min-height: 42px !important; flex: none !important; } body.cs-route-account .cs-club-mini__btn--solid { grid-column: 1 / -1 !important; } /* Skin mini card v6 */ body.cs-route-account .cs-skin-profile-card--mini, body.cs-route-account .cs-skin-profile-card--v6 { padding: 20px 18px 16px !important; border-radius: 22px !important; background: linear-gradient(165deg, rgba(255,253,249,.98) 0%, rgba(247,236,223,.94) 100%) !important; border: 1px solid rgba(42, 32, 22, .08) !important; box-shadow: var(--cs-acc-shadow-soft) !important; } body.cs-route-account .cs-skin-profile-card__aura { position: absolute !important; right: -20% !important; top: -30% !important; width: 72% !important; aspect-ratio: 1 !important; background: radial-gradient(circle, rgba(197,158,106,.2), rgba(197,158,106,0) 68%) !important; pointer-events: none !important; z-index: 0 !important; } body.cs-route-account .cs-skin-profile-card--v6 { display: grid !important; gap: 12px !important; position: relative !important; overflow: hidden !important; } body.cs-route-account .cs-skin-profile-card--v6 > * { position: relative; z-index: 1; } body.cs-route-account .cs-skin-profile-card__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body.cs-route-account .cs-skin-profile-card--v6 .cs-overline { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: var(--cs-acc-gold-deep) !important; font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; } body.cs-route-account .cs-skin-profile-card--v6 .cs-overline svg { width: 13px !important; height: 13px !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-skin-profile-card__badge { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 9px !important; border-radius: 999px !important; background: rgba(61,122,84,.1) !important; color: #2f5f42 !important; font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .05em !important; text-transform: uppercase !important; } body.cs-route-account .cs-skin-profile-card--v6 h2 { margin: 0 !important; font: 500 30px/1.05 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-skin-profile-card__lede { margin: 0 !important; color: var(--cs-acc-ink-soft) !important; font: 500 13px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-skin-profile-card__specs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; } body.cs-route-account .cs-skin-profile-card__specs > div { display: grid !important; gap: 4px !important; min-width: 0 !important; padding: 10px 11px !important; border-radius: 14px !important; background: rgba(255,253,249,.8) !important; border: 1px solid rgba(42,32,22,.07) !important; } body.cs-route-account .cs-skin-profile-card__specs dt { margin: 0 !important; font: 700 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-skin-profile-card__specs dd { margin: 0 !important; font: 650 12.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cs-route-account .cs-skin-profile-card--v6 .cs-skin-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; } body.cs-route-account .cs-skin-profile-card--v6 .cs-skin-tags span { min-height: 26px !important; padding: 0 10px !important; border-radius: 999px !important; background: rgba(255,253,249,.9) !important; border: 1px solid rgba(42,32,22,.08) !important; color: var(--cs-acc-ink-soft) !important; font: 600 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-skin-profile-card__routine { display: grid !important; gap: 3px !important; padding: 11px 12px !important; border-radius: 14px !important; text-decoration: none !important; color: inherit !important; background: linear-gradient(135deg, rgba(26,21,16,.04), rgba(181,138,74,.09)) !important; border: 1px solid rgba(42,32,22,.08) !important; } body.cs-route-account .cs-skin-profile-card__routine em { font: 700 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-skin-profile-card__routine strong { font: 650 13.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-skin-profile-card__foot { display: grid !important; gap: 11px !important; margin-top: 2px !important; padding-top: 12px !important; border-top: 1px solid rgba(42,32,22,.08) !important; } body.cs-route-account .cs-skin-profile-card--v6 .cs-skin-profile-stamp { margin: 0 !important; color: var(--cs-acc-muted) !important; font: 500 11px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-skin-profile-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } body.cs-route-account .cs-skin-profile-card__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 auto !important; min-height: 42px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid rgba(42,32,22,.14) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; text-decoration: none !important; } body.cs-route-account .cs-skin-profile-card__btn--primary { background: var(--cs-acc-ink) !important; border-color: var(--cs-acc-ink) !important; color: #fffaf3 !important; } body.cs-route-account .cs-skin-profile-actions .cs-mini-btn { flex: 1 1 auto !important; } /* Profile completion module */ body.cs-route-account .cs-profile-completion { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 16px !important; align-items: center !important; padding: 16px !important; } body.cs-route-account .cs-profile-completion__ring { width: 84px !important; height: 84px !important; } body.cs-route-account .cs-profile-completion__copy small { white-space: normal !important; } /* Quick access grid */ body.cs-route-account .cs-quick-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 14px !important; } body.cs-route-account .cs-quick-grid a { display: grid !important; gap: 4px !important; padding: 13px !important; border-radius: 15px !important; border: 1px solid var(--cs-acc-line) !important; background: var(--cs-acc-surface) !important; color: var(--cs-acc-ink) !important; text-decoration: none !important; min-width: 0 !important; } body.cs-route-account .cs-quick-grid a svg { width: 20px !important; height: 20px !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-quick-grid b { font: 700 12.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-quick-grid small { font-size: 11px !important; line-height: 1.4 !important; color: var(--cs-acc-muted) !important; } /* Preferences preview module */ body.cs-route-account .cs-preferences-preview { padding: 16px !important; display: grid !important; gap: 10px !important; } body.cs-route-account .cs-preferences-preview .cs-mini-btn { justify-self: start; } /* SECURITY LIST — fix the conflicting circle/overlap bug */ body.cs-route-account .cs-security-list { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 14px !important; margin: 0 !important; list-style: none !important; } body.cs-route-account .cs-security-list li { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; grid-template-columns: none !important; padding: 13px 15px !important; border: 1px solid var(--cs-acc-line) !important; border-radius: 14px !important; background: var(--cs-acc-surface) !important; min-width: 0 !important; } body.cs-route-account .cs-security-list li strong { flex: 1 1 auto !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; font: 700 12.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; text-align: left !important; display: block !important; } body.cs-route-account .cs-security-list li span { flex: 0 0 auto !important; width: auto !important; height: auto !important; min-width: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; display: inline !important; place-items: unset !important; text-align: right !important; font: 500 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } /* Forms */ body.cs-route-account .cs-form, body.cs-route-account .cs-form-compact, body.cs-route-account .cs-form-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } body.cs-route-account .cs-form .full, body.cs-route-account .cs-form-grid .span-2 { grid-column: 1 / -1 !important; } body.cs-route-account .cs-field, body.cs-route-account .cs-form-grid label { display: grid !important; gap: 7px !important; min-width: 0 !important; } body.cs-route-account .cs-field > span, body.cs-route-account .cs-form-grid label { font: 700 11px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; color: var(--cs-acc-ink-soft) !important; } body.cs-route-account .cs-input, body.cs-route-account .cs-form-grid input, body.cs-route-account .cs-form-grid select, body.cs-route-account .cs-form-grid textarea, body.cs-route-account select.cs-input, body.cs-route-account textarea.cs-input { width: 100% !important; min-height: 52px !important; border-radius: 14px !important; border: 1px solid var(--cs-acc-line) !important; background: #fffdfa !important; color: var(--cs-acc-ink) !important; padding: 0 14px !important; font: 500 14.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; transition: border-color .18s ease, box-shadow .18s ease !important; } body.cs-route-account textarea.cs-input, body.cs-route-account .cs-form-grid textarea { min-height: 112px !important; padding: 12px 14px !important; resize: vertical; } body.cs-route-account .cs-input:focus, body.cs-route-account .cs-form-grid input:focus, body.cs-route-account .cs-form-grid select:focus, body.cs-route-account .cs-form-grid textarea:focus { outline: none !important; border-color: rgba(181, 138, 74, .55) !important; box-shadow: 0 0 0 3px rgba(181, 138, 74, .14) !important; } body.cs-route-account .cs-field-help, body.cs-route-account .cs-form-status { font-size: 11.5px !important; line-height: 1.5 !important; color: var(--cs-acc-muted) !important; } /* Address modal v2 */ body.cs-address-modal-open .cs-mobile-v1-bottom-nav { pointer-events: none !important; opacity: 0 !important; visibility: hidden !important; } body.cs-route-account .cs-address-modal, body.cs-route-account .cs-address-modal--v2, body > .cs-address-modal, body > .cs-address-modal--v2 { position: fixed !important; inset: 0 !important; z-index: 12000 !important; display: grid !important; place-items: end center !important; padding: 0 !important; background: rgba(18, 14, 10, .52) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body.cs-route-account .cs-address-modal[hidden] { display: none !important; } body.cs-route-account .cs-address-modal__card { width: 100% !important; max-width: 100% !important; max-height: min(92dvh, 860px) !important; margin: 0 !important; padding: 0 !important; border-radius: 24px 24px 0 0 !important; border: 1px solid rgba(42, 32, 22, .1) !important; background: linear-gradient(165deg, #fffefb, #faf4ec) !important; box-shadow: 0 -18px 50px rgba(19, 14, 10, .2) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } body.cs-route-account .cs-address-form { display: flex !important; flex-direction: column !important; min-height: 0 !important; flex: 1 1 auto !important; } body.cs-route-account .cs-address-modal__handle { display: flex !important; justify-content: center !important; padding: 10px 0 0 !important; flex: 0 0 auto !important; } body.cs-route-account .cs-address-modal__handle span { display: block !important; width: 36px !important; height: 4px !important; border-radius: 999px !important; background: rgba(42, 32, 22, .14) !important; } body.cs-route-account .cs-address-modal__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 16px 14px !important; border-bottom: 1px solid rgba(42, 32, 22, .08) !important; flex: 0 0 auto !important; } body.cs-route-account .cs-address-modal__kicker { display: block !important; margin: 0 0 4px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-route-account .cs-address-modal__titles h2 { margin: 0 !important; font: 600 24px/1.05 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-address-modal__close { width: 42px !important; height: 42px !important; border-radius: 50% !important; border: 1px solid rgba(42, 32, 22, .1) !important; background: #fffdf9 !important; color: #1a1510 !important; display: grid !important; place-items: center !important; padding: 0 !important; flex: 0 0 auto !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 8px 18px rgba(42, 32, 22, .07) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease !important; } body.cs-route-account .cs-address-modal__close:active { transform: scale(.96) !important; background: #f6eee4 !important; border-color: rgba(181, 138, 74, .35) !important; } body.cs-route-account .cs-address-modal__close svg { width: 16px !important; height: 16px !important; display: block !important; } body.cs-route-account .cs-address-modal__body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; padding: 14px 16px 8px !important; } body.cs-route-account .cs-form-grid--address { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } body.cs-route-account .cs-form-grid--address label:not(.cs-address-check) { display: grid !important; gap: 7px !important; font: 700 11px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #8a7a68 !important; } body.cs-route-account .cs-form-grid--address label:not(.cs-address-check) > span { display: block !important; margin: 0 !important; } body.cs-route-account .cs-form-grid--address input, body.cs-route-account .cs-form-grid--address select, body.cs-route-account .cs-form-grid--address textarea { width: 100% !important; min-height: 48px !important; border-radius: 16px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: rgba(255, 253, 249, .96) !important; color: var(--cs-acc-ink) !important; padding: 12px 14px !important; font: 500 15px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; } body.cs-route-account .cs-form-grid--address textarea { min-height: 104px !important; } body.cs-route-account .cs-address-check { position: relative !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important; margin: 4px 0 0 !important; padding: 15px 14px !important; border-radius: 18px !important; border: 1px solid rgba(42, 32, 22, .1) !important; background: rgba(255, 253, 249, .98) !important; cursor: pointer !important; text-transform: none !important; letter-spacing: 0 !important; font: inherit !important; color: inherit !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset !important; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important; } body.cs-route-account .cs-address-check:has(input:checked) { border-color: rgba(181, 138, 74, .4) !important; background: linear-gradient(165deg, #fffefb, #f8f0e4) !important; box-shadow: 0 0 0 3px rgba(181, 138, 74, .08) !important; } body.cs-route-account .cs-address-check input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.cs-route-account .cs-address-check__box { width: 28px !important; height: 28px !important; margin-top: 1px !important; border-radius: 9px !important; border: 1.5px solid rgba(42, 32, 22, .16) !important; background: #fffdf9 !important; display: grid !important; place-items: center !important; color: transparent !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset !important; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important; } body.cs-route-account .cs-address-check__box svg { width: 14px !important; height: 14px !important; display: block !important; } body.cs-route-account .cs-address-check input:checked + .cs-address-check__box { background: #1a1510 !important; border-color: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 6px 14px rgba(26, 21, 16, .18) !important; } body.cs-route-account .cs-address-check__copy { display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.cs-route-account .cs-address-check__copy strong, body.cs-route-account .cs-address-check__copy em { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; text-transform: none !important; } body.cs-route-account .cs-address-check__copy strong { font: 700 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-address-check__copy em { font: 500 12px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-address-modal__foot { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid rgba(42, 32, 22, .08) !important; background: rgba(255, 253, 249, .94) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; flex: 0 0 auto !important; } body.cs-route-account .cs-address-modal__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 0 16px !important; border-radius: 15px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; } body.cs-route-account .cs-address-modal__btn--primary { background: #1a1510 !important; border-color: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 10px 22px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-address-modal__btn:active { transform: scale(.985) !important; } /* Order cards — Siparişlerim v6 */ body.cs-route-account .cs-order-list, body.cs-route-account .cs-order-list--v6 { padding: 0 !important; display: grid !important; gap: 14px !important; } body.cs-route-account .cs-order-card--v6 { display: grid !important; gap: 0 !important; border-radius: 22px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: linear-gradient(165deg, rgba(255,254,251,.99) 0%, rgba(252,245,236,.96) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 14px 36px rgba(46, 34, 22, .06) !important; overflow: hidden !important; animation: csOrderCardIn .48s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--cs-order-i, 0) * 60ms); } @keyframes csOrderCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-order-card__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 16px 0 !important; background: transparent !important; border: 0 !important; } body.cs-route-account .cs-order-card__id strong { display: block !important; font: 700 20px/1.05 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-card__id time { display: block !important; margin-top: 5px !important; font: 500 12px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-card__paid { display: block !important; margin-top: 6px !important; font: 600 11.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #5f7564 !important; } body.cs-route-account .cs-order-card__pill { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; align-self: flex-start !important; min-height: 26px !important; padding: 0 11px !important; border-radius: 999px !important; background: rgba(61, 122, 84, .12) !important; color: #2f5f42 !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; white-space: nowrap !important; } body.cs-route-account .cs-order-card__pill--alert { background: #fff0ed !important; color: #9b3328 !important; border-color: rgba(155, 51, 40, .2) !important; } body.cs-route-account .cs-order-card__meta-status--alert b { color: #a3392c !important; } body.cs-route-account .cs-order-card__track { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; list-style: none !important; margin: 16px 12px 2px !important; padding: 0 2px !important; position: relative !important; gap: 0 !important; } body.cs-route-account .cs-order-card__track:before { content: "" !important; position: absolute !important; left: 10%; right: 10%; top: 7px; height: 2px !important; border-radius: 999px !important; background: rgba(42, 32, 22, .1) !important; } body.cs-route-account .cs-order-card__step { display: grid !important; justify-items: center !important; gap: 8px !important; position: relative !important; z-index: 1 !important; } body.cs-route-account .cs-order-card__step > span { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 2px solid rgba(42, 32, 22, .16) !important; background: #fffdf9 !important; box-sizing: border-box !important; } body.cs-route-account .cs-order-card__step.is-done > span { border-color: #b58a4a !important; background: #b58a4a !important; } body.cs-route-account .cs-order-card__step.is-current > span { border-color: #b58a4a !important; background: #fffdf9 !important; box-shadow: 0 0 0 4px rgba(181, 138, 74, .2); animation: csOrderPulse 1.8s ease-in-out infinite; } body.cs-route-account .cs-order-card__step strong { font: 700 8.5px/1.15 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .02em !important; text-transform: uppercase !important; text-align: center !important; color: #9a8d80 !important; } body.cs-route-account .cs-order-card__step.is-done strong, body.cs-route-account .cs-order-card__step.is-current strong { color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-card__product { display: grid !important; grid-template-columns: 60px minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; margin: 14px 12px 0 !important; padding: 11px !important; border-radius: 16px !important; border: 1px solid rgba(42, 32, 22, .07) !important; background: rgba(255, 253, 249, .88) !important; text-decoration: none !important; color: inherit !important; } body.cs-route-account .cs-order-card__product:active { transform: scale(.985); border-color: rgba(181, 138, 74, .28) !important; } body.cs-route-account .cs-order-card__thumb { width: 60px !important; height: 60px !important; border-radius: 12px !important; overflow: hidden !important; background: #f4ebe0 !important; } body.cs-route-account .cs-order-card__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } body.cs-route-account .cs-order-card__copy { min-width: 0 !important; display: grid !important; gap: 3px !important; } body.cs-route-account .cs-order-card__brand { font: 700 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-order-card__copy strong { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 700 13px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-card__copy small { font: 500 11.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-card__price { align-self: start !important; font: 700 14px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; font-variant-numeric: tabular-nums; } body.cs-route-account .cs-order-card__meta { display: flex !important; flex-wrap: wrap !important; gap: 16px 20px !important; padding: 14px 16px 0 !important; } body.cs-route-account .cs-order-card__meta > span { display: grid !important; gap: 3px !important; min-width: 0 !important; } body.cs-route-account .cs-order-card__meta em { font: 600 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-card__meta b { font: 700 12.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-card__actions { display: grid !important; grid-template-columns: 1.15fr 1fr !important; gap: 8px !important; padding: 14px 12px 14px !important; } body.cs-route-account .cs-order-card__actions:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr !important; } body.cs-route-account .cs-order-card__actions:has(> :nth-child(3)) > :nth-child(n+3) { grid-column: 1 / -1 !important; } body.cs-route-account .cs-order-card__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 0 12px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: rgba(255, 253, 249, .95) !important; color: var(--cs-acc-ink) !important; font: 700 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; text-decoration: none !important; cursor: pointer !important; transition: transform .16s ease, background .16s ease !important; } body.cs-route-account .cs-order-card__btn:active { transform: scale(.98) !important; } body.cs-route-account .cs-order-card__btn--primary { background: #1a1510 !important; border-color: #1a1510 !important; color: #fffaf3 !important; } body.cs-route-account .cs-order-cancel-block { margin: 0 12px 14px !important; padding: 0 !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: rgba(255, 250, 245, .9) !important; overflow: hidden !important; } body.cs-route-account .cs-order-cancel-block > summary { list-style: none !important; cursor: pointer !important; padding: 13px 14px !important; font: 700 12.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #8a4a3a !important; letter-spacing: .01em !important; } body.cs-route-account .cs-order-cancel-block > summary::-webkit-details-marker { display: none; } body.cs-route-account .cs-order-cancel-block > summary::after { content: "+" !important; float: right !important; font-weight: 500 !important; color: #a07060 !important; } body.cs-route-account .cs-order-cancel-block[open] > summary::after { content: "–" !important; } body.cs-route-account .cs-order-cancel-block__body { padding: 0 14px 14px !important; display: grid !important; gap: 10px !important; } body.cs-route-account .cs-order-cancel-block--note { padding: 12px 14px !important; } body.cs-route-account .cs-order-cancel-block .cs-mini-btn { width: 100% !important; min-height: 42px !important; margin-top: 0 !important; text-transform: none !important; letter-spacing: .01em !important; } /* P1_6 — per-item rows stack (name above, full-width button below) instead of the desktop side-by-side row, so the 100%-width button rule above never squeezes the product name off-screen. */ body.cs-route-account .cs-order-cancel-item { flex-direction: column !important; align-items: stretch !important; } /* Orders panel title polish */ body.cs-route-account .cs-tab-title--premium .cs-tab-title__copy { display: grid !important; gap: 6px !important; } body.cs-route-account .cs-tab-title--premium .cs-overline { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .18em !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-tab-title--premium h1 { margin: 0 !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-size: 34px !important; line-height: 1.05 !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-tab-title--premium p { margin: 0 !important; max-width: 32em !important; font: 500 13px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-order-card--v6, body.cs-route-account .cs-order-card__step.is-current > span { animation: none !important; } } /* Legacy order card remnants (desktop-rich cards if any remain) */ body.cs-route-account .cs-order-card:not(.cs-order-card--v6) { border-radius: 20px !important; border: 1px solid var(--cs-acc-line) !important; background: var(--cs-acc-surface) !important; overflow: hidden !important; } body.cs-route-account .cs-order-card:not(.cs-order-card--v6) .cs-order-card-head { padding: 16px !important; background: #faf3ea !important; border-bottom: 1px solid var(--cs-acc-line) !important; } body.cs-route-account .cs-order-head-actions { max-width: 100% !important; justify-content: flex-start !important; } body.cs-route-account .cs-order-body { display: block !important; padding: 14px !important; } body.cs-route-account .cs-order-product { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; grid-auto-rows: auto; gap: 10px 12px !important; align-items: center !important; } body.cs-route-account .cs-order-total { grid-column: 2 !important; text-align: left !important; } body.cs-route-account .cs-order-side { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 12px 0 !important; } body.cs-route-account .cs-order-side div { display: grid !important; gap: 3px !important; align-content: start !important; padding: 10px 12px !important; border-radius: 12px !important; } body.cs-route-account .cs-order-side span { display: block !important; white-space: normal !important; font-size: 10px !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-side strong { display: block !important; text-align: left !important; font-size: 12.5px !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } body.cs-route-account .cs-order-actions .cs-mini-btn { flex: 1 1 auto !important; min-width: calc(50% - 4px) !important; } /* Son Sipariş spotlight — Rhode/Sephora editorial card */ body.cs-route-account .cs-overview-module--order { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.cs-route-account .cs-order-spotlight, body.cs-route-account .cs-order-spotlight--v2 { position: relative !important; display: grid !important; gap: 0 !important; border-radius: 24px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: radial-gradient(120% 80% at 100% 0%, rgba(201, 164, 106, .16), transparent 52%), linear-gradient(165deg, rgba(255,254,251,.99) 0%, rgba(252,245,236,.96) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 16px 40px rgba(46, 34, 22, .07) !important; overflow: hidden !important; animation: csOrderSpotIn .55s cubic-bezier(.22,1,.36,1) both !important; } body.cs-route-account .cs-order-spotlight__aura { position: absolute !important; inset: auto -24% -42% 40% !important; height: 72% !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(181, 138, 74, .12), transparent 68%) !important; pointer-events: none !important; } body.cs-route-account .cs-order-spotlight--v2 > *:not(.cs-order-spotlight__aura) { position: relative !important; z-index: 1 !important; } @keyframes csOrderSpotIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-order-spotlight__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 18px 0 !important; } body.cs-route-account .cs-order-spotlight__kicker { display: block !important; margin: 0 0 6px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--cs-acc-gold) !important; } body.cs-route-account .cs-order-spotlight__id strong { display: block !important; font: 700 22px/1.05 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-spotlight__id time { display: block !important; margin-top: 5px !important; font: 500 12px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-spotlight__all { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 2px !important; margin-top: 2px !important; min-height: 32px !important; padding: 0 10px 0 12px !important; border-radius: 999px !important; border: 1px solid rgba(42, 32, 22, .1) !important; background: rgba(255,253,249,.9) !important; font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; color: var(--cs-acc-gold-deep) !important; text-decoration: none !important; } body.cs-route-account .cs-order-spotlight__chev { width: 13px !important; height: 13px !important; display: block !important; opacity: .7 !important; } body.cs-route-account .cs-order-spotlight__status { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 12px 18px 0 !important; } body.cs-route-account .cs-order-spotlight__pill { display: inline-flex !important; align-items: center !important; min-height: 26px !important; padding: 0 11px !important; border-radius: 999px !important; background: rgba(181, 138, 74, .14) !important; color: #8d663c !important; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; } body.cs-route-account .cs-order-spotlight__pill.is-prep { background: rgba(181, 138, 74, .14) !important; color: #8d663c !important; } body.cs-route-account .cs-order-spotlight__pill.is-ship { background: rgba(61, 100, 140, .12) !important; color: #2f4f6a !important; } body.cs-route-account .cs-order-spotlight__pill.is-done { background: rgba(61, 122, 84, .14) !important; color: #2f5f42 !important; } body.cs-route-account .cs-order-spotlight__pill.is-alert { background: rgba(154, 63, 44, .12) !important; color: #9a3f2c !important; } body.cs-route-account .cs-order-spotlight__paid { font: 600 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-spotlight__journey { position: relative !important; margin: 14px 14px 2px !important; padding: 2px 0 0 !important; } body.cs-route-account .cs-order-spotlight__rail { position: absolute !important; left: 10% !important; right: 10% !important; top: 10px !important; height: 3px !important; border-radius: 999px !important; background: rgba(42, 32, 22, .1) !important; overflow: hidden !important; z-index: 0 !important; } body.cs-route-account .cs-order-spotlight__rail-fill { display: block !important; height: 100% !important; width: 0 !important; margin: 0 !important; border-radius: inherit !important; background: linear-gradient(90deg, #8d663c, #c9a46a, #e8c78a) !important; box-shadow: 0 0 10px rgba(181, 138, 74, .35) !important; animation: csOrderRailFill 1.05s cubic-bezier(.16, 1, .3, 1) .15s both !important; } @keyframes csOrderRailFill { from { width: 0; } to { width: var(--cs-order-fill, 0%); } } body.cs-route-account .cs-order-spotlight__track { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; list-style: none !important; margin: 0 !important; padding: 0 !important; position: relative !important; gap: 0 !important; z-index: 1 !important; } body.cs-route-account .cs-order-spotlight__track:before { display: none !important; } body.cs-route-account .cs-order-spotlight__step { display: grid !important; justify-items: center !important; gap: 8px !important; position: relative !important; z-index: 1 !important; } body.cs-route-account .cs-order-spotlight__step > span, body.cs-route-account .cs-order-spotlight__dot { width: 15px !important; height: 15px !important; border-radius: 50% !important; border: 2px solid rgba(42, 32, 22, .14) !important; background: #fffdf9 !important; box-sizing: border-box !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__step.is-done > span, body.cs-route-account .cs-order-spotlight__step.is-done .cs-order-spotlight__dot { border-color: #b58a4a !important; background: linear-gradient(145deg, #c9a46a, #8d663c) !important; box-shadow: 0 2px 8px rgba(181, 138, 74, .28) !important; } body.cs-route-account .cs-order-spotlight__step.is-current > span, body.cs-route-account .cs-order-spotlight__step.is-current .cs-order-spotlight__dot { border-color: #b58a4a !important; background: #fffdf9 !important; box-shadow: 0 0 0 4px rgba(181, 138, 74, .18) !important; animation: csOrderPulse 1.8s ease-in-out infinite !important; } @keyframes csOrderPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(181, 138, 74, .14); } 50% { box-shadow: 0 0 0 6px rgba(181, 138, 74, .22); } } body.cs-route-account .cs-order-spotlight__step strong { font: 700 9px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .03em !important; text-transform: uppercase !important; text-align: center !important; color: #9a8d80 !important; } body.cs-route-account .cs-order-spotlight__step.is-done strong, body.cs-route-account .cs-order-spotlight__step.is-current strong { color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-order-spotlight__product { display: grid !important; grid-template-columns: 68px minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; margin: 14px 14px 0 !important; padding: 12px !important; border-radius: 18px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: linear-gradient(165deg, #fffefb, #faf4ec) !important; text-decoration: none !important; color: inherit !important; box-shadow: 0 8px 18px rgba(42, 32, 22, .04) !important; } body.cs-route-account .cs-order-spotlight__product:active { transform: scale(.985) !important; } body.cs-route-account .cs-order-spotlight__thumb { width: 68px !important; height: 68px !important; border-radius: 14px !important; overflow: hidden !important; background: #f4ebe0 !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } body.cs-route-account .cs-order-spotlight__copy { min-width: 0 !important; display: grid !important; gap: 3px !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__brand { font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cs-acc-gold-deep) !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__copy strong { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; font: 700 13px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__copy small { font: 500 11.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__price { align-self: start !important; font: 700 14px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; font-variant-numeric: tabular-nums !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 14px 18px 0 !important; } body.cs-route-account .cs-order-spotlight__meta > span { display: grid !important; gap: 3px !important; min-width: 0 !important; margin: 0 !important; } body.cs-route-account .cs-order-spotlight__meta em { font: 600 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-order-spotlight__meta b { font: 700 13px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.cs-route-account .cs-order-spotlight__actions { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 8px !important; padding: 16px 14px 16px !important; } body.cs-route-account .cs-order-spotlight__actions:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr !important; } body.cs-route-account .cs-order-spotlight__actions:has(> :nth-child(3)) .cs-order-spotlight__btn:last-child { grid-column: 1 / -1 !important; } body.cs-route-account .cs-order-spotlight__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 0 14px !important; border-radius: 15px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: rgba(255, 253, 249, .95) !important; color: var(--cs-acc-ink) !important; font: 700 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .01em !important; text-decoration: none !important; transition: transform .16s ease, background .16s ease !important; } body.cs-route-account .cs-order-spotlight__btn:active { transform: scale(.98) !important; } body.cs-route-account .cs-order-spotlight__btn--primary { background: #1a1510 !important; border-color: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .14) !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-order-spotlight, body.cs-route-account .cs-order-spotlight--v2, body.cs-route-account .cs-order-spotlight__rail-fill, body.cs-route-account .cs-order-spotlight__step.is-current > span, body.cs-route-account .cs-order-spotlight__step.is-current .cs-order-spotlight__dot { animation: none !important; } body.cs-route-account .cs-order-spotlight__rail-fill { width: var(--cs-order-fill, 0%) !important; } } /* Overview — purchase recs rail + pulse + coupons */ body.cs-route-account .cs-recs-rail { margin: 0 !important; padding: 18px 0 16px !important; border: 0 !important; border-radius: 22px !important; background: radial-gradient(120% 80% at 0% 0%, rgba(181, 138, 74, .1), transparent 55%), linear-gradient(165deg, #fffdf9 0%, #f7efe4 100%) !important; box-shadow: 0 10px 28px rgba(42, 32, 22, .05) !important; overflow: hidden !important; } body.cs-route-account .cs-recs-rail__head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 12px !important; padding: 0 16px 14px !important; } body.cs-route-account .cs-recs-rail__kicker { display: block !important; margin: 0 0 4px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-route-account .cs-recs-rail__head h2 { margin: 0 !important; font: 600 20px/1.15 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.01em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-recs-rail__controls { display: flex !important; gap: 6px !important; flex: 0 0 auto !important; } body.cs-route-account .cs-recs-rail__nav { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: rgba(255, 253, 249, .95) !important; color: var(--cs-acc-ink) !important; font: 600 18px/1 Georgia, serif !important; cursor: pointer !important; transition: transform .16s ease, background .16s ease !important; } body.cs-route-account .cs-recs-rail__nav:active { transform: scale(.96) !important; } body.cs-route-account .cs-recs-rail__track { display: flex !important; gap: 12px !important; padding: 2px 16px 6px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent) !important; } body.cs-route-account .cs-recs-rail__track::-webkit-scrollbar { display: none !important; } body.cs-route-account .cs-rec-slide { flex: 0 0 148px !important; scroll-snap-align: start !important; display: grid !important; gap: 10px !important; min-width: 0 !important; animation: csRecReveal .48s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-rec-i, 0) * 55ms) !important; } @keyframes csRecReveal { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-rec-slide__media { display: grid !important; place-items: center !important; aspect-ratio: 1 / 1.12 !important; border-radius: 18px !important; background: linear-gradient(165deg, #f6eee4 0%, #ebe0d2 100%) !important; overflow: hidden !important; text-decoration: none !important; } body.cs-route-account .cs-rec-slide__media img { width: 78% !important; height: 78% !important; object-fit: contain !important; transition: transform .4s cubic-bezier(.22, 1, .36, 1) !important; } body.cs-route-account .cs-rec-slide:active .cs-rec-slide__media img { transform: scale(.96) !important; } body.cs-route-account .cs-rec-slide__body { display: grid !important; gap: 4px !important; min-width: 0 !important; } body.cs-route-account .cs-rec-slide__brand { font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #8d663c !important; } body.cs-route-account .cs-rec-slide__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 2.5em !important; font: 600 13px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; text-decoration: none !important; } body.cs-route-account .cs-rec-slide__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 2px !important; } body.cs-route-account .cs-rec-slide__row b { font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; font-variant-numeric: tabular-nums; } body.cs-route-account .cs-rec-slide__cart { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important; background: #1a1510 !important; color: #fffaf3 !important; font: 600 18px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; transition: transform .16s ease, background .16s ease !important; } body.cs-route-account .cs-rec-slide__cart:active { transform: scale(.94) !important; } body.cs-route-account .cs-recs-rail__more { display: inline-flex !important; margin: 12px 16px 0 !important; font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; color: #8d663c !important; text-decoration: none !important; } body.cs-route-account .cs-coupon-strip { margin: 0 !important; padding: 16px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .04) !important; } body.cs-route-account .cs-coupon-strip__head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; } body.cs-route-account .cs-coupon-strip__head span { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-coupon-strip__head a { font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #8d663c !important; text-decoration: none !important; } body.cs-route-account .cs-coupon-strip__list { display: grid !important; gap: 10px !important; } body.cs-route-account .cs-coupon-strip__card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 4px 12px !important; align-items: center !important; padding: 14px !important; border-radius: 16px !important; border: 1px dashed rgba(181, 138, 74, .35) !important; background: linear-gradient(135deg, rgba(181, 138, 74, .06), rgba(255, 253, 249, .9)) !important; animation: csRecReveal .4s ease both !important; animation-delay: calc(var(--cs-cp-i, 0) * 60ms) !important; } body.cs-route-account .cs-coupon-strip__card strong { font: 700 15px/1.1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-coupon-strip__card p { grid-column: 1 / 2 !important; margin: 0 !important; font: 500 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-coupon-strip__copy { grid-row: 1 / 3 !important; grid-column: 2 !important; align-self: center !important; min-height: 36px !important; padding: 0 14px !important; border-radius: 999px !important; border: 0 !important; background: #1a1510 !important; color: #fffaf3 !important; font: 700 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; } body.cs-route-account .cs-account-pulse { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-route-account .cs-account-pulse__item { display: grid !important; gap: 4px !important; min-width: 0 !important; padding: 14px 10px !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 6px 18px rgba(42, 32, 22, .04) !important; text-decoration: none !important; color: inherit !important; transition: transform .16s ease !important; } body.cs-route-account .cs-account-pulse__item:active { transform: scale(.98) !important; } body.cs-route-account .cs-account-pulse__item em { font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-account-pulse__item strong { font: 700 12.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-rec-slide, body.cs-route-account .cs-coupon-strip__card { animation: none !important; } } /* Favorites v6 — Sephora/Rhode clean 2-col cards */ body.cs-route-account .cs-favorites-grid, body.cs-route-account .cs-favorites-grid--v6 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 0 !important; align-items: stretch !important; } body.cs-route-account .cs-fav-card { display: grid !important; grid-template-rows: auto 1fr !important; min-width: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; animation: csFavReveal .42s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-fav-i, 0) * 45ms) !important; } @keyframes csFavReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-fav-card__media { position: relative !important; aspect-ratio: 1 / 1.08 !important; border-radius: 18px !important; background: linear-gradient(165deg, #f7f0e6 0%, #efe4d6 100%) !important; overflow: hidden !important; } body.cs-route-account .cs-fav-card__image { display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; text-decoration: none !important; } body.cs-route-account .cs-fav-card__image img { width: 78% !important; height: 78% !important; object-fit: contain !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1) !important; } body.cs-route-account .cs-fav-card:active .cs-fav-card__image img { transform: scale(.97) !important; } body.cs-route-account .cs-fav-card__media .cs-heart-btn { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 2 !important; width: 36px !important; height: 36px !important; border-radius: 999px !important; border: 0 !important; background: rgba(255, 253, 249, .92) !important; color: var(--cs-acc-ink) !important; box-shadow: 0 6px 16px rgba(46, 34, 22, .1) !important; display: grid !important; place-items: center !important; padding: 0 !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; transition: transform .16s ease, background .16s ease !important; } body.cs-route-account .cs-fav-card__media .cs-heart-btn:active { transform: scale(.92) !important; } body.cs-route-account .cs-fav-card__media .cs-heart-btn.is-active { color: #b05858 !important; } body.cs-route-account .cs-fav-card__media .cs-heart-btn.is-active .cs-heart-icon path { fill: currentColor !important; stroke: currentColor !important; } body.cs-route-account .cs-fav-card__media .cs-heart-icon { width: 18px !important; height: 18px !important; } body.cs-route-account .cs-fav-card__body { display: flex !important; flex-direction: column !important; align-content: start !important; gap: 8px !important; padding: 14px 2px 6px !important; min-width: 0 !important; height: 100% !important; } body.cs-route-account .cs-fav-card__brand { display: block !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-fav-card__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 2.55em !important; font: 650 13.5px/1.32 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.01em !important; color: #17130f !important; -webkit-text-fill-color: #17130f !important; text-decoration: none !important; } body.cs-route-account .cs-fav-card__price { font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.02em !important; color: #17130f !important; -webkit-text-fill-color: #17130f !important; font-variant-numeric: tabular-nums !important; } body.cs-route-account .cs-fav-card__badge { display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 0 8px !important; border-radius: 999px !important; font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; } body.cs-route-account .cs-fav-card__badge.is-out { background: rgba(140, 60, 60, .1) !important; color: #8c3c3c !important; } body.cs-route-account .cs-fav-card__badge.is-low { background: rgba(181, 138, 74, .14) !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-fav-card__cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 40px !important; margin-top: auto !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--cs-acc-ink) !important; background: var(--cs-acc-ink) !important; color: #fffaf3 !important; font: 700 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .02em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; cursor: pointer !important; transition: transform .16s ease, opacity .16s ease, background .16s ease !important; } body.cs-route-account .cs-fav-card__cta:active:not(:disabled) { transform: scale(.98) !important; } body.cs-route-account .cs-fav-card__cta.is-disabled, body.cs-route-account .cs-fav-card__cta:disabled { border-color: rgba(42, 32, 22, .14) !important; background: transparent !important; color: var(--cs-acc-muted) !important; cursor: not-allowed !important; opacity: .85 !important; } body.cs-route-account .cs-favorites-grid .cs-stock-dot { display: none !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-fav-card { animation: none !important; } body.cs-route-account .cs-fav-card__image img { transition: none !important; } } /* Coupons */ body.cs-route-account .cs-coupon-hero { display: none !important; } body.cs-route-account .cs-coupon-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.cs-route-account .cs-coupon-row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 15px !important; border: 1px solid var(--cs-acc-line) !important; border-radius: 16px !important; background: var(--cs-acc-surface) !important; margin: 0 0 10px !important; } body.cs-route-account .cs-coupon-code { font: 800 15px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-coupon-tabs .cs-tabstrip { padding: 0 14px !important; gap: 18px !important; overflow-x: auto !important; } body.cs-route-account .cs-coupon-tabs .cs-tabstrip button { white-space: nowrap !important; } /* Coupons v2 tickets */ body.cs-route-account .cs-coupons--v2 { display: grid !important; gap: 14px !important; margin: 0 !important; } body.cs-route-account .cs-coupons__filters { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding: 4px !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .04) !important; } body.cs-route-account .cs-coupons__filters button { min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 0 8px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--cs-acc-muted) !important; font: 700 11px/1.15 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; } body.cs-route-account .cs-coupons__filters button em { font-style: normal !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 999px !important; display: inline-grid !important; place-items: center !important; background: rgba(42, 32, 22, .08) !important; font-size: 10px !important; } body.cs-route-account .cs-coupons__filters button.is-active { background: #1a1510 !important; color: #fffaf3 !important; } body.cs-route-account .cs-coupons__filters button.is-active em { background: rgba(255, 250, 243, .16) !important; color: #fffaf3 !important; } body.cs-route-account .cs-coupons__list { display: grid !important; gap: 12px !important; } body.cs-route-account .cs-ticket { position: relative !important; display: grid !important; grid-template-columns: 12px minmax(0, 1fr) !important; border-radius: 20px !important; overflow: hidden !important; background: linear-gradient(165deg, #fffdf9 0%, #f7efe4 100%) !important; box-shadow: 0 10px 26px rgba(42, 32, 22, .05) !important; animation: csTicketReveal .46s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-ticket-i, 0) * 55ms) !important; } body.cs-route-account .cs-ticket::after { content: "" !important; position: absolute !important; top: 50% !important; right: -7px !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #f8f0e7 !important; transform: translateY(-50%) !important; box-shadow: 0 -42px 0 #f8f0e7, 0 42px 0 #f8f0e7 !important; pointer-events: none !important; } body.cs-route-account .cs-ticket__notch { background: linear-gradient(180deg, #c9a46a, #8d663c) !important; } body.cs-route-account .cs-ticket.is-used .cs-ticket__notch, body.cs-route-account .cs-ticket.is-expired .cs-ticket__notch { background: linear-gradient(180deg, #c8bbb0, #8f857c) !important; } body.cs-route-account .cs-ticket__body { display: grid !important; gap: 7px !important; padding: 16px 18px 14px 14px !important; min-width: 0 !important; } body.cs-route-account .cs-ticket__top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } body.cs-route-account .cs-ticket__status { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 9px !important; border-radius: 999px !important; font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; background: #e9f4ea !important; color: #2f6b3a !important; } body.cs-route-account .cs-ticket.is-used .cs-ticket__status { background: #efe8df !important; color: #6d6258 !important; } body.cs-route-account .cs-ticket.is-expired .cs-ticket__status { background: #f7e6e2 !important; color: #9a3f2c !important; } body.cs-route-account .cs-ticket__expiry { font: 600 11px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; white-space: nowrap !important; } body.cs-route-account .cs-ticket__code { margin: 2px 0 0 !important; font: 800 24px/1.05 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .07em !important; color: var(--cs-acc-ink) !important; overflow-wrap: anywhere !important; } body.cs-route-account .cs-ticket__title { margin: 0 !important; font: 600 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-ticket__desc { margin: 0 !important; font: 500 12.5px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-ticket__scope { margin: 0 !important; font: 700 10.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #8d663c !important; } body.cs-route-account .cs-ticket__actions { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 8px !important; margin-top: 8px !important; padding-top: 12px !important; border-top: 1px dashed rgba(42, 32, 22, .12) !important; } body.cs-route-account .cs-ticket__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 0 12px !important; border-radius: 13px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; text-decoration: none !important; cursor: pointer !important; } body.cs-route-account .cs-ticket__btn--primary { background: #1a1510 !important; border-color: #1a1510 !important; color: #fffaf3 !important; } body.cs-route-account .cs-ticket__hint { grid-column: 1 / -1 !important; font: 500 12px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-coupons__note { display: grid !important; gap: 8px !important; padding: 16px !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(181, 138, 74, .1), rgba(255, 253, 249, .95)) !important; border: 1px solid rgba(181, 138, 74, .18) !important; } body.cs-route-account .cs-coupons__note-kicker { font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-route-account .cs-coupons__note h3 { margin: 0 !important; font: 600 20px/1.15 "Cormorant Garamond", Georgia, serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-coupons__note p { margin: 0 !important; font: 500 12.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-coupons__note .cs-ticket__btn { justify-self: start !important; margin-top: 4px !important; } @keyframes csTicketReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-ticket { animation: none !important; } } /* Skin profile studio */ body.cs-route-account .cs-skin-studio { display: grid !important; gap: 14px !important; margin: 0 !important; } body.cs-route-account .cs-skin-studio__hero { position: relative !important; overflow: hidden !important; display: grid !important; gap: 10px !important; padding: 20px 18px 16px !important; border-radius: 24px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: radial-gradient(120% 90% at 100% 0%, rgba(201, 164, 106, .2), transparent 55%), linear-gradient(155deg, #fffdf9 0%, #f6ebe0 52%, #fff9f2 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 32px rgba(38, 29, 22, .05) !important; animation: csSkinReveal .5s cubic-bezier(.22, 1, .36, 1) both !important; } body.cs-route-account .cs-skin-studio__hero::before { content: "" !important; position: absolute !important; inset: auto -24% -46% 36% !important; height: 72% !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(181, 138, 74, .14), transparent 68%) !important; pointer-events: none !important; } body.cs-route-account .cs-skin-studio__hero > * { position: relative !important; z-index: 1 !important; } body.cs-route-account .cs-skin-studio__hero-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body.cs-route-account .cs-skin-studio__icon { width: 42px !important; height: 42px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; color: #8d663c !important; background: rgba(255, 253, 249, .75) !important; border: 1px solid rgba(181, 138, 74, .22) !important; } body.cs-route-account .cs-skin-studio__mark { width: 20px !important; height: 20px !important; display: block !important; } body.cs-route-account .cs-skin-studio__ring { position: relative !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; text-align: center !important; background: transparent !important; box-shadow: none !important; } body.cs-route-account .cs-skin-studio__ring-svg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: rotate(-90deg) !important; overflow: visible !important; filter: drop-shadow(0 3px 8px rgba(181, 138, 74, .28)) !important; } body.cs-route-account .cs-skin-studio__ring-track { stroke: rgba(42, 32, 22, .18) !important; stroke-width: 3.8 !important; stroke-linecap: round !important; fill: none !important; } body.cs-route-account .cs-skin-studio__ring-progress { stroke: #b58a4a !important; stroke-width: 3.8 !important; stroke-linecap: round !important; fill: none !important; transition: stroke-dashoffset 1.15s cubic-bezier(.16, 1, .3, 1) !important; } body.cs-route-account .cs-skin-studio__ring-label { position: relative !important; z-index: 1 !important; display: grid !important; gap: 1px !important; place-items: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: radial-gradient(circle at 40% 30%, #fffefb, #f5ebe0) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(42, 32, 22, .04) !important; } body.cs-route-account .cs-skin-studio__ring-label strong, body.cs-route-account .cs-skin-studio__ring strong { display: block !important; font: 800 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.02em !important; } body.cs-route-account .cs-skin-studio__ring-label span, body.cs-route-account .cs-skin-studio__ring span { display: block !important; margin-top: 1px !important; font: 700 7px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-skin-studio__ring-progress { transition: none !important; } } body.cs-route-account .cs-skin-studio__kicker { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 10px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(181, 138, 74, .12) !important; color: #8d663c !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; } body.cs-route-account .cs-skin-studio__hero h2 { margin: 0 !important; font: 500 30px/.95 "Cormorant Garamond", Georgia, serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.02em !important; } body.cs-route-account .cs-skin-studio__hero p { margin: 0 !important; font: 500 13.5px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-skin-studio__tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } body.cs-route-account .cs-skin-studio__tags span { display: inline-flex !important; align-items: center !important; min-height: 26px !important; padding: 0 11px !important; border-radius: 999px !important; background: rgba(255, 253, 249, .8) !important; border: 1px solid rgba(42, 32, 22, .08) !important; font: 650 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #3d342c !important; } body.cs-route-account .cs-skin-studio__meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: wrap !important; margin-top: 2px !important; padding-top: 12px !important; border-top: 1px solid rgba(42, 32, 22, .08) !important; font: 600 11.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-skin-studio__meta a { color: #8d663c !important; text-decoration: none !important; font-weight: 750 !important; } body.cs-route-account .cs-skin-studio__form { display: grid !important; gap: 12px !important; margin: 0 !important; } body.cs-route-account .cs-skin-block { margin: 0 !important; padding: 16px 14px 14px !important; border: 1px solid rgba(42, 32, 22, .08) !important; border-radius: 20px !important; background: linear-gradient(180deg, #fffefb, #faf4ec) !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .03) !important; animation: csSkinReveal .48s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-skin-i, 0) * 45ms) !important; } body.cs-route-account .cs-skin-block:nth-of-type(1) { --cs-skin-i: 1; } body.cs-route-account .cs-skin-block:nth-of-type(2) { --cs-skin-i: 2; } body.cs-route-account .cs-skin-block:nth-of-type(3) { --cs-skin-i: 3; } body.cs-route-account .cs-skin-block:nth-of-type(4) { --cs-skin-i: 4; } body.cs-route-account .cs-skin-block:nth-of-type(5) { --cs-skin-i: 5; } body.cs-route-account .cs-skin-block legend { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 2px !important; margin: 0 0 4px !important; font: 700 12px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-skin-block legend span { display: inline-grid !important; place-items: center !important; min-width: 26px !important; height: 26px !important; padding: 0 7px !important; border-radius: 999px !important; background: #1a1510 !important; color: #fffaf3 !important; font: 800 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-skin-block__lede { margin: 0 0 10px !important; font: 500 12.5px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-route-account .cs-skin-chipgrid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } body.cs-route-account .cs-skin-chipgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } body.cs-route-account .cs-skin-chipgrid--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.cs-route-account .cs-skin-chip { position: relative !important; display: block !important; margin: 0 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } body.cs-route-account .cs-skin-chip input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } body.cs-route-account .cs-skin-chip__face { display: grid !important; gap: 3px !important; align-content: center !important; min-height: 60px !important; padding: 11px 10px 10px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .1) !important; background: rgba(255, 253, 249, .94) !important; color: var(--cs-acc-ink) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset !important; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease !important; } body.cs-route-account .cs-skin-chip__face strong { font: 700 12.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.01em !important; } body.cs-route-account .cs-skin-chip__face em { font: 500 11px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-skin-chipgrid--3 .cs-skin-chip__face { min-height: 56px !important; padding: 10px 7px !important; } body.cs-route-account .cs-skin-chipgrid--3 .cs-skin-chip__face strong { font-size: 11.5px !important; } body.cs-route-account .cs-skin-chipgrid--3 .cs-skin-chip__face em { font-size: 10px !important; } body.cs-route-account .cs-skin-chip.is-selected .cs-skin-chip__face, body.cs-route-account .cs-skin-chip:has(input:checked) .cs-skin-chip__face { border-color: #1a1510 !important; background: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 10px 22px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-skin-chip.is-selected .cs-skin-chip__face em, body.cs-route-account .cs-skin-chip:has(input:checked) .cs-skin-chip__face em { color: rgba(255, 250, 243, .62) !important; } body.cs-route-account .cs-skin-chip--check .cs-skin-chip__face { min-height: 48px !important; padding: 10px 11px !important; } body.cs-route-account .cs-skin-studio__note { margin: 0 !important; padding: 0 2px !important; font: 500 11.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-skin-studio__actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; position: sticky !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; z-index: 5 !important; padding: 10px !important; border-radius: 18px !important; background: rgba(255, 253, 249, .92) !important; border: 1px solid rgba(42, 32, 22, .08) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 14px 32px rgba(42, 32, 22, .1) !important; } body.cs-route-account .cs-skin-studio__save { min-height: 48px !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; cursor: pointer !important; background: #1a1510 !important; color: #fffaf3 !important; font: 750 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-skin-studio__save:active { transform: scale(.985) !important; } body.cs-route-account .cs-skin-studio__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 0 14px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; text-decoration: none !important; } body.cs-route-account .cs-skin-products--v2, body.cs-route-account .cs-skin-products--v3 { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.cs-route-account .cs-skin-products--v3 { margin-top: 2px !important; border-radius: 22px !important; background: radial-gradient(120% 90% at 0% 0%, rgba(181, 138, 74, .12), transparent 55%), linear-gradient(165deg, #fffefb 0%, #f7efe4 100%) !important; box-shadow: 0 10px 28px rgba(42, 32, 22, .05) !important; overflow: hidden !important; } body.cs-route-account .cs-skin-rail__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; padding: 16px 14px 10px !important; margin: 0 !important; border: 0 !important; background: transparent !important; } body.cs-route-account .cs-skin-rail__kicker { display: block !important; margin: 0 0 4px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-route-account .cs-skin-rail__titles h3 { margin: 0 !important; font: 600 24px/1.08 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-skin-rail__titles p { display: none !important; } body.cs-route-account .cs-skin-rail__controls { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; } body.cs-route-account .cs-skin-rail__nav { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: rgba(255, 253, 249, .96) !important; color: var(--cs-acc-ink) !important; display: grid !important; place-items: center !important; padding: 0 !important; cursor: pointer !important; } body.cs-route-account .cs-skin-rail__nav svg { width: 15px !important; height: 15px !important; display: block !important; } body.cs-route-account .cs-skin-rail__all { display: inline-flex !important; align-items: center !important; min-height: 36px !important; padding: 0 8px !important; font: 700 11.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #8d663c !important; text-decoration: none !important; } body.cs-route-account .cs-skin-rail__track { display: flex !important; gap: 10px !important; padding: 2px 14px 16px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent) !important; } body.cs-route-account .cs-skin-rail__track::-webkit-scrollbar { display: none !important; } body.cs-route-account .cs-skin-slide { flex: 0 0 138px !important; scroll-snap-align: start !important; display: grid !important; gap: 9px !important; min-width: 0 !important; animation: csSkinSlideIn .48s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-skin-i, 0) * 55ms) !important; } @keyframes csSkinSlideIn { from { opacity: 0; transform: translateX(16px) scale(.97); } to { opacity: 1; transform: none; } } body.cs-route-account .cs-skin-slide__media { position: relative !important; display: grid !important; place-items: center !important; aspect-ratio: 1 / 1.12 !important; border-radius: 18px !important; background: linear-gradient(165deg, #f6eee4, #ebe0d2) !important; overflow: hidden !important; text-decoration: none !important; } body.cs-route-account .cs-skin-slide__media img { width: 78% !important; height: 78% !important; object-fit: contain !important; } body.cs-route-account .cs-skin-slide__badge { position: absolute !important; left: 8px !important; top: 8px !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 0 8px !important; border-radius: 999px !important; font: 700 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; background: rgba(255, 253, 249, .94) !important; color: #8d663c !important; font-style: normal !important; } body.cs-route-account .cs-skin-slide__body { display: grid !important; gap: 3px !important; min-width: 0 !important; } body.cs-route-account .cs-skin-slide__brand { font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #8d663c !important; } body.cs-route-account .cs-skin-slide__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 2.45em !important; font: 600 13px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; text-decoration: none !important; } body.cs-route-account .cs-skin-slide__cat { font: 500 11px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.cs-route-account .cs-skin-slide__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 3px !important; } body.cs-route-account .cs-skin-slide__row b { font: 700 13.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-skin-slide__cart { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important; background: #1a1510 !important; color: #fffaf3 !important; font: 600 17px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; display: grid !important; place-items: center !important; cursor: pointer !important; text-decoration: none !important; padding: 0 !important; box-shadow: 0 8px 14px rgba(26, 21, 16, .14) !important; } body.cs-route-account .cs-skin-slide__cart:active { transform: scale(.94) !important; } body.cs-route-account .cs-skin-slide__cart--link { background: #fffdf9 !important; color: var(--cs-acc-ink) !important; border: 1px solid rgba(42, 32, 22, .12) !important; box-shadow: none !important; } body.cs-route-account .cs-product-mini-row--skin { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body.cs-route-account #skinPanel .cs-panel-actions .cs-skin-save-btn { display: none !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-skin-studio__hero, body.cs-route-account .cs-skin-block, body.cs-route-account .cs-skin-slide { animation: none !important; } } /* Security studio */ body.cs-route-account .cs-security-studio { display: grid !important; gap: 14px !important; margin: 0 !important; } body.cs-route-account .cs-security-studio__hero { position: relative !important; overflow: hidden !important; display: grid !important; gap: 10px !important; padding: 20px 18px 16px !important; border-radius: 24px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: radial-gradient(110% 90% at 0% 0%, rgba(181, 138, 74, .18), transparent 52%), linear-gradient(160deg, #fffdf9 0%, #f4ebe1 48%, #fff8f1 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 32px rgba(38, 29, 22, .05) !important; animation: csSkinReveal .5s cubic-bezier(.22, 1, .36, 1) both !important; } body.cs-route-account .cs-security-studio__hero::before { content: "" !important; position: absolute !important; inset: auto -24% -46% 40% !important; height: 72% !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(181, 138, 74, .12), transparent 68%) !important; pointer-events: none !important; } body.cs-route-account .cs-security-studio__hero > * { position: relative !important; z-index: 1 !important; } body.cs-route-account .cs-security-studio__hero-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body.cs-route-account .cs-security-studio__icon { width: 42px !important; height: 42px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; color: #8d663c !important; background: rgba(255, 253, 249, .75) !important; border: 1px solid rgba(181, 138, 74, .22) !important; } body.cs-route-account .cs-security-studio__mark { width: 20px !important; height: 20px !important; display: block !important; } body.cs-route-account .cs-security-studio__stats { display: flex !important; gap: 6px !important; } body.cs-route-account .cs-security-studio__stats span { display: grid !important; gap: 2px !important; justify-items: center !important; min-width: 58px !important; padding: 8px 10px !important; border-radius: 14px !important; background: rgba(255, 253, 249, .84) !important; border: 1px solid rgba(42, 32, 22, .08) !important; } body.cs-route-account .cs-security-studio__stats strong { font: 800 16px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-security-studio__stats em { font: 700 8px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-security-studio__kicker { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 10px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(181, 138, 74, .12) !important; color: #8d663c !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; } body.cs-route-account .cs-security-studio__hero h2 { margin: 0 !important; font: 500 30px/.95 "Cormorant Garamond", Georgia, serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.02em !important; } body.cs-route-account .cs-security-studio__hero p { margin: 0 !important; font: 500 13.5px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-security-block { margin: 0 !important; padding: 16px 14px 14px !important; border: 1px solid rgba(42, 32, 22, .08) !important; border-radius: 20px !important; background: linear-gradient(180deg, #fffefb, #faf4ec) !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .03) !important; animation: csSkinReveal .48s cubic-bezier(.22, 1, .36, 1) both !important; } body.cs-route-account .cs-security-block__head { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 0 12px !important; } body.cs-route-account .cs-security-block__head > span { display: inline-grid !important; place-items: center !important; min-width: 28px !important; height: 28px !important; padding: 0 7px !important; border-radius: 999px !important; background: #1a1510 !important; color: #fffaf3 !important; font: 800 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-security-block__head h3 { margin: 0 !important; font: 700 14px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-security-block__head p { margin: 3px 0 0 !important; font: 500 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-route-account .cs-security-rows { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 8px !important; } body.cs-route-account .cs-security-row { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-height: 58px !important; padding: 11px 12px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: rgba(255, 253, 249, .94) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset !important; animation: csSkinReveal .42s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(100ms + var(--cs-sec-i, 0) * 30ms) !important; } body.cs-route-account .cs-security-row__icon { width: 36px !important; height: 36px !important; border-radius: 12px !important; display: grid !important; place-items: center !important; color: #8d663c !important; background: rgba(181, 138, 74, .1) !important; border: 1px solid rgba(181, 138, 74, .16) !important; } body.cs-route-account .cs-security-row__ico { width: 17px !important; height: 17px !important; display: block !important; } body.cs-route-account .cs-security-row__copy { min-width: 0 !important; display: grid !important; gap: 2px !important; } body.cs-route-account .cs-security-row__copy strong { font: 700 12.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-security-row__copy em { font: 500 11.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-security-row__pill { grid-column: 2 !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; min-height: 24px !important; padding: 0 9px !important; border-radius: 999px !important; font: 750 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; background: #f2eee8 !important; color: #7b7168 !important; } body.cs-route-account .cs-security-row.tone-ok .cs-security-row__icon { color: #3d7a54 !important; background: rgba(61, 122, 84, .1) !important; border-color: rgba(61, 122, 84, .18) !important; } body.cs-route-account .cs-security-row.tone-ok .cs-security-row__pill { background: rgba(61, 122, 84, .12) !important; color: #2f5f42 !important; } body.cs-route-account .cs-security-row.tone-warn .cs-security-row__icon { color: #a87832 !important; background: rgba(181, 138, 74, .14) !important; border-color: rgba(181, 138, 74, .24) !important; } body.cs-route-account .cs-security-row.tone-warn .cs-security-row__pill { background: rgba(181, 138, 74, .16) !important; color: #8d663c !important; } body.cs-route-account .cs-security-pass { display: grid !important; gap: 12px !important; margin: 0 !important; } body.cs-route-account .cs-security-pass__field { display: grid !important; gap: 6px !important; margin: 0 !important; } body.cs-route-account .cs-security-pass__field > span { font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #65584e !important; } body.cs-route-account .cs-security-pass__control { position: relative !important; display: grid !important; } body.cs-route-account .cs-security-pass__control .cs-input { width: 100% !important; min-height: 48px !important; padding: 12px 48px 12px 14px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: #fffdf9 !important; font: 500 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; box-sizing: border-box !important; } body.cs-route-account .cs-security-pass__toggle { position: absolute !important; top: 50% !important; right: 8px !important; transform: translateY(-50%) !important; width: 34px !important; height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; display: grid !important; place-items: center !important; background: transparent !important; color: #8a7d6f !important; cursor: pointer !important; } body.cs-route-account .cs-security-pass__toggle.is-on { background: rgba(42, 32, 22, .06) !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-security-pass__toggle svg { width: 18px !important; height: 18px !important; display: block !important; } body.cs-route-account .cs-security-pass__hint { margin: 0 !important; font: 500 11.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-route-account .cs-security-pass__submit { min-height: 48px !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; cursor: pointer !important; background: #1a1510 !important; color: #fffaf3 !important; font: 750 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-security-pass__submit:active { transform: scale(.985) !important; } body.cs-route-account .cs-security-block--split { display: grid !important; gap: 12px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-route-account .cs-security-action { display: grid !important; gap: 10px !important; padding: 16px 14px 14px !important; border-radius: 20px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: linear-gradient(180deg, #fffefb, #faf4ec) !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .03) !important; } body.cs-route-account .cs-security-action--accent { background: radial-gradient(120% 90% at 100% 0%, rgba(181, 138, 74, .16), transparent 55%), linear-gradient(165deg, #fffdf9, #f3e8db) !important; } body.cs-route-account .cs-security-action__lede { margin: 0 !important; font: 500 12.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-security-action__btn { justify-self: stretch !important; min-height: 46px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(42, 32, 22, .14) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; } body.cs-route-account .cs-security-action__btn--dark { border-color: transparent !important; background: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .14) !important; } body.cs-route-account .cs-security-action__btn:active { transform: scale(.985) !important; } body.cs-route-account #securityPanel { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } body.cs-route-account #securityPanel .cs-panel-chrome + .cs-card { display: none !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-security-studio__hero, body.cs-route-account .cs-security-block, body.cs-route-account .cs-security-row { animation: none !important; } } /* Profile studio */ body.cs-route-account .cs-profile-studio { display: grid !important; gap: 14px !important; margin: 0 !important; } body.cs-route-account .cs-profile-studio__hero { position: relative !important; overflow: hidden !important; display: grid !important; gap: 10px !important; padding: 20px 18px 16px !important; border-radius: 24px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: radial-gradient(110% 90% at 100% 0%, rgba(181, 138, 74, .2), transparent 55%), linear-gradient(155deg, #fffdf9 0%, #f5ebe1 50%, #fff8f1 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 32px rgba(38, 29, 22, .05) !important; animation: csSkinReveal .5s cubic-bezier(.22, 1, .36, 1) both !important; } body.cs-route-account .cs-profile-studio__hero::before { content: "" !important; position: absolute !important; inset: auto -24% -46% 36% !important; height: 72% !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(181, 138, 74, .12), transparent 68%) !important; pointer-events: none !important; } body.cs-route-account .cs-profile-studio__hero > * { position: relative !important; z-index: 1 !important; } body.cs-route-account .cs-profile-studio__hero-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body.cs-route-account .cs-profile-studio__avatar { width: 48px !important; height: 48px !important; border-radius: 16px !important; display: grid !important; place-items: center !important; background: linear-gradient(145deg, #1a1510, #2c241c) !important; color: #f6ead8 !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-profile-studio__avatar em { font: 750 14px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .04em !important; } body.cs-route-account .cs-profile-studio__ring { position: relative !important; width: 58px !important; height: 58px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; text-align: center !important; } body.cs-route-account .cs-profile-studio__ring-svg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: rotate(-90deg) !important; overflow: visible !important; filter: drop-shadow(0 3px 8px rgba(181, 138, 74, .28)) !important; } body.cs-route-account .cs-profile-studio__ring-track { stroke: rgba(42, 32, 22, .18) !important; stroke-width: 3.8 !important; stroke-linecap: round !important; fill: none !important; } body.cs-route-account .cs-profile-studio__ring-progress { stroke: #b58a4a !important; stroke-width: 3.8 !important; stroke-linecap: round !important; fill: none !important; transition: stroke-dashoffset 1.15s cubic-bezier(.16, 1, .3, 1) !important; } body.cs-route-account .cs-profile-studio__ring-label { position: relative !important; z-index: 1 !important; display: grid !important; gap: 1px !important; place-items: center !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: radial-gradient(circle at 40% 30%, #fffefb, #f5ebe0) !important; } body.cs-route-account .cs-profile-studio__ring-label strong { display: block !important; font: 800 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-profile-studio__ring-label span { display: block !important; font: 700 7px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-profile-studio__kicker { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 10px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(181, 138, 74, .12) !important; color: #8d663c !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; } body.cs-route-account .cs-profile-studio__hero h2 { margin: 0 !important; font: 500 30px/.95 "Cormorant Garamond", Georgia, serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.02em !important; } body.cs-route-account .cs-profile-studio__hero p { margin: 0 !important; font: 500 13.5px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-profile-studio__meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: wrap !important; margin-top: 2px !important; padding-top: 12px !important; border-top: 1px solid rgba(42, 32, 22, .08) !important; font: 600 11.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-profile-studio__form { display: grid !important; gap: 12px !important; margin: 0 !important; } body.cs-route-account .cs-profile-block { margin: 0 !important; padding: 16px 14px 14px !important; border: 1px solid rgba(42, 32, 22, .08) !important; border-radius: 20px !important; background: linear-gradient(180deg, #fffefb, #faf4ec) !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .03) !important; animation: csSkinReveal .48s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(40ms + var(--cs-prof-i, 0) * 40ms) !important; } body.cs-route-account .cs-profile-block legend { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 2px !important; margin: 0 0 4px !important; font: 700 12px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-profile-block legend span { display: inline-grid !important; place-items: center !important; min-width: 26px !important; height: 26px !important; padding: 0 7px !important; border-radius: 999px !important; background: #1a1510 !important; color: #fffaf3 !important; font: 800 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-profile-block__lede { margin: 0 0 10px !important; font: 500 12.5px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-route-account .cs-profile-fields { display: grid !important; gap: 10px !important; } body.cs-route-account .cs-profile-fields--2 { grid-template-columns: 1fr !important; } body.cs-route-account .cs-profile-field { display: grid !important; gap: 6px !important; margin: 0 !important; min-width: 0 !important; } body.cs-route-account .cs-profile-field > span { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #65584e !important; } body.cs-route-account .cs-profile-field__lock { display: inline-flex !important; align-items: center !important; gap: 4px !important; font: 750 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #8d663c !important; } body.cs-route-account .cs-profile-field__lock svg { width: 12px !important; height: 12px !important; display: block !important; } body.cs-route-account .cs-profile-field .cs-input { width: 100% !important; min-height: 48px !important; padding: 12px 14px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: #fffdf9 !important; font: 500 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; box-sizing: border-box !important; } body.cs-route-account .cs-profile-field--readonly .cs-input, body.cs-route-account .cs-profile-field .cs-input--readonly, body.cs-route-account .cs-profile-field .cs-input--locked { background: #f7f0e6 !important; color: #6f6258 !important; } body.cs-route-account .cs-profile-field__help { margin: 8px 0 0 !important; font: 500 11.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-route-account .cs-profile-studio__note { margin: 0 !important; padding: 0 2px !important; font: 500 11.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-profile-studio .cs-form-status { min-height: 16px !important; margin: 0 !important; font: 650 12px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #8d663c !important; } body.cs-route-account .cs-profile-studio__actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; position: sticky !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; z-index: 5 !important; padding: 10px !important; border-radius: 18px !important; background: rgba(255, 253, 249, .92) !important; border: 1px solid rgba(42, 32, 22, .08) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 14px 32px rgba(42, 32, 22, .1) !important; } body.cs-route-account .cs-profile-studio__save { min-height: 48px !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; cursor: pointer !important; background: #1a1510 !important; color: #fffaf3 !important; font: 750 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .16) !important; } body.cs-route-account .cs-profile-studio__save:active { transform: scale(.985) !important; } body.cs-route-account .cs-profile-studio__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 0 14px !important; border-radius: 14px !important; border: 1px solid rgba(42, 32, 22, .12) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; } body.cs-route-account #profilePanel { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-profile-studio__hero, body.cs-route-account .cs-profile-block { animation: none !important; } body.cs-route-account .cs-profile-studio__ring-progress { transition: none !important; } } /* Payments studio */ body.cs-route-account .cs-pay-studio { display: grid !important; gap: 14px !important; margin: 0 !important; } body.cs-route-account .cs-pay-studio__hero { position: relative !important; overflow: hidden !important; display: grid !important; gap: 10px !important; padding: 20px 18px 16px !important; border-radius: 24px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: radial-gradient(110% 90% at 0% 0%, rgba(181, 138, 74, .18), transparent 52%), linear-gradient(160deg, #fffdf9 0%, #f3ebe1 48%, #fff8f1 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 32px rgba(38, 29, 22, .05) !important; animation: csSkinReveal .5s cubic-bezier(.22, 1, .36, 1) both !important; } body.cs-route-account .cs-pay-studio__hero::before { content: "" !important; position: absolute !important; inset: auto -24% -46% 40% !important; height: 72% !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(181, 138, 74, .12), transparent 68%) !important; pointer-events: none !important; } body.cs-route-account .cs-pay-studio__hero > * { position: relative !important; z-index: 1 !important; } body.cs-route-account .cs-pay-studio__hero-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body.cs-route-account .cs-pay-studio__icon { width: 42px !important; height: 42px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; color: #8d663c !important; background: rgba(255, 253, 249, .75) !important; border: 1px solid rgba(181, 138, 74, .22) !important; } body.cs-route-account .cs-pay-studio__mark { width: 20px !important; height: 20px !important; display: block !important; } body.cs-route-account .cs-pay-studio__badge { display: inline-flex !important; align-items: center !important; min-height: 26px !important; padding: 0 11px !important; border-radius: 999px !important; background: rgba(61, 122, 84, .12) !important; color: #2f5f42 !important; font: 750 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; } body.cs-route-account .cs-pay-studio__kicker { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 10px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(181, 138, 74, .12) !important; color: #8d663c !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; } body.cs-route-account .cs-pay-studio__hero h2 { margin: 0 !important; font: 500 30px/.95 "Cormorant Garamond", Georgia, serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.02em !important; } body.cs-route-account .cs-pay-studio__hero p { margin: 0 !important; font: 500 13.5px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-pay-studio__logos { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } body.cs-route-account .cs-pay-studio__logos span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 5px 10px !important; border-radius: 11px !important; background: rgba(255, 253, 249, .88) !important; border: 1px solid rgba(42, 32, 22, .08) !important; } body.cs-route-account .cs-pay-studio__logos img { display: block !important; height: 14px !important; width: auto !important; max-width: 64px !important; object-fit: contain !important; } body.cs-route-account .cs-pay-methods { display: grid !important; gap: 12px !important; margin: 0 !important; } body.cs-route-account .cs-pay-method { display: grid !important; gap: 11px !important; padding: 16px 14px 14px !important; border-radius: 20px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: linear-gradient(180deg, #fffefb, #faf4ec) !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .03) !important; animation: csSkinReveal .48s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(40ms + var(--cs-pay-i, 0) * 45ms) !important; } body.cs-route-account .cs-pay-method--bank { background: radial-gradient(120% 90% at 100% 0%, rgba(181, 138, 74, .12), transparent 55%), linear-gradient(165deg, #fffdf9, #f3e8db) !important; } body.cs-route-account .cs-pay-method__head { display: flex !important; align-items: center !important; gap: 10px !important; } body.cs-route-account .cs-pay-method__icon { width: 40px !important; height: 40px !important; border-radius: 13px !important; display: grid !important; place-items: center !important; color: #8d663c !important; background: rgba(181, 138, 74, .1) !important; border: 1px solid rgba(181, 138, 74, .18) !important; } body.cs-route-account .cs-pay-method__icon svg { width: 18px !important; height: 18px !important; display: block !important; } body.cs-route-account .cs-pay-method__head em { display: inline-grid !important; place-items: center !important; min-width: 24px !important; height: 20px !important; padding: 0 6px !important; margin: 0 0 3px !important; border-radius: 999px !important; background: #1a1510 !important; color: #fffaf3 !important; font: 800 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; } body.cs-route-account .cs-pay-method__head h3 { margin: 0 !important; font: 700 15px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-pay-method > p { margin: 0 !important; font: 500 13px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-pay-method__steps { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 7px !important; } body.cs-route-account .cs-pay-method__steps li { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 9px !important; align-items: center !important; min-height: 38px !important; padding: 7px 9px !important; border-radius: 11px !important; border: 1px solid rgba(42, 32, 22, .07) !important; background: rgba(255, 253, 249, .9) !important; font: 600 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #3d342c !important; } body.cs-route-account .cs-pay-method__steps span { display: inline-grid !important; place-items: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #1a1510 !important; color: #fffaf3 !important; font: 800 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-pay-method__cta { justify-self: stretch !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 0 14px !important; border-radius: 12px !important; text-decoration: none !important; background: #1a1510 !important; color: #fffaf3 !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .14) !important; } body.cs-route-account .cs-pay-method__cta--ghost { background: #fffdf9 !important; color: var(--cs-acc-ink) !important; border: 1px solid rgba(42, 32, 22, .14) !important; box-shadow: none !important; } body.cs-route-account .cs-pay-method__cta:active { transform: scale(.985) !important; } body.cs-route-account .cs-pay-note { display: grid !important; gap: 10px !important; padding: 16px 14px 14px !important; border-radius: 20px !important; border: 1px solid rgba(42, 32, 22, .08) !important; background: linear-gradient(180deg, #fffefb, #faf4ec) !important; box-shadow: 0 8px 22px rgba(42, 32, 22, .03) !important; } body.cs-route-account .cs-pay-note__head { display: flex !important; align-items: flex-start !important; gap: 10px !important; } body.cs-route-account .cs-pay-note__head > span { display: inline-grid !important; place-items: center !important; min-width: 28px !important; height: 28px !important; padding: 0 7px !important; border-radius: 999px !important; background: #1a1510 !important; color: #fffaf3 !important; font: 800 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-pay-note__head h3 { margin: 0 !important; font: 700 14px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-pay-note__head p { margin: 3px 0 0 !important; font: 500 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a6f64 !important; } body.cs-route-account .cs-pay-note > p { margin: 0 !important; font: 500 12.5px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-pay-note__actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } body.cs-route-account .cs-pay-note__btn { min-height: 46px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(42, 32, 22, .14) !important; background: #fffdf9 !important; color: var(--cs-acc-ink) !important; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; cursor: pointer !important; } body.cs-route-account .cs-pay-note__btn--dark { border-color: transparent !important; background: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 10px 20px rgba(26, 21, 16, .14) !important; } body.cs-route-account .cs-pay-note__btn:active { transform: scale(.985) !important; } body.cs-route-account #paymentsPanel { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-pay-studio__hero, body.cs-route-account .cs-pay-method, body.cs-route-account .cs-pay-note { animation: none !important; } } /* Club panel */ body.cs-route-account .cs-club-hero { padding: 26px 22px !important; min-height: 0 !important; border-radius: 22px !important; } body.cs-route-account .cs-club-hero h2 { font-size: 30px !important; } body.cs-route-account .cs-club-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } body.cs-route-account .cs-club-actions .cs-pill-btn { flex: 1 1 auto !important; } body.cs-route-account .cs-level-journey, body.cs-route-account .cs-benefit-grid, body.cs-route-account .cs-club-bottom, body.cs-route-account .cs-tier-grid, body.cs-route-account .cs-tier-grid--premium { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important; } body.cs-route-account .cs-tier-stack { display: grid !important; gap: 0 !important; min-width: 0 !important; } body.cs-route-account .cs-tier-card { position: relative !important; z-index: 2 !important; min-height: 132px !important; border-radius: 22px !important; } body.cs-route-account .cs-tier-card__hint { position: absolute !important; right: 14px !important; bottom: 14px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .12em !important; text-transform: uppercase !important; opacity: .55 !important; } body.cs-route-account .cs-tier-card__hint:after { content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; margin-left: 6px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg) translateY(-2px) !important; transition: transform .28s ease !important; } body.cs-route-account .cs-tier-stack.is-open .cs-tier-card__hint:after { transform: rotate(225deg) translateY(-1px) !important; } body.cs-route-account .cs-tier-drawer { display: grid !important; grid-template-rows: 0fr !important; margin-top: -16px !important; position: relative !important; z-index: 1 !important; transition: grid-template-rows .48s cubic-bezier(.22, 1, .36, 1) !important; } body.cs-route-account .cs-tier-stack.is-open .cs-tier-drawer { grid-template-rows: 1fr !important; } body.cs-route-account .cs-tier-drawer__clip { overflow: hidden !important; min-height: 0 !important; } body.cs-route-account .cs-tier-drawer__inner { margin: 0 !important; padding: 26px 16px 16px !important; border-radius: 0 0 20px 20px !important; transform: translateY(-8px) !important; opacity: .3 !important; transition: transform .48s cubic-bezier(.22, 1, .36, 1), opacity .36s ease !important; } body.cs-route-account .cs-tier-stack.is-open .cs-tier-drawer__inner { transform: none !important; opacity: 1 !important; } body.cs-route-account .cs-tier-drawer--essential .cs-tier-drawer__inner { background: linear-gradient(165deg, #4a3428 0%, #2c1d16 100%) !important; color: #fff8ef !important; } body.cs-route-account .cs-tier-drawer--signature .cs-tier-drawer__inner { background: linear-gradient(165deg, #f0d7a0 0%, #c9964a 100%) !important; color: #2a1c10 !important; } body.cs-route-account .cs-tier-drawer--elite .cs-tier-drawer__inner { background: linear-gradient(165deg, #8f2746 0%, #3d0c1c 100%) !important; color: #fff5f5 !important; } body.cs-route-account .cs-tier-drawer .cs-tier-detail__kicker { color: inherit !important; opacity: .7 !important; } body.cs-route-account .cs-tier-drawer--essential .cs-tier-detail__kicker, body.cs-route-account .cs-tier-drawer--elite .cs-tier-detail__kicker { color: #e8c690 !important; opacity: 1 !important; } body.cs-route-account .cs-tier-drawer--signature .cs-tier-detail__kicker { color: #7a5220 !important; opacity: 1 !important; } body.cs-route-account .cs-tier-drawer h3 { margin: 0 0 8px !important; font: 500 22px/1.1 "Cormorant Garamond", Georgia, serif !important; color: inherit !important; } body.cs-route-account .cs-tier-drawer .cs-tier-detail__req, body.cs-route-account .cs-tier-drawer li, body.cs-route-account .cs-tier-drawer .cs-tier-detail__note { color: inherit !important; } body.cs-route-account .cs-tier-drawer ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid !important; gap: 8px !important; } body.cs-route-account .cs-tier-drawer li { position: relative !important; padding-left: 16px !important; font: 500 13px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-route-account .cs-tier-drawer li:before { content: "" !important; position: absolute !important; left: 0 !important; top: .55em !important; width: 6px !important; height: 6px !important; border-radius: 99px !important; background: currentColor !important; opacity: .4 !important; } body.cs-route-account .cs-tier-details { display: none !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-tier-drawer, body.cs-route-account .cs-tier-drawer__inner, body.cs-route-account .cs-tier-card__hint:after { transition: none !important; } } body.cs-route-account .cs-loyalty-metrics { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } body.cs-route-account .cs-loyalty-metrics span { display: grid !important; gap: 6px !important; min-width: 0 !important; padding: 12px 6px !important; border-radius: 12px !important; text-align: center !important; font: 700 8.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; white-space: normal !important; word-break: break-word; } body.cs-route-account .cs-loyalty-metrics span b { font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0 !important; } body.cs-route-account .cs-point-row, body.cs-route-account .cs-point-table-head { grid-template-columns: 1fr auto !important; gap: 6px 10px !important; padding-left: 16px !important; padding-right: 16px !important; } body.cs-route-account .cs-point-table-head { display: none !important; } body.cs-route-account .cs-point-row { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; } /* Club points ledger v2 */ body.cs-route-account .cs-ledger--v2 { margin: 0 !important; padding: 18px 14px 12px !important; border-radius: 22px !important; background: radial-gradient(120% 80% at 100% 0%, rgba(181, 138, 74, .12), transparent 55%), linear-gradient(165deg, #fffdf9 0%, #f7efe4 100%) !important; box-shadow: 0 10px 28px rgba(42, 32, 22, .05) !important; overflow: hidden !important; } body.cs-route-account .cs-ledger__head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 14px !important; padding: 0 2px !important; } body.cs-route-account .cs-ledger__kicker { display: block !important; margin: 0 0 4px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-route-account .cs-ledger__head h2 { margin: 0 !important; font: 600 24px/1.05 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-ledger__count { font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-style: normal !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-ledger__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 0 !important; } body.cs-route-account .cs-ledger__item { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; gap: 12px !important; align-items: stretch !important; padding: 13px 2px !important; position: relative !important; animation: csLedgerReveal .48s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(var(--cs-ledger-i, 0) * 55ms) !important; } body.cs-route-account .cs-ledger__item:not(:last-child) { border-bottom: 1px solid rgba(42, 32, 22, .06) !important; } body.cs-route-account .cs-ledger__rail { position: relative !important; display: flex !important; justify-content: center !important; padding-top: 2px !important; } body.cs-route-account .cs-ledger__item:not(:last-child) .cs-ledger__rail:after { content: "" !important; position: absolute !important; top: 38px !important; bottom: -13px !important; left: 50% !important; width: 1px !important; background: linear-gradient(180deg, rgba(181, 138, 74, .35), rgba(42, 32, 22, .06)) !important; transform: translateX(-50%) !important; } body.cs-route-account .cs-ledger__dot { width: 36px !important; height: 36px !important; border-radius: 12px !important; display: grid !important; place-items: center !important; color: #8d663c !important; background: linear-gradient(165deg, #fffaf3, #efe4d6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(42, 32, 22, .06) !important; } body.cs-route-account .cs-ledger__dot .cs-hub-svg { width: 17px !important; height: 17px !important; } body.cs-route-account .cs-ledger__item.is-pending .cs-ledger__dot { color: #8a641d !important; background: linear-gradient(165deg, #fff8e8, #f3e4c4) !important; } body.cs-route-account .cs-ledger__item.is-reversed .cs-ledger__dot { color: #9a3f2c !important; background: linear-gradient(165deg, #fff1ed, #f0d8d2) !important; } body.cs-route-account .cs-ledger__body { min-width: 0 !important; display: grid !important; gap: 4px !important; padding: 1px 0 2px !important; } body.cs-route-account .cs-ledger__top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } body.cs-route-account .cs-ledger__delta { font: 700 18px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.02em !important; color: var(--cs-acc-ink) !important; font-variant-numeric: tabular-nums; } body.cs-route-account .cs-ledger__item.is-spend .cs-ledger__delta { color: #9a3f2c !important; } body.cs-route-account .cs-ledger__status { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 9px !important; border-radius: 999px !important; font: 700 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; background: #e9f4ea !important; color: #2f6b3a !important; } body.cs-route-account .cs-ledger__status.is-pending { background: #fdf1da !important; color: #8a641d !important; } body.cs-route-account .cs-ledger__status.is-reversed { background: #f7e6e2 !important; color: #9a3f2c !important; } body.cs-route-account .cs-ledger__title { margin: 0 !important; font: 600 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-ledger__meta { margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; font: 500 11.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-ledger__order { font-weight: 700 !important; color: #8d663c !important; } @keyframes csLedgerReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-ledger__item { animation: none !important; } } /* Notifications + toggles */ body.cs-route-account .cs-notification-list { display: grid !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; } body.cs-route-account .cs-notification-item { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 15px 16px !important; border-radius: 16px !important; border: 1px solid var(--cs-acc-line) !important; background: var(--cs-acc-surface) !important; } body.cs-route-account .cs-notification-item.is-unread { border-color: rgba(181, 138, 74, .35) !important; background: #fff8ee !important; } body.cs-route-account .cs-notification-item span { flex: 0 0 auto; align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: rgba(181, 138, 74, .14); color: var(--cs-acc-gold-deep); font: 800 9px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; } body.cs-route-account .cs-toggle-grid, body.cs-route-account .cs-toggle-grid--premium { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 !important; margin: 0 0 14px !important; } body.cs-route-account .cs-premium-toggle { position: relative !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 2px 14px !important; align-items: center !important; min-height: 72px !important; padding: 16px 16px !important; border: 1px solid var(--cs-acc-line) !important; border-radius: 18px !important; background: linear-gradient(160deg, #fffdf9, #faf3ea) !important; cursor: pointer !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .16s ease !important; -webkit-tap-highlight-color: transparent; } body.cs-route-account .cs-premium-toggle:active:not(.cs-premium-toggle--locked) { transform: scale(.99) !important; } body.cs-route-account .cs-premium-toggle.is-on, body.cs-route-account .cs-premium-toggle:has(.cs-premium-toggle__input:checked) { border-color: rgba(181, 138, 74, .34) !important; background: linear-gradient(160deg, #fffaf3, #f6eadc) !important; box-shadow: 0 8px 22px rgba(45, 33, 23, .045) !important; } body.cs-route-account .cs-premium-toggle__input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none !important; } body.cs-route-account .cs-premium-toggle__track { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 48px !important; height: 28px !important; margin-top: 0 !important; border-radius: 999px !important; border: 1px solid rgba(42, 32, 24, .1) !important; background: #e7ddd1 !important; position: relative !important; transition: background .22s ease, border-color .22s ease !important; flex: 0 0 auto !important; } body.cs-route-account .cs-premium-toggle__thumb { position: absolute !important; top: 2px !important; left: 2px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #fffdf9 !important; box-shadow: 0 2px 8px rgba(38, 29, 22, .18) !important; transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease !important; } body.cs-route-account .cs-premium-toggle.is-on .cs-premium-toggle__track, body.cs-route-account .cs-premium-toggle:has(.cs-premium-toggle__input:checked) .cs-premium-toggle__track { background: linear-gradient(135deg, #c9a06a, #9a6d35) !important; border-color: rgba(154, 109, 53, .45) !important; } body.cs-route-account .cs-premium-toggle.is-on .cs-premium-toggle__thumb, body.cs-route-account .cs-premium-toggle:has(.cs-premium-toggle__input:checked) .cs-premium-toggle__thumb { transform: translateX(20px) !important; background: #fffaf3 !important; } body.cs-route-account .cs-premium-toggle__copy { grid-column: 2 !important; min-width: 0 !important; display: grid !important; gap: 4px !important; } body.cs-route-account .cs-premium-toggle__label { font: 700 13.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; letter-spacing: -.01em !important; } body.cs-route-account .cs-premium-toggle__desc { font-size: 12px !important; line-height: 1.45 !important; color: var(--cs-acc-muted) !important; } body.cs-route-account .cs-premium-toggle--locked { cursor: default !important; opacity: .92 !important; } body.cs-route-account .cs-premium-toggle--locked .cs-premium-toggle__track { background: linear-gradient(135deg, #b8925d, #8a6232) !important; border-color: rgba(138, 98, 50, .4) !important; } body.cs-route-account .cs-premium-toggle--locked .cs-premium-toggle__thumb { transform: translateX(20px) !important; } body.cs-route-account .cs-premium-toggle__input:focus-visible + .cs-premium-toggle__track { box-shadow: 0 0 0 3px rgba(178, 132, 76, .28) !important; } body.cs-route-account #notificationSaveStatus { min-height: 20px; margin: 0 0 12px; font: 650 12.5px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--cs-acc-ink-soft); } body.cs-route-account .cs-panel-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; } body.cs-route-account .cs-panel-actions .cs-pill-btn { width: 100% !important; justify-content: center !important; } /* Plain checkbox toggle cards (non-premium) */ body.cs-route-account .cs-toggle-grid label:not(.cs-premium-toggle) { min-height: 0 !important; display: grid !important; grid-template-columns: auto 1fr !important; gap: 6px 12px !important; align-items: start !important; padding: 15px 16px !important; border: 1px solid var(--cs-acc-line) !important; border-radius: 16px !important; background: var(--cs-acc-surface) !important; } body.cs-route-account .cs-toggle-grid label:not(.cs-premium-toggle) input { margin-top: 3px !important; width: 20px; height: 20px; accent-color: var(--cs-acc-gold-deep) !important; } body.cs-route-account .cs-toggle-grid label:not(.cs-premium-toggle) span { font: 700 13px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-toggle-grid label:not(.cs-premium-toggle) small { grid-column: 2 !important; font-size: 12px !important; line-height: 1.45 !important; color: var(--cs-acc-muted) !important; } /* Empty states + content help + status pills */ body.cs-route-account .cs-empty { display: grid !important; gap: 9px !important; padding: 24px 20px !important; border: 1px solid var(--cs-acc-line) !important; border-radius: 20px !important; background: linear-gradient(180deg, #fffdf9, #faf3ea) !important; } body.cs-route-account .cs-empty strong { font: 500 22px/1.15 "Cormorant Garamond", Georgia, serif !important; color: var(--cs-acc-ink) !important; } body.cs-route-account .cs-empty p { margin: 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--cs-acc-ink-soft) !important; } body.cs-route-account .cs-empty .cs-pill-btn { justify-self: start !important; margin-top: 4px !important; } body.cs-route-account .cs-content-help-card { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 18px !important; margin-top: 14px !important; } body.cs-route-account .cs-status-pill { min-height: 26px !important; border-radius: 999px !important; padding: 0 11px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .05em !important; } body.cs-route-account *:focus-visible { outline: 2px solid var(--cs-acc-gold) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { body.cs-route-account .cs-account-nav a, body.cs-route-account .cs-pill-btn, body.cs-route-account .cs-mini-btn, body.cs-route-account .cs-logout, body.cs-route-account .cs-input { transition: none !important; } } .cs-password-wrap { position: relative; display: block; } .cs-password-wrap input { padding-right: 86px !important; } .cs-password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 64px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(42, 32, 22, .14); background: #fffdf9; color: #1a1510; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(26, 18, 11, .04); } .cs-password-toggle:active { transform: translateY(-50%) scale(.98); } body.cs-mobile-v1-active .favorites-page .price-row, body.cs-mobile-v1-active.cs-route-listing .price-row { align-items: stretch !important; } body.cs-mobile-v1-active .favorites-page .price-row .btn, body.cs-mobile-v1-active .favorites-page [data-add-cart] { width: 100% !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } /* Homepage Smart Routine — premium mobile composition */ body.cs-mobile-v1-active #smart-routine.cs-mobile-smart-routine { --sr-mobile-ink: #1c1611; --sr-mobile-muted: #71675e; --sr-mobile-line: rgba(42,32,22,.12); --sr-mobile-gold: #a67b43; margin: 0 !important; padding: 44px 0 48px !important; overflow: hidden !important; background: radial-gradient(circle at 100% 0, rgba(181,138,74,.13), transparent 27%), linear-gradient(180deg, #f4ede5 0%, #eee5db 100%) !important; } body.cs-mobile-v1-active #smart-routine > .container { width: 100% !important; max-width: 620px !important; margin-inline: auto !important; padding: 0 14px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__shell { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; padding: 25px 18px 19px !important; overflow: hidden !important; border: 1px solid rgba(42,32,22,.12) !important; border-radius: 30px !important; background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(249,243,235,.68)), #f9f4ee !important; box-shadow: 0 24px 64px rgba(52,39,28,.10) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__shell::before { border-radius: 29px; background: radial-gradient(circle at 88% 2%, rgba(181,138,74,.12), transparent 28%), linear-gradient(120deg, rgba(255,255,255,.52), transparent 42%) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__left, body.cs-mobile-v1-active #smart-routine .smart-routine__middle, body.cs-mobile-v1-active #smart-routine .smart-routine__right { min-width: 0 !important; padding: 0 !important; border: 0 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__middle, body.cs-mobile-v1-active #smart-routine .smart-routine__right { margin: 25px 0 0 !important; padding: 25px 0 0 !important; border-top: 1px solid var(--sr-mobile-line) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__eyebrow { margin: 0 0 13px !important; color: var(--sr-mobile-gold) !important; font: 750 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .23em !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__title { max-width: 330px !important; margin: 0 !important; color: var(--sr-mobile-ink) !important; font: 400 clamp(35px, 10.2vw, 42px)/.98 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.028em !important; text-wrap: balance; } body.cs-mobile-v1-active #smart-routine .smart-routine__lede { max-width: 325px !important; margin: 17px 0 18px !important; color: var(--sr-mobile-muted) !important; font: 450 13px/1.65 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__badge { min-height: 34px !important; padding: 0 13px !important; border-color: rgba(166,123,67,.22) !important; background: rgba(255,253,249,.72) !important; box-shadow: 0 8px 22px rgba(42,32,22,.04) !important; color: #856033 !important; font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__badge img { width: 18px !important; height: 18px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__panel { margin-top: 21px !important; padding: 17px !important; border: 1px solid var(--sr-mobile-line) !important; border-radius: 22px !important; background: rgba(255,253,249,.62) !important; box-shadow: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__panel + .smart-routine__panel { margin-top: 12px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__panel-title, body.cs-mobile-v1-active #smart-routine .smart-routine__column-title { gap: 10px !important; margin: 0 0 15px !important; color: var(--sr-mobile-ink) !important; font: 500 19px/1.08 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.01em !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__number { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; background: #211914 !important; box-shadow: 0 8px 18px rgba(42,32,22,.13) !important; font-size: 11px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goals { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal { min-width: 0 !important; min-height: 68px !important; display: grid !important; grid-template-columns: 36px minmax(0,1fr) !important; gap: 9px !important; align-items: center !important; justify-content: initial !important; padding: 10px 11px !important; border: 1px solid rgba(42,32,22,.10) !important; border-radius: 17px !important; background: rgba(255,255,255,.72) !important; color: #29211b !important; text-align: left !important; box-shadow: 0 7px 20px rgba(42,32,22,.035) !important; transform: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal:last-child:nth-child(odd) { grid-column: 1 / -1; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal > img { width: 36px !important; height: 36px !important; padding: 7px !important; border: 1px solid rgba(166,123,67,.16); border-radius: 50%; background: #f7efe6; object-fit: contain !important; image-rendering: auto; filter: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal > span:last-child { min-width: 0; font: 700 11.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.012em !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal[aria-pressed="true"] { border-color: #211914 !important; background: #211914 !important; color: #fffaf4 !important; box-shadow: 0 12px 24px rgba(42,32,22,.15) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal[aria-pressed="true"] > img { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.09); filter: brightness(0) invert(1) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal-check { top: 6px !important; right: 6px !important; width: 19px !important; height: 19px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal-check img { width: 11px !important; height: 11px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__selection-line { min-height: 35px; margin: 12px 0 0 !important; padding: 11px 0 0 !important; border-top: 1px solid var(--sr-mobile-line) !important; font-size: 10.5px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__clear { min-width: 44px; min-height: 30px; text-align: right; font-size: 10.5px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__skin-title { margin: 0 0 12px !important; font-size: 11.5px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__skin-types { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 7px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__skin-pill { min-width: 0 !important; min-height: 42px !important; padding: 0 5px !important; border-radius: 13px !important; font-size: 10.5px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__skin-pill[aria-pressed="true"] { background: #211914 !important; box-shadow: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__column-title small { margin-top: 4px !important; color: var(--sr-mobile-muted) !important; font: 550 10.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__steps { display: flex !important; gap: 9px !important; margin: 16px -18px 0 !important; padding: 0 18px 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.cs-mobile-v1-active #smart-routine .smart-routine__steps::-webkit-scrollbar, body.cs-mobile-v1-active #smart-routine .smart-routine__product-flow::-webkit-scrollbar { display: none; } body.cs-mobile-v1-active #smart-routine .smart-routine__steps::before { display: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step { position: relative; flex: 0 0 142px; display: block !important; scroll-snap-align: start; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-index { position: absolute; top: 8px; left: 8px; z-index: 2; width: 24px !important; height: 24px !important; border: 0 !important; background: rgba(255,253,249,.92) !important; color: #7f5b31 !important; font-size: 9px !important; box-shadow: 0 5px 12px rgba(42,32,22,.08) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-card { min-height: 122px !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 45px auto !important; gap: 8px !important; align-content: center; justify-items: center; padding: 13px 10px 12px !important; border: 1px solid var(--sr-mobile-line) !important; border-radius: 19px !important; background: rgba(255,253,249,.70) !important; text-align: center; box-shadow: none !important; transform: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-icon { width: 45px !important; height: 45px !important; border-color: rgba(166,123,67,.16) !important; background: #f7efe6 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-icon img { width: 27px !important; height: 27px !important; object-fit: contain !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-copy strong { margin: 0 0 3px !important; font-size: 11px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-copy span { font-size: 9.5px !important; line-height: 1.35 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__step-arrow { display: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__note { grid-template-columns: 31px minmax(0,1fr) !important; gap: 10px !important; margin: 12px 0 0 !important; padding: 13px !important; border-color: rgba(166,123,67,.17) !important; border-radius: 16px !important; background: rgba(239,226,209,.54) !important; font-size: 10.5px !important; line-height: 1.55 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__note img { width: 31px !important; height: 31px !important; padding: 6px; border-radius: 50%; background: rgba(255,253,249,.72); } body.cs-mobile-v1-active #smart-routine .smart-routine__right-head { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; align-items: start !important; margin: 0 0 17px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__routine-title { margin: 0 !important; font: 500 20px/1.08 "Cormorant Garamond", Georgia, serif !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__routine-title .smart-routine__number { margin-right: 7px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__routine-subtitle { margin: 8px 0 0 38px !important; color: var(--sr-mobile-muted) !important; font-size: 10.5px !important; line-height: 1.45 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__match { min-height: 30px !important; margin: 0 !important; padding: 0 9px !important; font-size: 9px !important; white-space: nowrap; } body.cs-mobile-v1-active #smart-routine .smart-routine__match img { width: 14px !important; height: 14px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__daypart { margin: 12px 0 0 !important; padding: 14px !important; overflow: hidden !important; border: 1px solid var(--sr-mobile-line) !important; border-radius: 21px !important; background: rgba(255,253,249,.58) !important; box-shadow: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__daypart-title { margin: 0 0 11px !important; color: #805b31 !important; font-size: 9.5px !important; letter-spacing: .17em !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__daypart-title img { width: 22px !important; height: 22px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-flow, body.cs-mobile-v1-active #smart-routine .smart-routine__daypart--night .smart-routine__product-flow { display: flex !important; grid-template-columns: none !important; gap: 10px !important; margin: 0 -14px !important; padding: 0 14px 5px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-flow:focus-visible { outline: 2px solid rgba(166,123,67,.55); outline-offset: -2px; border-radius: 14px; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-wrap { flex: 0 0 188px !important; min-width: 188px !important; scroll-snap-align: start; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-card { min-height: 244px !important; height: 100% !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 112px auto !important; overflow: hidden !important; border: 1px solid rgba(42,32,22,.10) !important; border-radius: 17px !important; background: #fffdf9 !important; box-shadow: 0 9px 24px rgba(42,32,22,.055) !important; transform: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-media { min-height: 112px !important; height: 112px !important; aspect-ratio: auto !important; padding: 10px !important; background: linear-gradient(180deg,#fff,#f7efe7) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-media img { width: 100% !important; height: 94px !important; max-height: 94px !important; object-fit: contain !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-info { align-self: stretch !important; padding: 10px 11px 12px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-step { margin: 0 0 4px !important; font-size: 8.5px !important; letter-spacing: .1em !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-name { min-height: 32px !important; font-size: 11px !important; line-height: 1.38 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-reason { display: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-price { margin-top: 7px !important; font-size: 12px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__connector { display: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-remove { top: 5px !important; right: 5px !important; width: 44px !important; height: 44px !important; opacity: 1 !important; transform: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__product-remove svg { width: 26px; height: 26px; padding: 6px; border: 1px solid rgba(42,32,22,.12); border-radius: 50%; background: rgba(255,253,249,.90); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } body.cs-mobile-v1-active #smart-routine .smart-routine__empty { flex: 1 0 100%; min-height: 102px !important; display: grid !important; align-content: center; padding: 18px !important; border: 1px dashed rgba(42,32,22,.14) !important; border-radius: 16px !important; background: rgba(255,255,255,.52) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__empty strong { font: 500 18px/1.1 "Cormorant Garamond", Georgia, serif !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__empty span { margin-top: 7px !important; font-size: 10.5px !important; line-height: 1.5 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__bundle-offer { grid-template-columns: 36px minmax(0,1fr) auto !important; gap: 10px !important; margin: 12px 0 0 !important; padding: 12px !important; border-radius: 16px !important; box-shadow: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__offer-icon { width: 36px !important; height: 36px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__bundle-offer strong { font-size: 11px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__bundle-offer span { font-size: 9.5px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__bundle-offer b { grid-column: auto !important; font-size: 10px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__meta-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin: 12px 0 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__meta-item { min-height: 66px !important; grid-template-columns: 26px minmax(0,1fr) !important; gap: 8px !important; padding: 10px !important; border: 1px solid var(--sr-mobile-line) !important; border-radius: 15px !important; background: rgba(255,253,249,.64); } body.cs-mobile-v1-active #smart-routine .smart-routine__meta-item img { width: 24px !important; height: 24px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__meta-item span { font-size: 9px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__meta-item strong { margin-top: 3px !important; font-size: 12px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin: 12px 0 0 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__btn { min-width: 0 !important; min-height: 54px !important; padding: 8px 10px !important; border-radius: 15px !important; font-size: 10.5px !important; line-height: 1.25 !important; white-space: normal !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__btn--primary { grid-column: 1 / -1; background: #1d1712 !important; box-shadow: 0 12px 24px rgba(42,32,22,.16) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__btn img { width: 19px !important; height: 19px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__tertiary { min-height: 44px; margin: 7px auto 0 !important; font-size: 10.5px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__privacy { align-items: flex-start !important; margin: 8px 0 0 !important; padding: 0 5px; text-align: left; font-size: 9px !important; line-height: 1.45 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__trustbar { grid-column: 1 !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin: 18px 0 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__trust-item { min-height: 68px !important; display: grid !important; grid-template-columns: 30px minmax(0,1fr) !important; gap: 8px !important; padding: 10px !important; border: 1px solid var(--sr-mobile-line) !important; border-radius: 15px !important; background: rgba(255,253,249,.54); } body.cs-mobile-v1-active #smart-routine .smart-routine__trust-item img { width: 27px !important; height: 27px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__trust-item strong { font-size: 10px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__trust-item span { margin-top: 3px !important; font-size: 8.5px !important; line-height: 1.3 !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__trust-item--avatars { grid-template-columns: 42px minmax(0,1fr) !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__avatars { min-width: 42px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__avatar { width: 24px !important; height: 24px !important; font-size: 8px !important; } body.cs-mobile-v1-active .smart-routine__modal { z-index: 7200 !important; align-items: flex-end !important; padding: 0 !important; background: rgba(18,13,8,.48) !important; } body.cs-mobile-v1-active .smart-routine__modal-card { width: 100% !important; max-height: 88dvh !important; border-radius: 28px 28px 0 0 !important; } body.cs-mobile-v1-active .smart-routine__modal-head { padding: 19px 18px 14px !important; } body.cs-mobile-v1-active .smart-routine__modal-head h3 { font-size: 27px !important; } body.cs-mobile-v1-active .smart-routine__modal-head p { max-width: 280px; font-size: 10.5px !important; line-height: 1.45 !important; } body.cs-mobile-v1-active .smart-routine__modal-close { width: 44px !important; height: 44px !important; flex: 0 0 44px; } body.cs-mobile-v1-active .smart-routine__modal-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; } body.cs-mobile-v1-active .smart-routine__alternatives { padding: 16px 16px calc(16px + var(--cs-mobile-safe-bottom)) !important; } body.cs-mobile-v1-active .smart-routine__alt-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; } body.cs-mobile-v1-active .smart-routine__alt-card { grid-template-rows: 86px auto auto !important; padding: 10px !important; border-radius: 16px !important; } body.cs-mobile-v1-active .smart-routine__alt-card img { height: 82px !important; } body.cs-mobile-v1-active .smart-routine__toast { z-index: 7300 !important; bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 12px) !important; max-width: calc(100vw - 28px) !important; border-radius: 16px !important; text-align: center; font-size: 11px !important; } @media (max-width: 374px) { body.cs-mobile-v1-active #smart-routine .smart-routine__shell { padding-inline: 15px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal { grid-template-columns: 32px minmax(0,1fr) !important; padding-inline: 8px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__goal > img { width: 32px !important; height: 32px !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__right-head { grid-template-columns: 1fr !important; } body.cs-mobile-v1-active #smart-routine .smart-routine__match { justify-self: start; margin-left: 38px !important; } } @media (prefers-reduced-motion: reduce) { body.cs-mobile-v1-active #smart-routine *, body.cs-mobile-v1-active .smart-routine__modal * { scroll-behavior: auto !important; transition: none !important; } } /* Content, legal and institutional pages — premium mobile system */ body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) #cs-mobile-v1-page-stage { display: block !important; min-height: 100dvh; background: radial-gradient(circle at 100% 0, rgba(181,138,74,.10), transparent 24rem), linear-gradient(180deg, #f4eee7 0%, #eee5dc 58%, #f7f2ec 100%) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page.cs-mobile-content-ready { --cs-content-ink: #1d1712; --cs-content-muted: #6d6259; --cs-content-line: rgba(44,34,25,.11); --cs-content-gold: #a47a43; width: 100% !important; max-width: 620px !important; margin: 0 auto !important; padding: 26px 14px 44px !important; color: var(--cs-content-ink) !important; overflow: visible !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page *, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page *::before, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page *::after { box-sizing: border-box; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page a, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page li, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page td, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page th { overflow-wrap: anywhere; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-hero, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-hero, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-about-hero { position: relative !important; display: grid !important; gap: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 29px 22px 27px !important; overflow: hidden !important; border: 1px solid var(--cs-content-line) !important; border-radius: 30px !important; background: radial-gradient(circle at 92% 2%, rgba(181,138,74,.14), transparent 31%), linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,242,235,.76)) !important; box-shadow: 0 22px 58px rgba(48,36,26,.09) !important; isolation: isolate; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-hero::after, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-hero::after, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-about-hero::after { content: "" !important; position: absolute !important; right: -62px !important; top: -72px !important; width: 168px !important; height: 168px !important; border: 1px solid rgba(164,122,67,.13); border-radius: 50% !important; background: transparent !important; box-shadow: 0 0 0 24px rgba(255,255,255,.12), 0 0 0 48px rgba(164,122,67,.025); pointer-events: none; z-index: -1; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-kicker, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-about-eyebrow { position: relative; z-index: 1; margin: 0 0 15px !important; color: var(--cs-content-gold) !important; font: 750 9.5px/1.25 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-hero h1, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-hero h1, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-about-hero h1 { position: relative; z-index: 1; max-width: 510px !important; margin: 0 !important; color: var(--cs-content-ink) !important; font: 400 clamp(39px, 11.5vw, 51px)/.96 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.035em !important; text-wrap: balance; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-hero > p:not(.cs-legal-kicker), body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-hero > p:not(.cs-legal-kicker), body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-about-hero > p:not(.cs-about-eyebrow) { position: relative; z-index: 1; max-width: 490px !important; margin: 20px 0 0 !important; color: var(--cs-content-muted) !important; font: 450 13px/1.72 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-meta, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-actions, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-hero__actions { position: relative; z-index: 1; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 22px 0 0 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-meta span, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-pill-link { min-height: 38px !important; max-width: 100%; padding: 9px 13px !important; border: 1px solid rgba(44,34,25,.10) !important; border-radius: 999px !important; background: rgba(255,255,255,.64) !important; color: #5f554d !important; box-shadow: 0 6px 18px rgba(44,34,25,.025); font: 700 10.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; text-decoration: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-pill-link.is-dark { border-color: #1d1712 !important; background: #1d1712 !important; color: #fffaf4 !important; box-shadow: 0 10px 24px rgba(29,23,18,.14); } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-trust-grid, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-trust-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; margin: 13px 0 0 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-trust-grid > span, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-trust-grid > span { position: relative; min-width: 0; min-height: 126px !important; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px !important; padding: 14px !important; overflow: hidden; border: 1px solid var(--cs-content-line) !important; border-radius: 21px !important; background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(249,243,236,.68)) !important; color: var(--cs-content-muted) !important; box-shadow: 0 10px 30px rgba(44,34,25,.045) !important; font: 500 10.5px/1.45 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-trust-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; flex: 0 0 38px !important; margin: 0 0 auto !important; padding: 0 !important; gap: 0 !important; border: 1px solid rgba(164,122,67,.17) !important; border-radius: 50% !important; background: #f5ece1 !important; box-shadow: none !important; color: #34281f; line-height: 0 !important; box-sizing: border-box !important; overflow: hidden; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-trust-icon svg { display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-trust-icon--security svg, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-trust-icon--payment svg, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-trust-icon--shipping svg, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-trust-icon--benefit svg { transform: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-trust-grid b, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-trust-grid b { color: var(--cs-content-ink) !important; font-size: 9.5px !important; line-height: 1.25 !important; letter-spacing: .105em !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-layout, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-contact-layout, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-layout { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; margin: 13px 0 0 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-layout > div, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-side { min-width: 0; display: grid !important; gap: 12px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-toc { position: relative !important; top: auto !important; order: -1; display: flex !important; align-items: center; gap: 7px; width: calc(100% + 28px); margin: 0 -14px !important; padding: 0 14px 5px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-toc::-webkit-scrollbar { display: none; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-toc h2, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-toc a { flex: 0 0 auto; min-height: 39px; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 13px !important; border: 1px solid var(--cs-content-line) !important; border-radius: 999px !important; background: rgba(255,253,249,.72) !important; color: #55483e !important; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; scroll-snap-align: start; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-toc h2 { border-color: #1d1712 !important; background: #1d1712 !important; color: #fffaf4 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card { min-width: 0; margin: 0 !important; padding: 22px 19px !important; overflow: hidden; border: 1px solid var(--cs-content-line) !important; border-radius: 24px !important; background: rgba(255,253,249,.78) !important; box-shadow: 0 14px 38px rgba(44,34,25,.055) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page > .cs-content-card, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page > .cs-payment-card { margin-top: 12px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card::before, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card::before { content: attr(data-cs-section-index); display: grid; place-items: center; width: 31px; height: 31px; margin: 0 0 17px; border: 1px solid rgba(164,122,67,.18); border-radius: 50%; background: #f5ece1; color: #876134; font: 750 9px/1 "Plus Jakarta Sans", system-ui, sans-serif; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card h2, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card h2, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card h2 { margin: 0 0 13px !important; color: var(--cs-content-ink) !important; font: 500 27px/1.04 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.025em !important; text-wrap: balance; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card h3, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card h3, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card h3 { margin: 22px 0 8px !important; color: #765b3d !important; font: 750 10px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card li, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card li, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card li { color: var(--cs-content-muted) !important; font: 450 12.5px/1.78 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card p { margin: 0 0 14px; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card p:last-child, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card p:last-child, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-card p:last-child { margin-bottom: 0; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card ul, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-card ol, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card ul, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-card ol { margin: 13px 0 0 !important; padding-left: 20px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page li + li { margin-top: 7px; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page li::marker { color: var(--cs-content-gold); } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-note, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-info-tile { padding: 16px !important; border: 1px solid rgba(164,122,67,.17) !important; border-radius: 18px !important; background: rgba(249,242,233,.78) !important; box-shadow: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-safe { padding: 21px 19px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 23px !important; background: linear-gradient(145deg,#1c1713,#2b221c) !important; color: #fff8ef !important; box-shadow: 0 16px 36px rgba(29,23,18,.14) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-safe p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-safe li, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-safe a { color: rgba(255,248,239,.82) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-info-grid, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-form-grid, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-bank-grid, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-club-points-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 9px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-info-tile b { margin-bottom: 6px !important; color: var(--cs-content-ink) !important; font-size: 11px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-info-tile span, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-info-tile a { color: var(--cs-content-muted) !important; font-size: 10.5px !important; line-height: 1.55 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-table { width: 100% !important; display: block !important; overflow-x: auto !important; border-radius: 17px !important; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-table th, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-table td { min-width: 145px; padding: 11px 12px !important; font-size: 10.5px !important; line-height: 1.55 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-field { gap: 7px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-field label, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-checkline { color: #66594e !important; font-size: 9.5px !important; line-height: 1.45 !important; letter-spacing: .07em !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-field input, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-field select, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-field textarea { min-height: 50px !important; padding: 13px 14px !important; border: 1px solid var(--cs-content-line) !important; border-radius: 15px !important; background: rgba(255,255,255,.82) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); color: var(--cs-content-ink) !important; font-size: 12px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-field textarea { min-height: 124px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-checkline { min-height: 44px; gap: 10px !important; align-items: flex-start !important; letter-spacing: 0 !important; text-transform: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-checkline input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-contact-form .btn { width: 100%; min-height: 52px !important; border-radius: 15px !important; font-size: 11px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathways { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; margin: 13px 0 0 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathway { min-height: 128px; align-content: end; gap: 6px !important; padding: 15px !important; border: 1px solid var(--cs-content-line) !important; border-radius: 20px !important; background: rgba(255,253,249,.75) !important; box-shadow: 0 10px 28px rgba(44,34,25,.045) !important; transform: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathway::before { content: none !important; display: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathway__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; margin: 0 0 auto; border: 1px solid rgba(149,112,66,.20); border-radius: 12px; background: linear-gradient(145deg,rgba(255,253,249,.96),rgba(239,228,214,.82)); color: #745433; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 14px rgba(75,55,34,.07); } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathway__icon svg { width: 19px; height: 19px; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathway strong { font-size: 10.5px !important; line-height: 1.35 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathway > span:not(.cs-support-pathway__icon) { font-size: 9px !important; line-height: 1.45 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-mobile-payment-page .payment-logos { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin: 16px 0 0 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-mobile-payment-page .payment-logo { width: 100% !important; min-width: 0 !important; height: 48px !important; padding: 9px 13px !important; border: 1px solid var(--cs-content-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 7px 18px rgba(44,34,25,.04) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-mobile-payment-page .payment-logo img { width: 100% !important; height: 24px !important; max-width: 76px !important; max-height: 24px !important; object-fit: contain !important; transform: none !important; filter: none !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-journey, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-story, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-values { margin: 12px 0 0 !important; padding: 22px 19px !important; border: 1px solid var(--cs-content-line) !important; border-radius: 24px !important; background: rgba(255,253,249,.78) !important; box-shadow: 0 14px 38px rgba(44,34,25,.05) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-section-head { gap: 0 !important; margin: 0 0 17px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-section-head h2 { margin: 0 !important; color: var(--cs-content-ink) !important; font: 500 28px/1.04 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.03em !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-journey-visual { border-radius: 18px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-journey-visual figcaption, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-copy p { color: var(--cs-content-muted) !important; font-size: 11.5px !important; line-height: 1.75 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-values-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-values-grid article { min-width: 0; padding: 15px !important; border-radius: 17px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-values-grid span { margin-bottom: 17px !important; font-size: 23px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-values-grid h3 { font-size: 10.5px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-values-grid p { font-size: 9px !important; line-height: 1.55 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-closing { margin: 12px 0 0 !important; padding: 20px !important; border-radius: 23px !important; background: linear-gradient(145deg,#1c1713,#2b221c) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-about-page .cs-about-closing p { font-size: 25px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-levels { display: flex !important; gap: 10px !important; width: calc(100% + 28px); margin: 13px -14px 0 !important; padding: 0 14px 7px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-levels::-webkit-scrollbar { display: none; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card { flex: 0 0 min(82vw,310px); min-width: 0; padding: 20px !important; border-radius: 23px !important; scroll-snap-align: start; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--essential { background: var(--cs-club-essential-surface,radial-gradient(circle at 10% 0,rgba(234,191,142,.22),transparent 28%),linear-gradient(135deg,#523a2b,#2d1d14)) !important; color: var(--cs-club-essential-ink,#fffaf2) !important; border-color: rgba(234,191,142,.16) !important; box-shadow: 0 18px 38px rgba(45,29,20,.24) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--essential .cs-club-tier, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--essential h2, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--essential p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--essential li { color: var(--cs-club-essential-ink,#fffaf2) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--signature { background: var(--cs-club-signature-surface,radial-gradient(circle at 15% 0,rgba(255,239,190,.28),transparent 30%),linear-gradient(135deg,#d4ad64,#9b6c30)) !important; color: var(--cs-club-signature-ink,#fffaf2) !important; border-color: rgba(255,249,226,.2) !important; box-shadow: 0 18px 38px rgba(117,82,34,.2) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--signature .cs-club-tier, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--signature h2, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--signature p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--signature li { color: var(--cs-club-signature-ink,#fffaf2) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite { background: var(--cs-club-elite-surface,radial-gradient(circle at 12% 0,rgba(255,225,225,.22),transparent 28%),linear-gradient(135deg,#85163b,#4a061c)) !important; color: var(--cs-club-elite-ink,#fffaf2) !important; border-color: rgba(255,225,225,.16) !important; box-shadow: 0 22px 48px rgba(74,6,28,.3) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite .cs-club-tier { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.2) !important; color: var(--cs-club-elite-ink,#fffaf2) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite h2, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite li { color: inherit !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite .cs-club-requirement, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card--elite li { color: rgba(255,250,242,.82) !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card h2 { font: 500 26px/1.05 "Cormorant Garamond", Georgia, serif !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card p, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-level-card li { font-size: 10.5px !important; line-height: 1.58 !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-tier { min-height: 31px !important; padding: 0 10px !important; font-size: 8.5px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-club-page .cs-club-points-grid > div { padding: 16px !important; border-radius: 18px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page [id] { scroll-margin-top: 88px; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page :focus-visible { outline: 2px solid rgba(164,122,67,.62) !important; outline-offset: 3px !important; } @media (max-width: 374px) { body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page.cs-mobile-content-ready { padding-inline: 11px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-hero, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-content-hero, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-about-hero { padding-inline: 19px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-legal-trust-grid > span, body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-payment-trust-grid > span { min-height: 132px !important; padding: 12px !important; } body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page .cs-support-pathways { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { body.cs-mobile-v1-active:is(.cs-route-content,.cs-route-contact) main.cs-content-page * { scroll-behavior: auto !important; transition: none !important; } } /* Home FAQ — premium mobile accordion */ body.cs-mobile-v1-active .cs-mobile-faq { margin: 0 !important; padding: 52px 0 44px !important; background: radial-gradient(circle at 100% 0, rgba(181,138,74,.10), transparent 32%), #f4ede5 !important; } body.cs-mobile-v1-active .cs-mobile-faq > .container { width: 100% !important; padding: 0 18px !important; } body.cs-mobile-v1-active .cs-mobile-faq .section-head.compact { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; align-items: start !important; margin: 0 0 27px !important; padding: 0 2px !important; text-align: left !important; } body.cs-mobile-v1-active .cs-mobile-faq .section-head .kicker { display: block !important; margin: 0 0 13px !important; color: #9b7441 !important; font: 750 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .22em !important; text-transform: uppercase !important; } body.cs-mobile-v1-active .cs-mobile-faq .section-head h2 { max-width: 330px; margin: 0 !important; color: #17120d !important; font: 400 clamp(34px, 10vw, 42px)/.98 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.025em !important; text-wrap: balance; } body.cs-mobile-v1-active .cs-mobile-faq .section-head.compact > p { display: block !important; max-width: 320px; margin: 16px 0 0 !important; color: #71675e !important; font: 450 13px/1.6 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active .cs-mobile-faq .faq-list { display: block !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(42,32,22,.17); } body.cs-mobile-v1-active .cs-mobile-faq .faq-item { margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-bottom: 1px solid rgba(42,32,22,.15) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transition: background-color .2s ease; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item[open] { background: rgba(255,253,249,.58) !important; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item summary { position: relative; min-height: 72px; display: grid; grid-template-columns: 28px minmax(0,1fr) 32px; gap: 8px; align-items: center; margin: 0 !important; padding: 13px 0 !important; color: #27211b !important; cursor: pointer; list-style: none; font: 620 13px/1.42 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.01em !important; text-align: left !important; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item summary::-webkit-details-marker { display: none; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item summary::before { content: var(--cs-faq-index); align-self: center; color: #9b7441; font: 700 9px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item summary::after { content: "+"; width: 30px; height: 30px; display: grid; place-items: center; justify-self: end; border: 1px solid rgba(42,32,22,.14); border-radius: 50%; background: rgba(255,253,249,.62); color: #302820; font: 400 20px/1 "Plus Jakarta Sans", system-ui, sans-serif; transition: transform .22s ease, background-color .22s ease; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item[open] summary { color: #8a6335 !important; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item[open] summary::after { content: "−"; background: #1b1713; color: #fffdf9; transform: rotate(180deg); } body.cs-mobile-v1-active .cs-mobile-faq .faq-item p { margin: 0 !important; padding: 0 40px 22px 36px !important; color: #665d54 !important; font: 450 12.5px/1.7 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active .cs-mobile-faq .faq-item summary:focus-visible { outline: 2px solid #b58a4a; outline-offset: -2px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { body.cs-mobile-v1-active .cs-mobile-faq .faq-item, body.cs-mobile-v1-active .cs-mobile-faq .faq-item summary::after { transition: none; } } /* Legal/contact preservation */ body.cs-mobile-v1-active main, body.cs-mobile-v1-active .container { max-width: 100% !important; } body.cs-mobile-v1-active .container { padding-left: var(--cs-mobile-container); padding-right: var(--cs-mobile-container); } /* Mobile footer — one compact architecture, desktop footer remains untouched */ body.cs-mobile-v1-active .cs-desktop-footer { display: none !important; } body.cs-mobile-v1-active.cs-has-mobile-footer, body.cs-mobile-v1-active.cs-route-pdp.cs-has-mobile-footer, body.cs-checkout-mobile.cs-has-mobile-footer { padding-bottom: 0 !important; } .cs-mobile-footer { --cs-footer-bg: #0b0b0b; --cs-footer-surface: #202429; --cs-footer-line: rgba(255,255,255,.13); --cs-footer-text: #f5f1eb; --cs-footer-muted: #a8a7a4; position: relative; width: 100%; margin: 44px 0 0; padding: 14px 16px calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom)); overflow: hidden; background: var(--cs-footer-bg); color: var(--cs-footer-text); isolation: isolate; } body.cs-route-pdp .cs-mobile-footer, body.cs-checkout-mobile .cs-mobile-footer, body.cs-route-cart .cs-mobile-footer, body.cs-route-account .cs-mobile-footer, body.cs-route-checkout .cs-mobile-footer { display: none !important; } body.cs-route-pdp .cs-mobile-footer { padding-bottom: calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom)); } body.cs-checkout-mobile .cs-mobile-footer { padding-bottom: var(--cs-mobile-safe-bottom); } .cs-mobile-footer a { color: inherit; } .cs-mobile-footer__journal { margin: 0 0 10px; padding: 27px 20px 22px; border: 1px solid var(--cs-footer-line); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); } .cs-mobile-footer__eyebrow { margin: 0 0 13px; color: #d6b47d; font: 700 10px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; } .cs-mobile-footer__journal h2 { margin: 0; max-width: 300px; color: var(--cs-footer-text); font: 400 clamp(34px, 10vw, 42px)/.98 "Cormorant Garamond", Georgia, serif; letter-spacing: -.025em; } .cs-mobile-footer__journal > p:not(.cs-mobile-footer__eyebrow) { margin: 15px 0 0; max-width: 320px; color: var(--cs-footer-muted); font: 400 13px/1.6 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-footer__form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 21px; } .cs-mobile-footer__form label { min-width: 0; } .cs-mobile-footer__form input { width: 100%; height: 52px; padding: 0 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; outline: none; background: rgba(255,255,255,.045); color: #fff; font: 500 13px/1 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-footer__form input::placeholder { color: #9a9b9d; opacity: 1; } .cs-mobile-footer__form input:focus { border-color: #d6b47d; box-shadow: 0 0 0 3px rgba(214,180,125,.13); } .cs-mobile-footer__form button { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f4f0ea; color: #171a1d; } .cs-mobile-footer__form button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .cs-mobile-footer__form button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; } .cs-mobile-footer__consent, .cs-mobile-footer__status { grid-column: 1 / -1; margin: 2px 2px 0 !important; color: #818387 !important; font: 500 9px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important; } .cs-mobile-footer__consent a { text-underline-offset: 2px; } .cs-mobile-footer__status:empty { display: none; } .cs-mobile-footer__status[data-state="success"], .cs-mobile-footer__status.is-success { color: #d6b47d !important; } .cs-mobile-footer__navigation { border-top: 1px solid var(--cs-footer-line); } .cs-mobile-footer__group { border-bottom: 1px solid var(--cs-footer-line); } .cs-mobile-footer__group summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; color: var(--cs-footer-text); cursor: pointer; list-style: none; font: 600 13px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .01em; } .cs-mobile-footer__group summary::-webkit-details-marker { display: none; } .cs-mobile-footer__plus { position: relative; width: 18px; height: 18px; flex: 0 0 18px; } .cs-mobile-footer__plus::before, .cs-mobile-footer__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: #b8b5af; transform: translate(-50%, -50%); transition: transform .22s ease, opacity .22s ease; } .cs-mobile-footer__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .cs-mobile-footer__group[open] .cs-mobile-footer__plus::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; } .cs-mobile-footer__links { display: grid; gap: 0; padding: 0 4px 15px; } .cs-mobile-footer__links a { min-height: 38px; display: flex; align-items: center; width: fit-content; color: var(--cs-footer-muted); text-decoration: none; font: 500 12px/1.35 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-footer__links a:active { color: #fff; } .cs-mobile-footer__assurance { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--cs-footer-line); border-bottom: 1px solid var(--cs-footer-line); } .cs-mobile-footer__assurance-item { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 14px 8px 14px 4px; border: 0; border-radius: 0; background: transparent; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } .cs-mobile-footer__assurance-item:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--cs-footer-line); } .cs-mobile-footer__assurance-item:nth-child(-n+2) { border-bottom: 1px solid var(--cs-footer-line); } .cs-mobile-footer__assurance-item:active .cs-mobile-footer__assurance-copy strong { color: #fff; } .cs-mobile-footer__assurance-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 1px solid var(--cs-footer-line); background: transparent; color: #dad7d2; box-sizing: border-box; } .cs-mobile-footer__assurance-icon svg { display: block; width: 17px; height: 17px; margin: 0; padding: 0; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .cs-mobile-footer__assurance-copy { min-width: 0; display: grid; gap: 4px; } .cs-mobile-footer__assurance-item strong { overflow: hidden; color: var(--cs-footer-text); font: 600 13px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; text-overflow: ellipsis; } .cs-mobile-footer__assurance-item small { overflow: hidden; color: var(--cs-footer-muted); font: 500 11px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; } .cs-mobile-footer__brand { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: end; padding: 22px 2px 19px; border-top: 1px solid var(--cs-footer-line); } .cs-mobile-footer__wordmark { grid-column: 1 / -1; width: fit-content; color: #fff; text-decoration: none; font: 400 24px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .25em; } .cs-mobile-footer__brand p { margin: 0; color: #8d8e90; font: 500 10px/1.55 "Plus Jakarta Sans", system-ui, sans-serif; } .cs-mobile-footer__socials { display: flex; gap: 7px; } .cs-mobile-footer__socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--cs-footer-line); border-radius: 50%; color: #dad7d2; text-decoration: none; } .cs-mobile-footer__socials svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.55; } .cs-mobile-footer__socials svg .is-fill, .cs-mobile-footer__socials a:nth-child(2) svg { fill: currentColor; stroke: none; } .cs-mobile-footer__payment { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 0 2px; border-top: 1px solid var(--cs-footer-line); border-bottom: 1px solid var(--cs-footer-line); overflow: hidden; } .cs-mobile-footer__payment-logo { width: 48px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; padding: 5px 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; background: #f5f3ef; } body.cs-mobile-v1-active .cs-mobile-footer__payment-logo img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; object-position: center; margin: 0 !important; transform: none !important; } .cs-mobile-footer__payment-logo--iyzico { width: 55px; } .cs-mobile-footer__payment-logo--visa { width: 43px; } .cs-mobile-footer__payment-logo--mastercard { width: 43px; } .cs-mobile-footer__payment-logo--troy { position: relative; width: 43px; padding: 0 7px; } body.cs-mobile-v1-active .cs-mobile-footer__payment-logo--troy img { position: absolute; top: 50%; left: 50%; width: 27px !important; height: 27px !important; transform: translate(-50%, -50%) !important; } .cs-mobile-footer__bottom { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 2px; color: #77797c; font: 600 9px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; } .cs-mobile-footer__bottom a { color: inherit; text-underline-offset: 3px; } body.cs-mobile-footer-visible #mobileStickyPdp, body.cs-mobile-footer-visible .mobile-sticky-pdp { opacity: 0 !important; transform: translateY(18px) !important; pointer-events: none !important; } @media (prefers-reduced-motion: reduce) { .cs-mobile-footer__plus::before, .cs-mobile-footer__plus::after { transition: none; } } body.cs-mobile-v1-active table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.cs-mobile-v1-active pre { white-space: pre-wrap; word-break: break-word; } body.cs-mobile-v1-active .modal-card, body.cs-mobile-v1-active .drawer { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } /* Legacy account teaser drawer is redundant on mobile v1 — bottom nav → /account/profile.html, auth → #accountModal sheet. */ body.cs-mobile-v1-active #accountDrawer { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Closed legacy drawers must never paint inside page content */ body.cs-mobile-v1-active #cartDrawer:not(.open), body.cs-mobile-v1-active #accountDrawer:not(.open) { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.cs-mobile-v1-active #cartDrawer.open, body.cs-mobile-v1-active #accountModal.modal.open, body.cs-mobile-v1-active #accountModal.modal.show { position: fixed !important; } /* Auth modal → premium mobile bottom sheet (desktop modal unchanged) */ body.cs-mobile-v1-active.modal-open #backdrop.show { z-index: 6750 !important; background: rgba(18, 13, 8, .48) !important; } body.cs-mobile-v1-active #accountModal.modal, body.cs-mobile-v1-active #accountModal.modal.show, body.cs-mobile-v1-active #accountModal.modal.open { z-index: 6800 !important; place-items: end center !important; align-items: end !important; padding: 0 !important; background: rgba(18, 13, 8, .34); } body.cs-mobile-v1-active #accountModal .modal-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 28px 28px 0 0 !important; max-height: min(88dvh, 760px) !important; padding: 18px 18px calc(18px + var(--cs-mobile-safe-bottom)) !important; box-shadow: 0 -18px 48px rgba(18, 13, 8, .22) !important; transform: translateY(0); animation: csMobileAuthSheetIn .34s cubic-bezier(.22, .9, .28, 1); } body.cs-mobile-v1-active #accountModal .modal-card:before { content: ""; display: block; width: 42px; height: 4px; margin: 2px auto 14px; border-radius: 999px; background: rgba(26, 21, 16, .16); } body.cs-mobile-v1-active #accountModal .modal-head, body.cs-mobile-v1-active #accountModal .cs-auth-sheet-head { align-items: flex-start; gap: 0; padding: 2px 2px 18px; margin-bottom: 2px; border-bottom: none; position: relative; } body.cs-mobile-v1-active #accountModal .modal-head > div:first-child { flex: 1; min-width: 0; padding-right: 44px; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-heading { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; font: inherit; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-brand { display: block; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #a2835d; line-height: 1.2; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-title { display: block; font: 600 34px/1 "Cormorant Garamond", "Cormorant", Georgia, serif; letter-spacing: .005em; color: #1a1510; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-lede, body.cs-mobile-v1-active #accountModal .modal-head .account-mini { margin-top: 10px; max-width: 30ch; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.55; letter-spacing: -.01em; color: #6f655c; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-close.icon-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; margin: -6px -4px 0 0; padding: 0; border: none !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #1a1510; display: grid; place-items: center; cursor: pointer; opacity: .72; transition: opacity .2s ease, transform .2s ease; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-close.icon-close svg { width: 18px; height: 18px; display: block; pointer-events: none; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-close.icon-close:hover, body.cs-mobile-v1-active #accountModal .cs-auth-sheet-close.icon-close:focus-visible { opacity: 1; background: transparent !important; border: none !important; outline: none; } body.cs-mobile-v1-active #accountModal .cs-auth-sheet-close.icon-close:active { transform: scale(.94); opacity: .88; } body.cs-mobile-v1-active #accountModal .tab-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 14px 0 16px !important; } body.cs-mobile-v1-active #accountModal .tab-btn { min-height: 44px !important; border-radius: 999px !important; } body.cs-mobile-v1-active #accountModal .btn { min-height: 50px !important; border-radius: 999px !important; } @keyframes csMobileAuthSheetIn { from { transform: translateY(28px); opacity: .72; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.cs-mobile-v1-active #accountModal .modal-card { animation: none; } } /* ===== Premium mobile homepage hero — Rhode / Sephora cinematic ===== */ @keyframes csHeroKenBurns { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 100% { transform: scale(1.08) translate3d(-1.2%, -0.6%, 0); } } @keyframes csHeroRise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes csHeroTrustIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes csHeroGoldFlash { /* Mostly idle — brief gold sweep, no continuous filter work */ 0%, 74%, 100% { background-position: 120% 50%; } 82% { background-position: -20% 50%; } } body.cs-mobile-v1-active.cs-route-home #heroSection.home-hero.section { --cs-hero-ink: #1a1510; --cs-hero-gold: #b58a4a; --cs-hero-soft: #5c534a; --cs-hero-surface: #fffdf9; --cs-hero-ease: cubic-bezier(0.22, 1, 0.36, 1); padding: 0 !important; border-bottom: none !important; background: #f3ebe2 !important; overflow: visible !important; max-height: none !important; height: auto !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__canvas { position: relative !important; display: flex !important; flex-direction: column !important; min-height: calc(100svh - var(--cs-mobile-bottom-nav-height, 74px) - var(--cs-mobile-safe-bottom, 0px) - var(--cs-mobile-header-height, 62px) - 39px) !important; max-height: none !important; height: auto !important; overflow: hidden !important; isolation: isolate !important; padding: 0 !important; background: radial-gradient(ellipse 70% 45% at 78% 42%, rgba(255, 252, 247, 0.35), transparent 62%), #f3ebe2 !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__media { display: block !important; position: absolute !important; inset: 0 0 68px 0 !important; z-index: 0 !important; margin: 0 !important; pointer-events: none !important; overflow: hidden !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__media picture, body.cs-mobile-v1-active.cs-route-home .home-hero__media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; /* Products sit mid-lower; top third reserved for editorial copy */ object-position: 74% 56% !important; will-change: transform !important; animation: csHeroKenBurns 22s var(--cs-hero-ease) both !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__canvas::before { content: "" !important; position: absolute !important; inset: 0 0 68px 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 253, 249, 0.9) 12%, rgba(255, 253, 249, 0.62) 26%, rgba(255, 253, 249, 0.22) 38%, rgba(255, 253, 249, 0.04) 48%, transparent 58%), radial-gradient(ellipse 100% 36% at 50% 0%, rgba(255, 253, 249, 0.96), transparent 74%) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__canvas::after { content: "" !important; position: absolute !important; inset: auto 0 68px 0 !important; height: 32% !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient( 180deg, transparent 0%, rgba(255, 253, 249, 0.2) 40%, rgba(255, 253, 249, 0.78) 82%, #fffdf9 100% ) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__grid { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: center !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; height: auto !important; overflow: visible !important; padding: 28px var(--cs-mobile-container) 86px !important; width: 100% !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__copy { /* Keep static so absolute CTAs dock to canvas, not this box */ position: static !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: min(86vw, 320px) !important; margin: 0 auto !important; padding: 4px 8px 0 !important; overflow: visible !important; text-align: center !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__brand { margin: 0 0 12px !important; color: var(--cs-hero-ink) !important; font: 500 clamp(1.2rem, 5.6vw, 1.45rem)/1 "Cormorant Garamond", Georgia, serif !important; letter-spacing: 0.28em !important; text-indent: 0.28em !important; text-transform: uppercase !important; text-align: center !important; animation: csHeroRise 0.9s var(--cs-hero-ease) 0.08s both !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__eyebrow { position: relative !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin: 0 0 12px !important; max-width: none !important; width: max-content !important; color: var(--cs-hero-gold) !important; font: 650 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: center !important; animation: csHeroRise 0.9s var(--cs-hero-ease) 0.16s both !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__eyebrow::after { position: static !important; left: auto !important; top: auto !important; display: block !important; width: 28px !important; height: 1px !important; margin: 0 auto !important; background: linear-gradient(90deg, transparent, var(--cs-hero-gold), transparent) !important; opacity: 0.9 !important; } body.cs-mobile-v1-active.cs-route-home .home-hero h1 { margin: 0 !important; max-width: 11.5ch !important; color: var(--cs-hero-ink) !important; font: 400 clamp(2.15rem, 8.6vw, 2.75rem)/0.98 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -0.038em !important; text-align: center !important; text-wrap: balance !important; overflow: visible !important; text-shadow: 0 1px 0 rgba(255, 253, 249, 0.65) !important; animation: csHeroRise 1s var(--cs-hero-ease) 0.26s both !important; } body.cs-mobile-v1-active.cs-route-home .home-hero h1 .home-hero__line { display: block !important; white-space: normal !important; } body.cs-mobile-v1-active.cs-route-home .home-hero h1 > span.home-hero__line { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: baseline !important; gap: 0.1em 0.24em !important; } body.cs-mobile-v1-active.cs-route-home .home-hero h1 em.home-hero__line { margin-top: 4px !important; font-style: normal !important; font-weight: 400 !important; } body.cs-mobile-v1-active.cs-route-home #homeHeroTitle .home-hero__shine-word, body.cs-mobile-v1-active.cs-route-home .home-hero__shine-word { position: relative !important; display: inline-block !important; isolation: isolate !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -0.03em !important; /* Static gold base — flash runs on background-position only (no filter/glow) */ background-image: linear-gradient( 105deg, #9a7439 0%, #b58a4a 36%, #f2e2b4 50%, #b58a4a 64%, #8a6530 100% ) !important; background-size: 220% 100% !important; background-position: 120% 50% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: none !important; animation: csHeroGoldFlash 5.8s ease-in-out infinite !important; } body.cs-mobile-v1-active.cs-route-home #homeHeroTitle .home-hero__shine-word::before, body.cs-mobile-v1-active.cs-route-home #homeHeroTitle .home-hero__shine-word::after, body.cs-mobile-v1-active.cs-route-home .home-hero__shine-word::before, body.cs-mobile-v1-active.cs-route-home .home-hero__shine-word::after { content: none !important; display: none !important; animation: none !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__script { display: inline-block !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-style: normal !important; font-weight: 400 !important; font-size: 1em !important; letter-spacing: -0.038em !important; line-height: 1.02 !important; color: #a88968 !important; text-shadow: 0 1px 0 rgba(255, 253, 249, 0.45) !important; transform: none !important; white-space: nowrap !important; -webkit-font-smoothing: antialiased !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__lead { display: none !important; } /* CTAs docked bottom-center — clear of product photography */ body.cs-mobile-v1-active.cs-route-home .home-hero__actions { position: absolute !important; left: 16px !important; right: 16px !important; bottom: 14px !important; z-index: 5 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; max-width: 340px !important; margin: 0 auto !important; padding: 0 !important; animation: csHeroRise 0.95s var(--cs-hero-ease) 0.52s both !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 44px !important; min-height: 44px !important; padding: 0 14px !important; border-radius: 999px !important; justify-content: center !important; gap: 7px !important; font: 650 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; transition: transform 0.22s var(--cs-hero-ease), box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn span { overflow: hidden !important; text-overflow: ellipsis !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; opacity: 0.88 !important; transition: transform 0.28s var(--cs-hero-ease) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn:active svg { transform: translateX(2px) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn--primary { color: #fffdf9 !important; background: #1a1510 !important; border: 1px solid #1a1510 !important; box-shadow: 0 8px 20px rgba(26, 21, 16, 0.16) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn--primary:active { transform: scale(0.985) !important; box-shadow: 0 4px 12px rgba(26, 21, 16, 0.14) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn--secondary { color: var(--cs-hero-ink) !important; background: rgba(255, 253, 249, 0.78) !important; border: 1px solid rgba(26, 21, 16, 0.14) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset !important; backdrop-filter: blur(14px) saturate(1.12) !important; -webkit-backdrop-filter: blur(14px) saturate(1.12) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn--secondary:active { background: rgba(255, 253, 249, 0.94) !important; transform: scale(0.985) !important; } /* Trust strip removed — seamless hero → categories dissolve */ body.cs-mobile-v1-active.cs-route-home .home-hero__trust { display: none !important; } body.cs-mobile-v1-active.cs-route-home #heroSection.home-hero.section { margin-bottom: 0 !important; background: #fffdf9 !important; } body.cs-mobile-v1-active.cs-route-home .home-hero__canvas { background: radial-gradient(ellipse 70% 45% at 78% 42%, rgba(255, 252, 247, 0.35), transparent 62%), linear-gradient(180deg, #f3ebe2 0%, #f7f1ea 72%, #fffdf9 100%) !important; } /* HEDEF ODAKLI — Rhode/Sephora editorial rail (image-led, no card chrome) */ body.cs-mobile-v1-active.cs-route-home #concerns.concern-section { position: relative !important; z-index: 2 !important; margin: 0 !important; padding: 8px 0 40px !important; border: 0 !important; border-radius: 0 !important; background: #fffdf9 !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns.concern-section::before { content: "" !important; display: block !important; width: 24px !important; height: 1px !important; margin: 0 auto 22px !important; background: linear-gradient(90deg, transparent, rgba(181, 138, 74, 0.5), transparent) !important; } body.cs-mobile-v1-active.cs-route-home #concerns .container { padding-left: var(--cs-mobile-container) !important; padding-right: var(--cs-mobile-container) !important; max-width: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .section-head { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; } body.cs-mobile-v1-active.cs-route-home #concerns .section-head > p { display: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .section-head .kicker { margin: 0 0 12px !important; color: #b58a4a !important; font: 650 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; } body.cs-mobile-v1-active.cs-route-home #concerns .section-head h2 { margin: 0 !important; max-width: 11.5ch !important; font: 400 clamp(1.9rem, 7.4vw, 2.4rem)/1.02 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -0.038em !important; color: #1a1510 !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-grid { display: flex !important; flex-wrap: nowrap !important; gap: 14px !important; margin: 0 calc(var(--cs-mobile-container) * -1) !important; padding: 0 var(--cs-mobile-container) 4px !important; padding-right: calc(var(--cs-mobile-container) + 28px) !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: var(--cs-mobile-container) !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scrollbar-width: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-grid::-webkit-scrollbar { display: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card { position: relative !important; flex: 0 0 min(66vw, 236px) !important; width: min(66vw, 236px) !important; min-width: min(66vw, 236px) !important; max-width: min(66vw, 236px) !important; scroll-snap-align: start !important; display: flex !important; flex-direction: column !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; text-decoration: none !important; color: inherit !important; transform: none !important; transition: opacity 0.22s ease !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card:active { opacity: 0.86 !important; transform: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card img { display: block !important; width: 100% !important; aspect-ratio: 3 / 4 !important; height: auto !important; max-height: none !important; min-height: 0 !important; object-fit: cover !important; border: 0 !important; border-radius: 0 !important; background: #efe6db !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card__body { display: grid !important; gap: 7px !important; padding: 16px 0 0 !important; min-width: 0 !important; overflow: visible !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card__body .kicker { margin: 0 !important; color: #b58a4a !important; font: 650 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card__body h3 { margin: 0 !important; max-width: none !important; max-height: none !important; min-height: 0 !important; font: 400 1.22rem/1.2 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -0.028em !important; color: #1a1510 !important; display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; word-break: break-word !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card__body p { display: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card__link { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 10px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #1a1510 !important; font: 650 9.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card__link::after { content: "" !important; display: block !important; width: 16px !important; height: 1px !important; background: #b58a4a !important; opacity: 0.75 !important; transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease !important; } body.cs-mobile-v1-active.cs-route-home #concerns .concern-card:active .concern-card__link::after { width: 26px !important; opacity: 1 !important; } @media (min-width: 390px) { body.cs-mobile-v1-active.cs-route-home .home-hero__copy { max-width: min(88vw, 340px) !important; } body.cs-mobile-v1-active.cs-route-home .home-hero h1 { font-size: clamp(2.25rem, 8.4vw, 2.85rem) !important; } } @media (min-width: 430px) { body.cs-mobile-v1-active.cs-route-home .home-hero__actions { max-width: 360px !important; } } @media (prefers-reduced-motion: reduce) { body.cs-mobile-v1-active.cs-route-home .home-hero__media picture, body.cs-mobile-v1-active.cs-route-home .home-hero__media img, body.cs-mobile-v1-active.cs-route-home .home-hero__brand, body.cs-mobile-v1-active.cs-route-home .home-hero__eyebrow, body.cs-mobile-v1-active.cs-route-home .home-hero h1, body.cs-mobile-v1-active.cs-route-home .home-hero__lead, body.cs-mobile-v1-active.cs-route-home .home-hero__actions, body.cs-mobile-v1-active.cs-route-home .home-hero__trust, body.cs-mobile-v1-active.cs-route-home #homeHeroTitle .home-hero__shine-word, body.cs-mobile-v1-active.cs-route-home .home-hero__shine-word { animation: none !important; opacity: 1 !important; transform: none !important; } body.cs-mobile-v1-active.cs-route-home #homeHeroTitle .home-hero__shine-word, body.cs-mobile-v1-active.cs-route-home .home-hero__shine-word { background-image: none !important; background-color: transparent !important; color: #b58a4a !important; -webkit-text-fill-color: #b58a4a !important; filter: none !important; } body.cs-mobile-v1-active.cs-route-home .home-hero .hero-btn { transition: none !important; } } /* Premium mobile cart page — editorial / Sephora–Rhode quiet luxury */ body.cs-mobile-v1-active.cs-route-cart #cs-mobile-v1-page-stage { display: block !important; min-height: auto !important; background: linear-gradient(180deg, #faf6f1 0%, #f3ebe3 52%, #efe6dc 100%) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp.cs-cart-page { --cs-cart-ink: #17120d; --cs-cart-muted: #7a7168; --cs-cart-soft: #9a9086; --cs-cart-line: rgba(35,27,20,.09); --cs-cart-line-strong: rgba(35,27,20,.14); --cs-cart-surface: #fffdf9; --cs-cart-gold: #b58a4a; background: transparent !important; min-height: auto !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-page__inner { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 8px 16px calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 14px) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important; margin: 0 0 18px !important; padding: 8px 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--cs-cart-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero__copy { min-width: 0; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-kicker { margin: 0 0 10px !important; color: var(--cs-cart-soft) !important; font: 650 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .22em !important; text-transform: uppercase !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero__title-row { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px 12px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero h2 { margin: 0 !important; font: 400 clamp(32px, 9vw, 40px)/.92 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.035em !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero__count { margin: 0 !important; padding: 4px 0 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--cs-cart-muted) !important; font: 600 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; font-variant-numeric: tabular-nums lining-nums !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero p { max-width: 36ch !important; margin: 10px 0 0 !important; color: var(--cs-cart-muted) !important; font: 450 12.5px/1.55 "Plus Jakarta Sans", system-ui, sans-serif !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero__continue { width: auto !important; min-height: 0 !important; padding: 0 0 2px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(181,138,74,.4) !important; background: transparent !important; box-shadow: none !important; color: #6f5430 !important; font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; transform: none !important; justify-self: start !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty__cta, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-checkout__btn { width: 100% !important; min-height: 50px !important; border-radius: 999px !important; font: 650 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; transform: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-checkout__btn { background: #1a1510 !important; border-color: #1a1510 !important; color: #fffdf9 !important; box-shadow: 0 10px 24px rgba(26, 21, 16, .14) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-checkout__trust { margin: 12px 0 0 !important; font: 500 10px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .04em !important; color: var(--cs-cart-soft) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty { gap: 0 !important; padding: 32px 8px 24px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty__icon { width: 56px !important; height: 56px !important; margin: 0 auto 16px !important; border-radius: 0 !important; background: transparent !important; border: 1px solid var(--cs-cart-line) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty strong { font: 400 clamp(26px, 7vw, 32px)/1.05 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.03em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty p { margin: 10px 0 0 !important; font-size: 12.5px !important; line-height: 1.55 !important; color: var(--cs-cart-muted) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-trust { gap: 0 !important; margin-top: 20px !important; text-align: left !important; border-top: 1px solid var(--cs-cart-line) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-trust__item { padding: 12px 0 !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--cs-cart-line) !important; background: transparent !important; font-size: 11px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-trust__icon { width: 28px !important; height: 28px !important; flex-basis: 28px !important; border-radius: 0 !important; background: transparent !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-trust__icon svg { width: 16px !important; height: 16px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty__links { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin: 16px 0 14px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty__link { min-width: 0 !important; text-align: center !important; padding: 11px 8px !important; border-radius: 0 !important; font-size: 9px !important; letter-spacing: .1em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-empty__link:last-child:nth-child(3) { grid-column: 1 / -1 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp.is-empty .cs-cart-hero--empty { margin: 0 0 8px !important; padding: 8px 0 14px !important; border-radius: 0 !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp.is-empty .cs-cart-hero--empty p { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio { gap: 16px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__hero { gap: 12px !important; padding: 28px 4px 20px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--cs-cart-line) !important; box-shadow: none !important; background: transparent !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__hero::before { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__hero h2 { font: 400 clamp(30px, 8vw, 36px)/.95 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.035em !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__hero > p { font-size: 13px !important; line-height: 1.55 !important; color: var(--cs-cart-muted) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__chip { justify-content: center !important; min-height: 42px !important; padding: 0 10px !important; border-radius: 0 !important; font-size: 9.5px !important; letter-spacing: .1em !important; background: transparent !important; border: 1px solid var(--cs-cart-line-strong) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio__chip:last-child:nth-child(3) { grid-column: 1 / -1 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-studio .cs-cart-trust { margin-top: 4px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover { gap: 14px !important; padding: 18px 0 16px !important; border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--cs-cart-line) !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__head, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__head { gap: 10px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__head > span, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__head > span { min-width: 24px !important; height: 24px !important; border-radius: 0 !important; font-size: 10px !important; background: transparent !important; border: 1px solid var(--cs-cart-line) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__head h3, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__head h3 { font: 400 22px/1.1 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__head p, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__head p { font-size: 11.5px !important; color: var(--cs-cart-muted) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__lede { font-size: 12.5px !important; line-height: 1.5 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__card { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 14px !important; padding: 0 !important; border-radius: 0 !important; border: 0 !important; background: transparent !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__media { width: 72px !important; height: 72px !important; border-radius: 0 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__actions { grid-template-columns: 1fr !important; gap: 8px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-last__btn { min-height: 46px !important; border-radius: 2px !important; font-size: 11px !important; letter-spacing: .1em !important; text-transform: uppercase !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__rail { gap: 10px !important; margin: 0 -4px !important; padding: 2px 4px 6px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__card { padding: 0 !important; border-radius: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-discover__card strong { font-size: 12px !important; font-weight: 600 !important; } /* Filled cart — product list + summary */ body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-items, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-summary { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-items { border-bottom: 1px solid var(--cs-cart-line) !important; margin-bottom: 22px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-summary { position: static !important; padding: 4px 0 0 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-summary__head { margin: 0 0 16px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-summary__head h2 { margin: 0 !important; font: 600 1.45rem/1.05 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.02em !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row { grid-template-columns: 84px minmax(0,1fr) !important; gap: 14px 14px !important; padding: 18px 0 !important; align-items: start !important; border-bottom: 1px solid var(--cs-cart-line) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row:last-child { border-bottom: 0 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row:first-child { padding-top: 4px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row__media { display: grid !important; place-items: center !important; aspect-ratio: 1 / 1 !important; background: #f4ece3 !important; border: 0 !important; overflow: hidden !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row img { width: 100% !important; height: 100% !important; border-radius: 0 !important; padding: 10px !important; border: 0 !important; object-fit: contain !important; background: transparent !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-brand { margin: 0 0 5px !important; font: 650 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; color: var(--cs-cart-soft) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-name { font: 600 13.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.015em !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-meta { gap: 10px !important; margin-top: 12px !important; align-items: center !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-stock-badge.is-unknown { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-stock-badge { padding: 4px 8px !important; border-radius: 0 !important; font: 650 8.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; background: rgba(35,27,20,.05) !important; color: var(--cs-cart-muted) !important; border: 0 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-stock-badge.is-out { background: rgba(138,59,47,.08) !important; color: #8a3b2f !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-stepper { grid-template-columns: 28px 32px 28px !important; border-radius: 0 !important; border: 1px solid var(--cs-cart-line-strong) !important; background: transparent !important; overflow: hidden !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-stepper button { height: 30px !important; font-size: 14px !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-stepper span { font: 650 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; font-variant-numeric: tabular-nums lining-nums !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-link-button { text-decoration: none !important; border-bottom: 1px solid rgba(35,27,20,.28) !important; padding: 0 0 1px !important; font: 550 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-cart-muted) !important; letter-spacing: .02em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row__top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row__copy { min-width: 0 !important; flex: 1 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row__price { flex: 0 0 auto !important; margin-top: 1px !important; font: 650 14px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums lining-nums !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-row__total { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-shipping-progress, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-shipping-note { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-shipping-progress__text { font-size: 11px !important; color: var(--cs-cart-muted) !important; letter-spacing: .01em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-shipping-progress__bar { height: 2px !important; border-radius: 0 !important; background: rgba(35,27,20,.08) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-shipping-progress__bar span { height: 2px !important; border-radius: 0 !important; background: var(--cs-cart-gold) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-coupon { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; gap: 8px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-coupon label { font: 650 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--cs-cart-soft) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-coupon__row { grid-template-columns: 1fr auto !important; gap: 0 !important; border-bottom: 1px solid var(--cs-cart-line-strong) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-coupon input { min-height: 44px !important; border: 0 !important; border-radius: 0 !important; padding: 0 4px 0 0 !important; background: transparent !important; font: 600 12px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-coupon .cs-btn { min-height: 44px !important; padding: 0 4px 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--cs-cart-ink) !important; font: 650 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-coupon-status, body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-stock-warning { font-size: 11px !important; line-height: 1.45 !important; color: var(--cs-cart-muted) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-totals { margin: 4px 0 18px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-summary-line { margin: 10px 0 !important; font: 450 12.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--cs-cart-muted) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-summary-line strong { font-weight: 600 !important; color: var(--cs-cart-ink) !important; font-variant-numeric: tabular-nums lining-nums !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-summary-line.is-discount strong { color: #3d6b52 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-summary-total { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid rgba(181, 138, 74, .45) !important; align-items: baseline !important; font: 650 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--cs-cart-ink) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-summary-total strong { font: 650 22px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: -.03em !important; text-transform: none !important; font-variant-numeric: tabular-nums lining-nums !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-checkout { margin-top: 4px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero { margin-bottom: 14px !important; gap: 10px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero h2 { font: 600 clamp(1.85rem, 8vw, 2.2rem)/1 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.03em !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero__count { min-width: 26px !important; min-height: 26px !important; font-size: 11px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero__continue { font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #6f5430 !important; border-bottom: 1px solid rgba(181,138,74,.4) !important; padding-bottom: 2px !important; background: transparent !important; min-height: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-hero p:not(.cs-kicker) { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #cs-mobile-v1-page-stage { display: block !important; min-height: auto !important; background: linear-gradient(180deg, #faf6f1 0%, #f3ebe3 52%, #efe6dc 100%) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-page__inner { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 8px 16px calc(var(--cs-mobile-bottom-nav-height) + var(--cs-mobile-safe-bottom) + 14px) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-cart-recs.cs-recs-rail { margin: 18px -16px 0 !important; padding: 22px 0 16px !important; border: 0 !important; border-top: 1px solid rgba(42,32,22,.08) !important; border-radius: 28px 28px 0 0 !important; background: radial-gradient(circle at 12% 0%, rgba(255,253,249,.9), transparent 46%), linear-gradient(180deg, #fffaf4 0%, #f6eee4 62%, #f1e7db 100%) !important; box-shadow: 0 -12px 36px rgba(42,32,22,.04) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin: 0 !important; padding: 0 16px 12px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__copy { min-width: 0 !important; max-width: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__kicker { display: block !important; margin: 0 0 5px !important; font: 700 10px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #b58a4a !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__head h2 { margin: 0 !important; font: 600 1.55rem/1.02 "Cormorant Garamond", Georgia, serif !important; letter-spacing: -.025em !important; color: #1a1510 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__lede { display: block !important; margin: 7px 0 0 !important; max-width: 28ch !important; font: 500 12.5px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #7a7168 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__controls { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__track { display: flex !important; flex-wrap: nowrap !important; gap: 11px !important; margin: 0 !important; padding: 0 16px 2px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scrollbar-width: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__track::-webkit-scrollbar { display: none !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide { flex: 0 0 138px !important; width: 138px !important; max-width: 138px !important; min-width: 138px !important; scroll-snap-align: start !important; display: grid !important; gap: 8px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__media-wrap { position: relative !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__media { aspect-ratio: 1 / 1 !important; border-radius: 16px !important; background: linear-gradient(160deg, #fffdf9, #efe5d8) !important; box-shadow: inset 0 0 0 1px rgba(42,32,22,.05) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__media img { width: 70% !important; height: 70% !important; object-fit: contain !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__body { gap: 3px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__brand { font: 700 9px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .1em !important; color: #8d663c !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__title { min-height: 0 !important; max-height: 2.55em !important; font: 600 12.5px/1.28 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #1a1510 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__price { margin-top: 2px !important; font: 700 12.5px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; color: #1a1510 !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__cart { position: absolute !important; right: 7px !important; bottom: 7px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #1a1510 !important; color: #fffaf3 !important; box-shadow: 0 6px 14px rgba(26,21,16,.16) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-rec-slide__cart svg { width: 13px !important; height: 13px !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__foot { display: flex !important; align-items: center !important; margin: 12px 16px 0 !important; padding: 12px 0 0 !important; border-top: 1px solid rgba(42,32,22,.08) !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__more { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin: 0 !important; font: 700 11px/1 "Plus Jakarta Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #8d663c !important; } body.cs-mobile-v1-active.cs-route-cart #csCartApp .cs-recs-rail__more svg { width: 13px !important; height: 13px !important; } body.cs-mobile-v1-active.cs-route-cart.cs-has-mobile-footer { padding-bottom: 0 !important; } /* Home assurance — compact trust rail */ body.cs-mobile-v1-active.cs-route-home .assurance-section { padding: 6px var(--cs-mobile-container) 4px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance { gap: 16px !important; padding: 18px 14px 14px !important; border-radius: 22px !important; box-shadow: 0 10px 28px rgba(51, 38, 27, .04) !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__head { gap: 6px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__kicker { font-size: 10px !important; letter-spacing: .16em !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__title { font-size: clamp(1.45rem, 6.4vw, 1.75rem) !important; line-height: 1.08 !important; max-width: 14ch !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__lede { display: none !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__rail { grid-template-columns: 1fr !important; border-radius: 16px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__item { border-right: 0 !important; border-bottom: 1px solid rgba(42, 32, 22, .08) !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__item:last-child { border-bottom: 0 !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__link { min-height: 58px !important; padding: 13px 12px !important; gap: 12px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__meta strong { font-size: 13.5px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__meta small { font-size: 11.5px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__routine { grid-template-columns: minmax(0, 1fr) auto !important; gap: 12px !important; padding: 14px 14px !important; border-radius: 16px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__routine-copy strong { font-size: 1.1rem !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__routine-cta { min-height: 38px !important; padding: 0 14px !important; } body.cs-mobile-v1-active.cs-route-home .home-assurance__pillars, body.cs-mobile-v1-active.cs-route-home .home-assurance__spotlight { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { body.cs-mobile-v1-active .product-grid, body.cs-mobile-v1-active .products-grid, body.cs-mobile-v1-active .cs-ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { /* COSMOSKIN mobile wordmark correction — 2026-06-30 Match the approved serif, wide-tracked reference logo on every mobile surface. Desktop is untouched because this block is mobile-only. */ body.cs-mobile-v1-active .cs-mobile-v1-logo, body.cs-mobile-v1-active .cs-mobile-v1-logo span, body.cs-mobile-v1-active .cm-wordmark, body.cs-mobile-v1-active .cm-footer-logo, body.cs-mobile-v1-active .m-header__wordmark, body.cs-mobile-v1-active .brand .brand-word, body.cs-mobile-v1-active .footer .brand-word { font-family: "Cormorant Garamond", Didot, "Bodoni 72", Georgia, serif !important; font-weight: 400 !important; text-transform: uppercase !important; font-variant-ligatures: none !important; -webkit-font-smoothing: antialiased !important; text-rendering: geometricPrecision !important; } body.cs-mobile-v1-active .cs-mobile-v1-logo, body.cs-mobile-v1-active .cs-mobile-v1-logo span { letter-spacing: clamp(.24em, .9vw, .36em) !important; } body.cs-mobile-v1-active .cm-wordmark, body.cs-mobile-v1-active .cm-footer-logo, body.cs-mobile-v1-active .m-header__wordmark, body.cs-mobile-v1-active .brand .brand-word, body.cs-mobile-v1-active .footer .brand-word { letter-spacing: clamp(.30em, 1.1vw, .46em) !important; } } @media (max-width: 374px) { .cs-mobile-v1-logo { font-size: 20px; letter-spacing: .24em; max-width: calc(100% - 116px); transform: translate(-50%, -50%); } .cs-mobile-v1-logo span { margin-right: -.24em; } body.cs-mobile-v1-active.cs-route-home .home-hero__actions { grid-template-columns: 1fr !important; } body.cs-mobile-v1-active.cs-route-home .home-hero h1 { font-size: clamp(2.05rem, 8.2vw, 2.55rem) !important; } } /* Home spotlight — shoppable campaign (replaces editorial manifesto) */ @media (max-width: 768px) { body.cs-mobile-v1-active.cs-route-home .cs-spotlight { padding: 8px 0 20px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight .container { width: 100% !important; max-width: none !important; padding: 0 14px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__shell { gap: 12px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__stage { border-radius: 24px !important; box-shadow: 0 14px 34px rgba(44, 34, 25, .06) !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__media img { min-height: 0 !important; aspect-ratio: 4 / 3 !important; border-radius: 0 !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__intro { gap: 11px !important; padding: 20px 16px 18px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__title { font-size: clamp(1.7rem, 7vw, 2.15rem) !important; max-width: none !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__lede { font-size: 13px !important; line-height: 1.5 !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__cta { width: 100% !important; min-height: 48px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__shop { padding: 16px 12px 12px !important; border-radius: 24px !important; gap: 14px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__shop-lede { max-width: none !important; font-size: 12.5px !important; line-height: 1.45 !important; color: #6f6458 !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__stories { height: min(72vh, 620px) !important; max-height: min(72vh, 620px) !important; margin: 0 -2px !important; padding: 2px 2px 8px !important; gap: 12px !important; scroll-snap-type: y mandatory !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story { flex: 0 0 100% !important; height: 100% !important; min-height: 100% !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; grid-template-rows: minmax(0, 1fr) auto !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story-main { grid-template-columns: 1fr !important; gap: 12px !important; padding: 12px !important; border-radius: 20px !important; height: 100% !important; box-sizing: border-box !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story-media { aspect-ratio: 4 / 3 !important; border-radius: 14px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story-media img { width: 62% !important; height: 78% !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story-name { font-size: clamp(1.15rem, 5.2vw, 1.35rem) !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story-text { font-size: 12.5px !important; line-height: 1.48 !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__story-cart { min-height: 48px !important; border-radius: 999px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__scroll-hint { display: block !important; margin-top: 2px !important; } body.cs-mobile-v1-active.cs-route-home .cs-spotlight__rail, body.cs-mobile-v1-active.cs-route-home .cs-spotlight__promos { display: none !important; } body.cs-mobile-v1-active.cs-route-account #invoicesPanel .cs-inv-studio { gap: 12px !important; } body.cs-mobile-v1-active.cs-route-account #invoicesPanel .cs-inv-studio__hero { padding: 20px 16px 16px !important; border-radius: 24px !important; } body.cs-mobile-v1-active.cs-route-account #invoicesPanel .cs-inv-studio__hero h2 { font-size: clamp(26px, 7vw, 32px) !important; } body.cs-mobile-v1-active.cs-route-account #invoicesPanel .cs-inv-card { padding: 14px !important; border-radius: 20px !important; } body.cs-mobile-v1-active.cs-route-account #invoicesPanel .cs-inv-card__meta { gap: 10px !important; } body.cs-mobile-v1-active.cs-route-account #invoicesPanel .cs-inv-studio__btn { min-height: 48px !important; } } /* Order detail — Kargo / Teslimat / Ödeme cards. The label/value rows were a space-between flex, so every value landed on a different left edge depending on how long its label was, and the trailing note ("Kargo takip linki oluştuğunda…") had no card padding at all and sat flush against the left edge while everything above it was inset 24px. */ .cs-detail-card .cs-detail-summary > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: baseline; gap: 12px; } .cs-detail-card .cs-detail-summary > div > span { min-width: 0; overflow-wrap: anywhere; } .cs-detail-card .cs-detail-summary > div > strong { min-width: 0; text-align: right; overflow-wrap: anywhere; } .cs-detail-card > .account-mini, .cs-detail-card .cs-detail-summary + .account-mini, .cs-detail-card .cs-detail-address + .account-mini { margin: 0; padding: 0 24px 24px; } .cs-detail-card .cs-detail-subhead { margin: 22px 0 12px; padding: 0 24px; font: 800 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #a2835d; } @media (max-width: 768px) { .cs-detail-card .cs-detail-summary, .cs-detail-card .cs-detail-address, .cs-detail-card > .account-mini { padding-inline: 18px; } .cs-detail-card .cs-detail-subhead { padding-inline: 18px; } .cs-detail-card .cs-detail-summary > div { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 10px; font-size: 12.5px; } }