:root{--ivory:#f9f4ef;--paper:#fffdfa;--blush:#f0dfda;--mauve:#dcbdb8;--rg:#b27a68;--rgd:#8e5847;--plum:#2e1a24;--muted:#76616b;--line:#e6d3cd;--hh:64px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--ivory);color:var(--plum);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.wordmark,.flogo{font-family:'Newsreader',Georgia,serif;font-weight:400;letter-spacing:-.015em}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rgd);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

header{position:sticky;top:0;z-index:20;height:var(--hh);display:flex;justify-content:space-between;align-items:center;padding:0 6%;background:rgba(249,244,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wordmark{font-size:1.5rem;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:30px}
nav a{text-decoration:none;font-size:.95rem;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--plum);border-color:var(--rg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--plum);color:#fff;padding:14px 28px;border-radius:999px;text-decoration:none;border:1px solid var(--plum);cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:500;transition:background .25s,color .25s}
.btn:hover{background:var(--rgd);border-color:var(--rgd)}
.btn.line{background:transparent;color:var(--plum)}
.btn.line:hover{background:var(--plum);color:#fff;border-color:var(--plum)}
.btn.wa{background:var(--rgd);border-color:var(--rgd)}
.btn.wa:hover{background:var(--plum);border-color:var(--plum)}
.btn svg,.wa-float svg{width:19px;height:19px;fill:currentColor;flex:none}

.ph{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--blush),var(--mauve))}
.ph::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238e5847' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='20' y='28' width='24' height='26' rx='3'/%3E%3Cpath d='M32 28v-5'/%3E%3Cpath d='M32 10c4 4 5 8 0 13-5-5-4-9 0-13z'/%3E%3C/svg%3E") center/26% no-repeat;opacity:.45}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.arch{border-radius:999px 999px 10px 10px}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding:72px 6% 88px;background:linear-gradient(180deg,var(--blush),#f6e9e4)}
.hero h1{font-size:clamp(2.8rem,5.6vw,4.8rem);line-height:1.03;max-width:11em}
.rule{width:56px;height:2px;background:var(--rg);margin:22px 0}
.hero p{max-width:30em;margin-bottom:32px;color:#5b434d;font-size:1.08rem}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;max-width:460px;width:100%;justify-self:end;padding-bottom:12%}
.a1{width:80%;margin-left:auto;aspect-ratio:4/5}
.a2{position:absolute;left:0;bottom:0;width:44%;aspect-ratio:3/4;border:6px solid #f6e9e4}

section{padding:84px 6%}
.head{max-width:640px;margin-bottom:44px}
.head h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.head .rule{margin:16px 0 12px}
.head p{color:var(--muted)}

.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 30px;max-width:1080px}
.cat{text-decoration:none;display:block}
.cat .ph{aspect-ratio:3/4}
.cat .ph img{transition:transform .6s}
.cat:hover .ph img{transform:scale(1.04)}
.cat h3{font-size:1.55rem;margin-top:16px;line-height:1.2}
.cat span{color:var(--muted);font-size:.92rem}
.cat:hover h3{color:var(--rgd)}

.frags{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1080px}
.fpanel{padding:38px 36px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}
.fpanel.dark{background:var(--plum);color:#f3e6e3;border-color:var(--plum)}
.fpanel h3{font-size:1.9rem;line-height:1.1}
.fpanel .from{color:var(--muted);font-size:.92rem;margin:4px 0 20px}
.fpanel.dark .from{color:#cdb1b6}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:.92rem}
.fpanel.dark .chips span{border-color:rgba(255,255,255,.28)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1080px;counter-reset:s}
.steps div{border-top:1px solid var(--plum);padding-top:18px;counter-increment:s}
.steps div::before{content:counter(s);font-family:'Newsreader',serif;font-size:2.2rem;color:var(--rgd);line-height:1;display:block;margin-bottom:10px}
.steps h3{font-size:1.45rem;margin-bottom:4px}
.steps p{color:var(--muted)}
.sec-blush{background:var(--blush)}
.cta{max-width:1080px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;max-width:14em}

.page-head{padding:56px 6% 8px}
.page-head h1{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.05}
.page-head p{color:var(--muted);margin-top:10px;max-width:34em}
.toolbar{position:sticky;top:var(--hh);z-index:15;background:var(--ivory);border-bottom:1px solid var(--line);padding:14px 6%;margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;background:transparent;border:1px solid var(--line);color:var(--plum);padding:9px 20px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:.92rem;transition:.2s}
.tabs button:hover{border-color:var(--rg)}
.tabs button.active{background:var(--plum);border-color:var(--plum);color:#fff}
.selwrap{display:flex;align-items:center;gap:10px;flex:none}
.selwrap label{font-size:.88rem;color:var(--muted)}
.selwrap select{appearance:none;-webkit-appearance:none;padding:10px 40px 10px 18px;border:1px solid var(--rg);border-radius:999px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238e5847' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;font:inherit;font-size:.95rem;color:var(--plum);cursor:pointer}
.catalog{padding:40px 6% 90px;max-width:1160px}
.cat-head{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;margin-bottom:26px}
.cat-head .ph{aspect-ratio:3/4}
.cat-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.05}
.cat-head .desc{color:var(--muted);margin:8px 0 18px;max-width:28em}
.prices{display:flex;gap:10px;flex-wrap:wrap}
.prices div{border:1px solid var(--line);background:var(--paper);padding:8px 20px;border-radius:8px}
.prices small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.prices b{font-family:'Newsreader',serif;font-weight:400;font-size:1.65rem;line-height:1.2}
.colors{margin-bottom:34px;padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:8px}
.colors p{font-size:.9rem;color:var(--muted);margin-bottom:8px}
.dots{display:flex;flex-wrap:wrap;gap:8px 18px}
.dots span{display:flex;align-items:center;gap:8px;font-size:.92rem}
.dots em{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.block{margin-bottom:30px}
.block h3{font-size:1.7rem;line-height:1.1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--rg)}
.block h3 small{font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--muted)}
.block.prem{background:var(--blush);padding:24px 28px 8px;border-radius:8px}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.block.prem .row{border-color:rgba(142,88,71,.2)}
.row .n{font-weight:500;line-height:1.3}
.row .p{color:var(--muted);font-size:.9rem;line-height:1.3}
.row.on .n{color:var(--rgd)}
.add{flex:none;background:transparent;border:1px solid var(--plum);color:var(--plum);border-radius:999px;padding:7px 22px;cursor:pointer;font-family:inherit;font-size:.9rem;transition:.2s}
.add:hover{background:var(--plum);color:#fff}
.qty{flex:none;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--rgd);border-radius:999px;padding:2px}
.qty button{width:30px;height:30px;border:none;border-radius:50%;background:transparent;color:var(--rgd);cursor:pointer;font-size:1.15rem;line-height:1}
.qty button:hover{background:var(--rgd);color:#fff}
.qty em{min-width:24px;text-align:center;font-style:normal;font-weight:500}

.cartbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:none;align-items:center;gap:20px;background:var(--plum);color:#fff;padding:8px 8px 8px 26px;border-radius:999px;box-shadow:0 12px 36px rgba(46,26,36,.35);width:max-content;max-width:94%}
.cartbar.show{display:flex}
.cartbar .btn{background:var(--rg);border-color:var(--rg);padding:12px 24px}
.cartbar .btn:hover{background:var(--rgd);border-color:var(--rgd)}
body.has-cart .wa-float{display:none}
body.has-cart{padding-bottom:88px}
.modal{position:fixed;inset:0;background:rgba(46,26,36,.55);z-index:50;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.sheet{background:var(--paper);width:100%;max-width:460px;max-height:92vh;overflow-y:auto;padding:30px 26px 26px;position:relative;border-radius:14px}
.sheet h3{font-size:2rem;line-height:1.1;margin-bottom:10px}
.x{position:absolute;right:14px;top:10px;background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--muted);line-height:1}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.mrow small{color:var(--muted)}
.mtotal{display:flex;justify-content:space-between;font-family:'Newsreader',serif;font-size:1.6rem;margin:14px 0 18px}
.sheet input,.sheet textarea,.cform input,.cform textarea{width:100%;padding:13px 14px;margin-bottom:10px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:1rem;color:var(--plum);border-radius:8px}
.sheet input:focus,.sheet textarea:focus,.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--rgd)}
.err{color:#b3261e;font-size:.9rem;min-height:22px;margin-bottom:4px}
.sheet .btn,.cform .btn{width:100%}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:30px 6% 90px;max-width:1080px}
.contact h2{font-size:2rem;margin-bottom:12px}
.contact .info p{margin:6px 0}
.contact .info span{color:var(--muted);display:block;font-size:.9rem;margin:14px 0 18px}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;align-items:center;gap:10px;background:var(--rgd);color:#fff;padding:14px 22px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem;box-shadow:0 10px 28px rgba(46,26,36,.3);transition:background .25s}
.wa-float:hover{background:var(--plum)}

footer{background:var(--plum);color:#d9c4c6;padding:64px 6% 28px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;max-width:1080px}
.flogo{font-size:1.9rem;color:#fff;display:block;margin-bottom:8px}
footer p{max-width:22em}
footer h4{font-size:.95rem;color:#fff;font-weight:600;margin-bottom:10px}
footer a{display:block;text-decoration:none;margin-bottom:6px}footer a:hover{color:#fff}
footer .li{margin-bottom:6px}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:20px;font-size:.88rem;color:#a98f94}

@media(max-width:820px){
  :root{--hh:58px}
  .wordmark{font-size:1.2rem}nav{gap:16px}nav a{font-size:.88rem}
  .hero{grid-template-columns:1fr;gap:40px;padding:44px 6% 56px}
  .hero-art{justify-self:center;max-width:340px}
  section{padding:60px 6%}.head{margin-bottom:30px}
  .cats{grid-template-columns:1fr 1fr;gap:30px 14px}.cat h3{font-size:1.3rem}
  .frags,.steps,.contact,.fgrid{grid-template-columns:1fr}
  .steps{gap:26px}.fpanel{padding:28px 24px}.contact{gap:40px}
  .page-head{padding-top:40px}
  .toolbar{position:static;flex-direction:column;align-items:stretch;gap:12px;padding:12px 6%}
  .selwrap{justify-content:space-between}.selwrap select{flex:1;max-width:240px}
  .catalog{padding-top:28px}
  .cat-head{grid-template-columns:96px 1fr;gap:16px;margin-bottom:20px}
  .cat-head h2{font-size:1.9rem}.cat-head .desc{font-size:.9rem;margin:4px 0 10px}
  .prices div{padding:5px 14px}.prices b{font-size:1.3rem}
  .rows{grid-template-columns:1fr}
  .block.prem{padding:18px 16px 4px;margin:0 -6px 30px}
  .cartbar{gap:12px;padding:7px 7px 7px 20px;bottom:12px;font-size:.92rem}.cartbar .btn{padding:11px 18px;font-size:.9rem}
  .wa-float{padding:15px;right:14px;bottom:14px}.wa-float span{display:none}
  .modal{align-items:flex-end;padding:0}.sheet{max-width:100%;border-radius:18px 18px 0 0;max-height:94vh}
}

/* ===== catalog flow: list > sub-categories > fragrances ===== */
.catalog{padding-top:48px}
.lh{margin-bottom:40px}
.lh h1{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.05}
.lh p{color:var(--muted);margin-top:10px}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.92rem;color:var(--muted);margin-bottom:26px}
.crumbs a{text-decoration:none;color:var(--rgd);border-bottom:1px solid var(--rg)}
.crumbs b{font-weight:500;color:var(--plum)}
.hint{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.subs{display:grid;gap:14px}
.sub{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sub.prem{background:var(--blush);border-color:var(--mauve)}
.subhead{width:100%;display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"t b c" "d b c";column-gap:14px;align-items:center;text-align:left;padding:20px 24px;background:transparent;border:none;cursor:pointer;font-family:inherit;color:var(--plum)}
.st{grid-area:t;font-family:'Newsreader',Georgia,serif;font-size:1.7rem;line-height:1.15;letter-spacing:-.015em}
.sd{grid-area:d;color:var(--muted);font-size:.92rem}
.sbadge{grid-area:b;font-size:.82rem;color:var(--rgd);font-weight:500}
.chev{grid-area:c;width:10px;height:10px;border-right:2px solid var(--rgd);border-bottom:2px solid var(--rgd);transform:rotate(45deg);transition:transform .25s;margin:0 4px 4px 0}
.subhead[aria-expanded="true"] .chev{transform:rotate(-135deg);margin-bottom:-4px}
.subhead:hover .st{color:var(--rgd)}
.subbody{padding:0 24px 10px;border-top:1px solid var(--line)}
.sub.prem .subbody{border-color:var(--mauve)}
.sub.prem .row{border-color:rgba(142,88,71,.2)}
.more{margin-top:48px}
.more p{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.more .tabs{flex-wrap:wrap}
.tabs a{flex:none;text-decoration:none;border:1px solid var(--line);color:var(--plum);padding:9px 20px;border-radius:999px;font-size:.92rem;transition:.2s}
.tabs a:hover{border-color:var(--rg);color:var(--rgd)}
@media(max-width:820px){
  .catalog{padding-top:30px}
  .subhead{padding:16px 16px}.st{font-size:1.4rem}.subbody{padding:0 16px 6px}
  .lh{margin-bottom:28px}
}