/* Rogrip storefront — follows the approved design boards (Main, Mobile, Card, Category, Product).
   Ink #141414, red #FB0101, deep red #B80000, stone #6E6A66, lines #EDEDED. Outfit for labels/headings, Manrope for text. */
:root { --ink: #141414; --red: #FB0101; --deep: #B80000; --stone: #6E6A66; --text2: #4A4744; --line: #EDEDED; --line2: #E4E4E2; --soft: #F7F7F5; --pad: 32px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; line-height: 1.55; }
img, video { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--deep); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: 'Outfit', sans-serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #FFF; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; color: #FFF; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.obtn, .btn, .chip, .fbar__label, .sec__title { font-family: 'Outfit', sans-serif; text-transform: uppercase; }

/* Empty picture spot: slot name and size so the owner knows what to upload. */
.slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 100px; background: #ECEBE8; color: #8C8884; text-align: center; font-family: 'Outfit', sans-serif; font-size: 11px; }
.slot span { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.slot b { font-weight: 600; color: #6E6A66; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; background: var(--ink); color: #FFF; border: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.btn:hover { background: var(--deep); color: #FFF; }
.obtn { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 46px; border: 1.5px solid #FFF; color: #FFF; font-size: 13px; font-weight: 600; letter-spacing: .06em; background: transparent; }
.obtn:hover { background: #FFF; color: var(--ink); }
.obtn--sm { width: 170px; height: 42px; font-size: 12px; }
.obtn--dark { border-color: var(--ink); color: var(--ink); width: auto; padding: 0 36px; font-weight: 700; font-size: 12px; }
.obtn--dark:hover { background: var(--ink); color: #FFF; }
.ulink { border: 0; background: none; padding: 0 2px; height: 32px; cursor: pointer; font: 600 13px 'Manrope', sans-serif; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* Announcement + header */
.announce { background: var(--ink); color: #FFF; font-size: 13px; font-weight: 600; text-align: center; padding: 8px 16px; letter-spacing: .02em; }
.announce a { color: #FFF; }
.hdr { position: sticky; top: 0; z-index: 40; background: #FFF; border-bottom: 1px solid var(--line); padding: 0 var(--pad); height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.hdr__nav { display: flex; flex-wrap: wrap; gap: 26px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hdr__logo { display: flex; justify-self: center; }
.hdr__logo img { height: 30px; width: auto; }
.hdr__right { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.hdr__btn { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.hdr__login { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 10px; height: 44px; display: flex; align-items: center; }
.hdr__bag { height: 44px; padding: 0 6px; display: flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; }
.hdr__bag [hidden] { display: none; }
.hdr__menu, .hdr__msearch, .hdr__macc { display: none; }

/* Mobile menu */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,20,.4); }
.drawer[hidden] { display: none; }
.drawer__panel { width: min(86vw, 360px); height: 100%; background: #FFF; padding: 10px 20px 24px; overflow-y: auto; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Hero: full screen below the header */
.hero { position: relative; height: calc(100vh - 101px); height: calc(100svh - 101px); min-height: 520px; background: #3A3A3A; overflow: hidden; color: #FFF; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.hero__slide.is-on { opacity: 1; }
.hero__media, .hero picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero picture img { width: 100%; height: 100%; object-fit: cover; }
.hero > .slot { position: absolute; inset: 0; background: #3A3A3A; color: #A8A8A8; align-items: flex-start; justify-content: flex-start; padding: 10px 14px; }
.hero > .slot b { color: #C8C8C8; }
.hero__shade { position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.hero__text { position: absolute; inset: 0; margin: auto; height: max-content; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 0 20px; }
.hero h1, .hero__h { font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; color: #FFF; }
.hero__text p { margin: -8px 0 0; font-size: 15px; max-width: 46ch; }
.hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 8px; }
.hero__dots button { width: 34px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.hero__dots button[aria-current="true"] { background: #FFF; }
.hero__sound { position: absolute; right: 24px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25); color: #FFF; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.only-narrow { display: none; }

/* Sections and grids: full width, 4px gaps */
.sec { padding: 56px 0 0; }
.is-home .hero + .sec { padding-top: 36px; }
.sec__title { margin: 0 0 22px; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.grid { display: grid; gap: 4px; }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.sec--feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.feature { position: relative; display: block; min-height: 860px; background: #CFCDC9; overflow: hidden; color: #FFF; }
.feature img, .feature .slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__text { position: absolute; inset: 0; margin: auto; height: max-content; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.feature__text > span:first-child { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.feature:hover { color: #FFF; }
.feature:hover .obtn { background: #FFF; color: var(--ink); }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; }
.feature.feature--cat { min-height: 0; aspect-ratio: 4 / 5; }
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; }
.promo__text { padding: 0 48px 48px var(--pad); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.promo__text h2 { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.promo__text p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text2); max-width: 360px; }
.promo__text .btn { align-self: flex-start; width: 170px; padding: 0; }
.promo__img { position: relative; min-height: 640px; background: #2E2E2E; }
.promo__img img, .promo__img .slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story { text-align: center; padding: 72px var(--pad) 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.story p { margin: 0 0 16px; max-width: 60ch; color: var(--text2); font-size: 14px; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px; padding: 0 var(--pad); }
.quote { margin: 0; background: var(--soft); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.quote .stars { margin: 0; color: var(--deep); letter-spacing: 2px; }
.quote blockquote { margin: 0; font-size: 15px; }
.quote figcaption { font-size: 13px; color: var(--stone); }

/* Product card */
.card { position: relative; background: #FFF; padding-bottom: 16px; }
.card__media { position: relative; aspect-ratio: 4 / 5; background: #EFEEEC; overflow: hidden; }
.card__link { position: absolute; inset: 0; display: block; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.card__img--back { opacity: 0; }
.card:hover .card__img--back { opacity: 1; }
.badge { position: absolute; top: 10px; left: 10px; background: var(--ink); color: #FFF; font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 8px; z-index: 2; }
.badge--sale { background: var(--red); }
.badge--sold-out { background: var(--stone); }
.badge--inline { position: static; align-self: flex-start; }
.card__wish { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); z-index: 2; }
.card__wish[aria-pressed="true"] { color: var(--red); }
.card__wish[aria-pressed="true"] .ic { fill: var(--red); }
.card__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.card__dots span { width: 16px; height: 2px; background: rgba(20,20,20,.25); }
.card__dots span:first-child, .card:hover .card__dots span:last-child { background: var(--ink); }
.card:hover .card__dots span:first-child { background: rgba(20,20,20,.25); }
.card__plus { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #FFF; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 2; color: var(--ink); }
.card__quick { position: absolute; left: 8px; right: 8px; bottom: 8px; background: #FFF; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 3; }
.card__quick[hidden] { display: none; }
.card__qt { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.card__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.card__sizes button { height: 36px; border: 1px solid var(--ink); background: #FFF; color: var(--ink); font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
.card__sizes button:hover, .card__sizes button.is-added { background: var(--ink); color: #FFF; }
.card__sizes button:disabled { border-color: #DADADA; color: #B5B1AD; text-decoration: line-through; cursor: not-allowed; background: #FFF; }
/* On a computer the quick-add sizes open on hover, as in the design. */
@media (hover: hover) { .card:hover .card__plus { display: none; } .card:hover .card__quick { display: flex; } }
.card__body { padding: 12px 10px 0; display: flex; flex-direction: column; gap: 6px; }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card__name { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; min-width: 0; }
.card__price { display: flex; gap: 6px; align-items: baseline; flex-shrink: 0; font-family: 'Outfit', sans-serif; font-size: 14px; }
.card__price s { font-family: 'Manrope', sans-serif; font-size: 13px; color: #8C8884; }
.card__price b { font-weight: 700; }
.is-sale { color: var(--red); }
.card__line { font-size: 12px; color: var(--stone); }
.card__sw { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.card__sw button { width: 28px; height: 28px; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.card__sw span { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.card__sw button[aria-pressed="true"] span { box-shadow: 0 0 0 1px #FFF, 0 0 0 2px var(--ink); }
.card--out .card__img { opacity: .6; }

/* Category / shop */
.lhead { padding: 36px var(--pad) 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lhead h1 { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.lhead p { margin: 0; font-size: 14px; color: var(--text2); max-width: 520px; line-height: 1.6; }
.fbar { position: sticky; top: 68px; z-index: 5; background: #FFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fbar__in { padding: 10px var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.fbar__left, .fbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.fbar__right { gap: 16px; }
.fbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fbar__label { font-size: 12px; font-weight: 700; margin-right: 4px; }
.fbar__sep { width: 1px; height: 24px; background: var(--line2); }
.chip { height: 36px; min-width: 44px; padding: 0 10px; border: 1px solid #CFCFCD; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink); }
.chip.is-on { background: var(--ink); color: #FFF; border-color: var(--ink); }
.dot { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.dot span { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.dot.is-on span { box-shadow: 0 0 0 2px #FFF, 0 0 0 3.5px var(--ink); }
.fbar__clear { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fbar__count { font-size: 13px; color: var(--text2); }
.sort { display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sort select { height: 38px; border: 1px solid #CFCFCD; background: #FFF; padding: 0 10px; font: 13px 'Manrope', sans-serif; color: var(--ink); text-transform: none; }
.lgrid { padding: 4px 0 0; }
.ptile { grid-column: span 2; position: relative; display: block; min-height: 560px; background: #2E2E2E; color: #FFF; overflow: hidden; }
.ptile:hover { color: #FFF; }
.ptile img, .ptile .slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ptile__text { position: absolute; left: 28px; bottom: 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ptile__h { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; }
.empty { padding: 80px var(--pad); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.empty strong { font-family: 'Outfit', sans-serif; font-size: 18px; }
.empty span { color: var(--text2); }
.more { padding: 48px var(--pad) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; color: var(--text2); }
.more__bar { width: 220px; height: 2px; background: var(--line); }
.more__bar i { display: block; height: 2px; background: var(--ink); }
.more .obtn--dark { height: 46px; }

/* Product page */
.pp { padding: 24px var(--pad) 0; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.pg { flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.pg__img { position: relative; aspect-ratio: 4 / 5; background: #EFEEEC; overflow: hidden; }
.pg__img img { width: 100%; height: 100%; object-fit: cover; }
.pi { flex: 1 1 400px; min-width: 0; max-width: 480px; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 22px; }
.pi__head { display: flex; flex-direction: column; gap: 10px; }
.pi__head h1 { font-size: 25px; font-weight: 700; line-height: 1.15; }
.pi__price { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 700; }
.pi__price s { font: 400 15px 'Manrope', sans-serif; color: #8C8884; margin-right: 4px; }
.pi__stars { font-size: 13px; color: var(--text2); }
.pi__stars span { color: var(--deep); letter-spacing: 2px; }
.pi__note { font-size: 13px; color: var(--text2); }
.pi__note:empty { display: none; }
.buy { display: flex; flex-direction: column; gap: 22px; }
.buy__block { display: flex; flex-direction: column; gap: 10px; }
.buy__block strong { font-family: 'Outfit', sans-serif; }
.buy__colors { display: flex; gap: 8px; }
.pcol, .psz { position: relative; }
.pcol input, .psz input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.psz input:disabled { cursor: not-allowed; }
.pcol span { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.pcol span::before { content: ''; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pcol input:checked + span::before { box-shadow: 0 0 0 2px #FFF, 0 0 0 3.5px var(--ink); }
.pcol input:focus-visible + span { outline: 2px solid var(--red); }
.buy__sizehead { display: flex; justify-content: space-between; align-items: center; }
.buy__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.psz span { height: 44px; border: 1px solid #CFCFCD; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; }
.psz input:checked + span { background: var(--ink); color: #FFF; border-color: var(--ink); }
.psz input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.psz.is-out span { border-color: #E4E4E2; color: #B5B1AD; text-decoration: line-through; }
.buy__low { font-size: 13px; color: var(--deep); font-weight: 600; }
.buy__low:empty { display: none; }
.buy__actions { display: flex; flex-direction: column; gap: 8px; }
.buy__add, .buy__now { height: 52px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.buy__add { border: 0; background: var(--ink); color: #FFF; }
.buy__add:hover { background: var(--deep); }
.buy__add:disabled { background: #B5B1AD; cursor: not-allowed; }
.buy__now { border: 1.5px solid var(--ink); background: #FFF; color: var(--ink); }
.buy__now:hover { background: var(--ink); color: #FFF; }
.buy__added { background: #F4F4F2; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.buy__added[hidden], .buy__err[hidden] { display: none; }
.buy__added strong { font-family: 'Outfit', sans-serif; }
.buy__added a { font-weight: 700; font-size: 13px; }
.buy__err { font-size: 13px; color: var(--deep); font-weight: 600; }
.pi__info { background: var(--soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pi__info div { display: flex; gap: 12px; align-items: flex-start; }
.acc { border-top: 1px solid var(--line2); }
.acc details { border-bottom: 1px solid var(--line2); }
.acc summary { height: 48px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.acc details[open] summary::after { content: '−'; }
.acc__body { padding: 0 0 16px; font-size: 14px; line-height: 1.65; color: #3A3836; }
.pp ~ .sec { padding-top: 72px; }
.guide { border: 0; padding: 0; width: min(640px, 94vw); }
.guide::backdrop { background: rgba(20,20,20,.5); }
.guide__in { padding: 20px 22px 22px; }
.guide__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.guide__top h2 { font-size: 18px; text-transform: uppercase; }
.guide__scroll { overflow-x: auto; }
.guide table { width: 100%; border-collapse: collapse; font-size: 14px; }
.guide th, .guide td { border: 1px solid var(--line2); padding: 10px; text-align: center; }
.guide thead th { background: var(--soft); font-family: 'Outfit', sans-serif; }

/* Builder pages */
.page { max-width: 820px; margin: 0 auto; padding: 36px var(--pad) 0; display: flex; flex-direction: column; gap: 14px; }
.page h1 { font-size: 26px; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 12px; }
.page h2 { font-size: 18px; text-transform: uppercase; margin-top: 14px; }
.page h3 { font-size: 17px; }
.page p { margin: 0; font-size: 15px; line-height: 1.75; color: #3A3836; }
.page__grid { margin: 8px calc(var(--pad) * -1); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page__faq { border-bottom: 1px solid var(--line2); padding: 14px 0; }
.page__faq summary { cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 700; }
.page__faq p { margin-top: 8px; }
.page__sp--s { height: 12px; } .page__sp--m { height: 32px; } .page__sp--l { height: 64px; }
.msg { max-width: 640px; margin: 0 auto; padding: 100px var(--pad) 40px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.msg h1 { font-size: 24px; text-transform: uppercase; }

/* Trust strip + footer */
.trust { margin-top: 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px var(--pad); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.trust div { display: flex; align-items: center; justify-content: center; gap: 12px; }
.trust .ic { stroke-width: 1.6; }
.trust span { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ftr__in { padding: 56px var(--pad) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ftr__brand { display: flex; flex-direction: column; gap: 16px; }
.ftr__brand img { width: 120px; height: auto; }
.ftr__brand > span { font-size: 14px; color: var(--text2); line-height: 1.6; }
.ftr__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ftr__col strong { font-family: 'Outfit', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.ftr__social { display: flex; gap: 6px; margin-top: 6px; }
.ftr__social a { width: 40px; height: 40px; border: 1px solid #DADADA; display: flex; align-items: center; justify-content: center; }
.ftr__social a:hover { border-color: var(--ink); }
.news { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.news label { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.news__row { display: flex; }
.news input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--ink); border-right: 0; padding: 0 12px; font: 14px 'Manrope', sans-serif; }
.news button { height: 44px; padding: 0 18px; border: 0; background: var(--ink); color: #FFF; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.news button:hover { background: var(--deep); }
.news__msg { margin: 0; font-size: 13px; }
.news__msg:empty { display: none; }
.ftr__base { border-top: 1px solid var(--line); padding: 18px var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--stone); }


/* Bag drawer (BagDrawer board) */
.bagd { position: fixed; inset: 0; z-index: 70; }
.bagd[hidden] { display: none; }
.bagd__shade { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.bagd__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #FFF; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,.15); }
.bagd__top { height: 64px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.bagd__top h2 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
[data-bag-body], .bagpage { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bagd__free { padding: 14px 20px; background: var(--soft); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.bagd__free strong { font-family: 'Outfit', sans-serif; }
.bagd__bar { height: 3px; background: #E2E2E0; }
.bagd__bar i { display: block; height: 3px; background: var(--ink); }
.bagd__items { flex: 1; overflow-y: auto; padding: 4px 20px; }
.bagd__item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bagd__img { width: 96px; height: 120px; background: #ECEBE8; display: block; overflow: hidden; }
.bagd__img img { width: 100%; height: 100%; object-fit: cover; }
.bagd__info { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; }
.bagd__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bagd__row strong { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; }
.bagd__row > span { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; }
.bagd__detail { font-size: 13px; color: var(--text2); }
.qtyb { display: flex; align-items: center; border: 1px solid #CFCFCD; }
.qtyb button { width: 36px; height: 36px; border: 0; background: transparent; font-size: 16px; cursor: pointer; color: var(--ink); }
.qtyb span { min-width: 28px; text-align: center; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; }
.qtyb--sm button { width: 32px; height: 32px; font-size: 15px; }
.qtyb--sm span { min-width: 24px; font-size: 13px; }
.bagd__foot { border-top: 1px solid var(--line); padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.bagd__foot .bagd__row span { font: 400 14px 'Manrope', sans-serif; }
.bagd__foot .bagd__row strong { font-weight: 700; }
.bagd__note { font-size: 12px; color: var(--text2); }
.bagd__go { height: 54px; background: var(--ink); color: #FFF; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.bagd__go:hover { background: var(--deep); color: #FFF; }
.bagd__cont { text-align: center; padding: 6px; height: auto; }
.bagd__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.bagd__empty strong { font-family: 'Outfit', sans-serif; font-size: 17px; }
.bagd__empty span { color: var(--text2); }
.bagpage { border: 1px solid var(--line); }

/* Shared form bits */
.narrow { max-width: 560px; margin: 0 auto; padding: 48px 24px 0; display: flex; flex-direction: column; gap: 16px; }
.ttl { font-size: 24px; font-weight: 700; text-align: center; }
.ttl--left { text-align: left; font-size: 24px; margin-bottom: 8px; }
.sub { font-size: 14px; color: var(--text2); line-height: 1.6; margin: 0; }
.narrow > .sub { text-align: center; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.fld i { font-style: normal; font-weight: 400; color: var(--stone); }
.fld input, .fld select, .fld textarea { height: 50px; border: 1px solid #CFCFCD; padding: 0 14px; font: 400 15px 'Manrope', sans-serif; background: #FFF; color: var(--ink); width: 100%; }
.fld textarea { height: auto; padding: 12px 14px; resize: vertical; }
.fld [aria-invalid="true"] { border-color: var(--deep); }
.fld__err { color: var(--deep); font-weight: 600; }
.fld__err[hidden] { display: none; }
.btn--wide { width: 100%; height: 54px; font-size: 14px; font-weight: 700; }
.alert { color: var(--deep); font-weight: 600; font-size: 14px; }
.alert[hidden] { display: none; }
.tip { background: var(--soft); padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tip:empty { display: none; }
.tip strong { font-family: 'Outfit', sans-serif; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; background: #F0F0EE; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pill--delivered { background: #E7F2EA; color: #2F6B3A; }
.pill--cancelled, .pill--returned { background: #FDECEC; color: var(--deep); }
.pill--shipped { background: var(--ink); color: #FFF; }

/* Checkout (Checkout board) */
.chdr { border-bottom: 1px solid var(--line); height: 72px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.chdr .ulink { justify-self: start; }
.chdr__logo img { height: 28px; width: auto; }
.chdr__secure { justify-self: end; display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.co { max-width: 1180px; margin: 0 auto; padding: 40px 24px 96px; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.co[hidden] { display: none; }
.co__form { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.co__form h1 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.co__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.co__sum { flex: 1 1 380px; min-width: 0; max-width: 440px; background: var(--soft); padding: 24px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.co__sumhead { display: flex; justify-content: space-between; align-items: baseline; }
.co__sumhead h2 { font-size: 16px; font-weight: 700; text-transform: uppercase; }
.co__items { display: flex; flex-direction: column; gap: 16px; }
.coi { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; }
.coi__img { width: 64px; height: 80px; background: #ECEBE8; position: relative; display: block; }
.coi__img img { width: 100%; height: 100%; object-fit: cover; }
.coi__img b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ink); color: #FFF; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.coi__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coi__info strong { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; }
.coi__info > span { font-size: 12px; color: var(--text2); }
.coi__info .coi__prob { color: var(--deep); font-weight: 600; }
.coi__edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.coi__edit label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.coi__edit select { height: 34px; border: 1px solid #CFCFCD; background: #FFF; padding: 0 6px; font: 13px 'Manrope', sans-serif; }
.coi__edit .qtyb { background: #FFF; }
.coi__edit .ulink { font-size: 12px; font-weight: 400; color: var(--text2); }
.coi__price { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; }
.co__promo { display: flex; gap: 8px; }
.co__promo input { flex: 1; min-width: 0; height: 44px; border: 1px solid #CFCFCD; padding: 0 12px; font: 14px 'Manrope', sans-serif; background: #FFF; text-transform: uppercase; }
.co__promo button { height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); background: #FFF; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.co__promomsg { font-size: 13px; margin-top: -10px; }
.co__promomsg:empty { display: none; }
.co__totals { border-top: 1px solid #E2E2E0; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.co__totals > div { display: flex; justify-content: space-between; gap: 12px; }
.co__totals > div[hidden] { display: none; }
.co__deliv { text-align: right; }
.co__deliv.is-free { color: #2F6B3A; font-weight: 700; }
.co__deliv.is-muted { color: var(--stone); }
.co__deliv.is-warn { color: var(--deep); }
.co__total { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 700; border-top: 1px solid #E2E2E0; padding-top: 12px; }
.co__pay { display: flex; flex-direction: column; gap: 8px; }
.co__paylabel { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.payopt { position: relative; padding: 14px; border: 1.5px solid #CFCFCD; background: #FFF; display: flex; gap: 12px; align-items: center; cursor: pointer; }
.payopt input { position: absolute; opacity: 0; }
.payopt:has(input:checked) { border-color: var(--ink); }
.payopt__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.payopt input:checked + .payopt__dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.payopt input:focus-visible + .payopt__dot { outline: 2px solid var(--red); outline-offset: 2px; }
.payopt__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.payopt__txt strong { font-family: 'Outfit', sans-serif; font-size: 15px; }
.payopt__txt span { font-size: 12px; color: var(--text2); }
.co__submit { height: 56px; border: 0; background: var(--red); color: #FFF; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.co__submit:hover { background: var(--deep); }
.co__submit:disabled { background: #B5B1AD; cursor: not-allowed; }
.co__note { font-size: 12px; color: var(--text2); text-align: center; line-height: 1.5; }
.co__problem { background: #FDECEC; color: var(--deep); padding: 12px 14px; font-size: 14px; font-weight: 600; }
.co__problem[hidden] { display: none; }
.done { max-width: 640px; margin: 0 auto; padding: 80px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.done[hidden] { display: none; }
.done h1 { font-size: 30px; font-weight: 700; }
.done__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.done__box { width: 100%; border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left; font-size: 14px; margin-top: 8px; }
.done__box div { display: flex; justify-content: space-between; gap: 16px; }
.done__box div span:first-child { color: var(--text2); }
.done__box div span:last-child { text-align: right; max-width: 60%; }
.done__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.done__btns .obtn--dark, .done__btns .btn { height: 50px; font-size: 13px; font-weight: 700; }

/* Track order (TrackOrder board) */
.track__form { display: flex; flex-direction: column; gap: 14px; }
.track__res { border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.track__res[hidden] { display: none; }
.trk__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.trk__head > div { display: flex; flex-direction: column; gap: 4px; }
.trk__head strong { font-family: 'Outfit', sans-serif; font-size: 16px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; color: #A8A4A0; }
.steps li::before { content: ''; position: absolute; left: 6px; top: -10px; height: 20px; width: 2px; background: var(--line2); }
.steps li:first-child::before { display: none; }
.steps .st__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #CFCFCD; background: #FFF; position: relative; z-index: 1; }
.steps li.is-done, .steps li.is-now { color: var(--ink); }
.steps li.is-done .st__dot { background: var(--ink); border-color: var(--ink); }
.steps li.is-now .st__dot { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 4px rgba(251,1,1,.15); }
.steps li.is-done::before, .steps li.is-now::before { background: var(--ink); }
.steps strong { font-family: 'Outfit', sans-serif; }
.steps li > span:last-child { font-size: 12px; color: var(--stone); }
.trk__upd { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.trk__items { display: flex; flex-direction: column; gap: 12px; }
.track__res .obtn--dark { height: 46px; align-self: flex-start; }

/* Login + account (Login, Account boards) */
.login form { display: flex; flex-direction: column; gap: 14px; }
.login [data-step] { display: flex; flex-direction: column; gap: 14px; }
.login [data-step][hidden] { display: none; }
.pfx { display: flex; border: 1px solid #CFCFCD; }
.pfx b { display: flex; align-items: center; padding: 0 12px; background: var(--soft); font-family: 'Outfit', sans-serif; border-right: 1px solid #CFCFCD; }
.pfx input { border: 0 !important; }
.otp { letter-spacing: .5em; font-size: 20px !important; text-align: center; }
.acct { max-width: 1100px; margin: 0 auto; padding: 40px var(--pad) 0; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.acct__nav { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); padding: 18px; }
.acct__nav strong { font-family: 'Outfit', sans-serif; font-size: 18px; }
.acct__nav button[data-tab] { text-align: left; height: 44px; border: 0; background: transparent; border-left: 3px solid transparent; padding: 0 10px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.acct__nav button[data-tab]:first-of-type { margin-top: 12px; }
.acct__nav button[aria-current="page"] { border-left-color: var(--red); background: var(--soft); }
.acct__nav .ulink { align-self: flex-start; margin-top: 10px; }
.acct__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ord { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ord > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ord strong { font-family: 'Outfit', sans-serif; }
.ord .ulink { align-self: flex-start; }
.ord__more { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ord__more[hidden] { display: none; }
.wl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wl__item { display: flex; flex-direction: column; gap: 6px; }
.wl__item a { display: flex; flex-direction: column; gap: 6px; }
.wl__item img, .wl__ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #ECEBE8; display: block; }
.wl__item strong { font-family: 'Outfit', sans-serif; font-size: 13px; }
.wl__item .ulink { align-self: flex-start; font-size: 12px; }
.adr { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.adr__item { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.adr__item > div:first-child { display: flex; gap: 8px; align-items: center; }
.adr__item strong { font-family: 'Outfit', sans-serif; }
.adr__act { display: flex; gap: 14px; }
.adr__add { border: 1.5px dashed #B5B1AD; background: #FFF; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.adr__add span { font-size: 24px; font-weight: 400; }
.prof { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin-top: 10px; }
.prof h2 { font-size: 18px; text-transform: uppercase; }
.prof .btn { align-self: flex-start; }

/* Tablet */
@media (max-width: 1100px) {
  .grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 > :nth-child(n + 9) { display: none; }
  .feature { min-height: 640px; }
}
/* Phone (Mobile, CategoryMobile and ProductMobile boards) */
@media (max-width: 760px) {
  :root { --pad: 16px; }
  .hdr { grid-template-columns: 44px 44px 1fr 44px 44px; padding: 6px 8px; height: auto; gap: 0; }
  .hdr__nav, .hdr__login, .hdr__search { display: none; }
  .hdr__menu, .hdr__msearch, .hdr__macc { display: flex; }
  .hdr__right { display: contents; }
  .hdr__logo img { height: 26px; }
  .hero { height: 640px; min-height: 0; }
  .hero h1, .hero__h { font-size: 28px; }
  .pi__head h1 { font-size: 22px; }
  .hero__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .hero__btns .obtn { width: auto; }
  .hero__dots button { width: 26px; }
  .only-wide { display: none; }
  .only-narrow { display: block; }
  .sec { padding-top: 36px; }
  .is-home .hero + .sec { padding-top: 28px; }
  .sec__title { font-size: 14px; margin-bottom: 14px; }
  .grid--5, .grid--4, .page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 > :nth-child(n + 9) { display: none; }
  .sec--feature { display: flex; flex-direction: column; }
  .sec--feature .feature { order: -1; min-height: 480px; }
  .promo { display: flex; flex-direction: column-reverse; }
  .promo__img { min-height: 300px; }
  .promo__text { padding: 20px var(--pad) 0; }
  .promo__text h2 { font-size: 18px; }
  .ptile { min-height: 420px; }
  .fbar { top: 57px; }
  .card__body { padding: 10px 8px 0; }
  .card__row { flex-direction: column; gap: 2px; }
  .pp { padding: 0; gap: 20px; }
  .pg { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; flex: 1 1 100%; }
  .pg__img { flex: 0 0 86%; scroll-snap-align: start; }
  .pi { position: static; max-width: none; padding: 0 var(--pad); }
  .trust { margin-top: 40px; padding: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .trust div { justify-content: flex-start; }
  .trust span { font-size: 12px; }
  .ftr__in { grid-template-columns: 1fr 1fr; padding-top: 36px; gap: 28px; }
  .ftr__brand { grid-column: 1 / -1; }

  .chdr { padding: 0 16px; height: 60px; }
  .chdr__secure { font-size: 0; }
  .co { padding: 24px 16px 60px; gap: 28px; flex-direction: column-reverse; }
  .co__two { grid-template-columns: 1fr; }
  .co__sum { position: static; max-width: none; width: 100%; padding: 18px; }
  .acct { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .bagd__item { grid-template-columns: 80px 1fr; }
  .bagd__img { width: 80px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Premium polish ===== */
/* Calm, even spacing around product grids and tiles */
.grid { gap: 32px 14px; padding: 0 var(--pad); }
.cats { gap: 14px; padding: 0 var(--pad); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sec--feature { gap: 14px; padding: 0 var(--pad); }
.quotes { gap: 14px; }
.card { padding-bottom: 4px; background: transparent; }
.card__body { padding: 12px 2px 0; }
.card__media, .card a:first-child { overflow: hidden; }
.card__img { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
@media (hover: hover) { .card:hover .card__img:not(.card__img--back) { transform: scale(1.03); } }
.feature img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .feature:hover img { transform: scale(1.03); } }
.feature .feature__text { background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 60%); }
/* Section titles: quieter, more refined */
.sec__title { letter-spacing: .14em; font-weight: 700; text-transform: uppercase; margin-bottom: 26px; }
.sec { padding-top: 72px; }
/* Brand statement when no story text is set */
.story { padding: 88px var(--pad) 8px; }
.story .sec__title { font-size: 22px; letter-spacing: .08em; max-width: 22ch; line-height: 1.35; margin-bottom: 18px; }
.story p { font-size: 15px; line-height: 1.8; }
/* Reviews as clean cards */
.quote { background: #FFF; border: 1px solid var(--line); padding: 26px; gap: 12px; }
.quote blockquote { font-size: 15px; line-height: 1.65; color: var(--ink); }
.quote blockquote::before { content: '\201C'; display: block; font: 700 34px/0.6 'Outfit', sans-serif; color: var(--line2); margin-bottom: 10px; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; }
/* Header: subtle depth, hover lines */
.hdr { background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
.hdr__nav a { position: relative; padding: 6px 0; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.hdr__nav a:hover::after, .hdr__nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Buttons: smooth hover */
.btn, .obtn, .buy__add, .buy__now, .bagd__go, .news button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.buy__add:hover:not(:disabled), .bagd__go:hover, .btn:hover { background: #2B2B2B; }
.buy__now:hover { background: var(--ink); color: #FFF; }
/* Trust strip and footer */
.trust { background: var(--soft); border-color: transparent; }
.ftr { background: #FFF; }
.ftr__col a { color: var(--text2); transition: color .2s; } .ftr__col a:hover { color: var(--ink); }
.ftr__social a { border-radius: 50%; border-color: var(--line2); transition: border-color .2s, background .2s; }
.ftr__social a:hover { background: var(--ink); color: #FFF; border-color: var(--ink); }
.ftr__base { color: var(--stone); }
/* Product page: tidy gallery spacing */
.pg { gap: 10px; }
.pi__info { border-radius: 2px; }
/* Phone: sticky add-to-bag bar */
.mbar { display: none; }
@media (max-width: 760px) {
  .grid { gap: 26px 8px; padding: 0 10px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 10px; }
  .feature.feature--cat .feature__text > span:first-child { font-size: 16px; }
  .feature.feature--cat .obtn { width: auto; height: 34px; padding: 0 14px; font-size: 11px; }
  .sec--feature { padding: 0 10px; gap: 8px; }
  .sec { padding-top: 48px; }
  .story { padding-top: 56px; }
  .story .sec__title { font-size: 18px; }
  .quotes { padding: 0 10px; grid-template-columns: 1fr; }
  .quote { padding: 20px; }
  .card__body { padding: 10px 2px 0; }
  .pg { gap: 6px; }
  .mbar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
  .mbar__p { display: flex; flex-direction: column; min-width: 0; font-family: 'Outfit', sans-serif; font-size: 13px; }
  .mbar__p b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .mbar__p s { color: var(--stone); font-size: 12px; } .mbar__p em { font-style: normal; font-weight: 700; color: var(--red); } .mbar__p em.is-reg { color: var(--ink); }
  .mbar button { flex: none; height: 46px; padding: 0 22px; background: var(--ink); color: #FFF; border: 0; font: 700 13px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
  .mbar button:disabled { opacity: .5; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
}
.story .sec__title { max-width: 34ch; }
.feature .feature__text { background: none; }
.feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%); pointer-events: none; }
.feature .feature__text { z-index: 1; }
.card__row { flex-direction: column; align-items: flex-start; gap: 4px; }
.card__price { flex-wrap: wrap; }
.quote blockquote::before { color: #D9D6D2; }
.quotes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 760px) {
  .co { flex-direction: column; align-items: stretch; }
  .co__form, .co__sum { flex: none; width: 100%; }
}

/* ===== Smooth feel: lighter scrolling, drawer motion, skeletons ===== */
/* No blur behind the header: blur is costly on every scroll frame */
.hdr { background: #FFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 760px) { .mbar:not([hidden]) { background: #FFF; backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Sections below the first screen are only drawn when they come near */
html { -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; }

/* Drawers: backdrop fades, panel glides in, contents rise one after another */
.bagd, .drawer { background: transparent; }
.bagd__shade { background: rgba(10,10,10,0); transition: background .34s ease; }
.drawer { transition: background .34s ease; }
.bagd.is-in .bagd__shade { background: rgba(10,10,10,.48); }
.drawer.is-in { background: rgba(10,10,10,.48); }
.bagd__panel { transform: translateX(104%); transition: transform .42s cubic-bezier(.22,1,.36,1); will-change: transform; box-shadow: -24px 0 60px rgba(0,0,0,.18); }
.bagd.is-in .bagd__panel { transform: none; }
.bagd.is-out .bagd__panel { transform: translateX(104%); transition-duration: .32s; transition-timing-function: cubic-bezier(.55,0,.75,.2); }
.drawer__panel { transform: translateX(-104%); transition: transform .42s cubic-bezier(.22,1,.36,1); will-change: transform; box-shadow: 24px 0 60px rgba(0,0,0,.18); }
.drawer.is-in .drawer__panel { transform: none; }
.drawer.is-out .drawer__panel { transform: translateX(-104%); transition-duration: .32s; transition-timing-function: cubic-bezier(.55,0,.75,.2); }
@keyframes rg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.drawer.is-in .drawer__nav a, .bagd.is-in .bagd__item, .bagd.is-in .bagd__empty, .bagd.is-in .bagd__free { animation: rg-rise .5s cubic-bezier(.22,1,.36,1) both; }
.drawer.is-in .drawer__nav a:nth-child(1), .bagd.is-in .bagd__item:nth-child(1) { animation-delay: .08s; }
.drawer.is-in .drawer__nav a:nth-child(2), .bagd.is-in .bagd__item:nth-child(2) { animation-delay: .12s; }
.drawer.is-in .drawer__nav a:nth-child(3), .bagd.is-in .bagd__item:nth-child(3) { animation-delay: .16s; }
.drawer.is-in .drawer__nav a:nth-child(4), .bagd.is-in .bagd__item:nth-child(4) { animation-delay: .20s; }
.drawer.is-in .drawer__nav a:nth-child(5), .bagd.is-in .bagd__item:nth-child(5) { animation-delay: .24s; }
.drawer.is-in .drawer__nav a:nth-child(n+6), .bagd.is-in .bagd__item:nth-child(n+6) { animation-delay: .28s; }
/* Quick view dialogs (size guide) */
dialog[open] { animation: rg-pop .32s cubic-bezier(.22,1,.36,1); }
dialog::backdrop { background: rgba(10,10,10,.48); }
@keyframes rg-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Skeletons: soft shimmer while something loads */
@keyframes rg-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk, .is-loading { position: relative; overflow: hidden; background: #EFEEEB; }
.sk::after, .is-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: rg-shimmer 1.3s ease-in-out infinite; pointer-events: none; }
.sk--img { aspect-ratio: 4 / 5; width: 100%; }
.sk--line { height: 12px; width: 70%; margin-top: 12px; border-radius: 2px; }
.sk--short { width: 40%; margin-top: 8px; }
.sk--block { height: 72px; width: 100%; margin-top: 14px; }
.sk-list { padding: 8px 0; }
.card--sk { pointer-events: none; }
img.is-fading { opacity: 0; }
.card__img, .pg__img img, .feature img, .promo__img img { transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.card__img--back { transition: opacity .35s ease; }
[data-load-more].is-busy { opacity: .6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .bagd__panel, .drawer__panel { transition: none; }
  .sk::after, .is-loading::after { animation: none; }
  .drawer.is-in .drawer__nav a, .bagd.is-in .bagd__item { animation: none; }
}

/* ===== Newsletter band + black footer (Blakely style) ===== */
.nlb { background: var(--soft); border-top: 1px solid var(--line); padding: 56px var(--pad); }
.nlb__in { max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nlb h2 { margin: 0; font: 700 18px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.nlb p { margin: 0; color: var(--text2); font-size: 14px; }
.nlb__form { width: 100%; margin-top: 10px; }
.nlb__form .news__row { display: flex; }
.nlb__form input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--ink); border-right: 0; padding: 0 16px; background: #FFF; font: 400 14px 'Manrope', sans-serif; }
.nlb__form button { height: 48px; padding: 0 26px; }
.ftr { background: #0D0D0D; color: #E9E9E7; position: relative; overflow: hidden; }
.ftr a { color: #BDBDBA; } .ftr a:hover { color: #FFF; }
.ftr__in { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding: 64px var(--pad) 24px; position: relative; z-index: 1; }
.ftr__brand { gap: 16px; } .ftr__brand img { width: 128px; }
.ftr__brand p { margin: 0; color: #9C9C98; font-size: 14px; line-height: 1.7; max-width: 30ch; }
.ftr__col { display: block; font-size: 14px; }
.ftr__col summary, .ftr__col > strong { display: block; list-style: none; font: 700 12px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #FFF; margin-bottom: 16px; cursor: default; }
.ftr__col summary::-webkit-details-marker { display: none; }
.ftr__col > div { display: flex; flex-direction: column; gap: 11px; }
.ftr__col span { color: #9C9C98; }
.ftr__social a { width: 38px; height: 38px; border: 1px solid #2E2E2E; border-radius: 50%; color: #E9E9E7; }
.ftr__social a:hover { background: #FFF; color: #0D0D0D; border-color: #FFF; }
.ftr__word { font: 800 clamp(64px, 17vw, 260px)/0.8 'Outfit', sans-serif; letter-spacing: .04em; text-align: center; color: rgba(255,255,255,.06); padding: 12px var(--pad) 0; margin-bottom: -0.12em; user-select: none; white-space: nowrap; }
.ftr__base { border-top: 1px solid #222; color: #8C8C88; position: relative; z-index: 1; }
.ftr__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.ftr__pay b { font: 600 11px 'Manrope', sans-serif; letter-spacing: .04em; padding: 5px 10px; border: 1px solid #2E2E2E; border-radius: 4px; color: #CFCFCB; text-transform: uppercase; }
.trust { border-bottom: 0; }
@media (max-width: 1100px) { .ftr__in { grid-template-columns: 1fr 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .nlb { padding: 40px 16px; } .nlb h2 { font-size: 15px; }
  .ftr__in { grid-template-columns: 1fr; gap: 0; padding: 40px 16px 8px; }
  .ftr__brand { margin-bottom: 20px; }
  .ftr__col { border-top: 1px solid #222; }
  .ftr__col summary, .ftr__col > strong { margin: 0; padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; }
  .ftr__col summary::after { content: '+'; font-size: 18px; font-weight: 400; line-height: 1; }
  .ftr__col[open] summary::after { content: '−'; }
  .ftr__col > div { padding-bottom: 18px; }
  .ftr__contact { border-bottom: 1px solid #222; }
  .ftr__word { font-size: 22vw; padding-top: 28px; }
  .ftr__base { flex-direction: column; align-items: flex-start; }
  /* Home: product rows swipe sideways on phones */
  .is-home .sec .grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 0 10px; scroll-padding: 0 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .is-home .sec .grid::-webkit-scrollbar { display: none; }
  .is-home .sec .grid > .card { flex: 0 0 64%; scroll-snap-align: start; display: block !important; }
}

/* Crisp text and edges on every screen */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
img { image-rendering: auto; }
.card__img, .pg__img img, .feature img { backface-visibility: hidden; }

/* Newsletter sits inside the black footer; header a touch lower */
.hdr { height: 54px; } .hdr__logo img { height: 24px; }
.ftr__in { display: flex; flex-wrap: wrap; gap: 40px; }
.ftr__brand { flex: 1.2 1 200px; } .ftr__col { flex: 1 1 120px; }
.ftr__nl { flex: 1.8 1 300px; display: flex; flex-direction: column; gap: 10px; }
.ftr__nl strong { font: 700 11px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #FFF; }
.ftr__nl p { margin: 0; color: #9C9C98; font-size: 12px; }
.ftr__nl .nlb__form { margin-top: 4px; }
.ftr__nl .nlb__form input { height: 42px; background: transparent; border: 1px solid #3A3A3A; border-right: 0; color: #FFF; font-size: 13px; }
.ftr__nl .nlb__form input::placeholder { color: #8C8C88; }
.ftr__nl .nlb__form input:focus { outline: none; border-color: #FFF; }
.ftr__nl .nlb__form button { height: 42px; padding: 0 20px; background: #FFF; color: var(--ink); border: 1px solid #FFF; font-size: 11px; }
.ftr__nl .nlb__form button:hover { background: var(--red); border-color: var(--red); color: #FFF; }
.ftr__nl .news__msg { color: #CFCFCB; font-size: 12px; }
@media (max-width: 760px) {
  .hdr { height: 52px; } .hdr__logo img { height: 21px; }
  .ftr__in { flex-direction: column; gap: 0; }
  .ftr__brand { margin-bottom: 20px; }
  .ftr__nl { order: -1; flex: none; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid #222; }
}
@media (max-width: 760px) { .ftr__brand, .ftr__col { flex: none; } }
.ftr { margin-top: 64px; } @media (max-width: 760px) { .ftr { margin-top: 44px; } }

/* Phone tidy-up: balanced hero buttons, two cards per view, full-width footer form */
.ftr__nl .news { max-width: none; width: 100%; }
@media (max-width: 760px) {
  .hero__text { padding: 0 24px; gap: 14px; }
  .hero__btns { display: flex; justify-content: center; gap: 8px; width: auto; }
  .hero__btns .obtn { width: auto; min-width: 128px; height: 36px; padding: 0 16px; font-size: 10.5px; }
  .sec { padding-top: 36px; }
  .sec__title { margin-bottom: 14px; }
  .is-home .sec .grid { gap: 8px; padding: 0 12px; scroll-padding: 0 12px; }
  .is-home .sec .grid > .card { flex: 0 0 calc(50% - 4px); }
  .card__name { font-size: 11.5px; } .card__price { font-size: 11.5px; }
  .story { padding: 48px 20px 8px; }
  .ftr { margin-top: 36px; }
  .ftr__in { padding: 36px 16px 16px; }
  .ftr__brand img { width: 104px; }
  .ftr__word { font-size: 24vw; padding-top: 16px; }
  .ftr__base { padding: 14px 16px 18px; }
}
.drawer__logo, .drawer__top img { height: 24px; width: auto; max-width: none; object-fit: contain; }

/* Soft corners (2px) — remove this block to go back to sharp corners */
:root { --rad: 2px; }
.card__media, .card__img, .pg__img, .pg__img img, .feature, .cats a, .quote, .badge, .obtn, .btn, .news input, .news button,
.psz span, .psz label, .qty, .fld input, .fld select, .fld textarea, .adr__item, .bagd__item img, .chip, .promo, .ftr__social a:not([class]) { border-radius: var(--rad); }
.news__row input, .nlb__form input { border-radius: var(--rad) 0 0 var(--rad); }
.news__row button, .nlb__form button { border-radius: 0 var(--rad) var(--rad) 0; }
.card__media, .feature, .pg__img { overflow: hidden; }
.ftr__social a { border-radius: 50%; }
/* Soft corners on every action button */
button:not(.card__plus):not(.card__wish):not(.hdr__btn):not(.psw):not(.card__sw):not(.b--text):not([role="tab"]),
a.btn, a.obtn, input[type="submit"], .bagd__go, .bagd__cont, .payopt, .sort, .fbar__clear, .fbar select, .more a, .more button,
.adr__add, .mbar button, .mbar a, .ulink.btn, select { border-radius: var(--rad); }

/* ================= Rogrip sizing standard =================
   One scale for the whole store. Sizes grow smoothly from phone (390px) to desktop (1440px),
   so nothing jumps: same proportions everywhere, touch-friendly 44px controls. */
:root {
  --pad: clamp(16px, 2.6vw, 40px);
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px;
  --fs-title: clamp(18px, 15px + .55vw, 22px);
  --fs-hero: clamp(22px, 16px + 1.3vw, 34px);
  --fs-sec: clamp(12px, 11.4px + .15vw, 13px);
  --ctl: 44px; --btn-fs: 12px; --track: .08em;
  --sec-gap: clamp(44px, 32px + 3vw, 76px);
}
body { font-size: var(--fs-base); }
@media (max-width: 760px) { body { font-size: 13.5px; } }

/* Announcement and header */
.announce { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); padding: 8px 16px; }
.hdr { height: 60px; padding: 0 var(--pad); }
.hdr__logo img { height: 24px; width: auto; }
.hdr__nav, .hdr__login, .hdr__bag { font-size: var(--fs-sm); letter-spacing: var(--track); }
@media (max-width: 760px) { .hdr { height: 54px; } .hdr__logo img { height: 21px; } }

/* Buttons: one standard size for every action */
.btn, .obtn, .obtn--dark, .obtn--sm, .bagd__go, .news button, .nlb__form button, .more .obtn--dark {
  height: var(--ctl); font-size: var(--btn-fs); font-weight: 600; letter-spacing: var(--track); }
.btn { padding: 0 28px; }
.obtn--dark { padding: 0 32px; width: auto; }
.news input, .nlb__form input, .ftr__nl .nlb__form input, .ftr__nl .nlb__form button { height: var(--ctl); }

/* Hero: shaded for readable text, one filled + one outline button */
.hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.42) 100%); }
.hero h1, .hero__h { font-size: var(--fs-hero); letter-spacing: .01em; line-height: 1.08; text-shadow: 0 1px 18px rgba(0,0,0,.18); max-width: 22ch; }
.hero__text { gap: clamp(14px, 1.4vw, 22px); padding: 0 var(--pad); }
.hero__btns { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; width: auto; }
.hero__btns .obtn { width: auto; min-width: clamp(132px, 10vw, 168px); padding: 0 22px; height: var(--ctl); font-size: var(--btn-fs); }
.hero__btns .obtn:first-child { background: #FFF; color: var(--ink); border-color: #FFF; }
.hero__btns .obtn:first-child:hover { background: transparent; color: #FFF; }

/* Sections and product grids */
.sec { padding-top: var(--sec-gap); }
.is-home .hero + .sec { padding-top: clamp(36px, 28px + 2vw, 56px); }
.sec__title { font-size: var(--fs-sec); letter-spacing: .16em; margin-bottom: clamp(16px, 12px + 1vw, 26px); }
.grid { gap: clamp(28px, 2.4vw, 40px) clamp(8px, 1.1vw, 16px); padding: 0 var(--pad); }
.grid--5, .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--5, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--5, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cats { padding: 0 var(--pad); gap: clamp(8px, 1.1vw, 16px); }
.card__name { font-size: var(--fs-md); font-weight: 600; }
.card__price { font-size: var(--fs-md); } .card__price s { font-size: var(--fs-sm); }
.badge { font-size: 10px; letter-spacing: .08em; }
.story .sec__title { font-size: clamp(15px, 13px + .5vw, 19px); }
.story p, .quote blockquote { font-size: var(--fs-base); }
.feature__text > span:first-child { font-size: clamp(17px, 14px + .7vw, 22px); }
@media (max-width: 760px) {
  .is-home .sec .grid { padding: 0 var(--pad); scroll-padding: 0 var(--pad); gap: 8px; }
  .is-home .sec .grid > .card { flex: 0 0 calc(50% - 4px); }
}

/* Product page: picture area uses the full left side */
.pp { padding: clamp(12px, 1.6vw, 24px) var(--pad) 0; gap: clamp(24px, 3.5vw, 56px); flex-wrap: nowrap; }
.pg { flex: 1 1 58%; }
.pg:has(> .pg__img:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.pi { flex: 0 1 440px; max-width: 440px; top: 84px; gap: 20px; }
.pi__head h1 { font-size: var(--fs-title); line-height: 1.2; }
.pi__price { font-size: clamp(16px, 15px + .25vw, 18px); } .pi__price s { font-size: var(--fs-md); }
.pi__stars, .pi__note { font-size: var(--fs-md); }
.pi__info { font-size: var(--fs-md); }
.buy__sizes { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); max-width: 100%; }
.psz span { height: var(--ctl); font-size: var(--fs-md); }
.pcol span { width: 40px; height: 40px; } .pcol span::before { width: 28px; height: 28px; }
.buy .btn, .buy button.btn { height: 48px; font-size: var(--btn-fs); }
@media (max-width: 900px) {
  .pp { flex-wrap: wrap; padding: 0 0 0; }
  .pg { flex: 1 1 100%; max-width: none; }
  .pg:has(> .pg__img:only-child) .pg__img { flex: 0 0 100%; }
  .pi { flex: 1 1 100%; max-width: none; padding: 0 var(--pad); }
}

/* Footer */
.ftr__in { padding: clamp(36px, 4vw, 64px) var(--pad) 24px; }
.ftr__brand p, .ftr__col, .ftr__col a, .ftr__nl p { font-size: var(--fs-md); }
.ftr__col summary, .ftr__col > strong, .ftr__nl strong { font-size: var(--fs-xs); letter-spacing: .14em; }
.ftr__social a, .ftr__social a:not([class]) { width: 38px; height: 38px; border-radius: 50%; }
.ftr__base { padding: 16px var(--pad); font-size: var(--fs-sm); }
.nlb__form button, .ftr__nl .nlb__form button { padding: 0 22px; }
.pp { justify-content: center; max-width: 1360px; margin: 0 auto; }
.pg:has(> .pg__img:only-child) { max-width: 660px; }
.ftr__nl strong { letter-spacing: .1em; line-height: 1.5; }
.chdr { align-items: center; height: 64px; padding: 0 var(--pad); }
.chdr .ulink, .chdr__secure { font-size: var(--fs-sm); letter-spacing: .04em; }
.fld input, .fld select { height: 46px; font-size: var(--fs-base); }
@media (max-width: 760px) { .chdr { height: 56px; } }
.chdr > .ulink { align-self: center; justify-self: start; margin: 0; display: inline-flex; align-items: center; }
/* Header: slimmer on desktop, larger logo on phones */
.hdr { height: 54px; }
@media (max-width: 760px) { .hdr { height: 54px; } .hdr__logo img { height: 25px; } }

/* ===== Desktop header (Blakely layout): menu + mega menu + expanding search left, large logo centre, Log in + bag right ===== */
.hdr__xs, .mega { display: none; }
@media (min-width: 761px) {
  .hdr { position: sticky; height: 72px; padding: 0 var(--pad); }
  .hdr__logo img { height: 30px; }
  .hdr__nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(18px, 2.4vw, 34px); flex-wrap: nowrap; height: 100%; }
  .hdr__mm { display: flex; align-items: stretch; }
  .hdr__top { display: flex; align-items: center; height: 100%; padding: 0; font: 600 13px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .08em; position: relative; }
  .hdr__top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .hdr__mm:hover > .hdr__top::after, .hdr__mm:focus-within > .hdr__top::after, .hdr__top:hover::after { transform: scaleX(1); }
  .hdr__top:hover { color: var(--ink); }
  .mega { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #FFF; border-top: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 45; }
  .hdr__mm:hover .mega, .hdr__mm:focus-within .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: .06s; }
  .mega__in { display: flex; gap: 48px; padding: 32px var(--pad); border-bottom: 1px solid var(--line); }
  .mega ul { list-style: none; margin: 0; padding: 0; }
  .mega__big { width: 240px; flex: none; border-right: 2px solid #EAEAEA; padding-right: 32px !important; display: flex; flex-direction: column; gap: 16px; }
  .mega__big a { font: 600 15px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
  .mega__big a:hover, .mega__grp a:hover, .mega__foot a:hover { color: var(--red); }
  .mega__grp { min-width: 170px; }
  .mega__grp h6 { margin: 0 0 12px; font: 700 11px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--stone); }
  .mega__grp ul { display: flex; flex-direction: column; gap: 9px; }
  .mega__grp a { font-size: var(--fs-base); color: var(--ink); }
  .mega__foot { display: flex !important; justify-content: center; align-items: center; flex-wrap: wrap; padding: 14px var(--pad) !important; font-size: var(--fs-md); }
  .mega__foot li + li::before { content: '·'; margin: 0 12px; color: #B5B1AD; }
  .mega__foot a { color: var(--text2); }
  .hdr__xs { display: flex; align-items: center; align-self: center; position: relative; gap: 8px; cursor: pointer; }
  .hdr__xs > .ic { color: var(--ink); pointer-events: none; }
  .hdr__xs input { width: 92px; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 6px 2px; font: 400 var(--fs-md) 'Manrope', sans-serif; color: var(--ink); cursor: pointer; transition: width .3s ease, border-color .3s; }
  .hdr__xs input::placeholder { color: var(--ink); text-transform: uppercase; font: 600 12px 'Outfit', sans-serif; letter-spacing: .08em; }
  .hdr__xs input:focus { width: 210px; outline: none; border-bottom-color: var(--ink); cursor: text; }
  .hdr__xs input:focus::placeholder { color: #A8A4A0; text-transform: none; font: 400 var(--fs-md) 'Manrope', sans-serif; letter-spacing: 0; }
  .hdr__xs input::-webkit-search-cancel-button { display: none; }
  .hdr__sug { position: absolute; top: calc(100% + 18px); left: 0; width: 320px; background: #FFF; border: 1px solid var(--line); border-radius: var(--rad); box-shadow: 0 14px 34px rgba(0,0,0,.1); padding: 6px; z-index: 60; cursor: auto; }
  .hdr__sug a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--rad); }
  .hdr__sug a:hover { background: var(--soft); color: var(--ink); }
  .hdr__sug img, .hdr__sug i { width: 40px; height: 50px; object-fit: cover; background: var(--soft); flex: none; border-radius: var(--rad); }
  .hdr__sug span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hdr__sug b { font: 600 var(--fs-md) 'Outfit', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr__sug em { font-style: normal; font-size: var(--fs-sm); color: var(--text2); } .hdr__sug s { color: #8C8884; }
  .hdr__sug .hdr__sug-all { justify-content: center; border-top: 1px solid var(--line); margin-top: 4px; font: 600 var(--fs-sm) 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: var(--track); }
  .hdr__sug p { margin: 0; padding: 12px; color: var(--text2); font-size: var(--fs-md); }
  .hdr__right { gap: 22px; }
  .hdr__login { font: 600 13px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: 0; }
  .hdr__bag { position: relative; padding: 0; }
  .hdr__bag [data-bag-count] { position: absolute; top: 8px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--ink); color: #FFF; font: 700 9px/15px 'Outfit', sans-serif; text-align: center; }
}
@media (min-width: 761px) {
  .mega a, .hdr__sug a, .hdr__sug b, .hdr__sug em { text-transform: none; letter-spacing: 0; }
  .mega__grp a, .mega__foot a { font: 400 var(--fs-base) 'Manrope', sans-serif; }
  .mega__foot a { font-size: var(--fs-md); }
  .mega__big a { text-transform: uppercase; letter-spacing: .04em; }
  .mega a::after, .hdr__sug a::after { display: none !important; }
  .mega a, .hdr__sug a { padding: 0; position: static; }
  .hdr__sug a { padding: 8px; }
  .hdr__sug b { font-family: 'Outfit', sans-serif; }
  .hdr__sug .hdr__sug-all { text-transform: uppercase; letter-spacing: var(--track); }
  .hdr__xs input { width: 118px; }
}
@media (min-width: 761px) { .hdr__sug em, .hdr__sug s { font-weight: 400; } }
@media (min-width: 761px) and (max-width: 980px) { .hdr__xs input { width: 0; padding: 6px 0; } .hdr__xs input:focus { width: 160px; } .hdr__top--new { display: none; } }

/* ===== Desktop only (761px and wider): slimmer header and a matching, slightly smaller scale for the whole site. Phone untouched. ===== */
@media (min-width: 761px) {
  :root { --fs-xs: 10.5px; --fs-sm: 11px; --fs-md: 12px; --fs-base: 13px; --btn-fs: 11px; --ctl: 40px;
    --fs-title: clamp(17px, 14px + .4vw, 20px); --fs-hero: clamp(22px, 14px + 1.1vw, 30px); --fs-sec: 12px; --sec-gap: clamp(40px, 28px + 2.6vw, 64px); }
  body { font-size: var(--fs-base); }
  .announce { font-size: 10.5px; padding: 6px 16px; }
  .hdr { height: 56px; }
  .hdr__logo img { height: 24px; }
  .hdr .ic { width: 18px; height: 18px; }
  .hdr__top, .hdr__login { font-size: 11.5px; letter-spacing: .08em; }
  .hdr__xs > .ic { width: 16px; height: 16px; }
  .hdr__xs input, .hdr__xs input::placeholder { font-size: 11px; }
  .hdr__xs input { width: 104px; }
  .hdr__xs input:focus { width: 190px; }
  .hdr__sug { top: calc(100% + 10px); }
  .hdr__right { gap: 18px; }
  .hdr__bag [data-bag-count] { top: 2px; }
  .mega__in { padding: 26px var(--pad); gap: 40px; }
  .mega__big { width: 210px; gap: 13px; }
  .mega__big a { font-size: 13px; }
  .mega__grp a { font-size: var(--fs-base); }
  .hero__btns .obtn { min-width: 140px; }
  .card__name, .card__price { font-size: var(--fs-md); }
  .pi { gap: 18px; top: 72px; }
  .buy .btn, .buy button.btn { height: 44px; }
  .pcol span { width: 36px; height: 36px; } .pcol span::before { width: 26px; height: 26px; }
  .chdr { height: 56px; } .chdr__logo img { height: 24px; }
  .ftr__brand img { width: 112px; }
}
@media (min-width: 761px) { .buy__add, .buy__now { height: 46px; font-size: 12px; letter-spacing: .08em; } .psz span { height: 40px; } .pi__info, .pi__note { font-size: var(--fs-md); } }
/* Desktop only: a step bigger again (between the slim and the original) */
@media (min-width: 761px) {
  :root { --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --btn-fs: 12px; --ctl: 44px;
    --fs-title: clamp(18px, 15px + .45vw, 22px); --fs-hero: clamp(24px, 15px + 1.3vw, 34px); --fs-sec: 13px; }
  .announce { font-size: 11px; padding: 7px 16px; }
  .hdr { height: 64px; }
  .hdr__logo img { height: 28px; }
  .hdr .ic { width: 20px; height: 20px; }
  .hdr__top, .hdr__login { font-size: 12.5px; }
  .hdr__xs > .ic { width: 18px; height: 18px; }
  .hdr__xs input, .hdr__xs input::placeholder { font-size: 12px; }
  .hdr__xs input { width: 116px; } .hdr__xs input:focus { width: 210px; }
  .mega__big a { font-size: 14px; } .mega__grp a { font-size: 14px; }
  .hero__btns .obtn { min-width: 156px; }
  .buy__add, .buy__now { height: 50px; font-size: 13px; }
  .psz span { height: 44px; }
  .pcol span { width: 40px; height: 40px; } .pcol span::before { width: 28px; height: 28px; }
  .chdr { height: 64px; } .chdr__logo img { height: 28px; }
  .pi { top: 80px; }
  .ftr__brand img { width: 124px; }
}
.hero h1, .hero__h { max-width: none; }
/* Desktop only: one more size bigger */
@media (min-width: 761px) {
  :root { --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --btn-fs: 13px; --ctl: 48px;
    --fs-title: clamp(20px, 16px + .55vw, 25px); --fs-hero: clamp(28px, 17px + 1.5vw, 40px); --fs-sec: 14px; }
  .announce { font-size: 12px; padding: 8px 16px; }
  .hdr { height: 72px; }
  .hdr__logo img { height: 32px; }
  .hdr .ic { width: 22px; height: 22px; }
  .hdr__top, .hdr__login { font-size: 13.5px; }
  .hdr__xs > .ic { width: 20px; height: 20px; }
  .hdr__xs input, .hdr__xs input::placeholder { font-size: 13px; }
  .hdr__xs input { width: 128px; } .hdr__xs input:focus { width: 230px; }
  .hdr__sug { top: calc(100% + 20px); }
  .mega__big a { font-size: 15px; } .mega__grp a { font-size: 15px; }
  .hero__btns .obtn { min-width: 170px; }
  .buy__add, .buy__now { height: 54px; font-size: 14px; }
  .psz span { height: 48px; font-size: 14px; }
  .pcol span { width: 44px; height: 44px; } .pcol span::before { width: 32px; height: 32px; }
  .chdr { height: 72px; } .chdr__logo img { height: 32px; }
  .pi { top: 88px; }
  .ftr__brand img { width: 136px; }
  .fld input, .fld select { height: 50px; }
}

/* Quick add on cards: frosted glass panel */
.card__quick { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 8px 28px rgba(0,0,0,.14); border-radius: var(--rad); }
.card__sizes button { background: rgba(255,255,255,.7); border-color: rgba(20,20,20,.85); border-radius: var(--rad); transition: background .15s, color .15s, transform .15s; }
.card__sizes button:hover { background: var(--ink); color: #FFF; }
.card__sizes button:active { transform: scale(.96); }
.card__sizes button.is-added { background: var(--red); border-color: var(--red); color: #FFF; }
.card__sizes button:disabled { background: rgba(255,255,255,.45); }

/* Added-to-bag confirmation */
.adb { position: fixed; z-index: 90; right: 20px; top: 84px; width: 360px; max-width: calc(100vw - 24px); background: #FFF; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 22px 60px rgba(0,0,0,.18); padding: 16px; display: flex; flex-direction: column; gap: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.98); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility .25s; }
.adb.is-in { opacity: 1; visibility: visible; transform: none; }
.adb__top { display: flex; align-items: center; gap: 8px; font: 700 13px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.adb__ok { width: 22px; height: 22px; border-radius: 50%; background: #1E9E5A; color: #FFF; display: flex; align-items: center; justify-content: center; flex: none; }
.adb__x { margin-left: auto; width: 30px; height: 30px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--stone); }
.adb__item { display: flex; gap: 12px; align-items: center; }
.adb__item img, .adb__item i { width: 64px; height: 80px; object-fit: cover; background: var(--soft); border-radius: 2px; flex: none; }
.adb__item span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adb__item b { font: 600 14px 'Outfit', sans-serif; line-height: 1.3; }
.adb__item small { color: var(--text2); font-size: 12.5px; }
.adb__item em { font-style: normal; font: 700 14px 'Outfit', sans-serif; }
.adb__free { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text2); background: var(--soft); padding: 10px 12px; border-radius: 2px; }
.adb__free b { color: var(--ink); }
.adb__free i { display: block; height: 4px; background: #E4E4E2; border-radius: 2px; overflow: hidden; }
.adb__free em { display: block; height: 100%; background: var(--red); border-radius: 2px; }
.adb__btns { display: grid; grid-template-columns: 1fr; gap: 8px; }
.adb__go, .adb__bag { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 2px; font: 600 12.5px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.adb__go { background: var(--ink); color: #FFF; } .adb__go:hover { background: var(--red); color: #FFF; }
.adb__bag { border: 1.5px solid var(--ink); color: var(--ink); } .adb__bag:hover { background: var(--ink); color: #FFF; }
.adb__more { border: 0; background: none; font: 600 13px 'Manrope', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); align-self: center; padding: 2px 4px; }
@media (max-width: 760px) {
  .adb { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; border-radius: 12px 12px 0 0; border: 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); box-shadow: 0 -12px 40px rgba(0,0,0,.18); }
  .adb.is-in { transform: none; }
  .adb__btns { grid-template-columns: 1fr 1fr; }
  .adb__go { grid-column: 1 / -1; }
}
/* Bag icon gives a little bump when something is added */
@keyframes rg-bump { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.hdr__bag.is-bump .ic { animation: rg-bump .5s ease; }
.hdr__bag.is-bump [data-bag-count] { animation: rg-bump .5s ease .05s; }
@media (max-width: 760px) { .adb__btns { grid-template-columns: 1fr; } }
@media (min-width: 761px) { .sec__title { font-size: 18px; letter-spacing: .14em; } .story .sec__title { font-size: 22px; } }

/* Phone quick menu at the bottom */
.bnav { display: none; }
@media (max-width: 760px) {
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(0,0,0,.04); }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #77736F; font: 600 10.5px 'Outfit', sans-serif; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; }
  .bnav a .ic { width: 22px; height: 22px; transition: transform .2s; }
  .bnav a:active .ic { transform: scale(.88); }
  .bnav a[aria-current="page"] { color: var(--ink); }
  .bnav a[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--red); border-radius: 0 0 2px 2px; }
  .bnav [data-bag-count] { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #FFF; font: 700 9.5px/16px 'Outfit', sans-serif; text-align: center; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* Product page keeps its own add-to-bag bar instead */
  body:has(.mbar) .bnav { display: none; }
  body:has(.mbar) { padding-bottom: 0; }
  .adb { bottom: calc(58px + env(safe-area-inset-bottom)); }
  body:has(.mbar) .adb { bottom: 0; }
}
/* Phone header: menu · logo · search · bag (account, wishlist, tracking live in the bottom menu) */
@media (max-width: 760px) {
  .hdr__macc { display: none !important; }
  .hdr__menu { grid-column: 1; grid-row: 1; }
  .hdr__logo { grid-column: 2 / 5; grid-row: 1; justify-self: center; }
  .hdr__msearch { grid-column: 4; grid-row: 1; }
  .hdr__bag { grid-column: 5; grid-row: 1; justify-self: center; }
  .bnav a span { white-space: nowrap; }
}

/* Sign in with Google */
.gsi { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 6px; }
.gsi[hidden] { display: none; }
.gsi [data-gsi-btn] { display: flex; justify-content: center; min-height: 44px; }
.gsi__or { display: flex; align-items: center; gap: 12px; color: var(--stone); font-size: 12px; }
.gsi__or::before, .gsi__or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }

/* Logged-in look */
@media (min-width: 761px) { .hdr__login { display: inline-flex; align-items: center; gap: 8px; } }
.hdr__av, .bnav__av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #FFF; font: 700 12px/1 'Outfit', sans-serif; letter-spacing: 0; text-transform: uppercase; }
.hdr__av { width: 28px; height: 28px; }
.hdr__av[hidden], .bnav__av[hidden] { display: none; }
.bnav__ic { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.bnav__av { position: absolute; inset: -1px; width: 24px; height: 24px; font-size: 11px; }
.is-in .bnav__ic > .ic { visibility: hidden; }
.is-in .hdr__login { text-transform: none; letter-spacing: .02em; }

/* ===== Login page: brand panel + sign-in card ===== */
.auth { max-width: 1040px; margin: clamp(24px, 4vw, 56px) auto clamp(40px, 6vw, 80px); padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.auth__brand { position: relative; overflow: hidden; background: #0D0D0D; color: #FFF; border-radius: 4px 0 0 4px; padding: clamp(32px, 4vw, 52px); display: flex; }
.auth__brand::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 0% 0%, rgba(225,6,0,.35) 0%, rgba(225,6,0,0) 55%); pointer-events: none; }
.auth__brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.auth__kicker { font: 600 11px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .18em; color: #FF5A55; }
.auth__quote { margin: 0; white-space: nowrap; font: 700 clamp(22px, 2vw, 28px)/1.15 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.auth__perks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth__perks li { display: flex; align-items: center; gap: 12px; color: #D6D6D2; font-size: 14px; }
.auth__perks .ic { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.08); color: #FFF; }
.auth__word { position: absolute; left: -6px; right: 0; bottom: -0.16em; font: 800 clamp(70px, 9vw, 120px)/1 'Outfit', sans-serif; letter-spacing: .02em; color: rgba(255,255,255,.05); white-space: nowrap; user-select: none; }
.auth__card { background: #FFF; border: 1px solid var(--line); border-left: 0; border-radius: 0 4px 4px 0; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.06); }
.auth__card [data-step] { display: flex; flex-direction: column; gap: 14px; }
.auth__card [data-step][hidden] { display: none; }
.auth__card form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.auth__ttl { margin: 0; font: 700 clamp(24px, 2.2vw, 30px)/1.15 'Outfit', sans-serif; }
.auth__sub { margin: 0; color: var(--text2); font-size: 14.5px; line-height: 1.6; }
.auth__step { font: 600 11px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.auth .gsi { margin: 10px 0 2px; }
.auth .gsi [data-gsi-btn] { justify-content: stretch; }
.auth .gsi [data-gsi-btn] > div { width: 100%; }
.auth__trust { list-style: none; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.auth__trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text2); line-height: 1.5; }
.auth__trust .ic { flex: none; margin-top: 1px; color: #1E9E5A; }
.auth__foot { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--text2); }
.auth__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth__legal { font-size: 12px; color: var(--stone); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; min-height: 0; margin-top: 0; padding: 0; }
  .auth__brand { border-radius: 0; padding: 28px 20px 30px; }
  .auth__brand-in { gap: 14px; }
  .auth__quote { font-size: 24px; }
  .auth__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 0; }
  .auth__perks li { font-size: 12.5px; align-items: flex-start; }
  .auth__perks .ic { width: 30px; height: 30px; padding: 7px; }
  .auth__word { font-size: 84px; }
  .auth__card { border: 0; border-radius: 0; box-shadow: none; padding: 28px 20px 36px; }
}
.auth__email { display: flex; flex-direction: column; gap: 14px; }
.auth__email[hidden] { display: none; }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--stone); font-size: 12px; margin: 6px 0 2px; }
.auth__or[hidden] { display: none; }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.auth__email form { margin-top: 0; }
.auth .s { font-size: 13px; }
.co__saved { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; background: #EEF8F2; border: 1px solid #CFEBDB; border-radius: 2px; font-size: 13px; color: #17643E; margin: -4px 0 6px; }
.co__saved select { height: 34px; border: 1px solid #CFEBDB; background: #FFF; border-radius: 2px; padding: 0 8px; font-size: 13px; max-width: 100%; flex: 1 1 200px; }
.co__saved a { margin-left: auto; color: #17643E; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.auth .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .auth .grid2 { grid-template-columns: 1fr; } }

/* Login: Log in / Create account tabs, password field */
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 4px; gap: 4px; margin-bottom: 6px; }
.auth__tabs[hidden] { display: none; }
.auth__tabs button { height: 40px; border: 0; background: transparent; border-radius: 3px; font: 600 13px 'Outfit', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.auth__tabs button[aria-selected="true"] { background: #FFF; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.auth__row { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth__row .ulink, .auth__switch .ulink { height: auto; padding: 0; font-size: 13px; }
.auth__switch { margin: 4px 0 0; font-size: 13.5px; color: var(--text2); text-align: center; }
.auth__alt { display: flex; flex-direction: column; gap: 14px; }
.auth__alt[hidden], .auth .gsi[hidden], .auth__or[hidden] { display: none; }
.pwd { position: relative; display: block; }
.pwd input { width: 100%; padding-right: 64px !important; }
.pwd__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 10px; border: 0; background: transparent; font: 600 12px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--stone); cursor: pointer; border-radius: 2px; }
.pwd__eye:hover { color: var(--ink); background: var(--soft); }
.prof--pw { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.ttl--sm { font-size: 18px; }
.fld[hidden], .prof[hidden] { display: none !important; }

/* ===== Login: one simple card, like the admin login ===== */
.auth { display: block; max-width: none; min-height: 0; margin: 0; padding: clamp(32px, 6vw, 72px) 16px; background: #F3F4F3; }
.auth__card { max-width: 400px; margin: 0 auto; background: #FFF; border: 1px solid #E6E7E6; border-radius: 12px; box-shadow: none; padding: 28px 28px 24px; gap: 16px; justify-content: flex-start; }
.auth__logo { display: inline-flex; align-self: flex-start; }
.auth__logo img { height: 26px; width: auto; }
.auth__ttl { font-size: 22px; margin: 2px 0 0; }
.auth__sub { font-size: 14px; }
.auth__card form { gap: 12px; }
.auth .fld input, .auth .fld select, .auth .fld textarea { border-radius: 8px; }
.auth .pfx { border-radius: 8px; overflow: hidden; }
.auth .btn { height: 44px; border-radius: 8px; background: var(--red); color: #FFF; font: 600 13.5px 'Outfit', sans-serif; letter-spacing: .02em; text-transform: none; }
.auth .btn:hover { background: var(--deep); }
.auth__or { margin: 2px 0; }
.auth__switch { font-size: 13.5px; margin: 2px 0 0; }
.auth__safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid #EEEFEE; font-size: 12.5px; color: var(--text2); }
.auth__safe .ic { color: #1E9E5A; }
.auth__legal { margin: -8px 0 0; text-align: center; font-size: 11.5px; color: var(--stone); }
.auth__legal a { color: var(--stone); text-decoration: underline; text-underline-offset: 2px; }
.auth__step { margin-bottom: -6px; }
@media (max-width: 860px) { .auth { padding: 24px 12px 32px; } .auth__card { padding: 24px 20px 20px; border-radius: 12px; border: 1px solid #E6E7E6; } }
body:has(.auth) .ftr { margin-top: 0; }

/* Account area: no store header or footer, just the logo and a way back to the shop */
body.is-acct .announce, body.is-acct .hdr, body.is-acct .ftr, body.is-acct .bnav, body.is-acct .drawer, body.is-acct .adb { display: none !important; }
body.is-acct { padding-bottom: 0 !important; background: #F3F4F3; }
.acct-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 var(--pad); background: #FFF; border-bottom: 1px solid #E6E7E6; }
.acct-top__logo img { height: 24px; width: auto; display: block; }
.acct-top__back { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; font: 600 13px 'Outfit', sans-serif; color: var(--ink); }
.acct-top__back:hover { background: var(--ink); color: #FFF; }
@media (max-width: 760px) { .acct-top { height: 56px; } .acct-top__logo img { height: 21px; } .acct-top__back { height: 34px; padding: 0 12px; font-size: 12.5px; } }

/* ===== Account area (dashboard layout, brand colours) ===== */
body.is-acct { background: #F5F6F7; }
body.is-acct #main { min-height: 100vh; display: flex; flex-direction: column; }
body.is-acct [data-account] { flex: 1; display: flex; flex-direction: column; }
.ac-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ac-top { background: #FFF; border-bottom: 1px solid #E8E9EA; position: sticky; top: 0; z-index: 30; }
.ac-top__in { height: 64px; display: flex; align-items: center; gap: 24px; }
.ac-top__logo img { height: 26px; width: auto; display: block; }
.ac-nav { flex: 1; display: flex; justify-content: center; gap: 30px; }
.ac-nav a { font: 500 14px 'Manrope', sans-serif; color: #4A4744; padding: 6px 0; position: relative; white-space: nowrap; }
.ac-nav a:hover { color: var(--ink); }
.ac-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.ac-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red); border-radius: 2px; }
.ac-nav .ac-nav__shop { color: var(--red); font-weight: 600; }
.ac-me { position: relative; }
.ac-me__btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font: 600 14px 'Manrope', sans-serif; color: var(--ink); padding: 4px; }
.ac-me__btn .ic { width: 16px; height: 16px; }
.ac-av { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #FFF; display: inline-flex; align-items: center; justify-content: center; font: 700 14px 'Outfit', sans-serif; font-style: normal; }
.ac-me__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 200px; background: #FFF; border: 1px solid #E8E9EA; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.1); padding: 6px; z-index: 40; }
.ac-me__menu[hidden] { display: none; }
.ac-me__menu a, .ac-me__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 6px; font: 500 14px 'Manrope', sans-serif; color: var(--ink); cursor: pointer; text-align: left; }
.ac-me__menu a:hover, .ac-me__menu button:hover { background: #F5F6F7; color: var(--ink); }
.ac-me__menu .ic { width: 16px; height: 16px; color: #77736F; }
.ac-me__menu hr { border: 0; border-top: 1px solid #EEE; margin: 6px 0; }
.ac-main { flex: 1; padding-top: 36px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.ac-head h1 { margin: 0; font: 700 clamp(22px, 2.2vw, 26px)/1.25 'Outfit', sans-serif; }
.ac-head p { margin: 6px 0 0; color: #4A4744; font-size: 15px; }
.ac-head--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3.5vw, 40px); border-radius: 16px; color: #FFF;
  background: radial-gradient(120% 140% at 0% 0%, #8A0400 0%, #2A0605 45%, #0D0D0D 100%); }
.ac-hero > div { max-width: 460px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.ac-hero__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font: 700 11px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ac-hero__pill i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D; }
.ac-hero h2 { margin: 0; font: 700 clamp(24px, 2.6vw, 30px)/1.2 'Outfit', sans-serif; }
.ac-hero p { margin: 0; color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.6; }
.ac-hero__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; height: 46px; padding: 0 22px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #FFF; font: 700 14px 'Manrope', sans-serif; }
.ac-hero__btn:hover { background: var(--red); border-color: var(--red); color: #FFF; }
.ac-hero__btn .ic { width: 16px; height: 16px; }
.ac-hero__ic { flex: none; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.ac-hero__ic .ic { width: 64px; height: 64px; color: #FFF; stroke-width: 1.4; }
.ac-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ac-quick a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; background: #FFF; border: 1px solid #E8E9EA; border-radius: 10px; font: 600 14px 'Manrope', sans-serif; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: border-color .2s, box-shadow .2s, transform .2s; }
.ac-quick a:hover { border-color: var(--red); color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.ac-quick .ic { width: 20px; height: 20px; color: var(--ink); }
.ac-card { background: #FFF; border: 1px solid #E8E9EA; border-radius: 14px; padding: clamp(18px, 2.4vw, 24px); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ac-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ac-card__head h2, .ac-h2 { margin: 0; font: 700 19px 'Outfit', sans-serif; }
.ac-h2 { margin-bottom: 4px; }
.ac-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 14px 'Manrope', sans-serif; color: var(--ink); }
.ac-link .ic { width: 15px; height: 15px; }
.ac-link:hover { color: var(--red); }
.ac-link--muted { color: #77736F; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--ink); color: #FFF; font: 700 14px 'Manrope', sans-serif; cursor: pointer; }
.ac-btn:hover { background: var(--red); color: #FFF; }
.ac-btn--line { background: #FFF; color: var(--ink); border: 1px solid var(--ink); }
.ac-btn--line:hover { background: var(--ink); color: #FFF; }
.ac-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 16px; border: 1px solid #EEEFF0; border-radius: 12px; }
.ac-card > .ac-empty { border: 0; }
.ac-card__head + div .ac-empty, [data-recent] .ac-empty { border: 1px solid #EEEFF0; }
.ac-empty .ic { width: 56px; height: 56px; color: #C9CBCE; stroke-width: 1.4; margin-bottom: 6px; }
.ac-empty strong { font: 700 19px 'Outfit', sans-serif; }
.ac-empty span { color: #6E6A66; font-size: 14px; }
.ac-empty .ac-btn { margin-top: 12px; }
.ac-ord { border: 1px solid #EEEFF0; border-radius: 10px; padding: 14px 16px; }
.ac-ord + .ac-ord { margin-top: 10px; }
.ac-ord__top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ac-ord__top > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.ac-ord__top strong { font: 700 15px 'Outfit', sans-serif; }
.ac-ord .ord__more { margin-top: 14px; padding-top: 14px; border-top: 1px solid #EEEFF0; }
.ac-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ac-card .prof { max-width: 520px; }
.ac-card .fld input, .ac-card .fld select, .ac-card .fld textarea { border-radius: 8px; }
.ac-track { display: flex; align-items: flex-end; gap: 12px; max-width: 520px; }
.ac-track .fld { flex: 1; margin: 0; }
.ac-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ac-chips button { height: 32px; padding: 0 12px; border: 1px solid #E0E1E2; border-radius: 999px; background: #FFF; font: 600 12.5px 'Manrope', sans-serif; cursor: pointer; }
.ac-chips button:hover { border-color: var(--ink); }
[data-tr-res] .trk { margin-top: 18px; }
.ac-card .adr { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ac-card .adr__item { border-radius: 10px; border-color: #EEEFF0; }
.adr__act { display: flex; gap: 16px; margin-top: 6px; }
[data-adr-form] .prof { background: #FFF; border: 1px solid #E8E9EA; border-radius: 14px; padding: 24px; max-width: none; }
.ac-foot { background: #FFF; border-top: 1px solid #E8E9EA; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; color: #6E6A66; }
.ac-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.ac-foot a { color: #6E6A66; } .ac-foot a:hover { color: var(--ink); }
.acct-top { display: none !important; }
@media (max-width: 860px) {
  .ac-top__in { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 0; gap: 10px 16px; }
  .ac-top__logo { order: 1; } .ac-me { order: 2; margin-left: auto; }
  .ac-nav { order: 3; flex: 0 0 100%; justify-content: flex-start; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 10px; }
  .ac-nav::-webkit-scrollbar { display: none; }
  .ac-me__btn span { display: none; }
  .ac-main { padding-top: 22px; gap: 16px; }
  .ac-hero__ic { display: none; }
  .ac-quick { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac-quick a { height: 50px; font-size: 13px; }
  .ac-track { flex-direction: column; align-items: stretch; }
}
.ac-btn, .ac-hero__btn, .ac-chips button { border-radius: 8px !important; } .ac-chips button { border-radius: 999px !important; } .ac-me__btn, .ac-link, .ac-me__menu button { border-radius: 6px !important; }
.ac-row[hidden] { display: none !important; }
.ac-card .ac-h2, .ac-card .prof h2 { text-transform: none; letter-spacing: 0; font-size: 19px; }
/* Store header: account menu for logged-in customers (desktop) */
.me-dd { display: none; }
@media (min-width: 761px) {
  .hdr__right { position: relative; }
  .me-dd { display: block; position: absolute; right: 30px; top: calc(100% + 6px); width: 230px; background: #FFF; border: 1px solid #E8E9EA; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.1); padding: 6px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
  .me-dd::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .me-dd.is-open { opacity: 1; visibility: visible; transform: none; }
  .me-dd__hi { padding: 12px 12px 10px; font: 700 14px 'Outfit', sans-serif; border-bottom: 1px solid #EEE; margin-bottom: 4px; }
  .me-dd a, .me-dd button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 6px !important; font: 500 14px 'Manrope', sans-serif; color: var(--ink); text-align: left; cursor: pointer; text-transform: none; letter-spacing: 0; }
  .me-dd a:hover, .me-dd button:hover { background: #F5F6F7; color: var(--ink); }
  .me-dd .ic { width: 16px; height: 16px; color: #77736F; }
  .me-dd hr { border: 0; border-top: 1px solid #EEE; margin: 4px 0; }
}

/* Rogrip Squad */
.ac-hero__pill.is-on i { background: #3DDC84; }
.sq-back { align-self: flex-start; font-weight: 500; color: #4A4744; }
.sq-what p { margin: 0; font-size: 14px; line-height: 1.7; color: #4A4744; }
.sq-what[hidden] { display: none; }
.sq-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sq-stat { background: #FFF; border: 1px solid #E8E9EA; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.sq-stat span { font-size: 12.5px; color: #6E6A66; }
.sq-stat b { font: 700 20px 'Outfit', sans-serif; }
.sq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sq-links .ac-row { margin-top: 16px; }
.sq-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 16px 18px; border-radius: 12px; background: #FFF8E6; border: 1px solid #F3DFA6; color: #7A5300; font-size: 13.5px; line-height: 1.55; }
.sq-note b { flex: 0 0 100%; font-size: 15px; color: #6A4700; }
.sq-note span { flex: 1; min-width: 240px; }
.sq-note em { font-style: normal; font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px dashed #D9B14A; border-radius: 8px; }
.sq-note--ok { background: #EEF8F2; border-color: #CFEBDB; color: #17643E; } .sq-note--ok b { color: #115232; }
.sq-note--bad { background: #FFF1F1; border-color: #F6CACA; color: #8A1A1A; } .sq-note--bad b { color: #A30F0F; }
.sq-code { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0 4px; font-size: 14px; color: #4A4744; }
.sq-code b { font: 700 18px 'Outfit', sans-serif; letter-spacing: .12em; color: var(--ink); padding: 6px 14px; border: 1px dashed #CFCFCD; border-radius: 8px; background: #FAFAF9; }
.sq-code b.is-empty { letter-spacing: 0; color: #B5B1AD; }
.sq-copy { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E0E1E2; background: #FFF; border-radius: 8px !important; cursor: pointer; }
.sq-copy .ic { width: 17px; height: 17px; }
.sq-copy.is-done { border-color: #1E9E5A; color: #1E9E5A; }
.sq-info { margin: 14px 0; padding: 12px 14px; background: #F3F6FB; border-radius: 8px; font-size: 13px; color: #3C4A5E; text-align: center; }
.sq-share { text-align: center; margin: 10px 0 0; }
.sq-req { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sq-req input { height: 44px; width: min(320px, 100%); border: 1px solid #DADBDC; border-radius: 8px; padding: 0 14px; font: 600 14px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sq-req input:disabled, .sq-req button:disabled { opacity: .55; cursor: not-allowed; }
.sq-tbl > div { display: grid; grid-template-columns: 1.2fr 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EEEFF0; font-size: 14px; }
.sq-tbl > div:first-child { border-top: 0; }
.sq-tbl b { text-align: right; min-width: 80px; }
@media (max-width: 860px) { .sq-stats { grid-template-columns: 1fr 1fr; } .sq-grid { grid-template-columns: 1fr; } .sq-tbl > div { grid-template-columns: 1fr auto; } }
.sq-req + .sub { text-align: center; margin-top: 10px; }
/* Login page inside the account area */
.ac-back { margin-left: auto; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px !important; font: 600 13px 'Manrope', sans-serif; color: var(--ink); }
.ac-back:hover { background: var(--ink); color: #FFF; }
body.is-acct .auth { flex: 1; background: transparent; display: flex; align-items: flex-start; justify-content: center; }
body.is-acct .auth__card { width: 100%; }
@media (max-width: 860px) { .ac-back { height: 34px; padding: 0 12px; font-size: 12.5px; } body.is-acct [data-account] > .ac-top .ac-top__in { padding-bottom: 10px; } }
body.is-acct .auth__logo { display: none; }
html:has(body.is-acct) { background: #F5F6F7; }
@media (max-width: 860px) { .ac-back { order: 2; margin-left: auto; } body.is-acct [data-account] > .ac-top .ac-top__in { padding-top: 10px; padding-bottom: 10px; } }

/* Quick add, Blakely style: a soft white band along the bottom of the picture, plain size boxes */
.card .card__quick { left: 0; right: 0; bottom: 0; padding: 16px 8px; gap: 12px; align-items: center; text-align: center; background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; border-radius: 0; box-shadow: none; }
.card .card__qt { font-size: 11px; letter-spacing: .08em; }
.card .card__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.card .card__sizes button { width: 40px; height: 32px; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0 !important; background: none; color: var(--ink); font-size: 13px; font-weight: 600; transition: background .15s, color .15s; }
.card .card__sizes button:hover:not(:disabled) { background: none; color: var(--ink); border-bottom-color: var(--ink); }
.card .card__sizes button.is-added { background: var(--ink); color: #FFF; border-bottom-color: var(--ink); }
.card .card__sizes button:disabled { border: 1px solid var(--ink); opacity: .5; text-decoration: none; color: var(--ink); background: linear-gradient(to top right, transparent calc(50% - .6px), #9a9a9a 50%, transparent calc(50% + .6px)), linear-gradient(to bottom right, transparent calc(50% - .6px), #9a9a9a 50%, transparent calc(50% + .6px)); }

/* Product card body: name, colour + dots, price and a clear Add to bag button */
.card__plus { display: none !important; }
.card .card__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px 0; }
.card .card__name { font-size: var(--fs-md, 14px); font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__cl { display: flex; align-items: center; gap: 6px; min-height: 22px; flex-wrap: wrap; }
.card__cl .card__line { font-size: 12.5px; color: var(--stone); }
.card .card__sw { margin-left: 0; gap: 0; }
.card .card__sw button { width: 22px; height: 22px; }
.card .card__sw span { width: 13px; height: 13px; }
.card__more { font-size: 12px; color: var(--stone); white-space: nowrap; } .card__more:hover { color: var(--ink); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.card__foot .card__price { font-weight: 700; }
.card__add { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 9px; border: 1px solid var(--ink) !important; border-radius: 99px !important; background: #FFF; color: var(--ink); font: 700 12px 'Outfit', sans-serif; letter-spacing: .02em; cursor: pointer; transition: background .15s, color .15s; flex: none; }
.card__add .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.card__add:hover, .card.is-quick .card__add { background: var(--ink); color: #FFF; }
.card__soldout { font-size: 12px; font-weight: 600; color: var(--stone); }
@media (hover: hover) { .card:hover .card__quick { display: flex; } }
@media (max-width: 760px) {
  .card .card__body { padding: 8px 0 0; }
  .card__add { height: 30px; padding: 0 9px 0 7px; font-size: 11.5px; }
  .card .card__quick { padding: 12px 4px; gap: 8px; } .card .card__sizes { gap: 4px; } .card .card__sizes button { width: 36px; height: 30px; }
}
/* Add to bag: just the bag-with-plus icon, no border */
.card .card__add { width: 36px; height: 36px; padding: 0; justify-content: center; border: 0 !important; border-radius: 0 !important; background: none; color: var(--ink); margin-right: -6px; }
.card .card__add .ic { width: 22px; height: 22px; stroke-width: 1.6; }
.card .card__add:hover, .card.is-quick .card__add { background: none; color: var(--red); }
@media (max-width: 760px) { .card .card__add { width: 34px; height: 34px; padding: 0; } }

/* Five products per row on a computer */
.grid--5, .grid--4, .page__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) { .grid--5, .grid--4, .page__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grid--5, .grid--4, .page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--5, .grid--4, .page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Creator Circle banner picture (set in the dashboard) */
.ac-hero.ac-hero--img { background-size: cover; background-position: center; }
/* Category tiles: the pictures already carry their own words, so the name and Shop now sit low, on a soft shadow */
.feature--cat .feature__text { top: auto !important; bottom: 0; left: 0; right: 0; transform: none !important; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  padding: 44px 16px 16px; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); text-align: left; }
.feature--cat .feature__text > span:first-child { font-size: clamp(14px, 1.2vw, 18px); letter-spacing: .08em; text-shadow: none; }
.feature--cat .feature__text .obtn { flex: none; margin: 0; }
@media (max-width: 760px) { .feature--cat .feature__text { flex-direction: column; align-items: flex-start; gap: 8px; padding: 36px 12px 12px; } }