/* ==========================================================================
   Сванская соль — Приправа Цедра
   Structural rebuild
   -------------------
   The previous pass restyled the same skeleton every time (hero → USP strip
   → about → card-grid → specs table → steps → delivery → review-grid →
   order-wrap → FAQ, each its own full-bleed section). This version replaces
   that skeleton entirely with a product-detail layout: a single sticky
   purchase panel on the left, and one continuous editorial column on the
   right — description, a pulled quote, a marginal note, an inline
   checklist, a definition list, a short numbered list, a quote-style
   review strip and the contact form all live as part of one document
   instead of as N identical boxed sections.
   ========================================================================== */

:root{
  --salt:         #EFEEEA;
  --salt-2:        #E7E4DD;
  --charcoal:      #1C1B19;
  --charcoal-soft:   #625D57;
  --ember:        #C6381F;
  --ember-bright:    #DE4426;
  --ember-glow:     #F0785A;
  --salt-text:     #F1EFEA;
  --line:         rgba(28,27,25,0.16);
  --line-soft:      rgba(28,27,25,0.10);
  --line-on-dark:    rgba(241,239,234,0.18);

  --font-display: "Bricolage Grotesque", "Inter", sans-serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-num:     "Fragment Mono", "SFMono-Regular", Menlo, monospace;

  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 3.5rem;
  --container: 1220px;
  --col: 620px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--salt); color: var(--charcoal);
  font-family: var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd,dt,blockquote{ margin:0; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea{ font:inherit; }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); }
:focus-visible{ outline: 2px solid var(--ember); outline-offset:3px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
  padding: 0.95em 1.9em; font-weight:600; font-size:0.95rem; letter-spacing:0.01em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn--ember{ background: var(--ember); color: var(--salt-text); }
.btn--ember:hover{ background: var(--ember-bright); transform: translateY(-2px); }
.btn--outline{ border: 1.5px solid var(--charcoal); color: var(--charcoal); }
.btn--outline:hover{ background: var(--charcoal); color: var(--salt-text); }
.btn--wide{ width:100%; justify-content:center; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(239,238,234,0.92); backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--charcoal);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding: 0.9rem 0; }
.logo{ display:flex; align-items:center; gap:0.7rem; font-family: var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-0.01em; }
.logo svg{ width:22px; height:22px; color: var(--ember); }
.logo .sub{ font-family: var(--font-body); font-size:0.66rem; color: var(--charcoal-soft); display:block; margin-top:1px; font-weight:500; }
.nav-links{ display:flex; gap: 1.7rem; font-size:0.88rem; }
.nav-links a{ color: var(--charcoal-soft); transition: color .15s; }
.nav-links a:hover{ color: var(--ember); }
.header-phone{ font-family: var(--font-num); font-size:0.84rem; white-space:nowrap; }
@media (max-width:960px){ .nav-links{ display:none; } }
@media (max-width:700px){ .header-phone{ display:none; } }

/* ==========================================================================
   PDP layout: sticky panel + article column
   ========================================================================== */
.pdp{ padding: clamp(2rem,5vw,3.4rem) 0 var(--gap-lg); }
.pdp .container{ display:grid; grid-template-columns: 340px 1fr; gap: var(--gap-lg); align-items:start; }

.product-panel{ position: sticky; top: 5.6rem; }
.product-mark{
  width:100%; aspect-ratio: 4/3; border: 1.5px solid var(--charcoal); background: var(--salt-2);
  overflow:hidden; margin-bottom:1.4rem;
}
.product-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-mark img.is-placeholder{ object-fit:contain; padding:1.2rem; }
.product-panel h1{
  font-family: var(--font-display); font-weight:700; letter-spacing:-0.02em;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height:1.05; margin-bottom:0.5rem;
}
.product-tagline{ font-size:0.92rem; color: var(--charcoal-soft); margin-bottom:1rem; }
.product-badges{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-bottom:1.3rem; }
.product-badges span{ font-size:0.74rem; border:1px solid var(--line); padding:0.3em 0.7em; color: var(--charcoal-soft); }

.panel-divider{ height:1.5px; background: var(--charcoal); margin: 1.2rem 0; }

.price-line{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.1rem; }
.price-line .amount{ font-family: var(--font-num); font-size:1.5rem; font-weight:700; }
.price-line .per{ font-size:0.78rem; color: var(--charcoal-soft); }

.qty-row{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.9rem; }
.qty-row button{
  width:34px; height:34px; border:1.5px solid var(--charcoal); font-size:1.05rem;
  display:flex; align-items:center; justify-content:center; transition: background .15s;
}
.qty-row button:hover{ background: var(--charcoal); color: var(--salt-text); }
.qty-row input{
  width:56px; text-align:center; background: var(--salt); border:1.5px solid var(--line);
  padding:0.5rem 0.2rem; font-family: var(--font-num);
}
.qty-row .unit{ font-size:0.8rem; color: var(--charcoal-soft); }

.pack-row{ margin-bottom:1.2rem; }
.pack-row label{ display:block; font-size:0.76rem; color: var(--charcoal-soft); margin-bottom:0.4rem; }
.pack-row select{
  width:100%; background: var(--salt); color: var(--charcoal); border:1.5px solid var(--line);
  padding: 0.7em 0.85em;
}

.total-line{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.2rem; }
.total-line .val{ font-family: var(--font-display); font-weight:700; font-size:1.35rem; color: var(--ember); }
.panel-note{ font-size:0.76rem; color: var(--charcoal-soft); margin-top:0.9rem; }

@media (max-width:960px){
  .pdp .container{ grid-template-columns: 1fr; }
  .product-panel{ position: static; max-width: 420px; }
}

/* ==========================================================================
   Article column — one continuous document, no repeated section chrome
   ========================================================================== */
.article{ max-width: var(--col); }
.article > * + *{ margin-top: var(--gap-md); }

.lede-open{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.3rem,2.2vw,1.6rem); line-height:1.35; letter-spacing:-0.01em; }
.lede-open em{ font-style:normal; color: var(--ember); }

.pull{
  font-family: var(--font-display); font-weight:600; font-size: clamp(1.5rem,2.8vw,2rem);
  line-height:1.2; letter-spacing:-0.02em; padding-left:1.2rem; border-left: 3px solid var(--ember);
}

.margin-note{ border-left: 1.5px solid var(--line); padding-left:1.2rem; }
.margin-note .tag{ display:block; font-size:0.76rem; color: var(--charcoal-soft); margin-bottom:0.5rem; }
.margin-note p{ font-size:0.98rem; }

.article h3{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-0.01em; }
.article > h3{ margin-top: calc(var(--gap-lg)); }

.check-list li{ display:flex; gap:0.7rem; padding: 0.55rem 0; }
.check-list li::before{ content:"✔"; color: var(--ember); flex-shrink:0; font-size:0.85rem; margin-top:0.2rem; }
.check-list b{ font-weight:700; }

.spec-dl{ display:grid; grid-template-columns: 1fr 1fr; column-gap:1.5rem; row-gap:0; }
.spec-dl div{ display:flex; justify-content:space-between; gap:1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.spec-dl dt{ color: var(--charcoal-soft); font-size:0.92rem; }
.spec-dl dd{ font-family: var(--font-num); font-weight:600; font-size:0.88rem; text-align:right; }
@media (max-width:560px){ .spec-dl{ grid-template-columns: 1fr; } }

.mini-steps{ counter-reset: mstep; }
.mini-steps li{ counter-increment: mstep; display:flex; gap:1rem; padding: 0.7rem 0; border-top:1px solid var(--line); }
.mini-steps li:last-child{ border-bottom:1px solid var(--line); }
.mini-steps li::before{
  content: counter(mstep); font-family: var(--font-num); font-weight:700; color: var(--ember);
  flex-shrink:0; width:1.4em;
}
.mini-steps b{ display:block; font-size:0.98rem; }
.mini-steps span{ font-size:0.88rem; color: var(--charcoal-soft); }

.deliver-row{ display:flex; gap:0.8rem; align-items:flex-start; padding:0.6rem 0; }
.deliver-row svg{ width:17px; height:17px; color: var(--ember); flex-shrink:0; margin-top:3px; }
.deliver-row b{ display:block; font-size:0.95rem; }
.deliver-row span{ font-size:0.86rem; color: var(--charcoal-soft); }

.quote-strip blockquote{ padding: 1.1rem 0; border-top: 1px solid var(--line); }
.quote-strip blockquote:last-child{ border-bottom: 1px solid var(--line); }
.quote-strip p{ font-size:0.98rem; line-height:1.55; }
.quote-strip cite{ display:block; margin-top:0.6rem; font-style:normal; font-size:0.8rem; color: var(--charcoal-soft); }
.rating-line{ font-family: var(--font-display); font-weight:700; font-size:1.7rem; display:flex; align-items:baseline; gap:0.6rem; }
.rating-line span{ font-family: var(--font-body); font-weight:500; font-size:0.85rem; color: var(--charcoal-soft); }

/* contact form — lives inline in the article, not as a mirrored aside+form pair */
.contact-form{ border-top: 1.5px solid var(--charcoal); padding-top: var(--gap-md); }
.field{ margin-bottom: 1.1rem; }
.field label{ display:block; font-size:0.8rem; font-weight:600; color: var(--charcoal-soft); margin-bottom:0.45rem; }
.field input, .field textarea{
  width:100%; background: var(--salt-2); color: var(--charcoal);
  border: 1.5px solid var(--line); padding: 0.8em 1em; transition: border-color .15s;
}
.field input:focus, .field textarea:focus{ border-color: var(--ember); }
.field textarea{ resize:vertical; min-height:80px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field-error{ color: var(--ember); font-size:0.78rem; margin-top:0.4rem; display:none; }
.field.invalid input{ border-color: var(--ember); }
.field.invalid .field-error{ display:block; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  cursor:pointer; padding: 1.1rem 0; font-weight:600; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family: var(--font-num); color: var(--ember); font-size:1.2rem; flex-shrink:0; transition: transform .2s; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-a{ padding-bottom:1.1rem; color: var(--charcoal-soft); font-size:0.94rem; }

/* ==========================================================================
   Footer — a single compact row, not a 4-column mirror of the header
   ========================================================================== */
.site-footer{ background: var(--charcoal); color: var(--salt-text); margin-top: var(--gap-lg); }
.site-footer .container{ padding: var(--gap-md) clamp(1.25rem,4vw,2.5rem); display:flex; justify-content:space-between; gap: var(--gap-md); flex-wrap:wrap; }
.footer-brand{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; max-width:26ch; }
.footer-brand p{ font-family: var(--font-body); font-weight:400; font-size:0.85rem; color: rgba(241,239,234,0.68); margin-top:0.5rem; }
.footer-contact{ font-size:0.86rem; color: rgba(241,239,234,0.85); text-align:right; }
.footer-contact div{ margin-bottom:0.35rem; }
.footer-contact div:last-child{ margin-bottom:0; }
@media (max-width:700px){ .footer-contact{ text-align:left; } }

.toast{
  position: fixed; top:1.2rem; right:1.2rem; z-index:80;
  background: var(--charcoal); color: var(--salt-text);
  padding: 0.9rem 1.2rem; font-size:0.88rem; max-width:320px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transform: translateY(-10px); opacity:0; pointer-events:none; transition: opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:none; }

/* ==========================================================================
   Попапы «Политика конфиденциальности» / «Согласие на обработку данных»
   ========================================================================== */
.legal-modal{ position:fixed; inset:0; z-index:90; display:none; }
.legal-modal.open{ display:block; }
.legal-modal .legal-backdrop{ position:absolute; inset:0; background: rgba(28,27,25,0.55); backdrop-filter: blur(2px); }
.legal-modal .legal-box{
  position:relative; max-width:620px; width: calc(100% - 2rem); margin: 6vh auto 0;
  max-height:85vh; overflow-y:auto; background: var(--salt); border: 1.5px solid var(--charcoal);
  padding: clamp(1.5rem,4vw,2.4rem); box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.legal-box h3{ font-family: var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:-0.01em; margin-bottom:1rem; }
.legal-box h4{ font-weight:600; font-size:0.86rem; color: var(--ember); margin-top:1.1rem; margin-bottom:0.4rem; }
.legal-box p{ font-size:0.88rem; color: var(--charcoal-soft); line-height:1.6; margin-bottom:0.6rem; }
.legal-box .legal-close{
  position:absolute; top:1rem; right:1rem; width:32px; height:32px; border:1.5px solid var(--charcoal);
  display:flex; align-items:center; justify-content:center; background: var(--salt); color: var(--charcoal);
  font-size:1rem; line-height:1; cursor:pointer; transition: background .15s, color .15s;
}
.legal-box .legal-close:hover{ background: var(--charcoal); color: var(--salt-text); }
.legal-box .legal-ok{ margin-top:0.6rem; }

/* чекбокс согласия в форме заказа */
.field-consent label{
  display:flex; align-items:flex-start; gap:0.6rem; font-size:0.8rem; color: var(--charcoal-soft);
  font-weight:400; cursor:pointer; line-height:1.5;
}
.field-consent input[type="checkbox"]{ margin-top:0.2rem; width:16px; height:16px; flex-shrink:0; accent-color: var(--ember); }
.field-consent a{ color: var(--charcoal); text-decoration: underline; }
.field-consent a:hover{ color: var(--ember); }
.field-consent.invalid label{ color: var(--ember); }

/* the one deliberate motion moment on the page */
.product-panel{ animation: panelIn 0.7s cubic-bezier(.16,.84,.44,1) both; }
.article{ animation: panelIn 0.7s cubic-bezier(.16,.84,.44,1) both 0.1s; }
@keyframes panelIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }