/* =========================================================
   ТЁПЛЫЙ ДОМ — дизайн-система
   Спокойная бежево-коричневая гамма, тонкие акценты тёмным.
   ========================================================= */

:root{
  --bg:            #f5f1ec;
  --bg-soft:       #efe9e1;
  --paper:         #ffffff;
  --ink:           #201d1a;
  --ink-soft:      #4d4740;
  --muted:         #8a8177;
  --line:          #e2dad0;
  --line-strong:   #cfc4b4;
  --dark:          #1c1a17;
  --dark-soft:     #2b2723;
  --accent:        #9c7a52;
  --accent-soft:   #d8c8b3;
  --ok:            #5d7a5d;
  --warn:          #a9762c;
  --danger:        #a5453a;
  --radius:        2px;
  --radius-lg:      6px;
  --shadow-sm:     0 1px 3px rgba(28,26,23,.06);
  --shadow-md:     0 10px 30px rgba(28,26,23,.10);
  --shadow-lg:     0 24px 60px rgba(28,26,23,.18);
  --ease:          cubic-bezier(.22,.61,.36,1);
  --dur:           .35s;
  --font-display:  'Georgia', 'Times New Roman', serif;
  --font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --brand-brown:      #5c3d24;
  --brand-brown-soft: #6f4c30;
}

@font-face{
  font-family:'Passions Conflict RUS';
  src:url("../fonts/PassionsConflictRUS-Regular.3934f165bd5f.otf") format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:15px; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; margin:0; }
.container{ max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:720px){ .container{ padding:0 18px; } }

/* ---------- helpers ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius); border:1px solid var(--brand-brown);
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-dark{ background:var(--brand-brown); color:#fff; }
.btn-dark:hover{ background:var(--brand-brown-soft); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--brand-brown); border-color:var(--brand-brown); }
.btn-outline:hover{ background:var(--brand-brown); color:#fff; transform:translateY(-2px); }
.btn-ghost{ border-color:transparent; background:transparent; padding:8px 4px; }
.btn-ghost:hover{ color:var(--accent); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }
.btn-sm{ padding:9px 16px; font-size:11px; }

.link-arrow{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px; transition:opacity var(--dur) var(--ease); }
.link-arrow:hover{ opacity:.6; }

.pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; letter-spacing:.03em; font-weight:600; }
.pill-ok{ background:#e7ede3; color:var(--ok); }
.pill-warn{ background:#f3e6d2; color:var(--warn); }
.pill-danger{ background:#f2dfdb; color:var(--danger); }
.pill-muted{ background:var(--bg-soft); color:var(--muted); }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); }
.section{ padding:72px 0; }
.section-tight{ padding:40px 0; }
@media (max-width:720px){ .section{ padding:44px 0; } }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.section-head h2{ font-size:28px; margin-top:6px; }

.fade-up{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.in{ opacity:1; transform:translateY(0); }

/* ---------- top bar ---------- */
.topbar{
  background:var(--dark); color:#e9e4dc; font-size:15px; letter-spacing:.06em;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; min-height:36px; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; row-gap:2px; column-gap:16px; }
.topbar-marquee{ display:flex; gap:48px; text-transform:uppercase; opacity:.9; flex-wrap:wrap; row-gap:2px; }
.topbar-role{ text-transform:uppercase; opacity:.85; font-size:12.5px; white-space:nowrap; }
.topbar-role a{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:900px){ .topbar{ font-size:12px; } .topbar-marquee{ gap:20px; } }
@media (max-width:720px){ .topbar-marquee span:nth-child(3), .topbar-marquee span:nth-child(2){ display:none; } }
@media (max-width:560px){ .topbar-role{ display:none; } }

/* ---------- demo banner ---------- */
.demo-banner{ background:var(--dark); color:#fff; }
.demo-banner-inner{ display:flex; align-items:center; justify-content:center; gap:10px; padding-block:12px; text-align:center; font-size:15px; line-height:1.4; }
.demo-banner-inner svg{ width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.6; flex-shrink:0; }
.demo-banner-inner b{ font-weight:700; }
.demo-banner-inner span{ max-width:none; white-space:nowrap; }
@media (max-width:1100px){ .demo-banner-inner span{ white-space:normal; } .demo-banner-inner{ font-size:13px; } }
@media (max-width:640px){ .demo-banner-inner{ padding-block:9px; font-size:11px; gap:8px; } }

/* ---------- header ---------- */
.site-header{ background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }
.header-row{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px; }
.brand{ font-family:var(--font-display); font-size:32px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; gap:10px; font-weight:600; }
.brand-logo{ width:34px; height:34px; color:var(--dark); flex-shrink:0; }
.main-nav{ display:flex; gap:30px; }
.main-nav a{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; position:relative; padding:6px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right var(--dur) var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.header-icons{ display:flex; align-items:center; gap:14px; }
.icon-btn{ position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background var(--dur) var(--ease); }
.icon-btn:hover{ background:var(--bg-soft); }
.icon-btn svg{ width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.4; }
.badge{ position:absolute; top:-2px; right:-2px; background:var(--dark); color:#fff; font-size:10px; min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.nav-toggle{ display:none; }
@media (max-width:920px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:480px){
  .header-row{ height:auto; min-height:78px; padding:14px 0; }
  .brand{ font-size:22px; }
  .brand-logo{ width:26px; height:26px; }
}

/* ---- шапка на клиентских страницах: логотип+иконки / меню+поиск на одном уровне ---- */
.header-row-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px 12px; }
.header-left{ display:flex; align-items:center; gap:14px; }

.search-bar{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:24px; background:var(--paper); transition:border-color var(--dur) var(--ease); }
.search-bar:focus-within{ border-color:var(--dark); }
.search-bar input{ flex:1; min-width:0; border:none; background:transparent; padding:11px 6px 11px 20px; font-size:13.5px; color:var(--ink); }
.search-bar input::placeholder{ color:var(--muted); }
.search-bar input:focus{ outline:none; }
.search-bar button{ width:44px; height:42px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.search-bar button svg{ width:17px; height:17px; stroke:var(--muted); fill:none; stroke-width:1.6; }

.header-row-nav{ border-top:1px solid var(--line); padding-block:12px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.header-row-nav .main-nav{ gap:28px; }
/* Ширина 590px измерена по факту (правая колонка .hero-grid — картинка
   hero.jpg — при полной ширине контейнера 1280px), чтобы строка поиска
   в шапке совпадала по ширине с картинкой в hero-секции. */
.header-row-nav .search-bar{ flex:0 1 590px; max-width:590px; margin-left:auto; }
@media (max-width:920px){
  .header-row-nav .main-nav{ display:none; }
  .site-header.nav-open .header-row-nav .main-nav{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; width:100%; order:2; }
  .site-header.nav-open .header-row-nav .main-nav a{ display:block; padding:10px 0; }
  .header-row-nav .search-bar{ flex:1 1 100%; max-width:100%; order:1; }
}
@media (max-width:560px){
  .header-row-top{ padding-block:14px 10px; gap:8px; }
  .header-left{ gap:8px; }
  .brand{ font-size:18px; gap:6px; }
  .brand-logo{ width:24px; height:24px; }
  .header-icons{ gap:2px; }
  .icon-btn{ width:38px; height:38px; }
  .icon-btn svg{ width:21px; height:21px; }
  .search-bar input{ padding:9px 4px 9px 16px; font-size:13px; }
}
@media (max-width:380px){
  .brand span{ display:none; }
  .brand-logo{ width:28px; height:28px; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--bg); }
.hero-constellation{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:20px; min-height:640px; }
.hero-copy{ padding:60px 0; position:relative; z-index:2; }
.hero-copy h1{ font-family:'Passions Conflict RUS', var(--font-display); font-size:104px; line-height:.88; text-transform:none; letter-spacing:0; font-weight:400; color:#5c3d24; margin-bottom:22px; }
.hero-copy h1 .warm-word{ font-weight:700; font-size:1.25em; }
.hero-copy p{ max-width:380px; color:var(--ink-soft); font-size:16px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-media{ position:relative; height:100%; min-height:560px; }
.hero-media img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); animation:heroIn 1.4s var(--ease) both; }
.hero-side{ position:absolute; right:0; top:24px; text-align:right; z-index:2; }
.hero-side .eyebrow{ display:block; margin-bottom:6px; }
.hero-side .year{ font-family:var(--font-display); font-size:15px; color:var(--muted); }
@keyframes heroIn{ from{ opacity:0; transform:scale(1.06); } to{ opacity:1; transform:scale(1); } }
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; min-height:auto; }
  .hero-copy{ padding:44px 0 10px; }
  .hero-copy h1{ font-size:76px; }
  .hero-media{ min-height:340px; order:-1; }
  .hero-side{ display:none; }
}

/* ---------- category strip (dark, compact, bounded to page width) ---------- */
.cat-strip{ background:var(--dark); padding:56px 0; }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-item{
  position:relative; display:block; overflow:hidden; aspect-ratio:1/1; border-radius:var(--radius-lg);
  background:var(--dark-soft);
}
.cat-item img{ width:100%; height:100%; object-fit:cover; filter:brightness(.55) saturate(.9); transition:filter var(--dur) var(--ease), transform .7s var(--ease); }
.cat-item:hover img{ filter:brightness(.9) saturate(1.05); transform:scale(1.06); }
.cat-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; color:#fff; }
.cat-overlay h3{ font-family:var(--font-body); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:700; margin-bottom:3px; }
.cat-overlay p{ font-size:10.5px; color:#d8d2c8; margin-bottom:6px; max-width:18ch; display:none; }
.cat-overlay .link-arrow{ color:#fff; border-color:rgba(255,255,255,.6); font-size:10px; }
@media (max-width:820px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .cat-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ---------- story split ---------- */
.story{ background:var(--bg); }
.story-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center; }
.story-media{ border-radius:var(--radius-lg); overflow:hidden; height:460px; }
.story-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.story-media:hover img{ transform:scale(1.05); }
.story-copy h2{ font-size:36px; text-transform:uppercase; line-height:1.05; margin:8px 0 18px; }
.story-copy p{ color:var(--ink-soft); max-width:46ch; margin-bottom:26px; }
@media (max-width:860px){
  .story-grid{ grid-template-columns:1fr; }
  .story-media{ order:-1; height:300px; }
}

/* ---------- product grid & cards ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .product-grid{ grid-template-columns:1fr; } }

#bestsellers-grid{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1180px){ #bestsellers-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ #bestsellers-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ #bestsellers-grid{ grid-template-columns:1fr; } }

.product-card{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  opacity:.86; filter:saturate(.9);
}
.product-grid:hover .product-card, .related-grid:hover .product-card{ opacity:.62; filter:saturate(.7) brightness(.94); }
.product-card:hover{ opacity:1 !important; filter:saturate(1.08) brightness(1.02) !important; transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-strong); z-index:2; }
.product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-soft); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.product-card:hover .product-media img{ transform:scale(1.07); }
.wish-btn{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-6px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.product-card:hover .wish-btn{ opacity:1; transform:translateY(0); }
.wish-btn svg{ width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.6; }
.wish-btn.active svg{ fill:var(--danger); stroke:var(--danger); }
.stock-flag{ position:absolute; left:10px; top:10px; }
.product-quickadd{
  position:absolute; left:10px; right:10px; bottom:-46px; transition:bottom var(--dur) var(--ease);
}
.product-card:hover .product-quickadd{ bottom:10px; }
.product-info{ padding:14px 16px 18px; }
.product-info .pname{ font-size:14px; font-weight:600; margin-bottom:3px; }
.product-info .pmeta{ font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.product-info .pprice{ font-size:15px; font-weight:700; letter-spacing:.01em; }
.product-info .pprice .old{ font-weight:400; color:var(--muted); text-decoration:line-through; margin-left:8px; font-size:13px; }

/* ---------- filters / catalog toolbar ---------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:8px 16px; border:1px solid var(--line-strong); border-radius:20px; font-size:12.5px; letter-spacing:.02em; transition:all var(--dur) var(--ease); background:var(--paper); }
.chip:hover{ border-color:var(--ink); }
.chip.active{ background:var(--dark); color:#fff; border-color:var(--dark); }
.select-mini{ border:1px solid var(--line-strong); border-radius:var(--radius); padding:9px 12px; background:var(--paper); font-size:12.5px; }

/* ---------- page banner ---------- */
.page-banner{ padding:46px 0 26px; border-bottom:1px solid var(--line); }
.page-banner h1{ font-size:34px; text-transform:uppercase; }
.crumbs{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.crumbs a:hover{ color:var(--ink); }

/* ---------- forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper); color:var(--ink); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--dark); box-shadow:0 0 0 3px rgba(28,26,23,.06); }
.field input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; margin-top:2px; padding:0; accent-color:var(--dark); }
.field-hint{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.field-password{ position:relative; }
.field-password input{ padding-right:38px; }
.pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  background:none; border:none; padding:0; appearance:none;
  transition:color var(--dur) var(--ease);
}
.pw-toggle:hover{ color:var(--ink); }
.pw-toggle svg{ width:18px; height:18px; }
.pw-toggle.active{ color:var(--accent); }

.file-input-row{
  position:relative; display:flex; align-items:center; gap:8px; border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:10px 14px; cursor:pointer; background:var(--paper);
  transition:border-color var(--dur) var(--ease);
}
.file-input-row:hover{ border-color:var(--ink); }
.file-input-row svg{ width:17px; height:17px; stroke:var(--muted); flex-shrink:0; }
.file-input-name{ flex:1; font-size:13px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-input-btn{ font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap; }
.file-input-hidden{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

.file-icon-btn{
  position:relative; width:34px; height:34px; flex-shrink:0; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer;
  color:var(--muted); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.file-icon-btn:hover{ color:var(--ink); border-color:var(--ink); }
.file-icon-btn svg{ width:16px; height:16px; }
.file-icon-btn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row-4{ grid-template-columns:repeat(4,1fr); align-items:end; }
.field-row-4 .field label{ min-height:34px; display:flex; align-items:flex-end; }
@media (max-width:900px){ .field-row-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.radio-card{ display:flex; gap:12px; align-items:flex-start; padding:16px; border:1px solid var(--line-strong); border-radius:var(--radius-lg); cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); margin-bottom:12px; }
.radio-card:hover{ border-color:var(--ink); }
.radio-card.checked{ border-color:var(--dark); background:var(--bg-soft); }
.radio-card input{ margin-top:3px; }
.radio-card .rc-title{ font-weight:700; font-size:14px; margin-bottom:2px; }
.radio-card .rc-desc{ font-size:12.5px; color:var(--muted); }

.auth-shell{ max-width:420px; margin:0 auto; }
.auth-shell .card{ padding:36px 32px; }
.auth-tabs{ display:flex; border-bottom:1px solid var(--line); margin-bottom:26px; }
.auth-tabs a{ flex:1; text-align:center; padding:0 0 14px; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.auth-tabs a.active{ color:var(--ink); border-color:var(--ink); }
.demo-hint{ background:var(--bg-soft); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:12px 14px; font-size:12px; color:var(--ink-soft); margin-top:18px; line-height:1.6; }
.demo-hint b{ color:var(--ink); }

/* ---------- alerts / toast ---------- */
.alert{ padding:12px 16px; border-radius:var(--radius); font-size:13px; margin-bottom:16px; }
.alert-ok{ background:#e7ede3; color:#3f5a3f; }
.alert-err{ background:#f2dfdb; color:#7c3225; }
.toast-wrap{ position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  background:var(--dark); color:#fff; padding:14px 18px; border-radius:var(--radius); font-size:13px;
  box-shadow:var(--shadow-lg); max-width:320px; display:flex; gap:10px; align-items:flex-start;
  transform:translateX(120%); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast b{ display:block; margin-bottom:2px; }
.toast small{ color:#c9c1b5; }

/* ---------- cart ---------- */
.cart-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:32px; align-items:start; }
@media (max-width:920px){ .cart-layout{ grid-template-columns:1fr; } }
.cart-row{ display:grid; grid-template-columns:84px 1fr auto auto auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-row img{ width:84px; height:84px; object-fit:cover; border-radius:var(--radius); }
.cart-row .cname{ font-weight:600; font-size:14px; margin-bottom:3px; }
.cart-row .ccat{ font-size:12px; color:var(--muted); }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; }
.qty-stepper button{ width:28px; height:28px; background:none; border:none; font-size:15px; }
.qty-stepper button:hover{ background:var(--bg-soft); }
.qty-stepper span{ width:26px; text-align:center; font-size:13px; }
.remove-btn{ color:var(--muted); font-size:12px; text-decoration:underline; }
.remove-btn:hover{ color:var(--danger); }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; color:var(--ink-soft); }
.summary-row.total{ font-size:17px; font-weight:700; color:var(--ink); border-top:1px solid var(--line); margin-top:8px; padding-top:16px; }
.empty-state{ text-align:center; padding:80px 20px; color:var(--muted); }
.empty-state h3{ color:var(--ink); font-size:20px; margin:14px 0 8px; }

/* ---------- account / dashboards ---------- */
.dash-shell{ display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:start; }
@media (max-width:820px){ .dash-shell{ grid-template-columns:1fr; } }
.dash-nav{ position:sticky; top:96px; }
.dash-nav .who{ padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.dash-nav .who b{ display:block; font-size:15px; }
.dash-nav .who span{ font-size:12px; color:var(--muted); }
.dash-nav a{ display:block; padding:10px 12px; border-radius:var(--radius); font-size:13px; color:var(--ink-soft); margin-bottom:2px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dash-nav a:hover{ background:var(--bg-soft); color:var(--ink); }
.dash-nav a.active{ background:var(--dark); color:#fff; }
.dash-panel{ display:none; }
.dash-panel.active{ display:block; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
@media (max-width:860px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
.kpi{ padding:20px 20px; }
.kpi .eyebrow{ margin-bottom:10px; }
.kpi .kpi-val{ font-family:var(--font-display); font-size:30px; }
.kpi .kpi-sub{ font-size:12px; color:var(--muted); margin-top:6px; }

.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line-strong); font-weight:700; }
.data-table td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:hover td{ background:var(--bg-soft); }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); }
.table-wrap .data-table{ min-width:640px; }
.mini-input{ width:64px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--radius); text-align:center; }

.bar-chart{ display:flex; align-items:flex-end; gap:10px; height:180px; padding:10px 4px 0; }
.bar-chart .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-chart .bar{ width:100%; max-width:38px; background:var(--dark); border-radius:3px 3px 0 0; transition:height .8s var(--ease), background var(--dur) var(--ease); }
.bar-chart .bar-col:hover .bar{ background:var(--accent); }
.bar-chart .bar-label{ font-size:10.5px; color:var(--muted); margin-top:8px; text-align:center; }
.bar-chart .bar-val{ font-size:11px; font-weight:700; margin-bottom:4px; }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.panel-head h2{ font-size:22px; }
.two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.timeline{ border-left:2px solid var(--line-strong); padding-left:18px; margin-left:6px; }
.timeline-item{ position:relative; padding-bottom:18px; }
.timeline-item::before{ content:""; position:absolute; left:-23px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--dark); }
.timeline-item .t-title{ font-size:13.5px; font-weight:600; }
.timeline-item .t-time{ font-size:11.5px; color:var(--muted); }

/* ---------- footer ---------- */
.site-footer{ background:var(--dark); color:#cfc8bc; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; padding-block:60px 36px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-family:var(--font-body); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-weight:700; }
.footer-grid li{ margin-bottom:10px; font-size:13px; }
.footer-grid a:hover{ color:#fff; }
.footer-brand{ font-family:var(--font-display); font-size:22px; color:#fff; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.footer-note{ font-size:12.5px; color:#a39a8c; max-width:34ch; line-height:1.7; }
.newsletter{ display:flex; margin-top:14px; border:1px solid #453f37; border-radius:var(--radius); overflow:hidden; }
.newsletter input{ flex:1; background:transparent; border:none; padding:11px 12px; color:#fff; font-size:12.5px; }
.newsletter input::placeholder{ color:#8f8578; }
.newsletter button{ background:#fff; color:var(--dark); border:none; padding:0 16px; font-size:12px; font-weight:700; text-transform:uppercase; }
.footer-bottom{ border-top:1px solid #3a352e; padding-block:18px; display:flex; justify-content:space-between; font-size:11.5px; color:#8f8578; flex-wrap:wrap; gap:8px; }

/* ---------- chatbot ---------- */
.chat-toggle{
  position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
  background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); z-index:150; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chat-toggle:hover{ transform:scale(1.06); background:var(--dark-soft); }
.chat-toggle svg{ width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.6; }
.chat-dot{ position:absolute; top:4px; right:4px; width:11px; height:11px; border-radius:50%; background:var(--ok); border:2px solid var(--dark); }
.chat-window{
  position:fixed; right:22px; bottom:92px; width:340px; max-height:min(520px,70vh); background:var(--paper);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:150; display:flex; flex-direction:column;
  overflow:hidden; opacity:0; transform:translateY(18px) scale(.98); pointer-events:none; transition:all var(--dur) var(--ease);
  border:1px solid var(--line);
}
.chat-window.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chat-head{ background:var(--dark); color:#fff; padding:16px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.chat-head b{ font-size:13.5px; display:block; }
.chat-head span{ font-size:11px; color:#b9b0a2; }
.chat-close{ background:none; border:none; color:#cfc8bc; font-size:15px; line-height:1; padding:2px 4px; flex-shrink:0; transition:color var(--dur) var(--ease); }
.chat-close:hover{ color:#fff; }
.chat-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.msg{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:13px; line-height:1.5; }
.msg-bot{ background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px; }
.msg-user{ background:var(--dark); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; background:var(--bg); }
.chat-suggest button{ font-size:11px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:14px; background:#fff; }
.chat-suggest button:hover{ border-color:var(--ink); }
.chat-input{ display:flex; border-top:1px solid var(--line); }
.chat-input input{ flex:1; border:none; padding:14px; font-size:13px; }
.chat-input input:focus{ outline:none; }
.chat-input button{ width:52px; background:var(--dark); color:#fff; border:none; }
.chat-input button:hover{ background:var(--dark-soft); }

/* ---------- reviews ---------- */
.review-form{ padding:26px; margin-bottom:26px; }
.review-form .field-row{ margin-bottom:0; }
.review-products{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.review-product-thumb{ width:44px; height:44px; border-radius:var(--radius); overflow:hidden; display:block; border:1px solid var(--line); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.review-product-thumb:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.review-product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .review-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.review-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.review-card .stars{ margin-bottom:14px; font-size:14px; }
.review-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:18px; }
.review-author{ display:flex; flex-direction:column; padding-top:14px; border-top:1px solid var(--line); }
.review-author b{ font-size:13.5px; }
.review-author span{ font-size:12px; color:var(--muted); }
.review-reply{ margin-top:14px; padding:14px 16px; background:var(--bg-soft); border-radius:var(--radius); }
.review-reply b{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); margin-bottom:6px; }
.review-reply p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.6; }

/* ---------- faq / contacts ---------- */
.faq-item{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.faq-item:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.faq-item b{ display:block; font-size:13.5px; margin-bottom:6px; }
.faq-item p{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.contact-tile{ display:flex; gap:14px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-tile:last-child{ border-bottom:none; }
.contact-tile .ci{ width:40px; height:40px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-tile .ci svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:1.6; }
.contact-tile b{ display:block; font-size:13.5px; margin-bottom:3px; }
.contact-tile span, .contact-tile a{ font-size:13px; color:var(--ink-soft); }

/* ---------- interiors gallery ---------- */
.interior-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:980px){ .interior-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .interior-grid{ grid-template-columns:1fr; } }
.interior-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.interior-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.interior-img{ aspect-ratio:4/3; overflow:hidden; }
.interior-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.interior-card:hover .interior-img img{ transform:scale(1.06); }
.interior-info{ padding:20px; }
.interior-info h3{ font-size:16px; margin-bottom:8px; }
.interior-info p{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; line-height:1.6; }
.interior-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.interior-tags .chip{ padding:6px 12px; font-size:11.5px; }

/* ---------- misc ---------- */
.center-note{ text-align:center; color:var(--muted); font-size:13px; padding:40px 0; }
.divider{ height:1px; background:var(--line); margin:24px 0; }
.stars{ color:var(--accent); font-size:12px; letter-spacing:1px; }
.skeleton{ background:linear-gradient(90deg,var(--bg-soft) 25%,var(--line) 37%,var(--bg-soft) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:var(--radius); }
@keyframes sk{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.gallery-detail{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:860px){ .gallery-detail{ grid-template-columns:1fr; } }
.gallery-detail .main-img{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; }
.gallery-detail .main-img img{ width:100%; height:100%; object-fit:cover; }
.thumb-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.thumb-btn{ width:72px; height:72px; border-radius:var(--radius); overflow:hidden; border:2px solid transparent; opacity:.65; transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); padding:0; background:none; }
.thumb-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-btn:hover{ opacity:1; }
.thumb-btn.active{ opacity:1; border-color:var(--dark); }
.qty-row{ display:flex; align-items:center; gap:16px; margin:24px 0; }
.trust-row{ display:flex; gap:22px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
.trust-row div{ font-size:12px; color:var(--muted); max-width:18ch; }
.trust-row b{ display:block; color:var(--ink); font-size:13px; margin-bottom:2px; }

/* ---------- печать / выгрузка в PDF (панели администратора и руководителя) ---------- */
.print-header{ display:none; }
.panel-head .btn[data-print-btn]{ margin-left:auto; }
@media print{
  .demo-banner, .topbar, .site-header, .site-footer, .dash-nav, .chat-toggle, .chat-window,
  .page-banner .crumbs, .toast-wrap, [data-print-btn], [data-save-stock], [data-view-customer],
  #reviewForm, #toggleReviewForm { display:none !important; }
  .page-banner{ border-bottom:none; padding:0 0 10px; }
  .dash-shell{ display:block !important; }
  .dash-panel{ display:none !important; }
  .dash-panel.active{ display:block !important; }
  .print-header{ display:block !important; margin-bottom:18px; }
  .print-header .brand{ font-size:20px; }
  .print-header .meta{ font-size:11px; color:#555; margin-top:4px; }
  body{ background:#fff; }
  .card, .table-wrap{ box-shadow:none !important; border-color:#ccc !important; }
  a{ text-decoration:none; color:inherit; }
}