/* 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; } }
.feature--cat .feature__text--btn { justify-content: center; align-items: center; }
@media (max-width: 760px) { .feature--cat .feature__text--btn { align-items: center; } }

/* Product rows on the home page: one sliding row, View all */
.sec__head { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 var(--pad); }
.sec__head .sec__title { margin-bottom: clamp(16px, 12px + 1vw, 26px); }
.sec__all { position: absolute; right: var(--pad); top: 2px; font: 600 12px 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.prow { position: relative; }
.prow__t { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--g)) / 5); gap: var(--g); --g: clamp(8px, 1.1vw, 16px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); padding: 0 var(--pad); scrollbar-width: none; }
.prow__t::-webkit-scrollbar { display: none; }
.prow__t > .card { scroll-snap-align: start; min-width: 0; }
.prow__b { position: absolute; top: 38%; z-index: 4; width: 42px; height: 42px; border-radius: 50% !important; border: 0; background: #fff; color: var(--ink); font-size: 26px; line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,.14); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.prow:hover .prow__b:not([hidden]) { opacity: 1; } .prow__b--l { left: calc(var(--pad) - 14px); } .prow__b--r { right: calc(var(--pad) - 14px); }
@media (max-width: 1280px) { .prow__t { grid-auto-columns: calc((100% - 3 * var(--g)) / 4); } }
@media (max-width: 1100px) { .prow__t { grid-auto-columns: calc((100% - 2 * var(--g)) / 3); } }
@media (max-width: 760px) { .prow__t { grid-auto-columns: 44%; } .prow__b { display: none; } .sec__all { font-size: 11px; } }
@media (hover: none) { .prow__b { display: none; } }
/* Card polish */
.card .card__media { overflow: hidden; }
.card .card__img { transition: transform .5s ease, opacity .3s; }
@media (hover: hover) { .card:hover .card__img:not(.card__img--back) { transform: scale(1.03); } }
.card .card__wish { top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.88); }
.card .card__name { font-size: 14px; font-weight: 500; color: var(--ink); }
.card .card__foot .card__price { font-size: 14px; }
.card .card__foot .card__price s { color: #8C8884; font-weight: 400; }
.card .card__foot .card__price .is-sale { color: var(--red); }
.badge { border-radius: 3px; padding: 4px 7px; }
.prow__t > .card { display: flex; flex-direction: column; } .prow__t > .card .card__body { flex: 1; } .prow__t > .card .card__foot { margin-top: auto; }
.card .card__cl { min-height: 22px; }

/* Product card as a soft card: white panel, light shadow, rounded corners; lifts a little on hover */
.card { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(17,17,17,.05), 0 4px 14px rgba(17,17,17,.06); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
@media (hover: hover) { .card:hover { box-shadow: 0 2px 4px rgba(17,17,17,.06), 0 12px 28px rgba(17,17,17,.10); transform: translateY(-2px); } }
.card .card__media { border-radius: 0; }
.card .card__body { padding: 10px 12px 12px !important; }
.card .card__foot { margin-right: -4px; }
.prow__t { padding-top: 6px; padding-bottom: 14px; }
@media (max-width: 760px) { .card { border-radius: 10px; } .card .card__body { padding: 8px 10px 10px !important; } }
.card { border-radius: 2px !important; }
@media (max-width: 760px) { .card { border-radius: 2px !important; } }

/* Card actions: round icon buttons in a column at the top right of the picture (slide in on hover; always shown on phones) */
.card__acts { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.card__act { position: relative; width: 38px; height: 38px; border-radius: 50% !important; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: background .2s, color .2s, transform .25s ease, opacity .25s ease; padding: 0; }
.card__act .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.card__act:hover { background: var(--ink); color: #fff; }
.card .card__wish.card__act { position: relative; top: auto; right: auto; }
.card__wish[aria-pressed="true"] { color: var(--red); } .card__wish[aria-pressed="true"] .ic { fill: var(--red); stroke: var(--red); }
.card.is-quick [data-quick-open] { background: var(--ink); color: #fff; }
@media (hover: hover) {
  .card__act { opacity: 0; transform: translateX(14px); }
  .card:hover .card__act, .card:focus-within .card__act, .card__wish[aria-pressed="true"] { opacity: 1; transform: none; }
  .card:hover .card__act:nth-child(2) { transition-delay: .04s; } .card:hover .card__act:nth-child(3) { transition-delay: .08s; }
  .card__act[data-tip]::after { content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: #fff;
    font: 600 11px 'Outfit', sans-serif; padding: 5px 8px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .card__act[data-tip]:hover::after { opacity: 1; }
}
@media (max-width: 760px) { .card__acts { top: 6px; right: 6px; gap: 6px; } .card__act { width: 32px; height: 32px; } .card__act .ic { width: 16px; height: 16px; } .card__acts a.card__act { display: none; } }
.card .card__wish.card__act { width: 38px; height: 38px; background: #fff; }
.card .card__wish.card__act:hover { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .card .card__wish.card__act { width: 32px; height: 32px; } }

/* Card action icons: bigger buttons, clean line icons */
.card__acts { gap: 10px; top: 12px; right: 12px; }
.card__act, .card .card__wish.card__act { width: 44px; height: 44px; box-shadow: 0 3px 12px rgba(0,0,0,.14); }
.card__act .ic { width: 20px; height: 20px; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .card__acts { top: 8px; right: 8px; gap: 8px; } .card__act, .card .card__wish.card__act { width: 38px; height: 38px; } .card__act .ic { width: 18px; height: 18px; } }

/* Add to bag back at the bottom right, next to the price (clean bag icon) */
.card .card__add { width: 40px; height: 40px; margin-right: -8px; }
.card .card__add .ic { width: 22px; height: 22px; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Shop and category pages: one toolbar (count, category pills | Filter, Sort), filter panel under it, 4 columns, no boxes */
.lpage { padding: 18px var(--pad) 0; }
.ltool { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ltool__l { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.ltool__n { font: 600 12px 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding-right: 14px; border-right: 1px solid var(--line); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 7px 14px; border-radius: 999px; background: #F2F2F2; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1; }
.pill:hover { background: #E6E6E6; } .pill.is-on { background: var(--ink); color: #fff; }
.ltool__r { display: flex; align-items: center; gap: 14px; }
.ltool__f { background: none; border: 1px solid var(--line) !important; padding: 8px 14px; font: 600 12px 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.ltool__f[aria-expanded="true"] { border-color: var(--ink) !important; }
.fpanel { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fpanel[hidden] { display: none; }
.fpanel__g { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lgrid { padding-top: 24px; }
.grid.grid--shop { padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 2.4vw, 40px) clamp(10px, 1.3vw, 20px); }
@media (max-width: 1100px) { .grid.grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .grid.grid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpage { padding-top: 12px; } .ltool__l { width: 100%; } .ltool__n { border: 0; padding: 0; }
  .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .pills::-webkit-scrollbar { display: none; } .pill { flex: none; }
  .ltool__r { width: 100%; justify-content: space-between; }
}
/* No boxes around product cards: picture, then name and price */
.card { background: none !important; box-shadow: none !important; transform: none !important; }
.card .card__body { padding: 10px 0 0 !important; }
.prow__t { padding-bottom: 0; }

/* Blakely home on phones: feature picture first, then its products in one swipe row */
@media (max-width: 760px) {
  .sec--feature .grid--2 { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0; scrollbar-width: none; }
  .sec--feature .grid--2::-webkit-scrollbar { display: none; }
  .sec--feature .grid--2 > .card { scroll-snap-align: start; }
  .sec--feature .feature { min-height: 0; aspect-ratio: 4 / 5; }
}

/* Worn by you */
.worn { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 8px) / 5); gap: 8px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.worn::-webkit-scrollbar { display: none; }
.worn__i { display: flex; flex-direction: column; gap: 3px; color: var(--ink); scroll-snap-align: start; min-width: 0; }
.worn__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #F2F2F2; margin-bottom: 6px; } .worn__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.worn__i b { font-size: 12px; font-weight: 600; } .worn__i > span:not(.worn__img) { font-size: 11px; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Community */
.comm { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 4px) / 3); gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.comm::-webkit-scrollbar { display: none; }
.comm__i { position: relative; display: block; aspect-ratio: 6 / 5; overflow: hidden; background: #222; scroll-snap-align: start; }
.comm__i img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: transform .6s ease; }
@media (hover: hover) { .comm__i:hover img { transform: scale(1.03); } }
.comm__t { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.comm__t b { font: 700 13px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; } .comm__t em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #fff; padding-bottom: 1px; }
@media (max-width: 760px) { .worn { grid-auto-columns: 44%; padding: 0 10px; } .comm { grid-auto-columns: 100%; } .comm__i { aspect-ratio: 4 / 5; } }

/* ===== Product page, Blakely layout ===== */
.pp--bk { gap: 40px; }
.pp--bk .pg { gap: 6px; }
.pp--bk .pi { gap: 0; max-width: 440px; }
.bk-crumbs { display: flex; gap: 6px; font-size: 11px; color: var(--stone); margin-bottom: 10px; } .bk-crumbs a { color: var(--stone); } .bk-crumbs a:hover { color: var(--ink); }
.bk-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bk-title h1 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: 0; text-transform: none; }
.bk-wish { flex: none; width: 34px; height: 34px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; }
.bk-wish .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; } .bk-wish[aria-pressed="true"] { color: var(--red); } .bk-wish[aria-pressed="true"] .ic { fill: var(--red); }
.bk-price { display: block; font-size: 14px; font-weight: 600; margin: 6px 0 12px; } .bk-price .is-sale { color: var(--red); } .bk-price s { color: var(--stone); font-weight: 400; margin-left: 4px; }
.bk-short { font-size: 13px; line-height: 1.6; color: var(--text2, #444); margin: 0 0 16px; }
.bk-cols { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.bk-col input { position: absolute; opacity: 0; pointer-events: none; }
.bk-col span { display: block; width: 46px; height: 56px; border: 1px solid var(--line); cursor: pointer; overflow: hidden; background: #F2F2F2; }
.bk-col span img { width: 100%; height: 100%; object-fit: cover; display: block; } .bk-col span i { display: block; width: 100%; height: 100%; }
.bk-col input:checked + span { border: 1.5px solid var(--ink); }
.bk-colname { font-size: 13px; margin: 0 0 16px; }
.bk-sizehead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 8px; }
.bk-guide { background: none; border: 0; padding: 0; font-size: 12px; text-decoration: underline; cursor: pointer; color: var(--ink); }
.pp--bk .bk-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pp--bk .bk-sizes .psz span { min-width: 40px; height: 32px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--ink); font-size: 12px; font-weight: 600; background: #fff; }
.pp--bk .bk-sizes .psz input:checked + span { background: var(--ink); color: #fff; }
.pp--bk .bk-sizes .psz.is-out span { border-color: #DADADA; color: #B5B1AD; text-decoration: line-through; }
.bk-add { width: 100%; height: 46px; border: 0; background: #111; color: #fff; font: 600 13px 'Outfit', sans-serif; letter-spacing: .04em; cursor: pointer; }
.bk-add:hover { background: #000; } .bk-add:disabled { background: #9A9A9A; cursor: not-allowed; }
.bk-bar { margin: 12px 0 26px; padding: 11px 12px; background: #EDEDED; text-align: center; font-size: 12px; }
.ctl { border-top: 0; margin-bottom: 22px; } .ctl h2 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; margin: 0 0 14px; }
.ctl__i { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ctl__i:last-child { border-bottom: 0; }
.ctl__img { flex: none; width: 80px; aspect-ratio: 4 / 5; background: #F2F2F2; overflow: hidden; } .ctl__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctl__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ctl__t { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .ctl__t b { font-weight: 600; color: var(--ink); } .ctl__b small { font-size: 11px; color: var(--stone); }
.ctl__a { display: flex; gap: 8px; margin-top: auto; } .ctl__a select { width: 74px; height: 30px; border: 1px solid var(--line); font-size: 12px; padding: 0 6px; background: #fff; }
.ctl__a button { flex: 1; height: 30px; border: 1px solid var(--ink); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; } .ctl__a button:hover { background: var(--ink); color: #fff; }
.bk-acc details { border-top: 1px solid var(--line); } .bk-acc details:last-child { border-bottom: 1px solid var(--line); }
.bk-acc summary { list-style: none; cursor: pointer; padding: 12px 0; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; position: relative; }
.bk-acc summary::-webkit-details-marker { display: none; } .bk-acc summary::after { content: "⌄"; position: absolute; right: 0; top: 8px; font-size: 14px; color: var(--stone); }
.bk-acc details[open] summary::after { content: "⌃"; top: 12px; } .bk-acc .acc__body { font-size: 13px; line-height: 1.65; padding: 0 0 16px; color: #444; }
.bk-more .bk-tabs { display: flex; justify-content: center; gap: 22px; margin-bottom: 20px; }
.bk-tabs button { background: none; border: 0; padding: 0 0 4px; font: 600 11px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #A0A0A0; cursor: pointer; border-bottom: 1px solid transparent; }
.bk-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.bk-none { text-align: center; color: var(--stone); font-size: 13px; padding: 20px 0; }
.bk-rev { padding-left: var(--pad); padding-right: var(--pad); max-width: 1100px; margin: 0 auto; }
.rv__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 22px; border-bottom: 1px solid var(--line); }
.rv__sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rv__sum b { font-size: 28px; font-weight: 700; } .rv__sum small { width: 100%; font-size: 12px; color: var(--stone); }
.rv__st { color: var(--ink); letter-spacing: 2px; font-size: 15px; }
.rv__wr { width: auto; padding: 0 22px; height: 42px; }
.rv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.rv__who { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .rv__av { width: 40px; height: 40px; border-radius: 50%; background: #EDEDED; display: grid; place-items: center; font-weight: 700; margin-bottom: 4px; }
.rv__ver { color: #2E7D32; font-size: 11px; } .rv__body p { font-size: 13px; line-height: 1.6; margin: 6px 0; } .rv__date { font-size: 11px; color: var(--stone); }
.rv__pager { display: flex; justify-content: center; gap: 6px; padding: 22px 0; } .rv__pg { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 13px; } .rv__pg.is-on { border-bottom: 1px solid var(--ink); font-weight: 700; }
.bk-wr__stars { display: flex; gap: 4px; font-size: 28px; } .bk-wr__stars input { position: absolute; opacity: 0; } .bk-wr__stars span { cursor: pointer; color: #CCC; }
.bk-wr__stars label:has(input:checked) span, .bk-wr__stars label:has(~ label input:checked) span { color: var(--ink); }
.bk-wr .guide__in { display: flex; flex-direction: column; gap: 14px; } .bk-wr__msg { font-size: 13px; margin: 0; }
@media (max-width: 760px) {
  .pp--bk .pg__img { flex: 0 0 100%; }
  .pp--bk .pi { padding: 0 14px; } .bk-title h1 { font-size: 18px; }
  .rv { grid-template-columns: 1fr; gap: 10px; } .rv__who { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; } .rv__av { margin: 0; }
  .rv__top { flex-direction: column; align-items: stretch; } .rv__wr { width: 100%; }
}
.pp--bk .buy { display: flex; flex-direction: column; gap: 0; }
.pp--bk .buy__low:empty { display: none; }
.pp--bk .buy__added { margin-top: 10px; }

/* ===== Collection page, Blakely layout ===== */
.chead { padding: 22px var(--pad) 14px; text-align: left; }
.chead h1 { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.chead p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #555; max-width: 760px; }
.cbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 4px; position: relative; }
.cbar__l { display: flex; align-items: center; gap: 22px; }
.cbar__t, .cdd summary, .cbar__sort label, .cbar__m { font: 600 11px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cdd { position: relative; } .cdd summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; } .cdd summary::-webkit-details-marker { display: none; }
.cdd summary::after { content: "⌄"; font-size: 13px; line-height: 1; margin-top: -4px; } .cdd[open] summary::after { content: "⌃"; margin-top: 4px; }
.cdd__p { position: absolute; top: calc(100% + 12px); left: -12px; z-index: 20; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.08); padding: 14px; display: flex; flex-wrap: wrap; gap: 8px; min-width: 240px; }
.ccol { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 8px; border: 1px solid transparent; color: var(--ink); } .ccol i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } .ccol.is-on { border-color: var(--ink); }
.cbar__clear { font-size: 11px; text-decoration: underline; color: var(--stone); }
.cbar__sort { display: flex; align-items: center; gap: 8px; } .cbar__sort select { border: 0; font-size: 12px; background: none; padding: 2px 0; cursor: pointer; }
.cbar__m { display: none; background: none; border: 0; padding: 0; cursor: pointer; }
.cpanel { padding: 14px var(--pad); }
.cgrid { padding-top: 0; }
.grid.grid--coll { padding: 0 var(--pad); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 4px; }
.cmore { padding-top: 40px; }
@media (max-width: 760px) {
  .chead { padding: 16px 12px 10px; } .chead h1 { font-size: 17px; }
  .cbar { padding: 10px 12px; } .cbar__l, .cbar > .cbar__sort { display: none; } .cbar__m { display: block; }
  .cpanel { padding: 12px; flex-direction: column; align-items: flex-start; }
  .grid.grid--coll { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 4px; padding: 0; }
  .grid--coll .card .card__body { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ===== Blakely exact (measured on blakelyclothing.com, 1440 and 390 wide) ===== */
.is-home .sec, .is-home .hero + .sec { padding-top: 12px; }
.sec__title, .sec__head .sec__title { font-size: 14px !important; font-weight: 700; letter-spacing: .5px !important; text-align: center; padding: 8px 0; margin: 0 !important; text-transform: uppercase; }
.sec__head { justify-content: center; }
/* sliding rows: full width, 5 cards, 4px apart; phone 2 cards */
.prow__t { --g: 4px; gap: 4px; padding: 0 !important; grid-auto-columns: calc((100% - 16px) / 5) !important; }
@media (max-width: 760px) { .prow__t { grid-auto-columns: calc((100% - 4px) / 2) !important; } }
/* card */
.card, .card .card__media { border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.card .card__media { aspect-ratio: 100 / 127; }
.card .card__img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .card:hover .card__img:not(.card__img--back) { transform: none; } }
.card .card__wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border-radius: 50% !important; background: none; border: 0; box-shadow: none; color: #6B7280; display: grid; place-items: center; padding: 0; cursor: pointer; }
.card .card__wish .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; }
.card .card__wish:hover { background: #F3F4F6; color: #6B7280; }
.card .card__body { padding: 8px !important; }
.card .card__name { font-size: 14px; font-weight: 400; line-height: 1.375; color: #000; }
.card__cl .card__line, .card__more { font-size: 12px; color: #666565; }
.card .card__sw { margin-left: 6px; } .card .card__sw button { width: 16px; height: 16px; margin-left: -4px; padding: 0; border: 0; background: none; }
.card .card__sw span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #DBDAD8; }
.card .card__foot { margin: 0; display: flex; justify-content: space-between; align-items: center; }
.card .card__foot .card__price { font-size: 12px; font-weight: 600; } .card .card__foot .card__price b { font-weight: 600; }
.card .card__add { width: 20px; height: 20px; margin: 0; padding: 0; background: none !important; border: 0; color: #000; box-shadow: none; }
.card .card__add .ic { width: 20px; height: 20px; stroke-width: 1.5; }
.card .card__quick { background: rgba(255,255,255,.7); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
@media (hover: hover) { .card .card__add { pointer-events: none; } }
@media (max-width: 760px) {
  .card .card__name { font-size: 11px; } .card__cl .card__line, .card__more { font-size: 10px; }
  .card .card__sw button, .card .card__sw span { width: 12px; height: 12px; }
}
/* feature: big picture left (60%), 2 x 2 products right, page sides 100px */
.sec--feature { display: grid !important; grid-template-columns: 60fr 40fr; gap: 8px; padding: 12px 100px 0 !important; align-items: start; }
.sec--feature .feature { aspect-ratio: 732 / 760; min-height: 0; border-radius: 0 !important; }
.sec--feature .grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 7px; }
.feature__text > span:first-child { font-size: 20px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
@media (max-width: 1100px) { .sec--feature { padding: 12px 20px 0 !important; } }
@media (max-width: 760px) {
  .sec--feature { grid-template-columns: 1fr; padding: 12px 0 0 !important; gap: 8px; }
  .sec--feature .feature { aspect-ratio: 390 / 312; }
  .sec--feature .grid--2 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 4px) / 2); gap: 4px; overflow-x: auto; }
}
/* promo: words left, picture right */
.promo { display: grid !important; grid-template-columns: 1fr 2fr; align-items: center; gap: 0; border-radius: 0 !important; background: none; }
.promo__text { padding: 0 48px; } .promo__text h2 { font-size: 28px; } .promo__text p { font-size: 14px; max-width: 336px; }
.promo__img { aspect-ratio: 945 / 567; } .promo__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .promo { grid-template-columns: 1fr; text-align: center; } .promo__text { padding: 20px 48px; } .promo__text p { margin: 0 auto; } .promo__img { aspect-ratio: 390 / 234; } }
/* worn by you */
.worn { padding: 0 !important; gap: 4px; grid-auto-columns: calc((100% - 16px) / 5); }
.worn__img { aspect-ratio: 281 / 357; margin-bottom: 4px; }
.worn__i { padding: 0 0 8px; } .worn__i b { font-size: 14px; font-weight: 400; } .worn__i > span:not(.worn__img) { font-size: 12px; font-weight: 300; color: #000; }
@media (max-width: 760px) { .worn { grid-auto-columns: calc((100% - 4px) / 2) !important; } .worn__i b { font-size: 13px; } }
/* community */
.comm { gap: 8px; grid-auto-columns: calc((100% - 16px) / 3); }
.comm__i { aspect-ratio: 470 / 564; }
.comm__t b { font: 600 14px inherit; font-size: 14px; letter-spacing: .5px; } .comm__t em { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (max-width: 760px) { .comm { grid-auto-columns: 76% !important; padding: 0 12%; scroll-padding: 0 12%; } .comm__i { aspect-ratio: 296 / 356 !important; scroll-snap-align: center; } }
/* collection */
.chead { padding: 24px 100px 0; } .chead h1 { font-size: 24px; letter-spacing: .5px; margin: 0; } .chead p { font-size: 14px; color: #000; max-width: none; letter-spacing: .5px; }
.cbar { padding: 40px 100px 16px; border: 0; } .cbar__t, .cdd summary, .cbar__sort label, .cbar__m { font: 400 14px inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.grid.grid--coll { padding: 0 !important; gap: 10px 2px !important; }
@media (max-width: 760px) { .chead { padding: 16px 20px 0; } .chead h1 { font-size: 20px; } .cbar { padding: 32px 20px 16px; } .cbar__m { font-size: 13px; } }
/* product page: 2 x 2 pictures left, 348px buy column */
@media (min-width: 761px) {
  .pp.pp--bk { display: grid; grid-template-columns: minmax(0, 816px) 348px; gap: 41px; padding: 24px 100px 0; max-width: none; justify-content: start; }
  .pp--bk .pg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pp--bk .pg__img { aspect-ratio: 404 / 534; } .pp--bk .pg__img img { width: 100%; height: 100%; object-fit: cover; }
  .pp--bk .pi { max-width: 348px; padding-top: 53px; }
}
.pp--bk .pg__img, .pp--bk .pg__img img { border-radius: 0 !important; }
.bk-title h1 { font-size: 26px; font-weight: 700; }
.bk-price { font-size: 14px; font-weight: 700; } .bk-short { font-size: 14px; color: #000; }
.bk-cols { gap: 11px; } .bk-col span { width: 45px; height: 60px; }
.bk-colname, .bk-sizehead { font-size: 14px; }
.pp--bk .bk-sizes { gap: 8px; } .pp--bk .bk-sizes .psz span { width: 40px; min-width: 40px; height: 32px; padding: 0; border: .8px solid #171717; font-size: 14px; font-weight: 700; border-radius: 0 !important; }
.bk-add { height: 48px; background: #171717; font-size: 16px; font-weight: 400; letter-spacing: 0; border-radius: 0 !important; }
.bk-bar { min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 8px 48px; }
.ctl h2 { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 8px 0; }
.ctl__img { width: 115px; aspect-ratio: 115 / 153; flex: none; } .ctl__t b { font-size: 14px; font-weight: 700; }
.ctl__a button { min-width: 145px; height: 34px; font-size: 14px; font-weight: 700; background: #fff; color: #000; border: 1px solid #000; border-radius: 0 !important; }
.pg__dots { display: none; }
@media (max-width: 760px) {
  .pp--bk .pg { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; }
  .pp--bk .pg::-webkit-scrollbar { display: none; }
  .pp--bk .pg__img { flex: 0 0 100%; aspect-ratio: 390 / 496; scroll-snap-align: start; } .pp--bk .pg__img img { width: 100%; height: 100%; object-fit: cover; }
  .pp--bk .pi { padding: 16px 20px 0; } .bk-title h1 { font-size: 18px; }
  .pg__dots { display: flex; justify-content: center; gap: 8px; margin: -20px 0 16px; position: relative; z-index: 2; }
  .pg__dots i { width: 6px; height: 4px; background: rgba(0,0,0,.25); transition: width .2s; } .pg__dots i.is-on { width: 20px; background: #000; }
}
/* category tiles fill the full width like Blakely rows (4px apart) */
.cats { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; gap: 4px !important; padding: 0 !important; }
.cats > a { aspect-ratio: 100 / 127; min-height: 0; border-radius: 0 !important; width: auto !important; max-width: none !important; }
@media (max-width: 760px) { .cats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* wide screens: pictures grow, whole page centred (no empty right side) */
@media (min-width: 761px) { .pp.pp--bk { grid-template-columns: minmax(0, 1fr) 348px; max-width: 1640px; margin: 0 auto; justify-content: stretch; } }
@media (min-width: 761px) and (max-width: 1100px) { .pp.pp--bk { padding: 24px 20px 0; gap: 24px; grid-template-columns: minmax(0, 1fr) 320px; } }
/* Product page, Blakely full width: pictures ~60%, buy column ~27% and sticky, 5% page sides */
@media (min-width: 761px) {
  .pp.pp--bk { grid-template-columns: minmax(0, 1fr) clamp(348px, 27vw, 520px); max-width: none; margin: 0; padding: 0 5vw; gap: 2vw; }
  .pp--bk .pg { gap: 4px; }
  .pp--bk .pi { max-width: none; position: sticky; top: 90px; align-self: start; padding-top: 0; }
}
.bk-styled { padding-top: 48px; } .bk-more { padding-top: 32px; }
@media (max-width: 760px) { .bk-styled { padding-top: 32px; } }
.ctl h2 { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; text-align: center; }
/* Reviews, Blakely layout */
.bk-rev { max-width: 1240px; }
.rv__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-bottom: 20px; }
.rv__sum { display: flex; flex-direction: column; gap: 2px; } .rv__sum > b { font-size: 26px; font-weight: 700; line-height: 1; }
.rv__st { display: inline-flex; gap: 1px; font-size: 14px; color: #CFCFCF; letter-spacing: 0; } .rv__st i { font-style: normal; } .rv__st i.on { color: #000; }
.rv__sum small { font-size: 12px; color: #666; }
.rv__qsum { max-width: 220px; }
.rv__q { display: flex; flex-direction: column; gap: 4px; max-width: 220px; margin: 10px 0; } .rv__q > small { font-size: 12px; font-weight: 600; }
.rv__qb { position: relative; height: 4px; background: #E5E5E5; } .rv__qb span { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; background: #000; border-radius: 50%; }
.rv__ql { display: flex; justify-content: space-between; } .rv__ql small { font-size: 10px; color: #666; }
.rv__btns { display: flex; flex-direction: column; gap: 8px; } .rv__wr { width: auto; padding: 0 22px; height: 40px; font-size: 13px; }
.rv__ask { background: none; border: 1px solid #000; height: 36px; padding: 0 18px; font-size: 13px; cursor: pointer; }
.rv__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid #E5E5E5; margin-bottom: 8px; }
.rv__tools { display: flex; align-items: center; gap: 18px; padding-bottom: 10px; }
.rv__sort { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rv__sort select { border: 0; background: none; font-size: 13px; cursor: pointer; }
.rv__search { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rv__search input { border: 0; border-bottom: 1px solid #E5E5E5; padding: 4px 0; font-size: 13px; outline: 0; width: 160px; background: none; }
.rv__tabs { display: flex; gap: 20px; } .rv__tabs button { background: none; border: 0; padding: 0 0 10px; font-size: 13px; cursor: pointer; color: #888; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rv__tabs button[aria-selected="true"] { color: #000; border-bottom-color: #000; }
.rv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid #F0F0F0; }
.rv__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; } .rv__who b { font-size: 13px; } .rv__who small { color: #666; font-size: 11px; }
.rv__av { width: 36px; height: 36px; border-radius: 50%; background: #F0F0F0; display: grid; place-items: center; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.rv__ver { color: #000 !important; } .rv__rec { color: #000 !important; }
.rv__hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .rv__date { font-size: 11px; color: #888; }
.rv__pn { display: block; font-size: 13px; margin: 6px 0 2px; } .rv__body p { font-size: 13px; line-height: 1.6; margin: 4px 0; } .rv__ans { color: #444; }
.rv__help { font-size: 11px; color: #666; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; } .rv__help button { background: none; border: 0; padding: 0; font-size: 11px; text-decoration: underline; cursor: pointer; color: #000; } .rv__help em { font-style: normal; }
.rv__pager { display: flex; justify-content: center; gap: 6px; padding: 26px 0; } .rv__pg { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 13px; } .rv__pg.is-on { font-weight: 700; text-decoration: underline; }
.bk-ql { display: flex; gap: 6px; } .bk-ql label { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; } .bk-ql input { position: absolute; opacity: 0; }
.bk-ql span { width: 100%; height: 32px; display: grid; place-items: center; border: 1px solid #DDD; font-size: 12px; } .bk-ql input:checked + span { background: #000; color: #fff; border-color: #000; } .bk-ql small { font-size: 10px; color: #666; min-height: 12px; }
.grid2c { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bk-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; }
@media (max-width: 760px) {
  .rv__top { grid-template-columns: 1fr; gap: 14px; } .rv__btns { flex-direction: row; } .rv__bar { flex-direction: column-reverse; align-items: stretch; } .rv__tools { justify-content: space-between; }
  .rv { grid-template-columns: 1fr; gap: 10px; } .rv__who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .rv__av { margin: 0; } .grid2c { grid-template-columns: 1fr; }
}
/* Newsletter band above the footer (Blakely) */
.nlband { background: #F2F2F2; padding: 26px 5vw; margin-top: 56px; }
.nlband__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1100px; margin: 0 auto; }
.nlband__t strong { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .nlband__t p { margin: 4px 0 0; font-size: 12px; color: #666; }
.nlband .news { flex: 0 1 460px; } .nlband .news__row { display: flex; } .nlband input { flex: 1; height: 40px; border: 0; border-bottom: 1px solid #000; background: none; padding: 0 4px; font-size: 13px; }
.nlband button { height: 40px; padding: 0 22px; border: 0; background: #000; color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; cursor: pointer; }
@media (max-width: 760px) { .nlband__in { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; } .nlband .news { flex: none; } }
/* reviews and newsletter band use the full page width (5% sides), like Blakely */
.bk-rev { max-width: none !important; margin: 0 !important; padding-left: 5vw !important; padding-right: 5vw !important; }
.nlband__in { max-width: none; }
/* Product page polish */
@media (min-width: 761px) { .pp.pp--bk { padding-top: 24px; } .pp--bk .pi { top: 96px; } }
.ctl__t span { white-space: nowrap; }
.nlband + .ftr, .nlband ~ .ftr { margin-top: 0 !important; }
@media (max-width: 760px) {
  .pp.pp--bk { gap: 0 !important; }
  .pg__dots { margin: -18px 0 0; height: 18px; align-items: flex-start; }
  .pp--bk .pi { padding-top: 18px; }
}
/* small gap at the screen edges for full-width rows */
.prow__t, .worn, .comm, .grid.grid--coll, .sec--feature .grid--2 { padding-left: 12px !important; padding-right: 12px !important; scroll-padding: 0 12px; }
.prow__t { grid-auto-columns: calc((100% - 40px) / 5) !important; } .worn { grid-auto-columns: calc((100% - 40px) / 5) !important; }
@media (max-width: 760px) {
  .prow__t, .worn, .comm, .grid.grid--coll, .sec--feature .grid--2 { padding-left: 8px !important; padding-right: 8px !important; }
  .prow__t, .worn, .sec--feature .grid--2 { grid-auto-columns: calc((100% - 20px) / 2) !important; }
}
.sec--feature .grid--2 { padding: 0 !important; } @media (max-width: 760px) { .sec--feature .grid--2 { padding: 0 8px !important; } }
/* rows: exactly 5 cards (2 on phones) inside the edge gap, no half card peeking on the right */
.prow__t, .worn { grid-auto-columns: calc((100% - 16px) / 5) !important; }
@media (max-width: 760px) { .prow__t, .worn, .sec--feature .grid--2 { grid-auto-columns: calc((100% - 4px) / 2) !important; } }
.prow__t::after, .worn::after { content: ""; width: 8px; }
@media (max-width: 760px) { .prow__t::after, .worn::after { width: 4px; } }
/* card bag button: modern rounded bag, larger */
.card .card__add { width: 34px; height: 34px; margin: -6px -6px -6px 0; display: grid; place-items: center; border-radius: 50% !important; transition: background .2s, color .2s; }
.card .card__add .ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .card:hover .card__add { background: #000; color: #fff; } .card:hover .card__add .ic { width: 22px; height: 22px; } }
@media (max-width: 760px) { .card .card__add { width: 32px; height: 32px; } .card .card__add .ic { width: 24px; height: 24px; } }
/* Phone quick add sheet (Blakely) */
.qs { position: fixed; inset: 0; z-index: 90; } .qs[hidden] { display: none; }
.qs__bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
.qs__p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: #fff; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1); padding-bottom: env(safe-area-inset-bottom); }
.qs.is-on .qs__bg { opacity: 1; } .qs.is-on .qs__p { transform: none; }
html.qs-lock, html.qs-lock body { overflow: hidden; }
.qs__h { position: relative; display: flex; justify-content: center; align-items: center; height: 52px; } .qs__h h2 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.qs__x { position: absolute; right: 8px; top: 6px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #000; }
.qs__b { padding: 0 15px 22px; }
.qs__imgs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .qs__imgs::-webkit-scrollbar { display: none; }
.qs__imgs img { flex: 0 0 86%; aspect-ratio: 320 / 425; object-fit: cover; scroll-snap-align: start; background: #F2F2F2; display: block; }
.qs__imgs img:only-child { flex-basis: 100%; }
.qs__track { position: relative; height: 3px; background: #E5E5E5; margin: 0 0 10px; } .qs__track span { position: absolute; top: 0; height: 100%; background: #888; transition: left .1s; }
.qs__info { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid #E5E5E5; font-size: 13px; }
.qs__info b { display: block; font-weight: 400; font-size: 13px; } .qs__info small { font-size: 13px; color: #666; } .qs__info > span { white-space: nowrap; }
.qs__cols { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px; scrollbar-width: none; border-bottom: 1px solid #E5E5E5; }
.qs__cols button { flex: none; width: 34px; height: 34px; border-radius: 50% !important; border: 1px solid transparent; background: none; padding: 3px; cursor: pointer; }
.qs__cols button[aria-pressed="true"] { border: 2px solid #000; } .qs__cols span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #DBDAD8; }
.qs__sh { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; border-bottom: 1px solid #E5E5E5; } .qs__sh b { font-size: 14px; text-transform: uppercase; } .qs__sh a { font-size: 14px; color: #000; }
.qs__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 16px 0 4px; }
.qs__sizes button { min-width: 40px; height: 32px; padding: 0 8px; border: 1px solid #000; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 0 !important; color: #000; }
.qs__sizes button:disabled { border-color: #BBB; color: #BBB; background: linear-gradient(to top right, transparent calc(50% - .6px), #BBB, transparent calc(50% + .6px)); cursor: not-allowed; }
.qs__sizes button.is-added { background: #000; color: #fff; }
.qs__msg { text-align: center; font-size: 13px; margin: 8px 0 0; min-height: 18px; }
@media (min-width: 761px) { .qs { display: none !important; } }
.qs__pr s { color: #888; margin-right: 6px; font-weight: 400; } .qs__pr b { font-weight: 400; } .qs__pr .is-sale { color: var(--red); }
/* Size guide drawer: right side on computers, bottom sheet on phones */
.sg { border: 0; padding: 0; margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw); background: #fff; color: #141414; transform: translateX(100%); transition: transform .24s cubic-bezier(.2,.7,.2,1); }
.sg.is-on { transform: none; } .sg::backdrop { background: rgba(0,0,0,.45); }
.sg__in { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: 0 28px 28px; }
.sg__top { position: sticky; top: 0; background: #fff; display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 0 16px; z-index: 2; }
.sg__top small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #FB0101; font-weight: 700; } .sg__top h2 { font-size: 20px; margin: 4px 0 0; line-height: 1.25; text-transform: none; }
.sg__x { width: 40px; height: 40px; border: 0; background: #F4F4F2; border-radius: 50% !important; font-size: 24px; line-height: 1; cursor: pointer; flex: none; }
.sg__bar { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #E5E5E5; margin-bottom: 18px; gap: 12px; }
.sg__tabs { display: flex; gap: 22px; } .sg__tabs button { background: none; border: 0; padding: 0 0 12px; font-size: 13px; font-weight: 600; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sg__tabs button[aria-selected="true"] { color: #141414; border-bottom-color: #141414; }
.sg__unit { display: flex; background: #F4F4F2; padding: 3px; margin-bottom: 8px; border-radius: 999px !important; } .sg__unit button { border: 0; background: none; padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 999px !important; color: #666; }
.sg__unit button[aria-pressed="true"] { background: #141414; color: #fff; }
.sg__you { font-size: 13px; margin: 0 0 12px; color: #666; } .sg__you b { color: #141414; }
.sg__scroll { overflow-x: auto; border: 1px solid #E5E5E5; }
.sg__t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sg__t th, .sg__t td { padding: 13px 10px; text-align: center; border-bottom: 1px solid #F0F0F0; white-space: nowrap; }
.sg__t thead th { background: #141414; color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.sg__t tbody th { font-weight: 700; text-align: left; padding-left: 16px; } .sg__t tbody tr:last-child > * { border-bottom: 0; }
.sg__t tbody tr { cursor: pointer; transition: background .15s; } .sg__t tbody tr:nth-child(even) { background: #FAFAF9; } .sg__t tbody tr:hover { background: #F2F2F0; }
.sg__t tbody tr.is-you { background: #FFF1F1; box-shadow: inset 3px 0 0 #FB0101; } .sg__t tbody tr.is-you th { color: #FB0101; }
.sg__unitnote { font-size: 12px; color: #666; margin: 12px 0 0; } .sg__note { font-size: 12.5px; line-height: 1.6; background: #F7F7F5; padding: 12px 14px; margin: 14px 0 0; }
.sg__fig { width: 220px; max-width: 70%; display: block; margin: 4px auto 18px; }
.sg__how { list-style: none; margin: 0; padding: 0; counter-reset: h; } .sg__how li { counter-increment: h; display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid #F0F0F0; font-size: 13px; line-height: 1.55; }
.sg__how li::before { content: counter(h); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #141414; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .sg__how li span { color: #555; }
@media (max-width: 760px) {
  .sg { width: 100vw; max-width: 100vw; height: auto; max-height: 90vh; margin: auto 0 0; transform: translateY(100%); }
  .sg__in { max-height: 90vh; padding: 0 16px 22px; } .sg__top { padding: 18px 0 12px; } .sg__top h2 { font-size: 17px; }
  .sg__t th, .sg__t td { padding: 11px 8px; font-size: 13px; }
}
@media (max-width: 760px) { .sg__in { height: auto; } .sg { inset: auto 0 0 0; } }
/* Size Guide button: stands out */
.bk-guide { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px !important; border: 1px solid #141414 !important; background: #fff !important; color: #141414 !important; font-size: 12px !important; font-weight: 700; text-decoration: none !important; letter-spacing: .02em; border-radius: 999px !important; cursor: pointer; transition: background .2s, color .2s; }
.bk-guide svg { width: 16px; height: 16px; fill: none; stroke: #FB0101; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.bk-guide:hover { background: #141414 !important; color: #fff !important; } .bk-guide:hover svg { stroke: #fff; }
.bk-sizehead { margin-bottom: 10px; }
/* bottom menu hides while the bag, quick add, size guide or a pop-up is open */
html.is-locked .bnav, html.qs-lock .bnav, html:has(dialog[open]) .bnav, body:has(.qs:not([hidden])) .bnav { display: none !important; }
body:has(.adb.is-in) .bnav { display: none !important; }
/* Quick add sheet, refined */
.qs__p { border-radius: 18px 18px 0 0 !important; box-shadow: 0 -10px 40px rgba(0,0,0,.18); max-height: 92vh; }
.qs__grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: #D9D9D6; margin: 8px auto 0; }
.qs__h { height: 46px; } .qs__h h2 { font-size: 13px; letter-spacing: .14em; }
.qs__x { top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50% !important; background: #F4F4F2; font-size: 22px; }
.qs__b { padding: 0 16px 20px; }
.qs__imgs img { flex-basis: 78%; aspect-ratio: 4 / 5; max-height: 46vh; border-radius: 10px; }
.qs__imgs img:only-child { flex-basis: 100%; }
.qs__track { height: 2px; margin: 10px auto 12px; width: 64px; border-radius: 2px; overflow: hidden; } .qs__track span { background: #141414; }
.qs__info { align-items: flex-start; padding: 2px 0 6px; border: 0; }
.qs__info b { font-size: 16px; font-weight: 700; line-height: 1.3; } .qs__info small { display: block; margin-top: 2px; font-size: 12.5px; }
.qs__pr { font-size: 16px; font-weight: 700; } .qs__pr s { font-size: 13px; }
.qs__more { display: inline-block; font-size: 12px; color: #666; text-decoration: underline; text-underline-offset: 3px; margin-bottom: 12px; }
.qs__cols { border: 0; padding: 4px 2px 12px; }
.qs__sh { border-top: 1px solid #EEE; border-bottom: 0; padding: 14px 0 4px; } .qs__sh b { font-size: 12px; letter-spacing: .12em; }
.qs__guide { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #141414; border-radius: 999px !important; background: #fff; font-size: 12px; font-weight: 700; color: #141414; cursor: pointer; }
.qs__guide svg { width: 16px; height: 16px; fill: none; stroke: #FB0101; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qs__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; padding: 12px 0 2px; }
.qs__sizes button { height: 46px; min-width: 0; font-size: 14px; border: 1.5px solid #141414; border-radius: 8px !important; transition: background .15s, color .15s, transform .1s; }
.qs__sizes button:active { transform: scale(.96); } .qs__sizes button.is-added { background: #141414; color: #fff; }
.qs__sizes button:disabled { border-width: 1px; }
.qs__msg { color: #1E8E3E; font-weight: 600; }
.qs__gtop { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; }
.qs__back { background: none; border: 0; padding: 6px 0; font-size: 13px; font-weight: 600; cursor: pointer; color: #141414; }
.qs__unit { display: flex; background: #F4F4F2; padding: 3px; border-radius: 999px !important; } .qs__unit button { border: 0; background: none; padding: 5px 14px; font-size: 12px; font-weight: 700; border-radius: 999px !important; color: #666; cursor: pointer; }
.qs__unit button[aria-pressed="true"] { background: #141414; color: #fff; }
.qs__gh { font-size: 15px; margin: 0 0 10px; text-transform: none; } .qs__tw { overflow-x: auto; border: 1px solid #E5E5E5; border-radius: 10px; }
.qs__load { text-align: center; color: #666; font-size: 13px; padding: 30px 0; }
@media (max-width: 760px) { .adb, body:has(.mbar) .adb { bottom: 0 !important; padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; } }
/* Back buttons, one style everywhere: outlined, chevron, 2px corners */
.bkbtn, .qs__back { display: inline-flex !important; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px !important; border: 1px solid #141414 !important; background: #fff !important; color: #141414 !important; font: 600 12.5px 'Manrope', sans-serif !important; letter-spacing: .02em; text-decoration: none !important; border-radius: 2px !important; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.bkbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.bkbtn:hover { background: #141414 !important; color: #fff !important; } .bkbtn:hover svg { transform: translateX(-2px); }
/* Small text buttons: 2px corners at most */
.bk-guide, .qs__guide, .rv__ask, .rv__wr, .qs__sizes button, .sg__unit, .sg__unit button, .qs__unit, .qs__unit button, .adb__btns a, .adb__btns button { border-radius: 2px !important; }
/* Added to your bag: change size and quantity right there */
.adb__mod { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 4px 0 14px; flex-wrap: wrap; }
.adb__mod small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.adb__sz > div { display: flex; flex-wrap: wrap; gap: 6px; }
.adb__sz button { min-width: 38px; height: 32px; padding: 0 8px; border: 1px solid #141414; background: #fff; font-size: 12.5px; font-weight: 700; color: #141414; cursor: pointer; border-radius: 2px !important; }
.adb__sz button[aria-pressed="true"] { background: #141414; color: #fff; }
.adb__sz button:disabled { border-color: #CCC; color: #BBB; text-decoration: line-through; cursor: not-allowed; }
.adb__qty > div { display: flex; align-items: center; border: 1px solid #141414; border-radius: 2px; height: 32px; }
.adb__qty button { width: 32px; height: 100%; border: 0; background: none; font-size: 16px; cursor: pointer; color: #141414; } .adb__qty button:disabled { color: #CCC; cursor: not-allowed; }
.adb__qty span { min-width: 24px; text-align: center; font-size: 13px; font-weight: 700; }
/* Added to bag: small "Change" next to the size, compact sizes underneath */
.adb__chg { border: 0; background: none; padding: 0 0 0 6px; font-size: 12px; font-weight: 700; color: #141414; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.adb__sz { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 12px; } .adb__sz[hidden] { display: none; }
.adb__sz button { min-width: 32px; height: 26px; padding: 0 7px; font-size: 11.5px; }
.adb__chg { display: block; padding: 3px 0 0; font-size: 11.5px; font-weight: 600; color: #666; } .adb__chg:hover { color: #141414; }
/* Phone: wishlist heart in the header, Checkout (bag) in the bottom menu */
.hdr__wish { display: none; }
@media (max-width: 760px) {
  .hdr__wish { display: grid; place-items: center; width: 40px; height: 40px; color: inherit; } .hdr__wish .ic { width: 22px; height: 22px; }
  .hdr__bag { display: none !important; }
}
.bnav__ic { position: relative; display: inline-grid; }
.bnav__n { position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #FB0101; color: #fff; font: 700 9.5px/16px 'Manrope', sans-serif; font-style: normal; text-align: center; }
.bnav__n[hidden] { display: none; }
/* Added to your bag: soft blur behind so the eye lands on the panel */
body::after { content: ""; position: fixed; inset: 0; z-index: 89; background: rgba(20,20,20,.12); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
body:has(.adb.is-in)::after { opacity: 1; visibility: visible; }
/* Already in your bag: confirm */
.dup { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(20,20,20,.18); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); opacity: 0; transition: opacity .25s; }
.dup[hidden] { display: none; } .dup.is-in { opacity: 1; }
.dup__p { width: min(380px, 100%); background: #fff; padding: 24px 22px 20px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.2); transform: translateY(10px); transition: transform .25s; }
.dup.is-in .dup__p { transform: none; }
.dup__ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FFF1F1; color: #FB0101; font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.dup__p h2 { font-size: 16px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; } .dup__p p { font-size: 13.5px; line-height: 1.6; color: #444; margin: 0 0 18px; } .dup__p p b { color: #141414; }
.dup__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dup__btns button { height: 44px; font: 700 12.5px 'Manrope', sans-serif; letter-spacing: .02em; cursor: pointer; border-radius: 2px !important; }
.dup__no { background: #fff; border: 1px solid #141414; color: #141414; } .dup__yes { background: #141414; border: 1px solid #141414; color: #fff; } .dup__yes:hover { background: #FB0101; border-color: #FB0101; }
@media (max-width: 760px) { .dup { place-items: end stretch; padding: 0; } .dup__p { width: 100%; padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; transform: translateY(100%); } }
body:has(.dup:not([hidden])) .bnav { display: none !important; }
/* Added to bag flies into the bag icon when it leaves */
.adb.is-fly { opacity: 1; visibility: visible; transition: transform .6s cubic-bezier(.55,0,.8,.2), opacity .6s ease-in !important; transform-origin: center; pointer-events: none; }
.bnav a.is-bump .bnav__ic { animation: rg-bump .5s ease; } .bnav a.is-bump .bnav__n { animation: rg-bump .5s ease .05s; }
/* bottom menu: Checkout icon always visible (logged-in rule hid it) */
.is-in .bnav [data-bn="bag"] .bnav__ic > .ic { visibility: visible !important; }
/* bottom menu: Category button + drop-up list */
@media (max-width: 760px) {
  .bnav .bnav__cat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; padding: 0; color: #77736F; font: 600 10.5px 'Outfit', sans-serif; letter-spacing: .02em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bnav__cat .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s; }
  .bnav__cat[aria-expanded="true"], .bnav__cat[aria-current="page"] { color: var(--ink); }
  .bnav__cat[aria-expanded="true"] .ic { transform: rotate(45deg); }
  .bnav__cat[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--red); }
}
.catup { position: fixed; inset: 0; z-index: 58; } .catup[hidden] { display: none; }
.catup__bg { position: absolute; inset: 0; background: rgba(20,20,20,.18); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); opacity: 0; transition: opacity .25s; }
.catup__p { position: absolute; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.12); padding: 6px 18px 10px; transform: translateY(30px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.catup.is-on .catup__bg { opacity: 1; } .catup.is-on .catup__p { transform: none; opacity: 1; }
.catup__h { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #EEE; } .catup__h b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.catup__h button { width: 32px; height: 32px; border: 0; background: #F4F4F2; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.catup__l a { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid #F2F2F2; font: 600 14px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #141414; }
.catup__l a:last-child { border-bottom: 0; } .catup__l a i { font-style: normal; color: #AAA; font-size: 18px; } .catup__l a.is-cur { color: var(--red); } .catup__l a.is-cur i { color: var(--red); }
@media (min-width: 761px) { .catup { display: none !important; } }
.catup__h button { border-radius: 50% !important; } .bnav__cat[aria-expanded="true"] .ic { transform: none !important; }
.hdr__bag [data-bag-count] { background: var(--red) !important; color: #fff !important; }
/* Faster, lighter motion (only transform and opacity, nothing heavy) */
.qs__bg, .catup__bg, .catup__p, .dup, .dup__p { transition-duration: .18s !important; }
.qs__p { transition: transform .2s cubic-bezier(.2,.7,.2,1) !important; }
.adb { transition-duration: .2s !important; }
.adb.is-fly { transition: transform .4s cubic-bezier(.55,0,.8,.2), opacity .4s ease-in !important; }
.sg { transition: transform .18s cubic-bezier(.2,.7,.2,1) !important; }
.card .card__img, .card__quick, .card .card__add, .bk-guide, .bkbtn, .hps__h { transition-duration: .2s !important; }
.hdr__bag.is-bump .ic, .hdr__bag.is-bump [data-bag-count], .bnav a.is-bump .bnav__ic, .bnav a.is-bump .bnav__n { animation-duration: .35s !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* Category drop-up: picture tiles, the whole tile is the link */
.catup__p { padding: 4px 14px 14px !important; }
.catup__q { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 10px; }
.catup__q a { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid #141414; font: 700 12.5px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #141414; border-radius: 2px; -webkit-tap-highlight-color: transparent; }
.catup__q a:first-child { background: #141414; color: #fff; }
.catup__q a:active { transform: scale(.97); }
.catup__g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catup__t { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EFEEEB; border-radius: 2px; -webkit-tap-highlight-color: transparent; }
.catup__t img, .catup__t > i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.catup__t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 60%); }
.catup__t:has(> i)::after { background: none; }
.catup__t span { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; display: flex; justify-content: space-between; align-items: center; color: #fff; font: 700 13px 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.catup__t:has(> i) span { color: #141414; }
.catup__t em { font-style: normal; font-size: 18px; line-height: 1; transition: transform .15s; }
.catup__t:active { transform: scale(.97); } .catup__t:active em { transform: translateX(3px); }
.catup__t.is-cur { outline: 2px solid var(--red); outline-offset: -2px; }
/* Bag drawer, refined with brand colours */
.bagd__top h2 { display: flex; align-items: center; gap: 8px; }
.bagd__cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); color: #fff; font: 800 11.5px 'Outfit', sans-serif; letter-spacing: 0; }
.bagd__free { background: #FFF5F5; border-bottom: 1px solid #FBE3E3; } .bagd__free strong { color: var(--red); }
.bagd__bar { height: 5px; border-radius: 3px; background: #F3DADA; overflow: hidden; } .bagd__bar i { height: 5px; border-radius: 3px; background: var(--red); transition: width .3s ease; }
.bagd__free.is-done { background: #EEF8F1; border-bottom-color: #D3EDDC; } .bagd__free.is-done strong { color: #1E8E3E; } .bagd__free.is-done .bagd__bar { background: #D3EDDC; } .bagd__free.is-done .bagd__bar i { background: #1E8E3E; }
.bagd__item { grid-template-columns: 88px 1fr !important; gap: 14px; padding: 16px 0; }
.bagd__img { aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: #F2F2F0; } .bagd__img img { width: 100%; height: 100%; object-fit: cover; }
.bagd__info { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.bagd__nm { font: 700 14px/1.35 'Outfit', sans-serif; color: var(--ink); } .bagd__nm:hover { color: var(--red); }
.bagd__pr { font: 800 14px 'Outfit', sans-serif; white-space: nowrap; }
.bagd__detail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12.5px; color: #77736F; } .bagd__detail i { font-style: normal; color: #C9C6C2; }
.bagd__each { display: block; font-size: 11.5px; color: #9A9692; margin-top: 2px; }
.bagd .qtyb { height: 36px; border: 1px solid #DAD8D4; border-radius: 2px; display: inline-flex; align-items: center; }
.bagd .qtyb button { width: 36px; height: 100%; border: 0; background: none; font-size: 16px; color: var(--ink); cursor: pointer; } .bagd .qtyb button:hover:not(:disabled) { background: #F4F4F2; } .bagd .qtyb button:disabled { color: #CCC; cursor: not-allowed; }
.bagd .qtyb span { min-width: 28px; text-align: center; font: 700 13px 'Outfit', sans-serif; }
.bagd__rm { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 0; font: 600 12.5px 'Manrope', sans-serif; color: #8C8884; cursor: pointer; transition: color .15s; }
.bagd__rm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .bagd__rm:hover { color: var(--red); }
.bagd__foot { box-shadow: 0 -8px 24px rgba(0,0,0,.05); }
.bagd__foot > .bagd__row strong { font: 800 17px 'Outfit', sans-serif; }
.bagd__trust { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 0 4px; } .bagd__trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #1E8E3E; }
.bagd__trust svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bagd__go { display: flex !important; justify-content: space-between; align-items: center; padding: 0 18px !important; background: var(--red) !important; color: #fff !important; border-radius: 2px !important; transition: background .2s; }
.bagd__go:hover { background: var(--deep) !important; } .bagd__go b { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.bagd__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .bagd__go:hover svg { transform: translateX(3px); }
/* Bag drawer: picks + summary */
.bagd__picks:empty { display: none; }
.bagd__picks { padding: 18px 0 8px; }
.bagd__ph { display: block; font: 700 11.5px 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.bagd__pl { display: grid; grid-auto-flow: column; grid-auto-columns: 34%; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; } .bagd__pl::-webkit-scrollbar { display: none; }
.bagd__pc { display: flex; flex-direction: column; gap: 4px; scroll-snap-align: start; color: var(--ink); }
.bagd__pi { display: block; aspect-ratio: 4 / 5; background: #F2F2F0; border-radius: 2px; overflow: hidden; } .bagd__pi img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .bagd__pc:hover .bagd__pi img { transform: scale(1.04); }
.bagd__pn { font-size: 12px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bagd__pp { font: 700 12px 'Outfit', sans-serif; } .bagd__pp s { color: #9A9692; font-weight: 400; } .bagd__pp em { font-style: normal; color: var(--red); }
.bagd__sum { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed #DAD8D4; }
.bagd__sum .bagd__row { font-size: 13px; color: #55524F; } .bagd__dl { font-size: 12px; color: #8C8884; }
.bagd__tot { padding-top: 4px; color: var(--ink) !important; } .bagd__tot span { font: 700 14px 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .06em; } .bagd__tot strong { font: 800 18px 'Outfit', sans-serif; }
.bagd__item { transition: background .15s; }
.bagd__cont { color: var(--ink) !important; } .bagd__picks { padding: 18px 0 10px; }
/* Checkout grows out of the bag icon */
.goco { position: fixed; inset: 0; z-index: 120; background: #fff; clip-path: circle(0 at var(--x) var(--y)); transition: clip-path .26s cubic-bezier(.4,0,.2,1); display: grid; place-items: center; pointer-events: none; }
.goco.is-on { clip-path: circle(150% at var(--x) var(--y)); }
.goco__t { font: 800 14px 'Outfit', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .15s .12s; } .goco.is-on .goco__t { opacity: 1; }
html.goco-in main { animation: goco-in .3s ease both; }
@keyframes goco-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Collection header: breadcrumb, title + count, clean Filter | Sort bar */
.chead__bc { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: #8C8884; margin-bottom: 10px; } .chead__bc a { color: #8C8884; } .chead__bc a:hover { color: var(--ink); } .chead__bc b { color: var(--ink); font-weight: 600; } .chead__bc span { color: #C9C6C2; }
.chead__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .chead__t h1 { margin: 0; }
.chead__n { font-size: 12.5px; color: #8C8884; font-weight: 500; }
.cbar__mm { display: none; }
@media (max-width: 760px) {
  .chead { padding: 14px 16px 0 !important; } .chead__t h1 { font-size: 22px !important; letter-spacing: .02em; }
  .cbar { padding: 14px 16px 12px !important; border: 0 !important; }
  .cbar__m { display: none !important; }
  .cbar__mm { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border: 1px solid #141414; border-radius: 2px; }
  .cbar__mm button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; background: #fff; font: 700 12.5px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #141414; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cbar__mm button + button { border-left: 1px solid #141414; }
  .cbar__mm button:active { background: #F4F4F2; }
  .cbar__mm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .cbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  .cbar__mm button[aria-expanded="true"] { background: #141414; color: #fff; }
}
@media (min-width: 761px) { .cbar { padding-top: 22px !important; } }
/* Collection header, minimal: just the title and one thin Filter / Sort line */
.chead__bc, .chead__n { display: none !important; }
@media (max-width: 760px) {
  .chead { padding: 18px 16px 0 !important; } .chead__t h1 { font-size: 20px !important; }
  .cbar { padding: 12px 16px 10px !important; }
  .cbar__mm { border: 0; border-top: 1px solid #E8E6E3; border-bottom: 1px solid #E8E6E3; border-radius: 0; }
  .cbar__mm button { height: 42px; justify-content: flex-start; padding: 0; font-size: 12px; letter-spacing: .1em; background: none !important; color: #141414 !important; }
  .cbar__mm button + button { border-left: 0; justify-content: flex-end; }
  .cbar__mm svg { width: 16px; height: 16px; }
}
/* Bag drawer opened from the phone bag icon: grows out of the icon, shrinks back into it */
@media (max-width: 760px) {
  .bagd.from-icon .bagd__panel { transform: none !important; clip-path: circle(0 at var(--bx) var(--by)); transition: clip-path .32s cubic-bezier(.4,0,.2,1) !important; width: 100%; }
  .bagd.from-icon.is-in .bagd__panel { clip-path: circle(150% at var(--bx) var(--by)); }
  .bagd.from-icon.is-out .bagd__panel { clip-path: circle(0 at var(--bx) var(--by)); transition-duration: .26s !important; }
}
/* Smoother grow from the bag icon */
@media (max-width: 760px) {
  .bagd.from-icon .bagd__panel { will-change: clip-path; transition: clip-path .46s cubic-bezier(.65,0,.35,1) !important; }
  .bagd.from-icon.is-in .bagd__panel { clip-path: circle(120vh at var(--bx) var(--by)); }
  .bagd.from-icon.is-out .bagd__panel { transition: clip-path .34s cubic-bezier(.65,0,.35,1) !important; }
  .bagd.from-icon .bagd__shade { transition: background .4s ease; }
}
/* Collection: optional thin banner on top; on phones the title sits between Filter and Sort */
.cban { display: block; } .cban img { display: block; width: 100%; aspect-ratio: 6 / 1; max-height: 260px; object-fit: cover; }
.cbar__title { display: none; }
@media (max-width: 760px) {
  .cban img { aspect-ratio: 3 / 1; }
  .chead { padding: 0 16px !important; } .chead__t { display: none !important; } .chead p { margin: 12px 0 0; font-size: 13px; }
  .chead:not(:has(p)) { display: none; }
  .cbar { padding: 10px 16px !important; }
  .cbar__mm { grid-template-columns: 1fr auto 1fr !important; align-items: center; }
  .cbar__title { display: block; font: 800 15px 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; padding: 0 8px; }
}
@media (max-width: 760px) { .cbar__mm > button:last-child { justify-content: flex-end; border-left: 0; } .cbar__mm > button { width: 100%; } }
/* Computer: same as phone, the title sits between Filter and Sort */
.cbar__dt { display: none; }
@media (min-width: 761px) {
  .chead__t { display: none !important; } .chead:not(:has(p)) { display: none; } .chead p { margin: 18px 0 0; }
  .cbar { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid #E8E6E3 !important; border-bottom: 1px solid #E8E6E3 !important; padding: 14px 100px !important; margin-top: 0; }
  .cbar__dt { display: block; font: 800 20px 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; padding: 0 20px; }
  .cbar > .cbar__sort { justify-self: end; }
  .cban + .chead + .cbar, .cban + .cbar { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) { .cbar { padding: 12px 20px !important; } .cbar__dt { font-size: 17px; } }
/* Quick add, premium details block */
.qs__info { display: block !important; padding: 6px 0 14px !important; border-bottom: 1px solid #EFEDEA !important; }
.qs__info > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.qs__info b { font: 700 17px/1.3 'Outfit', sans-serif !important; letter-spacing: .01em; }
.qs__pr { font: 700 16px 'Outfit', sans-serif !important; white-space: nowrap; }
.qs__sub { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.qs__sub small { font-size: 12.5px; color: #8C8884; letter-spacing: .02em; }
.qs__more { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #141414 !important; text-decoration: none !important; }
.qs__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; } .qs__more:active svg { transform: translateX(3px); }
.qs__sh { border-top: 0 !important; padding: 16px 0 2px !important; }
.qs__sh b { font-size: 11px !important; letter-spacing: .16em !important; color: #8C8884; font-weight: 700; }
.qs__guide { border: 0 !important; padding: 4px 0 !important; background: none !important; font-size: 11.5px !important; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #D0CDC9; }
.qs__sizes { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important; gap: 8px !important; padding: 12px 0 0 !important; }
.qs__sizes button { height: 50px !important; border: 1px solid #DAD8D4 !important; border-radius: 2px !important; font: 700 14px 'Outfit', sans-serif !important; letter-spacing: .04em; background: #fff; color: #141414; box-shadow: 0 1px 0 rgba(0,0,0,.02); transition: border-color .15s, background .15s, color .15s, transform .1s !important; }
.qs__sizes button:hover:not(:disabled) { border-color: #141414 !important; }
.qs__sizes button:active:not(:disabled), .qs__sizes button.is-added { background: #141414 !important; color: #fff !important; border-color: #141414 !important; }
.qs__sizes button:disabled { background: #FAFAF9 linear-gradient(to top right, transparent calc(50% - .5px), #D6D3CF, transparent calc(50% + .5px)) !important; color: #C2BFBB !important; border-color: #ECEAE7 !important; }
.qs__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 11.5px; color: #9A9692; letter-spacing: .02em; }
.qs__hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.qs__sizes { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important; }
/* Bag from the phone bag icon: slides up from the bottom, same feel as the main menu */
@media (max-width: 760px) {
  .bagd.from-icon .bagd__panel { clip-path: none !important; transform: translateY(100%) !important; transition: transform .42s cubic-bezier(.22,1,.36,1) !important; will-change: transform; }
  .bagd.from-icon.is-in .bagd__panel { clip-path: none !important; transform: none !important; }
  .bagd.from-icon.is-out .bagd__panel { clip-path: none !important; transform: translateY(100%) !important; transition: transform .32s cubic-bezier(.55,0,.75,.2) !important; }
}
/* Hero slide without words: the whole picture is the link */
.hero__link { position: absolute; inset: 0; z-index: 2; }
.hero__slide--clean .hero__shade { display: none; }
/* Shop page polish */
.grid--coll > .card { display: flex; flex-direction: column; } .grid--coll > .card .card__body { flex: 1; display: flex; flex-direction: column; } .grid--coll > .card .card__foot { margin-top: auto; }
.prow__t > .card .card__body { display: flex; flex-direction: column; }
@media (max-width: 760px) {
  .cpanel { padding: 4px 16px 16px !important; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid #E8E6E3; }
  .cpanel .fpanel__g { gap: 6px; } .cpanel .fbar__label { width: 100%; font: 700 11px 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8C8884; margin-bottom: 2px; }
  .cpanel .chip { height: 34px; padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; border: 1px solid #DAD8D4; border-radius: 2px !important; display: inline-flex; align-items: center; background: #fff; color: #141414; }
  .cpanel .chip.is-on { background: #141414; border-color: #141414; color: #fff; }
  .cpanel .cbar__sort, .cpanel .sort { display: flex; align-items: center; gap: 10px; font-size: 12px; } .cpanel .sort select { height: 36px; border: 1px solid #DAD8D4; border-radius: 2px; padding: 0 10px; background: #fff; font-size: 13px; }
}
@media (max-width: 760px) { .cpanel .sort label { font: 700 11px "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8C8884; } }
/* Checkout header on phones: small back arrow, logo centred, a quiet lock */
@media (max-width: 760px) {
  .chdr { display: grid !important; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 8px 12px !important; }
  .chdr .bkbtn { width: 40px; height: 40px; padding: 0 !important; justify-content: center; border-color: #E2E0DC !important; }
  .chdr__bt, .chdr__st { display: none; }
  .chdr__logo { justify-self: center; } .chdr__secure { justify-self: end; color: #1E8E3E; }
  .co__form h1 { font-size: 20px !important; margin-bottom: 14px; }
}
/* Newsletter band only above the full footer (not on login / account / checkout pages) */
.nlband:not(:has(+ footer.ftr)) { display: none !important; }
@media (max-width: 760px) { .ac-back.bkbtn { height: 32px; font-size: 11.5px !important; padding: 0 10px 0 8px !important; } }
.card .card__quick { background: rgba(255,255,255,.85) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; border: 0 !important; box-shadow: none !important; }
/* Card wishlist heart: clear on any picture */
.card .card__wish { width: 34px !important; height: 34px !important; top: 10px !important; right: 10px !important; background: rgba(255,255,255,.92) !important; color: #141414 !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; border-radius: 50% !important; transition: transform .15s, background .15s; }
.card .card__wish .ic { width: 18px !important; height: 18px !important; stroke-width: 1.8 !important; }
.card .card__wish:hover { background: #fff !important; transform: scale(1.06); }
.card .card__wish[aria-pressed="true"] { color: var(--red) !important; } .card .card__wish[aria-pressed="true"] .ic { fill: var(--red) !important; stroke: var(--red) !important; }
@media (max-width: 760px) { .card .card__wish { width: 30px !important; height: 30px !important; top: 8px !important; right: 8px !important; } .card .card__wish .ic { width: 16px !important; height: 16px !important; } }
/* Card: the line under the name is never empty (colour, else the sizes in stock); low stock nudge */
.card__cl--sz .card__line { letter-spacing: .06em; }
.card__low { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .02em; }
@media (max-width: 760px) { .card__low { font-size: 10px; } }
.card__szl .card__line { letter-spacing: .04em; } .card__szl s { color: #C9C6C2; text-decoration: line-through; }
/* Card details: clear order — name, colour, price */
.card .card__body { padding: 10px 8px 4px !important; gap: 0; }
.card .card__name { font: 600 14px/1.35 'Outfit', sans-serif !important; color: #141414 !important; letter-spacing: .01em; }
.card .card__cl { min-height: 20px !important; margin-top: 3px; display: flex; align-items: center; }
.card__cl .card__line { font-size: 12px !important; color: #8C8884 !important; }
.card .card__foot { margin-top: 8px !important; }
.card .card__foot .card__price, .card .card__foot .card__price b { font: 800 15px 'Outfit', sans-serif !important; color: #141414; letter-spacing: .01em; }
.card .card__foot .card__price s { font-size: 12px !important; font-weight: 500 !important; color: #A9A5A1 !important; margin-right: 6px; }
.card .card__foot .card__price .is-sale { color: var(--red) !important; }
.grid--coll > .card .card__foot, .prow__t > .card .card__foot { margin-top: 8px !important; }
@media (max-width: 760px) { .card .card__name { font-size: 12.5px !important; } .card .card__foot .card__price, .card .card__foot .card__price b { font-size: 13.5px !important; } .card__cl .card__line { font-size: 11px !important; } .card .card__cl { min-height: 18px !important; } }
/* Card rows always the same height: one-line name, one info line (colour or low stock), price — no gaps */
.card .card__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .card__cl { position: relative; height: 20px; min-height: 20px !important; overflow: hidden; }
.card .card__low { font-size: 11.5px; font-weight: 700; color: var(--red); margin: 0 !important; }
.card .card__low--r { order: 9; margin-left: auto !important; white-space: nowrap; }
.grid--coll > .card .card__foot, .prow__t > .card .card__foot, .card .card__foot { margin-top: 6px !important; }
.grid--coll > .card .card__body, .prow__t > .card .card__body { flex: 0 0 auto !important; }
@media (max-width: 760px) { .card .card__cl { height: 18px; min-height: 18px !important; } .card .card__low { font-size: 10.5px; } }
/* Card colour dots: clean row, no overlap, clear selected ring */
.card .card__sw { display: inline-flex !important; align-items: center; gap: 6px !important; margin-left: 8px !important; }
.card .card__sw button { width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 50% !important; display: grid; place-items: center; cursor: pointer; }
.card .card__sw span { width: 12px !important; height: 12px !important; border-radius: 50% !important; background: var(--sw, #ccc) !important; border: 1px solid rgba(0,0,0,.15) !important; box-shadow: none !important; }
.card .card__sw button[aria-pressed="true"] { box-shadow: 0 0 0 1.5px #141414 !important; }
.card .card__sw button[aria-pressed="true"] span { border-color: #fff !important; }
.card .card__more { margin-left: 6px; font-size: 11px; color: #8C8884; }
@media (max-width: 760px) { .card .card__sw { gap: 4px !important; margin-left: 6px !important; } .card .card__sw button { width: 16px !important; height: 16px !important; } .card .card__sw span { width: 10px !important; height: 10px !important; } }
/* Homepage header over the hero (Blakely style), solid after scrolling or on hover */
html.hdr-home body.is-home .hero { margin-top: calc(-1 * var(--hdrh, 68px)); }
html.hdr-home body.is-home .hdr { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
html.hdr-home body.is-home .hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0)); }
html.hdr-over body.is-home .hdr:not(:hover):not(:focus-within) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; }
html.hdr-over body.is-home .hdr:not(:hover):not(:focus-within) :is(.hdr__btn, .hdr__top, .hdr__login, .hdr__wish, .hdr__bag, .hdr__xs, .hdr__xs input) { color: #fff !important; }
html.hdr-over body.is-home .hdr:not(:hover):not(:focus-within) .hdr__xs input::placeholder { color: rgba(255,255,255,.9) !important; }
html.hdr-over body.is-home .hdr:not(:hover):not(:focus-within) .hdr__xs { border-color: rgba(255,255,255,.5) !important; background: transparent !important; }
html.hdr-over body.is-home .hdr:not(:hover):not(:focus-within) .hdr__logo img { filter: brightness(0) invert(1); }
html.hdr-over body.is-home .hdr:not(:hover):not(:focus-within) .hdr__top::after { background: #fff !important; }
@media (min-width: 761px) { html.hdr-home body.is-home .hero { height: calc(100svh - 34px); max-height: 940px; min-height: 560px; } }
@media (max-width: 760px) { html.hdr-home body.is-home .hero { height: calc(640px + var(--hdrh, 52px)); } }
/* Header over hero: no change on hover; black words on light pictures */
html.hdr-over body.is-home .hdr { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; }
html.hdr-over body.is-home .hdr :is(.hdr__btn, .hdr__top, .hdr__login, .hdr__wish, .hdr__bag, .hdr__xs, .hdr__xs input) { color: #fff !important; }
html.hdr-over body.is-home .hdr .hdr__xs input::placeholder { color: rgba(255,255,255,.9) !important; }
html.hdr-over body.is-home .hdr .hdr__logo img { filter: brightness(0) invert(1); }
html.hdr-over body.is-home .hdr .mega :is(a, h6) { color: #141414 !important; }
html.hdr-over.hdr-dark body.is-home .hdr :is(.hdr__btn, .hdr__top, .hdr__login, .hdr__wish, .hdr__bag, .hdr__xs, .hdr__xs input) { color: #141414 !important; }
html.hdr-over.hdr-dark body.is-home .hdr .hdr__xs input::placeholder { color: #141414 !important; }
html.hdr-over.hdr-dark body.is-home .hdr .hdr__logo img { filter: none; }
html.hdr-dark body.is-home .hero::before { background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0)) !important; }
/* Product page colour picker: label above, neat tiles, clear selected state */
.bk-colname { display: flex; gap: 6px; align-items: baseline; font-size: 14px; margin: 4px 0 10px !important; } .bk-colname span { color: #77736F; } .bk-colname b { font-weight: 700; color: #141414; }
.bk-cols { gap: 10px !important; margin-bottom: 20px !important; }
.bk-col { position: relative; cursor: pointer; }
.bk-col span { width: 50px !important; height: 64px !important; padding: 0; border: 1px solid #E5E3DF !important; border-radius: 2px; overflow: hidden; background: #F4F3F1; transition: border-color .15s, box-shadow .15s; display: block; }
.bk-col span img { width: 100%; height: 100%; object-fit: cover; }
.bk-col span i { display: block; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.bk-col:hover span { border-color: #8C8884 !important; }
.bk-col input:checked + span { border-color: #141414 !important; box-shadow: 0 0 0 1px #141414, inset 0 0 0 2px #fff; }
.bk-col input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.bk-sizehead > span { font-size: 14px; color: #77736F; } .bk-sizehead b { color: #141414; }
.bk-col input:checked + span { border-color: transparent !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #141414 !important; } .bk-cols { padding: 4px 0 0 4px; }
/* Product page colours as round swatches */
.bk-cols { gap: 12px !important; padding: 4px 0 0 4px; }
.bk-col span { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 1px solid rgba(0,0,0,.14) !important; background: #F4F3F1; }
.bk-col span i, .bk-col span img { border-radius: 50%; }
.bk-col input:checked + span { border-color: transparent !important; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #141414 !important; }
@media (max-width: 760px) { .bk-col span { width: 30px !important; height: 30px !important; } }
.rv__src { color: #8C8884 !important; font-style: italic; } .rv__ver { color: #1E8E3E !important; font-weight: 600; }
/* Account: Creator Circle shows the dashboard banner as it is (its own design), whole banner clickable */
.ac-hero.ac-hero--ban { position: relative; display: block !important; padding: 0 !important; background: none !important; min-height: 0 !important; overflow: hidden; border-radius: 2px !important; }
.ac-hero__ban { display: block; } .ac-hero__ban img { display: block; width: 100%; height: auto; }
.ac-hero--ban [data-sq-pill] { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Review stars in the usual gold */
.rv__st i.on, .stars, .quote .stars, .card__rating, .bk-wr__stars label:has(input:checked) span, .bk-wr__stars label:has(~ label input:checked) span { color: #F5A623 !important; }
.rv__st i { color: #E2E0DC; }
.bk-wr__stars span:hover { color: #F5A623; }
/* Card colour dots: lighter selected ring, same size dots */
.card .card__sw button { width: 16px !important; height: 16px !important; box-shadow: none !important; }
.card .card__sw span { width: 12px !important; height: 12px !important; }
.card .card__sw button[aria-pressed="true"] { box-shadow: 0 0 0 1px #141414 !important; }
.card .card__sw button[aria-pressed="true"] span { border: 1.5px solid #fff !important; }
@media (max-width: 760px) { .card .card__sw button { width: 14px !important; height: 14px !important; } .card .card__sw span { width: 10px !important; height: 10px !important; } }
/* Product page: accordions first (Materials & Care open), Complete the look last, cleaner look */
.bk-acc { margin-top: 6px; border-top: 1px solid #E8E6E3; }
.bk-acc details { border-top: 0 !important; border-bottom: 1px solid #E8E6E3 !important; }
.bk-acc summary { text-align: left !important; padding: 16px 28px 16px 0 !important; font: 700 12.5px 'Outfit', sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase; color: #141414; }
.bk-acc summary::after { content: "+" !important; top: 50% !important; right: 2px !important; transform: translateY(-50%); font: 400 20px/1 'Outfit', sans-serif !important; color: #141414 !important; }
.bk-acc details[open] summary::after { content: "−" !important; top: 50% !important; }
.bk-acc .acc__body { font-size: 13.5px !important; line-height: 1.7 !important; color: #4A4744 !important; padding: 0 0 18px !important; }
.ctl { margin-top: 26px; }
.ctl h2 { text-align: left !important; font: 700 12.5px 'Outfit', sans-serif !important; letter-spacing: .12em !important; margin: 0 0 12px !important; padding: 0 !important; }
.ctl__i { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0 !important; border-top: 1px solid #F0EEEB; align-items: stretch; }
.ctl__img { width: 76px !important; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: #F2F2F0; } .ctl__img img { width: 100%; height: 100%; object-fit: cover; }
.ctl__b { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; }
.ctl__t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .ctl__t b { font-size: 13.5px !important; font-weight: 600 !important; } .ctl__t span { font-weight: 700; font-size: 13px; white-space: nowrap; }
.ctl__a { display: flex; gap: 6px; } .ctl__a select { height: 34px; min-width: 64px; border: 1px solid #DAD8D4; border-radius: 2px; padding: 0 8px; background: #fff; font-size: 12.5px; }
.ctl__a button { flex: 1; min-width: 0 !important; height: 34px !important; font: 700 11.5px 'Outfit', sans-serif !important; letter-spacing: .1em; text-transform: uppercase; background: #141414 !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; }
.ctl__a button:hover { background: #000 !important; }
/* Product page trust row (replaces the grey bar) */
.bk-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 12px 0 4px; border: 1px solid #E8E6E3; border-radius: 2px; }
.bk-trust > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0; }
.bk-trust > div + div { border-left: 1px solid #E8E6E3; }
.bk-trust svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #141414; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-trust span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bk-trust b { font: 700 12.5px 'Outfit', sans-serif; letter-spacing: .02em; } .bk-trust small { font-size: 11.5px; color: #77736F; line-height: 1.35; }
@media (max-width: 380px) { .bk-trust { grid-template-columns: 1fr; } .bk-trust > div + div { border-left: 0; border-top: 1px solid #E8E6E3; } }
/* Size Guide: refined link with a ruler, no box */
.bk-guide { border: 0 !important; background: none !important; padding: 4px 0 !important; gap: 7px !important; font: 700 11.5px 'Outfit', sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase; color: #141414 !important; border-radius: 0 !important; position: relative; }
.bk-guide::after { content: ""; position: absolute; left: 23px; right: 0; bottom: 0; height: 1px; background: #141414; transform-origin: left; transition: transform .2s ease, background .2s; }
.bk-guide svg { width: 16px !important; height: 16px !important; stroke: #141414 !important; stroke-width: 1.5 !important; }
.bk-guide:hover { background: none !important; color: var(--red) !important; } .bk-guide:hover svg { stroke: var(--red) !important; } .bk-guide:hover::after { background: var(--red); transform: scaleX(.6); }
.ctl__b { gap: 6px !important; }
.ctl__msg { display: block; min-height: 15px; font-size: 11.5px; color: #77736F; }
.ctl__msg.is-ok { color: #1E8E3E; font-weight: 600; } .ctl__msg.is-err { color: var(--red); font-weight: 600; } .ctl__msg.is-warn { color: #B26A00; }
/* Trust list: three rows with coloured round icons */
.bk-trust { display: flex !important; flex-direction: column; grid-template-columns: none !important; padding: 4px 14px; }
.bk-trust > div + div { border-left: 0 !important; }
.bk-trust__r { display: flex; align-items: center; gap: 12px; padding: 11px 0 !important; }
.bk-trust__r + .bk-trust__r { border-top: 1px solid #F0EEEB; }
.bk-ti { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.bk-ti svg { width: 19px !important; height: 19px !important; fill: none; stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round; }
.bk-ti--g { background: #E9F7EE; } .bk-ti--g svg { stroke: #1E8E3E !important; }
.bk-ti--b { background: #EAF2FD; } .bk-ti--b svg { stroke: #1A62C7 !important; }
.bk-ti--a { background: #FFF4E2; } .bk-ti--a svg { stroke: #C26A00 !important; }
.bk-trust b { font-size: 13px !important; } .bk-trust small { font-size: 12px !important; }
/* Size Guide: a refined soft button that is easy to spot */
.bk-guide { height: 32px; padding: 0 10px 0 8px !important; gap: 7px !important; background: #F4F2EF !important; border: 1px solid #E6E2DC !important; border-radius: 2px !important; font: 700 11.5px 'Outfit', sans-serif !important; letter-spacing: .1em !important; color: #141414 !important; text-decoration: none !important; transition: background .2s, border-color .2s, color .2s; }
.bk-guide::after { display: none !important; }
.bk-guide svg { width: 17px !important; height: 17px !important; stroke: var(--red) !important; stroke-width: 1.6 !important; }
.bk-guide em { font-style: normal; font-size: 15px; line-height: 1; margin-left: 1px; transition: transform .2s; }
.bk-guide:hover { background: #141414 !important; border-color: #141414 !important; color: #fff !important; } .bk-guide:hover svg { stroke: #fff !important; } .bk-guide:hover em { transform: translateX(2px); }
/* Trust: three items side by side, compact */
.bk-trust { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; flex-direction: row; padding: 0 !important; }
.bk-trust__r { flex-direction: column; align-items: center !important; text-align: center; gap: 7px !important; padding: 12px 6px !important; border-top: 0 !important; }
.bk-trust__r + .bk-trust__r { border-left: 1px solid #F0EEEB !important; }
.bk-trust__r span { align-items: center; } .bk-trust b { font-size: 12px !important; line-height: 1.25; } .bk-trust small { font-size: 11px !important; line-height: 1.35; }
.bk-ti { width: 32px !important; height: 32px !important; } .bk-ti svg { width: 17px !important; height: 17px !important; }
/* Fit hint under the sizes */
.bk-fit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: -4px 0 12px; padding: 9px 12px; background: #F7F6F4; border-left: 2px solid #141414; font-size: 12.5px; color: #4A4744; }
.bk-fit b { font-weight: 700; color: #141414; }
.bk-fit__lnk { border: 0; background: none; padding: 0; font: 600 12px 'Manrope', sans-serif; color: var(--red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-guide.is-pulse { animation: rg-guide 1.6s ease; }
@keyframes rg-guide { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,1,1,0); } 25% { box-shadow: 0 0 0 4px rgba(251,1,1,.18); border-color: var(--red); } 60% { box-shadow: 0 0 0 0 rgba(251,1,1,0); } }
@media (max-width: 760px) { .rv__q, .rv__qsum { max-width: none !important; width: 100%; } .rv__body { width: 100%; } }
/* Verified badge right next to the reviewer's name */
.rv__nm { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv__vb { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 3px; border-radius: 999px; background: #E9F7EE; color: #1E8E3E; font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .02em; white-space: nowrap; }
.rv__vb svg { width: 15px; height: 15px; fill: #1E8E3E; }
.rv__vb { padding: 0 !important; background: none !important; } .rv__vb svg { width: 17px !important; height: 17px !important; fill: #1D9BF0 !important; }
/* Reviews on computers: larger, easier to read */
@media (min-width: 761px) {
  .rv__sum > b { font-size: 36px !important; } .rv__sum .rv__st { font-size: 17px; } .rv__sum small { font-size: 13.5px !important; }
  .rv__qsum, .rv__q { max-width: 280px !important; } .rv__q > small { font-size: 13px !important; } .rv__ql small { font-size: 11.5px !important; }
  .rv__wr, .rv__ask { height: 44px !important; padding: 0 26px !important; font-size: 14px !important; }
  .rv__sort, .rv__sort select, .rv__search, .rv__search input, .rv__tabs button { font-size: 14px !important; }
  .rv { grid-template-columns: 240px minmax(0, 1fr) !important; padding: 32px 0 !important; }
  .rv__who b { font-size: 16px !important; } .rv__who small { font-size: 12.5px !important; } .rv__av { width: 44px !important; height: 44px !important; font-size: 15px !important; }
  .rv__body .rv__st { font-size: 16px; } .rv__pn { font-size: 15px !important; margin-top: 8px !important; }
  .rv__body p { font-size: 15px !important; line-height: 1.65 !important; max-width: 760px; }
  .rv__date { font-size: 12.5px !important; } .rv__help, .rv__help button { font-size: 12.5px !important; }
}
/* Footer: less empty space above the big word */
@media (min-width: 761px) { .ftr__in { padding-bottom: 8px !important; } .ftr__word { padding-top: 0 !important; margin-top: -18px; } }
/* Card hover (computers): picture stays the same; the quick-add band fades in and rises from the bottom */
.card:hover .card__img--back, .card .card__img--back { opacity: 0 !important; }
.card:hover .card__img { transform: none !important; }
@media (hover: hover) and (min-width: 761px) {
  .card .card__quick, .card .card__quick[hidden] { display: flex !important; opacity: 0; transform: translateY(100%); pointer-events: none; transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1); }
  .card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; pointer-events: auto; }
  .card .card__media { overflow: hidden; }
}
/* Shop mega menu, refined */
.mega__in { display: flex !important; align-items: flex-start; gap: 56px !important; padding: 34px var(--pad) 30px !important; }
.mega__big { min-width: 190px; padding-right: 48px !important; border-right: 1px solid #ECEAE6 !important; display: flex; flex-direction: column; gap: 14px; }
.mega__big a { font: 800 15px 'Outfit', sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase; color: #141414; position: relative; display: inline-block; }
.mega__big a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.mega__big a:hover::after { transform: scaleX(1); }
.mega__grp { min-width: 170px; } .mega__grp h6 { font: 700 11px 'Outfit', sans-serif !important; letter-spacing: .16em !important; color: #8C8884 !important; margin: 2px 0 14px !important; text-transform: uppercase; }
.mega__grp ul { display: flex; flex-direction: column; gap: 10px; } .mega__grp a { font-size: 14px !important; color: #3A3734 !important; transition: color .15s, padding .15s; }
.mega__grp a:hover { color: #141414 !important; padding-left: 4px; }
.mega__feat { position: relative; display: block; width: 230px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #F2F2F0; flex: none; }
.mega__feat:first-of-type { margin-left: auto; }
.mega__feat img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .mega__feat:hover img { transform: scale(1.04); }
.mega__feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); }
.mega__feat span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; color: #fff; }
.mega__feat b { font: 800 15px 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; } .mega__feat em { font-style: normal; font-size: 12px; opacity: .9; }
.mega__foot { background: #F7F6F4 !important; border-top: 1px solid #ECEAE6 !important; padding: 12px var(--pad) !important; justify-content: center; }
.mega__foot a { font-size: 12.5px !important; color: #6E6A66 !important; } .mega__foot a:hover { color: #141414 !important; }
.mega .mega__feat { position: relative !important; display: block !important; padding: 0 !important; } .mega .mega__feat span { position: absolute !important; }
@media (hover: hover) and (min-width: 761px) { .card .card__quick, .card .card__quick[hidden] { transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1) !important; } }
/* Consistency: form controls use the site fonts (browsers default them to Arial) */
button, input, select, textarea, optgroup { font-family: inherit; }
.prow__b { font-family: 'Outfit', sans-serif; }
.feature--clean::after, .feature--clean::before { display: none !important; }
/* Track order: live updates list */
.st__now { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red); padding: 2px 6px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; }
.trk__state { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; font-weight: 600; border-radius: 2px; } .trk__state--ok { background: #EEF8F1; color: #1E8E3E; } .trk__state--bad { background: #FFF0F0; color: #C40000; }
.trk__uh { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 8px; } .trk__uh b { font: 700 12.5px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; } .trk__uh .sub { font-size: 11.5px; color: #8C8884; }
.trk__upd { list-style: none; margin: 0 0 18px; padding: 0; position: relative; }
.trk__upd::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: #E5E3DF; }
.trk__upd li { position: relative; display: flex; gap: 14px; padding: 6px 0 10px; }
.tu__dot { position: relative; z-index: 1; flex: none; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: #fff; border: 2px solid #C9C6C2; }
.trk__upd li.is-new .tu__dot { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 4px rgba(251,1,1,.12); }
.trk__upd b { display: block; font-size: 13.5px; } .trk__upd p { margin: 2px 0 0; font-size: 13px; color: #4A4744; } .trk__upd time { display: block; margin-top: 2px; font-size: 11.5px; color: #8C8884; }
/* Order updates offer */
.pnf { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 0; padding: 16px; border: 1px solid #E8E6E3; border-left: 3px solid var(--red); background: #fff; text-align: left; border-radius: 2px; }
.pnf__ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #FFF0F0; display: grid; place-items: center; color: var(--red); font-weight: 800; }
.pnf__ic svg { width: 19px; height: 19px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnf__ic--ok { background: #E9F7EE; color: #1E8E3E; }
.pnf__t b { display: block; font: 700 14px 'Outfit', sans-serif; } .pnf__t p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: #5A5754; }
.pnf__b { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pnf__yes { height: 38px; padding: 0 16px; border: 0; background: #141414; color: #fff; font: 700 12px 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; cursor: pointer; }
.pnf__no { height: 38px; padding: 0 14px; border: 1px solid #DAD8D4; background: #fff; color: #141414; font: 600 12px 'Manrope', sans-serif; border-radius: 2px; cursor: pointer; }
.pnf__m { display: block; margin-top: 8px; font-size: 11.5px; color: #77736F; min-height: 0; }
.pnf.is-on { border-left-color: #1E8E3E; }
/* Courier progress under "With courier", and the rider card */
.steps .st__sub { grid-column: 1 / -1; list-style: none; margin: 2px 0 -8px 6px; padding: 4px 0 6px 26px; border-left: 2px solid var(--line2); display: grid; gap: 8px; }
.steps li.is-done .st__sub { border-left-color: var(--ink); }
.st__sub li { display: flex !important; justify-content: space-between; gap: 12px; padding: 0 !important; font-size: 12.5px; color: #77736F; }
.st__sub li::before { display: none; }
.st__sub li b { font-weight: 500; } .st__sub li time { flex: none; font-size: 11.5px; color: #A8A4A0; }
.st__sub li.is-new { color: var(--ink); } .st__sub li.is-new b { font-weight: 600; }
.st__sub li.is-ofd b { color: var(--red); font-weight: 700; }
.rdr { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding: 14px 16px; border: 1px solid #E8E6E3; border-left: 3px solid var(--red); background: #FFF8F7; border-radius: 2px; }
.rdr__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.rdr__k { font: 700 10.5px 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.rdr__t > b { font: 700 16px 'Outfit', sans-serif; }
.rdr__pay { margin-top: 4px; font-size: 13px; } .rdr__pay b { font-weight: 800; }
.rdr__call { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: #141414; color: #fff; text-decoration: none; font: 700 12px 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
.rdr__call svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
/* Get the app band (homepage) */
.appband { border-top: 1px solid #ECEAE7; background: #FAFAF9; }
.appband__in { max-width: 1180px; margin: 0 auto; padding: 22px 16px; display: flex; align-items: center; gap: 16px; }
.appband__in img { flex: none; width: 56px; height: 56px; border: 1px solid #ECEAE7; border-radius: 12px; }
.appband__t { flex: 1; display: grid; gap: 3px; min-width: 0; }
.appband__t strong { font: 700 16px 'Outfit', sans-serif; } .appband__t span { font-size: 13px; color: #5A5754; line-height: 1.5; }
.appband__btn { flex: none; height: 44px; padding: 0 22px; border: 0; background: #141414; color: #fff; font: 700 12px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; cursor: pointer; }
.appband__btn:hover { background: var(--red); }
.appband__ios { max-width: 1180px; margin: -8px auto 0; padding: 0 16px 18px; font-size: 13px; color: #141414; }
@media (max-width: 640px) { .appband__in { flex-wrap: wrap; } .appband__btn { width: 100%; } }
/* Get the app section (Blakely style): picture left, words and two buttons right */
.appband { display: none; }
.appsec { display: grid; grid-template-columns: 1.9fr 1fr; align-items: center; gap: 0; padding: 0 !important; max-width: none !important; background: #fff; }
.appsec__img { background: #F2F1EF; aspect-ratio: 16 / 11; overflow: hidden; }
.appsec__img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appsec__ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #F6F5F3, #E9E7E3); }
.appsec__ph img { width: 34%; max-width: 200px; height: auto; border-radius: 22%; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.appsec__t { padding: 32px 48px; max-width: 420px; }
.appsec__t h2 { margin: 0 0 14px; font: 500 20px/1.3 'Outfit', sans-serif; letter-spacing: .01em; text-transform: none; text-align: left; }
.appsec__t p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #3A3835; }
.appsec__b { display: grid; gap: 14px; justify-items: start; }
.appsec__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border: 0; background: #141414; color: #fff; font: 600 13px 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: background .2s; }
@media (hover: hover) { .appsec__btn:hover { background: var(--red); } }
.appsec__btn svg { width: 17px; height: 17px; fill: currentColor; }
.appsec__help { margin: 16px 0 0 !important; padding: 12px 14px; background: #F6F5F3; border-left: 3px solid var(--red); font-size: 13px !important; color: #141414 !important; border-radius: 2px; }
@media (max-width: 760px) { .appsec { grid-template-columns: 1fr; } .appsec__t { padding: 24px 16px 8px; max-width: none; } .appsec__b { justify-items: stretch; gap: 10px; } .appsec__btn { justify-content: center; } }
/* First-open alerts popup in the installed app */
.apm { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.apm__bg { position: absolute; inset: 0; background: rgba(20,20,20,.45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.apm__box { position: relative; width: 100%; max-width: 440px; background: #fff; padding: 26px 22px calc(20px + env(safe-area-inset-bottom)); text-align: center; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.apm.is-on .apm__bg { opacity: 1; } .apm.is-on .apm__box { transform: none; }
.apm__logo { display: block; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 15px; border: 1px solid #ECEAE7; }
.apm__box h2 { margin: 0 0 6px; font: 700 20px/1.3 'Outfit', sans-serif; }
.apm__sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #5A5754; }
.apm__list { list-style: none; margin: 0 0 14px; padding: 14px 16px; background: #F7F6F4; display: grid; gap: 10px; text-align: left; border-radius: 2px; }
.apm__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: #141414; }
.apm__list svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #1E8E3E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.apm__trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 16px; font-size: 12px; color: #77736F; }
.apm__trust svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.apm__yes { display: block; width: 100%; height: 50px; border: 0; background: #141414; color: #fff; font: 700 13px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; cursor: pointer; }
.apm__no { display: block; width: 100%; height: 44px; margin-top: 6px; border: 0; background: none; color: #5A5754; font: 600 13px 'Manrope', sans-serif; cursor: pointer; }
html.apm-open { overflow: hidden; }
@media (min-width: 640px) { .apm { align-items: center; } .apm__box { border-radius: 2px; transform: translateY(16px); opacity: 0; transition: transform .25s, opacity .25s; } .apm.is-on .apm__box { opacity: 1; } }
/* Get the app: same width and spacing as the other sections, not taller than the screen */
.appsec { padding: 0 40px !important; margin: 56px 0 0; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.appsec__img { aspect-ratio: 16 / 10; max-height: 560px; width: 100%; }
.appsec__t { padding: 32px 56px; }
@media (max-width: 760px) { .appsec { padding: 0 !important; margin-top: 36px; grid-template-columns: 1fr; } .appsec__b { justify-items: stretch; } .appsec__img { max-height: 420px; } .appsec__t { padding: 22px 16px 4px; } }
/* Spacing audit: a calm rhythm. Product rows breathe, titles sit close to what they name,
   big picture blocks and the sign-up band get a little more air. */
.is-home .sec { padding-top: 44px; }
.is-home .hero + .sec { padding-top: 28px; }
.is-home .sec__title, .is-home .sec__head .sec__title { margin-bottom: 10px !important; }
.is-home .sec--feature, .is-home .sec.promo { padding-top: 56px; }
.is-home .appsec { margin-top: 64px; }
.is-home .nlband { margin-top: 72px; }
.pp ~ .sec { padding-top: 64px; }
@media (max-width: 760px) {
  .is-home .sec { padding-top: 32px; }
  .is-home .hero + .sec { padding-top: 20px; }
  .is-home .sec__title, .is-home .sec__head .sec__title { margin-bottom: 6px !important; }
  .is-home .sec--feature, .is-home .sec.promo { padding-top: 36px; }
  .is-home .appsec { margin-top: 44px; }
  .is-home .nlband { margin-top: 48px; }
  .pp ~ .sec { padding-top: 44px; }
}
.bk-fit[hidden], [data-look-msg][hidden] { display: none !important; }
.nlband { margin-top: 64px; }
@media (max-width: 760px) { .nlband { margin-top: 44px; } }
/* Phones: the room under the footer for the bottom menu is part of the footer, not a white strip */
@media (max-width: 760px) { body:has(> .ftr, footer.ftr) { padding-bottom: 0; } body:has(footer.ftr) .ftr { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }
/* Phones: homepage product rows are a 2-column list (no sideways slide), up to 6 products */
@media (max-width: 760px) {
  .prow__t { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; overflow: visible !important; scroll-snap-type: none !important; gap: 14px 2px !important; }
  .prow__t::after { display: none !important; }
  .prow__t > .card:nth-child(n+7) { display: none !important; }
  .prow__b { display: none !important; }
}
/* Get the app: show the whole picture (no cropping), text a little bigger and closer */
.appsec { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
.appsec__img { aspect-ratio: auto !important; max-height: none !important; background: transparent; }
.appsec__img > img { height: auto !important; object-fit: contain !important; }
.appsec__t { padding: 32px 48px 32px 64px; max-width: 460px; }
.appsec__t h2 { font-size: 24px; margin-bottom: 12px; }
.appsec__t p { font-size: 15px; }
@media (max-width: 760px) { .appsec__t { padding: 22px 16px 4px; max-width: none; } .appsec__t h2 { font-size: 20px; } .appsec__t p { font-size: 14px; } }
@media (max-width: 760px) {
  .appsec { grid-template-columns: 1fr !important; }
  .appsec__img { padding: 0 16px; }
  .appsec__b { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; justify-items: stretch !important; }
  .appsec__btn { justify-content: center; padding: 0 8px !important; font-size: 11px !important; letter-spacing: .04em !important; white-space: nowrap; }
}
@media (max-width: 360px) { .appsec__b { grid-template-columns: 1fr !important; } }
.appsec__ph { aspect-ratio: 16 / 10; }
/* Install buttons: store-badge style, two lines, clear icon */
.appsec__btn { height: 54px !important; padding: 0 18px 0 14px !important; gap: 12px !important; text-transform: none !important; letter-spacing: 0 !important; border: 1px solid #141414; text-align: left; justify-content: flex-start !important; min-width: 190px; }
.appsec__btn svg { width: 26px !important; height: 26px !important; flex: none; }
.appsec__btn span { display: grid; line-height: 1.1; }
.appsec__btn small { font: 500 10.5px 'Manrope', sans-serif; letter-spacing: .02em; opacity: .8; }
.appsec__btn b { font: 700 17px 'Outfit', sans-serif; letter-spacing: .01em; }
.appsec__safe { display: flex; align-items: center; gap: 6px; margin: 14px 0 0 !important; font-size: 12px !important; color: #5A5754 !important; }
.appsec__safe svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #1E8E3E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 761px) { .appsec__b { display: flex !important; flex-wrap: wrap; gap: 12px !important; } }
@media (max-width: 760px) { .appsec__btn { min-width: 0; height: 52px !important; padding: 0 12px !important; justify-content: center !important; white-space: normal; } .appsec__btn b { font-size: 15.5px; } .appsec__btn svg { width: 22px !important; height: 22px !important; } .appsec__safe { justify-content: center; font-size: 11.5px !important; } }
@media (min-width: 761px) {
  .appsec__t { padding: 32px 40px 32px 56px; max-width: 540px; }
  .appsec__b { flex-wrap: nowrap !important; }
  .appsec__btn { min-width: 0 !important; flex: 1 1 0; max-width: 210px; }
}
/* Footer: Facebook page card under the logo */
.fbcard { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 19rem; margin: 18px 0 4px; padding: 10px 12px; background: linear-gradient(135deg, #FAFAFA, #ECEEF1); border: 1px solid #E5E7EB; border-radius: 12px; color: #111; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 1px #fff; }
.fbcard__i { flex: none; width: 40px; height: 40px; padding: 3px; border-radius: 8px; background: linear-gradient(180deg, #F4F4F5, #D4D4D8); border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.fbcard__i svg { display: block; width: 100%; height: 100%; padding: 7px; box-sizing: border-box; border-radius: 6px; background: #1877F2; fill: #fff; }
.fbcard__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fbcard__t b { font: 700 13px 'Outfit', sans-serif; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbcard__t small { font-size: 11px; font-weight: 500; color: #6B7280; margin-top: 2px; }
.fbcard__b { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: linear-gradient(180deg, #2D88FF, #1877F2); color: #fff; font: 600 12px 'Manrope', sans-serif; box-shadow: 0 3px 10px rgba(24,119,242,.4), inset 0 1px 1px rgba(255,255,255,.35); }
.fbcard__b::before { content: ""; width: 12px; height: 12px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21V10l4-8c2 0 3 1.5 2.5 3.5L14 9h6a2 2 0 0 1 2 2.3l-1.5 8A2 2 0 0 1 18.5 21z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21V10l4-8c2 0 3 1.5 2.5 3.5L14 9h6a2 2 0 0 1 2 2.3l-1.5 8A2 2 0 0 1 18.5 21z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fbcard:hover .fbcard__b { filter: brightness(1.06); }
.ftr__brand .fbcard + .ftr__social { margin-top: 14px; }
@media (max-width: 760px) { .fbcard { max-width: 100%; } }
/* Footer: one card per social page (same look as the Facebook card) */
.socards { display: grid; gap: 10px; margin-top: 18px; max-width: 19rem; }
.socards .fbcard { margin: 0; }
.fbcard__ic { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 6px; color: #fff; }
.fbcard__ic svg { width: 20px; height: 20px; }
.fbcard--instagram .fbcard__ic { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.fbcard--tiktok .fbcard__ic { background: #111; }
.fbcard--whatsapp .fbcard__ic { background: #25D366; }
.fbcard__b:not(.fbcard__b--like)::before { display: none; }
.fbcard--instagram .fbcard__b { background: linear-gradient(90deg, #F58529, #DD2A7B 55%, #8134AF); box-shadow: 0 3px 10px rgba(221,42,123,.35), inset 0 1px 1px rgba(255,255,255,.35); }
.fbcard--tiktok .fbcard__b { background: linear-gradient(180deg, #2A2A2A, #111); box-shadow: 0 3px 10px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.2); }
.fbcard--whatsapp .fbcard__b { background: linear-gradient(180deg, #2FE07A, #1EBE5D); box-shadow: 0 3px 10px rgba(37,211,102,.4), inset 0 1px 1px rgba(255,255,255,.35); }
@media (max-width: 760px) { .socards { max-width: 100%; } }
.fbcard__ic svg { fill: none !important; stroke: #fff !important; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fbcard__ic svg { background: none !important; padding: 0 !important; border-radius: 0 !important; width: 22px !important; height: 22px !important; }
/* Social cards: a tidy 2-column grid of small cards (icon, name, Follow us) */
.socards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 22rem; }
.socards .fbcard { max-width: none; gap: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 1px 1px #fff; transition: transform .15s; }
.socards .fbcard:hover { transform: translateY(-2px); }
.socards .fbcard__i { width: 34px; height: 34px; padding: 2px; border-radius: 8px; }
.socards .fbcard__i > svg { padding: 6px; }
.socards .fbcard__ic svg { width: 18px !important; height: 18px !important; }
.socards .fbcard__t b { font-size: 13px; } .socards .fbcard__t small { font-size: 11px; margin-top: 1px; }
@media (max-width: 760px) { .socards { max-width: 100%; } }
/* Computer: WhatsApp card sits on the far right, under Contact; phones keep it with the other cards */
.wa-card { display: none; }
@media (min-width: 761px) {
  .socards .fbcard--whatsapp { display: none; }
  .wa-link { display: none !important; }
  .wa-card { display: flex; width: calc((22rem - 8px) / 2); max-width: 100%; margin-top: 6px; gap: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 1px 1px #fff; }
  .wa-card .fbcard__i { width: 34px; height: 34px; padding: 2px; border-radius: 8px; }
  .wa-card .fbcard__ic svg { width: 18px !important; height: 18px !important; }
  .wa-card .fbcard__t b { font-size: 13px; color: #18181B; } .wa-card .fbcard__t small { font-size: 11px; color: #6B7280; }
}
/* WhatsApp lives under Contact on every screen; the social cards keep Facebook and Instagram side by side */
.socards .fbcard--whatsapp { display: none !important; }
.wa-link { display: none !important; }
.wa-card { display: flex !important; width: calc((22rem - 8px) / 2); max-width: 100%; margin-top: 6px; gap: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 1px 1px #fff; }
.wa-card .fbcard__i { width: 34px; height: 34px; padding: 2px; border-radius: 8px; }
.wa-card .fbcard__ic svg { width: 18px !important; height: 18px !important; }
.wa-card .fbcard__t b { font-size: 13px; color: #18181B; } .wa-card .fbcard__t small { font-size: 11px; color: #6B7280; }
/* Footer tidy: brand column starts on the same line as the column titles, even gaps, cards aligned */
.ftr__brand { display: flex; flex-direction: column; align-items: flex-start; }
.ftr__brand > img { display: block; width: auto !important; height: 30px !important; max-width: 160px; object-fit: contain; object-position: left center; margin: -6px 0 0 !important; }
.ftr__brand > p { margin: 14px 0 0 !important; }
.ftr__brand .socards { margin-top: 20px; width: 100%; }
.ftr__col .wa-card { margin-top: 14px; }
@media (max-width: 760px) { .ftr__brand > img { height: 28px !important; margin: 0 !important; } }
.ftr__brand { gap: 0 !important; } .ftr__brand > p { margin-top: 12px !important; }
/* Footer logo: a fixed 150 x 44 box; extra empty space around an uploaded logo is trimmed off (cover), so the logo stays big */
.ftr__brand > img { width: 150px !important; height: 44px !important; max-width: none; object-fit: cover !important; object-position: center !important; margin: -8px 0 0 !important; }
@media (max-width: 760px) { .ftr__brand > img { width: 136px !important; height: 40px !important; margin: 0 !important; } }
/* Footer logo: the server trims empty space, so a plain height keeps it the right size */
.ftr__brand > img { width: auto !important; height: 34px !important; max-width: 190px; object-fit: contain !important; object-position: left center !important; margin: -6px 0 0 !important; }
@media (max-width: 760px) { .ftr__brand > img { height: 30px !important; margin: 0 !important; } }
/* Messenger chat button (bottom right) */
.msgr { position: fixed; right: 20px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border-radius: 26px; background: linear-gradient(135deg, #00B2FF, #006AFF 45%, #A033FF 80%, #FF5C87); color: #fff; text-decoration: none; font: 600 14px 'Manrope', sans-serif; box-shadow: 0 8px 24px rgba(0,106,255,.35); transition: transform .15s, box-shadow .15s; }
.msgr:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,106,255,.45); }
.msgr svg { width: 24px; height: 24px; fill: #fff; flex: none; }
@media (max-width: 760px) {
  .msgr { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; }
  .msgr__t { display: none; }
  body:has(.mbar) .msgr { bottom: calc(132px + env(safe-area-inset-bottom)); }
}
body:has(.qs.is-open, .bag.is-open, .apm, [data-checkout]) .msgr { display: none; }
/* Messenger button: round only, Messenger colours */
.msgr { width: 56px !important; height: 56px !important; padding: 0 !important; justify-content: center; border-radius: 50% !important; background: radial-gradient(circle at 20% 100%, #0099FF 0%, #A033FF 60%, #FF5280 90%, #FF7061 100%) !important; }
.msgr__t { display: none !important; }
.msgr svg { width: 28px !important; height: 28px !important; }
@media (max-width: 760px) { .msgr { width: 50px !important; height: 50px !important; } .msgr svg { width: 26px !important; height: 26px !important; } }
body.is-home .msgr { display: none !important; }
/* Filter and Sort drop-downs: one clean style, same font size everywhere */
.cbar .cbar__t, .cbar .cdd summary { font: 600 14px 'Outfit', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink); }
.cbar .cdd summary b { font-weight: 600; }
.cbar .cdd summary::after { content: "" !important; width: 7px; height: 7px; margin: -3px 0 0 4px !important; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.cbar .cdd[open] summary::after { transform: rotate(-135deg); margin-top: 4px !important; }
.cbar .cdd__p:has(.copt) { display: grid !important; grid-template-columns: 1fr; gap: 0 !important; min-width: 220px; padding: 6px !important; border: 1px solid #E8E6E3; border-radius: 2px; box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.cbar .cdd__p .copt { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; padding: 10px 12px !important; border: 0 !important; background: none !important; border-radius: 2px; font: 500 14px 'Manrope', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #3A3835 !important; white-space: nowrap; }
.cbar .cdd__p .copt:hover { background: #F5F4F2 !important; color: var(--ink) !important; }
.cbar .cdd__p .copt.is-on { color: var(--ink) !important; font-weight: 700 !important; }
.cbar .cdd__p .copt.is-on::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translateY(-2px); }
.cbar .cdd--sort .cdd__p { left: auto !important; right: 0; }
.cbar .cdd--sort { position: relative !important; display: block; } .cbar .cdd--sort .cdd__p { top: calc(100% + 12px); right: -6px; left: auto !important; }
/* Collection bar: lines up with the product grid edges; Clear all in the same size */
@media (min-width: 761px) { .cbar { padding-left: 16px !important; padding-right: 16px !important; } }
.cbar .cbar__clear { font: 500 14px 'Manrope', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #77736F !important; text-decoration: none !important; margin-left: 4px; }
.cbar .cbar__clear:hover { color: var(--ink) !important; text-decoration: underline !important; }
.cbar .cbar__l { gap: 22px !important; align-items: center; }
/* Filters: chosen value shown in the bar, small count badge, long lists scroll */
.cbar .cdd summary b { font-weight: 700; color: var(--ink); }
.cbar .cdd.is-set > summary { color: var(--ink); }
.cdd__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: #fff; font: 700 10.5px 'Manrope', sans-serif; font-style: normal; }
.cbar .cdd__p:has(.copt) { max-height: 360px; overflow-y: auto; }
/* ===== Collection bar, rebuilt (computer): title + count and Sort on top; filter buttons below; chosen filters as chips ===== */
@media (min-width: 761px) {
  .cbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title sort" "filters filters" "act act"; align-items: center; gap: 0 16px; padding: 22px 16px 14px !important; border-top: 0 !important; border-bottom: 1px solid #EEECE9 !important; background: #fff; }
  .cbar > .cbar__dt { grid-area: title; position: static !important; transform: none !important; display: flex; align-items: baseline; gap: 12px; text-align: left; font: 700 26px/1.1 'Outfit', sans-serif !important; letter-spacing: .01em !important; text-transform: uppercase; color: var(--ink); }
  .cbar > .cbar__dt small { font: 500 13px 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; color: #8A8682; }
  .cbar > .cdd--sort { grid-area: sort; justify-self: end; }
  .cbar > .cbar__l { grid-area: filters; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin-top: 16px; }
  .cbar > .cbar__act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
  .cbar .cbar__t { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font: 600 12px 'Outfit', sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #8A8682 !important; }
  .cbar .cbar__t svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .cbar .cdd > summary { height: 38px; padding: 0 14px; border: 1px solid #E3E1DE; border-radius: 2px; background: #fff; font: 600 13.5px 'Outfit', sans-serif !important; transition: border-color .15s, background .15s; }
  .cbar .cdd > summary:hover, .cbar .cdd[open] > summary { border-color: var(--ink); }
  .cbar .cdd.is-set > summary { border-color: var(--ink); background: #F6F5F3; }
  .cbar .cdd--sort > summary { border-color: transparent; padding-right: 2px; }
  .cbar .cdd--sort > summary:hover, .cbar .cdd--sort[open] > summary { border-color: transparent; }
  .cbar .cdd__p { top: calc(100% + 6px) !important; left: 0 !important; }
  .cbar .cdd--sort .cdd__p { left: auto !important; right: -6px !important; }
  .achip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border-radius: 2px; background: #141414; color: #fff; text-decoration: none; font: 600 12.5px 'Manrope', sans-serif; }
  .achip i { font-style: normal; font-size: 15px; line-height: 1; opacity: .75; }
  .achip:hover i { opacity: 1; }
  .cbar__act .cbar__clear { margin-left: 4px; }
}
@media (min-width: 761px) { .cbar > .cbar__dt { margin: 0 !important; padding: 0 !important; } }
@media (max-width: 760px) { .cbar > .cbar__act, .cbar > .cdd--sort, .cbar > .cbar__l, .cbar > .cbar__dt { display: none !important; } }
/* ===== Filter & sort: one slim bar + a side drawer (phone and computer) ===== */
.cbar > .cbar__l, .cbar > .cbar__dt, .cbar > .cdd--sort { display: none !important; }
.cbar { display: block !important; padding: 14px 16px !important; border-bottom: 0 !important; }
.cbar__mm { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; border: 0 !important; border-top: 1px solid #EEECE9 !important; border-bottom: 1px solid #EEECE9 !important; border-radius: 0; }
.cbar__mm > button { height: 50px !important; background: none !important; border: 0 !important; padding: 0 !important; font: 600 12px 'Outfit', sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.cbar__mm > button:first-child { justify-self: start; } .cbar__mm > button:last-child { justify-self: end; }
.cbar__mm > button + button { border-left: 0 !important; }
.cbar__mm .cbar__title { font: 700 18px 'Outfit', sans-serif; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.cbar > .cbar__act { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.achip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border-radius: 2px; background: #141414; color: #fff; text-decoration: none; font: 600 12.5px 'Manrope', sans-serif; } .achip i { font-style: normal; font-size: 15px; opacity: .75; }
.cbar__act .cbar__clear { align-self: center; font: 500 13px 'Manrope', sans-serif !important; color: #77736F !important; text-decoration: none !important; }
@media (min-width: 761px) { .cbar { padding: 8px 16px 14px !important; } .cbar__mm .cbar__title { font-size: 22px; } }
/* drawer */
.fdrw__bg { position: fixed; inset: 0; z-index: 140; background: rgba(20,20,20,.4); opacity: 0; transition: opacity .25s; }
.fdrw__bg.is-on { opacity: 1; } .fdrw__bg[hidden] { display: none; }
.fpanel.fdrw { position: fixed !important; top: 0; right: 0; bottom: 0; z-index: 150; width: min(420px, 90vw); display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; margin: 0; background: #fff; border: 0 !important; box-shadow: -20px 0 50px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.fpanel.fdrw.is-on { transform: none; } .fpanel.fdrw[hidden] { display: none !important; }
html.fp-open { overflow: hidden; }
.fdrw__h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #EEECE9; }
.fdrw__h b { font: 700 15px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.fdrw__x { width: 36px; height: 36px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.fdrw__b { flex: 1; overflow-y: auto; padding: 0 20px; }
.fdrw__g { border-bottom: 1px solid #EEECE9; }
.fdrw__g > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 18px 0; cursor: pointer; font: 600 14px 'Outfit', sans-serif; letter-spacing: .02em; color: var(--ink); }
.fdrw__g > summary::-webkit-details-marker { display: none; }
.fdrw__g > summary em { margin-left: auto; font: 500 13px 'Manrope', sans-serif; font-style: normal; color: #77736F; }
.fdrw__g > summary::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.fdrw__g > summary:not(:has(em))::after { margin-left: auto; }
.fdrw__g[open] > summary::after { transform: rotate(-135deg); }
.fdrw__o { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 18px; }
.fdrw__o .chip { height: 38px !important; padding: 0 14px !important; border: 1px solid #DAD8D4 !important; border-radius: 2px !important; background: #fff !important; display: inline-flex !important; align-items: center; font: 600 13px 'Manrope', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; text-decoration: none; }
.fdrw__o .chip.is-on { background: #141414 !important; border-color: #141414 !important; color: #fff !important; }
.fdrw__o .copt.is-on::after { display: none; }
.fdrw__o .ccol { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border: 1px solid #DAD8D4; border-radius: 2px; font: 600 13px 'Manrope', sans-serif; color: var(--ink); text-decoration: none; }
.fdrw__o .ccol.is-on { border-color: #141414; box-shadow: inset 0 0 0 1px #141414; }
.fdrw__o .ccol i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.fdrw__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #EEECE9; }
.fdrw__clear { font: 600 13px 'Manrope', sans-serif; color: var(--ink); text-decoration: underline; }
.fdrw__go { height: 48px; padding: 0 22px; border: 0; background: #141414; color: #fff; border-radius: 2px; font: 700 12.5px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; flex: 1; max-width: 240px; }
.cbar { display: flex !important; flex-direction: column; }
.cbar > .cbar__mm { order: 1; } .cbar > .cbar__act { order: 2; }
.cbar__mm > button { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; }
.cbar__mm > button svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cbar__mm .cbar__title { display: block !important; }
.cbar__mm .cbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; }
.fpanel.fdrw > * { width: 100%; box-sizing: border-box; }
.fdrw__h { justify-content: space-between !important; }
/* Product page: quantity and Buy Now */
.buy__qty { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; font: 600 13px 'Manrope', sans-serif; }
.qtyb { display: inline-flex; align-items: center; height: 40px; border: 1px solid #DAD8D4; border-radius: 2px; }
.qtyb button { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.qtyb input { width: 44px; height: 100%; border: 0; text-align: center; font: 700 14px 'Manrope', sans-serif; -moz-appearance: textfield; }
.qtyb input::-webkit-inner-spin-button, .qtyb input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.buy__btns { display: grid; gap: 8px; }
.buy__now { height: 52px; border: 1px solid #141414; background: #fff; color: #141414; border-radius: 2px; font: 700 13px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.buy__now:hover { background: #141414; color: #fff; }
/* Sitemap: header Sale in red, mega menu Shop / Categories / Featured, footer with 5 columns and legal links */
.hdr__top--sale { color: var(--red) !important; }
.mega__in { display: grid !important; grid-template-columns: 1fr 1fr 2fr; gap: 40px; }
.mega__fts h6, .mega__grp h6 { margin: 0 0 14px; font: 700 11px 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A8682; }
.mega__fts > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mega__fts .mega__feat { margin: 0 !important; }
.drawer__h { display: block; margin: 18px 0 4px; font: 700 11px 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A8682; }
@media (min-width: 761px) { .ftr__in { grid-template-columns: 1.4fr repeat(5, 1fr) !important; } }
.ftr__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ftr__legal { display: flex; gap: 20px; } .ftr__legal a { color: inherit; opacity: .75; text-decoration: none; font-size: 13px; } .ftr__legal a:hover { opacity: 1; }
/* Mega menu, organised: two short lists on the left, two featured pictures together on the right; caption under the picture */
.mega__in { grid-template-columns: 200px 220px 1fr !important; gap: 48px !important; align-items: start; }
.mega__fts { justify-self: end; }
.mega__fts > div { grid-template-columns: repeat(2, 210px) !important; gap: 16px !important; }
.mega__fts .mega__feat { width: 210px !important; aspect-ratio: auto !important; background: none !important; overflow: visible !important; margin: 0 !important; }
.mega__fts .mega__feat img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto !important; object-fit: cover; border-radius: 2px; background: #F2F2F0; }
.mega__fts .mega__feat:hover img { transform: none; opacity: .92; }
.mega__fts .mega__feat::after { display: none !important; }
.mega__fts .mega__feat span { position: static !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; margin-top: 10px; color: var(--ink) !important; }
.mega__fts .mega__feat span b { font: 700 12px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mega__fts .mega__feat span em { font: 600 12px 'Manrope', sans-serif; font-style: normal; color: #77736F; }
.mega__fts .mega__feat:hover span em { color: var(--ink); }
.mega__grp ul { display: grid; gap: 12px; }
.mega__fts > div { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 210px; }
/* Mega menu text sizes; more featured pictures fit (3-4 get a little smaller) */
.mega__grp h6, .mega__fts h6 { font: 700 11px 'Outfit', sans-serif !important; letter-spacing: .16em !important; color: #8A8682 !important; margin-bottom: 16px !important; }
.mega__grp ul a { font: 500 14px 'Manrope', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #2A2826 !important; }
.mega__grp ul a:hover { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.mega__in { grid-template-columns: repeat(var(--mcols, 2), minmax(150px, 200px)) 1fr !important; }
.mega__fts--3 > div, .mega__fts--4 > div { grid-auto-columns: 170px !important; }
.mega__fts--3 .mega__feat, .mega__fts--4 .mega__feat { width: 170px !important; }
.mega__fts .mega__feat span b { font-size: 11.5px !important; } .mega__fts .mega__feat span em { font-size: 11.5px !important; }
/* ===== Information pages (About, Contact, policies, Wholesale): hero band, side menu, readable text, help box ===== */
.phero { background: #F6F5F3; padding: 44px 16px 40px; text-align: center; border-bottom: 1px solid #EEECE9; }
.phero__bc { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; font: 500 12px 'Manrope', sans-serif; color: #8A8682; }
.phero__bc a { color: inherit; text-decoration: none; } .phero__bc a:hover { color: var(--ink); } .phero__bc b { font-weight: 600; color: #3A3835; }
.phero h1 { margin: 0; font: 700 clamp(26px, 3vw, 38px)/1.15 'Outfit', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.pwrap { max-width: 1120px; margin: 0 auto; padding: 48px 16px 72px; }
.pwrap--nav { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.pnav { position: sticky; top: 96px; display: grid; gap: 2px; border-left: 1px solid #EEECE9; }
.pnav a { padding: 9px 0 9px 18px; margin-left: -1px; border-left: 2px solid transparent; font: 500 14px 'Manrope', sans-serif; color: #5A5754; text-decoration: none; }
.pnav a:hover { color: var(--ink); }
.pnav a[aria-current="page"] { border-left-color: var(--ink); color: var(--ink); font-weight: 700; }
.pwrap .page { max-width: 720px; margin: 0; padding: 0; }
.pwrap:not(.pwrap--nav) .page { margin: 0 auto; }
.pwrap .page > h1 { display: none; }
.pwrap .page h2 { margin: 36px 0 12px; font: 700 20px/1.3 'Outfit', sans-serif; letter-spacing: .01em; text-transform: none; }
.pwrap .page h2:first-child { margin-top: 0; }
.pwrap .page h3 { margin: 26px 0 8px; font: 700 16px 'Outfit', sans-serif; }
.pwrap .page p { margin: 0 0 16px; font: 400 15.5px/1.75 'Manrope', sans-serif; color: #3A3835; }
.pwrap .page .btn { margin-top: 8px; }
.pwrap .page__faq { padding: 16px 0; } .pwrap .page__faq summary { font-size: 15px; }
/* contact cards */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; }
.pcard { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #E8E6E3; border-radius: 2px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.pcard:hover { border-color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.pcard__i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #F4F3F1; }
.pcard__i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcard__i--wa { background: #E8F9EF; color: #1EBE5D; } .pcard__i--msg { background: #EAF2FF; color: #0A7CFF; } .pcard__i--phone { background: #FFF0F0; color: var(--red); }
.pcard__t { display: grid; gap: 2px; min-width: 0; } .pcard__t small { font: 600 11px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A8682; }
.pcard__t b { font: 600 15px 'Manrope', sans-serif; overflow-wrap: anywhere; }
/* help box */
.phelp { margin-top: 44px; padding: 22px 24px; background: #F6F5F3; border-radius: 2px; }
.phelp b { display: block; font: 700 16px 'Outfit', sans-serif; } .phelp p { margin: 4px 0 14px !important; font-size: 14px !important; }
.phelp__a { display: flex; flex-wrap: wrap; gap: 10px; }
.phelp__a a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: #fff; border: 1px solid #E3E1DE; border-radius: 2px; color: var(--ink); text-decoration: none; font: 600 13px 'Manrope', sans-serif; }
.phelp__a a:hover { border-color: var(--ink); }
.phelp__a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .pwrap--nav { grid-template-columns: 1fr; gap: 24px; }
  .pnav { position: static; display: flex; gap: 6px; overflow-x: auto; border-left: 0; padding-bottom: 4px; scrollbar-width: none; }
  .pnav a { flex: none; padding: 8px 14px; margin: 0; border: 1px solid #E3E1DE; border-radius: 2px; font-size: 13px; white-space: nowrap; }
  .pnav a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .pwrap { padding: 28px 16px 56px; } .phero { padding: 30px 16px 28px; }
  .pcards { grid-template-columns: 1fr; }
}
/* Header search on the right (computer), opens to the left */
@media (min-width: 761px) {
  .hdr__right .hdr__xs { margin-right: 8px; }
  .hdr__right .hdr__xs input { text-align: left; }
  .hdr__right .hdr__sug { left: auto; right: 0; }
}
/* Phones: every footer column open, two columns side by side, no +/- */
@media (max-width: 760px) {
  .ftr__in { display: grid !important; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .ftr__in > .ftr__brand, .ftr__in > .ftr__contact { grid-column: 1 / -1; }
  .ftr__col { border: 0 !important; }
  .ftr__col summary { padding: 0 0 12px !important; cursor: default !important; }
  .ftr__col summary::after { display: none !important; content: none !important; }
  .ftr__col > div { display: grid !important; gap: 10px; padding: 0 !important; }
}
/* Phone category sheet: quick links in a tidy 2 x 2 grid, then one clean row per category */
.catup__q--4 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.catup__q--4 a { display: flex !important; align-items: center; justify-content: center; height: 44px !important; border: 1px solid #DAD8D4 !important; background: #fff !important; color: var(--ink) !important; border-radius: 2px; font: 700 12px 'Outfit', sans-serif !important; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.catup__q--4 a:first-child { background: #141414 !important; color: #fff !important; border-color: #141414 !important; }
.catup__q--4 a.is-sale { color: var(--red) !important; }
.catup__list { display: grid; margin-top: 14px; border-top: 1px solid #EEECE9; }
.catup__r { display: flex; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid #EEECE9; color: var(--ink); text-decoration: none; }
.catup__r:active { background: #F7F6F4; }
.catup__th { flex: none; width: 52px; height: 65px; border-radius: 2px; overflow: hidden; background: #F2F1EF; }
.catup__th img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.catup__r b { flex: 1; font: 600 15px 'Outfit', sans-serif; letter-spacing: .02em; }
.catup__r svg { width: 18px; height: 18px; fill: none; stroke: #8A8682; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.catup__g { display: none !important; }
body:has(.catup:not([hidden])) .msgr { display: none !important; }
/* Phone menu: support details at the bottom */
.drawer__panel { display: flex; flex-direction: column; }
.drawer__help { margin-top: auto; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: #F6F5F3; border-top: 1px solid #EEECE9; }
.drawer__help > b { display: block; font: 700 14px 'Outfit', sans-serif; letter-spacing: .04em; } .drawer__help > span { display: block; margin: 2px 0 12px; font-size: 12.5px; color: #77736F; }
.drawer__hl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer__hl a { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid #E8E6E3; border-radius: 2px; color: var(--ink); text-decoration: none; min-width: 0; }
.drawer__hl svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer__hl a.is-wa svg { color: #1EBE5D; } .drawer__hl a.is-ms svg { color: #0A7CFF; }
.drawer__hl span { display: grid; min-width: 0; font: 600 12.5px 'Manrope', sans-serif; } .drawer__hl span small { font: 600 10px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A8682; }
.drawer__hl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.drawer:not([hidden])) .msgr { display: none !important; }
.drawer__hl a[href^="mailto:"] { grid-column: 1 / -1; } .drawer__help { border-radius: 2px; }
/* ===== Live chat widget (replaces the Messenger button) ===== */
.msgr { display: none !important; }
.lchat { position: fixed; right: 20px; bottom: 24px; z-index: 60; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #141414; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .15s; }
.lchat:hover { transform: translateY(-2px); }
.lchat svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lchat.is-open svg { opacity: .7; }
.lchat__dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.lcw { position: fixed; right: 20px; bottom: 92px; z-index: 61; width: 360px; max-width: calc(100vw - 24px); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.22); overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.lcw.is-on { opacity: 1; transform: none; } .lcw[hidden] { display: none; }
.lcw__h { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 16px; background: #141414; color: #fff; }
.lcw__av { width: 36px; height: 36px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font: 800 16px 'Outfit', sans-serif; }
.lcw__h > div { flex: 1; display: grid; } .lcw__h b { font: 700 14.5px 'Outfit', sans-serif; } .lcw__h small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .8; }
.lcw__h small i { width: 7px; height: 7px; border-radius: 50%; background: #2FE07A; }
.lcw__x { width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
.lcw__start { display: grid; gap: 10px; padding: 16px; overflow-y: auto; }
.lcw__hi { margin: 0 0 4px; padding: 10px 12px; background: #F4F3F1; border-radius: 12px 12px 12px 2px; font-size: 13.5px; line-height: 1.5; }
.lcw__start input, .lcw__start textarea, .lcw__f textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #DAD8D4; border-radius: 2px; font: 400 14px 'Manrope', sans-serif; resize: none; }
.lcw__start button { height: 46px; border: 0; border-radius: 2px; background: #141414; color: #fff; font: 700 12.5px 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.lcw__err { font-size: 12.5px; color: var(--red); }
.lcw__alt { margin-top: auto; padding: 12px 16px; border-top: 1px solid #EEECE9; font-size: 12.5px; color: #77736F; text-align: center; } .lcw__alt a { color: var(--ink); font-weight: 600; }
.lcw__m { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #F7F6F4; }
.lcm { max-width: 80%; display: grid; gap: 2px; } .lcm p { margin: 0; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.lcm small { font-size: 10.5px; color: #8A8682; padding: 0 6px; }
.lcm--out { align-self: flex-end; } .lcm--out p { background: #141414; color: #fff; border-bottom-right-radius: 4px; } .lcm--out small { text-align: right; }
.lcm--in p { background: #fff; border: 1px solid #E8E6E3; border-bottom-left-radius: 4px; }
.lcw__f { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid #EEECE9; }
.lcw__f button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #141414; color: #fff; display: grid; place-items: center; cursor: pointer; }
.lcw__f button svg { width: 18px; height: 18px; fill: currentColor; }
body.is-home .lchat { display: none !important; }
@media (max-width: 760px) {
  .lchat { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
  body:has(.mbar) .lchat { bottom: calc(132px + env(safe-area-inset-bottom)); }
  .lcw { right: 0; left: 0; bottom: 0; width: 100%; max-width: none; height: 82vh; border-radius: 16px 16px 0 0; z-index: 200; }
}
body:has(.drawer:not([hidden]), .catup:not([hidden]), .fdrw.is-on) .lchat { display: none !important; }
.lcm__img { display: block; max-width: 220px; border-radius: 12px; overflow: hidden; border: 1px solid #E8E6E3; } .lcm__img img { display: block; width: 100%; height: auto; }
.lcm--out .lcm__img { justify-self: end; }
.lcw__att { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #DAD8D4; cursor: pointer; color: #5A5754; }
.lcw__att svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lcm--wait p { opacity: .6; }
/* Chat button v2: shown everywhere (home too); a labelled pill on computers, a round button on phones; small note */
body.is-home .lchat { display: grid !important; }
body:has(.drawer:not([hidden]), .catup:not([hidden]), .fdrw.is-on) .lchat { display: none !important; }
.lchat { background: linear-gradient(135deg, #1F1F1F, #000) !important; box-shadow: 0 12px 30px rgba(0,0,0,.3), 0 0 0 4px rgba(225,6,0,.12) !important; }
.lchat::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(225,6,0,.35); animation: lcpulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes lcpulse { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .lchat::after { animation: none; } }
.lchat__t { display: none; }
@media (min-width: 761px) {
  .lchat { width: auto !important; height: 56px !important; padding: 0 22px 0 16px !important; border-radius: 28px !important; display: flex !important; align-items: center; gap: 12px; }
  .lchat__t { display: grid; text-align: left; line-height: 1.15; }
  .lchat__t b { font: 700 14px 'Outfit', sans-serif; letter-spacing: .02em; }
  .lchat__t small { display: flex; align-items: center; gap: 5px; font: 500 11px 'Manrope', sans-serif; opacity: .75; }
  .lchat__t small i { width: 7px; height: 7px; border-radius: 50%; background: #2FE07A; }
  .lcw { bottom: 92px; }
}
.lchat__note { position: fixed; right: 20px; bottom: 92px; z-index: 60; max-width: 260px; padding: 12px 34px 12px 14px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.16); font: 500 13px/1.45 'Manrope', sans-serif; color: #3A3835; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.lchat__note.is-on { opacity: 1; transform: none; } .lchat__note b { color: var(--ink); }
.lchat__note::after { content: ""; position: absolute; right: 26px; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.lchat__note button { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; color: #8A8682; cursor: pointer; }
@media (max-width: 760px) { .lchat__note { right: 12px; bottom: calc(132px + env(safe-area-inset-bottom)); } body:has(.mbar) .lchat__note { bottom: calc(194px + env(safe-area-inset-bottom)); } }
/* widget extras */
.lcw__pre { display: flex; flex-wrap: wrap; gap: 6px; } .lcw__pre button { padding: 7px 10px; border: 1px solid #DAD8D4; border-radius: 16px; background: #fff; font: 500 12.5px 'Manrope', sans-serif; cursor: pointer; } .lcw__pre button:hover { border-color: #141414; }
.lcw__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.lcw__nt { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid #EEECE9; background: #FFF8F7; color: #141414; font: 600 12.5px 'Manrope', sans-serif; cursor: pointer; }
.lcw__nt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lcw__nt.is-on { background: #E9F7EE; color: #1E7F45; cursor: default; }
.lchat { border-radius: 50% !important; }
body.is-home .lchat { display: grid !important; }
@media (min-width: 761px) { .lchat, body.is-home .lchat { display: flex !important; border-radius: 28px !important; } }

/* Chat picture viewer */
.lbx { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lbx img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; }
.lbx__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50% !important; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lcw__mem { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 7px 10px; background: #eef6f0; color: #1f6b40; font-size: 12.5px; border-radius: 2px; }
.lcw__mem svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Chat on phones: full screen like a messenger app. Inputs at 16px so iPhone does not zoom in. */
@media (max-width: 760px) {
  .lcw { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; height: 100dvh !important; border-radius: 0 !important; overflow: hidden; }
  .lcw__h { padding-top: calc(12px + env(safe-area-inset-top)); }
  .lcw__f { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .lcw input, .lcw textarea, .lcw select { font-size: 16px !important; }
  .lcm { max-width: 82%; }
  body:has(.lcw.is-on) { overflow: hidden; }
}
.appsec__note { margin: 10px 0 0; font-size: 13px; opacity: .75; }
.appsec__btn svg path { fill: none; }
/* Chat start form: quick-question chips (were white text on white, too tall) */
.lcw__start .lcw__pre button { height: auto; min-height: 32px; padding: 7px 11px; border: 1px solid #DAD8D4; border-radius: 2px; background: #F7F6F4; color: #141414; font: 500 12.5px/1.3 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; text-align: left; }
.lcw__start .lcw__pre button:hover { border-color: #141414; background: #fff; }
.lcw__start textarea { min-height: 84px; }
/* Chat on phones: a floating card like on computers (not full screen) */
@media (max-width: 760px) {
  .lcw { top: auto !important; left: 10px !important; right: 10px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; height: min(560px, calc(100dvh - 90px)) !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
  .lcw__h { padding-top: 14px; }
  .lcw__f { padding-bottom: 10px; }
  body:has(.lcw.is-on) { overflow: auto; }
}
/* Mobile menu "Need help?": even 2x2 grid, icon above the text so numbers and email are never cut */
.drawer__hl a[href^="mailto:"] { grid-column: auto; }
.drawer__hl a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
.drawer__hl a:only-child, .drawer__hl a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.drawer__hl span { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; }
.drawer__hl span small { margin-bottom: 2px; }
/* App section v3: clean, left-aligned */
.appsec__t { text-align: left !important; align-items: flex-start !important; }
.appsec__t h2 { margin-bottom: 6px; }
.appsec__t > p:not(.appsec__safe):not(.appsec__help) { margin: 0 0 16px; color: #5A5754; font-size: 15px; line-height: 1.55; }
.appsec__pts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.appsec__pts li { position: relative; padding-left: 26px; font: 500 14px/1.4 'Manrope', sans-serif; color: #141414; }
.appsec__pts li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.appsec__b { display: block !important; margin: 0 !important; }
.appsec__go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; min-width: 240px; border: 0; border-radius: 2px; background: #141414; color: #fff; font: 700 13px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.appsec__go:hover { background: #E10600; }
.appsec__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.appsec__safe { justify-content: flex-start !important; text-align: left !important; margin: 12px 0 0 !important; font-size: 12px !important; color: #77736F !important; }
.appsec__help { text-align: left; }
@media (max-width: 760px) { .appsec__go { width: 100%; min-width: 0; } .appsec__t { padding: 22px 16px 26px !important; } }

.co__vat { margin: 4px 0 0; font-size: 12px; color: #77736F; text-align: right; }
/* Phones: the hero is exactly as tall as the phone picture (1080 × 1920), so nothing is cut at the top or bottom on any phone width. */
@media (max-width: 760px) {
  .hero, html.hdr-home body.is-home .hero { height: auto; min-height: 0; max-height: none; aspect-ratio: 9 / 16; }
  .hero picture img { object-position: center top; }
}