@layer base, frame, parts, pages;
@layer base {
:root { --ink:#24163a; --paper:#fffbf4; --card:#fff; --violet:#a826de; --violet-d:#70129c; --pink:#f7c3dc; --wash:#fceaf4; --sun:#ffcd28; --mute:#6b6078; --line:#eadfef; --night:#1e1b3a; --ok:#1c8a5a; --hot:#e0245e;
--display:"Bricolage Grotesque",system-ui,sans-serif; --text:"Albert Sans",system-ui,sans-serif; --page:1240px; --r:18px; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--text); color:var(--ink); background:var(--paper); line-height:1.6; font-size:17px; overflow-wrap:anywhere; }
img { max-inline-size:100%; block-size:auto; display:block; }
a { color:inherit; }
h1,h2,h3,h4 { font-family:var(--display); line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; }
h1 { font-size:clamp(2.1rem,5.4vw,4rem); font-weight:800; }
h2 { font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:800; }
h3 { font-size:1.2rem; font-weight:700; }
p { margin:0 0 1em; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.wrap { inline-size:min(100% - 2rem,var(--page)); margin-inline:auto; }
.sr { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
}
@layer frame {
.strip { background:var(--violet); color:#fff; text-align:center; font-weight:600; font-size:.86rem; padding:.45rem 1rem; letter-spacing:.04em; }
.strip b { color:var(--sun); font-weight:700; }
.top { background:#fff; border-block-end:1px solid var(--line); position:sticky; inset-block-start:0; z-index:30; }
.top__row { display:flex; align-items:center; gap:1rem; min-block-size:76px; }
.top__logo img { inline-size:150px; }
.top__nav { display:flex; flex-wrap:wrap; gap:.15rem 1.05rem; margin-inline:auto; justify-content:center; }
.top__nav a { text-decoration:none; font-weight:600; font-size:.95rem; padding:.3rem 0; border-block-end:3px solid transparent; }
.top__nav a:hover,.top__nav a[aria-current] { border-color:var(--sun); color:var(--violet-d); }
.top__buy { inline-size:206px; flex:none; }
.top__tog,.top__burger { display:none; }
.buy { display:block; transition:transform .15s; }
.buy:hover { transform:translateY(-2px); }
.buy img { inline-size:100%; }
.foot { background:var(--night); color:#e9e4f5; margin-block-start:0; }
.foot__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.2rem; padding-block:3.4rem 2.2rem; }
.foot__logo { background:#fff; border-radius:14px; padding:.6rem 1rem; display:inline-block; margin-block-end:1rem; }
.foot__logo img { inline-size:150px; }
.foot h3 { color:#fff; font-size:1.05rem; margin-block-end:.9rem; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot a { text-decoration:none; color:#cfc6e6; }
.foot a:hover { color:var(--sun); }
.foot address { font-style:normal; color:#cfc6e6; }
.foot__base { border-block-start:1px solid #3a3560; padding-block:1.2rem 1.6rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-size:.9rem; color:#a79fc4; }
.crumbs { font-size:.88rem; color:var(--mute); padding-block:1.1rem .2rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.crumbs a { color:var(--violet-d); text-decoration:none; }
.crumbs span::before { content:"›"; margin-inline-end:.4rem; color:var(--mute); }
}
@layer parts {
.sec { padding-block:clamp(2.6rem,6vw,4.6rem); }
.sec--wash { background:var(--wash); }
.sec--white { background:#fff; }
.lead { text-align:center; max-inline-size:46rem; margin:0 auto 2.2rem; }
.lead p { color:var(--mute); font-size:1.08rem; margin:0; }
.mark { background:linear-gradient(transparent 62%,var(--sun) 62%); padding-inline:.12em; }
.grid { display:grid; gap:1.3rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; position:relative; overflow:hidden; }
.tile__pic { background:#fff; aspect-ratio:1/1; display:grid; place-items:center; padding:.8rem; }
.tile__pic img { max-block-size:100%; object-fit:contain; }
.tile__flag { position:absolute; inset-block-start:.7rem; inset-inline-start:.7rem; background:var(--hot); color:#fff; font-weight:700; font-size:.78rem; padding:.2rem .55rem; border-radius:6px; }
.tile__body { padding:.2rem 1rem 1rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.tile__chips,.chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.chip { background:var(--wash); color:var(--violet-d); border-radius:99px; padding:.12rem .6rem; font-size:.76rem; font-weight:600; }
.tile__name { font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.25; text-decoration:none; }
.tile__name:hover { color:var(--violet); }
.tile__use { color:var(--mute); font-size:.88rem; }
.stars { display:inline-flex; align-items:center; gap:.35rem; font-size:.86rem; color:var(--mute); }
.stars i { --p:100%; inline-size:5.1em; block-size:1em; display:inline-block; background:linear-gradient(90deg,#f5a623 var(--p),#e3dbe9 var(--p)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 10'%3E%3Cpath d='M5 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5L5 7.9 1.9 9.6l.7-3.5L0 3.7l3.5-.4zM15.2 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4zM25.4 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4zM35.6 0l1.5 3.3 3.5.4L38 6.1l.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4zM45.8 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4z'/%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 51 10'%3E%3Cpath d='M5 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5L5 7.9 1.9 9.6l.7-3.5L0 3.7l3.5-.4zM15.2 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4zM25.4 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4zM35.6 0l1.5 3.3 3.5.4L38 6.1l.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4zM45.8 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5-3.1-1.7-3.1 1.7.7-3.5-2.6-2.4 3.5-.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.price { font-family:var(--display); font-weight:800; font-size:1.3rem; display:flex; align-items:baseline; gap:.5rem; margin-block-start:auto; }
.price s { font-family:var(--text); font-weight:500; font-size:.9rem; color:var(--mute); }
.tile .buy { margin-block-start:.4rem; }
.shelf { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.1rem 1.3rem; text-align:center; text-decoration:none; display:flex; flex-direction:column; gap:.5rem; transition:border-color .15s,transform .15s; }
.shelf:hover { border-color:var(--violet); transform:translateY(-3px); }
.shelf img { aspect-ratio:1/1; object-fit:contain; inline-size:100%; }
.shelf b { font-family:var(--display); font-size:1.2rem; }
.shelf span { color:var(--mute); font-size:.92rem; }
.shelf em { font-style:normal; font-weight:700; color:var(--violet-d); font-size:.92rem; }
.band img { inline-size:100%; }
.swatch { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; }
.swatch i { aspect-ratio:1/1; border-radius:8px; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3.4rem); align-items:center; }
.duo img { border-radius:var(--r); }
.cards4 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.note { background:#fff; border:1px solid var(--line); border-inline-start:6px solid var(--sun); border-radius:14px; padding:1rem 1.1rem; }
.note h3 { margin-block-end:.3rem; }
.note p { margin:0; color:var(--mute); font-size:.96rem; }
.why { counter-reset:w; }
.why li { counter-increment:w; list-style:none; background:#fff; border-radius:var(--r); border:1px solid var(--line); padding:1.3rem 1.2rem; }
.why li::before { content:"0" counter(w); font-family:var(--display); font-weight:800; color:var(--violet); font-size:1.5rem; display:block; margin-block-end:.4rem; }
.why { padding:0; margin:0; }
.why p { margin:0; color:var(--mute); font-size:.96rem; }
.voice { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.2rem 1.1rem; display:flex; flex-direction:column; gap:.55rem; }
.voice h3 { font-size:1.05rem; margin:0; }
.voice p { margin:0; font-size:.96rem; }
.voice footer { margin-block-start:auto; font-size:.86rem; color:var(--mute); }
.voice footer a { color:var(--violet-d); font-weight:600; }
.qa { max-inline-size:52rem; margin-inline:auto; display:grid; gap:.7rem; }
.qa details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:.2rem 1.1rem; }
.qa summary { cursor:pointer; font-family:var(--display); font-weight:700; padding:.85rem 1.6rem .85rem 0; list-style:none; position:relative; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; position:absolute; inset-inline-end:0; inset-block-start:.6rem; font-size:1.4rem; color:var(--violet); }
.qa details[open] summary::after { content:"–"; }
.qa details p { color:var(--mute); }
.prose { columns:2; column-gap:2.6rem; color:#3f3352; }
.prose p { break-inside:avoid; }
.cta { background:linear-gradient(120deg,var(--violet),#c8209a 70%,var(--hot)); color:#fff; text-align:center; }
.cta p { max-inline-size:40rem; margin-inline:auto; font-size:1.1rem; opacity:.95; }
.cta .buy { inline-size:min(100%,360px); margin:1.4rem auto 0; }
.ghost { display:inline-block; border:2px solid var(--ink); border-radius:99px; padding:.7rem 1.5rem; font-weight:700; text-decoration:none; }
.ghost:hover { background:var(--ink); color:#fff; }
}
@layer pages {
.hero { background:radial-gradient(60rem 26rem at 20% 0,#fde3f2,transparent),radial-gradient(50rem 24rem at 90% 10%,#fff3c4,transparent),var(--wash); text-align:center; padding-block:clamp(2.6rem,7vw,5rem) 0; }
.hero h1 { max-inline-size:18ch; margin-inline:auto; }
.hero h1 em { font-style:normal; color:var(--violet); }
.hero__sub { max-inline-size:40rem; margin:0 auto 1.3rem; font-size:1.15rem; color:var(--mute); }
.hero__chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-block-end:1.6rem; }
.hero__chips span { background:#fff; border:1px solid var(--line); border-radius:99px; padding:.4rem 1rem; font-weight:600; font-size:.92rem; }
.hero__chips span::before { content:"●"; color:var(--sun); margin-inline-end:.45rem; }
.hero__go { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; }
.hero__go .buy { inline-size:min(100%,320px); }
.hero__art { margin-block-start:clamp(1.8rem,4vw,3rem); }
.hero__art img { inline-size:100%; border-radius:var(--r) var(--r) 0 0; }
.list { display:grid; grid-template-columns:250px minmax(0,1fr); gap:2rem; align-items:start; }
.sift { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; position:sticky; inset-block-start:96px; }
.sift h2 { font-size:1.15rem; }
.sift fieldset { border:0; padding:0; margin:0 0 1rem; display:grid; gap:.35rem; }
.sift legend { font-weight:700; padding:0; margin-block-end:.4rem; }
.sift label { display:flex; gap:.5rem; align-items:center; font-size:.95rem; cursor:pointer; }
.sift input { accent-color:var(--violet); inline-size:1.05rem; block-size:1.05rem; }
.sift__count { color:var(--mute); font-size:.9rem; }
.list .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tile[hidden] { display:none; }
.intro { max-inline-size:52rem; }
.intro p { color:#3f3352; }
.pdp { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(1.4rem,4vw,3.2rem); padding-block:1.2rem 3rem; align-items:start; }
.shots { display:grid; gap:.8rem; }
.shots input { position:absolute; opacity:0; pointer-events:none; }
.shots__main { background:#fff; border:1px solid var(--line); border-radius:var(--r); aspect-ratio:1/1; display:grid; place-items:center; padding:1rem; }
.shots__main img { display:none; max-block-size:100%; object-fit:contain; }
.shots__thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }
.shots__thumbs label { border:2px solid var(--line); border-radius:12px; background:#fff; padding:.25rem; cursor:pointer; aspect-ratio:1/1; display:grid; place-items:center; }
.shots__thumbs img { max-block-size:100%; object-fit:contain; }
.info h1 { font-size:clamp(1.6rem,3.2vw,2.3rem); }
.info__hook { color:var(--violet-d); font-weight:700; }
.info .price { font-size:2rem; margin-block:.6rem .2rem; }
.info__flag { background:var(--hot); color:#fff; font-family:var(--text); font-size:.82rem; font-weight:700; border-radius:6px; padding:.15rem .5rem; align-self:center; }
.info__note { font-size:.86rem; color:var(--mute); }
.info .buy { inline-size:min(100%,400px); margin-block:.9rem 1.2rem; }
.info ul { padding-inline-start:1.2rem; display:grid; gap:.4rem; }
.info li::marker { color:var(--violet); }
.facts { inline-size:100%; border-collapse:collapse; margin-block-start:.6rem; }
.facts th,.facts td { text-align:start; padding:.5rem .2rem; border-block-end:1px solid var(--line); font-size:.95rem; vertical-align:top; }
.facts th { color:var(--mute); font-weight:600; inline-size:42%; }
.page { max-inline-size:50rem; padding-block:1rem 3.4rem; }
.page h1 { font-size:clamp(1.9rem,4.4vw,3rem); }
.page h2 { font-size:1.5rem; margin-block-start:1.6em; }
.page .kick { color:var(--violet-d); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; }
.steps { list-style:none; padding:0; display:grid; gap:.8rem; counter-reset:s; }
.steps li { counter-increment:s; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem 1rem 3.6rem; position:relative; }
.steps li::before { content:counter(s); position:absolute; inset-inline-start:1rem; inset-block-start:.95rem; inline-size:1.9rem; block-size:1.9rem; border-radius:50%; background:var(--sun); display:grid; place-items:center; font-family:var(--display); font-weight:800; }
.steps b { display:block; font-family:var(--display); }
.card-addr { background:#fff; border:1px dashed var(--violet); border-radius:14px; padding:1.1rem 1.2rem; font-style:normal; display:grid; gap:.3rem; }
.guides a { text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.3rem; display:block; }
.guides a:hover { border-color:var(--violet); }
.guides small { color:var(--violet-d); font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.guides b { display:block; font-family:var(--display); font-size:1.2rem; margin-block:.3rem; }
.guides span { color:var(--mute); font-size:.95rem; }
@media (max-width:1080px) {
.grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.list { grid-template-columns:1fr; } .sift { position:static; } .sift form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 1.2rem; }
.foot__grid { grid-template-columns:1fr 1fr; }
.top__burger { display:grid; place-items:center; inline-size:44px; block-size:44px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:1.4rem; order:3; }
.top__nav { display:none; order:4; inline-size:100%; justify-content:flex-start; padding-block:.4rem 1rem; gap:.2rem 1.2rem; }
.top__tog:checked ~ .top__nav { display:flex; }
.top__row { flex-wrap:wrap; } .top__buy { margin-inline-start:auto; }
}
@media (max-width:760px) {
body { font-size:16px; }
.grid,.grid--3,.list .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.duo,.pdp { grid-template-columns:1fr; } .prose { columns:1; } .cards4 { grid-template-columns:1fr; }
.swatch { grid-template-columns:repeat(8,1fr); }
.foot__grid { grid-template-columns:1fr; gap:1.6rem; }
.top__logo img { inline-size:112px; } .top__buy { inline-size:168px; }
.tile__body { padding:.2rem .7rem .8rem; } .tile__name { font-size:.94rem; } .price { font-size:1.15rem; }
.why { grid-template-columns:1fr 1fr; }
}
}