/* Коробка — дизайн-токени (з дизайн-системи 093b1cdd) + стилі сторінки */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap&subset=cyrillic');

:root {
  /* Neutrals — теплий near-white → near-black */
  --k-white: #FFFFFF;
  --k-paper: #FAF8F1;
  --k-cream: #F5F1E4;
  --k-sand: #EDE7D6;
  --k-stone: #D2CAB2;
  --k-fog: #8A8371;
  --k-mist: #454033;
  --k-black: #1A1712;

  /* Brand accent — «Жовтий Коробки» (заливки) */
  --k-yellow: #FFD64D;
  --k-yellow-hot: #FFCB24;
  --k-yellow-deep: #EFB80A;
  --k-yellow-dim: rgba(247, 214, 78, 0.30);
  /* Акцент для ТЕКСТУ (ціни, посилання) */
  --k-amber: #62DBA6;

  /* Secondary accent — техно-мітки */
  --k-blue: #AC90E5;
  --k-blue-dim: rgba(172, 144, 229, 0.14);

  /* Semantic */
  --k-success: #57B58C;
  --k-warning: #EFB80A;
  --k-danger: #DA5F5F;
  --k-success-dim: #F0FFF9;
  --k-warning-dim: rgba(239, 184, 10, 0.14);
  --k-danger-dim: #FFF7F7;

  --text-muted: var(--k-fog);
  --border-subtle: #E7E1CF;
  --border-strong: var(--k-stone);
  --border-focus: var(--k-yellow-deep);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-hero: 800 clamp(40px, 5vw, 64px)/1.05 var(--font-display);
  --text-h1: 700 40px/1.1 var(--font-display);
  --text-h2: 700 28px/1.15 var(--font-display);
  --text-h3: 600 20px/1.25 var(--font-display);
  --text-body-lg: 500 18px/1.6 var(--font-body);
  --text-body-md: 500 15px/1.6 var(--font-body);
  --text-body-sm: 500 13px/1.5 var(--font-body);
  --text-spec: 500 13px/1.7 var(--font-mono);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(26,23,18,0.05), 0 8px 24px rgba(26,23,18,0.07);
  --glow-primary: 0 0 0 1px rgba(239,184,10,0.7), 0 4px 20px rgba(255,203,36,0.45);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--k-paper);
  color: var(--k-mist);
  font: var(--text-body-md);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--k-amber); text-decoration: none; }
a:hover { color: var(--k-black); }
::selection { background: var(--k-yellow); color: var(--k-black); }
img { max-width: 100%; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,248,241,.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .bar { height: 64px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.brand img { width: 32px; height: 32px; }
.brand span { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .04em; color: var(--k-black); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.site-nav a { font: 700 12px/1 var(--font-body); letter-spacing: .08em; color: var(--k-mist); cursor: pointer; }
.site-nav a:hover { color: var(--k-black); }

/* ===== Buttons (core/Button) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: 800 15px/1 var(--font-body); letter-spacing: .02em; color: var(--k-black);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background 120ms, border-color 120ms, box-shadow 200ms var(--ease-out), transform 120ms;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--k-white), 0 0 0 4px var(--k-yellow-deep); }
.btn--md { height: 44px; padding: 0 20px; }
.btn--lg { height: 54px; padding: 0 24px; }
.btn--primary { background: var(--k-yellow); }
.btn--primary:hover { background: var(--k-yellow-hot); box-shadow: var(--glow-primary); }
.btn--primary:active { background: var(--k-yellow-deep); }
.btn--secondary { background: var(--k-cream); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--k-sand); }
.btn--full { width: 100%; font-size: 13px; padding: 0 12px; }

/* ===== Labels / chips ===== */
.caps { font: 700 12px/1 var(--font-body); letter-spacing: .08em; color: var(--k-black); }
.series-label { font: 700 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--k-blue); }
.chip { font: 700 11px/1 var(--font-mono); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; }
.chip--blue { background: var(--k-blue-dim); color: var(--k-blue); }

/* ===== Home ===== */
.hero { padding: 72px 24px 48px; text-align: center; }
.hero .eyebrow {
  display: inline-flex; padding: 6px 14px; border-radius: 999px;
  background: var(--k-blue-dim); color: var(--k-blue);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; margin-bottom: 24px;
}
.hero h1 { font: var(--text-hero); color: var(--k-black); margin: 0 0 20px; text-wrap: balance; }
.hero p { font: var(--text-body-lg); color: var(--k-mist); max-width: 560px; margin: 0 auto; }

.model-grid {
  padding-bottom: 96px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;
}
.model-card {
  background: var(--k-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; cursor: pointer;
  transition: transform 200ms var(--ease-out), border-color 120ms, box-shadow 200ms;
}
.model-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.model-card .card-top { display: flex; align-items: center; justify-content: space-between; }
.model-card .photo { height: 280px; display: flex; align-items: center; justify-content: center; }
.model-card .photo img {
  max-height: 100%; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 24px 32px rgba(26,23,18,.18));
  transition: transform 200ms var(--ease-out);
}
.model-card:hover .photo img { transform: scale(1.04); }
.model-card h2 { font: var(--text-h3); color: var(--k-black); margin: 0 0 6px; }
.model-card .oneliner { font: var(--text-body-sm); color: var(--text-muted); margin: 0; }
.spec-grid {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px;
  font: var(--text-spec); border-top: 1px solid var(--border-subtle); padding-top: 16px;
}
.spec-grid .k { color: var(--text-muted); }
.spec-grid .v { text-align: right; color: var(--k-mist); }
.model-card .card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.price-from { font: 500 12px/1.2 var(--font-body); color: var(--text-muted); }
.price-value { font: 700 24px/1.1 var(--font-display); color: var(--k-black); }

/* ===== Breadcrumb ===== */
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.crumbs a { font: 600 13px/1 var(--font-body); color: var(--k-amber); cursor: pointer; }
.crumbs a:hover { color: var(--k-black); }
.crumbs .sep { color: var(--text-muted); }
.crumbs .here { font: 600 13px/1 var(--font-body); color: var(--text-muted); }

/* ===== Page headers (legal/info) ===== */
.page-head { margin-bottom: 40px; }
.page-head h1 { font: var(--text-h1); color: var(--k-black); margin: 12px 0; text-wrap: balance; }
.page-head p { font: var(--text-body-md); color: var(--text-muted); margin: 0; max-width: 640px; }

/* ===== Configurator ===== */
.config-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 48px; align-items: start; }
.gallery { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.gallery-main {
  background: var(--k-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 40px; height: 520px; display: flex; align-items: center; justify-content: center;
}
.gallery-main img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 24px 32px rgba(26,23,18,.18)); }
.thumbs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.thumb {
  width: 72px; height: 72px; border-radius: var(--radius-md); background: var(--k-white);
  border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center;
  padding: 8px; cursor: pointer; transition: border-color 120ms;
}
.thumb.on { border: 2px solid var(--k-yellow-deep); padding: 7px; }
.thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }

.fps-card { background: var(--k-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px 28px; }
.fps-card .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.fps-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 2px; }
.fps-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border-subtle); }
.fps-row .game { font: var(--text-body-sm); color: var(--k-mist); }
.fps-row .range { font: 600 13px/1 var(--font-mono); color: var(--k-black); white-space: nowrap; }
.fps-note { font: 500 12px/1.5 var(--font-body); color: var(--text-muted); margin: 12px 0 0; }

.config-right { display: flex; flex-direction: column; gap: 32px; }
.config-right .title h1 { font: var(--text-h1); color: var(--k-black); margin: 8px 0 10px; }
.config-right .title p { font: var(--text-body-md); color: var(--k-mist); margin: 0; }

.group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.group-head h3 { font: var(--text-h3); color: var(--k-black); margin: 0; }
.group-head .sub { font: 600 12px/1 var(--font-mono); color: var(--text-muted); }
.group-hint { font: var(--text-body-sm); color: var(--text-muted); margin: 0 0 14px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--k-white); border: 1px solid var(--border-subtle); cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.option:hover { border-color: var(--border-strong); }
.option .dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); background: var(--k-white); transition: all 120ms;
}
.option.on { background: var(--k-cream); border: 2px solid var(--k-yellow-deep); padding: 15px 17px; }
.option.on .dot { border: 6px solid var(--k-yellow-deep); }
.option .opt-main { flex: 1; min-width: 0; }
.option .opt-label { font: 700 15px/1.3 var(--font-body); color: var(--k-black); }
.option .opt-sub { font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); }
.option .opt-delta { font: 600 14px/1 var(--font-mono); color: var(--k-black); white-space: nowrap; }
.option .opt-delta.incl { color: var(--text-muted); }

.why-card { background: var(--k-cream); border-radius: var(--radius-lg); padding: 24px 28px; }
.why-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.check-row { display: flex; gap: 10px; }
.check-row .tick { color: var(--k-success); font-weight: 800; flex: none; }
.check-row p { font: var(--text-body-sm); color: var(--k-mist); margin: 0; }
.check-row strong { color: var(--k-black); }

.economy-card { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 24px 28px; }
.economy-card .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.economy-card .lbl { font: 500 12px/1.3 var(--font-body); color: var(--text-muted); }
.economy-card .old { font: 500 20px/1.2 var(--font-display); color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--k-danger); }
.economy-card .new { font: 700 20px/1.2 var(--font-display); color: var(--k-amber); }
.economy-card .txt { font: var(--text-body-sm); color: var(--k-mist); margin: 0; }

.cta-card {
  background: var(--k-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-card);
}
.cta-card .total-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cta-card .total-lbl { font: 600 13px/1 var(--font-body); color: var(--text-muted); }
.cta-card .total { font: 700 34px/1 var(--font-display); color: var(--k-black); }
.cta-card .permonth { font: 600 12px/1.6 var(--font-body); color: var(--k-blue); }
.cta-card .cta-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cta-card .fine { font: 500 12px/1.5 var(--font-body); color: var(--text-muted); margin: 0; text-align: center; }

/* ===== Info cards (delivery / contacts / warranty) ===== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.cards-grid.stretch { align-items: stretch; }
.info-card {
  background: var(--k-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 28px 32px; display: flex; flex-direction: column; gap: 16px;
}
.soft-card { background: var(--k-cream); border-radius: var(--radius-lg); padding: 24px 28px; }
.dashed-card { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 24px 28px; }
.soft-note { background: var(--k-cream); border-radius: var(--radius-md); padding: 14px 16px; }
.blue-note { background: var(--k-blue-dim); border-radius: var(--radius-md); padding: 14px 16px; }
.danger-note { background: var(--k-danger-dim); border-radius: var(--radius-md); padding: 14px 16px; }
.soft-note p, .blue-note p, .danger-note p, .soft-card p, .dashed-card p { font: var(--text-body-sm); color: var(--k-mist); margin: 0; }
.soft-card p, .dashed-card p { margin-top: 12px; }

.mini-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px; }
.mini-card .t { font: 700 15px/1.3 var(--font-body); color: var(--k-black); }
.mini-card .d { font: var(--text-body-sm); color: var(--k-mist); }

.step-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--border-subtle); }
.num-badge {
  font: 700 13px/1 var(--font-display); color: var(--k-black); background: var(--k-yellow);
  border-radius: var(--radius-sm); padding: 6px 9px; flex: none; height: fit-content;
}
.step-row .t { font: 700 14px/1.3 var(--font-body); color: var(--k-black); }
.step-row .d { font: var(--text-body-sm); color: var(--k-mist); }

.kv .k { font: 500 12px/1.4 var(--font-body); color: var(--text-muted); }
.kv .v { font: 700 16px/1.4 var(--font-body); color: var(--k-black); }
.kv .v-mono { font: 600 14px/1.4 var(--font-mono); color: var(--k-mist); }
.kv .v-sm { font: var(--text-body-sm); color: var(--k-mist); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pill {
  font: 600 12px/1 var(--font-mono); padding: 8px 14px; border-radius: 999px;
  background: var(--k-cream); border: 1px solid var(--border-subtle); color: var(--k-mist); cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.pill:hover { border-color: var(--border-strong); color: var(--k-black); }

.hours-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 8px; font: var(--text-spec); }
.hours-grid .k { color: var(--text-muted); }
.hours-grid .v { text-align: right; color: var(--k-black); font-weight: 600; }

/* ===== Legal sections ===== */
.legal-list { display: flex; flex-direction: column; gap: 28px; }
.legal-section { background: var(--k-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px 32px; }
.legal-section .head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.legal-section .n { font: 700 14px/1 var(--font-display); color: var(--k-black); background: var(--k-yellow); border-radius: var(--radius-sm); padding: 6px 10px; flex: none; }
.legal-section h2 { font: var(--text-h3); color: var(--k-black); margin: 0; }
.legal-section .items { display: flex; flex-direction: column; gap: 10px; }
.legal-section .items p { font: var(--text-body-sm); color: var(--k-mist); margin: 0; }
.page-foot-note { font: 500 12px/1.6 var(--font-body); color: var(--text-muted); margin: 32px 0 0; text-align: center; }

/* ===== Warranty plans ===== */
.plan-card { gap: 16px; }
.plan-card .head { display: flex; align-items: center; justify-content: space-between; }
.plan-card .name { font: 700 20px/1.2 var(--font-display); color: var(--k-black); }
.plan-card .price { font: 600 13px/1.4 var(--font-mono); color: var(--k-amber); }
.plan-card .points { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-subtle); padding-top: 16px; }

/* ===== Footer ===== */
.site-footer { background: var(--k-white); border-top: 1px solid var(--border-subtle); margin-top: 0; }
.site-footer .inner { padding: 48px 24px 32px; display: flex; flex-direction: column; gap: 32px; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; justify-content: space-between; }
.site-footer .col { display: flex; flex-direction: column; gap: 12px; }
.site-footer .brand img { width: 28px; height: 28px; }
.site-footer .brand span { font-size: 14px; }
.site-footer .phone { font: 700 18px/1 var(--font-display); color: var(--k-black); }
.site-footer .phone:hover { color: var(--k-amber); }
.site-footer .muted { font: 500 12px/1.5 var(--font-body); color: var(--text-muted); }
.site-footer nav a { font: var(--text-body-sm); color: var(--k-mist); cursor: pointer; }
.site-footer nav a:hover { color: var(--k-black); }
.site-footer .pay-row { display: flex; align-items: center; gap: 16px; }
.site-footer .pay-row img.h44 { height: 44px; width: auto; }
.site-footer .pay-row img.h36 { height: 36px; width: auto; }
.site-footer .legal-row {
  border-top: 1px solid var(--border-subtle); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}

main { min-height: calc(100vh - 64px - 300px); }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .config-grid { grid-template-columns: 1fr; gap: 32px; }
  .gallery { position: static; }
  .gallery-main { height: 380px; padding: 24px; }
}
@media (max-width: 640px) {
  .hero { padding: 48px 16px 32px; }
  .page-head h1, .config-right .title h1 { font: 700 30px/1.15 var(--font-display); }
  .fps-rows { grid-template-columns: 1fr; }
  .economy-card .cols { grid-template-columns: 1fr; }
  .cta-card .cta-btns { grid-template-columns: 1fr; }
  .site-nav { gap: 14px; }
  .legal-section, .info-card { padding: 22px 20px; }
}
@media (max-width: 480px) {
  .site-header .brand span { display: none; }
}