/* The Skin Rules storefront. Bloom: off-white paper, ink, one colour per product.
   Product pictures are whole photographs on flat colour, never cut-outs, so every shadow is real. */
:root {
  --bg: #f7f5f2; --paper: #fff; --ink: #25252b; --soft: #6f6e75; --line: rgba(37, 37, 43, .13); --panel: #efece7; --navy: #171a36;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Playfair Display', Georgia, serif;
  --r: 18px; --ease: cubic-bezier(.2, .8, .2, 1); --pad: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.400vw, 64px); }
i, em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.wrap { width: min(1400px, calc(100% - var(--pad) * 2)); margin-inline: auto; }
.narrow { max-width: 800px; }
.caps { font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--soft); } .small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px; } .skip:focus { top: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 500 12px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .16s ease-out, background .25s, color .25s, box-shadow .25s; }
.btn:hover { background: #000; transform: translateY(-2px); } .btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.wide { width: 100%; min-height: 58px; font-size: 13px; } .btn[disabled] { opacity: .5; pointer-events: none; }
.pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; }
.price s, .card s, .pdp-price s, .hero-card s { color: var(--soft); font-weight: 400; margin-left: 4px; }
.stars { --r: 5; display: inline-block; width: 5.300em; height: 1em; vertical-align: -.12em; background: linear-gradient(90deg, #d49a2a calc(var(--r) / 5 * 100%), #d8d4cc 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 20'%3E%3Cpath id='s' d='m10 1 2.700 5.800 6.300.800-4.600 4.400 1.200 6.300L10 15.200 4.400 18.300l1.200-6.300L1 7.600l6.300-.800z'/%3E%3Cuse href='%23s' x='21.500'/%3E%3Cuse href='%23s' x='43'/%3E%3Cuse href='%23s' x='64.500'/%3E%3Cuse href='%23s' x='86'/%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 106 20'%3E%3Cpath id='s' d='m10 1 2.700 5.800 6.300.800-4.600 4.400 1.200 6.300L10 15.200 4.400 18.300l1.200-6.300L1 7.600l6.300-.800z'/%3E%3Cuse href='%23s' x='21.500'/%3E%3Cuse href='%23s' x='43'/%3E%3Cuse href='%23s' x='64.500'/%3E%3Cuse href='%23s' x='86'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease-out var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* forms */
label { display: grid; gap: 7px; font-size: 14px; }
input, select, textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(37, 37, 43, .1); }
input[type="radio"] { width: 20px; min-height: 20px; height: 20px; padding: 0; accent-color: var(--ink); }
.inline { display: flex; gap: 8px; flex-wrap: wrap; } .inline input { flex: 1 1 180px; border-radius: 999px; padding-inline: 20px; }
.stack { display: grid; gap: 16px; align-content: start; }
.form-msg { min-height: 1.300em; margin: 0; font-size: 14px; color: var(--soft); flex-basis: 100%; } .form-msg.ok { color: #1f7a4d; } .form-msg.bad { color: #b3261e; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; } legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; } legend + * { clear: both; }

/* header */
.announce { margin: 0; display: flex; justify-content: center; gap: 10px 34px; flex-wrap: wrap; padding: 9px 16px; background: var(--ink); color: #fff; font-size: 10px; }
.announce span + span::before { content: '·'; margin-right: 34px; opacity: .5; }
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .3s; }
.top.is-stuck { box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; gap: clamp(14px, 3vw, 44px); height: 72px; }
.logo { flex: 0 0 auto; display: block; width: 76px; height: 44px; background: var(--ink); -webkit-mask: url(../img/logo-mask.png) center / contain no-repeat; mask: url(../img/logo-mask.png) center / contain no-repeat; }
.nav { display: flex; gap: clamp(12px, 1.800vw, 28px); flex-wrap: nowrap; min-width: 0; }
.nav a { text-decoration: none; padding: 12px 0; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 78% / 0 1px no-repeat; transition: background-size .3s ease-out; }
.nav a:hover, .nav a[aria-current] { background-size: 100% 1px; }
.acts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; text-decoration: none; transition: background .2s; } .icon-btn:hover { background: var(--line); }
.bagbtn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-left: 6px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; transition: transform .16s ease-out; } .bagbtn:active { transform: scale(.95); }
.bagbtn b { font-weight: 500; font-size: 13px; min-width: 9px; }
.only-m { display: none; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(23, 26, 54, .35); animation: fade .25s ease-out; }
.sheet-in { background: var(--bg); padding: 22px var(--pad) 34px; animation: drop .4s var(--ease); max-height: 100svh; overflow-y: auto; }
#menu .sheet-in { min-height: 100svh; width: min(420px, 88vw); } #menu nav { display: grid; margin-top: 18px; } #menu nav a { padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 22px; letter-spacing: -.02em; }
.searchrow { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .searchrow input { border-radius: 999px; font-size: 18px; min-height: 56px; padding-inline: 24px; }
#live { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 18px; }
#live a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: #fff; text-decoration: none; font-size: 14px; } #live img { width: 56px; height: 70px; object-fit: cover; border-radius: 10px; }
@keyframes fade { from { opacity: 0; } } @keyframes drop { from { transform: translateY(-24px); opacity: 0; } }

/* hero */
.hero { position: relative; min-height: min(calc(100svh - 104px), 900px); display: grid; background: var(--hero); overflow: hidden; }
.hero-pic { position: absolute; inset: 0; pointer-events: none; }
.hero-pic img { position: absolute; right: 0; top: 0; width: auto; height: 100%; max-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 16%); mask: linear-gradient(90deg, transparent, #000 16%); animation: settle 1.800s var(--ease) backwards; }
.hero-p { display: none; }
@keyframes settle { from { opacity: 0; transform: translateX(40px) scale(1.030); } }
.hero .wrap { position: relative; display: grid; align-content: center; justify-items: start; gap: 0; padding-block: clamp(30px, 6vw, 80px) clamp(110px, 12vw, 150px); }
.hero .where { color: var(--soft); margin-bottom: 22px; }
.hero h1 { font-weight: 600; font-size: clamp(40px, 6.200vw, 100px); line-height: .92; letter-spacing: -.035em; }
.hero h1 span { display: block; overflow: hidden; padding: .06em .08em .12em 0; margin: -.06em 0 -.12em; }
.hero h1 b { display: block; font-weight: inherit; animation: rise 1s var(--ease) backwards; }
.hero h1 .h-a b { text-transform: uppercase; } .hero h1 .h-b { font-size: 1.220em; line-height: .9; } .hero h1 .h-b b { font-weight: 400; }
.hero h1 span:nth-child(2) b { animation-delay: .12s; } .hero h1 span:nth-child(3) b { animation-delay: .22s; }
@keyframes rise { from { transform: translateY(108%); } }
.hero-sub { max-width: 30ch; margin: 26px 0 28px; font-size: clamp(17px, 1.500vw, 21px); line-height: 1.4; color: #4a4950; animation: fade 1s ease-out .5s backwards; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 10px; animation: fade 1s ease-out .6s backwards; }
.hero-card { position: absolute; left: 0; bottom: clamp(18px, 3vw, 36px); display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; width: min(400px, 100%); padding: 10px 12px 10px 10px; border-radius: var(--r); background: #fff; animation: fade 1s ease-out .8s backwards; }
.hero-card img { width: 54px; height: 70px; object-fit: cover; border-radius: 10px; } .hero-card div { display: grid; gap: 1px; font-size: 14px; min-width: 0; } .hero-card a { text-decoration: none; } .hero-card .caps { color: var(--soft); font-size: 10px; } .hero-card .btn { min-height: 42px; padding: 0 18px; }

/* shop: ranges and cards */
.shop { padding: clamp(60px, 8vw, 120px) 0 20px; }
.shop-in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 5vw, 90px); }
.filters { position: sticky; top: 110px; align-self: start; display: grid; gap: 4px; } .filters p { margin-bottom: 12px; color: var(--soft); }
.filters button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: opacity .2s; }
.filters button::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); transition: transform .25s var(--ease); }
.filters button:hover::before, .filters button[aria-pressed="true"]::before { transform: scale(1.700); } .filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.filters:has([aria-pressed="true"]) button[aria-pressed="false"] { opacity: .4; }
.filters .all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-decoration: none; }
.group { margin-bottom: clamp(50px, 6vw, 90px); }
.groups[data-only] .group { display: none; } .groups[data-only="hair"] .g-hair, .groups[data-only="body"] .g-body, .groups[data-only="face"] .g-face, .groups[data-only="sun"] .g-sun, .groups[data-only="more"] .g-more { display: block; }
.group h2 { margin-bottom: 24px; font-weight: 400; font-size: clamp(22px, 2.500vw, 36px); line-height: 1.1; color: #aeaaa6; } .group h2 span { display: block; } .group h2 i { display: block; color: var(--ink); font-size: 1.140em; }
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); background: var(--tone, var(--panel)); overflow: hidden; isolation: isolate; }
.card-hit { position: absolute; inset: 0; display: block; }
.card-hit img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.160); transition: transform 1.100s var(--ease); }
.card:hover .card-hit img { transform: scale(1.260) translateY(-1.500%); }
.tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; pointer-events: none; }
.tag.save { left: auto; right: 62px; top: 17px; padding: 5px 10px; background: var(--ink); color: #fff; letter-spacing: .08em; }
.quick { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; transition: transform .16s ease-out, background .2s, color .2s; }
.quick:hover { background: var(--ink); color: #fff; } .quick:active { transform: scale(.9); }
.card footer { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; pointer-events: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.card footer h2, .card footer h3 { font: 500 12px/1.300 var(--sans); letter-spacing: .08em; max-width: 17ch; text-wrap: balance; } .card footer .rate { grid-column: 1 / -1; font-size: 11px; }
.card.is-out footer span { color: #5c5a60; }
.empty { grid-column: 1 / -1; color: var(--soft); }

/* home: stories, reel, promise, planet, kits, journal */
.stories { display: grid; gap: 12px; padding: clamp(40px, 6vw, 80px) 12px 0; }
.story-row { display: grid; grid-template-columns: 1.150fr 1fr; min-height: min(86svh, 760px); border-radius: calc(var(--r) * 1.400); overflow: hidden; background: var(--tone); }
.story-row.flip .story-pic { order: 2; }
.story-pic { position: relative; overflow: hidden; min-height: 320px; } .story-pic img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transform: translateY(calc((var(--p, .5) - .5) * -9%)); }
.story-copy { align-self: center; display: grid; justify-items: start; gap: 18px; padding: clamp(28px, 5vw, 84px); }
.story-copy h2 { font-size: clamp(34px, 4.600vw, 68px); } .story-copy p:not(.caps) { max-width: 44ch; font-size: clamp(16px, 1.300vw, 19px); line-height: 1.550; color: #3d3c42; }
.story-buy, .kit-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; } .story-buy .price, .kit-buy .price { font-size: 22px; margin-right: 8px; }
.reelband { margin-top: clamp(60px, 8vw, 110px); padding: clamp(50px, 7vw, 100px) 0; background: var(--navy); color: #fff; overflow: hidden; }
.reel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3.400vw, 48px); } .reel-head a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.reel-track { display: flex; gap: 14px; width: max-content; animation: reel 70s linear infinite; } .reel:hover .reel-track { animation-play-state: paused; }
.reel-track img { height: clamp(240px, 32vw, 440px); width: auto; max-width: none; border-radius: var(--r); }
@keyframes reel { to { transform: translateX(calc(-50% - 7px)); } }
.blk { padding: clamp(56px, 8vw, 120px) 0; } .blk h2 { margin-bottom: clamp(26px, 3.400vw, 48px); }
.vows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.400vw, 36px); margin: 0; padding: 0; list-style: none; } .vows.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vows li { display: grid; align-content: start; gap: 10px; } .vows svg { width: 58px; height: 58px; padding: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 6px; }
.vows h3 { font-size: 19px; letter-spacing: -.01em; } .vows p { font-size: 14px; line-height: 1.550; color: var(--soft); }
.promise { background: #fff; } .closing { background: #fff; } .closing .caps { margin: 6px 0 14px; } .pagehead > .wrap > .caps { margin-bottom: 14px; color: var(--soft); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 6vw, 100px); align-items: center; } .two.top { align-items: start; } .two.flip > figure { order: 2; }
.two figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.two p:not(.caps) { max-width: 48ch; margin-bottom: 16px; font-size: clamp(16px, 1.300vw, 19px); line-height: 1.600; color: #3d3c42; } .two .caps { margin-bottom: 16px; color: var(--soft); } .two h2 { margin-bottom: 20px; }
.planet { padding: clamp(56px, 8vw, 120px) 0; }
.kits { padding-bottom: clamp(56px, 8vw, 120px); } .kits h2 { margin-bottom: clamp(24px, 3vw, 44px); }
.kit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kit { display: grid; grid-template-rows: auto 1fr; border-radius: calc(var(--r) * 1.400); overflow: hidden; background: var(--tone); }
.kit-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .kit-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.200s var(--ease); } .kit:hover .kit-pic img { transform: scale(1.040); }
.kit > div { display: grid; align-content: start; justify-items: start; gap: 12px; padding: clamp(22px, 3vw, 44px); } .kit h3 { font-size: clamp(28px, 3vw, 44px); } .kit p:not(.caps) { max-width: 52ch; color: #3d3c42; }
.journal { padding: clamp(56px, 8vw, 120px) 0; } .journal > .wrap > h2 { margin-bottom: clamp(24px, 3vw, 44px); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.600vw, 36px) 14px; }
.post a { display: grid; gap: 10px; text-decoration: none; } .post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--panel); transition: transform .8s var(--ease); } .post a:hover img { transform: scale(.985); }
.post .caps { margin-top: 6px; color: var(--soft); } .post h3 { font-size: 22px; line-height: 1.150; } .post p:last-child { font-size: 14px; color: var(--soft); }
.lead-post a { grid-template-columns: 1.300fr 1fr; align-items: center; gap: clamp(20px, 4vw, 60px); margin-bottom: clamp(30px, 4vw, 60px); } .lead-post h2 { font-size: clamp(28px, 3.400vw, 50px); margin: 10px 0 14px; } .lead-post .more { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 50px; } .pager a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); } .pager a[aria-current] { background: var(--ink); color: #fff; }

/* page heads, prose */
.pagehead { padding: clamp(36px, 5vw, 70px) 0 clamp(22px, 3vw, 40px); } .pagehead.slim { padding-bottom: 8px; }
.pagehead h1 { font-size: clamp(40px, 6vw, 92px); letter-spacing: -.035em; } .pagehead .lead { max-width: 60ch; margin-top: 18px; font-size: 18px; color: var(--soft); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--soft); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.colnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; } .colnav a { padding: 9px 16px; border-radius: 999px; text-decoration: none; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s; } .colnav a:hover { box-shadow: inset 0 0 0 1px var(--ink); } .colnav a[aria-current] { background: var(--ink); color: #fff; }
.grid-sec { padding: 10px 0 clamp(56px, 8vw, 110px); }
.prose { font-size: 17px; line-height: 1.700; color: #36353b; } .prose.big { font-size: clamp(17px, 1.400vw, 20px); }
.prose > * + * { margin-top: 1em; } .prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 1.600em; font-size: clamp(22px, 2.200vw, 30px); line-height: 1.150; color: var(--ink); letter-spacing: -.02em; }
.prose a { text-underline-offset: 3px; } .prose img { border-radius: var(--r); margin-block: 1.400em; } .prose ul, .prose ol { padding-left: 1.300em; } .prose li + li { margin-top: .4em; } .prose strong { font-weight: 600; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; } .prose td, .prose th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.updated { margin-top: 40px; } .contact-card { padding: 28px; border-radius: var(--r); background: #fff; margin-bottom: 20px; } .round img { border-radius: var(--r); margin-top: 20px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.art-hero { margin-bottom: clamp(28px, 4vw, 56px); } .art-hero img { width: 100%; max-height: 72svh; object-fit: cover; border-radius: calc(var(--r) * 1.400); } .article .pagehead h1 { font-size: clamp(34px, 4.600vw, 68px); margin-top: 14px; }
.art-foot { display: flex; gap: 10px; flex-wrap: wrap; margin: 50px 0 clamp(50px, 7vw, 100px); } .searchpage { max-width: 560px; margin-top: 24px; }

/* product page */
.pdp-top { display: grid; grid-template-columns: minmax(0, 1.060fr) minmax(0, .940fr); background: var(--tone); }
.pdp-stage { position: sticky; top: 72px; height: calc(100svh - 72px); min-height: 520px; overflow: hidden; }
.pdp-main { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s ease-out; animation: stage-in 1.100s var(--ease) backwards; }
.pdp-main.is-card { object-fit: contain; transform: scale(1.160) translateY(-2%); } .pdp-main.is-photo { object-fit: cover; }
.pdp-main.is-swapping { opacity: 0; }
@keyframes stage-in { from { opacity: 0; transform: scale(1.080) translateY(20px); } }
.pdp-thumbs { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.pdp-thumbs button { flex: 0 0 auto; width: 52px; height: 62px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #fff; opacity: .78; cursor: pointer; transition: opacity .2s, transform .16s ease-out, box-shadow .2s; }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; } .pdp-thumbs button:hover { opacity: 1; transform: translateY(-2px); } .pdp-thumbs button[aria-current] { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.pdp-info { margin: clamp(20px, 3vw, 44px) 0 0; padding: clamp(24px, 3.400vw, 54px); border-radius: var(--r) 0 0 0; background: #fff; animation: info-in .9s var(--ease) .1s backwards; }
@keyframes info-in { from { opacity: 0; transform: translateX(40px); } }
.pdp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; } .stock { margin-left: auto; color: var(--soft); } .stock::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #3fae6b; vertical-align: 1px; } .stock[data-state="out"]::before { background: #c9a063; }
.pdp-info h1 { font-size: clamp(36px, 4.400vw, 66px); letter-spacing: -.03em; line-height: 1; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 18px 0 0; font-size: 24px; } .pdp-price b { font-weight: 500; } .pdp-price s { font-size: 17px; margin: 0; } .pdp-price small { font-size: 12px; color: var(--soft); }
.save { padding: 4px 10px; border-radius: 999px; background: var(--tone); font-size: 12px; font-weight: 600; align-self: center; }
.pdp-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; text-decoration: none; }
.pdp-line { max-width: 52ch; margin: 16px 0 0; color: var(--soft); }
.breaks { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; } .breaks li { padding: 8px 14px; border-radius: 999px; background: var(--tone); }
.pdp-buy { display: flex; gap: 10px; margin-top: 24px; } .pdp-buy .add { flex: 1; min-height: 58px; font-size: 13px; background: var(--deep, var(--ink)); } .pdp-buy .add:hover { background: var(--ink); }
.qty { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); } .qty button { width: 44px; height: 50px; border: 0; background: none; font-size: 20px; cursor: pointer; } .qty output { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.note { margin-top: 12px; font-size: 13px; color: var(--soft); }
.notify { margin-top: 24px; padding: 18px; border-radius: var(--r); background: var(--panel); display: grid; gap: 12px; } .notify p { font-size: 14px; }
.pin { margin-top: 22px; display: grid; gap: 8px; } .pin label { color: var(--soft); } .pin .btn { min-height: 50px; }
.pair { margin-top: 24px; padding: 16px; border-radius: calc(var(--r) * .800); background: var(--panel); } .pair > p { margin-bottom: 10px; color: var(--soft); }
.pair > div { display: grid; grid-template-columns: 52px 1fr 44px; align-items: center; gap: 14px; } .pair img { width: 52px; height: 66px; object-fit: cover; border-radius: 10px; }
.pair a { display: grid; gap: 2px; text-decoration: none; font-size: 14px; } .pair a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pair button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 22px; cursor: pointer; transition: transform .16s ease-out; } .pair button:hover { transform: scale(1.060); }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; text-align: center; font-size: 12px; line-height: 1.300; color: var(--soft); } .trust li { display: grid; justify-items: center; gap: 8px; } .trust svg { color: var(--ink); }
.pdp-nav { position: sticky; top: 72px; z-index: 5; display: flex; gap: 4px; justify-content: center; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pdp-nav a { flex: 0 0 auto; padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: background .2s; } .pdp-nav a:hover { background: var(--panel); }
.about .prose > div:first-child, .about .prose p:first-child { margin-top: 0; } .about .prose strong { display: inline-block; margin-top: .8em; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.blk .lead { max-width: 60ch; margin: -18px 0 30px; color: var(--soft); }
.benefits { background: #fff; }
.bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bens li { display: grid; align-content: start; gap: 10px; padding: 26px 26px 30px; border-radius: var(--r); background: color-mix(in srgb, var(--tone, var(--panel)) 46%, #fff); }
.bens .n { font: italic 400 30px/1 var(--serif); color: var(--deep, var(--ink)); } .bens h3 { font-size: 21px; letter-spacing: -.015em; line-height: 1.150; } .bens p { font-size: 15px; line-height: 1.550; color: #45444a; }
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: clamp(16px, 1.300vw, 18px); line-height: 1.500; }
.steps li::before { content: counter(s, decimal-leading-zero); font: italic 400 22px/1.300 var(--serif); color: var(--deep, var(--ink)); }
.inside { text-align: center; background: color-mix(in srgb, var(--tone, var(--panel)) 40%, var(--bg)); } .inside .caps { margin-bottom: 16px; color: var(--soft); } .inside h2 { max-width: 20ch; margin-inline: auto; }
.ings { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ings li { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 20px 6px 8px; border-radius: 999px; background: #fff; font-size: 15px; } .ings li:not(:has(img)) { padding-left: 20px; }
.ingpic { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; border-radius: 50%; }
.ingcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ingcards li { display: grid; align-content: start; gap: 8px; padding: 20px 22px 26px; border-radius: var(--r); background: #fff; } .ingcards .ingpic { width: 96px; height: 96px; border-radius: 0; margin-bottom: 6px; transition: transform .6s var(--ease); } .ingcards li:hover .ingpic { transform: rotate(-8deg) scale(1.100); }
.ingcards h3 { font-size: 21px; } .ingcards p { font-size: 14px; line-height: 1.550; color: var(--soft); }
.oldpics .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .oldpics img { width: 100%; border-radius: var(--r); } .oldpics { padding-block: 0 clamp(40px, 6vw, 80px); background: #fff; }
.blk.text p { font-size: clamp(20px, 2.200vw, 30px); line-height: 1.300; letter-spacing: -.015em; text-align: center; }
.faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 19px; letter-spacing: -.01em; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; line-height: 1; transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 0 22px; max-width: 62ch; color: var(--soft); }
.shots { padding-block: 0 12px; } .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 19vw, 300px); gap: 12px; padding: 0 12px; }
.mosaic figure { overflow: hidden; border-radius: var(--r); background: var(--panel); } .mosaic figure:first-child { grid-column: span 2; grid-row: span 2; } .mosaic figure:nth-child(4):last-child, .mosaic figure:nth-child(2):last-child { grid-column: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.200s var(--ease); } .mosaic figure:hover img { transform: scale(1.040); }
.reviews { background: #fff; } .rv-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 18px; } .rv-sum b { font-size: 30px; font-weight: 500; }
.review-form { display: grid; gap: 14px; max-width: 460px; margin-top: 22px; padding: 24px; border-radius: var(--r); background: var(--bg); } .review-form h3 { font-size: 22px; }
.rating-in { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .rating-in legend { float: left; width: 100%; margin-bottom: 4px; font-size: 11px; }
.rating-in input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; } .rating-in label { display: block; font-size: 30px; line-height: 1; color: #d8d4cc; cursor: pointer; }
.rating-in input:checked ~ label, .rating-in label:hover, .rating-in label:hover ~ label { color: #d49a2a; } .rating-in input:focus-visible + label { outline: 2px solid var(--ink); border-radius: 4px; }
.rv-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .rv-list li { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); } .rv-list h3 { font-size: 18px; } .rv-list h3:empty { display: none; } .reply { padding: 12px 16px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.more h2, .recent h2 { margin-bottom: clamp(22px, 3vw, 40px); } .recent { padding-top: 0; }
.sticky-buy { position: fixed; left: 50%; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 16px; width: min(560px, calc(100% - 20px)); padding: 8px 8px 8px 22px; border-radius: 999px; background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--line); transform: translate(-50%, 150%); transition: transform .45s var(--ease); }
.sticky-buy.is-on { transform: translate(-50%, 0); } .sticky-buy span { flex: 1; display: grid; font-size: 13px; min-width: 0; } .sticky-buy b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-buy .btn { min-height: 46px; padding: 0 22px; }

/* footer */
.end { background: #fff; padding-top: clamp(50px, 7vw, 90px); }
.news { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 26px clamp(26px, 6vw, 100px); align-items: end; padding-bottom: clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--line); } .news h2 { font-size: clamp(30px, 3.600vw, 52px); margin-bottom: 12px; } .news p { color: var(--soft); max-width: 40ch; }
.cols { display: grid; grid-template-columns: 1.600fr repeat(3, 1fr); gap: 30px; padding-block: clamp(36px, 5vw, 64px); } .cols .caps { margin-bottom: 14px; color: var(--soft); }
.cols a { display: block; padding: 4px 0; text-decoration: none; font-size: 14px; } .cols a:hover { text-decoration: underline; text-underline-offset: 3px; } .brandcol p { max-width: 36ch; margin-top: 16px; font-size: 14px; color: var(--soft); } .brandcol .addr a { display: inline; }
.base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); }

/* bag drawer, toast, whatsapp, flood */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(23, 26, 54, .38); animation: fade .25s ease-out; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(460px, 100%); display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); animation: slide .45s var(--ease); }
@keyframes slide { from { transform: translateX(100%); } }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); } .drawer header h2 { font-size: 26px; }
.lines { margin: 0; padding: 6px 22px; list-style: none; overflow-y: auto; } .lines li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lines img { width: 64px; height: 82px; object-fit: cover; border-radius: 12px; background: var(--panel); } .lines b { display: block; font-weight: 500; line-height: 1.250; } .lines .lp { text-align: right; font-variant-numeric: tabular-nums; } .lines .lp s { display: block; font-size: 12px; color: var(--soft); }
.lines .qty { margin-top: 8px; } .lines .qty button { width: 34px; height: 34px; font-size: 17px; } .lines .rm { all: unset; cursor: pointer; margin-left: 10px; font-size: 12px; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.drawer footer, .summary { display: grid; gap: 10px; } .drawer footer { padding: 18px 22px 22px; border-top: 1px solid var(--line); background: #fff; }
.tot { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; } .tot.big { font-size: 20px; padding-top: 10px; border-top: 1px solid var(--line); } .tot.big b { font-weight: 500; } .tot.less { color: #1f7a4d; }
.problem { padding: 10px 14px; border-radius: 12px; background: #fdeeee; color: #8a1c16; font-size: 13px; }
.coupon { display: flex; gap: 8px; } .coupon input { min-height: 44px; border-radius: 999px; padding-inline: 16px; font-size: 14px; text-transform: uppercase; } .coupon .btn { min-height: 44px; padding: 0 18px; }
.coupon-on { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: #eaf5ee; font-size: 13px; } .coupon-on button { all: unset; cursor: pointer; padding: 4px 10px; text-decoration: underline; }
.empty-bag { display: grid; place-content: center; justify-items: center; gap: 16px; padding: 40px 22px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 24px); padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; transform: translateX(-50%); animation: toast .45s var(--ease); }
.toast button { all: unset; cursor: pointer; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@keyframes toast { from { transform: translate(-50%, 140%); } }
.wa { position: fixed; right: 16px; bottom: 16px; z-index: 29; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #1fa855; color: #fff; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); } .wa:hover { transform: scale(1.080); }
body[data-page="product"] .wa, body[data-page="checkout"] .wa { bottom: 84px; }
.flood { position: fixed; inset: 0; z-index: 90; pointer-events: none; will-change: clip-path, opacity; }

/* cart, checkout, account, tracking */
.cartpage { display: grid; grid-template-columns: minmax(0, 1.500fr) minmax(300px, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; } .cartpage .lines { padding: 0; overflow: visible; } .cartpage .lines li { grid-template-columns: 92px 1fr auto; } .cartpage .lines img { width: 92px; height: 118px; }
.summary { position: sticky; top: 96px; padding: 26px; border-radius: var(--r); background: #fff; } .summary h2 { font-size: 26px; margin-bottom: 6px; } .summary .lines { padding: 0; max-height: 300px; } .summary .lines li { grid-template-columns: 52px 1fr auto; padding: 10px 0; font-size: 14px; } .summary .lines img { width: 52px; height: 66px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.300fr) minmax(320px, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; } .checkout fieldset { padding: 26px; border-radius: var(--r); background: #fff; }
.pair-in { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; } .pin-msg { align-self: center; padding-top: 22px; }
.radio { grid-template-columns: 22px 1fr; align-items: start; gap: 12px; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; } .radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); } .radio span { display: grid; gap: 2px; } .radio small { color: var(--soft); } .radio.off { opacity: .5; pointer-events: none; }
.form-msg.big { font-size: 15px; } .account { max-width: 980px; } .acct-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 5vw, 70px); align-items: start; }
.panel { padding: 26px; border-radius: var(--r); background: #fff; display: grid; gap: 14px; align-content: start; } .panel h2 { font-size: 26px; } .narrowform { max-width: 460px; }
.orders { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .orders li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 20px; border-radius: 14px; background: #fff; } .orders a { font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--panel); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 22px 0; padding: 0; list-style: none; font-size: 12px; text-align: center; } .timeline li { display: grid; gap: 8px; color: var(--soft); } .timeline li::before { content: ''; height: 4px; border-radius: 4px; background: var(--line); } .timeline li.done { color: var(--ink); } .timeline li.done::before { background: #3fae6b; }
.order-card { display: grid; gap: 14px; padding: 28px; border-radius: var(--r); background: #fff; margin-top: 24px; } .order-card h2 { font-size: 30px; } .addr-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .addr-list li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 14px; } .addr-list button { all: unset; cursor: pointer; text-decoration: underline; font-size: 12px; }
.thanks { padding: 30px; border-radius: var(--r); background: #eaf5ee; } .thanks h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 8px; }
.devpay { padding: 22px; border-radius: var(--r); background: #fff7e0; display: grid; gap: 12px; }


/* set 2 sections: proof, numbers, lists, in-the-box, founder, ingredients page */
.proofbar { background: #fff; border-bottom: 1px solid var(--line); }
.proofbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; padding-block: 20px; }
.proofbar p { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); } .proofbar b { color: var(--ink); font-size: 17px; font-weight: 500; }
.facts { padding: clamp(50px, 7vw, 100px) 0; background: var(--tone); }
.spot { padding: clamp(60px, 8vw, 120px) 0; background: var(--tone); }
.spot-head { max-width: 760px; margin: 0 auto clamp(20px, 3vw, 40px); text-align: center; } .spot-head .caps { color: #55546a; margin-bottom: 14px; } .spot-head p:last-child { margin-top: 16px; font-size: clamp(16px, 1.300vw, 19px); color: #3d3c42; }
.facts-in { display: grid; grid-template-columns: 1fr minmax(240px, .9fr) 1fr; align-items: center; gap: clamp(16px, 3vw, 50px); }
.facts-col { display: grid; gap: clamp(28px, 5vw, 70px); } .facts-col:last-child { text-align: right; }
.facts-col p { display: grid; gap: 6px; } .facts-col b { font-size: clamp(38px, 5.200vw, 84px); font-weight: 500; letter-spacing: -.04em; line-height: .95; } .facts-col span { font-size: 14px; color: #45444a; max-width: 22ch; } .facts-col:last-child span { margin-left: auto; }
.facts-pic { aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r); background: var(--tone); } .facts-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.160); }
.spot-buy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: clamp(26px, 4vw, 50px); } .spot-buy .price { font-size: 22px; margin-right: 8px; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.lists h3 { margin-bottom: 10px; color: var(--soft); } .lists ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.lists li::before { content: ''; display: inline-block; width: 14px; height: 8px; margin-right: 10px; border-left: 1.500px solid currentColor; border-bottom: 1.500px solid currentColor; transform: rotate(-45deg) translateY(-3px); }
.lists .free li::before { width: 12px; height: 1.500px; border: 0; background: currentColor; transform: translateY(-4px); }
.quick-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; }
.quick-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; } .quick-list li::before { content: ''; width: 12px; height: 7px; margin: 6px 0 0 3px; border-left: 1.600px solid var(--deep, var(--ink)); border-bottom: 1.600px solid var(--deep, var(--ink)); transform: rotate(-45deg); }
.bens li .ingpic { width: 72px; height: 72px; border-radius: 0; margin-bottom: 4px; transition: transform .6s var(--ease); } .bens li:hover .ingpic { transform: rotate(-8deg) scale(1.100); }
.ingmono { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--panel)) 60%, #fff); font: italic 400 34px/1 var(--serif); color: var(--deep, var(--ink)); }
.ingcards .ingmono { width: 96px; height: 96px; font-size: 44px; }
.tip { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--tone, var(--panel)) 45%, #fff); font-size: 15px !important; }
.insidebox { background: #fff; } .parts { display: grid; gap: 12px; }
.part { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(16px, 3vw, 44px); align-items: center; padding: 14px; border-radius: var(--r); background: color-mix(in srgb, var(--tone) 55%, #fff); }
.part-pic { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--tone); } .part-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.150); }
.part h3 { font-size: clamp(20px, 2vw, 28px); line-height: 1.150; margin: 8px 0 14px; max-width: 34ch; } .part h3 a { text-decoration: none; } .part h3 a:hover { text-decoration: underline; text-underline-offset: 4px; } .part .caps { color: var(--soft); }
.ticks { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; line-height: 1.500; color: #3d3c42; max-width: 70ch; } .ticks b { color: var(--ink); font-weight: 500; }
.routine { padding-top: 0; } .kit.wide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.100fr); grid-template-rows: none; } .kit.wide .kit-pic { aspect-ratio: auto; min-height: 320px; } .kit.wide > div { align-self: center; }
.rate-line { display: flex; align-items: center; gap: 8px; font-size: 14px !important; color: #45444a; }
.founder { padding: clamp(56px, 8vw, 120px) 0; background: #fff; } .founder figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; } .sig { font-size: 20px !important; color: var(--ink) !important; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 26px; padding: 0; list-style: none; } .nums li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: #fff; } .nums b { font-size: 40px; font-weight: 500; letter-spacing: -.03em; line-height: 1; } .nums span { font-size: 13px; color: var(--soft); }
.labgroup { display: grid; grid-template-columns: 300px 1fr; gap: clamp(16px, 3vw, 40px); align-items: start; padding: 16px; margin-bottom: 14px; border-radius: calc(var(--r) * 1.300); background: color-mix(in srgb, var(--tone) 50%, #fff); }
.lab-card { position: sticky; top: 90px; display: grid; gap: 14px; text-decoration: none; } .lab-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--tone); } .lab-card > span { display: grid; gap: 6px; font-size: 14px; color: #45444a; } .lab-card b { font-size: 22px; font-weight: 500; color: var(--ink); } .lab-card .caps { display: inline-flex; gap: 8px; align-items: center; color: var(--ink); margin-top: 6px; }
.labgroup .ingcards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 860px) {
  .facts-in { grid-template-columns: 1fr 1fr; } .facts-pic { grid-column: 1 / -1; grid-row: 1; max-width: 300px; margin: 0 auto; } .facts-col:last-child { text-align: left; } .facts-col:last-child span { margin-left: 0; }
  .lists { grid-template-columns: 1fr; } .part { grid-template-columns: 1fr; } .part-pic { aspect-ratio: 4 / 3; } .kit.wide { grid-template-columns: 1fr; } .kit.wide .kit-pic { min-height: 0; aspect-ratio: 4 / 3; }
  .labgroup { grid-template-columns: 1fr; } .lab-card { position: static; grid-template-columns: 110px 1fr; align-items: center; } .proofbar .wrap { justify-content: flex-start; } .nums b { font-size: 32px; }
}
@media (max-width: 1100px) { .nav { display: none; } .only-m { display: grid; } .row.four { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .announce span:nth-child(n + 3) { display: none; }
  .top .wrap { height: 62px; gap: 8px; } .logo { width: 62px; height: 36px; } .pdp-nav, .pdp-stage { top: 62px; }
  .hero { min-height: 0; } .hero-l { display: none; } .hero-p { display: block; }
  .hero-pic { position: relative; inset: auto; height: 62svh; order: 2; } .hero-pic img { left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(180deg, transparent, #000 14%); mask: linear-gradient(180deg, transparent, #000 14%); }
  .hero:not(:has(.hero-p)) .hero-l { display: block; object-position: 78% 50%; }
  .hero .wrap { padding-block: 28px 0; } .hero h1 { font-size: 12.400vw; } .hero-sub { margin: 18px 0 20px; }
  .hero-card { position: relative; left: auto; bottom: auto; margin-top: 22px; width: 100%; z-index: 2; margin-bottom: -40px; }
  .shop-in { grid-template-columns: 1fr; } .filters { position: static; display: flex; flex-wrap: wrap; gap: 2px 18px; } .filters p { width: 100%; margin: 0; } .filters .all { margin: 0; padding: 7px 0; border: 0; }
  .row, .row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .card footer { left: 12px; right: 12px; bottom: 11px; grid-template-columns: 1fr; font-size: 10px; } .card footer h2, .card footer h3 { font-size: 10px; } .tag.save { display: none; } .quick { width: 38px; height: 38px; top: 8px; right: 8px; } .tag { top: 10px; left: 10px; }
  .stories { padding-inline: 8px; } .story-row { grid-template-columns: 1fr; min-height: 0; } .story-row.flip .story-pic { order: 0; } .story-pic { min-height: 0; aspect-ratio: 4 / 3.400; }
  .two, .kit-row, .news, .cartpage, .checkout, .acct-grid, .lead-post a { grid-template-columns: 1fr; } .two.flip > figure { order: 0; } .two figure img { aspect-ratio: 4 / 3.400; }
  .vows, .vows.four { grid-template-columns: 1fr 1fr; gap: 26px 16px; } .posts { grid-template-columns: 1fr; } .bens { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr 1fr; } .brandcol { grid-column: 1 / -1; }
  .pdp-top { grid-template-columns: 1fr; } .pdp-stage { position: relative; top: auto; height: 62svh; min-height: 0; } .pdp-main.is-card { transform: scale(1.250); } .pdp-info { margin: -22px 0 0; border-radius: var(--r) var(--r) 0 0; position: relative; }
  .pdp-nav { justify-content: flex-start; } .trust { grid-template-columns: 1fr 1fr; gap: 18px 10px; } .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 46vw; gap: 8px; padding: 0 8px; }
  .summary { position: static; order: -1; } .pair-in { grid-template-columns: 1fr; } .pin-msg { padding-top: 0; } .reel-track img { height: 62vw; } .timeline { font-size: 10px; }
}

/* judge round 1 fixes */
.caps { font-size: 12px; } :root { --soft: #5f5e66; }
.card.is-out .card-hit img { filter: saturate(.7) brightness(1.03); opacity: .82; } .card.is-out .tag:first-of-type { background: var(--ink); color: #fff; }
.pdp-main.is-card { -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent) intersect, linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
.choose { margin-top: 22px; gap: 8px; } .choose legend { color: var(--soft); margin-bottom: 8px; }
.opt { grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s; }
.opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); } .opt span { display: grid; gap: 1px; } .opt small { color: var(--soft); font-size: 12px; } .opt-p { text-align: right; font-weight: 500; } .opt-p s { display: block; font-size: 12px; font-weight: 400; color: var(--soft); }
.opt input { width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--ink); }
.payrow { margin-top: 6px; font-size: 13px; color: var(--soft); } .payrow a { color: var(--ink); }
.pdp .quick-list { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ingmore { margin-top: 6px; font-size: 14px; } .ingmore summary { cursor: pointer; color: #3d3c42; } .ingmore ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: #45444a; }
.freefrom { background: #fff; text-align: center; } .freefrom p { font-size: clamp(17px, 1.400vw, 20px); line-height: 1.600; color: #3d3c42; }
.pdp-nav { -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
@media (max-width: 860px) {
  .card footer, .card footer h2, .card footer h3 { font-size: 11px; }
  .pdp-stage { height: min(52svh, 115vw); } .pdp-thumbs { bottom: 10px; } .pdp-thumbs button { width: 42px; height: 50px; }
  body[data-page="product"] .wa { display: none; } .pdp-info h1 { font-size: 34px; }
  .opt { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
  [data-reveal] { opacity: 1; transform: none; } .reel-track { animation: none; } .reel { overflow-x: auto; } html { scroll-behavior: auto; } .story-pic img { transform: none; }
}