/*
Theme Name: VEXRO
Theme URI: https://example.com
Author: Ваш бренд
Description: Тема каталога чёрной одежды (рашгарды, свитшоты, штаны, женское). Собрана на чистом PHP/CSS/JS без зависимостей от конструкторов.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: uyut
*/

/* ==========================================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   База — светлый фон и жирная чёрная типографика (как у референса),
   один акцент — цвет нитки/строчки, а не «магазинный» оранжевый.
   ========================================================================== */

:root{
  --ink:        #131211;
  --ink-soft:   #55504A;
  --paper:      #F6F5F2;
  --paper-deep: #ECEAE4;
  --fabric:     #E3E0DA;
  --line:       #D9D5CD;

  --accent:      #C6362B;
  --accent-deep: #9C2B22;

  --font-display: 'Unbounded', sans-serif;
  --font-body:    'Manrope', sans-serif;

  --container: 1240px;
  --gap: clamp(16px, 2.4vw, 32px);
  --radius: 3px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

html{ overflow-x: hidden; }
body{
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 82px;
}
@media (max-width: 560px){
  body{ padding-top: 64px; }
}
body.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }

:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }

.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.section{ padding-block: clamp(48px, 8vw, 96px); }
.section--tight{ padding-block: clamp(32px, 5vw, 56px); }

.eyebrow{
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 14px;
}

.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; background: var(--ink); color: var(--paper);
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border: none; border-radius: var(--radius); cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background: var(--accent-deep); transform: translateY(-1px); }
.btn--outline{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--outline:hover{ background: var(--ink); color: var(--paper); }
.btn--accent{ background: var(--accent); color: var(--paper); }
.btn--accent:hover{ background: var(--accent-deep); }

.site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__row{ display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.site-logo{ font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; }
.site-logo img{ max-height: 40px; width: auto; }

.primary-menu{ display: flex; align-items: center; gap: clamp(16px,3vw,36px); }
.primary-menu a{ font-size: 15px; font-weight: 600; position: relative; padding-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
.primary-menu a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--accent); transition: width .25s var(--ease); }
.primary-menu a:hover::after{ width: 100%; }

.header-cta{ display: flex; align-items: center; gap: 14px; }
.header-phone{ font-weight: 700; font-size: 15px; white-space: nowrap; }

.nav-toggle{ display: none; background: none; border: none; cursor: pointer; width: 40px; height: 32px; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span{ top: 15px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }
.nav-toggle.is-open span{ background: transparent; }
.nav-toggle.is-open span::before{ transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span::after{ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display: block; }
  .primary-menu{
    position: fixed; inset: 0 0 0 auto; top: 65px;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); width: min(320px, 82vw); height: calc(100vh - 65px);
    padding: 28px 24px; transform: translateX(100%); transition: transform .3s var(--ease);
    border-left: 1px solid var(--line);
  }
  .primary-menu.is-open{ transform: translateX(0); }
  .primary-menu li{ width: 100%; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .header-phone{ display: none; }
}

.hero{ padding-block: clamp(36px, 6vw, 84px); background: var(--paper); }
.hero__inner{
  position: relative; display: grid;
  grid-template-columns: minmax(280px, 500px) 1fr;
  align-items: center; min-height: 56vh;
}
.hero__media{ grid-column: 2 / 3; grid-row: 1; position: relative; z-index: 1; aspect-ratio: 4 / 5; background: var(--fabric); overflow: hidden; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.hero__media .media-placeholder{ height: 100%; }
.hero__text{
  grid-column: 1 / 2; grid-row: 1; position: relative; z-index: 2; align-self: center;
  background: var(--paper-deep); padding: clamp(28px, 4vw, 52px);
  margin-right: clamp(-64px, -6vw, -36px);
}
.hero__title{ font-size: clamp(28px, 3.6vw, 48px); text-transform: uppercase; }
.hero__title .accent{ color: var(--accent); }
.hero__subtitle{ margin-top: 18px; max-width: 42ch; font-size: 17px; color: var(--ink-soft); }
.hero__actions{ margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; min-height: auto; }
  .hero__media{ grid-column: 1; grid-row: 1; aspect-ratio: 4/3; }
  .hero__text{ grid-column: 1; grid-row: 2; margin-right: 0; padding: 26px 22px; }
}

.media-placeholder{
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  width: 100%; height: 100%; min-height: 220px;
  background: repeating-linear-gradient(135deg, var(--fabric) 0 2px, var(--paper-deep) 2px 14px);
  color: var(--ink-soft); font-size: 13px; text-align: center; padding: 16px;
  border: 1px dashed var(--line);
}
.media-placeholder::before{ content: "＋"; font-family: var(--font-display); font-size: 26px; color: var(--accent-deep); }

.stitch-divider{ height: 24px; position: relative; }
.stitch-divider::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--ink); opacity: .18; }

.rooms{ display: grid; gap: 2px; grid-template-columns: repeat(4, 1fr); background: var(--ink); }
.room-tile{ position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--fabric); display: block; }
.room-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.room-tile:hover img{ transform: scale(1.06); }
.room-tile__label{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px;
  background: linear-gradient(to top, rgba(19,18,17,.85), transparent 70%); color: var(--paper);
}
.room-tile__label .name{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(15px,1.8vw,20px);
  text-transform: uppercase; display: inline-block; position: relative; padding-bottom: 4px; line-height: 1.2;
}
.room-tile__label .name::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--accent); transition: width .3s var(--ease); }
.room-tile:hover .room-tile__label .name::after{ width: 100%; }
.room-tile__label .count{ font-size: 12.5px; opacity: .85; margin-top: 4px; }

@media (max-width: 1000px){ .rooms{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .rooms{ grid-template-columns: 1fr; } .room-tile{ aspect-ratio: 16/10; } }

.feature{ background: var(--paper-deep); }
.feature__bigtext{
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  color: var(--accent); font-size: clamp(34px, 6vw, 84px); line-height: .96;
  margin-bottom: clamp(24px,4vw,48px);
  overflow-wrap: break-word; word-break: break-word;
}
.feature-diagram{ display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 40px); }
.feature-diagram__stage{ position: relative; max-width: 520px; margin-inline: auto; width: 100%; aspect-ratio: 3/4; background: var(--fabric); overflow: hidden; }
.feature-diagram__stage img{ width: 100%; height: 100%; object-fit: cover; }
.feature-diagram__callout{ position: absolute; max-width: 190px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); pointer-events: none; }
.feature-diagram__callout .leader{ position: absolute; border-color: var(--ink); opacity: .5; }
.feature-diagram__callout--tl{ top: 4%; left: -46%; text-align: right; }
.feature-diagram__callout--tl .leader{ top: 10px; left: 100%; width: 34px; border-top: 1px solid; }
.feature-diagram__callout--tr{ top: 34%; right: -46%; text-align: left; }
.feature-diagram__callout--tr .leader{ top: 10px; right: 100%; width: 34px; border-top: 1px solid; }
.feature-diagram__callout--bl{ bottom: 6%; left: -46%; text-align: right; }
.feature-diagram__callout--bl .leader{ top: 10px; left: 100%; width: 34px; border-top: 1px solid; }

@media (max-width: 760px){
  .feature-diagram__stage{ max-width: 340px; }
  .feature-diagram__callout{ position: static; max-width: none; text-align: left !important; margin-bottom: 10px; }
  .feature-diagram__callout .leader{ display: none; }
}

.feature-diagram__zooms{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.feature-diagram__zoom{ width: 96px; text-align: center; }
.feature-diagram__zoom .thumb{ aspect-ratio: 1/1; background: var(--fabric); overflow: hidden; margin-bottom: 6px; }
.feature-diagram__zoom .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.feature-diagram__zoom span{ font-size: 12px; color: var(--ink-soft); }

.about-signature{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px,5vw,64px); align-items: center; }
.about-signature__figure{ background: var(--fabric); aspect-ratio: 1/1; overflow: hidden; }
.about-signature__figure img{ width: 100%; height: 100%; object-fit: cover; }
.about-signature h2{ font-size: clamp(28px,3.6vw,42px); text-transform: uppercase; }
.about-signature h2 .accent{ color: var(--accent); }
.about-signature p{ max-width: 56ch; color: var(--ink-soft); font-size: 17px; }

@media (max-width: 860px){ .about-signature{ grid-template-columns: 1fr; } }

.advantages{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.advantage{ background: var(--paper); padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; gap: 10px; }
.advantage__icon{ width: 34px; height: 34px; color: var(--accent-deep); }
.advantage__title{ font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.advantage__text{ font-size: 14.5px; color: var(--ink-soft); margin: 0; }

@media (max-width: 860px){ .advantages{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .advantages{ grid-template-columns: 1fr; } }

.section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px,3vw,36px); flex-wrap: wrap; }
.section-head h2{ font-size: clamp(26px,3.4vw,40px); text-transform: uppercase; }

.product-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px){ .product-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .product-grid{ grid-template-columns: 1fr; } }

.product-card{ display: block; background: var(--paper); }
.product-card__media{ position: relative; aspect-ratio: 4/5; background: var(--fabric); overflow: hidden; margin-bottom: 14px; }
.product-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-card__media img{ transform: scale(1.045); }
.product-card__tag{
  position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--paper);
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: .04em;
}
.product-card__title{ font-family: var(--font-body); font-weight: 700; font-size: 16px; }
.product-card__meta{ display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.product-card__price{ font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent-deep); }
.product-card__sizes{ font-size: 13px; color: var(--ink-soft); }

.empty-state{ text-align: center; padding: clamp(40px,8vw,90px) 20px; border: 1px dashed var(--line); }
.empty-state h3{ font-size: 22px; text-transform: uppercase; margin-bottom: 10px; }
.empty-state p{ color: var(--ink-soft); max-width: 44ch; margin-inline: auto; }

.product-single{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px,5vw,64px); }
.gallery__main{ aspect-ratio: 4/5; background: var(--fabric); overflow: hidden; margin-bottom: 12px; }
.gallery__main img{ width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs{ display: none; }

.gallery__main{ position: relative; }
.gallery__arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(19,18,17,.55); color: var(--paper); border: none; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s var(--ease);
}
.gallery__arrow:hover{ background: rgba(19,18,17,.8); }
.gallery__arrow--prev{ left: 14px; }
.gallery__arrow--next{ right: 14px; }
.gallery__main-counter{
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  background: rgba(19,18,17,.65); color: var(--paper); font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
}
.gallery__thumbs button{ width: 76px; height: 76px; padding: 0; border: 2px solid transparent; background: var(--fabric); cursor: pointer; overflow: hidden; }
.gallery__thumbs button.is-active{ border-color: var(--accent); }
.gallery__thumbs img{ width: 100%; height: 100%; object-fit: cover; }

.product-info__room{ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.product-info h1{ font-size: clamp(28px,4vw,44px); margin-top: 8px; text-transform: uppercase; }
.product-info__price{ font-family: var(--font-display); font-size: 28px; color: var(--accent-deep); margin-top: 14px; }
.product-info__specs{ margin-top: 22px; border-top: 1px solid var(--line); }
.product-info__specs dl{ display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.product-info__specs dt{ color: var(--ink-soft); font-size: 14px; }
.product-info__specs dd{ margin: 0; font-weight: 600; }
.product-info__desc{ margin-top: 22px; color: var(--ink-soft); }
.product-info__actions{ margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.product-info__care-link{ margin-top: 18px; font-size: 14px; text-decoration: underline; color: var(--ink-soft); display: inline-block; }

@media (max-width: 860px){ .product-single{ grid-template-columns: 1fr; } }

.prose{ max-width: 68ch; font-size: 17px; }
.prose h2{ font-size: clamp(22px,3vw,30px); margin-top: 2em; margin-bottom: .6em; text-transform: uppercase; }
.prose h3{ font-size: 19px; margin-top: 1.6em; margin-bottom: .5em; }
.prose p{ color: var(--ink-soft); }
.prose blockquote{ margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink); }
.prose ul{ list-style: disc; padding-left: 1.2em; color: var(--ink-soft); }
.prose ul li{ margin-bottom: .4em; }

.faq details{ border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary{ cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; font-size: 22px; color: var(--accent-deep); }
.faq details[open] summary::after{ content: "–"; }
.faq details p{ margin-top: 12px; color: var(--ink-soft); }

.site-footer{ background: var(--ink); color: var(--paper); padding-block: clamp(40px,6vw,72px); margin-top: 40px; }
.footer-grid{ display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 28px; }
.footer-grid h4{ font-family: var(--font-body); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; color: var(--accent); }
.footer-grid li{ margin-bottom: 8px; font-size: 14.5px; color: #D8D3CC; }
.footer-bottom{ margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; color: #B9B3AB; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; } }

.uyut-media-field{ margin-bottom: 16px; }
.uyut-media-field label{ display: block; font-weight: 600; margin-bottom: 6px; }
.uyut-gallery-preview{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.uyut-gallery-preview img{ width: 70px; height: 70px; object-fit: cover; border: 1px solid #ccd0d4; }
.uyut-term-image-preview img, .uyut-term-bg-preview img{ max-width: 160px; display: block; margin-bottom: 8px; }
/* ==========================================================================
   КОРЗИНА И ОФОРМЛЕНИЕ ЗАКАЗА
   ========================================================================== */

body.no-scroll{ overflow: hidden; }

.cart-toggle{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: var(--ink); }
.cart-toggle__icon{ width: 22px; height: 22px; }
.cart-toggle__count{
  position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--paper); font-size: 11px; font-weight: 700;
  border-radius: 999px; line-height: 1;
}

.cart-drawer, .checkout-modal{ position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.cart-drawer.is-open, .checkout-modal.is-open{ visibility: visible; pointer-events: auto; }

.cart-drawer__overlay, .checkout-modal__overlay{
  position: absolute; inset: 0; background: rgba(19,18,17,.5);
  opacity: 0; transition: opacity .25s var(--ease);
}
.cart-drawer.is-open .cart-drawer__overlay, .checkout-modal.is-open .checkout-modal__overlay{ opacity: 1; }

.cart-drawer__panel{
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s var(--ease);
  box-shadow: -12px 0 32px rgba(19,18,17,.12);
}
.cart-drawer.is-open .cart-drawer__panel{ transform: translateX(0); }

.cart-drawer__head{ display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.cart-drawer__head h3{ font-size: 19px; text-transform: uppercase; }
.cart-drawer__close, .checkout-modal__close{ background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink); }

.cart-drawer__items{ flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-drawer__empty{ padding: 40px 24px; text-align: center; color: var(--ink-soft); }
.cart-drawer__footer{ padding: 20px 24px; border-top: 1px solid var(--line); }
.cart-drawer__total{ font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 14px; display: flex; justify-content: space-between; }
.cart-drawer__checkout{ width: 100%; justify-content: center; }

.cart-item{ display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item__media{ width: 64px; height: 80px; background: var(--fabric); overflow: hidden; }
.cart-item__media img{ width: 100%; height: 100%; object-fit: cover; }
.cart-item__title{ font-weight: 700; font-size: 14.5px; }
.cart-item__meta{ font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.cart-item__qty{ display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cart-item__qty button{ width: 24px; height: 24px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 700; border-radius: var(--radius); }
.cart-item__remove{ background: none; border: none; color: var(--ink-soft); font-size: 13px; text-decoration: underline; cursor: pointer; justify-self: end; align-self: start; }

.checkout-modal__panel{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-46%);
  width: min(480px, 92vw); max-height: 88vh; overflow-y: auto;
  background: var(--paper); padding: clamp(24px,4vw,36px);
  opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.checkout-modal.is-open .checkout-modal__panel{ opacity: 1; transform: translate(-50%,-50%); }
.checkout-modal__close{ position: absolute; top: 14px; right: 18px; }
.checkout-modal h3{ font-size: 22px; text-transform: uppercase; margin-bottom: 16px; padding-right: 24px; }
.checkout-modal__summary{ font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.checkout-form{ display: flex; flex-direction: column; gap: 14px; }
.checkout-form label{ display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.checkout-form input, .checkout-form textarea{
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px;
}
.checkout-form input:focus, .checkout-form textarea:focus{ outline: none; border-color: var(--accent); }
.checkout-form__payment{ display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.checkout-form__label{ margin-bottom: 2px; }
.checkout-form__radio{ display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.checkout-form__submit{ justify-content: center; margin-top: 6px; }
.checkout-form__status{ font-size: 13.5px; margin: 8px 0 0; min-height: 18px; }
.checkout-form__status.is-error{ color: var(--accent-deep); }
.checkout-form__status.is-success{ color: #2E7D32; }

.add-to-cart{ display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.add-to-cart__size, .add-to-cart__qty{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-soft); max-width: 260px; }
.add-to-cart__size select{
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; min-width: 110px;
}

@media (max-width: 480px){
  .header-phone{ display: none; }
}
/* Корзина — не перекрывается панелью администратора WP при тестировании под логином */
body.admin-bar .cart-drawer__panel{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .cart-drawer__panel{ top: 46px; }
}

/* Корзина и попап оформления — мобильная адаптация */
@media (max-width: 640px){
  .cart-drawer__panel{ width: 100%; }
  .cart-drawer__head{ padding: 16px 18px; }
  .cart-drawer__items{ padding: 4px 18px; }
  .cart-drawer__footer{ padding: 16px 18px; }
  .checkout-modal__panel{
    top: 0; left: 0; right: 0; bottom: 0; transform: none;
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    padding: 20px 18px 28px;
  }
  .checkout-modal.is-open .checkout-modal__panel{ transform: none; }
}
.product-card__link{ display: block; color: inherit; }
.product-card__quickadd{
  display: block; width: 100%; margin-top: 10px; padding: 10px 14px;
  background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
  text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease);
}
.product-card__quickadd:hover{ background: var(--accent-deep); }
.checkout-form__consent{ display: flex; flex-direction: row; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.checkout-form__consent input{ margin-top: 3px; flex-shrink: 0; }
.checkout-form__consent a{ text-decoration: underline; color: var(--ink); }
/* --- Шапка на маленьких экранах --- */
@media (max-width: 560px){
  .site-header__row{ padding-block: 12px; gap: 8px; }
  .site-logo img{ max-height: 30px; }
  .header-cta{ gap: 6px; }
  .header-cta .btn{ padding: 9px 12px; font-size: 12.5px; }
  .cart-toggle{ width: 32px; height: 32px; }
  .cart-toggle__icon{ width: 19px; height: 19px; }
  .nav-toggle{ width: 30px; height: 26px; }
}
@media (max-width: 360px){
  .header-cta .btn{ padding: 8px 10px; font-size: 12px; }
}

/* --- Форма «В корзину» на очень узких экранах --- */
@media (max-width: 380px){
  .add-to-cart__size, .add-to-cart__qty{ flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; }
  .add-to-cart__size select{ width: 100%; }
}

/* --- Выбор мессенджера (Telegram / MAX) --- */
.contact-choice{ position: relative; display: inline-block; }
.contact-choice__menu{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 180px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(19,18,17,.14); padding: 6px; display: none;
}
.contact-choice.is-open .contact-choice__menu{ display: block; }
.contact-choice__link{ display: block; padding: 10px 12px; font-size: 14px; font-weight: 600; border-radius: var(--radius); }
.contact-choice__link:hover{ background: var(--paper-deep); }

/* --- Уход за вещами: фото и режимы ухода --- */
.care-hero{ aspect-ratio: 21/8; background: var(--fabric); overflow: hidden; margin: 28px 0 40px; }
.care-hero img{ width: 100%; height: 100%; object-fit: cover; }

.care-modes{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); margin: 8px 0 44px; }
.care-mode{ background: var(--paper); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.care-mode__icon{ width: 30px; height: 30px; color: var(--accent-deep); }
.care-mode__title{ font-family: var(--font-display); font-weight: 700; font-size: 14.5px; text-transform: uppercase; }
.care-mode__text{ font-size: 13px; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px){ .care-modes{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .care-modes{ grid-template-columns: 1fr; } }
.product-info__desc-title{ font-size: 16px; text-transform: uppercase; margin-bottom: 10px; }

.gallery__main video{ width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button{ position: relative; }
.gallery__thumbs video{ width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gallery__thumb-play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: rgba(19,18,17,.6); color: var(--paper); border-radius: 50%; font-size: 10px; pointer-events: none;
}
.uyut-gallery-preview video{ width: 70px; height: 70px; object-fit: cover; border: 1px solid #ccd0d4; }
.cart-item__link{ display: block; color: inherit; }
.qty-stepper{ display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qty-stepper__btn{ width: 36px; height: 40px; border: none; background: var(--paper); color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer; transition: background .15s var(--ease); }
.qty-stepper__btn:hover{ background: var(--paper-deep); }
.qty-stepper__input{ width: 46px; height: 40px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--paper); -moz-appearance: textfield; }
.qty-stepper__input::-webkit-outer-spin-button, .qty-stepper__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink); color: var(--paper); padding: 10px 20px;
  box-shadow: 0 -6px 18px rgba(19,18,17,.18);
}
.cookie-banner__text{ font-size: 12px; line-height: 1.4; color: #D8D3CC; max-width: 560px; }
.cookie-banner__text a{ color: var(--paper); text-decoration: underline; }
.cookie-banner__accept{ flex-shrink: 0; padding: 7px 14px; font-size: 12px; }
@media (max-width: 560px){
  .cookie-banner{ padding: 8px 14px; gap: 8px; }
  .cookie-banner__text{ font-size: 11px; text-align: left; }
  .cookie-banner__accept{ padding: 7px 12px; font-size: 11px; }
}
.cookie-banner[hidden]{ display: none; }
.payment-toast{
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 400;
  padding: 14px 22px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--paper); box-shadow: 0 12px 28px rgba(19,18,17,.18); max-width: 90vw; text-align: center;
}
.payment-toast.is-success{ background: #2E7D32; }
.payment-toast.is-fail{ background: var(--accent-deep); }
.order-success{ max-width: 640px; margin-inline: auto; text-align: center; padding-block: clamp(20px, 4vw, 40px); }
.order-success__icon{ width: 64px; height: 64px; margin: 0 auto 20px; color: #2E7D32; }
.order-success__icon svg{ width: 100%; height: 100%; }
.order-success.is-fail .order-success__icon{ color: var(--accent-deep); }
.order-success__title{ font-size: clamp(24px,3.4vw,34px); text-transform: uppercase; }
.order-success__text{ margin-top: 14px; color: var(--ink-soft); font-size: 15.5px; max-width: 48ch; margin-inline: auto; }
.order-success__items{ margin-top: 32px; text-align: left; border-top: 1px solid var(--line); }
.order-success__item{ display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.order-success__item-media{ width: 56px; height: 70px; background: var(--fabric); overflow: hidden; flex-shrink: 0; }
.order-success__item-media img{ width: 100%; height: 100%; object-fit: cover; }
.order-success__item-title{ font-weight: 700; font-size: 14.5px; }
.order-success__item-meta{ font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.order-success__home{ margin-top: 32px; }
.gallery__swipe-wrap{ position: relative; display: none; }
.gallery__swipe{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery__swipe::-webkit-scrollbar{ display: none; }
.gallery__swipe-item{ flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4/5; background: var(--fabric); }
.gallery__swipe-item img, .gallery__swipe-item video{ width: 100%; height: 100%; object-fit: cover; }
.gallery__swipe-counter{
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  background: rgba(19,18,17,.65); color: var(--paper); font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
}
@media (max-width: 760px){
  .gallery__main, .gallery__thumbs{ display: none; }
  .gallery__swipe-wrap{ display: block; }
}
.size-chart{ border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 22px; }
.size-chart summary{ cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.size-chart summary::-webkit-details-marker{ display: none; }
.size-chart summary::after{ content: "+"; font-size: 20px; color: var(--accent-deep); }
.size-chart[open] summary::after{ content: "–"; }
.size-chart__scroll{ overflow-x: auto; margin-top: 14px; }
.size-chart__table{ border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
.size-chart__table th, .size-chart__table td{ border: 1px solid var(--line); padding: 6px 8px; text-align: center; white-space: nowrap; }
.size-chart__table th{ background: var(--paper-deep); font-weight: 700; }
.size-chart__note{ margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.product-single, .product-single > *{ min-width: 0; }
.breadcrumbs-bar{ border-bottom: 1px solid var(--line); }
.breadcrumbs-bar .container{ padding-block: 12px; }
.breadcrumbs-bar, .breadcrumbs-bar a{ font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.breadcrumbs-bar a:hover{ color: var(--accent-deep); text-decoration: underline; }
.breadcrumbs-bar .breadcrumb_last{ color: var(--ink); font-weight: 600; }
.delivery-info{ border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.delivery-info summary{ cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); list-style: none; }
.delivery-info summary::-webkit-details-marker{ display: none; }
.delivery-info summary:hover{ color: var(--accent-deep); }
.delivery-info p{ margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.gallery__swipe-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(19,18,17,.55); color: var(--paper); border: none; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.gallery__swipe-arrow--prev{ left: 10px; }
.gallery__swipe-arrow--next{ right: 10px; }
.gallery__main-media{ width: 100%; height: 100%; }
/* --- Hero-слайдер на главной --- */
.hero--slider{ overflow: hidden; position: relative; padding-block: 0; }
.hero__slides{ display: flex; transition: transform .8s var(--ease); }
.hero__slide{ width: 100%; flex: 0 0 100%; position: relative; padding-block: clamp(36px, 6vw, 84px); box-sizing: border-box; }
.hero__slide .hero__inner{ position: relative; z-index: 2; }

.hero__slide-bg{ position: absolute; inset: 0; z-index: 0; }
.hero__slide-bg img{ width: 100%; height: 100%; object-fit: cover; }
.hero__slide-bg::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,18,17,.06), rgba(19,18,17,.3)); }

.hero__promo{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(0deg, rgba(19,18,17,.8), rgba(19,18,17,0));
  color: var(--paper); font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 30px); text-align: center; padding: 44px 20px 18px;
}

/* Два перекрывающихся фото на слайдах 2-4: та же пропорция 4/5, что и у слайда 1
   и у категорий (через тот же .hero__media) — высота всегда совпадает автоматически */
.hero__media--split{ position: relative; width: 100%; aspect-ratio: 4/5; background: transparent; }
.hero__media-main{
  position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 60%; height: 82%; overflow: hidden; box-shadow: 0 16px 36px rgba(19,18,17,.18);
}
.hero__media-main img{ width: 100%; height: 100%; object-fit: cover; }
.hero__media-corner{
  position: absolute; right: 0; top: 0; z-index: 2;
  width: 60%; height: 82%; overflow: hidden;
  border: 4px solid var(--paper); box-shadow: 0 16px 36px rgba(19,18,17,.22);
}
.hero__media-corner img{ width: 100%; height: 100%; object-fit: cover; }

/* ПК: у всех 4 слайдов одна и та же явная высота (как у категорий) — картинки
   заполняют её через object-fit, без обрезки и без «раздувания» от скрытых слайдов */
@media (min-width: 901px){
  .hero__slides{ position: relative; transform: none !important; }
  .hero__slide{ position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .9s ease; pointer-events: none; }
  .hero__slide.is-active{ opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Мобильные и планшеты: слайд 1 — без изменений, своя явная высота.
   Слайды 2-4 — отдельная мобильная вёрстка (hero__slide-mobile), высота
   слайдера на каждом шаге свайпа подстраивается под неё через JS */
@media (max-width: 900px){
  .hero__slide--1{ height: 66vh; min-height: 66vh; }
  .hero__slide:not(.hero__slide--1) .hero__inner{ display: none; }
  .hero--slider{ transition: height .4s var(--ease); }
}

/* --- Мобильная карточка слайдов 2-4: скруглённое фото + отдельная карточка текста снизу --- */
.hero__slide-mobile{ display: none; }
@media (max-width: 900px){
  .hero__slide:not(.hero__slide--1) .hero__slide-mobile{ display: block; padding: 16px 16px 28px; }
}

.hero__slide-mobile-photo{ position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/5; background: var(--fabric); }
.hero__slide-mobile-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__slide-mobile-photo::before{
  content: ""; position: absolute; top: 15%; right: 24%; width: 34%; height: 1px;
  background: rgba(255,255,255,.55); transform: rotate(-32deg); transform-origin: right center; z-index: 2;
}

.hero__slide-mobile-brand{
  position: absolute; top: 18px; right: 16px; z-index: 2;
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.hero__slide-mobile-brand span{ font-weight: 800; }

.hero__slide-mobile-promo{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(19,18,17,.78), rgba(19,18,17,0));
  color: var(--paper); font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(16px, 4.6vw, 20px); padding: 40px 18px 16px;
}

.hero__slide-mobile-card{ background: var(--paper-deep); padding: 24px 20px; margin-top: 14px; }
.hero__slide-mobile-card .eyebrow{ margin-bottom: 8px; }
.hero__slide-mobile-card .hero__title{ font-size: clamp(26px, 7.5vw, 34px); margin-bottom: 10px; }
.hero__slide-mobile-card .hero__subtitle{ margin-bottom: 18px; }
.hero__slide-mobile-card .hero__actions{ margin-top: 0; }

/* Слайд 1 на мобильном — полноэкранный фон, без прямоугольников */
.hero__slide1-mobile{ display: none; }
@media (max-width: 900px){
  .hero__slide--1 .hero__inner{ display: none; }
  .hero__slide--1 .hero__slide1-mobile{
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    position: relative; z-index: 2; height: 100%; text-align: center;
    padding: 24px 20px 40px; gap: 16px;
  }
}
.hero__slide1-mobile-promo{
  background: rgba(19,18,17,.55); color: var(--paper);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 6vw, 28px); line-height: 1.15; padding: 14px 22px; border-radius: var(--radius);
  max-width: 90%;
}
@media (max-width: 900px){
  .hero__slide1-mobile .hero__actions{ margin-top: 0; }
}

/* --- Фон на страницах категорий --- */
.hero--category{ position: relative; overflow: hidden; }
.hero--category .hero__inner{ position: relative; z-index: 2; }

.hero__mobile-title{ display: none; }
@media (max-width: 640px){
  .hero--category{ min-height: 50vh !important; display: flex; align-items: center; }
  .hero--category .hero__inner{ display: none; }
  .hero--category .hero__mobile-title{
    display: block; position: relative; z-index: 2; text-align: center;
    padding: 60px 24px; width: 100%;
  }
  .hero--category .hero__mobile-title .eyebrow{ color: var(--paper); opacity: .85; }
  .hero__mobile-title-text{
    font-size: clamp(30px, 8vw, 44px); text-transform: uppercase; color: var(--paper);
    text-shadow: 0 2px 14px rgba(19,18,17,.45);
  }
}

/* --- Полоса «Оплата частями» — с декоративной "строчкой" --- */
.installments-strip{
  position: relative; background: var(--ink); color: var(--paper); padding: 18px 0;
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
}
.installments-strip::before, .installments-strip::after{
  content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--accent); opacity: .6;
}
.installments-strip::before{ top: 0; }
.installments-strip::after{ bottom: 0; }
.installments-strip .container{ display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.installments-strip__icon{ font-size: 18px; }
@media (max-width: 560px){ .installments-strip{ font-size: 12.5px; padding: 14px 14px; } }
/* --- Плавающая кнопка «Написать» — на всех страницах сайта, в правом нижнем углу --- */
.chat-fab{ position: fixed; right: 22px; bottom: 22px; z-index: 190; }
.chat-fab .contact-choice__toggle{
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--paper); border: none; cursor: pointer; padding: 0;
  box-shadow: 0 10px 26px rgba(19,18,17,.3); transition: background .2s var(--ease), transform .2s var(--ease);
}
.chat-fab .contact-choice__toggle::before{
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent);
  opacity: 0; animation: uyut-fab-pulse 2.6s ease-out infinite;
}
.chat-fab .contact-choice__toggle:hover{ background: var(--accent-deep); transform: translateY(-2px) scale(1.04); }
.chat-fab .contact-choice__toggle svg{ width: 25px; height: 25px; position: relative; z-index: 1; }
.chat-fab .contact-choice__menu{ top: auto; bottom: calc(100% + 12px); right: 0; left: auto; min-width: 200px; }

@keyframes uyut-fab-pulse{
  0%{ transform: scale(.9); opacity: .55; }
  70%{ transform: scale(1.35); opacity: 0; }
  100%{ opacity: 0; }
}

@media (max-width: 640px){
  .chat-fab{ right: 16px; bottom: 16px; }
  .chat-fab .contact-choice__toggle{ width: 50px; height: 50px; }
  .chat-fab .contact-choice__toggle svg{ width: 22px; height: 22px; }
}

/* Не мешает, когда открыта корзина или попап оформления заказа */
.cart-drawer.is-open ~ .chat-fab, .checkout-modal.is-open ~ .chat-fab{ opacity: 0; pointer-events: none; }
/* Кнопка чата не перекрывает баннер cookie, пока он виден */
.cookie-banner:not([hidden]) ~ .chat-fab{ bottom: 70px; }
@media (max-width: 640px){
  .cookie-banner:not([hidden]) ~ .chat-fab{ bottom: 100px; }
}
/* --- Полоса «Историй» под хиро-блоком (только мобильные) --- */
.stories-strip{ display: block; background: var(--paper); padding: 22px 0; }
.stories-strip__row{ display: flex; gap: 16px; justify-content: center; }
.story-tile{ background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; }
.story-tile__thumb{
  display: block; width: 64px; height: 64px; border-radius: 16px; overflow: hidden;
  background: var(--fabric); border: 2px solid var(--accent);
}
.story-tile__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.story-tile__label{ font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.2; }

/* --- Полноэкранный просмотр историй --- */
.story-viewer{ position: fixed; inset: 0; z-index: 500; background: #000; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.story-viewer.is-open{ visibility: visible; opacity: 1; pointer-events: auto; }
.story-viewer__bars{ position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; gap: 4px; }
.story-viewer__bar{ flex: 1; height: 2.5px; background: rgba(255,255,255,.35); border-radius: 2px; overflow: hidden; }
.story-viewer__bar-fill{ display: block; height: 100%; width: 0; background: var(--paper); }
.story-viewer__close{ position: absolute; top: 16px; right: 14px; z-index: 3; background: none; border: none; color: var(--paper); font-size: 30px; line-height: 1; cursor: pointer; }
.story-viewer__media{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.story-viewer__media img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.story-viewer__zone{ position: absolute; top: 0; bottom: 0; width: 35%; background: none; border: none; z-index: 2; cursor: pointer; padding: 0; }
.story-viewer__zone--prev{ left: 0; }
.story-viewer__zone--next{ right: 0; }