/* ==========================================================================
   Features from the client's brief: search, account, checkout, legal, cookie,
   news banners, e-gift certificate, delivery calculator
   ========================================================================== */

.link-inline { display: inline; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font: inherit; padding: 0; }
.link-inline:hover { text-decoration-thickness: 2px; }
.proto-note { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-s); background: #f4efe2; color: #6d5a2a; font-size: 13px; }
.input.is-err { border-color: var(--signal); }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; }
select.input { cursor: pointer; }

/* ---------- Side sheet ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 110; background: rgba(17,17,17,.4); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.sheet-bg.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 111; width: min(760px, 100vw); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .7s var(--ease); border-radius: var(--r-l) 0 0 var(--r-l); overflow: hidden; }
.sheet.is-open { transform: none; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.sheet__body { flex: 1; overflow: auto; padding: 24px 28px 40px; overscroll-behavior: contain; }
@media (max-width: 760px) { .sheet { border-radius: 0; } .sheet__head, .sheet__body { padding-left: 18px; padding-right: 18px; } }

/* ---------- Search overlay ---------- */
.qs { position: fixed; inset: 0 0 auto 0; z-index: 105; background: var(--paper); max-height: 86vh; display: flex; flex-direction: column; border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: 0 30px 80px -20px rgba(17,17,17,.3); transform: translateY(-104%); transition: transform .65s var(--ease); }
.qs.is-open { transform: none; }
.qs__bar { display: flex; align-items: center; gap: 14px; height: 92px; border-bottom: 1px solid var(--line); }
.qs__icon .icon { width: 26px; height: 26px; color: var(--mute); }
.qs__input { flex: 1; border: 0; background: none; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.02em; outline: none; min-width: 0; }
.qs__input::-webkit-search-cancel-button { display: none; }
.qs__body { overflow: auto; padding-top: 22px; padding-bottom: 28px; overscroll-behavior: contain; }
.sres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin-top: 12px; }
.sres__i { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px; border-radius: var(--r-m); transition: background .2s; }
.sres__i:hover, .sres__i.is-sel { background: var(--bg); }
.sres__img { width: 64px; height: 64px; border-radius: 14px; background: var(--tile); overflow: hidden; }
.sres__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.sres__t { display: grid; gap: 1px; min-width: 0; }
.sres__t b { font-weight: 500; font-size: 17px; }
.sres__t mark { background: #f6e27a; color: inherit; border-radius: 3px; padding: 0 1px; }
.sres__p { font-weight: 500; }
@media (max-width: 760px) { .sres { grid-template-columns: 1fr; } .qs__bar { height: 72px; } }

/* ---------- Account / forms ---------- */
.acc .form, .form { display: grid; gap: 14px; }
.form__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { width: 100%; min-width: 0; height: 58px; text-align: center; font-size: 24px; font-weight: 500; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--paper); }
.otp input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.pwbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -6px; }
.pwbar i { height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.pwbar i.on { background: var(--ok); }
.done { text-align: center; display: grid; justify-items: center; }
.done__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.consent { align-items: flex-start; font-size: 14px; line-height: 1.45; }
.consent .check__box { margin-top: 2px; }
.consent__err { color: var(--signal); margin-top: -8px; }

/* ---------- Checkout ---------- */
.co { display: grid; gap: 22px; }
.co__notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--bg); border-radius: var(--r-m); font-size: 14px; }
.co__step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.co__n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; }
.co__h { font-weight: 500; font-size: 20px; letter-spacing: -.015em; margin: 2px 0 14px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.co__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co__wide { grid-column: 1 / -1; }
.co__methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.co__m { text-align: left; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); transition: border-color .2s, background .2s, box-shadow .2s; }
.co__m:hover { border-color: var(--ink); }
.co__m.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--bg); }
.co__mt { font-weight: 500; }
.co__mp { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.co__detail { margin-top: 14px; display: grid; gap: 12px; }
.co__tariff { padding: 12px 14px; border-radius: var(--r-s); background: var(--bg); }
.co__pays { display: flex; flex-wrap: wrap; gap: 8px; }
.co__hint { flex-basis: 100%; margin-top: 4px; }
.co__sum { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--r-l); background: var(--bg); }
.co__sum > div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.co__lines { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.co__lines div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-2); }
.co__total { padding-top: 10px; border-top: 1px solid var(--line); align-items: baseline; }
.co__total b { font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.pickup { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--line-2); }
@media (max-width: 560px) { .co__grid { grid-template-columns: 1fr; } .co__step { grid-template-columns: 1fr; } .co__n { display: none; } }

/* Европочта offices */
.ep { display: grid; gap: 10px; }
.ep__bar { display: flex; gap: 8px; flex-wrap: wrap; }
.search-in { position: relative; flex: 1; min-width: 220px; }
.search-in .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mute); }
.search-in .input { padding-left: 42px; border-radius: var(--r-pill); }
.ep__list { max-height: 290px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); padding: 4px; overscroll-behavior: contain; }
.ep__o { width: 100%; text-align: left; display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.ep__o:hover { background: var(--bg); }
.ep__o.is-on { background: var(--ink); color: var(--bg); }
.ep__o mark { background: #f6e27a; color: inherit; border-radius: 3px; }
.ep__picked { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: #e8f2ec; }
.ep__picked .icon { color: var(--ok); }

/* ---------- Documents ---------- */
.sheet--doc { width: min(720px, 100vw); }
.doc { display: grid; gap: 14px; font-size: 15px; line-height: 1.6; }
.doc-toc { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.doc-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-t th, .doc-t td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-t th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 400; }
.receipts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.receipt-slot div { aspect-ratio: 3 / 5; border: 1.5px dashed var(--line-2); border-radius: var(--r-m); display: grid; place-content: center; text-align: center; gap: 4px; background: var(--bg); }
.receipt-slot figcaption { margin-top: 8px; }
@media (max-width: 560px) { .receipts { grid-template-columns: 1fr 1fr; } }

/* ---------- Footer legal block ---------- */
.footer__law { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px 48px; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #2c2c29; position: relative; z-index: 2; background: var(--ink); font-size: 13px; color: #9a9a93; }
.footer__docs { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.footer__docs .label { color: #7d7d76; margin-bottom: 4px; }
.footer__docs button { color: #d4d4cd; font-size: 14px; text-align: left; }
.footer__docs button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__req { display: grid; gap: 4px; line-height: 1.5; }
.footer__req b { color: #d4d4cd; font-weight: 500; }
@media (max-width: 760px) { .footer__law { grid-template-columns: 1fr; } }

/* ---------- Cookie notice ---------- */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 100; width: min(420px, calc(100vw - 32px)); background: var(--paper); border-radius: var(--r-l); padding: 20px; box-shadow: 0 24px 60px -18px rgba(17,17,17,.35); display: grid; gap: 10px; transform: translateY(calc(100% + 30px)); transition: transform .7s var(--ease); }
.cookie.is-on { transform: none; }
.cookie__t { font-weight: 500; font-size: 17px; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.cookie__set { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Home: news banners ---------- */
.news { padding: clamp(56px, 7vw, 96px) 0 0; }
.news__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.news__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
.news__track::-webkit-scrollbar { display: none; }
.nb { flex: none; width: clamp(300px, 40vw, 600px); aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; position: relative; scroll-snap-align: start; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 28px); isolation: isolate; }
.nb--light { color: var(--ink); }
.nb__bg { position: absolute; inset: 0; z-index: -1; }
.nb__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nb:hover .nb__bg img { transform: scale(1.05); }
.nb__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%); }
.nb--light .nb__bg::after { background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 100%); }
.nb__tag { position: absolute; top: 18px; left: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.92); color: var(--ink); padding: 6px 10px; border-radius: var(--r-pill); }
.nb__t { font-size: clamp(24px, 2.4vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; max-width: 16ch; text-wrap: balance; }
.nb__d { margin-top: 8px; font-size: 15px; opacity: .9; max-width: 40ch; }
.nb__go { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.nb__go .icon { transition: transform .4s var(--ease); }
.nb:hover .nb__go .icon { transform: translateX(4px); }
.nb--tiles .nb__bg { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; background: #111; }
.nb--tiles .nb__bg img { border-radius: 10px; }
.news__nav { display: flex; gap: 6px; align-items: center; }
.news__prog { height: 2px; background: var(--line); border-radius: 2px; margin: 18px var(--gutter) 0; position: relative; overflow: hidden; }
.news__prog i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(.1); transition: transform .3s; }

/* ---------- Home: e-gift certificate constructor ---------- */
.gc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.gc__preview { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; }
.gcard { aspect-ratio: 1.6; border-radius: 28px; overflow: hidden; position: relative; color: #fff; padding: clamp(20px, 2.6vw, 34px); display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; box-shadow: 0 30px 60px -30px rgba(17,17,17,.45); transition: transform .6s var(--ease); }
.gcard__bg { position: absolute; inset: 0; z-index: -1; }
.gcard__bg img { width: 100%; height: 100%; object-fit: cover; }
.gcard__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.55)); }
.gcard--ink .gcard__bg { background: #111; }
.gcard--ink .gcard__bg::after { display: none; }
.gcard--paper { color: var(--ink); }
.gcard--paper .gcard__bg { background: #f1efe9; }
.gcard--paper .gcard__bg::after { display: none; }
.gcard__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gcard__top .logo { color: inherit; font-size: 20px; }
.gcard__sum { align-self: end; font-size: clamp(64px, 8vw, 128px); font-weight: 500; letter-spacing: -.06em; line-height: .8; display: flex; align-items: flex-end; gap: 10px; }
.gcard__sum small { font-size: 18px; letter-spacing: 0; opacity: .8; padding-bottom: 6px; }
.gcard__bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 14px; }
.gcard__msg { font-size: 14px; line-height: 1.35; max-width: 30ch; opacity: .92; min-height: 1.35em; }
.gcard__to { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; text-align: right; }
.gc__mail { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper); font-size: 14px; }
.gc__mail .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.gc__form { display: grid; gap: 22px; }
.gc__designs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gc__d { aspect-ratio: 1.6; border-radius: 12px; overflow: hidden; position: relative; }
.gc__d img { width: 100%; height: 100%; object-fit: cover; }
.gc__d::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--ink); transition: box-shadow .25s; }
.gc__d.is-on::after { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--paper); }
.gc__amt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gc__own { position: relative; width: 150px; }
.gc__own .input { border-radius: var(--r-pill); height: 38px; padding-right: 48px; }
.gc__own span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--mute); }
.gc__seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px; gap: 3px; }
.gc__seg button { height: 34px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; }
.gc__seg button.is-on { background: var(--ink); color: var(--bg); }
.gc__count { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: -8px; }
.gc__rules { display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); padding: 16px 18px; border-radius: var(--r-m); background: var(--paper); }
.gc__rules p { display: flex; gap: 10px; }
.gc__rules p::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-top: 8px; flex: none; }
@media (max-width: 1000px) { .gc { grid-template-columns: 1fr; } .gc__preview { position: static; } }
@media (max-width: 560px) { .gc__designs { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Home: delivery calculator ---------- */
.dcalc { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--paper); }
.dcalc__in { display: grid; gap: 22px; align-content: start; }
.dcalc__row { display: grid; gap: 10px; }
.dcalc__row .label b { color: var(--ink); font-size: 13px; }
.dcalc__out { display: grid; gap: 8px; align-content: start; }
.dcalc__m { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 14px 16px; border-radius: var(--r-m); background: var(--bg); }
.dcalc__m b { font-weight: 500; }
.dcalc__m .num { font-size: 20px; font-weight: 500; letter-spacing: -.02em; grid-row: span 2; align-self: center; }
.dcalc__m .num.free { color: var(--ok); }
.dcalc__m .small { grid-column: 1; }
@media (max-width: 900px) { .dcalc { grid-template-columns: 1fr; } }

/* ---------- Product: gallery arrows, caption, looks ---------- */
.pdp__stage img.is-look { object-fit: cover; padding: 0; mix-blend-mode: normal; object-position: 50% 25%; }
.pdp__nav { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; opacity: 0; transition: opacity .3s, transform .3s var(--ease); box-shadow: 0 6px 20px -8px rgba(0,0,0,.25); }
.pdp__nav--prev { left: 16px; } .pdp__nav--next { right: 16px; }
.pdp__stage:hover .pdp__nav { opacity: 1; }
.pdp__nav:hover { transform: scale(1.08); }
@media (hover: none) { .pdp__nav { opacity: 1; } }
.pdp__cap { grid-column: 2; margin-top: 2px; color: var(--mute); }
@media (max-width: 1000px) { .pdp__cap { grid-column: 1; } }
.pdp__thumbs { max-height: 640px; overflow: auto; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.looks-sec { padding: clamp(40px, 6vw, 90px) 0 clamp(48px, 6vw, 90px); }
.looks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.look { aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; }
.look img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1s var(--ease); }
.look:hover img { transform: scale(1.06); }
@media (max-width: 900px) { .looks { grid-template-columns: repeat(6, 42%); overflow-x: auto; scroll-snap-type: x mandatory; } .look { scroll-snap-align: start; } }

[hidden] { display: none !important; }
.qs { visibility: hidden; transition: transform .65s var(--ease), visibility 0s .65s; }
.qs.is-open { visibility: visible; transition: transform .65s var(--ease), visibility 0s; }

/* ==========================================================================
   ТЗ-2
   ========================================================================== */
/* Phones + messengers in the header */
.topbar__right { align-items: center; }
.topbar__soc { display: inline-flex; gap: 10px; align-items: center; padding-left: 14px; border-left: 1px solid #3a3a36; }
.topbar__soc .icon { width: 15px; height: 15px; }
.hphone { position: relative; }
.hphone .chev { width: 10px; height: 10px; margin-left: 2px; transition: transform .3s var(--ease); }
.hphone:hover .chev { transform: rotate(180deg); }
.hphone__pop { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: var(--paper); border-radius: var(--r-m); padding: 10px; box-shadow: 0 20px 50px -18px rgba(17,17,17,.3); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; z-index: 5; }
.hphone:hover .hphone__pop, .hphone:focus-within .hphone__pop { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease), visibility 0s; }
.hphone__pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.hphone__pop > a { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 9px 10px; border-radius: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hphone__pop > a:hover { background: var(--bg); }
.hphone__soc { display: flex; gap: 6px; padding: 8px 4px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.hphone__soc a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--bg); }
.hphone__soc .icon { width: 15px; height: 15px; }
.hphone__pop > .small { padding: 4px 10px 2px; }
.mmenu__soc { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.mmenu__soc a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #3a3a36; border-radius: var(--r-pill); color: #fff; }

/* Floating «Написать нам» */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 99; display: grid; justify-items: end; gap: 8px; }
.chat__btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-weight: 500; font-size: 15px; box-shadow: 0 14px 34px -12px rgba(17,17,17,.45); transition: transform .3s var(--ease); }
.chat__btn:hover { transform: translateY(-2px); }
.chat__menu { order: -1; display: grid; gap: 6px; justify-items: end; }
.chat__menu a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 10px 30px -14px rgba(17,17,17,.4); font-weight: 500; font-size: 15px; opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .25s, transform .4s var(--ease); }
.chat.is-open .chat__menu a { opacity: 1; transform: none; pointer-events: auto; }
.chat.is-open .chat__menu a:nth-last-child(2) { transition-delay: .03s; } .chat.is-open .chat__menu a:nth-last-child(3) { transition-delay: .06s; } .chat.is-open .chat__menu a:nth-last-child(4) { transition-delay: .09s; }
@media (max-width: 760px) { .chat__btn span { display: none; } .chat__btn { width: 52px; padding: 0; justify-content: center; } body[data-page="product"] .chat { bottom: 84px; } }
.drawer.is-open ~ .chat, body:has(.sheet.is-open) .chat { display: none; }

/* Cart: stock states */
.citem.is-out { opacity: .55; }
.citem.is-out .citem__img { filter: grayscale(1); }
.citem__note { margin-top: 8px; font-size: 13px; color: var(--signal); }
.citem.is-out .citem__note { color: var(--ink-2); }
.citem__max { margin-top: 6px; font-size: 12px; color: var(--mute); }
.citem__notify { margin-top: 10px; opacity: 1; }
.citem.is-out .citem__notify { opacity: 1; }
@media (hover: hover) { .citem.is-out:hover { opacity: .85; } }
.stepper button[disabled] { opacity: .3; cursor: not-allowed; }
.drawer__keep { padding: 14px 0 6px; color: var(--mute); }

/* Checkout: bonuses popup, full name, phone */
.sheet--co .sheet__body { position: relative; }
.bonus { position: sticky; top: 0; z-index: 4; height: 0; }
.bonus__card { position: absolute; left: 0; right: 0; top: 0; background: var(--ink); color: var(--bg); border-radius: var(--r-l); padding: 22px 22px 18px; box-shadow: 0 30px 60px -20px rgba(17,17,17,.55); transform: translateY(-20px) scale(.98); opacity: 0; pointer-events: none; transition: transform .6s var(--ease), opacity .35s; }
.bonus.is-on .bonus__card { transform: none; opacity: 1; pointer-events: auto; }
.bonus__card .label { color: #9a9a93; }
.bonus__x { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; color: #b9b9b2; }
.bonus__r { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 0 12px; border-top: 1px solid #2c2c29; }
.bonus__r .small { color: #9a9a93; }
.bonus__ic { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #4a4a46; display: grid; place-items: center; font-size: 12px; }
.bonus__r.is-ok .bonus__ic { background: var(--ok); border-color: var(--ok); color: #fff; }
.bonus__st { font-size: 13px; color: #d4d4cd; font-variant-numeric: tabular-nums; }
.bonus__r.is-ok .bonus__st { color: #8fd3a8; }
.bonus__r i { position: absolute; left: 36px; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: #2c2c29; overflow: hidden; }
.bonus__r i::after { content: ""; position: absolute; inset: 0; background: #e5e5df; transform-origin: left; transform: scaleX(var(--p)); }
.bonus__r.is-ok i::after { background: var(--ok); }
.bonus__btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.bonus__btns .btn--ghost { color: var(--bg); border-color: #4a4a46; }
.bonus__btns .btn--sm:not(.btn--ghost) { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.co__grid--3 { grid-template-columns: repeat(3, 1fr); }
.co__why { margin-top: 8px; color: var(--mute); }
.field__err { color: var(--signal); }
@media (max-width: 560px) { .co__grid--3 { grid-template-columns: 1fr; } }

/* Европочта map */
.ep__map { height: 300px; border-radius: var(--r-m); overflow: hidden; background: var(--tile); z-index: 0; }
.ep__map .leaflet-tooltip { font-family: var(--font); font-size: 13px; border-radius: 10px; }
.ep__list { max-height: 260px; }

/* Product: stock limit */
.pdp__limit { padding: 10px 14px; border-radius: var(--r-s); background: #fbeee8; color: #8a3420; }
.pdp__color.is-out { opacity: .4; }
.pdp__color.is-out::before { content: ""; position: absolute; left: 50%; top: -10%; bottom: -10%; width: 2px; background: var(--ink); transform: rotate(45deg); z-index: 1; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Home: contacts strip with phones */
.channels__phones { display: grid; gap: 4px; margin-top: 22px; }
.channels__phones a { display: grid; grid-template-columns: 44px auto; gap: 8px; align-items: baseline; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ep__tiles { filter: grayscale(.9) contrast(.92) brightness(1.04); }

/* ==========================================================================
   ТЗ-3: отзывы, «часто покупают», скидки, оплата после звонка, поиск
   ========================================================================== */
/* header phone menu: messengers wrap inside the panel (Instagram больше не вылезает) */
.hphone__pop { width: 300px; max-width: calc(100vw - 24px); }
.hphone__soc { flex-wrap: wrap; }
.hphone__soc a { flex: 1 1 auto; justify-content: center; min-width: 0; }

.qs__fix { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-s); background: #f4efe2; color: #6d5a2a; font-size: 14px; }
.receipts--2 { grid-template-columns: repeat(2, 1fr); }
.receipt-slot img { width: 100%; border-radius: var(--r-m); border: 1px solid var(--line); }

.co__rule { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: #eef3ff; font-size: 14px; margin-bottom: 12px; }
.co__rule .icon { flex: none; margin-top: 1px; }
.co__social { align-items: flex-start; font-size: 14px; margin-bottom: 12px; line-height: 1.45; }
.co__social .check__box { margin-top: 2px; }
.co__loyal { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 14px; border-radius: var(--r-m); background: #e8f2ec; font-size: 14px; }
.bonus__more { margin-top: 10px; font-size: 12.5px; color: #b9b9b2; line-height: 1.45; }

/* product: swatch-only photo, rating link */
.pdp__stage img.is-swatch { object-fit: contain; padding: 22%; mix-blend-mode: normal; border-radius: 50%; }
.pdp__rate { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); }

/* «С этим товаром часто покупают» */
.fbt { padding: clamp(40px, 6vw, 80px) 0 0; }
.fbt__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, .9fr); gap: 10px; align-items: stretch; }
.fbt__i { position: relative; display: grid; gap: 10px; padding: 12px; border-radius: var(--r-l); background: var(--paper); cursor: pointer; transition: box-shadow .3s; }
.fbt__i:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.fbt__i input { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; accent-color: var(--ink); z-index: 1; }
.fbt__img { aspect-ratio: 1; border-radius: var(--r-m); background: #f0efeb; overflow: hidden; }
.fbt__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.fbt__t { display: grid; gap: 2px; }
.fbt__t a { font-weight: 500; }
.fbt__t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fbt__buy { display: grid; gap: 8px; align-content: center; justify-items: start; padding: 20px; border-radius: var(--r-l); background: var(--ink); color: var(--bg); }
.fbt__buy b { font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.fbt__buy .small { color: #b9b9b2; }
.fbt__buy .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
@media (max-width: 1000px) { .fbt__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fbt__buy { grid-column: 1 / -1; } }

/* Reviews */
.rv-sec { padding: clamp(40px, 6vw, 80px) 0 0; }
.stars { display: inline-flex; gap: 2px; }
.stars i { width: var(--s); height: var(--s); background: #d7d6cf; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.stars i.on { background: #f2a516; }
.rvs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.rvs__sum { display: grid; gap: 16px; padding: 22px; border-radius: var(--r-l); background: var(--paper); position: sticky; top: calc(var(--header-h) + 16px); }
.rvs__avg { display: grid; gap: 6px; justify-items: start; }
.rvs__avg b { font-size: 56px; font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.rvs__bars { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.rvs__bars div { display: grid; grid-template-columns: 14px 1fr 22px; gap: 8px; align-items: center; }
.rvs__bars i { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rvs__bars i b { display: block; height: 100%; background: #f2a516; }
.rvs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rvs__list--rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rvw { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--r-l); background: var(--paper); }
.rvw header { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.rvw header > span:nth-child(2) { display: grid; }
.rvw__ava { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 500; }
.rvw p { font-size: 15px; line-height: 1.55; }
.rvw__col { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.rvw__col i { width: 14px; height: 14px; border-radius: 50%; }
.rvw__ph { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-m); }
.rvw__reply { padding: 12px 14px; border-radius: var(--r-m); background: var(--bg); }
.rvw__reply p { font-size: 14px; margin-top: 4px; }
.rvf__stars { display: flex; gap: 6px; }
.rvf__stars button { width: 34px; height: 34px; background: #d7d6cf; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rvf__stars button.on { background: #f2a516; }
@media (max-width: 1000px) { .rvs { grid-template-columns: 1fr; } .rvs__sum { position: static; } .rvs__list, .rvs__list--rail { grid-template-columns: 1fr; } }

/* ---------- ТЗ2: адрес по полям, реквизиты для перевода ---------- */
.co__addr { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 12px; margin-top: 12px; }
.co__addr-street { grid-column: span 2; }
.co__addr input[readonly] { background: var(--bg); color: var(--ink-2); }
.co__bank { flex-basis: 100%; margin-top: 10px; padding: 16px 18px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: #fff; }
.co__bank-h { font-weight: 500; margin-bottom: 10px; }
.co__bank dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: 14px; }
.co__bank dt { color: var(--ink-2); }
.co__bank dd { margin: 0; }
@media (max-width: 560px) { .co__addr { grid-template-columns: 1fr 1fr; } .co__addr-street { grid-column: 1 / -1; } .co__bank dl { grid-template-columns: 1fr; gap: 0; } .co__bank dt { margin-top: 6px; font-size: 12px; } }

/* ---------- Личный кабинет ---------- */
.tool--me { background: var(--ink); color: #fff; }
.tool__ava { font-weight: 500; font-size: 15px; line-height: 1; }
.wish { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--ink); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.wish .icon { width: 20px; height: 20px; }
.wish:hover { border-color: var(--ink); }
.wish.is-on { background: var(--signal); border-color: var(--signal); color: #fff; }
.wish.is-on .icon path { fill: currentColor; }
.pdp__buy:has(.wish) { grid-template-columns: auto 1fr auto; }
.toast a { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding-left: 14px; border-left: 1px solid #3a3a36; margin-left: 6px; }

.accp-guest { max-width: 720px; padding: clamp(24px, 5vw, 64px) 0; }
.accp-guest__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.accp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(16px, 3vw, 40px) 0 clamp(20px, 3vw, 36px); }
.accp { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.accp-nav { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 2px; }
.accp-nav a { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-radius: var(--r-pill); color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
.accp-nav a:hover { background: var(--tile); color: var(--ink); }
.accp-nav a.is-on { background: var(--ink); color: #fff; }
.accp-nav a span { font-family: var(--mono); font-size: 12px; opacity: .6; }
.accp-view { display: grid; gap: 16px; min-width: 0; }
.accp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.accp-card { background: var(--paper); border-radius: var(--r-l); padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 4px; align-content: start; }
.accp-card .h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.accp-card--ink { background: var(--ink); color: #fff; }
.accp-card--ink .label { color: #9a9a92; }
.accp-big { font-size: clamp(64px, 7vw, 112px); line-height: .95; letter-spacing: -.05em; font-weight: 500; margin: 10px 0 12px; }
.accp-bar { height: 6px; border-radius: var(--r-pill); background: #2c2c29; margin: 18px 0 8px; overflow: hidden; }
.accp-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.accp-muted { color: var(--mute); margin-top: 10px; }
.accp-card--ink .accp-muted { color: #8d8d86; }
.accp-note { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-s); background: #eef3ff; color: #234; }
.accp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.accp-tiles a { background: var(--paper); border-radius: var(--r-l); padding: 20px 24px; display: grid; gap: 4px; transition: transform var(--t) var(--ease); }
.accp-tiles a:hover { transform: translateY(-3px); }
.accp-tiles b { font-size: 40px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.accp-tiles .small { color: var(--mute); }
.accp-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 18px 0 10px; }
.accp-steps span { font-size: 11.5px; color: var(--mute); display: grid; gap: 6px; }
.accp-steps i { height: 4px; border-radius: var(--r-pill); background: var(--tile); }
.accp-steps .is-done { color: var(--ink); }
.accp-steps .is-done i { background: var(--ok); }
.ost { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 400; letter-spacing: 0; white-space: nowrap; background: #efefeb; color: #55554f; vertical-align: middle; }
.ost::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ost--new { background: #fff1d6; color: #9a5b00; } .ost--confirmed { background: #e6efff; color: #1f4fbf; } .ost--erip { background: #f1e8ff; color: #6a2fc0; }
.ost--paid { background: #e3f3e8; color: #23704a; } .ost--packed { background: #e9f6f6; color: #136b6b; } .ost--sent { background: #e9eef7; color: #374f80; } .ost--cancel { background: #fdecea; color: #b3261e; }
.accp-order { background: var(--paper); border-radius: var(--r-l); overflow: hidden; }
.accp-order summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(130px, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 18px 24px; }
.accp-order summary::-webkit-details-marker { display: none; }
.accp-order summary > span:first-child { display: grid; gap: 2px; }
.accp-order summary .small { color: var(--mute); }
.accp-thumbs { display: flex; }
.accp-thumbs img, .accp-thumbs i { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); margin-left: -8px; background: var(--tile); }
.accp-thumbs i { display: grid; place-items: center; font-style: normal; font-size: 11px; }
.accp-order[open] summary { border-bottom: 1px solid var(--line); }
.accp-order__body { padding: 20px 24px 24px; display: grid; gap: 18px; }
.accp-lines > div { display: grid; grid-template-columns: 44px 1fr auto 90px; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.accp-lines img { width: 44px; height: 44px; border-radius: var(--r-s); object-fit: cover; background: var(--tile); }
.accp-lines span { display: grid; gap: 2px; }
.accp-lines .small { color: var(--mute); }
.accp-lines b { text-align: right; font-weight: 500; }
.accp-dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; }
.accp-dl dt { color: var(--mute); }
.accp-dl dd { margin: 0; }
.accp-log { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--tile); display: grid; gap: 6px; }
.accp-log li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.accp-log .small { color: var(--mute); }
.accp-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 8px; }
.accp-addr { grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.accp-addr .label { display: inline-block; margin-top: 8px; }
.accp-add { display: block; padding: 22px; border-radius: var(--r-l); border: 1.5px dashed var(--line-2); text-align: center; color: var(--ink-2); transition: border-color var(--t-fast), color var(--t-fast); }
.accp-add:hover { border-color: var(--ink); color: var(--ink); }
.accp-form { gap: 14px; }
.accp-form .co__addr { margin-top: 0; }
.accp-empty { background: var(--paper); border-radius: var(--r-l); padding: clamp(28px, 4vw, 56px); display: grid; gap: 10px; justify-items: start; }
.accp-wish { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.accp-wish__i { display: grid; gap: 10px; justify-items: start; }
.accp-subs > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.accp-subs span { display: grid; gap: 2px; }
.accp-subs .small { color: var(--mute); }
@media (max-width: 1000px) {
  .accp { grid-template-columns: 1fr; }
  .accp-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .accp-nav a { flex: none; white-space: nowrap; }
  .accp-wish { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .accp-grid, .accp-tiles { grid-template-columns: 1fr; }
  .accp-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .accp-tiles a { padding: 14px; } .accp-tiles b { font-size: 28px; } .accp-tiles .small { display: none; }
  .accp-order summary { grid-template-columns: 1fr auto; gap: 10px; padding: 16px 18px; }
  .accp-thumbs { display: none; }
  .accp-order__body { padding: 16px 18px 20px; }
  .accp-lines > div { grid-template-columns: 40px 1fr auto; }
  .accp-lines > div > .num:not(b) { display: none; }
  .accp-dl { grid-template-columns: 1fr; gap: 0; } .accp-dl dt { margin-top: 8px; font-size: 13px; }
  .accp-log li { grid-template-columns: 1fr; gap: 0; }
  .accp-addr { grid-template-columns: 1fr; }
  .accp-head .h1 { font-size: 36px; }
  .accp-steps span { font-size: 0; }
}
.accp-card--ink .small { color: #c9c9c2; }
.accp-card--ink .small b { color: #fff; }
.accp-nav a span { margin-left: 8px; }
.is-live .proto-note { display: none !important; }