/* ============================================================
   Клякса и Мухомор — стили сайта
   ============================================================ */

/* ---- Base & variables ---- */

:root {
  --navy:#0b3155;
  --blue:#0052a4;
  --yellow:#ffd95a;
  --text:#102f50;
  --muted:#64758a;
  --line:#dce5ef;
  --bg:#fff;
  --soft:#f7fafc;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  font-family:Manrope,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

a {
  text-decoration:none;
  color:inherit;
}

button,input {
  font:inherit;
}

/* ---- Layout ---- */

.container {
  width:calc(100% - 44px);
  max-width:964px;
  margin:auto;
}

/* ---- Header ---- */

.header {
  background:#fff;
  position:sticky;
  top:0;
  z-index:80;
  transition:box-shadow .3s var(--ease);
}

.header.scrolled {
  box-shadow:0 8px 24px rgba(15,45,80,.1);
}

.topbar {
  min-height:167px;
  display:grid;
  grid-template-columns:250px 190px 1fr 400px;
  align-items:center;
  gap:12px;
}

.brand {
  display:block;
  height:152px;
  overflow:hidden;
}

.brand img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-note {
  font-size:18px;
  line-height:1.35;
  color:#33475d;
}

.search {
  height:52px;
  border:1px solid #e1e7ee;
  border-radius:26px;
  display:flex;
  align-items:center;
  padding-left:19px;
  overflow:hidden;
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.search:focus-within {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,82,164,.1);
}

.search input {
  border:0;
  outline:0;
  width:100%;
  font-size:18px;
  color:#33475d;
}

.search button {
  border:0;
  background:var(--navy);
  color:white;
  width:52px;
  height:52px;
  border-radius:50%;
  font-size:26px;
  cursor:pointer;
}

.header-actions {
  display:flex;
  justify-content:flex-end;
  gap:14px;
}

.head-action {
  border:0;
  background:transparent;
  color:var(--text);
  font-size:16px;
  line-height:1.25;
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  cursor:pointer;
  transition:color .2s var(--ease);
}

.head-action:hover {
  color:var(--blue);
}

.action-icon {
  font-size:28px;
  display:inline-block;
  transition:transform .25s var(--ease-spring);
}

.head-action:hover .action-icon {
  transform:scale(1.12) rotate(-4deg);
}

.cart-head b,
.fav-head b {
  position:absolute;
  top:-3px;
  left:20px;
  background:#e53935;
  color:#fff;
  font-size:12px;
  border-radius:10px;
  padding:2px 5px;
  transition:transform .2s var(--ease);
}

.navrow {
  min-height:56px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:10px;
  column-gap:32px;
  border-top:1px solid #eef1f4;
}

.catalog-wrap {
  position:relative;
}

.catalog-btn {
  height:40px;
  border:0;
  border-radius:7px;
  background:var(--navy);
  color:#fff;
  padding:0 24px;
  font-size:17px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:background-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}

.catalog-btn:active {
  transform:scale(.96);
}

.catalog-btn.active {
  background:var(--blue);
}

.catalog-menu {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:270px;
  max-height:min(70vh,520px);
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 16px 34px rgba(15,45,80,.16);
  padding:8px;
  display:flex;
  flex-direction:column;
  z-index:50;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.98);
  transform-origin:top left;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.catalog-menu.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.catalog-menu a {
  padding:11px 16px;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  transition:background-color .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease);
}

.catalog-menu a:hover {
  background:var(--soft);
  color:var(--blue);
  padding-left:20px;
}

.navrow nav {
  display:flex;
  gap:10px;
  font-size:17px;
  font-weight:600;
}

.navrow nav a {
  height:40px;
  display:flex;
  align-items:center;
  padding:0 24px;
  border-radius:7px;
  background:var(--navy);
  color:#fff;
  transition:background-color .2s var(--ease), transform .15s var(--ease);
}

.navrow nav a:hover {
  background:var(--blue);
}

.navrow nav a:active {
  transform:scale(.96);
}

.location {
  margin-left:auto;
  font-size:16px;
  font-weight:700;
}

.location:first-letter {
  font-size:23px;
}

.location span {
  margin-left:5px;
}

/* ---- Hero banner ---- */

.hero {
  height:310px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  background:#fff0d9;
}

.hero-copy {
  position:relative;
  z-index:2;
  padding:23px 0 0 18px;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,#fff4df 0%,#fff2df 74%,rgba(255,242,223,0) 100%);
}

@keyframes heroIn {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}

.hero-copy>* {
  animation:heroIn .6s var(--ease) both;
}

.hero-copy>.eyebrow { animation-delay:.05s; }
.hero-copy>h1 { animation-delay:.12s; }
.hero-copy>.hero-sub { animation-delay:.19s; }
.hero-copy>.hero-features { animation-delay:.26s; }
.hero-copy>.yellow-btn { animation-delay:.33s; }

.eyebrow {
  display:inline-block;
  background:#ffea8b;
  border-radius:10px;
  padding:5px 10px;
  font-size:15px;
  font-weight:700;
}

.hero h1 {
  font-size:40px;
  line-height:1.1;
  margin:12px 0 0;
  letter-spacing:-.8px;
}

.hero-sub {
  font-size:26px;
  font-weight:800;
  margin:4px 0 14px;
}

.hero-features {
  display:flex;
  gap:21px;
  margin-bottom:16px;
}

.hero-features div {
  display:flex;
  align-items:center;
  gap:7px;
}

.hero-features span {
  font-size:27px;
}

.hero-features p {
  font-size:15px;
  line-height:1.3;
  margin:0;
}

.yellow-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--yellow);
  border-radius:22px;
  padding:13px 22px;
  font-size:18px;
  font-weight:800;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.yellow-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(255,217,90,.55);
}

.yellow-btn:active {
  transform:translateY(0) scale(.97);
}

.yellow-btn span {
  font-size:21px;
  display:inline-block;
  transition:transform .25s var(--ease-spring);
}

.yellow-btn:hover span {
  transform:translateX(4px);
}

.hero-art {
  position:absolute;
  inset:0 0 0 43%;
  background-image:url('assets/hero.jpg');
  background-size:cover;
  background-position:center;
  filter:saturate(.98);
  animation:heroArtIn .8s var(--ease) both;
}

@keyframes heroArtIn {
  from { opacity:0; transform:scale(1.06); }
  to { opacity:1; transform:scale(1); }
}

/* ---- Section heading ---- */

.section {
  padding-top:18px;
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.section-head h1,
.section-head h2 {
  font-size:26px;
  margin:0;
}

.section-head a {
  font-size:15px;
  color:#2871b9;
}

/* ---- Categories ---- */

.categories {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:13px;
}

.category {
  border-radius:9px;
  min-width:0;
  text-align:center;
  overflow:hidden;
  padding-bottom:9px;
  display:block;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}

.category:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 26px rgba(20,50,80,.14);
}

/* Палитра повторяется по кругу (8n+N) — цветной фон получают все
   карточки категорий, сколько бы их ни было, а не только первые 8. */
.category:nth-child(8n+1) {
  background:#fff1bb;
}

.category:nth-child(8n+2) {
  background:#dcefff;
}

.category:nth-child(8n+3) {
  background:#ffe1e7;
}

.category:nth-child(8n+4) {
  background:#d9f3eb;
}

.category:nth-child(8n+5) {
  background:#e9ddff;
}

.category:nth-child(8n+6) {
  background:#dceeff;
}

.category:nth-child(8n+7) {
  background:#ffe9dc;
}

.category:nth-child(8n) {
  background:#eee4ff;
}

.category img {
  display:block;
  width:100%;
  height:90px;
  object-fit:cover;
  mix-blend-mode:multiply;
  transition:transform .35s var(--ease);
}

.category:hover img {
  transform:scale(1.08);
}

.category span {
  display:block;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  padding:18px 10px;
}

/* ---- Product cards ---- */

.products {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.product {
  min-width:0;
  position:relative;
  border:1px solid #dce4eb;
  border-radius:11px;
  padding:9px 10px 10px;
  box-shadow:0 2px 7px rgba(20,50,80,.04);
  background:#fff;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
}

.product:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 30px rgba(20,50,80,.14);
}

@keyframes cardIn {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:translateY(0); }
}

.product:not(.reveal) {
  animation:cardIn .45s var(--ease) both;
}

.product img {
  width:100%;
  height:120px;
  object-fit:contain;
  display:block;
  margin:7px 0;
  transition:transform .35s var(--ease);
}

.product:hover img {
  transform:scale(1.06);
}

.product h3 {
  font-size:16px;
  line-height:1.35;
  min-height:52px;
  margin:0 0 7px;
}

.rating {
  font-size:16px;
  color:#f4bd00;
  font-weight:800;
}

.rating small {
  color:#a3adba;
  font-weight:500;
}

.product strong {
  display:block;
  font-size:21px;
  margin:5px 0 9px;
}

.product del {
  font-size:14px;
  color:#a1a8af;
  font-weight:500;
  margin-left:3px;
}

.badge {
  position:absolute;
  top:8px;
  left:9px;
  z-index:2;
  color:#fff;
  border-radius:10px;
  padding:4px 9px;
  font-size:12px;
  font-weight:800;
}

.green {
  background:#159b61;
}

.purple {
  background:#a94de3;
}

.red {
  background:#ed3434;
}

.heart {
  position:absolute;
  right:8px;
  top:8px;
  z-index:2;
  border:0;
  background:transparent;
  color:var(--navy);
  font-size:22px;
  cursor:pointer;
  transition:transform .2s var(--ease);
}

.heart:hover {
  transform:scale(1.18);
}

@keyframes heartPop {
  0% { transform:scale(1); }
  35% { transform:scale(1.4); }
  60% { transform:scale(.88); }
  100% { transform:scale(1); }
}

.heart.pop {
  animation:heartPop .45s var(--ease-spring);
}

.product.removing {
  opacity:0;
  transform:scale(.92) translateY(6px);
}

.add-cart {
  width:100%;
  height:35px;
  border:0;
  border-radius:6px;
  background:var(--navy);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background-color .2s var(--ease), transform .15s var(--ease);
}

.add-cart:hover {
  background:#12466f;
}

.add-cart:active {
  transform:scale(.96);
}

@keyframes bumpPulse {
  0% { transform:scale(1); }
  40% { transform:scale(1.4); }
  100% { transform:scale(1); }
}

.bump {
  animation:bumpPulse .35s var(--ease-spring);
}

/* ---- Benefits strip ---- */

.benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:19px;
  margin:19px 0 23px;
}

.benefits>div {
  min-height:138px;
  border-radius:10px;
  padding:17px 13px;
  display:grid;
  grid-template-columns:50px 1fr;
  column-gap:8px;
  align-content:start;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}

.benefits>div:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(20,50,80,.1);
}

.benefits>div:nth-child(1) {
  background:#e9f5ff;
}

.benefits>div:nth-child(2) {
  background:#f1eaff;
}

.benefits>div:nth-child(3) {
  background:#e4f7f2;
}

.benefits>div:nth-child(4) {
  background:#fff0e4;
}

.benefits i {
  grid-row:1/3;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  font-style:normal;
  font-size:23px;
}

.benefits b {
  font-size:18px;
  line-height:1.35;
}

.benefits p {
  font-size:14px;
  line-height:1.4;
  margin:8px 0 0;
}

/* ---- Store / contacts ---- */

.store-grid {
  display:grid;
  grid-template-columns:1.08fr 1fr .9fr;
  gap:18px;
  align-items:stretch;
}

.store-copy {
  border-radius:10px;
  background:#fff5d9;
  padding:18px 22px;
}

.store-copy h2 {
  font-size:27px;
  line-height:1.15;
  margin:0 0 11px;
}

.store-copy p {
  font-size:16px;
  line-height:1.5;
  margin:0 0 15px;
}

.store-photo {
  display:block;
  width:100%;
  height:100%;
  min-height:174px;
  object-fit:cover;
  border-radius:10px;
  transition:transform .35s var(--ease);
}

.store-photo:hover {
  transform:scale(1.03);
}

.contact-card {
  background:#f0f6fc;
  border-radius:10px;
  display:grid;
  grid-template-columns:1fr 170px;
  overflow:hidden;
  padding:13px 0 13px 13px;
}

.contact-text {
  font-size:15px;
  line-height:1.5;
}

.contact-text p {
  margin:0 0 9px;
}

.contact-text a {
  display:inline-block;
  background:var(--navy);
  color:#fff;
  border-radius:6px;
  padding:9px 12px;
  font-size:14px;
  font-weight:700;
}

.contact-card>a {
  display:block;
  height:100%;
}

.contact-card img {
  width:170px;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .35s var(--ease);
}

.contact-card>a:hover img {
  transform:scale(1.04);
}

/* ---- Реквизиты магазинов ---- */

.requisites {
  margin:22px 0;
}

.requisites>h2 {
  font-size:24px;
  margin:0 0 14px;
}

.requisites-note {
  margin:-6px 0 16px;
  color:#666;
  font-size:15px;
}

.requisites-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.requisite-card {
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 22px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}

.requisite-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(20,50,80,.1);
}

.requisite-card h3 {
  font-size:18px;
  margin:0 0 10px;
  color:var(--navy);
}

.requisite-card p {
  font-size:14px;
  line-height:1.6;
  margin:0 0 4px;
  color:var(--muted);
}

.requisite-card p b {
  color:var(--text);
}

.requisite-card a {
  color:var(--blue);
  font-weight:600;
}

/* ---- Услуги сервисного центра ---- */

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}

.service-card {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}

.service-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(20,50,80,.1);
}

.service-icon {
  flex-shrink:0;
  font-size:24px;
}

/* ---- Slogan banner ---- */

.slogan {
  height:68px;
  margin:14px 0 14px;
  border-radius:10px;
  background:#edf7ff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  overflow:hidden;
}

.slogan h2 {
  font-size:24px;
  margin:0 0 2px;
}

.slogan p {
  font-size:15px;
  margin:0;
}

.slogan span {
  font-size:49px;
  color:#ffcb25;
  display:inline-block;
  animation:sloganFloat 2.6s ease-in-out infinite;
}

@keyframes sloganFloat {
  0%,100% { transform:rotate(-18deg) translateY(0); }
  50% { transform:rotate(-10deg) translateY(-6px); }
}

/* ---- Footer ---- */

.footer {
  background:#082b4b;
  color:#fff;
  margin-top:0;
  padding:23px 0 12px;
}

.footer-grid {
  display:grid;
  grid-template-columns:minmax(300px,1.5fr) 1fr 1.1fr;
  gap:26px;
}

.footer-brand {
  height:212px; /* вдвое шире (и, чтобы не искажать пропорции, вдвое выше) */
  display:flex;
  align-items:center;
}

.footer-brand img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none;
}

.footer-grid h4 {
  font-size:19px;
  margin:0 0 6px;
}

.footer-grid a {
  display:block;
  font-size:17px;
  line-height:1.5;
  opacity:.95;
}

.socials {
  display:flex;
  gap:9px;
  margin-top:11px;
}

.socials span {
  width:20px;
  height:20px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:10px;
}

.copyright {
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:15px;
  padding-top:8px;
  display:flex;
  justify-content:space-between;
  font-size:16px;
  color:#c7d3df;
}

/* ---- Toast / utility ---- */

.toast {
  position:fixed;
  left:50%;
  bottom:25px;
  transform:translate(-50%,20px);
  background:var(--navy);
  color:#fff;
  padding:12px 20px;
  border-radius:9px;
  font-size:17px;
  opacity:0;
  pointer-events:none;
  transition:transform .35s var(--ease-spring), opacity .3s var(--ease);
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0);
}

.hidden {
  display:none!important;
}

/* ---- Scroll reveal ---- */

.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.in {
  opacity:1;
  transform:translateY(0);
}

.categories .category:nth-child(1),
.products .product:nth-child(1),
.benefits>div:nth-child(1) { transition-delay:.02s; }
.categories .category:nth-child(2),
.products .product:nth-child(2),
.benefits>div:nth-child(2) { transition-delay:.08s; }
.categories .category:nth-child(3),
.products .product:nth-child(3),
.benefits>div:nth-child(3) { transition-delay:.14s; }
.categories .category:nth-child(4),
.products .product:nth-child(4),
.benefits>div:nth-child(4) { transition-delay:.2s; }
.categories .category:nth-child(5),
.products .product:nth-child(5) { transition-delay:.26s; }
.categories .category:nth-child(6) { transition-delay:.32s; }
.categories .category:nth-child(7) { transition-delay:.38s; }
.categories .category:nth-child(8) { transition-delay:.44s; }

/* ---- "Летит в корзину" ---- */

.fly-icon {
  position:fixed;
  z-index:999;
  border-radius:8px;
  object-fit:contain;
  background:#fff;
  pointer-events:none;
  box-shadow:0 10px 24px rgba(20,50,80,.2);
  transition:transform .55s cubic-bezier(.3,.8,.4,1), opacity .55s var(--ease);
  will-change:transform,opacity;
}

/* ---- Появление стаб-страниц (каталог, заказы) ---- */

@keyframes stubIn {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}

.stub-page {
  animation:stubIn .55s var(--ease) both;
}

.stub-in-play {
  animation:stubIn .5s var(--ease) both;
}

/* ---- Уменьшение движения ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

.catalog-btn:hover {
  background:var(--blue);
}

/* ---- Category stub pages ---- */

.topbar-simple {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
}

.topbar-simple-actions {
  display:flex;
  align-items:center;
  gap:22px;
}

.breadcrumbs {
  font-size:15px;
  color:var(--muted);
  margin:22px 0 8px;
}

.catalog-empty {
  color:var(--muted);
  font-size:16px;
  padding:30px 0;
}

.pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:28px 0 40px;
  font-size:15px;
  color:var(--muted);
}

.pagination a {
  color:var(--blue);
  font-weight:700;
}

.breadcrumbs a {
  color:var(--blue);
}

.stub-page {
  background:var(--soft);
  border-radius:16px;
  padding:48px 24px;
  text-align:center;
  margin-bottom:40px;
}

.stub-image {
  width:220px;
  height:190px;
  object-fit:cover;
  border-radius:20px;
  margin:0 auto 24px;
  display:block;
  background:#fff;
}

.stub-icon {
  width:120px;
  height:120px;
  border-radius:50%;
  background:#fff5d9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:54px;
  margin:0 auto 24px;
}

.stub-page h1 {
  font-size:30px;
  margin:0 0 12px;
}

.stub-page p {
  font-size:17px;
  color:var(--muted);
  max-width:480px;
  margin:0 auto 26px;
  line-height:1.55;
}

.stub-actions {
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  align-items:center;
}

.stub-back {
  font-size:16px;
  font-weight:700;
  color:var(--blue);
}

.order-form {
  max-width:640px;
  margin:0 auto;
  text-align:left;
}

.order-cart {
  max-width:640px;
  margin:0 auto 26px;
  text-align:left;
}

.order-cart h2 {
  font-size:20px;
  margin:0 0 12px;
}

.order-cart-empty {
  font-size:14px;
  color:var(--muted);
  background:var(--soft);
  border-radius:10px;
  padding:14px 16px;
  margin:0;
}

.order-cart-list {
  border-top:1px solid var(--line);
}

.order-cart-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.order-cart-item img {
  width:52px;
  height:52px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  flex-shrink:0;
}

.order-cart-info {
  flex:1;
  min-width:0;
}

.order-cart-info h3 {
  font-size:14px;
  margin:0 0 3px;
  font-weight:700;
}

.order-cart-info span {
  font-size:13px;
  color:var(--muted);
}

.order-cart-item strong {
  font-size:15px;
  flex-shrink:0;
}

.order-cart-total {
  text-align:right;
  font-size:16px;
  padding-top:14px;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:26px;
}

.form-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}

.form-field-wide {
  grid-column:1/-1;
}

.form-hint {
  font-size:13px;
  font-weight:500;
  color:#6a7a8c;
}

.form-field input,
.form-field select,
.form-field textarea {
  border:1px solid #dde5ee;
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
  font-weight:500;
  font-family:inherit;
  color:var(--text);
  background:#fff;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline:2px solid var(--blue);
  outline-offset:1px;
}

.form-field textarea {
  resize:vertical;
  min-height:80px;
}

.order-form .yellow-btn {
  border:0;
  cursor:pointer;
  font-family:inherit;
}

.order-success {
  text-align:center;
}

.order-success h2 {
  font-size:26px;
  margin:0 0 10px;
}

.order-success p {
  font-size:16px;
  color:var(--muted);
  margin:0 0 22px;
  line-height:1.5;
}

/* ---- Cart page ---- */

.cart-list {
  border-top:1px solid var(--line);
}

@keyframes rowIn {
  from { opacity:0; transform:translateX(-12px); }
  to { opacity:1; transform:translateX(0); }
}

.cart-item {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  animation:rowIn .4s var(--ease) both;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}

.cart-item.removing {
  opacity:0;
  transform:translateX(24px) scale(.98);
}

.cart-item img {
  width:64px;
  height:64px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  flex-shrink:0;
}

.cart-info {
  flex:1;
  min-width:0;
}

.cart-info h3 {
  font-size:16px;
  margin:0 0 4px;
  font-weight:700;
}

.cart-price {
  font-size:15px;
  color:var(--muted);
}

.qty-control {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.qty-control button {
  width:28px;
  height:28px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:var(--text);
  transition:background-color .15s var(--ease), transform .15s var(--ease);
}

.qty-control button:hover {
  background:var(--soft);
}

.qty-control button:active {
  transform:scale(.9);
}

.qty-control span {
  min-width:18px;
  text-align:center;
  font-weight:700;
}

.cart-line-total {
  min-width:90px;
  text-align:right;
  font-size:17px;
  flex-shrink:0;
}

.cart-remove {
  border:0;
  background:transparent;
  color:#a1a8af;
  font-size:20px;
  cursor:pointer;
  flex-shrink:0;
  transition:color .15s var(--ease), transform .15s var(--ease);
}

.cart-remove:hover {
  color:#e53935;
  transform:scale(1.15) rotate(90deg);
}

.cart-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:22px;
  margin:6px 0 40px;
  flex-wrap:wrap;
}

.cart-total {
  font-size:22px;
}

/* ============================================================
   Адаптивность
   ============================================================ */

/* Планшет (<= 900px) */
@media(max-width:900px) {

  .topbar {
    grid-template-columns:195px 1fr 220px;
  }

  .brand {
    height:120px;
  }

  .brand-note {
    display:none;
  }

  .navrow {
    column-gap:14px;
  }

  .catalog-btn {
    padding:0 14px;
  }

  .navrow nav {
    gap:8px;
  }

  .navrow nav a {
    padding:0 14px;
  }

  .categories {
    grid-template-columns:repeat(4,1fr);
  }

  .products {
    grid-template-columns:repeat(3,1fr);
  }

  .store-grid {
    grid-template-columns:1fr 1fr;
  }

  .contact-card {
    grid-column:1/-1;
  }

  .hero-copy {
    width:62%;
  }

  .benefits {
    grid-template-columns:repeat(2,1fr);
  }

  .services-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .footer-grid {
    grid-template-columns:1fr 1fr;
  }

  .footer-brand {
    grid-column:1/-1;
  }

}

/* Мобильный (<= 650px) */
@media(max-width:650px) {

  .container {
    width:min(100% - 24px,964px);
  }

  .topbar {
    grid-template-columns:150px 1fr;
    min-height:108px;
  }

  .brand {
    height:92px;
  }

  .search {
    order:4;
    grid-column:1/-1;
    margin-bottom:9px;
  }

  .header-actions {
    gap:4px;
  }

  .head-action span:last-child {
    display:none;
  }

  .action-icon {
    font-size:22px;
  }

  .navrow {
    min-height:48px;
    gap:8px;
    row-gap:8px;
    padding:8px 0;
  }

  .catalog-menu {
    min-width:230px;
  }

  .catalog-btn {
    padding:0 13px;
    white-space:nowrap;
  }

  .navrow nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .navrow nav a {
    height:32px;
    padding:0 12px;
    font-size:13px;
  }

  .location {
    display:none;
  }

  .hero {
    height:430px;
  }

  .hero-copy {
    width:100%;
    height:58%;
    padding:17px 15px;
    background:linear-gradient(#fff4df 0%,rgba(255,244,223,.92) 80%,rgba(255,244,223,0) 100%);
  }

  .hero-art {
    left:0;
    top:120px;
    background-position:right bottom;
  }

  .hero h1 {
    font-size:27px;
  }

  .hero-sub {
    font-size:19px;
  }

  .hero-features {
    gap:10px;
  }

  .hero-features span {
    font-size:18px;
  }

  .hero-features p {
    font-size:12px;
  }

  .yellow-btn {
    font-size:15px;
    padding:11px 18px;
  }

  .yellow-btn span {
    font-size:17px;
  }

  .categories {
    grid-template-columns:repeat(2,1fr);
  }

  .category span {
    font-size:13px;
  }

  .products {
    grid-template-columns:1fr 1fr;
  }

  .product {
    padding:8px;
  }

  .product img {
    height:95px;
  }

  .product h3 {
    font-size:13px;
    min-height:44px;
    margin:0 0 5px;
  }

  .rating {
    font-size:13px;
  }

  .product strong {
    font-size:17px;
    margin:4px 0 7px;
  }

  .product del {
    font-size:12px;
  }

  .heart {
    font-size:19px;
  }

  .add-cart {
    height:32px;
    font-size:13px;
  }

  .benefits {
    grid-template-columns:1fr;
  }

  .store-grid {
    grid-template-columns:1fr;
  }

  .store-photo {
    height:185px;
  }

  .contact-card {
    grid-column:auto;
  }

  .footer {
    padding:20px 0 10px;
  }

  .footer-grid {
    grid-template-columns:1fr;
    gap:20px;
    text-align:center;
  }

  .footer-brand {
    grid-column:auto;
    height:186px; /* вдвое шире (и, чтобы не искажать пропорции, вдвое выше) */
    margin:0 auto;
  }

  .footer-grid h4 {
    font-size:15px;
    margin:0 0 8px;
  }

  .footer-grid a {
    font-size:14px;
    line-height:1.6;
  }

  .copyright {
    gap:6px;
    flex-direction:column;
    align-items:center;
    text-align:center;
    font-size:12px;
    margin-top:12px;
  }

  .section-head h1,
  .section-head h2 {
    font-size:19px;
  }

  .slogan {
    height:auto;
    min-height:64px;
    padding:14px 16px;
  }

  .slogan h2 {
    font-size:16px;
  }

  .slogan p {
    font-size:12px;
  }

  .slogan span {
    font-size:30px;
  }

  .stub-page {
    padding:32px 18px;
  }

  .stub-image {
    width:170px;
    height:150px;
  }

  .stub-icon {
    width:90px;
    height:90px;
    font-size:40px;
  }

  .stub-page h1 {
    font-size:22px;
  }

  .stub-page p {
    font-size:14px;
  }

  .order-success h2 {
    font-size:20px;
  }

  .order-success p {
    font-size:14px;
  }

  .form-grid {
    grid-template-columns:1fr;
  }

  .services-grid {
    grid-template-columns:1fr;
  }

  .cart-item {
    flex-wrap:wrap;
  }

  .cart-info {
    flex:1 1 100%;
    order:1;
  }

  .cart-item img {
    order:0;
  }

  .qty-control {
    order:2;
  }

  .cart-line-total {
    order:3;
    text-align:left;
  }

  .cart-remove {
    order:4;
    margin-left:auto;
  }

}

/* Маленький мобильный (<= 420px) */
@media(max-width:420px) {

  .products {
    grid-template-columns:1fr;
  }

  .topbar {
    grid-template-columns:135px 1fr;
  }

  .brand-note {
    display:none;
  }

  .hero-features {
    display:none;
  }

  .hero {
    height:390px;
  }

  .hero-art {
    top:125px;
  }

  .hero-copy {
    height:54%;
  }

}

/* Большие экраны (>= 1300px) */
@media(min-width:1300px) {

  .container {
    max-width:1240px;
  }

  .topbar {
    grid-template-columns:280px 220px 1fr 430px;
    min-height:182px;
  }

  .brand {
    height:170px;
  }

  .brand-note {
    font-size:19px;
  }

  .search {
    height:56px;
  }

  .search input {
    font-size:19px;
  }

  .search button {
    width:56px;
    height:56px;
    font-size:28px;
  }

  .head-action {
    font-size:17px;
  }

  .action-icon {
    font-size:31px;
  }

  .navrow {
    min-height:60px;
  }

  .catalog-btn {
    height:43px;
    font-size:18px;
  }

  .navrow nav {
    gap:12px;
    font-size:18px;
  }

  .location {
    font-size:17px;
  }

  .hero {
    height:390px;
  }

  .hero h1 {
    font-size:48px;
  }

  .hero-sub {
    font-size:29px;
  }

  .eyebrow {
    font-size:16px;
  }

  .hero-features span {
    font-size:30px;
  }

  .hero-features p {
    font-size:16px;
  }

  .yellow-btn {
    font-size:19px;
    padding:16px 28px;
  }

  .section-head h1,
  .section-head h2 {
    font-size:28px;
  }

  .category img {
    height:112px;
  }

  .category span {
    font-size:17px;
  }

  .product img {
    height:150px;
  }

  .product h3 {
    font-size:17px;
    min-height:54px;
  }

  .product strong {
    font-size:22px;
  }

  .benefits>div {
    min-height:142px;
    padding:22px 17px;
  }

  .benefits b {
    font-size:19px;
  }

  .benefits p {
    font-size:15px;
  }

  .store-copy h2 {
    font-size:30px;
  }

  .store-copy p {
    font-size:17px;
  }

  .contact-text {
    font-size:16px;
  }

  .contact-card {
    grid-template-columns:1fr 210px;
  }

  .contact-card img {
    width:210px;
  }

  .slogan {
    height:90px;
  }

  .slogan h2 {
    font-size:26px;
  }

  .slogan p {
    font-size:16px;
  }

  .footer-grid h4 {
    font-size:20px;
  }

  .footer-grid a {
    font-size:18px;
  }

  .footer-grid {
    grid-template-columns:minmax(380px,1.6fr) 1fr 1.1fr;
  }

}

/* Очень большие экраны (>= 1700px) */
@media(min-width:1700px) {

  .container {
    max-width:1600px;
  }

  .hero {
    height:430px;
  }

  .hero h1 {
    font-size:54px;
  }

  .hero-sub {
    font-size:32px;
  }

  .product img {
    height:170px;
  }

  .category img {
    height:128px;
  }

  .product h3 {
    font-size:18px;
  }

  .store-copy h2 {
    font-size:33px;
  }

}

/* Сверхширокие экраны (>= 2000px) */
@media(min-width:2000px) {

  .container {
    max-width:1800px;
  }

  .hero {
    height:470px;
  }

  .hero h1 {
    font-size:60px;
  }

  .hero-sub {
    font-size:36px;
  }

  .product img {
    height:185px;
  }

  .category img {
    height:140px;
  }

}