/* «Примерка на бренд» — блок #fit (app/views/site/proto/_fitting.php, логика — fit.js). */

.fit-grid{ margin-top:32px; display:grid; gap:20px 28px; align-items:start;
  grid-template-columns:minmax(0,360px) minmax(0,1fr); grid-template-rows:auto 1fr;
  grid-template-areas:"controls preview" "list preview"; }
.fit-controls{ grid-area:controls; }
.fit-list{ grid-area:list; }
.fit-preview{ grid-area:preview; }
@media (max-width: 900px){
  .fit-grid{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"controls" "preview" "list"; }
}

/* --- левая панель -------------------------------------------------------- */
.fit-panel{ min-width:0; display:flex; flex-direction:column; gap:22px;
  background:#fff; border:1px solid var(--blush-2); border-radius:24px; padding:24px; box-sizing:border-box; }
.fit-step{ display:flex; flex-direction:column; gap:10px; }
.fit-step-title{ margin:0; font-weight:700; font-size:15px; color:var(--ink); }
.fit-hint{ margin:0; font-size:13px; color:var(--muted); }

.fit-color-row{ display:flex; gap:14px; align-items:center; }
.fit-picker{ width:64px; height:64px; flex:none; border-radius:16px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); cursor:pointer; }
.fit-picker input{ -webkit-appearance:none; appearance:none; border:0; padding:0; width:64px; height:64px; background:none; cursor:pointer; display:block; }
.fit-picker input::-webkit-color-swatch-wrapper{ padding:0; }
.fit-picker input::-webkit-color-swatch{ border:0; }
.fit-picker input::-moz-color-swatch{ border:0; }
.fit-hex{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.fit-hex label{ font-size:13px; color:var(--muted); }
.fit-hex input,.fit-input{ height:44px; width:100%; box-sizing:border-box; border:1px solid #DCCFC2; border-radius:12px; padding:0 14px;
  font:600 16px/1 inherit; font-family:inherit; color:var(--ink); background:#fff; }
.fit-hex input{ letter-spacing:.04em; text-transform:uppercase; }
.fit-hex input[aria-invalid="true"]{ border-color:var(--rose); }
.fit-input{ font-weight:500; }

.fit-presets{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.fit-preset{ aspect-ratio:1; min-height:44px; border:0; border-radius:12px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.fit-preset[aria-pressed="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink); }

.fit-seg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--blush); border-radius:14px; padding:4px; }
.fit-mode{ min-height:44px; border:0; border-radius:11px; cursor:pointer; font:600 15px/1 inherit; font-family:inherit; background:transparent; color:var(--muted); }
.fit-mode[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(27,23,38,.15); }

.fit-cats{ display:flex; flex-direction:column; gap:8px; }
.fit-cat{ display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; cursor:pointer; padding:12px 14px; border:0; border-radius:14px;
  background:#fff; box-shadow:inset 0 0 0 1px var(--blush-2); color:var(--ink); font-family:inherit; }
.fit-cat[aria-pressed="true"]{ background:#FBF2F4; box-shadow:inset 0 0 0 2px var(--rose); }
.fit-cat-top{ display:flex; align-items:center; gap:10px; }
.fit-cat-top b{ flex:1; font-size:15px; }
.fit-cat-sw{ display:flex; flex:none; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.fit-cat-sw i{ display:block; width:12px; height:22px; }
.fit-chip{ flex:none; font-size:12px; font-weight:700; padding:5px 9px; border-radius:999px; }
.fit-chip[data-score="3"]{ background:#DCEBD8; color:#23552E; }
.fit-chip[data-score="2"]{ background:#F4E6CC; color:#6E4A0E; }
.fit-chip[data-score="1"]{ background:#F6DCE1; color:#8A2238; }
.fit-why{ font-size:13px; line-height:1.45; color:var(--muted); }

/* --- витрина магазина клиента: цвета задаёт fit.js через --s-* --------------- */
.fit-preview{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.fit-browser{ border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -30px rgba(27,23,38,.35), 0 0 0 1px rgba(27,23,38,.08); }
.fit-bar{ height:40px; background:#ECE7E1; display:flex; align-items:center; gap:8px; padding:0 16px; }
.fit-bar i{ width:11px; height:11px; border-radius:50%; background:#E0796B; }
.fit-bar i:nth-child(2){ background:#E4B95B; } .fit-bar i:nth-child(3){ background:#7DB86A; }
.fit-bar span{ margin-left:14px; flex:1; max-width:360px; height:24px; border-radius:8px; background:#fff; font-size:12px; color:#6A6175; display:flex; align-items:center; padding:0 12px; }

.fit-shop{
  --s-bg:#FDF9FA; --s-surface:#fff; --s-soft:#F6E1E7; --s-ink:#1C1618; --s-muted:#5E5458; --s-line:#E8DCE0;
  --s-btn:#B23A5B; --s-btn-ink:#fff; --s-accent:#B23A5B; --s-accent-soft:#9C2F4E;
  background:var(--s-bg); color:var(--s-ink); padding:0 28px 30px; display:flex; flex-direction:column; gap:24px;
  font-family:'Golos Text', system-ui, sans-serif; transition:background-color .2s, color .2s;
}
.fit-shop-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:18px 0; border-bottom:1px solid var(--s-line); }
.fit-logo{ font:700 18px/1.2 var(--display); color:var(--s-accent); }
.fit-nav{ display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }
.fit-nav b{ color:var(--s-accent); box-shadow:inset 0 -2px 0 var(--s-accent); padding-bottom:3px; }
.fit-btn{ display:inline-flex; align-items:center; min-height:46px; padding:0 20px; border-radius:12px; background:var(--s-btn); color:var(--s-btn-ink);
  font-weight:700; font-size:15px; white-space:nowrap; transition:background-color .2s, color .2s; }
.fit-btn--sm{ min-height:36px; padding:0 12px; border-radius:10px; font-size:13px; font-weight:600; }
.fit-btn--ghost{ background:transparent; color:var(--s-accent-soft); box-shadow:inset 0 0 0 1.5px var(--s-accent-soft); font-weight:600; }

.fit-view{ display:flex; flex-direction:column; gap:24px; }
.fit-view[hidden]{ display:none; }
.fit-hero{ display:flex; flex-wrap:wrap; gap:28px; background:var(--s-soft); border-radius:20px; padding:28px; }
.fit-hero-text{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.fit-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--s-accent-soft); }
.fit-hero-title{ font:600 clamp(22px,2.4vw,30px)/1.15 var(--display); color:var(--s-ink); }
.fit-hero-sub{ font-size:15px; line-height:1.5; color:var(--s-muted); }
.fit-hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.fit-hero-img{ flex:1 1 240px; min-width:0; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; }

.fit-row-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.fit-h3{ font:600 20px/1.2 var(--display); color:var(--s-ink); }
.fit-link{ color:var(--s-accent); font-weight:600; font-size:14px; text-decoration:underline; }
.fit-products{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.fit-card{ display:flex; flex-direction:column; gap:10px; background:var(--s-surface); border:1px solid var(--s-line); border-radius:16px; padding:10px 10px 12px; }
.fit-card img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:12px; display:block; }
.fit-card-name{ font-size:14px; line-height:1.35; font-weight:500; min-height:38px; }
.fit-card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fit-card-foot b{ font-size:16px; }

/* --- призыв под витриной ---------------------------------------------------- */
.fit-cta{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; background:var(--ink); color:var(--paper); border-radius:20px; padding:20px 24px; }
.fit-cta-text{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fit-cta-text b{ font-size:17px; }
.fit-cta-text > span{ font-size:14px; color:#CFC7DA; }
.fit-cat-hex{ font-weight:700; color:var(--paper); }
.fit-note{ margin:0; font-size:13px; color:var(--muted); }

@media (max-width: 900px){
  .fit-products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px){
  .fit-shop{ padding:0 14px 20px; gap:18px; }
  .fit-hero{ padding:18px; gap:18px; }
  .fit-nav{ display:none; }
  .fit-products{ gap:10px; }
  .fit-card-name{ font-size:13px; }
  .fit-btn--sm{ padding:0 10px; }
  .fit-panel{ padding:18px; }
}

/* палитра-спектр: по горизонтали оттенок, по вертикали светлота; ползунок — насыщенность */
.fit-spectrum{ position:relative; height:150px; border-radius:14px; cursor:crosshair; touch-action:none; outline:none;
  --sat:60%;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, #000 100%),
    linear-gradient(90deg, hsl(0,var(--sat),50%), hsl(30,var(--sat),50%), hsl(60,var(--sat),50%), hsl(90,var(--sat),50%), hsl(120,var(--sat),50%), hsl(150,var(--sat),50%), hsl(180,var(--sat),50%), hsl(210,var(--sat),50%), hsl(240,var(--sat),50%), hsl(270,var(--sat),50%), hsl(300,var(--sat),50%), hsl(330,var(--sat),50%), hsl(360,var(--sat),50%));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.fit-spectrum:focus-visible{ box-shadow:0 0 0 3px rgba(178,58,91,.35); }
.fit-spectrum-dot{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.25); pointer-events:none; left:0; top:0; }
.fit-sat{ width:100%; margin:4px 0 0; accent-color:#1B1726; }
.fit-sat-label{ display:block; margin-top:2px; }