:root{
  --page:#f5f6f8;
  --ink:#0f0f11;
  --muted:#6b6f76;
  --line:#e6e7ea;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 20px 40px rgba(15,15,17,.06);
  --gap:18px;
  font-family:'Merriweather',serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body.theme-light{background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased}

.wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* HEADER DARK */
.header-dark{background:#0f0f11;color:#fff;border-bottom:1px solid #1f1f22;position:sticky;top:0;z-index:100}
.header-row{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo-img.big{height:58px;width:auto;display:block}
.hdr-info{display:flex;flex-direction:column;gap:2px;align-items:flex-end;text-align:right}
.hdr-line{display:flex;align-items:center;gap:8px;color:#e7e9ec;font-weight:700;font-size:12.5px;opacity:.95}
.hdr-line .icon{font-size:14px}

/* HERO */
.page{padding-bottom:72px}
.hero{padding:26px 0 2px} /* чуть подвинул чтобы ровнее смотрелось */
.title{margin:6px 0 2px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:.2px}
.subtitle{margin:0 0 10px;color:#4b5056;font-size:14px}

/* GRID + CARDS */
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;
}
.card-lite{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px}

/* DATE BAR */
.date-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px dashed var(--line);border-radius:12px;background:#fff;padding:12px 14px;margin-bottom:12px;
}
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:10px;padding:12px 18px;text-align:center;transition:.15s ease}
.btn.solid{background:#0f0f11;color:#fff;border:1px solid #0f0f11}
.btn.solid:hover{filter:brightness(1.05)}
.btn.outline{background:#fff;border:1px solid #0f0f11;color:#0f0f11}
.btn.outline.sm{padding:8px 12px;border-radius:8px;font-size:12px}

/* CALENDAR */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-weight:800}
.cal-nav{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-week{color:#7a7f86;font-size:12px;margin-bottom:6px}
.cal-days button{
  width:100%;aspect-ratio:1/1;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;
  font-family:inherit;
}
.cal-days button.past{color:#a7adb5;border-style:dashed;cursor:not-allowed;background:#fafafa}
.cal-days button.today{border-color:#0f0f11}
.cal-days button.selected{background:#0f0f11;color:#fff;border-color:#0f0f11}

/* SECTIONS */
.section{margin:0 0 10px;font-size:clamp(16px,2vw,18px)}
.mt{margin-top:18px}

/* SLOTS */
.slot-list{display:flex;flex-direction:column;gap:12px}
.slot-tile{display:block}
.slot-tile input{position:absolute;opacity:0;pointer-events:none}
.slot-content{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;background:#fff;
  transition:background .2s,border-color .2s, box-shadow .2s, color .2s, opacity .2s;
}
.slot-right{display:flex;align-items:center;gap:10px}
.check{display:none;border-radius:50%;width:22px;height:22px;line-height:22px;text-align:center;font-weight:800;background:#0f0f11;color:#fff}
.slot-tile.disabled .slot-content{opacity:.45;cursor:not-allowed}
.slot-tile:has(input:checked) .slot-content{
  background:#0f0f11;color:#fff;border-color:#0f0f11;box-shadow:0 10px 26px rgba(15,15,17,.18);
}
.slot-tile:has(input:checked) .slot-note{color:#e2e2e7}
.slot-tile:has(input:checked) .slot-price{color:#fff}
.slot-tile:has(input:checked) .check{display:inline-block}
.slot-texts{display:flex;flex-direction:column}
.slot-time{font-weight:800;letter-spacing:.3px}
.slot-note{font-size:12px;color:var(--muted);margin-top:2px}
.slot-price{font-weight:800;white-space:nowrap}

/* FORM */
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:14px}
.form-label{display:block;font-size:12px;color:var(--muted);margin:6px 0}
input[type=text],input[type=email],input[type=tel],input[type=number]{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-family:inherit
}
input[disabled]{background:#f7f7f9;color:#8d9097}
.qty{display:flex;align-items:center;gap:8px}
.qty-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#000;cursor:pointer;font-size:20px;line-height:1}
.qty-btn:hover{background:#f5f6f7}
#qty{max-width:110px;text-align:center}

/* SUMMARY */
.summary .section{margin-bottom:6px}
.summary-line,.summary-total{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.divider{height:1px;background:var(--line);margin:6px 0 10px}
.summary-total strong{font-size:clamp(18px,2.2vw,22px)}
.tiny{color:#61656b;font-size:12px;margin:.5rem 0 0}

/* RESPONSIVE */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .summary{order:2}
}
@media (max-width: 720px){
  .card{padding:18px}
  .row{grid-template-columns:1fr}
  .logo-img.big{height:54px}
  .hdr-info{align-items:flex-start;text-align:left}
}
.header-centered{
  background:#0f0f11;            /* чёрный как просил */
  color:#fff;
  border-bottom:1px solid #1f1f22;
  position:sticky; top:0; z-index:100;
}
.header-centered-row{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;        /* центрируем логотип */
}
.logo-img.big{ height:58px; width:auto; display:block; }
@media (max-width:720px){
  .header-centered-row{ min-height:78px; }
  .logo-img.big{ height:54px; }
}

/* ===== Hero: выровнять заголовок по внутреннему краю карточек ===== */
/* Карточки имеют внутренний паддинг ~22px, дадим столько же заголовку */
.hero{ padding:26px 0 2px; }
.hero-align-with-card .title,
.hero-align-with-card .subtitle{
  padding-left:22px;             /* ключ: заголовок на одной линии с контентом карты */
}
@media (max-width:720px){
  .hero-align-with-card .title,
  .hero-align-with-card .subtitle{
    padding-left:18px;
  }
}