/* ============================================================
   ИМПЕРИЯ ЦВЕТОВ — стили магазина (поверх ds-styles.css)
   Все значения опираются на токены :root из дизайн-системы.
   ============================================================ */

/* якорные переходы не прячут заголовки под фиксированной шапкой */
section[id], footer[id]{ scroll-margin-top:92px; }

/* секционные заголовки */
.section{ padding:clamp(80px,11vh,140px) 0; position:relative; z-index:3; }
.section.tight{ padding:clamp(56px,8vh,96px) 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:52px; flex-wrap:wrap; }
.sec-head .ttl{ font-size:clamp(2rem,4.4vw,3.4rem); max-width:18ch; line-height:1.05; }
.sec-head .lead{ color:var(--ink-soft); max-width:46ch; margin-top:16px; font-size:1.04rem; }
.sec-head .right{ display:flex; flex-direction:column; gap:6px; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .ttl{ margin:18px auto 0; max-width:22ch; }
.center .lead{ margin:16px auto 0; }

/* ================= КАТЕГОРИИ (плитки-витрины) ================= */
.cats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:230px; gap:18px;
}
.cat-tile{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--line); display:flex; align-items:flex-end;
  text-decoration:none; will-change:transform;
}
.cat-tile.big{ grid-row:span 2; }
.cat-tile.wide{ grid-column:span 2; }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); z-index:0; }
.cat-tile::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,16,11,.05) 30%, rgba(4,16,11,.82) 100%); }
.cat-tile:hover img{ transform:scale(1.07); }
.cat-tile .ct-body{ position:relative; z-index:2; padding:24px; width:100%;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.cat-tile .ct-name{ font-family:var(--font-display); font-size:1.5rem; line-height:1.05; }
.cat-tile .ct-count{ font-size:12.5px; color:var(--ink-dim); margin-top:6px; letter-spacing:.04em; }
.cat-tile .ct-arrow{ flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center; color:var(--gold);
  background:color-mix(in srgb,var(--bg) 55%,transparent); backdrop-filter:blur(6px);
  transition:background .35s, border-color .35s, transform .35s var(--ease); }
.cat-tile:hover .ct-arrow{ background:var(--gold); color:#23170a; border-color:var(--gold); transform:translate(3px,-3px); }
@media (max-width:980px){ .cats-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; grid-auto-flow:dense; } .cat-tile.wide{ grid-column:span 2; } }
@media (max-width:560px){ .cats-grid{ grid-template-columns:1fr; } .cat-tile.wide,.cat-tile.big{ grid-column:auto; grid-row:auto; } }

/* ================= ПРЕИМУЩЕСТВА ================= */
.adv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.adv{ padding:30px 26px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); transition:border-color .4s, transform .4s var(--ease), background .4s; }
.adv:hover{ border-color:var(--gold); transform:translateY(-5px); background:color-mix(in srgb,var(--gold) 5%,transparent); }
.adv .ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px;
  color:var(--gold); border:1px solid var(--line); background:color-mix(in srgb,var(--gold) 8%,transparent); }
.adv h3{ font-family:var(--font-display); font-size:1.32rem; margin-bottom:10px; }
.adv p{ color:var(--ink-soft); font-size:.96rem; line-height:1.55; }
@media (max-width:980px){ .adv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .adv-grid{ grid-template-columns:1fr; } }

/* ================= КАТАЛОГ: ФИЛЬТРЫ + КАРТОЧКИ ================= */
.filters{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:42px; }
.chip{
  padding:12px 22px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-soft); font-weight:600; font-size:13.5px;
  letter-spacing:.02em; cursor:pointer; white-space:nowrap;
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--gold); }
.chip.active{ background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); color:#23170a; border-color:transparent;
  box-shadow:0 12px 30px -14px var(--gold); }
.chip .n{ opacity:.6; font-weight:600; margin-left:7px; }
.chip.active .n{ opacity:.75; }

.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1080px){ .cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .cards{ grid-template-columns:1fr; } }

.card{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--bg-2); display:flex; flex-direction:column; position:relative;
  transition:border-color .4s, transform .45s var(--ease), box-shadow .45s;
  will-change:transform;
}
.card:hover{ border-color:rgba(222,191,122,.5); transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.card .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer; }
.card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .ph img{ transform:scale(1.06); }
.card .ph .gloss{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(4,16,11,.35)); pointer-events:none; }
.card .badge{ position:absolute; top:14px; left:14px; z-index:3; padding:6px 13px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.badge.hit{ background:var(--gold); color:#23170a; }
.badge.new{ background:var(--green); color:#04130b; }
.badge.premium{ background:transparent; color:var(--gold); border:1px solid var(--gold); backdrop-filter:blur(6px); }
.card .quick{ position:absolute; top:12px; right:12px; z-index:3; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 50%,transparent); backdrop-filter:blur(8px);
  color:var(--ink); display:grid; place-items:center; opacity:0; transform:translateY(-6px);
  transition:opacity .35s, transform .35s var(--ease), color .3s, border-color .3s; cursor:pointer; }
.card:hover .quick{ opacity:1; transform:none; }
.card .quick:hover{ color:var(--gold); border-color:var(--gold); }

.card .body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card .nm{ font-family:var(--font-display); font-size:1.32rem; line-height:1.1; }
.card .sub{ color:var(--ink-dim); font-size:12.5px; letter-spacing:.01em; min-height:2.4em; }
.card .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.card .price{ font-family:var(--font-display); font-size:1.45rem; color:var(--gold); }
.card .price small{ font-family:var(--font-body); font-size:.7em; color:var(--ink-dim); margin-left:3px; }
.card .add{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); color:#23170a;
  display:grid; place-items:center; transition:transform .3s var(--ease), box-shadow .3s;
  box-shadow:0 12px 26px -12px var(--gold);
}
.card .add:hover{ transform:scale(1.08); box-shadow:0 16px 32px -12px var(--gold); }
.card .add:active{ transform:scale(.92); }
.card.added .add{ background:var(--green); color:#fff; }

.catalog-more{ display:flex; justify-content:center; margin-top:52px; }
.empty{ text-align:center; color:var(--ink-dim); padding:60px 0; font-size:1.05rem; display:none; }

/* ================= ПОВОДЫ ================= */
.occasions{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.occ{ padding:26px 16px; text-align:center; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); cursor:pointer; transition:border-color .35s, transform .35s var(--ease), background .35s; }
.occ:hover{ border-color:var(--gold); transform:translateY(-4px); background:color-mix(in srgb,var(--gold) 5%,transparent); }
.occ .em{ font-size:1.9rem; color:var(--gold); margin-bottom:12px; display:block; }
.occ .ol{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
@media (max-width:880px){ .occasions{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .occasions{ grid-template-columns:repeat(2,1fr); } }

/* ================= CTA-БАНД с hello-girl ================= */
.cta-band{ position:relative; z-index:3; }
.cta-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(120deg,var(--bg-3),var(--bg-2)); }
.cta-inner::before{ content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(70% 90% at 85% 50%, var(--glow), transparent 70%); pointer-events:none; }
.cta-text{ position:relative; z-index:2; padding:clamp(36px,5vw,68px); }
.cta-text h2{ font-size:clamp(2rem,4vw,3.2rem); line-height:1.04; margin:18px 0 16px; }
.cta-text p{ color:var(--ink-soft); max-width:44ch; margin-bottom:30px; font-size:1.05rem; }
.cta-photo{ position:relative; z-index:1; align-self:end; min-height:340px; display:flex; align-items:flex-end; justify-content:center; }
.cta-photo img{ width:100%; max-width:440px; height:auto; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
@media (max-width:880px){ .cta-inner{ grid-template-columns:1fr; } .cta-photo{ order:-1; min-height:auto; } .cta-photo img{ max-width:300px; } }

/* ================= ОТЗЫВЫ ================= */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review{ padding:32px 30px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  display:flex; flex-direction:column; gap:18px; }
.review .stars{ color:var(--gold); letter-spacing:3px; font-size:15px; }
.review .txt{ color:var(--ink-soft); line-height:1.6; font-size:1.02rem; flex:1; }
.review .who{ display:flex; align-items:center; gap:13px; }
.review .av{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.1rem; color:#23170a;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); }
.review .nm{ font-weight:600; }
.review .meta{ font-size:12px; color:var(--ink-dim); margin-top:2px; }
@media (max-width:880px){ .reviews{ grid-template-columns:1fr; } }

/* ================= ДОСТАВКА / ГОРОДА ================= */
.delivery{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.delivery .steps{ display:flex; flex-direction:column; gap:8px; }
.dstep{ display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line-soft); }
.dstep:last-child{ border-bottom:0; }
.dstep .num{ font-family:var(--font-display); font-size:1.7rem; color:var(--gold); flex:0 0 auto; width:48px; }
.dstep h4{ font-size:1.18rem; margin-bottom:6px; font-family:var(--font-body); font-weight:700; }
.dstep p{ color:var(--ink-soft); font-size:.97rem; line-height:1.5; }
.cities-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,4vw,44px);
  background:linear-gradient(135deg,var(--bg-2),var(--bg-3)); position:relative; overflow:hidden; }
.cities-card h3{ font-size:1.7rem; margin-bottom:6px; }
.cities-card .cap{ color:var(--ink-dim); font-size:13px; margin-bottom:26px; }
.cities{ display:flex; flex-wrap:wrap; gap:10px; }
.city{ padding:9px 16px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--ink-soft);
  transition:border-color .3s, color .3s; }
.city:hover{ border-color:var(--gold); color:var(--ink); }
.city.lead-city{ background:color-mix(in srgb,var(--gold) 12%,transparent); border-color:var(--gold); color:var(--gold); }
@media (max-width:880px){ .delivery{ grid-template-columns:1fr; } }

/* ================= ПОДВАЛ (расширенный) ================= */
.footer{ position:relative; z-index:3; border-top:1px solid var(--line); padding:clamp(56px,7vh,90px) 0 40px; background:var(--bg-2); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:48px; }
.foot-col h5{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; font-weight:700; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-col a{ color:var(--ink-soft); font-size:.96rem; transition:color .3s; }
.foot-col a:hover{ color:var(--gold); }
.foot-brand .brand{ margin-bottom:18px; }
.foot-brand p{ color:var(--ink-dim); font-size:.95rem; line-height:1.6; max-width:34ch; }
.foot-contact .phone{ font-family:var(--font-display); font-size:1.55rem; color:var(--ink); margin-bottom:6px; display:block; }
.foot-contact .hours{ color:var(--ink-dim); font-size:13px; margin-bottom:20px; }
.socials{ display:flex; gap:12px; }
.socials a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--ink-soft); transition:border-color .3s, color .3s, transform .3s var(--ease); }
.socials a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line-soft); color:var(--ink-dim); font-size:12.5px; }
.foot-bottom .pays{ display:flex; gap:10px; align-items:center; }
.foot-bottom .pays img{ height:24px; width:auto; border-radius:4px; opacity:.85; }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr; } }

/* ================= КОРЗИНА (drawer) ================= */
.cart-btn{ position:relative; display:inline-flex; align-items:center; gap:9px; padding:11px 16px;
  border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-soft);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; cursor:pointer;
  transition:border-color .3s, color .3s; }
.cart-btn:hover{ border-color:var(--gold); color:var(--gold); }
.cart-btn .count{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--gold); color:#23170a; font-size:11px; font-weight:700;
  display:grid; place-items:center; transform:scale(0); transition:transform .35s var(--ease); }
.cart-btn.has .count{ transform:scale(1); }

.scrim{ position:fixed; inset:0; z-index:400; background:rgba(3,12,8,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.scrim.open{ opacity:1; visibility:visible; }

.cart{ position:fixed; top:0; right:0; bottom:0; width:min(440px,92vw); z-index:500;
  background:var(--bg-2); border-left:1px solid var(--line); transform:translateX(100%);
  transition:transform .5s var(--ease); display:flex; flex-direction:column; }
.cart.open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 28px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-size:1.5rem; }
.cart-close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:border-color .3s, color .3s; }
.cart-close:hover{ border-color:var(--gold); color:var(--gold); }
.cart-items{ flex:1; overflow-y:auto; padding:14px 28px; display:flex; flex-direction:column; gap:14px; }
.cart-empty{ text-align:center; color:var(--ink-dim); margin:auto; padding:40px 0; }
.cart-empty .big{ font-family:var(--font-display); font-size:1.4rem; color:var(--ink-soft); margin-bottom:8px; }
.ci{ display:flex; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.ci img{ width:72px; height:88px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.ci .ci-b{ flex:1; display:flex; flex-direction:column; gap:3px; }
.ci .ci-nm{ font-family:var(--font-display); font-size:1.12rem; }
.ci .ci-pr{ color:var(--gold); font-weight:600; }
.ci .ci-ctrl{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.qty button{ width:30px; height:30px; background:transparent; color:var(--ink); border:none; cursor:pointer; font-size:16px; transition:background .25s; }
.qty button:hover{ background:var(--card); color:var(--gold); }
.qty span{ min-width:26px; text-align:center; font-weight:600; font-size:14px; }
.ci-remove{ background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:12px; transition:color .25s; }
.ci-remove:hover{ color:var(--rose); }
.cart-foot{ padding:24px 28px; border-top:1px solid var(--line); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.cart-total .lbl{ color:var(--ink-soft); }
.cart-total .sum{ font-family:var(--font-display); font-size:1.9rem; color:var(--gold); }
.cart-foot .btn{ width:100%; justify-content:center; }
.cart-note{ text-align:center; color:var(--ink-dim); font-size:12px; margin-top:14px; }

/* ================= МОДАЛКА ТОВАРА ================= */
.modal{ position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.modal.open{ opacity:1; visibility:visible; }
.modal-card{ width:min(900px,100%); max-height:90vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  transform:translateY(20px) scale(.98); transition:transform .45s var(--ease); }
.modal.open .modal-card{ transform:none; }
.modal-ph{ position:relative; min-height:420px; }
.modal-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.modal-body{ padding:clamp(28px,4vw,46px); display:flex; flex-direction:column; overflow-y:auto; }
.modal-body .eyebrow{ margin-bottom:18px; }
.modal-body h2{ font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.05; margin-bottom:12px; }
.modal-body .m-sub{ color:var(--ink-soft); margin-bottom:22px; line-height:1.5; }
.modal-body .m-price{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold); margin-bottom:24px; }
.modal-feat{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.modal-feat li{ display:flex; gap:12px; align-items:center; color:var(--ink-soft); font-size:.96rem; }
.modal-feat li svg{ color:var(--green-bright); flex:0 0 auto; }
.modal-body .m-actions{ display:flex; gap:12px; margin-top:auto; }
.modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 55%,transparent); backdrop-filter:blur(8px);
  color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:border-color .3s, color .3s; }
.modal-close:hover{ border-color:var(--gold); color:var(--gold); }
@media (max-width:720px){ .modal-card{ grid-template-columns:1fr; max-height:92vh; } .modal-ph{ min-height:260px; } }

/* toast */

.toast.show{ transform:translate(-50%,0); }

/* ================= МОБИЛЬНОЕ МЕНЮ ================= */
.burger{ display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; align-items:center; justify-content:center; }
.burger svg{ width:20px; height:20px; }
.mobile-menu{ position:fixed; inset:0; z-index:450; background:var(--bg); padding:90px 28px 40px;
  transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; gap:6px; }
.mobile-menu.open{ transform:none; }
.mobile-menu a{ font-family:var(--font-display); font-size:1.8rem; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.mobile-menu .mm-close{ position:absolute; top:24px; right:24px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; }
@media (max-width:1080px){ .burger{ display:flex; } }

/* ================= ПАНЕЛЬ TWEAKS ================= */
.tw-fab{ position:fixed; left:18px; bottom:18px; z-index:540; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-2); color:var(--gold); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7); transition:transform .3s var(--ease), border-color .3s; }
.tw-fab:hover{ transform:rotate(40deg); border-color:var(--gold); }
.tw-panel{ position:fixed; left:18px; bottom:78px; z-index:541; width:280px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:20px; box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  transform:translateY(12px) scale(.96); opacity:0; visibility:hidden; transform-origin:bottom left;
  transition:transform .35s var(--ease), opacity .35s, visibility .35s; }
.tw-panel.open{ transform:none; opacity:1; visibility:visible; }
.tw-panel h4{ font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px; }
.tw-group{ margin-bottom:18px; }
.tw-group:last-child{ margin-bottom:0; }
.tw-group .lab{ font-size:12px; color:var(--ink-dim); letter-spacing:.06em; margin-bottom:9px; display:block; text-transform:uppercase; }
.tw-seg{ display:flex; gap:6px; }
.tw-seg button{ flex:1; padding:9px 6px; border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--ink-soft); font-size:12px; font-weight:600; cursor:pointer; transition:all .25s; }
.tw-seg button.on{ background:var(--gold); color:#23170a; border-color:transparent; }
.tw-swatches{ display:flex; gap:9px; }
.tw-swatches button{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .25s; }
.tw-swatches button.on{ border-color:var(--ink); transform:scale(1.12); }
.tw-toggle{ display:flex; align-items:center; justify-content:space-between; }
.tw-toggle .pill{ width:42px; height:23px; border-radius:999px; background:rgba(244,239,227,.14); position:relative; cursor:pointer; transition:background .3s; }
.tw-toggle .pill::after{ content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%; background:var(--ink-dim); transition:transform .3s var(--ease), background .3s; }
.tw-toggle .pill.on{ background:rgba(43,160,107,.4); }
.tw-toggle .pill.on::after{ transform:translateX(19px); background:var(--green-bright); }
@media (max-width:1080px){ .tw-fab{ display:none; } }

/* доступность анимаций */
@media (prefers-reduced-motion:reduce){
  .cat-tile img,.card,.adv,.occ{ transition:none !important; }
}

/* ============================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ
   Свайп-паттерны вместо вертикальных простыней, компактная
   шапка, тап-зоны ≥44px, 2 колонки каталога.
   ============================================================ */

/* на тач-устройствах hover недоступен — «быстрый просмотр» виден всегда */
@media (hover:none){
  .card .quick{ opacity:1; transform:none; width:44px; height:44px; }
}

@media (max-width:700px){
  /* --- шапка: компактная, без второстепенного --- */
  .topbar{ padding:14px 4vw; }
  .brand{ gap:10px; }
  .brand img{ height:36px; }
  .brand .brand-sub{ display:none; }
  .sound-toggle{ display:none; }
  .cart-btn .lbl{ display:none; }
  .cart-btn{ padding:12px; min-width:46px; min-height:46px; justify-content:center; }
  .top-actions{ gap:10px; }

  /* --- ритм секций --- */
  .section{ padding:64px 0; }
  .section.tight{ padding:44px 0; }
  .sec-head{ margin-bottom:30px; gap:14px; }
  .sec-head .lead{ font-size:.95rem; }

  /* --- герой --- */
  .hero{ min-height:100svh; padding:104px 0 48px; }
  .scroll-hint{ display:none; }
  .hero-kicker{ margin-bottom:22px; }
  .hero-cta{ margin-top:28px; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }

  /* коллаж → свайп-карусель после текста */
  .hero-collage{
    order:0; display:flex; gap:12px; height:auto;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin:26px -4vw 0; padding:6px 4vw 16px; scrollbar-width:none;
  }
  .hero-collage::-webkit-scrollbar{ display:none; }
  .hero-collage .bq{ flex:0 0 72vw; scroll-snap-align:center; }
  .hero-collage .bq.b1{ aspect-ratio:4/5 !important; }

  /* --- фильтры: горизонтальная лента --- */
  .filters{
    flex-wrap:nowrap; overflow-x:auto; gap:10px;
    margin:0 -4vw 28px; padding:0 4vw 6px; scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; padding:13px 18px; }

  /* --- отзывы: свайп-карусель --- */
  .reviews{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -4vw; padding:0 4vw 14px; scrollbar-width:none;
  }
  .reviews::-webkit-scrollbar{ display:none; }
  .review{ flex:0 0 84%; scroll-snap-align:center; padding:24px 22px; }
}

@media (max-width:560px){
  /* --- категории: плотная сетка 2 колонки (как на десктопе, но компактнее) --- */
  .cats-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:148px; gap:10px; grid-auto-flow:dense; }
  .cat-tile.big{ grid-row:span 2; grid-column:auto; }
  .cat-tile.wide{ grid-column:span 2; grid-row:auto; }
  .cat-tile .ct-body{ padding:14px; }
  .cat-tile .ct-name{ font-size:1.05rem; }
  .cat-tile .ct-count{ font-size:10.5px; margin-top:3px; }
  .cat-tile .ct-arrow{ width:34px; height:34px; }

  /* --- каталог: 2 колонки, компактные карточки --- */
  .cards{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .card .body{ padding:12px 12px 14px; gap:3px; }
  .card .nm{ font-size:1.02rem; }
  .card .sub{ font-size:10.5px; min-height:auto; }
  .card .row{ margin-top:8px; }
  .card .price{ font-size:1.1rem; }
  .card .add{ width:44px; height:44px; }

  /* --- поводы --- */
  .occasions{ gap:10px; }
  .occ{ padding:18px 10px; }
  .occ .em{ font-size:1.5rem; margin-bottom:8px; }
  .occ .ol{ font-size:12px; }

  /* --- CTA-банд --- */
  .cta-text{ padding:28px 22px 34px; }
  .cta-text .btn{ width:100%; justify-content:center; }
  .cta-photo img{ max-width:240px; }

  /* --- доставка --- */
  .dstep{ padding:16px 0; gap:14px; }
  .dstep .num{ width:38px; font-size:1.4rem; }
  .cities{ gap:8px; }
  .city{ padding:8px 13px; font-size:12px; }

  /* --- подвал --- */
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* телефон в мобильном меню */
.mobile-menu .mm-phone{ color:var(--gold); border-bottom:0; margin-top:14px; }
.mobile-menu .mm-hours{ font-family:var(--font-body); font-size:13px; color:var(--ink-dim); padding:6px 0; border-bottom:0; }

/* ============================================================
   МОБИЛЬНЫЕ ПАТТЕРНЫ (≤7 00px): app-панель · stories · bottom-sheets
   ============================================================ */

/* --- нижняя app-панель --- */
.appbar{ display:none; }
@media (max-width:700px){
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .fab{ display:none !important; }
  .burger{ display:none; }
  .appbar{
    position:fixed; left:0; right:0; bottom:0; z-index:300;
    display:grid; grid-template-columns:repeat(4,1fr);
    background:color-mix(in srgb, var(--bg-2) 90%, transparent);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .appbar button{
    position:relative; min-height:54px; border:none; background:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--ink-dim); font-family:var(--font-body); font-size:10.5px; letter-spacing:.04em; font-weight:600;
    border-radius:12px; transition:color .25s;
  }
  .appbar button:active{ color:var(--gold); }
  .appbar .ab-count{
    position:absolute; top:4px; right:calc(50% - 22px); min-width:17px; height:17px; padding:0 4px;
    border-radius:999px; background:var(--gold); color:#23170a; font-size:10px; font-weight:700;
    display:grid; place-items:center; transform:scale(0); transition:transform .3s var(--ease);
  }
  .appbar .ab-count.show{ transform:scale(1); }
  

  /* --- категории → stories-карусель --- */
  .cats-grid{
    display:flex; gap:18px; overflow-x:auto; grid-auto-rows:auto;
    margin:0 -4vw; padding:6px 4vw 14px; scrollbar-width:none; scroll-snap-type:x proximity;
  }
  .cats-grid::-webkit-scrollbar{ display:none; }
  .cat-tile, .cat-tile.big, .cat-tile.wide{
    flex:0 0 88px; grid-row:auto; grid-column:auto; scroll-snap-align:start;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    border:none; border-radius:0; overflow:visible; background:none;
  }
  .cat-tile::after{ display:none; }
  .cat-tile img{
    position:static; width:82px; height:82px; border-radius:50%;
    outline:2px solid var(--gold); outline-offset:3px;
  }
  .cat-tile:hover img{ transform:none; }
  .cat-tile .ct-body{ padding:0; display:block; text-align:center; }
  .cat-tile .ct-name{ font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--ink-soft); line-height:1.25; }
  .cat-tile .ct-count, .cat-tile .ct-arrow{ display:none; }

  /* --- липкая лента фильтров --- */
  .filters{
    position:sticky; top:62px; z-index:120;
    background:linear-gradient(180deg, var(--bg) 78%, transparent);
    padding-top:10px; padding-bottom:10px; margin-bottom:18px;
  }

  /* --- корзина → bottom-sheet --- */
  .cart{
    top:auto; left:0; right:0; bottom:0; width:100%;
    height:min(84svh, 620px);
    border-left:none; border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;
    transform:translateY(102%);
  }
  .cart.open{ transform:none; }
  .cart-head{ padding:4px 22px 16px; }
  .cart-items{ padding:10px 22px; }
  .cart-foot{ padding:16px 22px calc(16px + env(safe-area-inset-bottom)); }

  /* --- модалка товара → bottom-sheet --- */
  .modal{ place-items:end stretch; padding:0; }
  .modal-card{
    grid-template-columns:1fr; width:100%; max-height:88svh; overflow-y:auto;
    border-radius:22px 22px 0 0; border-left:none; border-right:none; border-bottom:none;
    transform:translateY(100%); position:relative;
  }
  .modal.open .modal-card{ transform:none; }
  .modal-ph{ min-height:300px; }
  .modal-body{ padding:22px 22px calc(26px + env(safe-area-inset-bottom)); overflow:visible; }
}

/* --- ручка-грип для bottom-sheets --- */
.sheet-grip{ display:none; }
@media (max-width:700px){
  .sheet-grip{
    display:flex; justify-content:center; align-items:center;
    height:30px; flex:0 0 auto; touch-action:none; cursor:grab;
  }
  .modal-card .sheet-grip{
    position:absolute; top:0; left:0; right:0; z-index:6; height:38px;
    background:linear-gradient(180deg, rgba(4,16,11,.55), transparent);
    border-radius:22px 22px 0 0;
  }
  .sheet-grip span{ width:44px; height:5px; border-radius:99px; background:rgba(244,239,227,.32); }
  .cart.dragging, .modal-card.dragging{ transition:none; }
}

/* ── Toast notification ─────────────────────────────── */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1a2530;
  color: #e2e8f0;
  border: 1px solid rgba(222,191,122,.3);
  border-radius: 32px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  transition: opacity .28s cubic-bezier(.4,0,.2,1),
              transform .32s cubic-bezier(.34,1.56,.64,1);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast svg { color: #54b981; flex-shrink: 0; }

/* ── Image protection ───────────────────────────────── */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* Кнопки и интерактивные элементы поверх картинок — нужен pointer-events */
.ph button, .card button, .add, .quick { pointer-events: all; }
/* Оверлей поверх карточек блокирует правый клик */
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ph button { position: relative; z-index: 2; }