/* ════════════════════════════════════════════════════════════════════════════
   Витрина «Пятый шов» — продающий сайт магазина.
   Живёт отдельно от кабинета: другой ритм, крупные фото, никакой служебной
   плотности. Палитра и шрифты общие с брендом.
   Сначала телефон — сайт открывается в рамке айфона внутри кабинета.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#EFEEEA; --plate:#FFFFFF; --recess:#E4E2DC;
  --ink:#15181B; --hair:#D3D0C8; --signal:#D8501B; --live:#1C7A5B; --warn:#B8860B;
  --display:'IBM Plex Sans', ui-sans-serif, -apple-system, Segoe UI, Arial, sans-serif;
  --text:ui-sans-serif, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#121417;--plate:#1B1E22;--recess:#0C0E10;--ink:#EAE8E3;
        --hair:#2E3338;--signal:#FF6A2B;--live:#35A981;--warn:#D9A441}
}
:root[data-theme=dark]{--ground:#121417;--plate:#1B1E22;--recess:#0C0E10;--ink:#EAE8E3;
  --hair:#2E3338;--signal:#FF6A2B;--live:#35A981;--warn:#D9A441}
:root[data-theme=light]{--ground:#EFEEEA;--plate:#FFFFFF;--recess:#E4E2DC;--ink:#15181B;
  --hair:#D3D0C8;--signal:#D8501B;--live:#1C7A5B;--warn:#B8860B}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:13px 16px;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--hair)}
body.embed .hd{padding-top:42px}
.hd .logo{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.015em;
  display:flex;align-items:center;gap:8px}
.hd .logo svg{width:19px;height:19px}
.hd .sp{margin-left:auto;display:flex;align-items:center;gap:4px}
.icon{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;position:relative}
.icon:hover{background:var(--recess)}
.icon svg{width:20px;height:20px}
.icon em{position:absolute;top:4px;right:3px;font-style:normal;font-family:var(--mono);
  font-size:10px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--signal);color:#fff;display:grid;place-items:center}

/* ── обложка ───────────────────────────────────────────────────────────── */
.hero{padding:26px 16px 20px}
.hero h1{font-family:var(--display);font-weight:600;font-size:27px;line-height:1.12;
  letter-spacing:-.025em;margin:0 0 8px}
.hero p{margin:0;font-size:14.5px;opacity:.6;max-width:34ch}

/* ── фильтр по размеру ─────────────────────────────────────────────────── */
.filt{padding:4px 16px 16px;position:sticky;top:64px;z-index:15;
  background:linear-gradient(var(--ground) 72%, transparent)}
body.embed .filt{top:93px}
.filt .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.45;display:block;margin-bottom:7px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;font-family:var(--mono);font-size:13px;padding:7px 13px;
  border-radius:17px;border:1px solid var(--hair);background:var(--plate);white-space:nowrap}
.chips button.on{border-color:var(--ink);background:var(--ink);color:var(--ground)}

/* ── сетка товаров ─────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 11px;padding:0 16px 28px}
@media (min-width:620px){.grid{grid-template-columns:repeat(3,1fr);gap:22px 18px;padding:0 26px 34px}}
@media (min-width:940px){.grid{grid-template-columns:repeat(4,1fr);max-width:1180px;margin:0 auto}}
.pd{text-align:left;position:relative}
.pd .ph{aspect-ratio:3/4;background:var(--plate);border-radius:5px;overflow:hidden;
  border:1px solid var(--hair)}
.pd .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pd:hover .ph img{transform:scale(1.035)}
.pd.out .ph{opacity:.4}
.pd h3{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.25;
  margin:9px 0 3px;letter-spacing:-.005em}
.pd .pr{font-family:var(--mono);font-size:13.5px}
.pd .pr s{opacity:.4;margin-right:7px;font-size:12px}
.pd .pr em{font-style:normal;color:var(--signal)}
.pd .sz{margin:4px 0 0;font-size:12px;opacity:.5}
.pd .badge{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:3px;
  background:var(--signal);color:#fff}
.pd .badge.grey{background:var(--ink);opacity:.75}
.none{grid-column:1/-1;text-align:center;padding:44px 20px;opacity:.5;font-size:14px}

/* ── экран товара и корзина ────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:40;background:var(--ground);overflow-y:auto;
  animation:rise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sheet .bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
body.embed .sheet .bar{padding-top:42px}
.sheet .bar b{font-family:var(--display);font-weight:600;font-size:15.5px}
.sheet .in{padding:0 16px 32px;max-width:520px;margin:0 auto}
@media (min-width:760px){.sheet .in{max-width:920px;display:grid;
  grid-template-columns:1fr 1fr;gap:34px;align-items:start;padding-top:22px}}
.sheet .big{background:var(--plate);border:1px solid var(--hair);border-radius:6px;
  overflow:hidden;margin:16px 0 20px}
@media (min-width:760px){.sheet .big{margin:0}}
.sheet h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;
  margin:0 0 6px;line-height:1.15}
.sheet .price{font-family:var(--mono);font-size:19px;margin:0 0 4px}
.sheet .price s{opacity:.4;font-size:15px;margin-right:9px}
.sheet .price em{font-style:normal;color:var(--signal)}
.sheet .meta{font-size:13px;opacity:.55;margin:0 0 22px}
.lbl2{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.45;display:block;margin:0 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.opts button{font-family:var(--mono);font-size:13.5px;min-width:50px;padding:11px 13px;
  border-radius:4px;border:1px solid var(--hair);background:var(--plate)}
.opts button.on{border-color:var(--ink);background:var(--ink);color:var(--ground)}
.opts button:disabled{opacity:.3;text-decoration:line-through;cursor:default}
.left{font-size:12.5px;color:var(--signal);margin:-13px 0 20px}

.buy{position:sticky;bottom:0;padding:14px 0 18px;
  background:linear-gradient(transparent, var(--ground) 26%)}
.btn{display:block;width:100%;text-align:center;font-family:var(--display);font-weight:600;
  font-size:15.5px;padding:15px;border-radius:5px}
.btn.main{background:var(--signal);color:#fff}
.btn.ghost{border:1px solid var(--hair);background:var(--plate)}
.btn:disabled{opacity:.4;cursor:default}
.btn.main:not(:disabled):active{transform:translateY(1px)}

/* ── корзина и оформление ──────────────────────────────────────────────── */
.line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)}
.line img{width:62px;height:82px;object-fit:cover;border-radius:4px;flex:0 0 62px;
  border:1px solid var(--hair)}
.line .t b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block}
.line .t span{font-size:12.5px;opacity:.55;font-family:var(--mono)}
.line .t .rm{font-size:12.5px;opacity:.5;text-decoration:underline;margin-top:6px;display:block}
.line .pp{margin-left:auto;font-family:var(--mono);font-size:14px;white-space:nowrap}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 6px}
.tot b{font-family:var(--display);font-weight:600;font-size:23px;font-variant-numeric:tabular-nums}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12.5px;opacity:.55;margin-bottom:5px}
.fld input{width:100%;padding:13px;border-radius:5px;border:1px solid var(--hair);
  background:var(--plate);font-size:15.5px}
.fld input:focus{outline:none;border-color:var(--signal)}
.ways{display:grid;gap:8px;margin-bottom:20px}
.way{display:flex;gap:11px;align-items:flex-start;padding:13px;border-radius:5px;
  border:1px solid var(--hair);background:var(--plate);text-align:left;width:100%}
.way.on{border-color:var(--signal)}
.way b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block}
.way span{font-size:12.5px;opacity:.55}
.way .dot{width:17px;height:17px;border-radius:50%;border:1px solid var(--hair);
  flex:0 0 17px;margin-top:2px;position:relative}
.way.on .dot{border-color:var(--signal)}
.way.on .dot::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--signal)}

.done{text-align:center;padding:40px 20px}
.done .ok{width:62px;height:62px;border-radius:50%;margin:0 auto 20px;
  background:color-mix(in srgb,var(--live) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--live) 40%,var(--hair));display:grid;place-items:center}
.done .ok svg{width:28px;height:28px;stroke:var(--live)}
.done h2{font-family:var(--display);font-weight:600;font-size:22px;margin:0 0 8px;letter-spacing:-.02em}
.done p{margin:0 auto 22px;opacity:.6;font-size:14.5px;max-width:32ch}
.done .num{font-family:var(--mono);font-size:15px;padding:9px 16px;border-radius:5px;
  border:1px solid var(--hair);background:var(--plate);display:inline-block;margin-bottom:22px}

.foot{padding:26px 16px 34px;border-top:1px solid var(--hair);text-align:center;
  font-size:12.5px;opacity:.45;line-height:1.6}