:root {
  --bg: #100f0d;
  --bg-soft: #171512;
  --panel: #1d1a16;
  --line: rgba(212, 184, 138, 0.18);
  --gold: #cba165;
  --gold-soft: #e7cda0;
  --terracotta: #c1602f;
  --text: #f3ede2;
  --text-dim: #b8ad9c;
  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Anyone who's asked the OS for less motion gets none of the decorative
   animation below — entrances just snap to their end state instantly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  letter-spacing: 0.01em;
}

h1, h2, h3, .logo, .price, .product-card .name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Announcement bar */
body {
  transition: padding-top 0.4s ease;
}

.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--terracotta);
  color: #fff;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 14px 48px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.announcement-bar.show {
  transform: translateY(0);
  opacity: 1;
}

.announcement-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  padding: 4px;
  font-family: 'Jost', sans-serif;
}

.announcement-close:hover { opacity: 1; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 15, 13, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: top 0.4s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: 1240px;
  margin: 0 auto;
}

.logo {
  font-size: 28px;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.logo span { color: var(--terracotta); }

.main-nav { display: flex; gap: 36px; }

.main-nav a {
  position: relative;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  transition: color 0.2s;
  padding-bottom: 4px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.main-nav a:hover { color: var(--gold-soft); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 18px; }

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  border-radius: var(--radius);
  font-family: 'Jost', sans-serif;
  transition: border-color 0.2s, color 0.2s;
}
.cart-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }

.cart-btn:hover { border-color: var(--gold); color: var(--gold-soft); }

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--terracotta);
  color: #fff;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  transition: transform 0.2s ease;
}

/* Global header search — icon toggle + dropdown panel that searches
   PRODUCTS across every category, not just whatever grid is on screen.
   Lives in .header-actions next to the wishlist/cart buttons. */
.header-search { position: relative; }

.header-search-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color 0.2s, color 0.2s;
}

.header-search-toggle:hover,
.header-search-toggle.active { border-color: var(--gold); color: var(--gold-soft); }

.header-search-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.header-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: var(--radius);
  z-index: 60;
}

.header-search-panel.open { display: block; }

.header-search-panel .search-box { min-width: 0; }

.header-search-results { margin-top: 10px; max-height: 360px; overflow-y: auto; }

.header-search-empty { color: var(--text-dim); font-size: 13px; padding: 10px 2px; }

.header-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.header-search-result:last-child { border-bottom: none; }
.header-search-result img { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; }
.header-search-result .hsr-name { font-size: 13px; color: var(--text); line-height: 1.3; }
.header-search-result .hsr-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.header-search-result:hover .hsr-name { color: var(--gold-soft); }

/* Wishlist — header button (icon-only, same badge styling as the cart
   count via the shared .cart-count class) plus the card/modal heart
   toggles used to add or remove a product. */
/* User (login) button in header */
.user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  height: 42px;
  padding: 0 14px;
  cursor: pointer;
  border-radius: var(--radius);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.user-btn:hover { border-color: var(--gold); color: var(--gold-soft); }
.user-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.user-btn.logged-in { border-color: var(--gold-soft); color: var(--gold-soft); }

.wishlist-btn {
  position: relative;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color 0.2s, color 0.2s;
}

.wishlist-btn:hover { border-color: var(--gold); color: var(--gold-soft); }

.wishlist-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.wishlist-btn.has-items svg { fill: var(--terracotta); stroke: var(--terracotta); }

.wishlist-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(16, 15, 13, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}

.wishlist-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; transition: fill 0.2s, stroke 0.2s; }

.wishlist-toggle:hover { background: rgba(16, 15, 13, 0.8); }

.wishlist-toggle.active svg { fill: var(--terracotta); stroke: var(--terracotta); }

/* Hero */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at 70% 30%, rgba(193, 96, 47, 0.18), transparent 60%),
              linear-gradient(180deg, #141210 0%, #0c0b0a 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/img/p1/1.jpg');
  background-size: cover;
  background-position: center 20%;
  opacity: 0.28;
  filter: saturate(0.7) contrast(1.05);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

.hero-eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 12px;
  margin-bottom: 18px;
  animation: fadeUp 0.7s ease both;
}

.hero h1 {
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.05;
  margin: 0 0 24px;
  max-width: 720px;
  color: var(--text);
  animation: fadeUp 0.7s ease 0.08s both;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-soft);
}

.hero p {
  max-width: 460px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 36px;
  animation: fadeUp 0.7s ease 0.16s both;
}

.hero .btn { animation: fadeUp 0.7s ease 0.24s both; }

.btn {
  display: inline-block;
  background: var(--gold);
  color: #15110a;
  padding: 15px 34px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  font-family: 'Jost', sans-serif;
  transition: background 0.2s, transform 0.2s;
}

.btn:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-outline {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
}

.btn-outline:hover { background: rgba(203, 161, 101, 0.1); }

.btn-block { width: 100%; text-align: center; }

/* Section heading */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 44px;
  padding-top: 90px;
}

.section-head h2 {
  font-size: 36px;
  color: var(--text);
}

.section-head .sub {
  color: var(--text-dim);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Each fixed category (Одежда / Сумки / Готовые образы) is its own section
   on the page, not a filtered single grid — same look as the original
   catalog, just repeated per category. */
.category-section .section-head { padding-top: 60px; }

/* Home page storefront sections — category shortcuts + a real product grid,
   so the homepage sells something instead of being just a hero + brand
   blurb. Both reuse .section-head for their heading. */
.home-catalog .section-head { justify-content: flex-start; }
.home-catalog:first-of-type .section-head { padding-top: 80px; }

.category-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 20px;
}

.category-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.category-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.category-tile:hover img { transform: scale(1.06); }

.category-tile span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  background: linear-gradient(180deg, transparent, rgba(16, 15, 13, 0.85));
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* Promotions section — only ever in the DOM with content when at least one
   product is on sale; script.js hides the whole section otherwise. */
.promo-section .section-head { padding-top: 60px; }

/* Filters toggle — collapses the filters bar behind a button so the
   category header stays clean; only present on category pages. */
.section-head-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sort-select {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition: border-color 0.2s, color 0.2s;
}
.sort-select:hover, .sort-select:focus { border-color: var(--gold); color: var(--text); }
.sort-select option { background: #1a1510; color: var(--text); text-transform: none; letter-spacing: 0; }

.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.filters-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.filters-toggle:hover { border-color: var(--gold); color: var(--text); }

.filters-toggle:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

.filters-toggle.active {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(203, 161, 101, 0.1);
}

.filters-toggle.active svg { transform: rotate(180deg); }

.filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1410;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}

.filters-badge:empty { display: none; }

/* Catalog search — lives next to the filters toggle on category pages and
   filters the same in-memory product list filters.js already applies
   price/material/color to (see `filters.query` in script.js). */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  min-width: 220px;
  transition: border-color 0.2s;
}

.search-box:focus-within { border-color: var(--gold); }

.search-box svg { width: 14px; height: 14px; stroke: var(--text-dim); fill: none; flex-shrink: 0; }

.search-box input {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  width: 100%;
  min-width: 0;
}

.search-box input::placeholder { color: var(--text-dim); }

/* Filters bar — price range + material/color chips above a category grid.
   Only present on category pages (clothing/bags/looks.html), not the home
   page, which has no single category to filter. Collapsed by default and
   expanded via .open, toggled by the .filters-toggle button.
   Grid (not flex-wrap) on purpose: with flex-wrap, groups of very different
   height (price = one input, color = several rows of chips) all shared one
   flex-end baseline and reflowed unpredictably as chips wrapped — that's
   what was sliding around. Grid gives each group its own fixed column and
   top alignment, so nothing shifts regardless of how many chips a category
   happens to have. */
.filters-bar {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(220px, 1fr) minmax(220px, 1.4fr);
  gap: 28px 40px;
  align-items: start;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  border-bottom: 1px solid transparent;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease, margin-bottom 0.35s ease, border-color 0.35s ease;
}

.filters-bar.open {
  max-height: 2000px;
  opacity: 1;
  padding: 26px 0 30px;
  margin-bottom: 30px;
  border-bottom-color: var(--line);
}

.filters-bar .filter-reset {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: -6px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.filter-group > label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.price-range {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
}

.price-range input {
  width: 90px;
  min-width: 0;
  flex: 1 1 90px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
}

.price-range input:focus-visible { outline: 1px solid var(--gold); border-color: var(--gold); }

/* Dual-handle price range slider */
.price-slider-wrap {
  padding-top: 4px;
}
.price-slider-track {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: var(--radius-sm);
  margin: 14px 0 4px;
}
.price-slider-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.price-slider {
  position: absolute;
  width: 100%;
  top: -8px;
  height: 20px;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  margin: 0;
}
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  pointer-events: all;
  border: 2px solid var(--bg-card, #1a1612);
  transition: transform 0.15s;
}
.price-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.price-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  pointer-events: all;
  border: 2px solid var(--bg-card, #1a1612);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px 10px;
}

.filter-chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 999px;
  transition: border-color 0.2s, color 0.2s;
}

.filter-chip:hover { border-color: var(--gold); color: var(--text); }

.filter-chip.active {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(203, 161, 101, 0.12);
}

.filter-reset {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0;
}

.filter-reset:hover { color: var(--gold-soft); }

/* Catalog grid */
.catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 100px;
}

.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s;
  animation: cardIn 0.5s ease both;
}

.product-card:hover { border-color: var(--gold); transform: translateY(-4px); }

.product-card .thumb {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #0c0b0a;
  position: relative;
}

.sale-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--terracotta);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}

.product-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.product-card:hover .thumb img { transform: scale(1.05); }

.product-card .info { padding: 20px 22px 24px; }

.product-card .cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.product-card .name { font-size: 22px; color: var(--text); margin-bottom: 8px; }

.product-card .price-row { display: flex; align-items: baseline; gap: 8px; }
.product-card .price { font-size: 18px; color: var(--gold-soft); }
.product-card .price-old,
.modal-info .price-old {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: line-through;
}

.product-card .add-row {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-add {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  transition: border-color 0.2s, color 0.2s;
}

.quick-add:hover { border-color: var(--gold); color: var(--gold-soft); }
.quick-add:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.quick-add.notify-available { border-color: rgba(127,190,127,0.4); color: #7fbe7f; }
.quick-add.notify-available:hover { border-color: #7fbe7f; color: #9fd49f; }

/* Stock badges on catalog cards */
.card-stock-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  margin-top: 6px;
}
.card-stock-out { background: rgba(180,50,50,0.15); color: #c96060; }
.card-stock-low { background: rgba(200,130,0,0.15); color: #c89030; }

/* Stock in product modal */
.modal-stock-ok  { color: #6abf6a; }
.modal-stock-low { color: #e8a940; }
.modal-stock-out { color: #e06060; }

/* Empty state shown when filters/search match nothing — gives an obvious
   way back instead of leaving a bare sentence with no next action. */
.empty-state { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--text-dim); }
.empty-state p { margin: 0 0 14px; }

/* Catalog loading skeleton — shown for the brief window between page load
   and the /api/products response, so the grid doesn't sit blank. */
.skeleton-card { cursor: default; }
.skeleton-card:hover { border-color: var(--line); transform: none; }
.skeleton-card .thumb {
  background: linear-gradient(100deg, var(--panel) 30%, rgba(255,255,255,0.05) 50%, var(--panel) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-line {
  height: 12px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.skeleton-line.short { width: 55%; margin-bottom: 0; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* About strip */
/* Recently viewed section */
.recently-viewed {
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
/* Inside <main class="container"> on catalog pages, no extra wrapper needed */
.container > .recently-viewed {
  padding-left: 0;
  padding-right: 0;
}
/* On index.html it wraps its own .container */
.recently-viewed > .container { }

.about-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 90px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-grid h2 { font-size: 38px; margin-bottom: 20px; }

.about-grid p { color: var(--text-dim); line-height: 1.8; margin-bottom: 16px; font-size: 15px; }

.about-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-collage img { aspect-ratio: 3/4; object-fit: cover; }
.about-collage img:nth-child(2) { margin-top: 30px; }

/* Breadcrumbs — on every page one level below the home page, so it's
   always clear how to get back without relying on the browser's Back
   button. */
.breadcrumbs {
  padding: 26px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--gold-soft); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
.breadcrumbs .current { color: var(--text); }

/* Static info pages (Доставка и оплата / Возврат и обмен) — plain reading
   column rather than the wide multi-column layouts used elsewhere, since
   it's just prose + a couple of headings. */
.policy-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 90px 0 110px;
}

.policy-title {
  font-size: 42px;
  color: var(--text);
  margin: 0 0 44px;
}

.policy-block { margin-bottom: 36px; }

.policy-block h2 {
  font-size: 21px;
  color: var(--gold-soft);
  margin: 0 0 14px;
}

.policy-block p {
  color: var(--text-dim);
  line-height: 1.8;
  font-size: 15px;
  margin: 0 0 14px;
}

.policy-block ul {
  color: var(--text-dim);
  line-height: 1.8;
  font-size: 15px;
  margin: 0 0 14px;
  padding-left: 22px;
}

.policy-block li { margin-bottom: 4px; }

.policy-note {
  font-size: 13px;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 8px;
}

/* Footer */
.site-footer {
  padding: 70px 0 30px;
  background: var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line);
}

.footer-grid h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-soft);
  margin-bottom: 18px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
}

.footer-grid p, .footer-grid a {
  display: block;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 2;
}

.footer-grid a:hover { color: var(--gold-soft); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Modal: product
   Kept "display: flex" always on (instead of display:none <-> flex) so the
   opacity/visibility transition below actually has something to animate —
   a display toggle jumps instantly with no transition to hook into. */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 6, 0.78);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 980px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s ease;
}

.overlay.open .modal { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(16,15,13,0.6);
  border: 1px solid var(--line);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  font-size: 16px;
  outline: none;
}

/* Back button — mirrors the close button but anchored to the left.
   Hidden by default; shown by script.js when there's history to go back to. */
.modal-back {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(16,15,13,0.6);
  border: 1px solid var(--line);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  font-size: 18px;
  line-height: 1;
  transition: background 0.18s, border-color 0.18s, transform 0.18s, opacity 0.18s;
  /* Slide in from the left when it appears */
  animation: modal-back-in 0.22s ease both;
  outline: none;
}

@keyframes modal-back-in {
  from { opacity: 0; transform: translateX(-8px) scale(0.85); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}

.modal-back:hover {
  background: rgba(16,15,13,0.85);
  border-color: var(--gold-soft);
  transform: translateX(-2px);
}

.modal-back:active {
  transform: translateX(-4px) scale(0.93);
}

.modal-gallery .main-img {
  position: relative;
  /* 4:5 portrait ratio — the standard for fashion product photography.
     Fills the frame without black bars for typical portrait shots,
     and avoids the heavy cropping of a square 1:1 container. */
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #0c0b0a;
}

/* Transparent overlay that intercepts right-click / drag events on the photo
   so the browser context menu ("Save image as…") is blocked.
   z-index 2 sits above the img but below the nav arrows (z-index 4).
   cursor:zoom-in tells the user they can click to enlarge. */
.modal-gallery .main-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: zoom-in;
}

.modal-gallery .main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Prevent drag-to-desktop */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.modal-thumbs {
  display: flex;
  gap: 10px;
  padding: 14px;
}

/* Prev/next photo navigation arrows — overlaid on the main image */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(16,15,13,0.55);
  border: 1px solid var(--line);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
  outline: none;
}
.modal-nav:hover { background: rgba(16,15,13,0.85); border-color: var(--gold-soft); }
.modal-nav:active { opacity: 0.7; }
.modal-prev { left: 12px; }
.modal-next { right: 12px; }

.modal-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--line);
  opacity: 0.6;
}

.modal-thumbs img.active { opacity: 1; border-color: var(--gold); }

.modal-info { padding: 44px 40px; }

.modal-info .cat { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; }
.modal-info h3 { font-size: 32px; margin: 0 0 12px; }
.modal-info .price { font-size: 24px; color: var(--gold-soft); margin-bottom: 22px; display: block; }
.modal-info .desc { color: var(--text-dim); line-height: 1.8; margin-bottom: 26px; font-size: 15px; }
/* Specs block — color/material shown as labeled rows in a bordered panel
   instead of inline "Цвет: ..." text, so each attribute reads as its own
   piece of information rather than running together with the description. */
.modal-specs {
  border: 1px solid var(--line);
  margin-bottom: 26px;
}

.modal-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  font-size: 13px;
}

.modal-spec-row + .modal-spec-row { border-top: 1px solid var(--line); }

.spec-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.spec-value { color: var(--text); font-weight: 500; text-align: right; }

/* Description gets its own labeled section, matching the "Из чего состоит
   образ" block below it, instead of sitting as a bare paragraph. */
.modal-section { margin-bottom: 26px; }
.modal-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.modal-section .desc { margin-bottom: 0; }

/* Size selector — injected dynamically into the modal for products that have
   a sizes[] array. Chips are plain bordered buttons; the active one gets
   a gold border and text. An error line appears if "Add to cart" is pressed
   without a selection. */
.modal-sizes-section { margin-bottom: 24px; }

.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.size-chip {
  padding: 7px 16px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text-dim);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  min-width: 44px;
  text-align: center;
}

.size-chip:hover {
  border-color: var(--gold);
  color: var(--text);
}

.size-chip.active {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(203, 161, 101, 0.08);
}

.size-error {
  font-size: 12px;
  color: var(--terracotta);
  margin-top: 2px;
}

/* Related products — same category, shown below "Из чего состоит образ"
   so the customer has somewhere to go next instead of closing the modal. */
.related-list { display: flex; flex-wrap: wrap; gap: 12px; }
.related-item { width: 84px; cursor: pointer; }
.related-item img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.related-item:hover img { border-color: var(--gold); }
.related-item .related-name { font-size: 11px; color: var(--text-dim); line-height: 1.3; }

/* "Из чего состоит образ" — composedOf, shown in the product modal only
   for "Готовые образы" products that list other site products. */
.composed-of { margin-bottom: 26px; }
.composed-of-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.composed-of-list { display: flex; flex-wrap: wrap; gap: 10px; }
.composed-of-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 6px 12px 6px 6px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.composed-of-item:hover { border-color: var(--gold); }
.composed-of-item img { width: 36px; height: 36px; object-fit: cover; }
.composed-of-item span { font-size: 13px; color: var(--text); }

.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn-block { flex: 1; }
.wishlist-toggle-modal {
  width: 52px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.wishlist-toggle-modal svg { width: 18px; height: 18px; stroke: currentColor; fill: none; transition: fill 0.2s, stroke 0.2s; }
.wishlist-toggle-modal:hover { border-color: var(--gold); color: var(--gold-soft); }
.wishlist-toggle-modal.active { border-color: var(--terracotta); }
.wishlist-toggle-modal.active svg { fill: var(--terracotta); stroke: var(--terracotta); }

.qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.qty-row button {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  background: none; color: var(--text);
  cursor: pointer; font-size: 16px;
}
.qty-row span { min-width: 24px; text-align: center; font-size: 16px; }

/* Cart drawer */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  max-width: 92vw;
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 110;
  transition: right 0.35s ease;
  display: flex;
  flex-direction: column;
}

.cart-drawer.open { right: 0; }

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line);
}

.cart-head h3 { font-size: 22px; margin: 0; }

.cart-items { flex: 1; overflow-y: auto; padding: 10px 28px; }

.cart-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item img { width: 76px; height: 76px; object-fit: cover; }

.cart-item .ci-info { flex: 1; }
.cart-item .ci-name { font-size: 16px; font-family: 'Cormorant Garamond', serif; margin-bottom: 4px; }
.cart-item .ci-color { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; }
.cart-item .ci-size { font-size: 12px; color: var(--gold); margin-bottom: 8px; }
.cart-item .ci-row { display: flex; justify-content: space-between; align-items: center; }
.cart-item .ci-qty { display: flex; align-items: center; gap: 8px; }
.cart-item .ci-qty button {
  width: 24px; height: 24px; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer;
}
.cart-item .ci-price { color: var(--gold-soft); font-size: 14px; }
.cart-item .ci-remove { color: var(--text-dim); font-size: 11px; text-decoration: underline; cursor: pointer; border: none; background: none; padding: 0; font-family: 'Jost', sans-serif; }

.cart-empty { padding: 60px 0; text-align: center; color: var(--text-dim); }

.cart-footer { padding: 22px 28px 28px; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 18px; font-size: 17px; }
.cart-total b { color: var(--gold-soft); }

.drawer-close {
  background: none; border: 1px solid var(--line); color: var(--text);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}

.scrim {
  position: fixed; inset: 0; background: rgba(8,7,6,0.6);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.scrim.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Checkout — its own (smaller, single-column) modal size. The shared
   .modal class is sized for the product modal (photo + info side by side,
   up to 980px); the checkout form has no photo column, so left at that
   width it just sat awkwardly on the left with empty space on the right
   instead of looking like a centered dialog. */
/* The form and the success screen swap via display:block/none (script.js).
   Forcing a fixed/min-height here so the box "doesn't resize" was tried and
   made things worse — it left a tall, mostly-empty box around the short
   success message. Instead the box is left to size to its actual content
   (small and centered, as it should look), and script.js animates the
   height change on swap so it resizes smoothly instead of jumping. */
#checkoutModal { max-width: 560px; }

.checkout-form { padding: 40px; }
.checkout-form h3 { font-size: 26px; margin-bottom: 6px; }
.checkout-form .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(203, 161, 101, 0.15);
}
.field textarea { min-height: 70px; resize: vertical; }

.checkout-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 12px;
}

.checkout-form .hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: -8px 0 16px;
}

/* margin:0 auto — without it this block (capped at max-width:460px inside
   the wider 560px checkout box) hugs the left edge by default, leaving a
   slab of empty space on the right instead of sitting centered. */
.success-screen { padding: 70px 40px; text-align: center; max-width: 460px; margin: 0 auto; }

/* Override .field label { display:block; text-transform:uppercase } for payment cards */
.field .payment-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  margin-bottom: 0;
}
.field .payment-card-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.3;
}
.field .payment-card-desc {
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Payment method cards */
.payment-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.payment-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
  user-select: none;
}
.payment-card:hover {
  border-color: rgba(197, 168, 112, 0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.payment-card:has(input:checked) {
  border-color: var(--gold);
  background: rgba(197, 168, 112, 0.06);
  box-shadow: 0 2px 10px rgba(197, 168, 112, 0.15);
}
.payment-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Icon badge */
.pci {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
}
.pci-cash {
  background: rgba(197, 168, 112, 0.12);
  color: var(--gold);
  height: 40px;
  border-radius: var(--radius-sm);
}
.pci-sbp {
  background: transparent;
  width: auto;
  height: auto;
}
.pci-split {
  background: transparent;
  gap: 6px;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: auto;
}

/* Card text */
.payment-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.payment-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.payment-card-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Custom radio dot */
.payment-card-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}
.payment-card:has(input:checked) .payment-card-dot {
  border-color: var(--gold);
}
.payment-card:has(input:checked) .payment-card-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gold);
}
.payment-card--split:has(input:checked) .payment-card-dot {
  border-color: #FC3F1D;
}
.payment-card--split:has(input:checked) .payment-card-dot::after {
  background: #FC3F1D;
}
.payment-card--split:has(input:checked) {
  border-color: rgba(252, 63, 29, 0.55);
  background: rgba(252, 63, 29, 0.04);
  box-shadow: 0 2px 10px rgba(252, 63, 29, 0.1);
}
.payment-card--split:hover {
  border-color: rgba(252, 63, 29, 0.3);
}

/* Яндекс Сплит badges */
.split-ya-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #FC3F1D;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  line-height: 1;
}
.split-x4-badge {
  font-size: 10px;
  font-weight: 700;
  color: #FC3F1D;
  letter-spacing: -0.02em;
  font-family: 'Jost', sans-serif;
}

/* ЮKassa widget wrapper */
#yookassaWidgetWrap {
  margin-top: 16px;
}

.form-error {
  background: rgba(193, 96, 47, 0.15);
  border: 1px solid var(--terracotta);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.success-screen .mark {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
  color: var(--gold-soft); font-size: 28px;
}
.success-screen h3 { font-size: 26px; margin-bottom: 12px; }
.success-screen p { color: var(--text-dim); font-size: 14px; line-height: 1.7; }

/* =============================================================================
   Mobile navigation — hamburger + slide-in drawer
   ============================================================================= */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 10px;
  flex-shrink: 0;
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.18s ease;
  transform-origin: left center;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(1px, -1px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(1px, 1px); }

/* Scrim (dark overlay behind drawer) */
.mobile-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 149;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-scrim.open {
  opacity: 1;
  pointer-events: all;
}

/* Slide-in drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 82vw);
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.mobile-nav-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.mobile-nav-close:hover { color: var(--text); }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
}
.mobile-nav-links a {
  display: block;
  padding: 15px 24px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, background 0.15s;
}
.mobile-nav-links a:hover {
  color: var(--gold-soft);
  background: rgba(203, 161, 101, 0.06);
}

.mobile-nav-bottom {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.mobile-nav-bottom a {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.mobile-nav-bottom a:hover { color: var(--text); }

@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .main-nav { display: none; }
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .category-tiles { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .modal { grid-template-columns: 1fr; }
  .filters-bar { grid-template-columns: minmax(180px, 220px) 1fr; }
  .filters-bar .filter-group:nth-child(3) { grid-column: 1 / -1; }
  .search-box { min-width: 0; }
}

@media (max-width: 560px) {
  .catalog { grid-template-columns: 1fr; }
  .category-tiles { grid-template-columns: 1fr; }
  .header-inner { padding: 16px 16px; }
  .logo { font-size: 20px; }
  .container { padding: 0 20px; }
  .composed-of-item span { font-size: 12px; }
  .section-head { flex-wrap: wrap; gap: 14px; }
  .section-head-right { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .search-box { order: 3; flex: 1 1 100%; }
  .filters-bar { grid-template-columns: 1fr; }
  .filters-bar .filter-group:nth-child(3) { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .header-search-panel { right: -20px; width: calc(100vw - 24px); }
  .user-btn-label { display: none; }
  .user-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  /* Cart button collapses to icon+badge only, like the user/wishlist
     buttons — at this width "Корзина" as full text pushed the header past
     the viewport edge. */
  .cart-btn-label { display: none; }
  .cart-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .wishlist-btn, .header-search-toggle { width: 38px; height: 38px; }
  .header-actions { gap: 8px; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* =============================================================================
   Auth modal (login / register)
   ============================================================================= */

.auth-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
  width: 100%;
  max-width: 420px;
  padding: 40px;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.22s var(--ease-out);
}
.overlay.open .auth-modal { transform: translateY(0) scale(1); }

.auth-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.auth-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 0;
  margin-right: 24px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab.active { color: var(--text); border-bottom-color: var(--gold-soft); }

.auth-oauth { display: flex; flex-direction: column; gap: 10px; }
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-oauth:hover { border-color: var(--gold); color: var(--gold-soft); }
.btn-oauth svg { flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.auth-form input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(203, 161, 101, 0.15);
}

.auth-footer-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}
.link-btn {
  background: none;
  border: none;
  color: var(--gold-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  padding: 0;
}

/* =============================================================================
   Cookie consent banner
   ============================================================================= */
/* Cookie consent — corner card */
#cookieBanner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9000;
  background: rgba(22, 18, 13, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  max-width: 260px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
#cookieBanner.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#cookieBanner p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
#cookieBanner p a { color: var(--gold-soft); text-decoration: underline; }
.cookie-banner-actions { display: flex; align-items: center; gap: 8px; }
.cookie-btn {
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-soft);
  transition: background 0.2s, color 0.2s;
}
.cookie-btn-primary:hover { background: var(--gold); color: #120e0a; }
.cookie-btn-x {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: auto;
  opacity: 0.6;
  font-family: inherit;
  transition: opacity 0.2s;
}
.cookie-btn-x:hover { opacity: 1; }

/* =============================================================================
   Floating social support widget
   ============================================================================= */
#socialFab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 8500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#socialFab.visible { opacity: 1; pointer-events: auto; }

.social-fab-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  opacity: 0;
}
#socialFab.open .social-fab-links { max-height: 240px; opacity: 1; }

.social-fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transform: translateX(12px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#socialFab.open .social-fab-item { transform: translateX(0); opacity: 1; }
#socialFab.open .social-fab-item:nth-child(1) { transition-delay: 0.04s; }
#socialFab.open .social-fab-item:nth-child(2) { transition-delay: 0.08s; }
#socialFab.open .social-fab-item:nth-child(3) { transition-delay: 0.12s; }
#socialFab.open .social-fab-item:nth-child(4) { transition-delay: 0.16s; }

.social-fab-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  background: rgba(22,18,13,0.92);
  border: 1px solid var(--line);
  padding: 4px 10px;
  white-space: nowrap;
}
.social-fab-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.social-fab-item:hover .social-fab-icon { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.social-fab-icon svg { width: 22px; height: 22px; fill: #fff; }
.social-fab-icon.tg  { background: #229ED9; }
.social-fab-icon.ig  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-fab-icon.vk  { background: #0077FF; }
.social-fab-icon.mx  { background: #FF6B35; }

.social-fab-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: border-color 0.2s, color 0.2s, transform 0.3s;
  flex-shrink: 0;
}
.social-fab-toggle:hover { border-color: var(--gold); color: var(--gold-soft); }
#socialFab.open .social-fab-toggle { transform: rotate(45deg); }
.social-fab-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* =============================================================================
   Newsletter subscription strip (injected by shared.js before footer)
   ============================================================================= */
.nl-strip {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 40px;
}

.nl-strip-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}

.nl-strip-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.nl-strip-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.nl-strip-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nl-strip-input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 200px;
  transition: border-color 0.2s;
}
.nl-strip-input:focus { border-color: var(--gold); }
.nl-strip-input::placeholder { color: var(--text-dim); }

.nl-strip-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  padding: 10px 24px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nl-strip-btn:hover { background: var(--gold); color: var(--bg); }

.nl-strip-msg {
  font-size: 14px;
  color: var(--gold-soft);
  padding: 10px 0;
  text-align: right;
}
.nl-strip-msg-err { color: #e06060; }

@media (max-width: 760px) {
  .nl-strip-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .nl-strip-form { justify-content: flex-start; }
  .nl-strip-input { width: 100%; }
  .nl-strip-btn   { width: 100%; }
  .nl-strip-msg   { text-align: left; }
}

/* Newsletter checkbox in auth registration form */
.auth-newsletter-field {
  margin: 2px 0 4px;
}
.auth-newsletter-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1.5;
}
.auth-newsletter-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--gold);
}

/* Forgot-password link + inline panel in the auth modal */
.auth-forgot-link {
  text-align: right;
  margin: -8px 0 14px;
}
.auth-forgot-link .link-btn {
  font-size: 12px;
}
.auth-forgot-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 16px;
}
.auth-forgot-back {
  display: block;
  margin: 14px auto 0;
  font-size: 12px;
}
.form-success {
  background: rgba(106, 191, 106, 0.12);
  border: 1px solid #6abf6a;
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}

/* =============================================================================
   Premium UX — animations, scroll-reveal, parallax (Apple / LV inspired)
   ============================================================================= */

/* CSS custom property for easing — used throughout animations */
:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
}

/* ---------- 1. Scroll-reveal ----------
   JS (IntersectionObserver) adds .reveal to elements below the fold,
   then adds .in-view when they enter the viewport. Elements above the
   fold at load time get both classes immediately (no FOUC). */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out),
              transform 0.75s var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
/* Stagger siblings — JS applies these classes by index */
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.38s; }

/* ---------- 2. Header — hide on scroll-down, show on scroll-up ---------- */
.site-header {
  /* Override the existing transition to add transform (top kept for announcement bar) */
  transition: transform 0.45s var(--ease-out), top 0.4s ease;
  will-change: transform;
}
.site-header.header-up {
  transform: translateY(-110%);
}

/* ---------- 3. Hero background parallax ----------
   Extra vertical bleed so the translated pseudo-element never shows a gap. */
.hero::before {
  top: -22%;
  bottom: -22%;
  will-change: transform;
  transform: translateY(var(--parallax, 0));
}

/* ---------- 4. Product card — luxury hover overlay ---------- */
.card-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 9, 7, 0.55) 100%);
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none; /* wishlist button stays clickable */
  z-index: 1;
}
.card-hover-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
  transform: translateY(7px);
  transition: transform 0.45s var(--ease-out);
}
.product-card:hover .card-hover-overlay { opacity: 1; }
.product-card:hover .card-hover-label   { transform: translateY(0); }

/* Reduce the card lift — luxury is restrained, not bouncy */
.product-card:hover { border-color: var(--gold); transform: translateY(-2px); }

/* ---------- 5. Category tile — arrow reveal on hover ---------- */
.category-tile span::after {
  content: '→';
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--gold-soft);
  margin-top: 8px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.category-tile:hover span::after {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- 6. Section heading — animated gold accent rule ---------- */
.section-head h2 {
  position: relative;
  padding-bottom: 16px;
}
.section-head h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  width: 24px;
  transition: width 0.65s var(--ease-out) 0.25s;
}
.section-head h2.in-view::after {
  width: 48px;
}

/* ---------- 7. Button — sliding shimmer on hover ---------- */
.btn:not(.btn-outline) {
  background: linear-gradient(to right, var(--gold-soft) 50%, var(--gold) 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.55s var(--ease-out),
              transform 0.2s ease,
              color 0.2s ease;
}
.btn:not(.btn-outline):hover {
  background-color: unset; /* let the gradient rule */
  background-position: left center;
  transform: translateY(-1px);
}

/* ---------- 8. Modal — more polished open animation ---------- */
.overlay {
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.modal {
  transform: translateY(26px) scale(0.965);
  transition: transform 0.5s var(--ease-out);
}
.overlay.open .modal { transform: translateY(0) scale(1); }

/* auth modal matches */
.auth-modal {
  transform: translateY(26px) scale(0.965);
  transition: transform 0.5s var(--ease-out);
}
.overlay.open .auth-modal { transform: translateY(0) scale(1); }

/* ---------- 9. Cart drawer — smoother slide ---------- */
.cart-drawer {
  transition: right 0.45s var(--ease-in-out);
}

/* ---------- 10. Image lazy-load fade-in ----------
   Images with loading="lazy" reveal with a gentle fade instead of
   snapping in when the browser loads them. Applied via the .img-fade
   class that JS adds once the image fires its load event. */
.img-fade {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.img-fade.loaded { opacity: 1; }

/* Reduce motion — all decorative animations snap to their end state */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-d1, .reveal-d2, .reveal-d3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .site-header { transition: top 0.4s ease !important; }
  .hero::before { will-change: auto; transform: none !important; }
  .card-hover-overlay, .card-hover-label { transition: none; }
  .section-head h2::after { transition: none; width: 48px; }
  .btn:not(.btn-outline) { background: var(--gold); transition: transform 0.2s, color 0.2s; }
  .cart-drawer { transition: right 0.35s ease; }
}

/* ==========================================================================
   Image zoom overlay (script.js — initImageZoom)
   ========================================================================== */
.img-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10, 8, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s;
  touch-action: none;
}
.img-zoom-overlay.open {
  opacity: 1;
  visibility: visible;
}
.img-zoom-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  user-select: none;
  will-change: transform;
  transition: transform 0.08s linear;
  cursor: zoom-in;
  border-radius: var(--radius);
}
/* Zoom trigger button — sits in the top-right corner of the main modal image */
.modal-zoom-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(212,184,138,0.3);
  background: rgba(16,15,13,0.65);
  color: var(--text-dim);
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-gallery .main-img:hover .modal-zoom-btn { opacity: 1; }
.modal-zoom-btn:hover { background: rgba(203,161,101,0.25); color: var(--gold-soft); }

.img-zoom-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  transition: color 0.2s;
  z-index: 1;
}
.img-zoom-close:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .img-zoom-overlay { transition: none; }
  .img-zoom-img { transition: none; }
}

/* ==========================================================================
   Product reviews (script.js — loadProductReviews)
   ========================================================================== */
.reviews-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 10px; }
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}
.reviews-avg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.reviews-count, .reviews-count-empty { color: var(--text-dim); font-size: 13px; }

/* Stars */
.review-star { color: var(--text-dim); font-size: 15px; }
.review-star.filled { color: var(--gold); }
.review-star.interactive { cursor: pointer; font-size: 22px; transition: color 0.15s; }

.reviews-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.review-card {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.review-author { font-size: 13px; font-weight: 600; }
.review-date   { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.review-stars  { font-size: 13px; }
.review-text   { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.5; }

/* Submit form */
.review-form { border-top: 1px dashed var(--line); padding-top: 14px; }
.review-form-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; color: var(--text-dim); }
.review-stars-pick { margin-bottom: 10px; letter-spacing: 2px; }
.review-form textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}
.review-login-prompt { font-size: 13px; color: var(--text-dim); }