/* Tots Studio storefront. Values follow the design canvas: desktop boards are 1440px wide with
   80px gutters, mobile boards are 390px wide with 16px gutters. The admin panel has its own
   layout and never loads this file. */

:root {
    --cream: #FBF7F2;
    --ink: #2B1B21;
    --plum: #3A1F2B;
    --blush: #F7E9E6;
    --line: #EADFD8;
    --rose: #B24C63;
    --wine: #8E3A4E;
    --muted: #6B5A60;
    --body: #5E4B52;
    --soft: #8A7A80;
    --gold: #D9B26A;
    --ochre: #7A5516;
    --sand: #F3ECE6;
    --tile: #F1E9E3;
    --wa: #1F7A4D;
    --leaf: #2F5D3A;
    --mint: #E3EDE4;
    --petal: #E6D6D9;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'DM Sans', system-ui, sans-serif;
    --gutter: 80px;
    --inset: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; font-family: var(--sans); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
a { color: var(--wine); }
a:hover { color: #6E2A3C; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.serif { font-family: var(--serif); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cover { width: 100%; height: 100%; object-fit: cover; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex-grow: 1; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.inset { max-width: calc(1440px - 2 * var(--inset)); margin-left: var(--inset); margin-right: var(--inset); }
@media (min-width: 1441px) { .inset { margin-left: auto; margin-right: auto; } }

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--ochre); text-transform: uppercase; }
.h2 { font-family: var(--serif); font-size: 44px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head__title { display: flex; flex-direction: column; gap: 8px; }
.section-head > a, .link-strong { font-size: 15px; font-weight: 600; }

.icon { flex-shrink: 0; }

/* Buttons */
.btn { height: 56px; padding: 0 32px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.btn--rose { background: var(--rose); color: #fff; font-weight: 700; }
.btn--rose:hover { background: #9E4157; color: #fff; }
.btn--outline { padding: 0 28px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; }
.btn--outline:hover { background: #fff; color: var(--ink); }
.btn--cream { background: var(--cream); color: var(--plum); font-weight: 700; }
.btn--cream:hover { color: var(--plum); background: #fff; }
.btn--wa { background: var(--wa); color: #fff; font-weight: 700; }
.btn--wa:hover { background: #18663f; color: #fff; }
.btn--ink { background: var(--ink); color: #fff; font-weight: 700; }
.btn--ink:hover { color: #fff; background: #000; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--sand); color: var(--soft); cursor: not-allowed; }

/* Pills / chips */
.chip { height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.chip:hover { color: var(--ink); border-color: #d8c8c0; }
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; z-index: 1; }
.badge--best { background: #F3E3C3; color: #6B4A12; }
.badge--new { background: var(--mint); color: var(--leaf); }
.badge--sale { background: var(--rose); color: #fff; }
.badge--oos { background: var(--ink); color: #fff; }

/* ---------- Announcement bar ---------- */
.announce { height: 40px; background: var(--plum); color: #F7E9E6; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 0 16px; white-space: nowrap; overflow: hidden; }
.announce__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.announce a { display: flex; align-items: center; gap: 6px; color: #F7E9E6; text-decoration: none; font-weight: 700; }
.announce__mobile { display: none; }

/* ---------- Header ---------- */
.header { height: 96px; border-bottom: 1px solid var(--line); background: var(--cream); position: relative; z-index: 30; }
.header__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.header__logo { display: flex; flex-shrink: 0; }
.header__logo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 2px 10px rgba(58,31,43,0.08); }
.nav { flex-grow: 1; display: flex; justify-content: center; gap: 4px; }
.nav a { padding: 12px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--blush); }
.nav a.nav__sale { color: var(--rose); font-weight: 700; }
.header__search { display: flex; align-items: center; gap: 10px; width: 280px; height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; flex-shrink: 0; }
.header__search input { border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); flex-grow: 1; min-width: 0; }
.header__search:focus-within { border-color: var(--rose); }
.header__cart { position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blush); color: var(--ink); }
.header__cart:hover { color: var(--ink); background: #F1DCD8; }
.cart-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.header__admin { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; display: flex; align-items: center; flex-shrink: 0; }
.header__mobile { display: none; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; text-decoration: none; flex-shrink: 0; }
.icon-btn:hover { color: var(--ink); background: var(--sand); }
.header__menu-btn { display: none; }

/* Checkout header */
.cohead { height: 104px; background: #fff; border-bottom: 1px solid var(--line); }
.cohead__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cohead__logo img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps__n { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: #C9BCC0; }
.steps__n--done { background: var(--mint); color: var(--leaf); }
.steps__n--now { background: var(--ink); }
.steps__n--final { background: var(--leaf); color: #fff; }
.steps__bar { width: 40px; height: 1.5px; background: var(--line); }
.steps .is-now { color: var(--ink); }
.steps .is-next { color: var(--soft); }
.cohead__secure { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--leaf); }
.cohead__help { font-size: 14px; font-weight: 600; }
.cohead__back { display: none; }

/* ---------- Footer ---------- */
.footer { margin-top: 96px; background: var(--plum); color: var(--petal); }
.footer a { color: var(--cream); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer--compact .footer__inner { padding-top: 56px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.footer__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.footer__brand { display: flex; align-items: center; gap: 20px; max-width: 460px; }
.footer__brand img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }
.footer__brand p, .footer__about p { font-size: 15px; line-height: 1.6; }
.footer__links { display: flex; gap: 32px; font-size: 15px; flex-wrap: wrap; }
.footer__base { padding-top: 24px; border-top: 1px solid rgba(251,247,242,0.16); display: flex; justify-content: space-between; gap: 24px; font-size: 14px; color: #CDB9BE; }
.footer__base > span:first-child { display: flex; align-items: center; gap: 8px; }
.footer__base a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.footer--full { margin-top: 88px; }
.footer--full .footer__inner { padding-top: 72px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 56px; }
.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.footer__about { display: flex; flex-direction: column; gap: 18px; }
.footer__about img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #fff; }
.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer__col .eyebrow { color: var(--gold); }
.footer__col span { color: var(--cream); }
.footer__social { display: flex; gap: 10px; margin-top: 6px; }
.footer__social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(251,247,242,0.3); display: flex; align-items: center; justify-content: center; }
.footer--full .footer__base { padding-top: 28px; }
.footer__mobile { display: none; }
.footer__rowbar { padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-size: 14px; color: #CDB9BE; }
.footer__rowcopy { display: flex; align-items: center; gap: 8px; }
.footer__rowcopy a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.footer__rowlinks { display: flex; gap: 28px; flex-wrap: wrap; }
.footer--min { margin-top: 72px; }
.footer__min a { color: inherit; text-decoration: none; }
.footer__min a:hover { color: #fff; }
.footer__min { padding-top: 32px; padding-bottom: 32px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: #CDB9BE; flex-wrap: wrap; }

/* ---------- Product card ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.pcard__link { position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.pcard:hover { color: var(--ink); }
.pcard__media { position: relative; height: 380px; border-radius: 24px; overflow: hidden; background: var(--tile); }
.pgrid--3 .pcard__media { height: 400px; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .5s ease; }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard.is-oos .pcard__media img { opacity: .6; }
.pcard__quick { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; margin: 0; }
.pcard__quick button, .pcard__quick a { width: 100%; height: 46px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--ink); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; }
.pcard__quick button:hover, .pcard__quick a:hover { background: #fff; color: var(--ink); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.pcard__name { font-size: 16px; font-weight: 700; }
.pcard__meta { font-size: 13px; color: var(--muted); }
.pcard__meta mark { background: #F6E3B4; color: var(--ink); padding: 0 3px; border-radius: 4px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.price__now { font-size: 17px; font-weight: 700; color: var(--ink); }
.price__now.is-sale { color: var(--rose); }
.price__was { font-size: 14px; color: var(--soft); text-decoration: line-through; }
.swatches { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(43,27,33,0.18); }
.swatches__more { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- Home ---------- */
.hero { margin-top: 24px; height: 620px; padding: 56px 56px 56px 72px; border-radius: 40px; background: var(--blush); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.hero__kicker { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ochre); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.hero h1 { font-family: var(--serif); font-size: 78px; line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--rose); }
.hero__lead { max-width: 480px; font-size: 18px; line-height: 1.6; color: var(--body); }
.hero__ctas { display: flex; gap: 12px; margin-top: 8px; }
.hero__ticks { display: flex; gap: 24px; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--body); }
.hero__ticks span { display: flex; align-items: center; gap: 8px; }
.hero__art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.hero__tile { border-radius: 28px; overflow: hidden; background: #EFE6E0; min-height: 0; position: relative; }
.hero__tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero__tile--tall { grid-row: span 2; }
.hero__tile--tall img { object-position: center; }
.hero__product { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(58,31,43,0.14); }
.hero__product:hover { color: var(--ink); }
.hero__product strong { font-size: 14px; font-weight: 700; }
.hero__product small { font-size: 13px; color: var(--muted); }
.hero__product > span:first-child { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.round-go { width: 36px; height: 36px; border-radius: 50%; background: var(--rose); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.trust { padding-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust__item { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.trust__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; }
.trust__item strong { display: block; font-size: 15px; font-weight: 700; }
.trust__item small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.home-section { padding-top: 88px; display: flex; flex-direction: column; gap: 28px; }
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cat { position: relative; height: 480px; border-radius: 32px; overflow: hidden; text-decoration: none; color: var(--ink); display: block; }
.cat:hover { color: var(--ink); }
.cat img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.cat__label { position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 18px 20px; border-radius: 22px; background: #fff; display: flex; align-items: center; gap: 12px; }
.cat__label > span:first-child { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.cat__label strong { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.cat__label small { font-size: 13px; color: var(--muted); }
.ring-go { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--sand); }
.tabs button { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--muted); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(58,31,43,0.1); }
[role="tabpanel"][hidden] { display: none; }

.festive { margin-top: 88px; height: 520px; border-radius: 40px; background: var(--plum); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.festive__copy { padding: 48px 72px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.festive__copy .eyebrow { letter-spacing: 0.14em; color: var(--gold); }
.festive__copy h2 { font-family: var(--serif); font-size: 54px; line-height: 1.05; font-weight: 600; color: var(--cream); }
.festive__copy p { max-width: 460px; font-size: 17px; line-height: 1.6; color: var(--petal); }
.festive__copy .btn { align-self: flex-start; margin-top: 8px; }
.festive__art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 32px 32px 32px 0; min-height: 0; }
.festive__art > * { border-radius: 28px; overflow: hidden; min-height: 0; }
.festive__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.festive__art > :first-child { margin-top: 40px; }
.festive__art > :last-child { margin-bottom: 40px; }
.festive__mobile-img { display: none; }

.bysize { padding-top: 88px; display: flex; align-items: center; gap: 48px; }
.bysize__head { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.bysize__head h2 { font-family: var(--serif); font-size: 36px; font-weight: 600; }
.bysize__head a { font-size: 15px; font-weight: 600; margin-top: 4px; }
.bysize__chips { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.bysize__chips a { height: 52px; min-width: 104px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.bysize__chips a:hover { border-color: var(--ink); color: var(--ink); }

.why { padding-top: 88px; }
.why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 32px; background: #fff; }
.why__item { padding: 44px 40px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); }
.why__item:last-child { border-right: 0; }
.why__item h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.why__item p { font-size: 15px; line-height: 1.6; color: var(--muted); }

.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.story { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.story:hover { color: var(--ink); }
.story__img { height: 300px; border-radius: 28px; overflow: hidden; background: var(--sand); }
.story__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.story .eyebrow { font-size: 12px; }
.story__title { font-family: var(--serif); font-size: 24px; line-height: 1.2; font-weight: 600; }
.story__excerpt { font-size: 15px; line-height: 1.55; color: var(--body); }
.story__date { font-size: 13px; color: var(--soft); }
.story__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.story__short { display: none; }

.wa-band { margin-top: 88px; padding: 56px 80px; border-radius: 40px; background: var(--blush); display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.wa-band__intro { display: flex; gap: 28px; align-items: center; max-width: 720px; }
.wa-band__icon { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; background: var(--wa); display: flex; align-items: center; justify-content: center; }
.wa-band__copy { display: flex; flex-direction: column; gap: 10px; }
.wa-band__copy h2 { font-family: var(--serif); font-size: 40px; font-weight: 600; }
.wa-band__copy p { font-size: 16px; line-height: 1.6; color: var(--body); }
.wa-band__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; }
.wa-band__number { font-family: var(--serif); font-size: 36px; font-weight: 600; letter-spacing: 0.01em; }
.wa-band__cta .btn { padding: 0 30px; }

/* ---------- Listing ---------- */
.titleband { margin-top: 24px; padding: 44px 40px 40px; border-radius: 32px; background: var(--blush); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.titleband__copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.titleband h1 { font-family: var(--serif); font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.titleband p { max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--body); }
.titleband__chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.listing { padding-top: 40px; display: flex; gap: 48px; align-items: flex-start; }
.filters { width: 272px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }
.filters__head { display: flex; align-items: center; justify-content: space-between; }
.filters__head strong { font-size: 18px; font-weight: 700; }
.filters__clear { border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--wine); cursor: pointer; text-decoration: underline; padding: 8px 0; }
.fgroup { display: flex; flex-direction: column; gap: 14px; padding: 0 0 28px; margin: 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fgroup legend { padding: 0; margin-bottom: 14px; float: left; width: 100%; }
.fgroup legend + * { clear: both; }
.fopts { display: grid; gap: 8px; }
.fopts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fopts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fopt { position: relative; display: block; }
.fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fopt span { height: 44px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; text-align: center; }
.fopt--tall span { height: 52px; }
.fopt small { font-size: 11px; font-weight: 500; color: var(--muted); }
.fopt input:checked + span { border-color: var(--rose); background: var(--blush); color: var(--wine); }
.fopt input:checked + span small { color: var(--wine); }
.fopt input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.fcolours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.fcolour { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; cursor: pointer; position: relative; }
.fcolour input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fcolour i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(43,27,33,0.2); }
.fcolour input:checked + i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.fcolour input:checked ~ span { font-weight: 700; }
.fcolour input:focus-visible + i { outline: 2px solid var(--rose); outline-offset: 4px; }
.range { position: relative; height: 24px; }
.range__track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--line); }
.range__fill { position: absolute; top: 10px; height: 4px; border-radius: 4px; background: var(--rose); }
.range input[type="range"] { position: absolute; left: -10px; width: calc(100% + 20px); top: 0; height: 24px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--rose); cursor: pointer; border: 0; }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--rose); cursor: pointer; border: 0; }
.range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.range input[type="range"]::-moz-range-track { background: transparent; }
.range__labels { display: flex; justify-content: space-between; font-size: 14px; color: var(--body); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; cursor: pointer; position: relative; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle i { width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; }
.toggle input:checked + i { background: var(--rose); }
.toggle input:checked + i::after { left: 21px; }
.toggle input:focus-visible + i { outline: 2px solid var(--rose); outline-offset: 2px; }
.filters__apply { display: none; }

.results { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.results__bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 16px; }
.results__count { font-size: 15px; color: var(--body); }
.results__count strong { color: var(--ink); }
.sort { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); }
.sort select { height: 44px; padding: 0 40px 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232B1B21' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; font-size: 14px; font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.results__more { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 24px; }
.results__more > span { font-size: 14px; color: var(--muted); }
.progress { width: 240px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--rose); border-radius: 4px; }
.filters-toggle { display: none; }
.empty { padding: 56px; border-radius: 32px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.empty__icon { width: 88px; height: 88px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; }
.empty h2 { margin-top: 6px; font-family: var(--serif); font-size: 32px; font-weight: 600; }
.empty p { font-size: 16px; color: var(--body); }
.empty__ctas { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.empty__ctas .btn { height: 52px; padding: 0 28px; font-size: 15px; }

/* ---------- Product page ---------- */
.crumbbar { padding-top: 24px; padding-bottom: 24px; }
.pdp { display: flex; gap: 64px; align-items: flex-start; }
.pdp__gallery { display: flex; gap: 16px; flex-shrink: 0; }
.pdp__thumbs { display: flex; flex-direction: column; gap: 12px; max-height: 760px; overflow-y: auto; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb { width: 88px; height: 104px; flex-shrink: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--tile); border: 2px solid transparent; display: block; }
.pdp__thumb.is-on { border-color: var(--ink); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.pdp__main { position: relative; width: 600px; height: 760px; border-radius: 32px; overflow: hidden; background: var(--tile); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.pdp__main .badge { top: 20px; left: 20px; padding: 8px 14px; }
.pdp__main.is-oos img { opacity: .6; }
.pdp__dots { display: none; }
.pdp__info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.pdp__head { display: flex; flex-direction: column; gap: 12px; }
.pdp__head .eyebrow { font-weight: 600; letter-spacing: 0.08em; }
.pdp__head h1 { font-family: var(--serif); font-size: 46px; line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; }
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp__now { font-size: 28px; font-weight: 700; color: var(--ink); }
.pdp__now.is-sale { color: var(--rose); }
.pdp__was { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.pdp__save { padding: 4px 10px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 13px; font-weight: 700; align-self: center; }
.pdp__sku { font-size: 14px; color: var(--muted); }
.pdp__desc { font-size: 16px; line-height: 1.6; color: var(--body); }
.pdp__opt { display: flex; flex-direction: column; gap: 14px; }
.pdp__optlabel { font-size: 15px; }
.pdp__optrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pdp__optrow a { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pdp__colours { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__colour { width: 44px; height: 44px; padding: 4px; border-radius: 50%; cursor: pointer; background: #fff; border: 2px solid transparent; display: block; }
.pdp__colour.is-on { border-color: var(--ink); }
.pdp__colour:hover { border-color: var(--line); }
.pdp__colour.is-on:hover { border-color: var(--ink); }
.pdp__colour span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(43,27,33,0.18); }
.pdp__sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.size-btn { height: 48px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); padding: 0 4px; }
.size-btn:hover { border-color: var(--ink); }
.size-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.size-btn:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.bands { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--body); flex-wrap: wrap; }
.bands strong { font-weight: 700; color: var(--ink); margin-right: 4px; }
.bands span { padding: 6px 12px; border-radius: 999px; background: var(--sand); color: var(--body); font-weight: 600; }
.bands span.is-on { background: var(--ink); color: #fff; }
.agenote { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #F7F1EA; font-size: 14px; color: var(--body); }
.agenote b { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.buy { display: flex; gap: 12px; }
.qty { height: 58px; width: 150px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; flex-shrink: 0; }
.qty button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.qty button:hover { background: var(--sand); }
.qty output, .qty span { font-size: 16px; font-weight: 700; }
.buy__add { flex-grow: 1; height: 58px; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.buy__add:hover { background: #9E4157; }
.buy__add:disabled { background: var(--sand); color: var(--soft); cursor: not-allowed; }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.perks > div { padding: 18px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); }
.perks > div:last-child { border-right: 0; }
.perks span { font-size: 14px; font-weight: 600; line-height: 1.4; }
.wa-help { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: #EEF5EF; color: #1F4A33; font-size: 14px; font-weight: 600; text-decoration: none; }
.wa-help:hover { color: #1F4A33; background: #E3EFE5; }
.accordion { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { height: 60px; list-style: none; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted); }
.accordion details[open] summary::after { content: "\2212"; }
.accordion__body { margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.accordion__body p { font-size: 15px; line-height: 1.6; color: var(--body); }
.accordion ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--body); }
.pdp__oos { font-size: 14px; color: var(--muted); }
.related { padding-top: 96px; display: flex; flex-direction: column; gap: 28px; }
.related h2 { font-family: var(--serif); font-size: 40px; font-weight: 600; }

/* ---------- Cart drawer ---------- */
.drawer-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.drawer-root.is-open { pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(43,27,33,0.52); opacity: 0; transition: opacity .25s ease; border: 0; padding: 0; width: 100%; cursor: pointer; }
.drawer-root.is-open .drawer__scrim { opacity: 1; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; background: var(--cream); box-shadow: -24px 0 60px rgba(43,27,33,0.25); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; visibility: hidden; }
.drawer-root.is-open .drawer { transform: none; visibility: visible; }
.drawer__head { height: 84px; flex-shrink: 0; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.drawer__head h2 span { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--muted); }
.close-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; text-decoration: none; }
.close-btn:hover { background: var(--line); color: var(--ink); }
.drawer__body { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.notice { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--mint); color: #234A2E; font-size: 14px; line-height: 1.4; }
.notice__tick { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--leaf); color: #fff; display: flex; align-items: center; justify-content: center; }
.notice--warn { background: #FBE7E9; color: #7A1F33; }
.ship-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.ship-card__bar { height: 8px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.ship-card__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--rose); }
.lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.line { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line__img { width: 92px; height: 112px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: var(--tile); display: block; }
.line__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.line__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.line__top { display: flex; justify-content: space-between; gap: 12px; }
.line__name { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.line__name:hover { color: var(--rose); }
.line__variant { font-size: 13px; color: var(--muted); }
.line__oos { font-size: 13px; font-weight: 700; color: #A12C44; }
.line__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.line__trash { width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.line__trash:hover { background: var(--sand); color: var(--ink); }
.mini-qty { height: 40px; width: 116px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; flex-shrink: 0; }
.mini-qty form { margin: 0; display: flex; }
.mini-qty button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.mini-qty button:hover:not(:disabled) { background: var(--sand); }
.mini-qty button:disabled { opacity: .35; cursor: not-allowed; }
.mini-qty > span { font-size: 14px; font-weight: 700; }
.line__price { display: flex; flex-direction: column; align-items: flex-end; }
.line__price s { font-size: 12px; color: var(--soft); }
.line__price b { font-size: 15px; font-weight: 700; color: var(--ink); }
.line__price b.is-sale { color: var(--rose); }
.pairs { display: flex; flex-direction: column; gap: 12px; }
.pairs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); min-width: 0; }
.pair:hover { color: var(--ink); border-color: #d8c8c0; }
.pair img { width: 52px; height: 64px; border-radius: 10px; object-fit: cover; object-position: center 15%; flex-shrink: 0; }
.pair > span:nth-child(2) { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pair strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pair small { font-size: 13px; color: var(--body); }
.plus-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--blush); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.drawer__foot { flex-shrink: 0; padding: 20px 28px 24px; border-top: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer__total span { font-size: 16px; font-weight: 700; }
.drawer__total b { font-size: 22px; font-weight: 700; }
.drawer__saving { font-size: 13px; font-weight: 600; color: var(--leaf); }
.drawer__note { font-size: 13px; color: var(--muted); }
.drawer__foot .btn { height: 56px; width: 100%; font-weight: 700; }
.drawer__foot .btn--outline { height: 48px; font-size: 15px; }
.drawer__cod { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--body); }
.drawer__body--empty { padding-top: 0; gap: 0; }
.drawer-empty { padding: 56px 12px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.drawer-empty__icon { width: 112px; height: 112px; border-radius: 50%; background: var(--blush); color: var(--rose); display: flex; align-items: center; justify-content: center; }
.drawer-empty h3 { margin-top: 8px; font-family: var(--serif); font-size: 30px; font-weight: 600; }
.drawer-empty p { font-size: 15px; line-height: 1.6; color: var(--body); }
.drawer-empty .btn { margin-top: 8px; height: 54px; font-weight: 700; }
.popular { display: flex; flex-direction: column; gap: 14px; }
.popular__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.popular a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.popular a > span:first-child { height: 190px; border-radius: 18px; overflow: hidden; background: var(--tile); display: block; }
.popular img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.popular strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popular small { font-size: 14px; color: var(--body); }
.drawer__perks { margin-top: auto; padding: 20px 28px 24px; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 24px; font-size: 13px; color: var(--body); flex-shrink: 0; }

/* ---------- Cart page ---------- */
.bag { padding-top: 48px; display: flex; gap: 56px; align-items: flex-start; }
.bag__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.bag__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bag__head h1 { font-family: var(--serif); font-size: 48px; font-weight: 600; letter-spacing: -0.01em; }
.bag__head h1 span { font-size: 28px; color: var(--muted); font-weight: 400; }
.bag__lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bagline { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.bagline__img { width: 140px; height: 172px; flex-shrink: 0; border-radius: 18px; overflow: hidden; background: var(--tile); display: block; }
.bagline__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.bagline__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bagline__top { display: flex; justify-content: space-between; gap: 16px; }
.bagline__top a { font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.bagline__top a:hover { color: var(--rose); }
.bagline__top b { font-size: 18px; font-weight: 700; white-space: nowrap; }
.bagline__sub { font-size: 14px; color: var(--muted); }
.bagline__foot { margin-top: auto; display: flex; align-items: center; gap: 20px; }
.bagline__foot .mini-qty { height: 48px; width: 136px; }
.bagline__foot .mini-qty button { width: 44px; height: 44px; }
.bagline__foot .mini-qty > span { font-size: 15px; }
.text-btn { height: 44px; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }
.text-btn:hover { color: var(--ink); }
.cross { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cross h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.cross__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cross__item { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; color: var(--ink); min-width: 0; }
.cross__item:hover { color: var(--ink); border-color: #d8c8c0; }
.cross__item img { width: 72px; height: 88px; border-radius: 12px; object-fit: cover; object-position: center 15%; flex-shrink: 0; }
.cross__item > span:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cross__item strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cross__item small { font-size: 14px; color: var(--body); }
.cross__item .plus-btn { width: 44px; height: 44px; }
.summary { width: 420px; flex-shrink: 0; padding: 32px; border-radius: 28px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.summary h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.summary__rows { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.summary__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.summary__rows span { color: var(--body); }
.summary__rows b { font-weight: 600; }
.summary__saving b { color: var(--leaf); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--line); gap: 12px; }
.summary__total span { font-size: 17px; font-weight: 700; }
.summary__total b { font-size: 28px; font-weight: 700; white-space: nowrap; }
.summary .btn { height: 58px; width: 100%; font-weight: 700; }
.summary__info { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--blush); font-size: 14px; color: var(--body); }
.summary__info span { display: flex; gap: 10px; align-items: center; }

/* ---------- Checkout ---------- */
.co { padding-top: 48px; display: flex; gap: 56px; align-items: flex-start; }
.co__form { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.co__form h1 { font-family: var(--serif); font-size: 44px; font-weight: 600; letter-spacing: -0.01em; }
.fieldset { margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: #fff; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fieldset legend { padding: 0 8px; font-size: 18px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; }
.input { height: 52px; width: 100%; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 15px; background: var(--cream); color: var(--ink); }
.input:focus { outline: 0; border-color: var(--rose); background: #fff; }
.input[readonly] { background: var(--sand); color: var(--body); }
.input.input-validation-error { border-color: #C2384F; }
textarea.input { height: auto; padding: 14px 16px; resize: vertical; }
.field__hint { font-size: 13px; color: var(--muted); }
.field-validation-error, .field__error { font-size: 13px; font-weight: 600; color: #A12C44; }
.field-validation-valid { display: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pay { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 2px solid var(--rose); border-radius: 18px; background: #FDF6F5; cursor: pointer; }
.pay input { width: 20px; height: 20px; accent-color: var(--rose); margin: 0; flex-shrink: 0; }
.pay__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--blush); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay__copy { display: flex; flex-direction: column; gap: 2px; }
.pay__copy strong { font-size: 16px; font-weight: 700; }
.pay__copy small { font-size: 14px; color: var(--muted); }
.co__place { height: 60px; width: 100%; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.co__place:hover { background: #9E4157; }
.co__place:disabled { background: var(--sand); color: var(--soft); cursor: not-allowed; }
.co__terms { font-size: 13px; color: var(--muted); text-align: center; }
.alert { padding: 14px 18px; border-radius: 16px; background: #FBE7E9; color: #7A1F33; font-size: 14px; font-weight: 600; }
.alert ul { margin: 0; padding-left: 18px; }
.alert--ok { background: var(--mint); color: #234A2E; }
.co-summary { width: 420px; flex-shrink: 0; padding: 32px; border-radius: 28px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.co-summary__head { display: flex; justify-content: space-between; align-items: baseline; }
.co-summary__head h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.co-summary__head a { font-size: 14px; font-weight: 600; }
.co-items { display: flex; flex-direction: column; gap: 16px; }
.co-item { display: flex; gap: 14px; align-items: center; }
.co-item__img { position: relative; flex-shrink: 0; }
.co-item__img img { width: 68px; height: 84px; border-radius: 12px; object-fit: cover; object-position: center 15%; }
.co-item__img b { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.co-item__copy { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-item__copy strong { font-size: 15px; font-weight: 700; }
.co-item__copy small { font-size: 13px; color: var(--muted); }
.co-item > b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.co-summary .summary__rows { padding-top: 18px; border-top: 1px solid var(--line); }
.co-summary .summary__total b { font-size: 26px; }
.co-mobile-summary, .co-mobile-bar { display: none; }

/* ---------- Confirmation ---------- */
.done { width: 880px; max-width: 100%; margin: 0 auto; padding-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.done__hero { padding: 48px 56px; border-radius: 32px; background: var(--blush); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.done__tick { width: 84px; height: 84px; border-radius: 50%; background: var(--leaf); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px var(--mint); }
.done__hero h1 { margin-top: 16px; font-family: var(--serif); font-size: 52px; line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; }
.done__hero p { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--body); }
.done__hero p strong { color: var(--ink); }
.ordno { margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: #fff; }
.ordno span { font-size: 13px; color: var(--muted); }
.ordno strong { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.ordno button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sand); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.card { padding: 32px 36px; border-radius: 28px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.card > h2 { font-size: 18px; font-weight: 700; }
.card > h2.serif { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.next { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.next li { display: flex; flex-direction: column; gap: 12px; }
.next__row { display: flex; align-items: center; }
.next__n { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--sand); color: var(--muted); }
.next__n--done { background: var(--leaf); color: #fff; }
.next__n--now { background: var(--rose); color: #fff; box-shadow: 0 0 0 5px var(--blush); }
.next__line { flex-grow: 1; height: 2px; margin: 0 10px; background: var(--line); }
.next__line--done { background: var(--leaf); }
.next li:last-child .next__line { background: transparent; }
.next strong { font-size: 15px; font-weight: 700; padding-right: 16px; }
.next small { font-size: 13px; line-height: 1.5; color: var(--muted); padding-right: 16px; }
.next__text { display: flex; flex-direction: column; gap: 12px; }
.done__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.done__pair .card { padding: 28px 32px; gap: 6px; font-size: 15px; line-height: 1.5; }
.done__pair .eyebrow { margin-bottom: 6px; }
.done__pair span { color: var(--body); }
.done__cod { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.done__keep { padding: 14px 16px; border-radius: 16px; background: var(--blush); color: var(--plum); margin: 4px 0; }
.done__when { font-size: 14px; color: var(--muted) !important; }
.done-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.done-items li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.done-items img { width: 72px; height: 88px; border-radius: 12px; object-fit: cover; object-position: center 15%; flex-shrink: 0; }
.done-items li > span { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.done-items strong { font-size: 16px; }
.done-items small { font-size: 14px; color: var(--muted); }
.done-items li > b { font-size: 16px; font-weight: 700; white-space: nowrap; }
.done__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.done__ctas .btn { font-weight: 700; }
.done__foot { text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- Search ---------- */
.search-hero { padding-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.search-hero h1 { font-family: var(--serif); font-size: 52px; font-weight: 600; }
.bigsearch { width: 720px; max-width: 100%; display: flex; gap: 10px; padding: 8px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 6px 20px rgba(58,31,43,0.06); }
.bigsearch:focus-within { border-color: var(--rose); }
.bigsearch > span { width: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bigsearch input { flex-grow: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; font-size: 17px; color: var(--ink); }
.bigsearch button { height: 52px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.popular-terms { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.popular-terms a { padding: 8px 14px; border-radius: 999px; background: var(--sand); color: var(--ink); text-decoration: none; font-weight: 600; }
.popular-terms a:hover { background: var(--line); color: var(--ink); }
.search-results { padding-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.search-results__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.search-results__bar p { font-size: 17px; color: var(--body); }
.search-results__bar strong { color: var(--ink); }
.search-results__bar q { color: var(--ink); font-weight: 600; }
.search-empty { margin: 48px auto 0; width: 720px; max-width: 100%; }

/* ---------- Help pages ---------- */
.helpband { margin-top: 24px; padding: 44px 40px; border-radius: 32px; background: var(--blush); display: flex; flex-direction: column; gap: 12px; }
.helpband h1 { font-family: var(--serif); font-size: 56px; line-height: 1; font-weight: 600; }
.helpband p { font-size: 17px; color: var(--body); }
.sizeguide { padding-top: 40px; display: flex; gap: 40px; align-items: flex-start; }
.sizeguide__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.agepicks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agepicks > span { font-size: 14px; font-weight: 600; color: var(--body); margin-right: 4px; }
.agepicks button { height: 40px; padding: 0 14px; font-size: 13px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; font-size: 15px; }
.table thead tr { background: var(--plum); color: var(--cream); text-align: left; }
.table th, .table td { padding: 16px 24px; text-align: left; }
.table thead th { padding: 18px 24px; font-weight: 700; }
.table tbody th, .table tbody td { border-top: 1px solid var(--line); }
.table tbody th { font-weight: 700; }
.table tbody td { color: var(--body); }
.table tbody tr.is-on { background: #FDF1EF; }
.table__pill { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--sand); color: var(--ink); display: inline-block; }
.table tbody tr.is-on .table__pill { background: var(--rose); color: #fff; }
.tablewrap { overflow-x: auto; border-radius: 24px; }
.aside-stack { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.tip { padding: 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; }
.tip h2 { font-size: 18px; font-weight: 700; }
.tip p { font-size: 15px; line-height: 1.6; color: var(--body); }
.tip--dark { background: var(--plum); color: var(--cream); }
.tip--dark h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.tip--dark p { color: var(--petal); }
.tip--white { background: #fff; border: 1px solid var(--line); }
.tip--blush { background: var(--blush); gap: 12px; }
.tip .btn { align-self: flex-start; height: 48px; padding: 0 24px; font-size: 15px; gap: 8px; }
.facts { padding-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.fact b { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--wine); }
.fact span { font-size: 14px; color: var(--body); }
.policies { padding-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.policies > .policy:only-child { grid-column: 1 / -1; }
.policy { padding: 36px; border-radius: 28px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.policy__head { display: flex; align-items: center; gap: 14px; }
.policy__head span { width: 52px; height: 52px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.policy__head h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; color: #3E2B32; }
.ticks li { display: flex; gap: 12px; }
.ticks svg { flex-shrink: 0; margin-top: 2px; }
.plumband { margin-top: 24px; padding: 32px 40px; border-radius: 28px; background: var(--plum); color: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.plumband > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.plumband h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.plumband p { font-size: 15px; color: var(--petal); }
.plumband__ctas { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.plumband__ctas .btn { height: 52px; padding: 0 28px; font-size: 15px; font-weight: 700; }
.btn--ghost-light { border: 1.5px solid rgba(251,247,242,0.5); color: var(--cream); background: transparent; }
.btn--ghost-light:hover { color: #fff; border-color: #fff; }

.faq { padding-top: 56px; display: flex; gap: 64px; align-items: flex-start; }
.faq__intro { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.faq__intro h1 { font-family: var(--serif); font-size: 56px; line-height: 1.02; font-weight: 600; }
.faq__intro > p { font-size: 17px; line-height: 1.6; color: var(--body); }
.faq__ask { margin-top: 16px; padding: 28px; border-radius: 24px; background: var(--blush); display: flex; flex-direction: column; gap: 12px; }
.faq__ask h2 { font-size: 18px; font-weight: 700; }
.faq__ask p { font-size: 15px; line-height: 1.6; color: var(--body); }
.faq__ask > span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; }
.faq__ask .btn { align-self: flex-start; margin-top: 4px; height: 48px; padding: 0 24px; font-size: 15px; }
.faq__list { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 34px; }
.qa { border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
.qa[open] { background: #fff; }
.qa summary { min-height: 72px; padding: 0 24px; list-style: none; font-size: 18px; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--sand); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; }
.qa[open] summary::after { content: "\2212"; background: var(--rose); color: #fff; }
.qa p { padding: 0 24px 24px; font-size: 16px; line-height: 1.65; color: var(--body); }

.contact { padding-top: 56px; display: flex; gap: 48px; align-items: flex-start; }
.contact__intro { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.contact__intro h1 { font-family: var(--serif); font-size: 56px; line-height: 1.02; font-weight: 600; }
.contact__intro > p { font-size: 17px; line-height: 1.6; color: var(--body); }
.reach { margin-top: 8px; padding: 28px; border-radius: 28px; background: var(--plum); color: var(--cream); display: flex; flex-direction: column; gap: 20px; }
.reach__row { display: flex; gap: 14px; align-items: center; color: var(--cream); text-decoration: none; }
.reach__row:hover { color: #fff; }
.reach__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgba(251,247,242,0.1); display: flex; align-items: center; justify-content: center; }
.reach__icon--wa { background: var(--wa); }
.reach__row > span:last-child { display: flex; flex-direction: column; font-size: 15px; }
.reach__row small { font-size: 13px; color: #CDB9BE; }
.reach__hours { padding-top: 16px; border-top: 1px solid rgba(251,247,242,0.16); font-size: 14px; color: var(--petal); }
.contact__card { flex-grow: 1; min-width: 0; padding: 40px; border-radius: 32px; background: #fff; border: 1px solid var(--line); }
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.contact__form h2 { font-family: var(--serif); font-size: 32px; font-weight: 600; }
.contact__form .input { height: 54px; }
.contact__form textarea.input { height: auto; }
.topics { display: flex; gap: 8px; flex-wrap: wrap; }
.topics label { position: relative; }
.topics input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topics span { height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: flex; align-items: center; }
.topics input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.topics input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.contact__form .btn { align-self: flex-start; padding: 0 36px; font-weight: 700; }
.sent { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.sent__tick { width: 84px; height: 84px; border-radius: 50%; background: var(--mint); color: var(--leaf); display: flex; align-items: center; justify-content: center; }
.sent h2 { margin-top: 8px; font-family: var(--serif); font-size: 34px; font-weight: 600; }
.sent p { max-width: 380px; font-size: 16px; line-height: 1.6; color: var(--body); }
.sent .btn { margin-top: 8px; height: 50px; padding: 0 28px; font-size: 15px; }

.nf { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.nf__copy { display: flex; flex-direction: column; gap: 20px; }
.nf__code { font-family: var(--serif); font-size: 160px; line-height: 0.9; font-weight: 600; font-style: italic; color: var(--rose); }
.nf__copy h1 { font-family: var(--serif); font-size: 48px; line-height: 1.05; font-weight: 600; }
.nf__copy > p { max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--body); }
.nf__ctas { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.nf__ctas .btn { height: 54px; padding: 0 28px; font-size: 15px; font-weight: 700; }
.nf__search { margin-top: 12px; width: 480px; max-width: 100%; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); }
.nf__search input { flex-grow: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; outline: 0; background: transparent; font-size: 15px; }
.nf__search button { height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.nf__art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: 620px; }
.nf__art a { border-radius: 28px; overflow: hidden; display: block; min-height: 0; }
.nf__art a:first-child { margin-top: 48px; }
.nf__art a:last-child { margin-bottom: 48px; }
.nf__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }

/* ---------- Journal ---------- */
.jhead { padding-top: 56px; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.jhead__copy { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.jhead__copy .eyebrow { letter-spacing: 0.14em; }
.jhead h1 { font-family: var(--serif); font-size: 64px; line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; }
.jhead h1 em { font-style: italic; font-weight: 500; color: var(--rose); }
.jhead__copy > p { font-size: 17px; line-height: 1.6; color: var(--body); }
.jsearch { display: flex; align-items: center; gap: 10px; width: 320px; height: 52px; flex-shrink: 0; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.jsearch input { border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); flex-grow: 1; min-width: 0; }
.jtopics { padding-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.featured { margin-top: 40px; height: 500px; border-radius: 40px; overflow: hidden; background: var(--plum); color: var(--cream); text-decoration: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.featured:hover { color: var(--cream); }
.featured__img { background: var(--sand); min-height: 0; overflow: hidden; }
.featured__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.featured__copy { padding: 64px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.featured__flag { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: var(--plum); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.featured__copy .eyebrow { color: var(--gold); }
.featured__copy strong { font-family: var(--serif); font-size: 48px; line-height: 1.05; font-weight: 600; }
.featured__copy p { font-size: 17px; line-height: 1.6; color: var(--petal); }
.featured__cta { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.featured__cta > span:first-child { height: 52px; padding: 0 28px; border-radius: 999px; background: var(--cream); color: var(--plum); font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.featured__cta > span:last-child { font-size: 14px; color: #CDB9BE; }
.latest { padding-top: 72px; display: flex; flex-direction: column; gap: 28px; }
.latest h2, .more-stories h2 { font-family: var(--serif); font-size: 40px; font-weight: 600; }
.latest__count { font-size: 15px; color: var(--muted); }
.stories--j { gap: 48px 28px; }
.stories--j .story__img { height: 320px; }
.stories--j .story__img img { object-position: center 22%; }
.stories--j .story__title { font-size: 25px; }
.wa-strip { margin-top: 88px; padding: 36px 48px; border-radius: 32px; background: var(--blush); display: flex; align-items: center; gap: 28px; }
.wa-strip__icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--wa); display: flex; align-items: center; justify-content: center; }
.wa-strip > div:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.wa-strip h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.wa-strip p { font-size: 16px; color: var(--body); }
.wa-strip .btn { flex-shrink: 0; padding: 0 28px; }

.article__head { padding-top: 48px; display: flex; flex-direction: column; gap: 18px; }
.article__head > * { max-width: 820px; }
.article__head h1 { font-family: var(--serif); font-size: 60px; line-height: 1.04; font-weight: 600; letter-spacing: -0.02em; }
.byline { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--body); }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.byline strong { color: var(--ink); }
.article__hero { margin-top: 36px; height: 560px; border-radius: 40px; overflow: hidden; background: var(--sand); }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__body { padding-top: 64px; display: flex; gap: 96px; align-items: flex-start; }
.prose { width: 760px; flex-shrink: 0; display: flex; flex-direction: column; gap: 22px; }
.prose__lead { font-size: 22px; line-height: 1.6; color: var(--ink); }
.prose h2 { margin-top: 24px; font-family: var(--serif); font-size: 32px; line-height: 1.15; font-weight: 600; scroll-margin-top: 24px; }
.prose p { font-size: 18px; line-height: 1.75; color: #3F2E35; }
.prose blockquote { margin: 8px 0; padding: 8px 0 8px 28px; border-left: 4px solid var(--rose); font-family: var(--serif); font-size: 30px; line-height: 1.3; font-style: italic; color: var(--wine); }
.prose .table { border-radius: 20px; font-size: 16px; }
.prose .table th, .prose .table td { padding: 13px 20px; }
.prose .table thead th { padding: 14px 20px; }
.prose .table tbody td:last-child { font-weight: 700; color: var(--ink); }
.prose .table tbody td:nth-child(2) { color: var(--body); }
.prose .table tbody td:first-child { color: var(--ink); }
.tags { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.tags span { padding: 8px 16px; border-radius: 999px; background: var(--sand); font-size: 14px; font-weight: 600; }
.article__aside { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.toc { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.toc a { font-size: 15px; color: var(--ink); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--rose); }
.shopstory { padding: 28px; border-radius: 24px; background: var(--blush); display: flex; flex-direction: column; gap: 16px; }
.shopstory a { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); }
.shopstory a:hover { color: var(--ink); }
.shopstory img { width: 80px; height: 96px; border-radius: 14px; object-fit: cover; object-position: center 20%; background: #fff; flex-shrink: 0; }
.shopstory a > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shopstory strong { font-size: 16px; }
.shopstory small { font-size: 13px; color: var(--muted); }
.shopstory em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--rose); }
.shopstory em s { font-weight: 400; color: var(--soft); }
.asksize { padding: 28px; border-radius: 24px; background: var(--plum); color: var(--cream); display: flex; flex-direction: column; gap: 12px; }
.asksize h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.asksize p { font-size: 15px; line-height: 1.6; color: var(--petal); }
.asksize .btn { align-self: flex-start; height: 48px; padding: 0 22px; font-size: 15px; gap: 8px; }
.more-stories { padding-top: 88px; display: flex; flex-direction: column; gap: 28px; }

/* ---------- Mobile menu ---------- */
.mmenu { position: fixed; inset: 0; z-index: 70; background: var(--cream); display: flex; flex-direction: column; overflow-y: auto; }
.mmenu[hidden] { display: none; }
.mmenu__head { height: 72px; flex-shrink: 0; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.mmenu__head img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; }
.mmenu__search { padding: 16px 16px 0; }
.mmenu__search form { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); }
.mmenu__search input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.mmenu__shop { padding: 12px 16px 0; display: flex; flex-direction: column; }
.mmenu__row { height: 64px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mmenu__row:hover { color: var(--ink); }
.mmenu__row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.mmenu__row > span { flex-grow: 1; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.mmenu__row b { padding: 4px 10px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 12px; font-weight: 700; }
.mmenu__quick { padding: 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mmenu__quick a { height: 52px; border-radius: 16px; font-size: 15px; font-weight: 700; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.mmenu__quick a:first-child { background: var(--mint); color: #234A2E; }
.mmenu__quick a:last-child { background: var(--blush); color: #7A2E40; }
.mmenu__help { padding: 8px 16px 0; display: flex; flex-direction: column; }
.mmenu__help .eyebrow { font-size: 12px; padding-bottom: 4px; }
.mmenu__help a { min-height: 44px; display: flex; align-items: center; font-size: 16px; color: var(--ink); text-decoration: none; }
.mmenu__foot { margin-top: auto; padding: 20px 16px; background: var(--plum); color: var(--petal); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.mmenu__foot strong { color: var(--cream); }
.mmenu__foot a { color: var(--cream); text-decoration: none; font-weight: 700; }

/* ---------- Promotion popup ---------- */
.promo-popup { width: 520px; max-width: calc(100vw - 32px); height: 680px; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 32px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(43,27,33,0.4); }
.promo-popup:focus { outline: none; }
.promo-popup::backdrop { background: rgba(43,27,33,0.6); }
.promo-popup__link { display: block; width: 100%; height: 100%; }
.promo-popup__image { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.promo-popup__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(43,27,33,0.2); cursor: pointer; z-index: 1; }

/* ---------- Toast for non-JS fallbacks ---------- */
.flash { margin-top: 16px; }

/* =========================================================================
   Tablet
   ========================================================================= */
@media (max-width: 1279px) {
    :root { --gutter: 48px; --inset: 24px; }
    .header__inner { gap: 20px; }
    .nav a { padding: 12px 12px; }
    .header__search { width: 220px; }
    .hero { height: auto; min-height: 560px; padding: 48px; }
    .hero h1 { font-size: 64px; }
    .pdp { gap: 40px; }
    .pdp__main { width: 480px; height: 620px; }
    .pdp__sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .festive__copy { padding: 48px; }
    .festive__copy h2 { font-size: 44px; }
    .wa-band { padding: 48px; }
    .article__body { gap: 48px; }
    .prose { width: auto; flex: 1 1 640px; }
    .article__aside { flex: 0 0 300px; }
    .footer__links { gap: 20px; }
}

@media (max-width: 1099px) {
    .nav { display: none; }
    .header__inner { justify-content: space-between; }
    .header__search { flex-grow: 1; width: auto; max-width: 420px; }
    .header__menu-btn { display: flex; }
    .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero__art { height: 520px; }
    .festive { height: auto; grid-template-columns: minmax(0, 1fr); }
    .festive__art { height: 420px; padding: 0 32px 32px; }
    .bysize { flex-direction: column; align-items: flex-start; gap: 24px; }
    .bysize__head { width: auto; }
    .pdp { flex-direction: column; }
    .pdp__gallery { width: 100%; }
    .pdp__main { flex-grow: 1; width: auto; }
    .bag, .co { flex-direction: column; align-items: stretch; }
    .summary, .co-summary { width: auto; position: static; }
    .listing { gap: 32px; }
    .filters { width: 240px; }
    .sizeguide, .faq, .contact, .article__body { flex-direction: column; align-items: stretch; }
    .aside-stack, .faq__intro, .contact__intro, .article__aside { width: auto; position: static; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nf { grid-template-columns: minmax(0, 1fr); }
    .featured { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 360px auto; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__row { flex-direction: column; }
    .jhead { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Mobile (design boards are 390px wide)
   ========================================================================= */
@media (max-width: 767px) {
    :root { --gutter: 16px; --inset: 16px; }
    .h2, .home-section .h2 { font-size: 28px; }

    .announce { height: 34px; font-size: 12px; }
    .announce .announce__desktop, .announce--desktop-only { display: none; }
    .related .pcard:nth-child(n+3) { display: none; }
    .announce__mobile { display: block; overflow: hidden; text-overflow: ellipsis; }

    .header { height: 72px; }
    .header .wrap { padding-left: 12px; padding-right: 12px; }
    .header__inner { gap: 0; justify-content: space-between; }
    .header__desktop { display: none !important; }
    .header__mobile { display: flex; gap: 2px; }
    .header__mobile--end { width: 90px; justify-content: flex-end; }
    .icon-btn .cart-badge { top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }
    .header__logo img { width: 58px; height: 58px; box-shadow: none; }

    .mchips { padding: 14px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .mchips::-webkit-scrollbar { display: none; }
    .mchips a { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; display: flex; align-items: center; }
    .mchips a.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
    .mchips a.is-sale { color: var(--rose); font-weight: 700; }

    /* Home */
    .hero { margin-top: 0; height: auto; min-height: 0; padding: 0; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column-reverse; gap: 0; }
    .hero__art { display: block; height: 380px; }
    .hero__art > :not(:first-child) { display: none; }
    .hero__tile--tall { height: 380px; border-radius: 0; }
    .hero__tile--tall img { object-position: center 15%; }
    .hero__product { display: none; }
    .hero__copy { padding: 24px 22px 28px; gap: 14px; }
    .hero__kicker { padding: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
    .hero__kicker .full { display: none; }
    .hero h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; }
    .hero h1 br { display: none; }
    .hero__lead { font-size: 15px; line-height: 1.55; }
    .hero__lead .full { display: none; }
    .hero__ctas { margin-top: 0; }
    .hero__ctas .btn { flex-grow: 1; height: 52px; font-weight: 700; }
    .hero__ctas .btn--outline, .hero__ticks { display: none; }
    .hero__ctas .btn svg { display: none; }
    .trust { padding-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .trust__item { padding: 14px; gap: 10px; border-radius: 16px; }
    .trust__item:nth-child(2), .trust__item:nth-child(4) { display: none; }
    .trust__icon { width: auto; height: auto; background: none; }
    .trust__icon svg { width: 20px; height: 20px; }
    .trust__item strong { font-size: 13px; font-weight: 600; }
    .trust__item small { display: none; }
    .home-section { padding-top: 48px; gap: 16px; }
    .home-section .eyebrow { display: none; }
    .section-head { align-items: baseline; }
    .section-head > a { font-size: 14px; }
    .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cat { background: none !important; height: auto; border-radius: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
    .cat img { height: 200px; border-radius: 20px; object-position: center 20%; }
    .cat__label { position: static; padding: 0; background: none; border-radius: 0; text-align: center; }
    .cat__label > span:first-child { align-items: center; gap: 8px; }
    .cat__label strong { font-family: var(--sans); font-size: 15px; font-weight: 700; }
    .cat__label small { font-size: 12px; }
    .cat__label small .full { display: none; }
    .cat .ring-go { display: none; }
    .tabs { display: none; }
    .pgrid, .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
    .pcard { gap: 10px; }
    .pcard__media, .pgrid--3 .pcard__media { height: 220px; border-radius: 18px; }
    .pcard__link { border-radius: 18px; }
    .badge { top: 10px; left: 10px; padding: 4px 10px; font-size: 11px; letter-spacing: 0; }
    .pcard__quick { left: auto; right: 10px; bottom: 10px; opacity: 1; transform: none; }
    .pcard__quick button, .pcard__quick a { width: 36px; height: 36px; padding: 0; background: #fff; }
    .pcard__quick .label { display: none; }
    .pcard__body { padding: 0; gap: 10px; }
    .pcard__name { font-size: 14px; line-height: 1.3; }
    .pcard__meta { display: none; }
    .search-grid .pcard__meta { display: block; }
    .price { margin-top: 0; gap: 8px; }
    .price__now { font-size: 15px; }
    .price__was { font-size: 12px; }
    .swatches { margin-top: 0; gap: 5px; }
    .swatch { width: 14px; height: 14px; }
    .swatches__more { display: none; }
    .swatches .swatch:nth-child(n+5) { display: none; }
    .festive { margin-top: 48px; border-radius: 28px; display: flex; flex-direction: column; }
    .festive__art { display: none; }
    .festive__mobile-img { display: block; height: 300px; }
    .festive__mobile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
    .festive__copy { padding: 24px 22px 28px; gap: 12px; }
    .festive__copy .eyebrow { font-size: 11px; }
    .festive__copy h2 { font-size: 30px; line-height: 1.1; }
    .festive__copy p { display: none; }
    .festive__copy .btn { align-self: stretch; height: 50px; margin-top: 6px; font-size: 15px; }
    .festive__copy .btn svg { display: none; }
    .festive__copy h2 .full { display: none; }
    .bysize { padding-top: 48px; gap: 14px; }
    .bysize__head .eyebrow, .bysize__head a { display: none; }
    .bysize__head h2 { font-size: 28px; }
    .bysize__chips { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .bysize__chips a { height: 44px; min-width: 0; padding: 0; font-size: 13px; }
    .bysize__chips a.is-teen { display: none; }
    .home-new, .why, .home-journal { display: none; }
    .wa-band { margin-top: 48px; padding: 28px 22px; border-radius: 28px; flex-direction: column; align-items: stretch; gap: 12px; }
    .wa-band__intro { flex-direction: column; align-items: flex-start; gap: 12px; }
    .wa-band__icon { width: 52px; height: 52px; }
    .wa-band__icon svg { width: 26px; height: 26px; }
    .wa-band__copy .eyebrow { display: none; }
    .wa-band__copy h2 { font-size: 26px; }
    .wa-band__copy p { font-size: 14px; line-height: 1.55; }
    .wa-band__cta { align-items: stretch; }
    .wa-band__number { display: none; }
    .wa-band__cta .btn { height: 50px; font-size: 15px; gap: 8px; }

    /* Footer */
    .footer, .footer--full { margin-top: 48px; }
    .footer__inner { display: none !important; }
    .footer--min { display: none; }
    .footer__min { padding: 20px 16px; flex-direction: column; gap: 6px; font-size: 13px; }
    .footer__mobile { display: flex; flex-direction: column; gap: 24px; padding: 36px 22px; }
    .footer__mobile img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; }
    .footer__mobile nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 15px; }
    .footer__mobile nav a { min-height: 32px; }
    .footer__mobile > a { font-weight: 700; }
    .footer__mobile small { font-size: 13px; color: #CDB9BE; }

    /* Listing */
    .titleband { margin-top: 0; padding: 28px 22px; border-radius: 28px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .titleband h1 { font-size: 40px; }
    .titleband p { font-size: 15px; }
    .titleband__chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
    .titleband__chips::-webkit-scrollbar { display: none; }
    .titleband__chips .chip { height: 40px; padding: 0 16px; flex-shrink: 0; }
    .listing { padding-top: 20px; flex-direction: column; gap: 16px; align-items: stretch; }
    .filters-toggle { display: flex; height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; font-weight: 700; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
    .filters { display: none; width: auto; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); gap: 24px; }
    .filters.is-open { display: flex; }
    .fgroup { padding-bottom: 20px; }
    .fopts--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filters__apply { display: flex; }
    .results__bar { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
    .sort { width: 100%; justify-content: space-between; }

    /* Product */
    .pdp-wrap { padding: 0 !important; }
    .crumbbar { display: none; }
    .pdp { gap: 0; }
    .pdp__gallery { display: block; }
    .pdp__thumbs { display: none; }
    .pdp__main { width: 100%; height: 480px; border-radius: 0; }
    .pdp__main .badge { top: 14px; left: 14px; padding: 6px 12px; font-size: 11px; }
    .pdp__dots { display: flex; position: absolute; left: 0; right: 0; bottom: 14px; justify-content: center; gap: 6px; z-index: 1; }
    .pdp__dots a, .pdp__dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.8); display: block; }
    .pdp__dots .is-on { width: 20px; background: var(--ink); }
    .pdp__info { padding: 22px 16px 0; gap: 22px; }
    .pdp__head { gap: 8px; }
    .pdp__head .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
    .pdp__head h1 { font-size: 32px; line-height: 1.1; letter-spacing: 0; }
    .pdp__price { gap: 10px; }
    .pdp__now { font-size: 22px; }
    .pdp__was { font-size: 14px; }
    .pdp__save { padding: 3px 8px; font-size: 11px; }
    .pdp__save .full { display: none; }
    .pdp__sku { font-size: 12px; }
    .pdp__desc, .bands, .agenote { display: none; }
    .pdp__opt { gap: 12px; }
    .pdp__optlabel { font-size: 14px; }
    .pdp__colours { gap: 8px; }
    .pdp__colour { width: 48px; height: 48px; }
    .pdp__sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .size-btn { height: 46px; font-size: 13px; }
    .buy .qty { display: none; }
    .buy__add { height: 56px; }
    .perks { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; border-radius: 18px; }
    .perks > div { padding: 0; border: 0; flex-direction: row; align-items: center; gap: 12px; }
    .perks svg { width: 20px; height: 20px; }
    .wa-help { padding: 0 16px 16px; margin-top: -34px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; color: #1F4A33; }
    .perks:has(+ .wa-help) { border-bottom: 0; border-radius: 18px 18px 0 0; padding-bottom: 34px; }
    .wa-help .full { display: none; }
    .accordion { border-top: 0; }
    .accordion details { border-bottom: 0; }
    .accordion details:not(:first-child) { display: none; }
    .accordion summary { height: auto; font-size: 16px; pointer-events: none; padding-bottom: 10px; }
    .accordion summary::after { display: none; }
    .accordion__body { margin-bottom: 0; }
    .accordion__body p { font-size: 15px; }
    .accordion ul { font-size: 14px; gap: 6px; }
    .related { padding-top: 44px; gap: 16px; }
    .related h2 { font-size: 26px; }
    .related .section-head > a { display: none; }

    /* Drawer becomes the full-screen bag */
    .drawer { width: 100%; box-shadow: none; }
    .drawer__head { height: 64px; padding: 0 12px 0 20px; }
    .drawer__head h2 { font-size: 24px; }
    .drawer__head h2 span { font-size: 15px; font-weight: 400; }
    .drawer__body { padding: 14px 16px 16px; gap: 12px; }
    .notice { padding: 12px 14px; border-radius: 14px; font-size: 13px; gap: 10px; }
    .notice__tick { width: auto; height: auto; background: none; color: inherit; }
    .ship-card { padding: 12px 14px; border-radius: 14px; font-size: 13px; gap: 8px; }
    .ship-card__bar { height: 6px; }
    .line { gap: 14px; padding: 14px 0; }
    .line__img { width: 84px; height: 104px; border-radius: 12px; }
    .line__name { font-size: 14px; }
    .line__variant { font-size: 12px; }
    .mini-qty { width: 112px; }
    .line__price s { font-size: 11px; }
    .line__price b { font-size: 14px; }
    .pairs { display: none; }
    .drawer__foot { padding: 16px 16px 20px; gap: 10px; }
    .drawer__total span { font-size: 15px; }
    .drawer__total b { font-size: 20px; }
    .drawer__note { font-size: 12px; }
    .drawer__foot .btn--rose { height: 54px; }
    .drawer__foot .btn--outline { border: 0; height: 44px; font-size: 14px; font-weight: 600; color: var(--wine); }
    .drawer__cod { display: none; }
    .drawer__saving { display: none; }
    .drawer__foot .btn--rose .icon { display: none; }
    .drawer__continue { height: 44px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--wine); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* Cart page */
    .bag { padding-top: 24px; gap: 24px; }
    .bag__head h1 { font-size: 32px; }
    .bag__head h1 span { font-size: 18px; }
    .bag__head > a { font-size: 14px; }
    .bagline { gap: 14px; padding: 16px 0; }
    .bagline__img { width: 96px; height: 118px; border-radius: 14px; }
    .bagline__top { flex-direction: column; gap: 2px; }
    .bagline__top a, .bagline__top b { font-size: 15px; }
    .bagline__sub { font-size: 13px; }
    .bagline__foot { gap: 12px; }
    .bagline__foot .mini-qty { height: 40px; width: 112px; }
    .bagline__foot .mini-qty button { width: 36px; height: 36px; }
    .cross__grid { grid-template-columns: minmax(0, 1fr); }
    .summary { padding: 22px; border-radius: 24px; }
    .summary h2 { font-size: 24px; }

    /* Checkout */
    .cohead { height: 72px; }
    .cohead .wrap { padding-left: 12px; padding-right: 12px; }
    .cohead__logo img { width: 56px; height: 56px; }
    .steps, .cohead__secure .label, .cohead__help { display: none; }
    .cohead__back { display: flex; }
    .cohead__secure { width: 44px; height: 44px; justify-content: center; }
    .cohead__inner--done { justify-content: center; }
    .co { padding-top: 20px; gap: 16px; }
    .co__form { gap: 16px; }
    .co__form h1 { font-size: 30px; }
    .fieldset { padding: 20px 16px; border-radius: 20px; gap: 14px; }
    .fieldset legend { padding: 0 6px; font-size: 16px; }
    .field { gap: 6px; }
    .field label { font-size: 13px; }
    .input { height: 50px; padding: 0 14px; border-radius: 12px; font-size: 16px; }
    .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grid-3 > :last-child { grid-column: span 2; }
    .pay { padding: 14px; gap: 12px; border-radius: 16px; }
    .pay__icon { display: none; }
    .pay__copy strong { font-size: 15px; }
    .pay__copy small { font-size: 13px; }
    .co-summary { display: none; }
    .co-mobile-summary { display: block; background: var(--blush); border-bottom: 1px solid var(--line); }
    .co-mobile-summary summary { height: 56px; padding: 0 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
    .co-mobile-summary summary::-webkit-details-marker { display: none; }
    .co-mobile-summary summary > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--wine); }
    .co-mobile-summary summary > span:last-child { font-size: 17px; font-weight: 700; }
    .co-mobile-summary .hide-label, .co-mobile-summary[open] .show-label { display: none; }
    .co-mobile-summary[open] .hide-label { display: inline; }
    .co-mobile-summary[open] summary svg { transform: rotate(180deg); }
    .co-mobile-summary__body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
    .co-mobile-summary .co-item__img img { width: 52px; height: 64px; border-radius: 10px; }
    .co-mobile-summary .co-item__copy strong { font-size: 13px; }
    .co-mobile-summary .co-item > b { font-size: 14px; }
    .co-mobile-summary .summary__rows { padding-top: 10px; border-top: 1px solid var(--line); gap: 6px; font-size: 14px; }
    .co-mobile-summary .summary__rows b { font-weight: 400; }
    .co__desktop-place { display: none; }
    .co-mobile-bar { display: flex; margin: 20px -16px 0; padding: 20px 16px 28px; background: #fff; border-top: 1px solid var(--line); flex-direction: column; gap: 10px; }
    .co-mobile-bar > div { display: flex; justify-content: space-between; align-items: baseline; }
    .co-mobile-bar > div span { font-size: 15px; font-weight: 700; }
    .co-mobile-bar > div b { font-size: 22px; font-weight: 700; }
    .co-mobile-bar .co__place { height: 56px; font-size: 16px; }
    .co-mobile-bar small { font-size: 12px; color: var(--muted); text-align: center; }
    .page--checkout .footer { margin-top: 0; }

    /* Confirmation */
    .done { padding-top: 16px; gap: 14px; }
    .done__hero { padding: 32px 20px; border-radius: 24px; gap: 10px; }
    .done__tick { width: 68px; height: 68px; box-shadow: 0 0 0 8px var(--mint); }
    .done__tick svg { width: 30px; height: 30px; }
    .done__hero h1 { margin-top: 12px; font-size: 34px; line-height: 1.1; }
    .done__hero p { font-size: 15px; line-height: 1.55; }
    .ordno { margin-top: 6px; padding: 10px 18px; }
    .ordno strong { font-size: 15px; }
    .ordno button { display: none; }
    .card { padding: 20px; border-radius: 20px; gap: 14px; }
    .card > h2 { font-size: 16px; }
    .card > h2.serif { font-family: var(--sans); font-size: 16px; font-weight: 700; }
    .next { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .next li { flex-direction: row; gap: 12px; align-items: flex-start; }
    .next__row { display: contents; }
    .next__line { display: none; }
    .next__n { width: 28px; height: 28px; font-size: 13px; box-shadow: none !important; }
    .next__text { gap: 0; font-size: 14px; line-height: 1.4; padding-top: 4px; }
    .next strong, .next small { padding: 0; font-size: 14px; line-height: 1.4; }
    .done__pair { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .done__pair .card { padding: 20px; font-size: 14px; }
    .done-items li { padding: 6px 0; border: 0; gap: 12px; }
    .done-items img { width: 52px; height: 64px; border-radius: 10px; }
    .done-items strong { font-size: 13px; }
    .done-items small { font-size: 13px; }
    .done-items li > b { font-size: 14px; font-weight: 600; }
    .done .summary__rows { padding-top: 12px; border-top: 1px solid var(--line); gap: 6px; font-size: 14px; }
    .done .summary__total { padding-top: 6px; border-top: 0; }
    .done .summary__total span, .done .summary__total b { font-size: 16px; }
    .done__ctas { flex-direction: column; gap: 14px; }
    .done__ctas .btn--rose { height: 54px; }
    .done__ctas .btn--outline { height: 50px; font-size: 15px; }
    .done__foot { display: none; }
    .done__merged { gap: 10px; font-size: 14px; line-height: 1.5; }
    .done__merged > .eyebrow { font-size: 12px; }
    .done__merged > .eyebrow:nth-of-type(2) { margin-top: 8px; }
    .done__merged > strong { font-size: 15px; }
    .done__merged > span:last-child > span { color: var(--body); }
    .done__merged .done__keep { padding: 12px 14px; border-radius: 14px; margin: 0; color: var(--ink); }
    .footer--min.footer--done { display: block; margin-top: 16px; }
    .footer--done .footer__min { padding: 24px 20px; font-size: 13px; }
    .footer--done .footer__help { display: none; }

    /* Search */
    .search-hero { padding-top: 32px; gap: 16px; }
    .search-hero h1 { font-size: 36px; }
    .bigsearch { padding: 6px; gap: 6px; }
    .bigsearch > span { width: 36px; }
    .bigsearch input { height: 46px; font-size: 16px; }
    .bigsearch button { height: 46px; padding: 0 18px; }
    .search-results { padding-top: 32px; gap: 16px; }
    .search-results__bar { flex-direction: column; align-items: flex-start; }
    .search-results__bar p { font-size: 15px; }
    .empty { padding: 32px 20px; border-radius: 24px; }
    .empty h2 { font-size: 26px; }

    /* Help pages */
    .helpband { margin-top: 0; padding: 28px 22px; border-radius: 28px; }
    .helpband h1 { font-size: 40px; }
    .helpband p { font-size: 15px; }
    .sizeguide { padding-top: 24px; gap: 24px; }
    .agepicks > span { width: 100%; }
    .table th, .table td { padding: 12px 14px; }
    .table thead th { padding: 14px; }
    .table { font-size: 14px; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 16px; }
    .fact { padding: 18px; }
    .fact b { font-size: 24px; }
    .policies { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
    .policy { padding: 24px 20px; }
    .policy__head h2 { font-size: 24px; }
    .ticks { font-size: 15px; }
    .plumband { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .plumband h2 { font-size: 24px; }
    .faq { padding-top: 24px; gap: 20px; }
    .faq__intro h1 { font-size: 40px; }
    .faq__intro .faq__ask { display: none; }
    .faq__list { padding-top: 0; }
    .faq__ask--mobile { display: flex !important; margin-top: 8px; }
    .qa summary { font-size: 16px; padding: 14px 18px; min-height: 64px; }
    .qa p { padding: 0 18px 18px; font-size: 15px; }
    .contact { padding-top: 24px; gap: 20px; }
    .contact__intro h1 { font-size: 40px; }
    .contact__card { padding: 22px 18px; border-radius: 24px; }
    .contact__form h2 { font-size: 26px; }
    .nf { padding-top: 32px; padding-bottom: 32px; gap: 32px; }
    .nf__code { font-size: 110px; }
    .nf__copy h1 { font-size: 34px; }
    .nf__art { height: 320px; }

    /* Journal */
    .jhead { padding-top: 20px; gap: 10px; }
    .jhead__copy { gap: 10px; }
    .jhead .crumbs, .jhead__copy > p, .jsearch { display: none; }
    .jhead__copy .eyebrow { font-size: 11px; }
    .jhead h1 { font-size: 36px; line-height: 1.05; }
    .jtopics { padding-top: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .jtopics::-webkit-scrollbar { display: none; }
    .jtopics .chip { height: 40px; padding: 0 16px; flex-shrink: 0; }
    .featured { margin-top: 20px; height: auto; border-radius: 28px; display: flex; flex-direction: column; }
    .featured__img { height: 300px; flex-shrink: 0; }
    .featured__copy { padding: 22px; gap: 10px; }
    .featured__flag, .featured__cta { display: none; }
    .featured__copy .eyebrow { font-size: 11px; letter-spacing: 0.12em; }
    .featured__copy strong { font-size: 26px; line-height: 1.1; }
    .featured__copy p { font-size: 14px; line-height: 1.55; }
    .latest { padding-top: 40px; gap: 20px; }
    .jhead ~ .latest { padding-top: 28px; gap: 4px; }
    .jhead ~ .latest .section-head h2 { font-size: 26px; }
    .jhead ~ .latest .latest__count { display: none; }
    .latest .stories--j { gap: 0; }
    .latest .stories--j .story { flex-direction: row; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
    .latest .stories--j .story__img { width: 104px; height: 124px; flex-shrink: 0; border-radius: 18px; }
    .latest .stories--j .story__img img { object-position: center 20%; }
    .latest .stories--j .story__text { gap: 6px; justify-content: center; }
    .latest .stories--j .story .eyebrow { font-size: 11px; letter-spacing: 0.1em; }
    .latest .stories--j .story__title { font-size: 19px; line-height: 1.2; }
    .latest .stories--j .story__excerpt, .latest .stories--j .story__long { display: none; }
    .latest .stories--j .story__short { display: inline; }
    .latest .stories--j .story__date { font-size: 12px; }
    .latest h2, .more-stories h2 { font-size: 28px; }
    .stories, .stories--j { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .story__img, .stories--j .story__img { height: 220px; border-radius: 22px; }
    .story__title, .stories--j .story__title { font-size: 22px; }
    .story__excerpt { font-size: 14px; }
    .wa-strip { margin-top: 48px; padding: 28px 22px; flex-direction: column; align-items: flex-start; gap: 14px; border-radius: 28px; }
    .wa-strip__icon { width: 52px; height: 52px; }
    .wa-strip h2 { font-size: 24px; }
    .wa-strip p { font-size: 14px; }
    .wa-strip .btn { align-self: stretch; height: 50px; font-size: 15px; }
    .jhead ~ .wa-strip { margin-top: 32px; padding: 24px 20px; gap: 10px; border-radius: 24px; }
    .jhead ~ .wa-strip .wa-strip__icon { display: none; }
    .jhead ~ .wa-strip h2 { font-size: 22px; }
    .jhead ~ .wa-strip p { font-size: 14px; line-height: 1.55; }
    .jhead ~ .wa-strip p strong { color: var(--ink); }
    .jhead ~ .wa-strip .btn { height: 48px; }
    .article__head { padding-top: 24px; gap: 14px; }
    .article__head .crumbs { display: none; }
    .article__head h1 { font-size: 34px; line-height: 1.1; }
    .article__hero { margin-top: 20px; height: 320px; border-radius: 28px; }
    .article__body { padding-top: 32px; gap: 32px; }
    .prose { gap: 16px; }
    .prose__lead { font-size: 18px; }
    .prose h2 { margin-top: 12px; font-size: 24px; }
    .prose p { font-size: 16px; line-height: 1.7; }
    .prose blockquote { font-size: 22px; padding-left: 18px; }
    .toc { display: none; }
    .more-stories { padding-top: 48px; gap: 20px; }

    /* On phones the card takes the image's own height. A modal dialog is pinned top and bottom,
       so "auto" would stretch it to the full screen; fit-content keeps it to the image. */
    .promo-popup { height: fit-content; max-height: calc(100vh - 48px); border-radius: 24px; }
    .promo-popup__link { height: auto; }
    .promo-popup__image { height: auto; max-height: calc(100vh - 48px); }
}

@media (min-width: 768px) {
    .mchips, .mobile-only { display: none !important; }
}
@media (max-width: 767px) {
    .desktop-only { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}