/* STORY — hand-authored design system (no build step required). */

/* Inter, self-hosted (not Google Fonts CDN — unreliable from RU networks).
   Variable font, one file per Unicode subset, weights 400–800 in a single file each. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter/inter-cyrillic-ext.251d36f2b5a6.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter/inter-cyrillic.de93fdc85e3d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #16181d;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #2563eb;
  --color-accent-dark: #1d4ed8;
  --color-danger: #dc2626;
  --radius: 12px;
  --container: 1200px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Tilda component CSS (vendor/tilda-blocks-page.min.css and the ported .st-* blocks
     below) reference these two font variables — mapped to Inter per product decision. */
  --t-headline-font: var(--font-sans);
  --t-text-font: var(--font-sans);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.container-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Buttons / forms */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input, textarea.input, select.input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.form-row { margin-bottom: 14px; }
.form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.form-error { color: var(--color-danger); font-size: 13px; margin-top: 4px; }

/* Cards / grids */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.section { padding: 48px 0; }
.section-title { font-size: 26px; font-weight: 800; margin-bottom: 24px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 40px 20px;
}
.product-card__brand { font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Popular products carousel (homepage) — styled after the reference site's t776 product-card block */
.popular-products { position: relative; }
.popular-products__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.popular-products__track::-webkit-scrollbar { display: none; }
.popular-products__nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 10;
}
.popular-products__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--st-border, var(--color-border));
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--st-text, var(--color-text));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.popular-products__nav-btn:hover { background: var(--st-orange-light, #fff3ed); border-color: var(--st-orange, #fd924a); color: var(--st-orange, #fd924a); }
.popular-products__nav-btn[data-carousel-dir="prev"] { left: 10px; }
.popular-products__nav-btn[data-carousel-dir="next"] { right: 10px; }

/* Homepage banner gallery (below .st-features__bar) — auto-swiping, one full-width
   slide at a time. Each slide declares its own height preset (sm/md/lg/xl, set in
   the admin); the track height transitions to match whichever slide is active. */
.banner-gallery { margin: 32px 0; }
.banner-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius);
  height: 340px;
  transition: height 0.35s ease;
}
.banner-gallery__track::-webkit-scrollbar { display: none; }
.banner-gallery[data-active-size="sm"] .banner-gallery__track { height: 200px; }
.banner-gallery[data-active-size="md"] .banner-gallery__track { height: 340px; }
.banner-gallery[data-active-size="lg"] .banner-gallery__track { height: 480px; }
.banner-gallery[data-active-size="xl"] .banner-gallery__track { height: 600px; }
.banner-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}
.banner-gallery__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.banner-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.banner-gallery__dot.is-active { background: var(--st-orange, var(--color-accent)); width: 22px; border-radius: 4px; }
@media (max-width: 640px) {
  .banner-gallery[data-active-size="lg"] .banner-gallery__track,
  .banner-gallery[data-active-size="xl"] .banner-gallery__track { height: 220px; }
  .banner-gallery[data-active-size="md"] .banner-gallery__track { height: 180px; }
  .banner-gallery[data-active-size="sm"] .banner-gallery__track { height: 140px; }
}
.store-card { flex: 0 0 230px; scroll-snap-align: start; display: flex; flex-direction: column; }
.store-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.store-card__imgwrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
}
.store-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; transition: opacity 0.25s ease; }
.store-card__image--placeholder { background: var(--color-border, #e5e7eb); }
.store-card__image--hover { opacity: 0; }
.store-card:hover .store-card__image--hover { opacity: 1; }
.store-card__tags { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.store-card__tag {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 50px;
}
.store-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--st-dark, #111);
  color: #fff;
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
.store-card__body { padding-top: 16px; }
.store-card__title { font-weight: 700; font-size: 15px; }
.store-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
.store-card__price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.store-card__price { font-weight: 800; font-size: 17px; }
.store-card__price-old { font-size: 14px; color: var(--st-text-secondary, var(--color-muted)); text-decoration: line-through; }
.store-card__cart-form { flex-shrink: 0; }
.store-card__cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fc924c;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.store-card__cart-btn:hover { background: #f57f31; transform: scale(1.06); }
.store-card__cart-btn:disabled { background: var(--st-border, #eaeaea); color: var(--st-text-secondary, var(--color-muted)); cursor: not-allowed; transform: none; }
.store-card__cart-feedback { display: block; margin-top: 6px; font-size: 12px; min-height: 1px; }
@media (max-width: 640px) { .store-card { flex-basis: 200px; } }

/* Catalog layout — styled after the reference site's t-catalog widget (filters sidebar + numbered pagination) */
.catalog-parts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.catalog-parts__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border: 2px solid var(--color-border);
  border-radius: 30px;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.catalog-parts__item:hover { border-color: #fc924c; }
.catalog-parts__item.is-active { border-color: #fc924c; color: #fc924c; font-weight: 600; }
.catalog-parts__icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(0, 0, 0, 0.05); }

/* Subcategory tiles — shown below the pills when the active category has children to narrow into */
.subcategory-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.subcategory-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  aspect-ratio: 1 / 1;
  padding: 20px 16px;
  border-radius: 16px;
  background: var(--st-card-bg, #fafafa);
  border: 1px solid var(--color-border);
  text-align: center;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.subcategory-tile:hover { border-color: #fc924c; transform: translateY(-2px); }
.subcategory-tile__name { margin: 0; font-weight: 700; font-size: 15px; position: relative; z-index: 1; }
.subcategory-tile__image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  max-height: 60%;
  object-fit: contain;
  pointer-events: none;
}

.catalog-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .catalog-layout { grid-template-columns: 1fr; } }

.filters-sidebar {
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.filters-sidebar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.filters-sidebar__title { font-weight: 800; font-size: 16px; }
.filters-sidebar__close { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-muted); }
.filters-reset { font-size: 13px; color: #fc924c; font-weight: 600; white-space: nowrap; }
.filters-reset:hover { text-decoration: underline; }

.filter-group { border-bottom: 1px solid var(--color-border); padding: 14px 0; }
.filter-group:first-of-type { padding-top: 0; }
.filter-group:last-of-type { border-bottom: none; padding-bottom: 4px; }
.filter-group__title {
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-group__title::-webkit-details-marker { display: none; }
.filter-group__title::after { content: "⌄"; font-size: 15px; color: var(--color-muted); transition: transform 0.2s ease; }
.filter-group[open] > .filter-group__title::after { transform: rotate(180deg); }
.filter-group__body { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.filter-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: #fc924c; cursor: pointer; }
.filter-price-row { display: flex; gap: 8px; margin-top: 4px; }
.filter-category-link { display: block; padding: 4px 0; font-size: 14px; color: var(--color-text); }
.filter-category-link:hover, .filter-category-link.is-active { color: #fc924c; font-weight: 600; }

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.catalog-results-count { font-size: 14px; color: var(--color-muted); }
.catalog-toolbar__right { display: flex; align-items: center; gap: 10px; }
.catalog-sort-select { border-radius: 20px; border: 1px solid var(--color-border); padding: 9px 16px; font-size: 14px; background: #fff; }
.catalog-filters-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  padding: 9px 16px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.filters-backdrop { display: none; }

@media (max-width: 860px) {
  .catalog-filters-toggle { display: inline-flex; }
  .filters-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    max-height: none;
    height: 100%;
    border-radius: 0;
    z-index: 210;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .filters-sidebar.is-open { transform: translateX(0); }
  .filters-sidebar__close { display: block; }
  .filters-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
  }
  .filters-backdrop.is-open { display: block; }
}

.breadcrumbs { font-size: 13px; color: var(--color-muted); margin-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: #fc924c; }
.breadcrumbs .sep { margin: 0 8px; color: var(--color-border); }
.breadcrumbs .current { color: #fc924c; font-weight: 600; }

.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 15px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  opacity: 0.6;
}
.pagination a:hover { border-color: #fc924c; color: #fc924c; opacity: 1; }
.pagination .current { opacity: 1; border-color: #fc924c; color: #fc924c; font-weight: 700; }
.pagination .ellipsis { border: none; opacity: 0.5; }

/* Product detail */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .product-detail { grid-template-columns: 1fr; } }
.product-gallery { position: sticky; top: 84px; align-self: start; }
@media (max-width: 860px) { .product-gallery { position: static; } }
.product-gallery__main { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 1 / 1; background: #fff; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.product-gallery__thumb { padding: 0; border-radius: 8px; border: 1px solid var(--color-border); background: #fff; cursor: pointer; overflow: hidden; line-height: 0; transition: border-color 0.2s ease; }
.product-gallery__thumb img { width: 72px; height: 72px; object-fit: cover; display: block; }
.product-gallery__thumb:hover { border-color: #fc924c; }
.product-gallery__thumb.is-active { border-color: #fc924c; border-width: 2px; }

.product-key-info { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.product-key-info__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.product-key-info__row span:first-child { color: var(--color-muted); }
.product-key-info__row span:last-child { font-weight: 600; text-align: right; }

.variant-groups { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.variant-group__title { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 8px; }
.variant-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 14px;
  border-radius: 10px; border: 1.5px solid var(--color-border);
  font-size: 14px; color: var(--color-text); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.variant-chip:hover { border-color: #fc924c; }
.variant-chip.is-selected { border-color: #fc924c; color: #fc924c; font-weight: 700; }
.variant-chip--color { width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; }
.variant-chip--wide { height: auto; min-height: 40px; padding: 8px 14px; white-space: normal; text-align: center; line-height: 1.3; }
.variant-chip--color.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fc924c; }
.variant-chip__swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); }

.price-block { display: flex; align-items: baseline; gap: 10px; font-size: 32px; font-weight: 800; margin: 16px 0; }
.product-specs-link { display: inline-block; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: #fc924c; }
.product-specs-link:hover { text-decoration: underline; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.product-actions__qty { width: 80px; flex-shrink: 0; }

.delivery-block { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--st-card-bg, #fafafa); border: 1px solid var(--color-border); }
.delivery-block__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.delivery-block__name { font-weight: 700; flex: 1; }
.delivery-block__timing { color: var(--color-muted); }
.delivery-block__price { font-weight: 600; white-space: nowrap; }

.addon-services { margin-top: 28px; }
.addon-services__title { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.addon-services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.addon-service {
  display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 12px; transition: border-color 0.2s ease;
}
.addon-service:hover, .addon-service.is-active { border-color: #fc924c; }
.addon-service__image { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--st-card-bg, #fafafa); flex-shrink: 0; }
.addon-service__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.addon-service__name { font-size: 14px; font-weight: 700; }
.addon-service__descr { font-size: 12px; color: var(--color-muted); }
.addon-service__price { font-size: 13px; font-weight: 700; color: #fc924c; }
.addon-service__switch { position: relative; flex-shrink: 0; width: 40px; height: 24px; }
.addon-service__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.addon-service__slider { position: absolute; inset: 0; border-radius: 30px; background: var(--color-border); transition: background-color 0.2s ease; }
.addon-service__slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.addon-service__switch input:checked + .addon-service__slider { background: #fc924c; }
.addon-service__switch input:checked + .addon-service__slider::before { transform: translateX(16px); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.spec-table th { color: var(--color-muted); font-weight: 500; width: 45%; }
.spec-group-title { font-weight: 700; margin: 18px 0 6px; }

/* Cart */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: 10px 0; color: var(--color-muted); font-size: 13px; text-transform: uppercase; border-bottom: 1px solid var(--color-border); }
.cart-table td { padding: 16px 0; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.cart-item__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #f0f0f2; }
.cart-item__info { display: flex; align-items: center; gap: 14px; }
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.qty-control button { border: none; background: #f3f4f6; width: 32px; height: 32px; font-size: 16px; cursor: pointer; }
.qty-control input { width: 44px; border: none; text-align: center; font-size: 14px; }
.remove-link { color: var(--color-danger); font-size: 13px; }
.cart-summary { display: flex; justify-content: flex-end; gap: 24px; align-items: baseline; margin: 20px 0; font-size: 18px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-muted); }

/* Static pages */
.static-page__image { width: 100%; max-width: 760px; max-height: 420px; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }
.prose { max-width: 760px; font-size: 16px; }
.prose h2 { margin-top: 1.5em; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-item { margin-bottom: 14px; }
.contact-item strong { display: block; font-size: 13px; color: var(--color-muted); text-transform: uppercase; margin-bottom: 2px; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.map-embed iframe { width: 100%; height: 400px; border: 0; }

.messages { margin: 16px 0; }
.message { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
.message.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.message.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-instock { background: #ecfdf5; color: #047857; }
.badge-outstock { background: #fef2f2; color: #b91c1c; }

/* ==============================================================
   Ported from the original Tilda site (examples/homepage.html)
   — hero, features strip, reviews carousel, about+contacts block.
   Kept verbatim; only --t-headline-font/--t-text-font were
   redirected to a system font stack (see :root above).
   ============================================================== */

/* ===== Block Reset ===== */
.st-fullpage,
.st-fullpage * { box-sizing: border-box; }
.st-fullpage input,
.st-fullpage textarea,
.st-fullpage select { font: inherit; }

/* ===== Design Variables ===== */
.st-fullpage {
  --st-orange: #fd924a;
  --st-orange-light: #fff3ed;
  --st-dark: #1a1a1a;
  --st-text: #1a1a1a;
  --st-text-secondary: #6b6b6b;
  --st-border: #eaeaea;
  --st-card-bg: #fafafa;
  --st-white: #ffffff;
  font-family: var(--t-text-font);
  background: var(--st-white);
  overflow-x: hidden;
}

/* ===== Container ===== */
.st-fullpage__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* =============================================
   HERO SECTION
   ============================================= */
.st-hero {
  padding: 40px 0 20px;
  position: relative;
  z-index: 1;
}
.st-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: auto;
}
.st-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.st-hero__brand {
  font-family: var(--t-headline-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-orange);
}
.st-hero__title {
  font-family: var(--t-headline-font);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.25;
  color: var(--st-dark);
  letter-spacing: -0.02em;
}
.st-hero__title span {
  color: var(--st-orange);
}
.st-hero__subtitle {
  font-family: var(--t-text-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--st-text-secondary);
  max-width: 420px;
}
.st-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}
.st-hero__image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.st-hero__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* ===== Features Bar ===== */
.st-features {
  position: relative;
  z-index: 2;
  padding: 20px 0 40px;
}
.st-features__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--st-white);
  border-radius: 20px;
  box-shadow: 0 10px 40px -8px rgba(0,11,48,0.12);
  padding: 20px 0;
  border: 1px solid var(--st-border);
}
.st-features__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px;
  border-right: 1px solid var(--st-border);
}
.st-features__item:last-child {
  border-right: none;
}
.st-features__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--st-orange-light);
  border-radius: 12px;
  padding: 10px;
}
.st-features__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.st-features__text {
  display: flex;
  flex-direction: column;
}
.st-features__label {
  font-family: var(--t-headline-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--st-dark);
}
.st-features__desc {
  font-family: var(--t-text-font);
  font-size: 13px;
  color: var(--st-text-secondary);
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* 640-960px (tablet) */
@media screen and (max-width: 960px) {
  .st-hero {
    padding: 30px 0 10px;
  }
  .st-hero__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .st-hero__title {
    font-size: 28px;
  }
  .st-hero__content {
    order: 1;
  }
  .st-hero__image-wrapper {
    order: 0;
  }

  .st-features {
    padding: 10px 0 30px;
  }
  .st-features__bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 0;
    border-radius: 16px;
  }
  .st-features__item {
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--st-border);
  }
  .st-features__item:nth-child(odd) {
    border-right: 1px solid var(--st-border);
  }
  .st-features__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* 480-640px (small tablet & large phone) */
@media screen and (max-width: 640px) {
  .st-fullpage__inner {
    padding: 0 16px;
  }
  .st-hero {
    padding: 20px 0 5px;
  }
  .st-hero__title {
    font-size: 24px;
  }
  .st-hero__subtitle {
    font-size: 15px;
  }
  .st-hero__image {
    border-radius: 16px;
  }
  .st-hero__image-wrapper {
    border-radius: 16px;
  }
  .st-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .st-hero__actions .t-btnflex {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .st-features {
    padding: 5px 0 24px;
  }
  .st-features__bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 6px 0;
    border-radius: 14px;
  }
  .st-features__item {
    padding: 10px 12px;
    gap: 10px;
    border-bottom: 1px solid var(--st-border);
  }
  .st-features__item:nth-child(odd) {
    border-right: 1px solid var(--st-border);
  }
  .st-features__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .st-features__icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 10px;
  }
  .st-features__label {
    font-size: 13px;
  }
  .st-features__desc {
    font-size: 12px;
  }
}

/* 320-480px (small phones) */
@media screen and (max-width: 480px) {
  .st-hero {
    padding: 16px 0 5px;
  }
  .st-hero__title {
    font-size: 20px;
  }
  .st-hero__brand {
    font-size: 11px;
  }

  .st-features {
    padding: 5px 0 20px;
  }
  .st-features__bar {
    grid-template-columns: 1fr 1fr;
    padding: 4px 0;
    border-radius: 12px;
  }
  .st-features__item {
    padding: 8px 10px;
    flex-direction: row;
    gap: 8px;
    border-bottom: 1px solid var(--st-border);
  }
  .st-features__item:nth-child(odd) {
    border-right: 1px solid var(--st-border);
  }
  .st-features__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .st-features__icon {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .st-features__label {
    font-size: 11px;
    line-height: 1.3;
  }
  .st-features__desc {
    font-size: 10px;
    line-height: 1.3;
  }
  .st-features__text {
    min-width: 0;
  }
}


  /* ===== Block Reset ===== */
  .st-reviews,
  .st-reviews * { box-sizing: border-box; }
  .st-reviews input,
  .st-reviews textarea,
  .st-reviews select { font: inherit; }

  /* ===== Design Variables ===== */
  .st-reviews {
    --st-orange: #E55B2B;
    --st-orange-light: #FFF3ED;
    --st-text: #1A1A1A;
    --st-text-secondary: #6B6B6B;
    --st-border: #EAEAEA;
    --st-card-bg: #FAFAFA;
    font-family: var(--t-text-font);
    background: #FFFFFF;
    padding: 80px 0 20px;
    position: relative;
    overflow: visible;
  }

  .st-reviews__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
  }

  /* ===== Header ===== */
  .st-reviews__header {
    max-width: 640px;
    margin-bottom: 48px;
  }
  .st-reviews__eyebrow {
    font-family: var(--t-headline-font);
    color: var(--st-orange);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
  }
  .st-reviews__title {
    font-family: var(--t-headline-font);
    color: var(--st-text);
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 32px;
  }
  .st-reviews__subtitle {
    color: var(--st-text-secondary);
    line-height: 1.6;
    font-size: 16px;
  }

  /* ===== Carousel ===== */
  .st-reviews__carousel {
    position: relative;
    overflow: hidden;
    padding: 8px 0;
  }

  .st-reviews__track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    padding: 4px 0;
    width: 100%;
    flex-wrap: nowrap;
    touch-action: pan-y; /* разрешаем вертикальный скролл, отключаем горизонтальный по умолчанию */
  }

  /* ===== Card ===== */
  .st-reviews__card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 280px;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none;
    color: inherit;
    background: var(--st-card-bg);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 24px 24px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
    position: relative;
  }
  .st-reviews__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--st-orange);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .st-reviews__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
  .st-reviews__card:hover::before {
    opacity: 1;
  }

  /* ===== Контент карточки ===== */
  .st-reviews__card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* ===== Card Header ===== */
  .st-reviews__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  .st-reviews__card-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--t-headline-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--st-text-secondary);
    flex-shrink: 0;
    background: #FFFFFF;
    padding: 2px 10px 2px 6px;
    border-radius: 14px;
    border: 1px solid var(--st-border);
  }
  .st-reviews__card-source--avito {
    color: #F26522;
  }
  .st-reviews__card-source--yandex {
    color: #FC3F1D;
  }
  .st-reviews__source-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
  }

  .st-reviews__card-stars {
    color: #F59E0B;
    font-size: 12px;
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }
  .st-reviews__card-stars svg {
    width: 13px;
    height: 13px;
    fill: #F59E0B;
  }

  /* ===== Текст ===== */
  .st-reviews__card-text {
    font-family: var(--t-text-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--st-text);
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    quotes: "«" "»";
    flex: 1;
  }
  .st-reviews__card-text::before {
    content: "«";
    color: var(--st-orange);
    opacity: 0.4;
  }
  .st-reviews__card-text::after {
    content: "»";
    color: var(--st-orange);
    opacity: 0.4;
  }

  /* ===== Images ===== */
  .st-reviews__card-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .st-reviews__card-image {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--st-border);
    background: #FFFFFF;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .st-reviews__card-image:hover {
    transform: scale(1.05);
  }

  /* ===== Footer ===== */
  .st-reviews__card-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--st-border);
    margin-top: auto;
    flex-shrink: 0;
  }
  .st-reviews__card-author {
    font-family: var(--t-headline-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
  }
  .st-reviews__card-product {
    font-family: var(--t-text-font);
    font-size: 12px;
    color: var(--st-text-secondary);
  }

  /* ===== Navigation ===== */
  .st-reviews__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 10;
    margin: 0;
    padding: 0;
    display: block;
  }

  .st-reviews__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--st-border);
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 18px;
    color: var(--st-text);
    font-family: var(--font-sans);
    padding: 0;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .st-reviews__nav-btn:hover {
    background: var(--st-orange-light);
    border-color: var(--st-orange);
    color: var(--st-orange);
  }

  .st-reviews__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  #reviewsPrev {
    left: 10px;
  }

  #reviewsNext {
    right: 10px;
  }

  /* ===== Lightbox ===== */
  .st-reviews__lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 40px;
  }
  .st-reviews__lightbox.active {
    display: flex;
  }
  .st-reviews__lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  .st-reviews__lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    font-family: var(--font-sans);
  }
  .st-reviews__lightbox-close:hover {
    opacity: 1;
  }

  /* ===== Responsive ===== */
  @media screen and (max-width: 1024px) {
    .st-reviews__card {
      flex: 0 0 calc(50% - 12px);
      min-width: 240px;
    }
  }

  @media screen and (max-width: 768px) {
    .st-reviews {
      padding: 60px 0 20px;
    }
    .st-reviews__card {
      flex: 0 0 calc(100% - 0px);
      min-width: 0;
      padding: 20px;
    }
    .st-reviews__track {
      gap: 16px;
    }
    .st-reviews__title {
      font-size: 26px;
    }
    .st-reviews__header {
      margin-bottom: 32px;
    }
    .st-reviews__card-text {
      font-size: 13px;
      -webkit-line-clamp: 5;
    }
    .st-reviews__lightbox {
      padding: 20px;
    }
    .st-reviews__lightbox img {
      max-width: 95%;
      max-height: 95%;
    }
    .st-reviews__lightbox-close {
      top: 16px;
      right: 20px;
      font-size: 32px;
    }

    /* Скрываем кнопки на мобильных */
    .st-reviews__nav {
      display: none !important;
    }

    #reviewsPrev {
      left: -4px;
    }
    #reviewsNext {
      right: -4px;
    }
    .st-reviews__nav-btn {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
  }

  @media screen and (max-width: 480px) {
    .st-reviews {
      padding: 40px 0 20px;
    }
    .st-reviews__card {
      padding: 16px;
    }
    .st-reviews__card-image {
      width: 48px;
      height: 48px;
    }
    .st-reviews__card-text {
      font-size: 12px;
      -webkit-line-clamp: 6;
    }
    .st-reviews__card-author {
      font-size: 14px;
    }
    .st-reviews__card-product {
      font-size: 11px;
    }
    .st-reviews__nav-btn {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }
    #reviewsPrev {
      left: 0px;
    }
    #reviewsNext {
      right: 0px;
    }
  }


  /* ===== Block Reset ===== */
  .st-about-contacts,
  .st-about-contacts * { box-sizing: border-box; }

  /* ===== Design Variables ===== */
  .st-about-contacts {
    --st-orange: #fd924a;
    --st-orange-light: #fff3ed;
    --st-dark: #1a1a1a;
    --st-text: #1a1a1a;
    --st-text-secondary: #6b6b6b;
    --st-border: #eaeaea;
    --st-card-bg: #fafafa;
    --st-white: #ffffff;
    font-family: var(--t-text-font);
    background: var(--st-white);
    padding: 80px 0;
    position: relative;
  }

  .st-about-contacts__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .st-about-contacts__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
  }

  /* ===== Левая колонка — О магазине ===== */
  .st-about-contacts__about {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .st-about-contacts__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .st-about-contacts__eyebrow {
    font-family: var(--t-headline-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--st-orange);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
  }

  .st-about-contacts__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--t-text-font);
    font-weight: 400;
    font-size: 13px;
    color: var(--st-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
  }
  .st-about-contacts__link:hover {
    color: var(--st-orange);
  }
  .st-about-contacts__link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    stroke: var(--st-text-secondary);
  }
  .st-about-contacts__link:hover svg {
    transform: translateX(3px);
    stroke: var(--st-orange);
  }

  .st-about-contacts__title {
    font-family: var(--t-headline-font);
    font-weight: 600;
    font-size: 32px;
    color: var(--st-dark);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
  }

  /* ===== Текст с гиперссылками ===== */
  .st-about-contacts__text {
    flex: 1;
    font-family: var(--t-text-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--st-text);
    margin-bottom: 0;
  }
  .st-about-contacts__text p {
    margin-bottom: 16px;
  }
  .st-about-contacts__text p:last-child {
    margin-bottom: 0;
  }

  .st-about-contacts__text .st-about-contacts__brand-link {
    color: var(--st-orange);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    border-bottom: 1px solid transparent;
  }
  .st-about-contacts__text .st-about-contacts__brand-link:hover {
    color: var(--st-dark);
    border-bottom-color: var(--st-orange);
  }

  /* ===== Кнопка и соцсети ===== */
  .st-about-contacts__socials-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 0;
  }

  .st-about-contacts__socials-left .st-about-contacts__social-label {
    font-family: var(--t-text-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--st-dark);
    margin-bottom: 4px;
  }

  .st-about-contacts__social-item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--st-text);
    transition: color 0.2s ease;
  }
  .st-about-contacts__social-item:hover {
    color: var(--st-orange);
  }

  .st-about-contacts__social-item .st-about-contacts__social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-white);
    border: 1.5px solid var(--st-border);
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .st-about-contacts__social-item:hover .st-about-contacts__social-link {
    background: var(--st-orange);
    border-color: var(--st-orange);
    transform: scale(1.05);
  }
  .st-about-contacts__social-item:hover .st-about-contacts__social-link img {
    filter: brightness(0) invert(1);
  }
  .st-about-contacts__social-item .st-about-contacts__social-link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter 0.2s ease;
  }

  .st-about-contacts__social-item .st-about-contacts__social-name {
    font-family: var(--t-text-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--st-text);
  }
  .st-about-contacts__social-item:hover .st-about-contacts__social-name {
    color: var(--st-orange);
  }

  .st-about-contacts__social-item .st-about-contacts__social-desc {
    font-family: var(--t-text-font);
    font-size: 13px;
    color: var(--st-text-secondary);
    display: block;
  }

  /* ===== Иконка Яндекс Карт — КРАСНАЯ ===== */
  .st-about-contacts__yandex-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #ff0000;
  }
  .st-about-contacts__yandex-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
  .st-about-contacts__social-item:hover .st-about-contacts__yandex-icon {
    color: #ffffff;
  }

  /* ===== Кнопка по центру ===== */
  .st-about-contacts__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 0;
  }

  .st-about-contacts__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--t-headline-font);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 10px 24px;
    border-radius: 25px;
  }

  .st-about-contacts__btn--primary {
    color: #ffffff !important;
    background: var(--st-orange);
    border: 2px solid var(--st-orange);
  }
  .st-about-contacts__btn--primary:hover {
    background: transparent;
    color: var(--st-orange) !important;
    opacity: 1;
  }

  .st-about-contacts__btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
  }
  .st-about-contacts__btn:hover svg {
    transform: translateX(4px);
  }

  /* ===== Правая колонка — Контакты ===== */
  .st-about-contacts__contacts {
    background: var(--st-card-bg);
    border: 1px solid var(--st-border);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .st-about-contacts__map {
    width: 100%;
    height: 280px;
    background: #e8e8e8;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .st-about-contacts__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .st-about-contacts__info {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }
  .st-about-contacts__info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .st-about-contacts__info-label {
    font-family: var(--t-text-font);
    font-size: 12px;
    color: var(--st-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .st-about-contacts__info-value {
    font-family: var(--t-text-font);
    font-size: 16px;
    color: var(--st-text);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .st-about-contacts__info-value:hover {
    color: var(--st-orange);
  }
  .st-about-contacts__info-value--phone {
    font-weight: 600;
    font-size: 18px;
  }

  /* ===== Responsive ===== */
  @media screen and (max-width: 960px) {
    .st-about-contacts {
      padding: 60px 0;
    }
    .st-about-contacts__grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .st-about-contacts__map {
      height: 240px;
    }
    .st-about-contacts__text {
      flex: none;
    }
  }

  @media screen and (max-width: 640px) {
    .st-about-contacts {
      padding: 48px 0;
    }
    .st-about-contacts__title {
      font-size: 26px;
    }
    .st-about-contacts__text {
      font-size: 15px;
    }
    .st-about-contacts__map {
      height: 200px;
    }
    .st-about-contacts__info {
      padding: 20px;
    }
    .st-about-contacts__info-value--phone {
      font-size: 16px;
    }
    .st-about-contacts__header-row {
      flex-direction: column;
      align-items: flex-start;
    }
    .st-about-contacts__btn {
      width: 100%;
      justify-content: center;
    }
  }

  @media screen and (max-width: 480px) {
    .st-about-contacts {
      padding: 36px 0;
    }
    .st-about-contacts__title {
      font-size: 22px;
    }
    .st-about-contacts__map {
      height: 180px;
    }
    .st-about-contacts__info {
      padding: 16px;
    }
    .st-about-contacts__info-value {
      font-size: 14px;
    }
    .st-about-contacts__info-value--phone {
      font-size: 15px;
    }
  }

/* ==================================================================
   New sections not present in the ported .st-* blocks: header shell,
   brand tiles, popups (callback/trade-in), static-page cards, mobile
   menu toggle. Header/footer *component* styling (menu links, t420,
   buttons, social links) comes from vendor/tilda-blocks-page.min.css
   + the other vendor/*.css files — this block only adds page-level
   layout around them.
   ================================================================== */

/* Header — ported from the live instance's #rec2428403321-scoped <style> block
   (the values below aren't in vendor/tilda-blocks-page.min.css: they're the
   per-instance customization Tilda bakes inline, e.g. logo width, colors,
   min-height, link typography, button color). Structural layout (flex split
   between logowrapper/leftwrapper/rightwrapper) comes from the vendor CSS —
   this block only supplies the configured look. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header.t-menu-base,
.site-header .t-menu-base__maincontainer {
  min-height: 68px;
  background-color: #ffffff;
}
@media (min-width: 1451px) {
  /* Desktop nav row only (below this the burger menu takes over, see the
     1450px breakpoint further down) — cap the header at the same width AND
     side padding as page content (.container-page), so its edges line up
     with the homepage content instead of spanning the full viewport.
     Narrowing from 100vw down to 1200px leaves less room for the nav row,
     so gaps are tightened here too (verified in a real screenshot) to keep
     all 6 links on one line instead of wrapping. */
  .site-header .t-menu-base__maincontainer {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 10px 16px !important;
  }
  .site-header .t-menu-base__list {
    gap: 10px 12px !important;
  }
  .site-header a.t-menu__link-item {
    font-size: 15px !important;
  }
}
.site-header.t-menu-base {
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.site-header .t-menu-base__imglogo {
  max-width: 150px;
  width: 150px;
}
.site-header a.t-menu__link-item {
  font-size: 18px;
  font-weight: 600;
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@media (hover: hover) {
  .site-header .t-menu__link-item:not(.t-active):not(.tooltipstered):hover { color: #606060 !important; }
}
.site-header .t-btnflex.t-btnflex_type_button {
  color: #ffffff;
  background-color: #fc924c;
  border-style: none !important;
  border-radius: 50px;
  box-shadow: none !important;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.site-header .t-btnflex.t-btnflex_type_button:hover { background-color: #e5813e; }
.site-header .t-menu-burger span { background-color: #000000; }

/* Cart badge — vendor CSS ships an unstyled <span> for this; without position:absolute
   it wraps onto its own line below the 19px-wide icon box instead of sitting on its
   corner (the reported "count appears below the icon" bug). The parent
   .t-menuwidgeticons__img is already position:relative (vendor CSS), so anchor here. */
.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 30px;
  background: #fc924c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Site search (header) — a compact icon toggle, not a persistent input: the header row is
   already at its width budget (see the 1450px breakpoint note above listing everything
   that has to fit on one line), so anything wider than an icon-sized element here reflows
   the whole row. The actual input lives in a dropdown panel opened on click. */
.site-search { position: relative; flex-shrink: 0; }
.site-search__toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-search__toggle:hover, .site-search__toggle.is-open { background: #f3f3f3; color: #fc924c; }
.site-search__panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 300;
  padding: 10px;
}
.site-search__panel.is-open { display: block; }
.site-search__form { position: relative; }
.site-search__input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 14px;
  background: #fafafa;
  box-sizing: border-box;
}
.site-search__input:focus { outline: none; border-color: #fc924c; background: #fff; }
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search__btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.site-search__btn:hover { color: #fc924c; }
.site-search__results:not(:empty) { margin-top: 8px; border-top: 1px solid var(--color-border); }
.site-search__list { max-height: 360px; overflow-y: auto; }
.site-search__item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.site-search__item:hover { background: #fafafa; }
.site-search__item-thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--color-border); flex-shrink: 0; overflow: hidden; }
.site-search__item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.site-search__item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-search__item-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search__item-price { font-size: 13px; font-weight: 700; color: #fc924c; }
.site-search__all { display: block; padding: 10px 6px 2px; font-size: 13px; font-weight: 600; color: #fc924c; text-align: center; }
.site-search__all:hover { text-decoration: underline; }
.site-search__empty { padding: 10px 6px 2px; font-size: 13px; color: var(--color-muted); text-align: center; }
@media (max-width: 480px) {
  .site-search__panel { position: fixed; top: 68px; left: 12px; right: 12px; width: auto; max-width: none; }
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 1450px) {
  /* Below this width the 6 nav items + logo + cart + call button no longer
     fit on one row (verified: wraps to 2 lines starting ~1400-1450px) —
     switch to the burger menu here instead of an awkward mid-size wrap.
     We replicate Tilda's own #rec2428403321 desktop nav (not the separate
     .tmenu-mobile topbar it normally swaps in below 960px, which we don't
     build), so every rule below exists to force a single flex row —
     logo, then cart+call pushed right via margin-left:auto, then the
     burger — overriding vendor CSS that otherwise assumes the topbar swap
     (columns, hidden logo/cart, auto margins fighting each other). */
  /* CSS Grid, not flex: the flex cascade from vendor CSS (auto margins,
     flex-direction:column below 960px, order) kept fighting our overrides
     in ways that either overflowed the viewport or pushed the burger
     button off-screen. Grid with explicit columns sidesteps all of that —
     elements vendor CSS sets display:none on simply vacate their column. */
  .menu-toggle { display: inline-flex; }
  .site-header .t-menu-base__maincontainer {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .site-header .t-menu-base__logowrapper {
    grid-column: 1;
    margin-bottom: 0 !important;
  }
  .site-header .t-menu-base__list { display: none; width: 100%; }
  .site-header .t-menu-base__list.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    padding: 8px 20px 16px;
    gap: 4px;
    z-index: 99;
  }
  .site-header .t-menu-base__leftwrapper { display: none !important; }
  .site-header .t-menu-base__rightwrapper {
    grid-column: 2;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
  }
  .site-header .t-menu-base__additionalwrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Vendor CSS hides this cart icon copy below 960px, assuming the separate
     mobile topbar carries its own — bring it back since we have only one. */
  .site-header .t-menu-base__maincontainer .t-menuwidgeticons__wrapper {
    display: flex !important;
    margin: 0 !important;
  }
  .site-header .t-btnflex__text { display: none; }
  .site-header .t-btnflex.t-btnflex_type_button {
    padding: 0; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .site-header .t-btnflex.t-btnflex_type_button::before {
    content: "📞";
    font-size: 16px;
  }
  .menu-toggle { grid-column: 3; }
}
@media (max-width: 640px) {
  .site-header .t-menu-base__maincontainer { padding-left: 16px !important; padding-right: 16px !important; }
  .site-header .t-menu-base__imglogo { max-width: 100px !important; width: 100px !important; }
}

/* Footer — ported from the live instance's #rec2440999621-scoped <style> block:
   titles are grey/uppercase (vendor default is white), descriptions/links are
   white; vendor CSS has no rule at all for the <ul>/<li> link lists (the real
   page never used them inside t420 on the page whose CSS we captured), so
   that part is ours. */
#t-footer .t420__title {
  color: #525252 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#t-footer .t420__title a { color: inherit; }
#t-footer .t420__descr { color: #ffffff; }
#t-footer .t420__descr ul { list-style: none; margin: 0; padding: 0; }
#t-footer .t420__descr li { margin-bottom: 8px; }
#t-footer .t420__descr a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease-in-out;
}
#t-footer .t420__descr a:hover { color: #ffffff; }
#t-footer .t420__text { color: #767676; line-height: 1.6; }
#t-footer .t-sociallinks__wrapper { display: flex; gap: 14px; margin: 16px 0; padding: 0; }
#t-footer .t-sociallinks__item a { display: inline-flex; opacity: 0.85; transition: opacity 0.2s ease-in-out; }
#t-footer .t-sociallinks__item a:hover { opacity: 1; }
#t-footer .t420__logo { max-width: 120px; margin-bottom: 4px; }

/* Section header row: title + trailing link (e.g. category grid "Смотреть все →") */
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-header .section-title { margin-bottom: 0; }
.section-link { font-weight: 600; font-size: 15px; color: var(--st-orange, var(--color-accent)); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* Category tiles (homepage) — driven by Category.objects, styled after the reference site's t396 zero-block category grid */
.category-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--st-card-bg, #fafafa);
  border: 1px solid var(--st-border, var(--color-border));
  border-radius: 20px;
  padding: 24px;
  min-height: 220px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.category-tile:hover { border-color: var(--st-orange, #fd924a); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.category-tile__info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.category-tile__name { font-weight: 800; font-size: 20px; color: var(--st-dark, var(--color-text)); }
.category-tile__price { font-weight: 600; font-size: 14px; color: var(--st-text-secondary, var(--color-muted)); }
.category-tile__image { position: absolute; right: -8px; bottom: -8px; max-width: 62%; max-height: 78%; object-fit: contain; pointer-events: none; }
@media (max-width: 860px) { .category-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .category-tiles { grid-template-columns: 1fr; } }

/* Popups: callback / trade-in */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.popup.is-open { display: flex; }
.popup__panel {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}
.popup__title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.popup__subtitle { color: var(--color-muted); font-size: 14px; margin-bottom: 20px; }

/* Static page structural sections (warranty cards + callout) */
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 24px 0 32px; }
.info-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  background: #fafafa;
}
.info-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--st-orange-light, #fff3ed);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.info-card__icon--solid { background: #fc924c; border-radius: 50%; color: #fff; }
.info-card__title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.info-card__text { color: var(--color-muted); font-size: 14px; }

.callout {
  border-radius: 16px;
  padding: 20px 24px;
  background: #fc924c;
  color: #fff;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 1.6;
}
.callout__icon { font-size: 20px; flex-shrink: 0; }

.legal-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-muted);
}

/* Checkout: delivery method radio group */
.radio-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.radio-option {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; font-size: 14px;
}
.radio-option input { accent-color: var(--color-accent); }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-muted); margin-bottom: 14px; }
.checkbox-row input { margin-top: 3px; accent-color: var(--color-accent); }