:root{
  --wine:#7a1f3d; --wine-d:#5a1529; --gold:#c9a24b; --cream:#fbf6ef; --ink:#221a1d; --mute:#6f6368;
  --line:#eadfd6; --white:#fff; --ok:#1f7a4d; --r:14px;
  --serif:'Playfair Display',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

.topbar{background:var(--wine-d);color:#f6e7d0;font-size:.8rem;text-align:center;padding:8px 12px;letter-spacing:.02em}

.header{position:sticky;top:0;z-index:40;background:rgba(251,246,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:24px;height:68px}
.logo{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--wine);letter-spacing:.01em}
.logo span{color:var(--gold)}
.logo.light{color:#fff}
.nav{display:flex;gap:26px;margin-left:auto;font-size:.92rem;font-weight:500}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .25s}
.nav a:hover::after{width:100%}
.cart-btn{position:relative;padding:8px;border-radius:50%;color:var(--wine)}
.cart-btn:hover{background:#f1e4d8}
.badge{position:absolute;top:0;right:-2px;background:var(--wine);color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-weight:600}
.burger{display:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);transition:.25s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}

/* hero */
.hero{background:linear-gradient(135deg,#f6e3dc 0%,#f9efe0 55%,#f3dcc8 100%);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:72px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;color:var(--wine);font-weight:600;margin-bottom:14px}
h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.12;font-weight:600}
h1 em{color:var(--wine);font-style:italic}
.lead{margin:18px 0 28px;color:var(--mute);max-width:46ch;font-size:1.05rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;transition:.2s}
.btn-primary{background:var(--wine);color:#fff}
.btn-primary:hover{background:var(--wine-d);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--wine);color:var(--wine)}
.btn-ghost:hover{background:var(--wine);color:#fff}
.btn[disabled]{opacity:.6;pointer-events:none}
.hero-art{position:relative;height:420px}
.art{position:absolute;border-radius:200px 200px 24px 24px;box-shadow:0 20px 50px rgba(90,21,41,.18)}
.a1{width:210px;height:330px;left:6%;top:50px;background:linear-gradient(160deg,#9c2f52,#e9b8c6)}
.a2{width:210px;height:380px;left:38%;top:0;background:linear-gradient(160deg,#c9a24b,#fbf1d6)}
.a3{width:190px;height:300px;right:0;top:100px;background:linear-gradient(160deg,#1c2b5a,#8fa3d8)}

.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-34px;position:relative;z-index:2}
.perks div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:0 8px 24px rgba(90,21,41,.06)}
.perks b{display:block;color:var(--wine);font-size:.95rem}
.perks span{font-size:.8rem;color:var(--mute)}

.section{padding:64px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
h2{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.88rem;font-weight:500;transition:.2s}
.tab:hover{border-color:var(--wine)}
.tab.active{background:var(--wine);border-color:var(--wine);color:#fff}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:.25s;cursor:pointer;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(90,21,41,.12)}
.ph{position:relative;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.ph svg{opacity:.9}
.tag{position:absolute;top:12px;left:12px;background:var(--gold);color:#2a1d05;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.off{position:absolute;top:12px;right:12px;background:var(--wine);color:#fff;font-size:.7rem;font-weight:700;padding:4px 9px;border-radius:999px}
.info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.info small{color:var(--mute);text-transform:uppercase;font-size:.68rem;letter-spacing:.12em}
.info h3{font-size:.98rem;font-weight:600;line-height:1.35}
.price{margin-top:auto;display:flex;gap:8px;align-items:baseline}
.price b{color:var(--wine);font-size:1.1rem}
.price s{color:var(--mute);font-size:.85rem}
.card .btn{margin-top:10px;padding:10px;border-radius:10px;font-size:.88rem}

.how{background:#fff;padding:60px 0;border-block:1px solid var(--line);text-align:center}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.steps li{background:var(--cream);border-radius:var(--r);padding:26px 20px}
.steps b{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:50%;background:var(--wine);color:#fff;font-family:var(--serif);font-size:1.2rem}
.steps span{color:var(--mute)}

.footer{background:var(--wine-d);color:#e9d9cc;padding-top:48px}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;padding-bottom:34px}
.footer h4{color:#fff;margin-bottom:10px;font-family:var(--serif)}
.footer p{font-size:.9rem;margin-top:6px}
.footer a:hover{color:var(--gold)}
.copy{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:16px;font-size:.8rem;color:#c9b3a6}

.wa-float{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.25);z-index:30}

/* overlay / modal / drawer */
.overlay{position:fixed;inset:0;background:rgba(20,8,12,.55);opacity:0;pointer-events:none;transition:.25s;z-index:60}
.overlay.on{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(880px,calc(100% - 24px));max-height:92vh;overflow:auto;background:#fff;border-radius:18px;z-index:70;opacity:0;pointer-events:none;transition:.25s}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.close{position:absolute;right:12px;top:10px;font-size:1.8rem;line-height:1;width:38px;height:38px;border-radius:50%;z-index:3;background:#fff}
.close:hover{background:#f1e4d8}
.modal-body{display:grid;grid-template-columns:1fr 1fr}
.modal-body .ph{aspect-ratio:auto;min-height:420px;height:100%}
.pd{padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.pd h3{font-family:var(--serif);font-size:1.6rem;line-height:1.25}
.pd p{color:var(--mute)}
.lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{min-width:46px;padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:.9rem;transition:.15s}
.chip:hover{border-color:var(--wine)}
.chip.sel{background:var(--wine);color:#fff;border-color:var(--wine)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{width:38px;height:38px;font-size:1.2rem}
.qty button:hover{background:#f1e4d8}
.qty span{min-width:34px;text-align:center;font-weight:600}
.err{color:#b3261e;font-size:.84rem;min-height:1.2em}

.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:#fff;z-index:70;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.2)}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer-head .close{position:static}
.drawer-body{flex:1;overflow:auto;padding:14px 20px}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--line);background:var(--cream)}
.empty{text-align:center;color:var(--mute);padding:60px 10px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.line .ph{aspect-ratio:3/4;border-radius:8px;width:64px}
.line h4{font-size:.9rem;line-height:1.3}
.line small{color:var(--mute)}
.line .qty{margin-top:6px}
.line .qty button{width:28px;height:28px;font-size:1rem}
.line .qty span{min-width:26px;font-size:.88rem}
.rm{color:var(--mute);font-size:.78rem;text-decoration:underline}
.row{display:flex;justify-content:space-between;margin:4px 0;font-size:.92rem}
.row.total{font-weight:700;font-size:1.08rem;margin-top:8px;color:var(--wine)}
.drawer-foot .btn{width:100%;margin-top:12px}

/* checkout */
.co{display:block;padding:30px}
.co h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:4px}
.co-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;margin-top:18px}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.f label{font-size:.8rem;font-weight:600}
.f input,.f select,.f textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;outline:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--wine)}
.sum{background:var(--cream);border-radius:var(--r);padding:18px;align-self:start}
.sum .li{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;margin-bottom:8px}
.cod{background:#e7f4ec;color:var(--ok);font-size:.82rem;border-radius:8px;padding:8px 10px;margin-top:10px;font-weight:600}
.hp{position:absolute;left:-9999px;opacity:0}
.done{text-align:center;padding:40px 10px}
.done .ck{width:70px;height:70px;border-radius:50%;background:var(--ok);color:#fff;font-size:2.2rem;display:grid;place-items:center;margin:0 auto 16px}
.done code{background:var(--cream);padding:4px 10px;border-radius:6px;font-weight:700}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:.3s;z-index:90}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .perks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .burger{display:block;margin-left:auto}
  .cart-btn{order:3}
  .nav{position:absolute;top:68px;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:8px 16px 16px;border-bottom:1px solid var(--line);display:none;margin:0}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .hero-in{grid-template-columns:1fr;padding:44px 0 60px}
  .hero-art{height:240px;order:-1}
  .a1{width:110px;height:180px;top:40px}.a2{width:120px;height:220px;left:34%}.a3{width:100px;height:170px;top:60px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .info{padding:10px 12px 12px}.info h3{font-size:.88rem}
  .steps{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .modal-body,.co-grid{grid-template-columns:1fr}
  .modal-body .ph{min-height:300px;aspect-ratio:1/1}
  .pd{padding:22px 18px}
}

.tools{display:flex;gap:8px;width:100%;order:3}
.tools input,.tools select{font:inherit;padding:11px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;outline:none}
.tools input{flex:1;min-width:0}.tools input:focus,.tools select:focus{border-color:var(--wine)}
.low{color:#b3261e;font-size:.76rem;font-weight:600}
.none{grid-column:1/-1;text-align:center;color:var(--mute);padding:40px 0}
.policy .pol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.policy .pol-grid div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.policy b{color:var(--wine);font-family:var(--serif);font-size:1.05rem}
.policy p{color:var(--mute);font-size:.9rem;margin-top:6px}
.guide{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.88rem}
.guide summary{cursor:pointer;font-weight:600;color:var(--wine)}
.guide table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.84rem}
.guide td,.guide th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.btn-wa{background:#25d366;color:#fff}.btn-wa:hover{background:#1ebe5a}
.pay{display:grid;gap:8px;margin-bottom:12px}
.pay label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;cursor:pointer;font-size:.9rem}
.pay input{margin-top:3px;accent-color:var(--wine)}
.pay label:has(input:checked){border-color:var(--wine);background:#fdf3f6}
.pay small{display:block;color:var(--mute)}
.bk{background:#fdf0f4;border:1px dashed #e2136e;border-radius:10px;padding:12px;margin-bottom:12px;font-size:.88rem}
.bk b.num{font-size:1.15rem;color:#e2136e;letter-spacing:.04em}
.f input,.f select,.f textarea{font-size:16px} /* stops iOS zoom on focus */
@media (max-width:980px){.policy .pol-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .policy .pol-grid{grid-template-columns:1fr}
  .modal{width:100%;max-height:94vh;top:auto;bottom:0;left:0;transform:translateY(30px);border-radius:18px 18px 0 0}
  .modal.on{transform:none}
  .pd .btn{padding:15px}
  .wa-float{bottom:78px}
}

@media (max-width:760px){
  .modal-body .ph{min-height:0;aspect-ratio:16/10}
  .wa-float{width:48px;height:48px;right:12px;bottom:14px}
}

/* ===== v2: modest-fashion polish (garments only, geometric patterns) ===== */
:root{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 4l5 14 14-5-9 12 12 9-15 1 1 15-8-12-8 12 1-15-15-1 12-9-9-12 14 5z' fill='none' stroke='%23c9a24b' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E")}
.hero{position:relative;background:linear-gradient(135deg,#5a1529 0%,#7a1f3d 55%,#8e2a4a 100%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.55}
.hero-in{position:relative}
.hero h1 em{color:var(--gold)}
.hero .eyebrow{color:var(--gold)}
.hero .lead{color:#ecd9d6}
.hero .btn-primary{background:var(--gold);color:#2a1d05}
.hero .btn-primary:hover{background:#dcb65d}
.hero .btn-ghost{border-color:#fff;color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--wine)}
.art{display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);animation:float 6s ease-in-out infinite}
.art svg{width:55%}
.a1{animation-delay:-1s}.a2{animation-delay:-3s}.a3{animation-delay:-5s}
.a1{background:linear-gradient(160deg,#1d1d22,#6c6a78)}
.a2{background:linear-gradient(160deg,#c9a24b,#fbf1d6)}
.a3{background:linear-gradient(160deg,#1c2b5a,#8fa3d8)}
.star{position:absolute;color:var(--gold);opacity:.8;animation:spin 24s linear infinite}
.s1{width:60px;left:0;top:10px}.s2{width:42px;right:20px;bottom:6px;animation-direction:reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.marquee{background:var(--gold);color:#2a1d05;overflow:hidden;white-space:nowrap;font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.mq{display:inline-flex;gap:0;animation:mq 28s linear infinite;padding:10px 0}
.mq span{padding:0 28px}.mq span::after{content:"✦";margin-left:56px;opacity:.6}
@keyframes mq{to{transform:translateX(-50%)}}
.perks{margin-top:26px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.cat-tile{position:relative;overflow:hidden;border-radius:20px;min-height:200px;padding:28px;display:flex;align-items:flex-end;color:#fff;transition:.3s}
.cat-tile::before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.6}
.cat-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(90,21,41,.25)}
.ct-w{background:linear-gradient(135deg,#7a1f3d,#b4416a)}
.ct-m{background:linear-gradient(135deg,#16254a,#3d5aa8)}
.ct-t{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}
.ct-t small{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;opacity:.8}
.ct-t b{font-family:var(--serif);font-size:2rem;line-height:1}
.ct-t i{font-style:normal;font-size:.85rem;opacity:.85}
.cat-tile svg{position:absolute;right:16px;bottom:-6px;height:170%;width:auto;max-height:230px;opacity:.9;transition:.4s}
.cat-tile:hover svg{transform:scale(1.08) rotate(-3deg)}
.pat{position:absolute;inset:0;background:var(--pat);opacity:.5}
.ph svg{filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));transition:transform .4s}
.card:hover .ph svg{transform:scale(1.07)}
.card{border-radius:18px}
.card .btn{transition:.2s}
.card:hover .btn{background:var(--wine);color:#fff}
.sec-head h2{position:relative;padding-bottom:10px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;border-radius:3px;background:var(--gold)}
@media (max-width:760px){
  .hero-art{height:230px;order:-1}
  .a1,.a2,.a3{box-shadow:0 12px 26px rgba(0,0,0,.3)}
  .cats{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .cat-tile{min-height:140px;padding:20px}
  .ct-t b{font-size:1.6rem}
  .cat-tile svg{height:150%}
}
@media (prefers-reduced-motion:reduce){.art,.star,.mq{animation:none}}