.price        { font: 700 var(--fs-card-price)/1 var(--font); color: var(--ink); }
.stars        { color: transparent; -webkit-text-stroke: 1px var(--star); letter-spacing: 2px; font-size: 16px; }
.swatches     { display: flex; gap: 8px; }
.swatches i   { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px rgba(0,0,0,.08); }
.ribbon {
position: absolute; left: -19px; top: 44%;
writing-mode: vertical-rl; transform: rotate(180deg);
background: linear-gradient(180deg, #03AEE6 0%, #0661D4 100%);
border-radius: 0 12px 12px 0;
padding: 12px 4px; color: #fff;
font: 700 var(--fs-ribbon)/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
white-space: nowrap;
}
.ccard { background: var(--white); border-radius: var(--r-card-compact); overflow: hidden; }
.ccard__media { position: relative; aspect-ratio: 4 / 3; background: #222; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; }
.dots { position: absolute; left: 24px; bottom: 20px; display: flex; gap: var(--dot-gap); z-index: 2; }
.dot  { width: var(--dot); height: var(--dot); padding: 0; border: 0; border-radius: var(--r-pill);
background: var(--dot-idle-dark); cursor: pointer;
transition: width var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.dot[aria-selected="true"] { width: var(--dot-active-w); background: var(--accent-red); }
.dot:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; }
.nav { position: absolute; top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset); z-index: 5;
height: var(--nav-h); border-radius: var(--r-pill); display: flex; align-items: center; gap: 8px;
padding: 0 12px 0 24px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-nav); }
.navbtn { height: 42px; min-width: 42px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 0; color: #fff; cursor: pointer;
font: 500 16px/1 var(--font); transition: background-color var(--t-fast), gap var(--t-med) var(--ease); }
.navbtn svg { width: 24px; height: 24px; filter: var(--shadow-icon); flex: none; }
.navbtn span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width var(--t-med) var(--ease); }
.navbtn:hover, .navbtn[aria-expanded="true"] { background: rgba(255,255,255,.28); gap: 8px; }
.navbtn:hover span, .navbtn[aria-expanded="true"] span { max-width: 140px; }
.navbtn--all { background: var(--glass-strong); gap: 8px; padding: 0 16px 0 12px; }
.navbtn--all span { max-width: none; }
.utility { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 32px; padding: 16px 32px 16px; font: var(--fw-utility) var(--fs-utility)/1 var(--font); }
.utility a { color: var(--utility); text-decoration: none; }
.utility .gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.utility .green { color: var(--promo-green); font-weight: 700; }
.shell { position: relative; margin: 0 var(--gutter); border-radius: var(--r-shell); overflow: hidden;
min-height: 460px; background: linear-gradient(180deg, #FAFAFA 0%, #D9DCDC 100%);
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center;
padding: calc(var(--nav-h) + var(--nav-inset) + 24px) 48px 48px; }
.slide[hidden] { display: none; }
.cats { display: flex; justify-content: center; gap: 48px; padding: 32px 0; }
.cat  { display: grid; justify-items: center; gap: 16px; font: var(--fw-cat) var(--fs-cat)/1 var(--font); color: #111; text-decoration: none; }
.sec-title { font: var(--fw-section) var(--fs-section)/1.1 var(--font); text-transform: uppercase; letter-spacing: .01em;
background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 22vw, 290px); gap: 24px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
padding: 0 0 24px calc(var(--gutter) + 16px);
scroll-padding-left: calc(var(--gutter) + 20px); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.trust { display: flex; align-items: center; justify-content: space-between; gap: 32px;
margin: 32px var(--gutter); padding: 24px 48px; border-radius: var(--r-pill);
background: var(--page); box-shadow: var(--shadow-float); }
.trust__title { font: 700 16px/1.2 var(--font); background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust__items { display: flex; gap: 32px; }
.trust__item { display: flex; align-items: center; gap: 12px; font: 500 12px/1.35 var(--font); color: var(--ink-muted); }
.trust__item svg { width: 36px; height: 36px; }
.btn-buy  { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px;
border: 0; border-radius: var(--r-btn); background: var(--grad-cta); color: #fff; font: 400 var(--fs-btn-lg)/1 var(--font); cursor: pointer; }
.btn-cart { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; margin-top: 14px;
border: 0; border-radius: var(--r-btn); background: var(--white); box-shadow: var(--shadow-soft);
color: #222; font: 400 16px/1 var(--font); cursor: pointer; }
.btn-cart .plus { width: 22px; height: 22px; border-radius: 50%; background: #222; color: #fff; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.btn-pill { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border: 0;
border-radius: var(--r-pill); background: var(--grad-cta-soft); color: #fff; font: 500 16px/1 var(--font); }
.btn-buy:hover, .btn-pill:hover { filter: brightness(1.06); }
:where(button, a):focus-visible { outline: 2px solid #2350C8; outline-offset: 3px; }
.offer { border: 1.5px solid var(--cream-line); border-radius: var(--r-box); overflow: hidden; background: var(--panel); }
.offer__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--cream); font: 700 16px/1.2 var(--font); color: var(--ink); }
.offer__body { display: flex; justify-content: space-between; padding: 16px 16px; font: 400 16px/1.3 var(--font); color: var(--ink); }
.gift { display: flex; align-items: center; gap: 16px; padding: 16px 16px; border-radius: var(--r-box); background: var(--grad-cream);
font: 400 16px/1 var(--font); color: var(--ink); }
.gift b { font-weight: 700; }
.thumbs { display: flex; gap: 12px; }
.thumb { width: 92px; height: 92px; border-radius: var(--r-box); background: var(--page); border: 1.5px solid transparent; display: grid; place-items: center; }
.thumb[aria-current="true"] { border-color: #909090; background: var(--panel); }
.scrim { position: fixed; inset: 0; background: rgba(40,40,40,.42); display: grid; place-items: start center; padding-top: 90px; }
.search { width: min(820px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; background: var(--page); border-radius: var(--r-modal); padding: 16px; }
.search__field { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 16px; border-radius: var(--r-pill); background: var(--field); color: #818181; font: 400 16px var(--font); }
.search__field input { flex: 1; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
.search__label { display: inline-flex; align-items: baseline; gap: 12px; margin: 16px 0; padding: 12px 16px; border-radius: var(--r-pill); background: var(--white);
font: 700 14px/1 var(--font); text-transform: uppercase; }
.search__label b { background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.search__label button { border: 0; background: none; color: #818181; font: 400 14px var(--font); text-transform: none; cursor: pointer; }
.search__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.promo { position: relative; min-height: 210px; border-radius: 16px; transform: skewY(-2.5deg); background: #111; color: #fff; }
.footer { margin: 48px var(--gutter) 0; padding: 48px 48px 48px; border-radius: var(--r-shell); background: var(--navy-deep); color: #fff;
display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1.3fr; gap: 32px; }
.footer h4 { font: 500 14px/1 var(--font); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 20px; }
.footer a { display: block; color: var(--navy-link); font: 400 14px/1 var(--font); text-decoration: none; margin: 0 0 14px; }
.footer a:hover { color: #fff; }
.newsletter { display: flex; align-items: center; height: 46px; padding: 0 4px 0 16px; border: 1.5px solid rgba(255,255,255,.75); border-radius: var(--r-pill); }
.newsletter input { flex: 1; background: none; border: 0; color: #fff; font: 400 14px var(--font); outline: none; }
.newsletter button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--navy-deep); display: grid; place-items: center; }
.panel { margin: 0 var(--gutter) var(--gap-panel); padding: 32px; border-radius: var(--r-panel); background: var(--white); }
.badge-grad { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--grad-cta-soft); color: #fff; font: 500 14px/1 var(--font); }
.chip { display: inline-grid; place-items: center; height: 43px; padding: 0 24px; border-radius: var(--r-pill); background: var(--chip); font: 600 14px/1 var(--font); color: var(--ink); }
.field label { display: block; font: 500 12px/1 var(--font); color: var(--form-label); margin-bottom: 8px; }
.field label i { color: var(--form-required); font-style: normal; }
.field input, .field textarea { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--form-line); border-radius: var(--r-input);
font: 400 14px var(--font); color: var(--ink); background: #fff; }
.field textarea { height: 160px; padding: 12px; resize: vertical; }
.quote { font: 400 44px/1.3 var(--font); color: var(--navy); text-align: center; }
.quote strong { font-weight: 700; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crumbs { display: flex; gap: 12px; align-items: center; font: 400 14px/1 var(--font); color: var(--ink); }
.rating { margin-left: auto; display: flex; gap: 8px; align-items: center; font: 400 16px/1 var(--font); color: var(--ink); }
.rating .star { color: var(--star); font-size: 16px; } .rating small { color: var(--ink-meta); font-size: 14px; }
@media (max-width: 767px) {
:root { --gutter: 16px; --r-shell: 28px; --nav-h: 52px; --nav-inset: 10px; }
.utility { display: none; }
.nav { padding: 0 8px 0 16px; }
.navbtn:not(.navbtn--util) { display: none; }
.slide { grid-template-columns: 1fr; padding: calc(var(--nav-h) + var(--nav-inset) + 16px) 24px 48px; }
.dots { left: 16px; bottom: 14px; }
.cats { justify-content: flex-start; overflow-x: auto; gap: 24px; padding: 32px var(--gutter); scrollbar-width: none; }
.cat { flex: none; }
.rail { grid-auto-columns: 62vw; gap: 16px; }
.trust { flex-direction: column; align-items: flex-start; gap: 16px; border-radius: var(--r-panel); padding: 24px; }
.trust__items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.thumb { flex: none; width: 72px; height: 72px; }
.search__grid { grid-template-columns: 1fr 1fr; }
.panel { padding: 24px; } .quote { font-size: 28px; }
.footer { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; border-radius: var(--r-panel); }
}