:root{--paper:#fbf8ef;--ink:#14182d;--blue:#2541df;--yellow:#ffdf57;--line:#ded8ca;--muted:#50536a;font:16px/1.5 Inter,Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button,select{cursor:pointer}
button{border:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd551b;outline-offset:4px}
svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(1280px,calc(100% - 88px));margin-inline:auto}
.skip,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{clip-path:none;z-index:4;width:auto;height:auto;top:10px;left:10px;background:white;padding:12px}
.ribbon{background:var(--ink);color:var(--yellow);text-align:center;font-size:.69rem;font-weight:900;letter-spacing:.21em;padding:10px 12px}
.ribbon span{padding:0 10px}
.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:94px}
.brand{width:max-content;display:inline-flex;align-items:center}
.brand img{display:block;width:clamp(126px,16vw,172px);height:auto}
.site-header nav,.header-actions{display:flex;align-items:center;gap:28px}
.site-header nav{padding:8px 18px;border:1px solid var(--line);border-radius:99px;background:#fffdf8}
.site-header nav a{font-size:.89rem;font-weight:800;white-space:nowrap}
.site-header nav a:hover,footer a:hover{color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:28px}
nav a{font-size:.92rem;font-weight:700;white-space:nowrap}
nav a:hover,footer a:hover{color:var(--blue)}
.header-actions{justify-self:end;gap:12px}
.icon,.bag{display:inline-flex;align-items:center;justify-content:center;background:transparent;min-height:44px;min-width:44px}
.bag{border:1px solid var(--line);border-radius:100px;gap:7px;padding:7px 11px;font-weight:800;font-size:.87rem}
.bag b{display:grid;place-items:center;background:var(--blue);color:white;border-radius:100px;min-width:24px;height:24px;padding:0 5px;font-size:.73rem}
.hero{position:relative;display:grid;grid-template-columns:1.04fr 1fr;align-items:center;color:white;min-height:478px;border:2px solid var(--ink);border-radius:26px;overflow:hidden;background:linear-gradient(122deg,#1528b0 0%,#2541df 59%,#182aaf 100%);box-shadow:0 6px 0 var(--ink)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#ffffff23 1px,transparent 1.4px) 0 0/15px 15px;mask-image:linear-gradient(100deg,transparent 34%,#000 81%)}
.hero-copy{padding:58px clamp(35px,5.3vw,76px);position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:900;letter-spacing:.16em}
.eyebrow span{height:8px;width:8px;border-radius:100%;background:var(--yellow)}
.ink{color:var(--blue)}
.ink span{background:var(--blue)}
.hero-kicker{width:max-content;border:1px solid #ffffff79;border-radius:99px;padding:7px 11px;background:#1227a5}
.hero-kicker span{width:auto;height:auto;background:none;color:var(--yellow);font-size:.8rem;line-height:1}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(3.1rem,6.35vw,6.2rem);line-height:.91;letter-spacing:-.085em;margin:21px 0 20px;font-weight:950}
h1 em{color:var(--yellow);font-style:normal}
.hero p{max-width:365px;color:#f0f1ff;font-size:1.06rem;margin-bottom:25px}
.cta,.dark-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border-radius:99px;font-weight:850;min-height:48px;padding:10px 21px}
.cta{background:var(--yellow);color:var(--ink);border:1px solid var(--ink);box-shadow:3px 4px 0 var(--ink)}
.cta:hover{background:#fff1a9}
.cta span{font-size:1.25rem}
.hero-art{height:100%;min-height:390px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 56% 51%,#6a7cff9c 0%,transparent 63%)}
.hero-art::before{content:"";position:absolute;inset:9% 6% 10% 4%;border:1px dashed #ffffff6c;border-radius:50%;transform:rotate(-14deg);z-index:-1}
.photo{position:absolute;display:flex;flex-direction:column;width:42%;height:auto;aspect-ratio:1.06;border:6px solid #fffdf7;border-radius:13px;box-shadow:5px 7px 0 #121d80;overflow:hidden}
.photo img,.product-photo img,.detail-photo,.cart-line img{width:100%;height:100%;object-fit:cover;display:block}
.photo img{height:auto;min-height:0;flex:1}
.photo span{background:#fffdf7;color:var(--ink);font-size:clamp(.44rem,.95vw,.67rem);font-weight:900;letter-spacing:.12em;padding:5px 4px 0;white-space:nowrap}
.photo-one{left:4%;top:21%;transform:rotate(-13deg);background:#26354b}
.photo-one img{object-fit:contain}
.photo-two{right:10%;top:10%;transform:rotate(11deg);background:#ffe29a}
.photo-three{right:23%;bottom:10%;transform:rotate(-6deg);width:41%;background:#bdddf5}
.sticker{position:absolute;right:5%;bottom:15%;display:grid;place-content:center;text-align:center;width:clamp(66px,8vw,115px);aspect-ratio:1;background:var(--yellow);color:var(--ink);border-radius:50%;font-size:clamp(.8rem,1.7vw,1.35rem);line-height:.94;font-weight:950;transform:rotate(14deg);box-shadow:4px 5px 0 var(--ink);border:2px solid var(--ink)}
.sticker span{font-size:.75em;margin-bottom:4px}
.spark{position:absolute;color:var(--yellow);line-height:1}
.spark-top{font-size:44px;left:40%;top:10%}
.spark-bottom{font-size:44px;left:8%;bottom:14%}
.departments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.department{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid var(--ink);border-radius:13px;padding:11px 14px;box-shadow:2px 3px 0 var(--ink);transition:transform .18s,box-shadow .18s}
.department:hover{transform:translate(-2px,-2px);box-shadow:4px 5px 0 var(--ink)}
.fragrance{background:#e5e5ff}
.household{background:#d5f2e7}
.clothing{background:#ffebac}
.department-icon{display:grid;place-items:center;width:42px;aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.department small,.department strong{display:block}
.department small{font-size:.57rem;letter-spacing:.13em;font-weight:900;line-height:1.2}
.department strong{font-size:clamp(.92rem,1.6vw,1.2rem);font-weight:900}
.department-arrow{font-size:1.22rem;font-weight:900}
.catalog{padding-block:62px 66px;scroll-margin-top:24px}
.catalog-intro,.toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px}
h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.06;letter-spacing:-.06em;margin-top:8px}
.preview-label{border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--muted);background:#fffdf8;font-size:.74rem;white-space:nowrap}
.toolbar{margin-top:24px;padding:12px;border:1px solid var(--line);border-radius:15px;background:#fffdf8;align-items:center;flex-wrap:wrap}
.filters,.tools{display:flex;gap:8px;align-items:center}
.filters button{border-radius:99px;background:transparent;border:1px solid var(--line);padding:8px 16px;font-size:.88rem;font-weight:800;min-height:42px}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}
.filters button:hover:not([aria-pressed="true"]){background:#eceeff}
.search,.sort select{border-radius:10px;background:#fff;border:1px solid var(--line);height:42px}
.search{display:flex;align-items:center;gap:8px;padding:0 10px}
.search svg{width:17px;height:17px}
.search input{width:135px;background:transparent;border:0;font-size:.87rem}
.sort select{padding:0 9px;font-size:.87rem}
.result-count{margin:15px 0 11px;color:var(--muted);font-size:.83rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.product{background:#fffdf8;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 4px 0 #e8e1d1;display:flex;flex-direction:column}
.product-photo{display:block;width:100%;aspect-ratio:1.42;position:relative;padding:0;background:#ebe8e0;border-bottom:1px solid var(--line)}
.product-photo img{transition:transform .25s}
.product-photo{overflow:hidden}
.product-photo:hover img{transform:scale(1.04)}
.pill{display:inline-flex;align-items:center;border-radius:99px;padding:5px 10px;font-weight:850;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border:1px solid var(--ink)}
.pill.used{background:#fff0c8;color:#593b0a}
.product-photo .pill{position:absolute;top:12px;left:12px}
.product-body{padding:16px 17px 18px;flex:1;display:flex;flex-direction:column}
.category{font-size:.72rem;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.product-title{margin-top:3px;font-size:1.12rem;line-height:1.25}
.product-title button{font-weight:850;text-align:left;background:none;padding:0}
.product-title button:hover{text-decoration:underline}
.product-end{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;gap:8px}
.price{color:var(--blue);font-size:1.17rem;font-weight:950}
.add{background:#eff0ff;color:#2338b3;font-weight:850;border-radius:99px;padding:8px 13px;font-size:.8rem;min-height:38px}
.add:hover,.product-end a.add{background:var(--blue);color:white}
.product-end a.add{display:inline-flex;align-items:center;justify-content:center;min-width:68px}
.product-end a.add:hover{background:#182aaf}
.about{background:#e5e5ff;border:1px solid var(--ink);box-shadow:4px 5px 0 var(--ink);border-radius:20px;display:flex;align-items:center;gap:30px;padding:36px 45px;margin-bottom:60px}
.about-mark{font-size:5rem;color:var(--blue);line-height:1}
.about h2{font-size:clamp(1.85rem,3vw,2.7rem)}
.about p{max-width:570px;margin-top:12px;color:var(--muted)}
footer{background:#f3eee1;border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;font-size:.86rem}
.empty{text-align:center;padding:42px 15px;border:1px dashed var(--line);border-radius:14px}
.empty button{margin-top:10px;color:var(--blue);background:transparent;text-decoration:underline}
dialog{color:var(--ink);border:0;padding:0;background:var(--paper);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);box-shadow:0 18px 80px #1114274a}
dialog::backdrop{background:#15162a86}
body:has(dialog[open]){overflow:hidden}
.detail{width:720px;border-radius:20px}
#detail-content{display:grid;grid-template-columns:1fr 1fr}
.detail-photo{aspect-ratio:1;background:#f0efff}
.detail-copy{padding:36px 23px}
.detail-copy h2{font-size:2rem;margin:12px 0}
.detail-copy p{margin:10px 0;color:var(--muted)}
.detail-copy .dark-button{margin-top:15px}
.close{position:absolute;right:8px;top:8px;background:white;border-radius:50%;font-size:1.6rem}
.dark-button{background:var(--blue);color:white}
.dark-button:hover{background:#172ca8}
.cart{margin:0 0 0 auto;width:430px;height:100dvh;max-height:100dvh;max-width:100%;border-radius:19px 0 0 19px}
.cart[open]{display:flex;flex-direction:column}
.cart-top,.cart-bottom{padding:24px;border-bottom:1px solid var(--line)}
.cart-top{display:flex;align-items:flex-start;justify-content:space-between}
.close-cart{font-size:1.6rem;border-radius:50%;background:#efedf4}
.cart-top h2{font-size:2.35rem}
#cart-items{flex:1;overflow:auto;padding:20px 24px}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;margin-bottom:17px}
.cart-line img{aspect-ratio:1;border-radius:8px}
.cart-line small{color:var(--muted)}
.cart-line button{background:transparent;color:var(--blue);text-decoration:underline;padding:5px 0;font-size:.8rem}
.cart-bottom{border-top:1px solid var(--line);border-bottom:0}
.cart-bottom p{color:var(--muted);font-size:.85rem;margin:10px 0 14px}
.cart-bottom button{width:100%}
.subtotal{display:flex;justify-content:space-between;font-weight:800}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;max-width:calc(100% - 32px);background:var(--ink);color:white;border-radius:99px;padding:0;text-align:center;pointer-events:none}
.toast:not(:empty){padding:10px 18px}
@media(max-width:900px){
  .wrap{width:calc(100% - 48px)}
  .hero{min-height:390px}
  .hero-copy{padding:36px}
  .hero-art{min-height:350px}
  .grid{gap:14px}
}
@media(max-width:670px){
  .wrap{width:calc(100% - 32px)}
  .site-header{grid-template-columns:1fr auto;gap:9px;padding-block:10px}
  .site-header nav{grid-row:2;grid-column:1/-1;justify-content:space-between;gap:8px;padding:7px 13px}
  .header-actions{gap:4px}
  .hero{grid-template-columns:1fr;border-radius:18px}
  .hero-copy{padding:28px 21px 0}
  .hero-art{min-height:clamp(215px,63vw,325px);max-width:500px;width:100%;margin:auto}
  .photo{border-width:4px;border-radius:9px;width:36%}
  .photo-one{left:12%;top:19%}
  .photo-two{right:13%;top:9%}
  .photo-three{width:36%;bottom:9%;right:30%}
  .spark-top{font-size:27px;top:8%}
  .spark-bottom{font-size:29px;bottom:13%}
  .departments{gap:7px;margin-top:18px}
  .department{grid-template-columns:1fr auto;gap:1px 3px;padding:7px;border-radius:9px}
  .department-icon{grid-column:1/-1;width:29px;margin-bottom:3px}
  .department-icon svg{width:16px;height:16px}
  .department strong{font-size:clamp(.67rem,2.5vw,.92rem);line-height:1.2}
  .department small{font-size:.48rem}
  .department-arrow{font-size:.85rem}
  .catalog{padding-block:42px}
  .catalog-intro{align-items:flex-start;flex-direction:column;gap:10px}
  .toolbar{margin-top:16px;padding:8px;gap:8px}
  .tools{width:100%}
  .search{flex:1;min-width:0}
  .search input{width:100%;min-width:0}
  .sort select{max-width:133px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product{border-radius:13px}
  .product-body{padding:10px}
  .product-title{font-size:.96rem}
  .category{font-size:.63rem}
  .product-end{flex-wrap:wrap;gap:6px;padding-top:8px}
  .add{font-size:.73rem;padding:6px 10px}
  .price{font-size:.99rem}
  .about{padding:22px 18px;gap:14px;margin-bottom:40px}
  .about-mark{font-size:3rem}
}
@media(max-width:480px){#detail-content{display:block}.detail-photo{aspect-ratio:1.6}.detail-copy{padding:19px}.ribbon{letter-spacing:.11em;font-size:.61rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.product-photo{aspect-ratio:1.18}
@media(max-width:670px){h1{font-size:clamp(2.65rem,9.4vw,4rem)}}

.product-photo img,.detail-photo{object-fit:contain}
.detail-media{background:#eeedf3;min-width:0}
.detail-photo{height:auto;aspect-ratio:1;max-height:480px}
.photo-controls{display:flex;justify-content:center;gap:8px;padding:0 10px 12px}
.photo-controls [aria-pressed="true"]{background:var(--blue);color:white}
@media(max-width:480px){.detail-photo{aspect-ratio:1.25;max-height:44dvh}}