/* Дизайн по прототипу «L’estate: клуб, бонусная карта и стилисты» */
:root{
  --bg:#F8F6F3;--surface:#FFFFFF;--soft:#EFEAE5;--ink:#1C1716;--muted:#675D59;--line:rgba(28,23,22,.11);
  --wine:#7C0E01;--wine2:#4A0700;--wine-soft:#F5E7E3;--gold:#BE9C6B;--red:#8E2418;--ok:#3E6B4F;--scrim:rgba(18,12,11,.42);
  --acc:#7C0E01;
  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'Jost','Futura','Avenir Next',system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.app{max-width:460px;margin:0 auto;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* шапка и логотип */
.top{position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;padding:14px 20px 12px}
.lgm{display:block;background:currentColor;aspect-ratio:1210/410;-webkit-mask:url("logo.png") center/contain no-repeat;mask:url("logo.png") center/contain no-repeat}
.logo .lgm{width:92px;color:var(--acc)}
main{padding:4px 22px 20px}
.h1{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.015em;margin:18px 0 18px}
.h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;line-height:1;margin:46px 0 16px;letter-spacing:-.01em;color:var(--acc)}
.muted{color:var(--muted)} .small{font-size:14px;line-height:1.5} .center{text-align:center}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid var(--wine);border-radius:0;padding:17px 18px;font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;background:var(--wine);color:#fff;margin-top:16px;transition:opacity .2s}
.btn:active{opacity:.85}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:18px;margin-top:14px;font-size:15px}
.card.soon{color:var(--muted)}
.card.soon b{display:block;color:var(--acc);font-size:12px;letter-spacing:.12em;font-weight:500;text-transform:uppercase;margin-bottom:6px}
.card.err{color:var(--red)}
.note{background:var(--soft);padding:14px 16px;font-size:15.5px;margin-top:12px}

/* обложка главной */
.cover{text-align:center;padding-top:4px}
.cover-meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--acc);border-bottom:1px solid var(--line);padding:9px 0}
.hello{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.15;margin:30px 0 0;animation:rise 1s cubic-bezier(.16,.8,.2,1) both}
.hello .sub{display:block;font-family:var(--sans);font-style:normal;font-size:15px;color:var(--muted);margin-top:6px}
.mast-logo{width:88%;margin:22px auto 0;color:var(--acc);animation:rise 1.3s cubic-bezier(.16,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(40%);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.cover-sub{font-size:12px;letter-spacing:.24em;font-weight:500;text-transform:uppercase;color:var(--muted);margin-top:10px}
.arch{position:relative;margin:30px auto 0;width:76%;aspect-ratio:3/4.1;border-radius:999px 999px 0 0;overflow:hidden;background:linear-gradient(172deg,#F3E8DF 0%,#DDB7A7 45%,#A2402E 78%,#7C0E01 100%);animation:open 1.6s .5s cubic-bezier(.16,.8,.2,1) both}
.arch::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 30% 28%,rgba(255,255,255,.55),transparent 70%),radial-gradient(50% 50% at 80% 90%,rgba(60,20,10,.35),transparent 70%)}
.arch svg{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:72%;height:auto}
.arch .side{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(90deg);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85);white-space:nowrap}
@keyframes open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.lede{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.25;max-width:24ch;margin:28px auto 6px}
.lede-sub{color:var(--muted);font-size:16px;max-width:30ch;margin:0 auto}
.minicard{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--acc);border-bottom:1px solid var(--line);border-radius:0;padding:18px 0;margin-top:34px}
.minicard b{font-weight:500;font-size:17px;display:block;line-height:1.3}
.minicard span{font-size:14px;color:var(--muted)}
.minicard .bal{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--acc);white-space:nowrap}

/* товары */
.hscroll{display:flex;gap:14px;overflow-x:auto;margin:0 -22px;padding:2px 22px 6px;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:22px}
.hscroll::-webkit-scrollbar{display:none}
.prod{flex:none;width:168px;text-align:left;border:0;background:none;padding:0;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px}
.grid .prod{width:auto}
.ph{position:relative;aspect-ratio:3/4;border-radius:2px;display:grid;place-items:center;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 30% 20%,rgba(255,255,255,.35),transparent 70%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.08))}
.ph svg{position:relative;width:58%;height:auto}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .tag{position:absolute;left:10px;top:10px;background:var(--surface);color:var(--red);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px}
.ph .tag.new{color:var(--ink)}
.prod b{display:block;font-size:15px;font-weight:400;margin-top:10px;line-height:1.35}
.price{font-weight:500;font-size:15px;margin-top:3px;letter-spacing:.02em}
.price s{color:var(--muted);font-weight:400;margin-right:6px;font-size:13.5px}
.price .sale{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);background:transparent;border-radius:0;padding:10px 15px;font-size:14.5px}
.chip[aria-pressed="true"]{background:var(--wine);border-color:var(--wine);color:#fff}
.cats{display:flex;gap:22px;overflow-x:auto;margin:0 -22px 22px;padding:0 22px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.cats::-webkit-scrollbar{display:none}
.cats .chip{flex:none;border:0;padding:10px 0;margin-bottom:-1px;font-size:12.5px;letter-spacing:.1em;font-weight:500;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent}
.cats .chip[aria-pressed="true"]{background:none;color:var(--acc);border-bottom-color:var(--acc)}
.step{font-size:12px;letter-spacing:.12em;font-weight:500;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}

/* бонусная карта */
.lcard{position:relative;overflow:hidden;border-radius:14px;padding:24px 22px;color:#F6E9E0;background:radial-gradient(130% 120% at 100% 0%,#A01E0C 0%,#7C0E01 42%,#360500 100%);box-shadow:0 30px 60px -20px rgba(124,14,1,.55);aspect-ratio:1.6/1;display:flex;flex-direction:column;justify-content:space-between}
.lcard::after{content:"";position:absolute;inset:9px;border:1px solid rgba(190,156,107,.45);border-radius:9px;pointer-events:none}
.lcard::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,230,200,.13) 50%,transparent 62%);animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,100%{transform:translateX(-70%)}50%{transform:translateX(70%)}}
.lcard>*{position:relative;z-index:1}
.lcard .lgm{width:118px;color:#fff}
.lcard .lvl{font-size:11.5px;letter-spacing:.2em;font-weight:500;text-transform:uppercase;color:#E3C79A}
.lcard .bal{font-family:var(--serif);font-size:48px;font-weight:400;line-height:1;letter-spacing:-.02em}
.lcard .row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.qrbox{background:#fff;border-radius:2px;padding:22px;display:grid;place-items:center;margin-top:14px;border:1px solid var(--line);text-align:center}
.qrbox svg{width:170px;height:170px}
.hist{display:flex;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.hist:last-child{border-bottom:0}
.hist .p{font-weight:500;color:var(--ok);white-space:nowrap}
.hist .m{font-weight:500;color:var(--red);white-space:nowrap}

/* панель магазина */
.kpis{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--acc)}
.kpi{padding:18px 0 16px;border-bottom:1px solid var(--line)}
.kpi:nth-child(odd){padding-right:14px;border-right:1px solid var(--line)}
.kpi:nth-child(even){padding-left:16px}
.kpi b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05}
.kpi span{font-size:13.5px;color:var(--muted)}
.kpi.main b{color:var(--acc)}
.fld{display:block;margin-top:18px}
.fld:first-child{margin-top:0}
.fld span{display:block;font-size:12px;letter-spacing:.1em;font-weight:500;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fld input{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;border-radius:0;padding:10px 0;font-size:16px}
.search{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;border-radius:0;padding:10px 0;font-size:16px}
.form-msg{margin-top:12px;font-size:15px}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--red)}
.list{padding:2px 18px}
.person{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.person .i{flex:1;min-width:0}
.person b{display:block;font-size:15.5px;font-weight:500}
.person span{font-size:14px;color:var(--muted)}
.pill{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;white-space:nowrap;color:var(--ink)}

/* нижняя шторка и уведомления */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:460px;z-index:21;background:var(--bg);border-radius:16px 16px 0 0;padding:12px 22px calc(26px + env(safe-area-inset-bottom,0px));max-height:92vh;overflow:auto;animation:up .45s cubic-bezier(.16,.8,.2,1)}
.grab{width:36px;height:3px;border-radius:2px;background:var(--line);margin:0 auto 18px}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--bg);padding:14px 20px;font-size:15px;max-width:calc(100% - 32px);width:max-content;text-align:center;animation:fade .3s ease-out}
@keyframes fade{from{opacity:0;transform:translate(-50%,8px)}}

/* нижнее меню */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:0 max(0px,calc((100% - 460px)/2)) env(safe-area-inset-bottom,0px)}
.tab{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:15px 0 14px}
.tab::before{content:"";width:4px;height:4px;border-radius:50%;background:transparent}
.tab[aria-current="page"]{color:var(--acc)}
.tab[aria-current="page"]::before{background:var(--acc)}
@media (max-width:370px){.tab{font-size:10.5px;letter-spacing:.06em}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}