/* 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: #fd924a;
  --color-accent-dark: #e57f3a;
  --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-addtocart { background: #7ed957; color: #0d3b16; padding: 16px 32px; font-size: 17px; font-weight: 700; }
.btn-addtocart:hover { background: #6bcf45; }
.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(253,146,74,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(4, 1fr);
  gap: 40px 20px;
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } }
@media (max-width: 380px) { .product-grid { gap: 20px 8px; } }
.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;
  -webkit-overflow-scrolling: touch;
}
.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);
  border: 2px solid var(--st-orange, #fd924a);
}
.banner-gallery__image { width: 100%; height: 100%; object-fit: cover; object-position: left center; 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) {
  /* Fixed mobile heights (previous approach) didn't match these wide banners' real
     proportions — cover cropped most of the image away, and contain left big blank
     bars. Deriving the height from each tier's own desktop ratio instead means the
     box always matches the image's actual shape, so cover needs only a hairline
     crop (if any) with zero dead space, at any screen width. */
  .banner-gallery[data-active-size="sm"] .banner-gallery__track { height: auto; aspect-ratio: 5.4 / 1; }
  .banner-gallery[data-active-size="md"] .banner-gallery__track { height: auto; aspect-ratio: 3.15 / 1; }
  .banner-gallery[data-active-size="lg"] .banner-gallery__track { height: auto; aspect-ratio: 2.25 / 1; }
  .banner-gallery[data-active-size="xl"] .banner-gallery__track { height: auto; aspect-ratio: 1.8 / 1; }
  /* Banners with a dedicated mobile_image (text-on-top/photo-below recomposition)
     override the tier-based ratio above with their own actual proportions. */
  .banner-gallery[data-active-mobile-optimized="1"] .banner-gallery__track {
    height: auto;
    aspect-ratio: var(--mobile-ratio, 4 / 5);
  }
}
.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; }
/* Scoped to real-mouse devices only: on touch, :hover has no mouseleave to clear it,
   so a tap could leave the hover photo stuck at opacity:1 on top of the main one. */
@media (hover: hover) and (pointer: fine) {
  .store-card:hover .store-card__image--hover { opacity: 1; }
  .store-card:hover .store-card__image:not(.store-card__image--hover) { opacity: 0; }
}
.store-card__tags { position: absolute; top: 10px; right: 10px; left: 10px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; 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;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-card__badge {
  background: var(--st-dark, #111);
  color: #fff;
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.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; } }

.popular-products--home .store-card { flex-basis: 170px; }
.popular-products--home .store-card__imgwrap { border-radius: 12px; }
.popular-products--home .store-card__body { padding-top: 10px; }
.popular-products--home .store-card__title { font-size: 12px; }
.popular-products--home .store-card__footer { padding-top: 8px; }
.popular-products--home .store-card__price { font-size: 14px; }
.popular-products--home .store-card__price-old { font-size: 11px; }
.popular-products--home .store-card__cart-btn { width: 32px; height: 32px; }
@media (max-width: 640px) { .popular-products--home .store-card { flex-basis: 140px; } }

/* Catalog layout — styled after the reference site's t-catalog widget (filters sidebar + numbered pagination) */
.catalog-parts {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catalog-parts::-webkit-scrollbar { display: none; }
.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;
  flex-shrink: 0;
  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 { position: relative; }
.product-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); border: 1px solid var(--color-border); aspect-ratio: 1 / 1; background: #fff;
}
.product-gallery__track::-webkit-scrollbar { display: none; }
.product-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; }
.product-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); z-index: 2;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.product-gallery__nav-btn:hover { border-color: #fc924c; color: #fc924c; }
.product-gallery__nav-btn--prev { left: 10px; }
.product-gallery__nav-btn--next { right: 10px; }
@media (max-width: 860px) { .product-gallery__nav-btn { display: none; } }
.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: contain; display: block; padding: 4px; box-sizing: border-box; }
.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: 16px; font-weight: 800; color: var(--color-text); 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: 48px; height: 48px; min-width: 48px; padding: 0; border-radius: 50%; border-width: 2px; }
.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 { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

.price-block { display: flex; align-items: baseline; gap: 10px; font-size: 32px; font-weight: 800; margin: 16px 0; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }

.product-buy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr); gap: 28px; align-items: start; margin-top: 4px; }
.product-buy-row__options { min-width: 0; }
.product-buy-row__buybox {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: 14px; border: 1px solid var(--color-border);
  background: var(--st-card-bg, #fafafa); position: sticky; top: 84px;
}
.product-buy-row__buybox .price-block { margin: 0 0 4px; }
.product-buy-row__buybox .product-actions { margin-top: 8px; width: 100%; }
.product-buy-row__buybox .product-actions,
.product-buy-row__buybox .js-cart-add-form,
.product-buy-row__buybox .btn { width: 100%; }
@media (max-width: 640px) {
  .product-buy-row { grid-template-columns: 1fr; }
  .product-buy-row__buybox { width: 100%; position: static; }
}

.product-bundles { padding-top: 48px; }
.bundle-row {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 24px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--st-card-bg, #fafafa);
}
.bundle-media {
  flex: 0 0 220px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; border: 2px solid var(--color-text); border-radius: 12px; background: #fff; min-height: 220px;
}
.bundle-media img { max-width: 100%; max-height: 160px; object-fit: contain; }
.bundle-media__name { margin-top: 14px; font-size: 13px; color: var(--color-muted); text-align: center; }
.bundle-media__price { margin-top: 4px; font-size: 16px; font-weight: 800; text-align: center; }

.bundle-card { flex: 1 1 480px; min-width: 0; }
.bundle-card__title { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.bundle-card__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--color-border); margin-bottom: 28px; }
.bundle-card__tab {
  background: none; border: none; padding: 0 0 12px; font-size: 16px; font-weight: 700;
  color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bundle-card__tab:hover { color: var(--color-text); }
.bundle-card__tab.is-active { color: var(--st-orange, #fd924a); border-bottom-color: var(--st-orange, #fd924a); }
.bundle-card__panel { display: none; }
.bundle-card__panel.is-active { display: block; }
.bundle-card__price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--color-border);
}
.bundle-card__price-col { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.bundle-card__price-label { flex-basis: 100%; font-size: 13px; color: var(--color-muted); margin-bottom: 4px; }
.bundle-card__price { font-size: 28px; font-weight: 800; }
.bundle-card__price-row .btn-addtocart { padding: 12px 26px; font-size: 15px; }

.bundle-card__items-label {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-muted); background: #fff; border: 1px solid var(--color-border);
}
.bundle-card__items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.bundle-plus { align-self: center; font-size: 22px; font-weight: 800; color: var(--color-muted); line-height: 1; }
.bundle-slot {
  width: 150px; border: 2px solid var(--color-text); border-radius: 12px; background: #fff; padding: 12px;
  display: flex; flex-direction: column;
}
.bundle-slot__imgwrap {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  border-radius: 8px; background: var(--st-card-bg, #fafafa); overflow: hidden;
}
.bundle-slot__imgwrap img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.bundle-slot__name {
  display: block; font-size: 13px; margin-top: 10px; line-height: 1.35; min-height: 52px;
  color: var(--color-text); text-decoration: none;
}
.bundle-slot__name:hover { color: var(--st-orange, #fd924a); }
.bundle-slot__price { display: block; font-weight: 700; margin-top: auto; padding-top: 4px; }
.bundle-slot__swatches { display: flex; gap: 8px; margin-top: 10px; }
.bundle-slot__swatch {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border);
}
.bundle-slot__swatch.is-selected { box-shadow: 0 0 0 2px var(--st-orange, #fd924a); }

@media (max-width: 860px) {
  .bundle-row { flex-direction: column; }
  .bundle-media { flex-basis: auto; width: 100%; }
  .bundle-card { width: 100%; min-width: 0; }
  .bundle-card__items {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin: 0 -4px; padding: 4px 4px 8px; scrollbar-width: none; -ms-overflow-style: none;
  }
  .bundle-card__items::-webkit-scrollbar { display: none; }
  .bundle-slot { flex: 0 0 150px; scroll-snap-align: start; }
  .bundle-plus { flex: 0 0 auto; }
}

.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__title { font-size: 15px; font-weight: 800; margin: 0 0 2px; }
.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__meta { color: var(--color-muted); text-align: right; white-space: nowrap; }
.delivery-block__meta strong { color: var(--color-text); font-weight: 700; }

.trade-in-cta {
  display: block; width: 100%; margin-top: 12px; padding: 16px; border-radius: 12px;
  background: var(--st-card-bg, #fafafa); border: 1px solid var(--color-border);
  font-size: 15px; font-weight: 700; color: var(--color-text); text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.trade-in-cta:hover { border-color: #fc924c; color: #fc924c; }

.addon-services { margin-top: 44px; }
.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); }

.addon-services__warranty { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.addon-service--compact { padding: 8px 12px; }
.addon-service--compact .addon-service__name { font-size: 13px; }
.addon-service--compact .addon-service__price { font-size: 12px; }
.addon-service--compact .addon-service__switch { width: 34px; height: 20px; }
.addon-service--compact .addon-service__slider::before { width: 14px; height: 14px; }
.addon-service--compact .addon-service__switch input:checked + .addon-service__slider::before { transform: translateX(14px); }

.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; }

/* Product page tabs (Описание / Характеристики / Доставка и самовывоз) */
.product-tabs__nav {
  display: flex; gap: 20px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  border-bottom: 1px solid var(--color-border); margin-bottom: 24px;
}
.product-tabs__nav::-webkit-scrollbar { display: none; }
.product-tabs__btn {
  padding: 12px 4px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent;
  background: none; font-size: 15px; font-weight: 600; color: var(--color-muted); cursor: pointer;
  flex-shrink: 0; white-space: nowrap;
}
.product-tabs__btn:hover { color: var(--color-text); }
.product-tabs__btn.is-active { color: var(--color-text); border-bottom-color: #fc924c; }
.product-tabs__panel { display: none; }
.product-tabs__panel.is-active { display: block; }

.product-description { position: relative; }
.product-description.is-collapsed { max-height: 260px; overflow: hidden; }
.product-description.is-collapsed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-bg));
}
.product-description__toggle {
  margin-top: 12px; padding: 10px 20px; border: 1px solid var(--color-border); border-radius: 50px;
  background: none; font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer;
}
.product-description__toggle:hover { border-color: #fc924c; color: #fc924c; }

/* 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; }

@media (max-width: 640px) {
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { position: relative; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
  .cart-table td { padding: 4px 0; border-bottom: none; }
  .cart-item__info { margin-bottom: 8px; padding-right: 90px; }
  .cart-table td:nth-child(2) { color: var(--color-muted); font-size: 14px; }
  .cart-table td:nth-child(2)::before { content: "Цена: "; }
  .cart-table td:nth-child(3) { margin: 8px 0; }
  .cart-table td:nth-child(4) { font-weight: 700; }
  .cart-table td:nth-child(4)::before { content: "Сумма: "; }
  .cart-table td:nth-child(5) { position: absolute; top: 16px; right: 0; width: auto; padding: 0; }
}
.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); }

.error-page { text-align: center; padding: 80px 20px; max-width: 480px; margin: 0 auto; }
.error-page__code { font-size: 72px; font-weight: 800; color: #fc924c; line-height: 1; }
.error-page__title { font-size: 24px; font-weight: 800; margin: 16px 0 10px; }
.error-page__text { color: var(--color-muted); margin-bottom: 28px; }
.error-page__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 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; }
.product-tabs__panel .prose { max-width: none; }
.prose h2 { margin-top: 1.5em; }

.legal-accordion { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.legal-accordion__item { border: 1px solid var(--color-border); border-radius: 12px; padding: 4px 20px; }
.legal-accordion__summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.legal-accordion__summary::-webkit-details-marker { display: none; }
.legal-accordion__summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--color-muted); flex-shrink: 0; transition: transform 0.2s ease; }
.legal-accordion__item[open] .legal-accordion__summary::after { content: "−"; }
.legal-accordion__body { padding: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.legal-accordion__body ul { padding-left: 20px; margin: 10px 0; }
.legal-accordion__body li { margin-bottom: 6px; }
.legal-accordion__body a { color: #fc924c; }
.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,
.st-hero__title-accent {
  color: var(--st-orange);
}
.st-hero__title-accent {
  display: block;
}
.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__actions .t-btnflex {
  border-radius: 50px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.st-hero__actions .t-btnflex_md {
  background-color: var(--st-orange);
  color: #fff;
}
.st-hero__actions .t-btnflex_md:hover { background-color: #e5813e; }
.st-hero__actions .t-btnflex_sm {
  background-color: transparent;
  color: var(--st-dark);
  border-width: 1px;
  border-color: var(--st-dark);
}
.st-hero__actions .t-btnflex_sm:hover { border-color: var(--st-orange); color: var(--st-orange); }
.st-hero__image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
}
.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: 10px;
  padding: 8px 14px;
  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
   ============================================= */
@media screen and (min-width: 961px) {
  .st-features__label {
    font-size: 14px;
    white-space: nowrap;
  }
}


/* 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;
    padding: 8px 0;
  }

  .st-reviews__track {
    display: flex;
    gap: 24px;
    padding: 4px 2px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .st-reviews__track::-webkit-scrollbar { display: none; }

  /* ===== 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;
    scroll-snap-align: start;
  }
  .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;
    }

    #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.
   ================================================================== */

/* Utility bar above the main header (secondary nav links / hours / phone) — plain custom
   markup, not part of the Tilda t-menu-base export, so free of its breakpoint constraints.
   Deliberately NOT sticky: only the main header below floats on scroll, matching the
   simplest reading of "floating like technolab" without touching the header's already
   carefully-tuned sticky/breakpoint behaviour. Hidden below the burger breakpoint — the
   same 5 links stay reachable there via the (unchanged) mobile burger dropdown, which
   still lists all 6 links including "Товары"; only ≥1241px hides that list in favour of
   this bar + the dedicated "Каталог" button (see the .t-menu-base__list override below). */
.site-topbar { background: #f7f7f7; color: var(--color-muted, #6b7280); font-size: 13px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.site-topbar__inner {
  max-width: var(--container); margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-topbar__links { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-topbar__links a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.site-topbar__links a:hover, .site-topbar__links a.is-active { color: #fc924c; }
.site-topbar__right { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.site-topbar__hours { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.site-topbar__phone { color: var(--color-text, #16181d); font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-topbar__phone:hover { color: #fc924c; }
@media (max-width: 1240px) {
  .site-topbar { display: none; }
}

/* Bottom tab bar (mobile only) — technolab-style fixed app nav. Only 3 tabs: STORY has
   no wishlist or customer-account system (those are technolab-only extras), so Главная/
   Каталог/Корзина is the full set of real destinations, not a partial copy. */
.site-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: #ffffff;
  border-top: 1px solid var(--color-border, #e5e7eb);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  padding: 8px 12px;
}
.site-bottom-nav__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-muted, #6b7280);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.site-bottom-nav__item.is-active,
.site-bottom-nav__item:hover { color: #fc924c; }
.site-bottom-nav__icon-wrap { position: relative; display: inline-flex; }
.site-bottom-nav__icon-wrap .cart-badge { top: -6px; right: -10px; }
@media (max-width: 1240px) {
  .site-bottom-nav { display: flex; align-items: center; justify-content: space-around; }
  .container-page { padding-bottom: 96px !important; }
}

/* Floating "contact us" button (bottom-right) — collapsed to a single round toggle; tapping
   it reveals Telegram + call as two labelled pills stacked above it, each a real link (not a
   JS-only popup) so they work with the phone dialer / Telegram app the same as any other tel:
   or https://t.me link on the site. Positioned above .site-bottom-nav on mobile so it doesn't
   sit on top of the tab bar; sits at a plain bottom-right margin on desktop where there's no
   bottom nav to clear. */
.contact-fab {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media (max-width: 1240px) {
  .contact-fab { bottom: 84px; }
}
.contact-fab__toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #fc924c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.contact-fab__toggle:hover { transform: scale(1.06); }
.contact-fab__toggle-icon-close { display: none; }
.contact-fab.is-open .contact-fab__toggle-icon-open { display: none; }
.contact-fab.is-open .contact-fab__toggle-icon-close { display: block; }
.contact-fab__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.contact-fab.is-open .contact-fab__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.contact-fab__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 26px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: var(--color-text, #16181d);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: box-shadow 0.2s ease;
}
.contact-fab__item:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.contact-fab__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-fab__icon img { border-radius: 50%; }

/* In-site chat (one of the contact-fab options) — lazy-loaded via htmx only once the
   visitor actually clicks "Написать нам", so no chat session/polling exists for anyone who
   never opens it. Closing just empties #chatPanelMount, which removes the polling element
   from the DOM and stops its htmx interval along with it — no extra JS needed for that. */
.chat-panel-mount:empty { display: none; }
.chat-panel {
  width: 300px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 48px -8px rgba(0, 11, 48, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fc924c;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.chat-panel__header-who { display: flex; align-items: center; gap: 10px; }
.chat-panel__avatar { width: 32px; height: 32px; border-radius: 50%; display: block; flex-shrink: 0; }
.chat-panel__header-text { display: flex; flex-direction: column; line-height: 1.3; }
.chat-panel__header-name { font-size: 14px; }
.chat-panel__header-status { font-size: 11px; font-weight: 400; opacity: 0.85; }
.chat-panel__header-status::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #6bdb7a; margin-right: 4px; vertical-align: middle;
}
.chat-panel__contact-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border); }
.chat-panel__contact-hint { margin: 0; font-size: 12px; color: var(--color-muted); }
.chat-panel__contact-input { padding: 8px 10px; font-size: 13px; }
.chat-panel__contact-submit { padding: 8px; font-size: 13px; }
.chat-panel__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.chat-panel__messages {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafafa;
}
.chat-panel__empty { margin: auto; color: var(--color-muted); font-size: 13px; text-align: center; }
.chat-widget__msg { display: flex; }
.chat-widget__msg--customer { justify-content: flex-end; }
.chat-widget__msg--staff { justify-content: flex-start; align-items: flex-start; flex-direction: column; }
.chat-widget__bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.chat-widget__msg--customer .chat-widget__bubble { background: #fc924c; color: #fff; border-bottom-right-radius: 4px; }
.chat-widget__msg--staff .chat-widget__bubble { background: #fff; border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.chat-widget__time { font-size: 10px; color: var(--color-muted); margin-top: 2px; padding: 0 4px; }
.chat-widget__image { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: cover; cursor: zoom-in; }
.chat-panel__error { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #ffefef; color: #ba2121; font-size: 12px; text-align: center; }
.chat-panel__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--color-border);
  background: #fff;
}
.chat-panel__file-input { display: none; }
.chat-panel__attach {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f7f7f7;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-panel__attach:hover { background: #fff3ed; color: #fc924c; }
.chat-panel__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
}
.chat-panel__input:focus { outline: 2px solid #fc924c; outline-offset: -1px; }
.chat-panel__send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #fc924c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-panel__send:hover { background: #e5813e; }

/* Sticky top area on mobile: just the header row now (logo + search, single line — see the
   rightwrapper override below that hides the burger/cart/call cluster and puts .mobile-search
   in their place). The category strip lives OUTSIDE this wrapper (see .mobile-catalog-strip
   further down) so it stays in normal flow and scrolls away with the page instead of pinning
   too — only logo+search float, matching technolab's actual layout and keeping the sticky
   band as short as possible so it covers as little of the page as it can while scrolling. */
.site-header-sticky { position: sticky; top: 0; z-index: 100; }

/* Mobile search lives inline in the header's own row (inside .t-menu-base__rightwrapper,
   next to the logo — see the rightwrapper rules below), not as a separate stacked band —
   technolab's mobile header is a single row of logo+search, nothing else. Desktop (>1240px)
   already has its own always-visible search bar (see .site-header .site-search rules), so
   this stays hidden there. */
.mobile-search-wrap { display: none; }
@media (max-width: 1240px) {
  .mobile-search-wrap { display: block; flex: 1 1 auto; width: 100%; min-width: 0; }
  /* .catalog-parts already renders once per catalog/product page inside <main>; this
     media query hides only THAT copy (matched via its .container-page ancestor) so the
     new .mobile-catalog-strip copy below the header is the only one visible on mobile. */
  .container-page > .catalog-parts { display: none; }
}
.mobile-search { position: relative; }
.mobile-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.mobile-search__input {
  width: 100%; height: 36px; padding: 0 16px 0 40px; border: none;
  border-radius: 18px; font-size: 14px; background: #fff; box-sizing: border-box;
}
.mobile-search__input:focus { outline: 2px solid #fc924c; outline-offset: -1px; }
.mobile-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mobile-search__results:not(:empty) {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); padding: 10px; z-index: 300;
}

/* Flatter, borderless category strip for the mobile header specifically — the pill/border
   look of .catalog-parts__item (used on catalog pages) reads as busy up here; technolab's
   equivalent is just an icon-over-label list on a plain background. */
.mobile-catalog-strip {
  display: none;
  background: #ffffff; border-bottom: 1px solid var(--color-border, #e5e7eb);
  padding: 10px 16px;
}
@media (max-width: 1240px) {
  .mobile-catalog-strip { display: block; }
}
.mobile-catalog-strip .catalog-parts { gap: 20px; margin-bottom: 0; }
.mobile-catalog-strip .catalog-parts__item {
  flex-direction: column; gap: 4px; border: none; padding: 0; border-radius: 0;
  font-size: 12px; text-align: center;
}
.mobile-catalog-strip .catalog-parts__item.is-active { border: none; }
/* "Все товары" (the synthetic first entry _catalog_parts.html always renders before looping
   nav_categories) doesn't have its own icon/image — just an empty circle — so it's dropped
   here; it's always first, is-active or not, so :first-child reliably targets it. */
.mobile-catalog-strip .catalog-parts__item:first-child { display: none; }
/* object-fit: cover + border-radius: 50% (the catalog-page pill style) was cropping these
   square category icons into circles, cutting off their corners/edges — square, uncropped
   icons read better at this small size. */
.mobile-catalog-strip .catalog-parts__icon {
  width: 30px; height: 30px; background: transparent;
  border-radius: 0; object-fit: contain;
}

/* 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. */
/* Sticky positioning lives on the .site-header-sticky wrapper (see above) so the mobile
   search bar pins to the top along with the header row. .site-header must stay explicitly
   "position: relative" here to CANCEL the vendor's own ".t-menu-base { position: fixed;
   top: 0; z-index: 990 }" (tilda-blocks-page.min.css) — left as fixed, the header pulls
   itself out of the document flow entirely, its parent wrapper collapses to 0 height, and
   everything below (the category strip) renders starting at y=0, right underneath the
   still-visually-floating fixed header. Confirmed via a real Playwright render: wrapper
   height was 0 and .site-header computed position was "fixed" until this rule was added. */
.site-header.t-menu-base,
.site-header .t-menu-base__maincontainer {
  min-height: 68px;
  background-color: #fff3ed;
}
.site-header.t-menu-base {
  position: relative;
}
@media (min-width: 1241px) {
  /* Desktop nav row only (below this the burger menu takes over, see the
     1240px 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. Threshold paired with the
     burger breakpoint below at 1240/1241px — was originally 1450/1451px
     from before the header was narrowed, which left every common laptop
     width (1366px, 1440px) stuck in burger mode; recalibrated to the
     ~1160px content width the tightened nav actually needs, plus buffer. */
  .site-header .t-menu-base__maincontainer {
    display: flex !important;
    align-items: center !important;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 10px 24px !important;
  }
  .site-header .t-menu-base__list {
    gap: 10px 12px !important;
  }
  .site-header a.t-menu__link-item {
    font-size: 15px !important;
  }

  /* Technolab-style architecture: secondary links (Оплата/Доставка/.../О компании) moved
     up into .site-topbar, so the old link list is redundant here — replaced by the
     standalone "Каталог" button. The list itself stays in the DOM untouched (it's also
     the mobile burger dropdown's content, unaffected by this ≥1241px-only rule). */
  .site-header .t-menu-base__list { display: none !important; }
  .site-header .t-menu-base__logowrapper { margin: 0 !important; flex: 0 0 auto; }
  .site-header .t-menu-base__leftwrapper { margin: 0 !important; flex: 0 0 auto; }
  .site-header__catalog-btn { display: inline-flex !important; }

  /* Search grows to fill the row (~half the header, per the reference); cart sits at the
     far right. Bypasses Tilda's proportional maincontainer_100-40 flex-basis entirely —
     same "force our own flex, override vendor" approach as the ≤1240px block below. */
  .site-header .t-menu-base__rightwrapper {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .site-header .t-menu-base__additionalwrapper {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header .site-search { flex: 1 1 auto; max-width: 560px; }
  .site-header .t-menuwidgeticons__wrapper { margin-left: auto !important; }
  /* Phone already lives in .site-topbar up top at this width — no need to repeat the
     call button here too. */
  .site-header .t-menu-base__buttons { display: none !important; }

  /* Search: an always-visible inline bar instead of the icon-triggered dropdown (that
     toggle behaviour is still exactly what ≤1240px uses — untouched below). The toggle
     button and JS keep working underneath, just visually irrelevant at this width since
     the panel is forced open. */
  .site-header .site-search__toggle { display: none !important; }
  .site-header .site-search__panel {
    display: block !important;
    position: static !important;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .site-header .site-search__input {
    height: 44px;
    border-radius: 24px;
    background: #fff;
  }
  .site-header .site-search__results:not(:empty) {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 10px;
    margin-top: 0;
    z-index: 300;
  }
}
.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; }
.site-header__catalog-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 50px;
  background: #fc924c;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}
.site-header__catalog-btn:hover { background: #e5813e; }

/* 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: 1240px) {
  /* Paired with the min-width: 1241px block above — below this width the
     capped-and-tightened nav row no longer has enough room. Technolab's mobile
     header has no burger at all: it's just logo + search, full stop (the
     secondary links — Оплата/Доставка/Гарантия/Контакты/О компании — are still
     reachable from the footer). So instead of a burger menu we drop it entirely
     and let .mobile-search fill the row next to the logo.
     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 —
     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 content off-screen.
     Grid with explicit columns sidesteps all of that — elements vendor CSS
     sets display:none on simply vacate their column. Only 2 columns now
     (logo, rest) since the burger column is gone. */
  .menu-toggle { display: none !important; }
  /* Shorter sticky bar on mobile — the pinned area should cover as little of the
     screen as possible while scrolling, so it's tightened below the desktop's
     68px row (min-height + padding, not just min-height alone: the vendor
     maincontainer has its own vertical padding that min-height doesn't override). */
  .site-header.t-menu-base,
  .site-header .t-menu-base__maincontainer {
    min-height: 52px !important;
  }
  .site-header .t-menu-base__maincontainer {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .site-header .t-menu-base__logowrapper {
    grid-column: 1;
    margin-bottom: 0 !important;
  }
  /* No burger to open it with any more, so the nav list (and the leftwrapper
     that holds it, and the desktop-only Каталог button beside it) never shows
     on mobile — the :has(.is-open) escape hatch from the old burger flow is
     gone too since .is-open can now never be toggled here. */
  .site-header .t-menu-base__list { display: none !important; }
  .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;
    width: 100%;
  }
  /* Old search toggle, cart icon and the "Позвонить" call button all lived here —
     all three are gone on mobile now (cart's in .site-bottom-nav, call and the old
     search toggle are dropped in favour of .mobile-search filling this row). */
  .site-header .t-menu-base__additionalwrapper { display: none !important; }
  /* Smaller logo to match the tightened row height above — the 640px override
     further down used to be the only mobile size (100px); this covers the whole
     burger-breakpoint range down to 641px too, so the logo doesn't stay oversized
     (and taller than the row) on phones/tablets just above that width. */
  .site-header .t-menu-base__imglogo { max-width: 84px !important; width: 84px !important; }
}
@media (max-width: 640px) {
  .site-header .t-menu-base__maincontainer { padding-left: 16px !important; padding-right: 16px !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-white, #fff);
  border: 1px solid var(--st-border, var(--color-border));
  border-radius: 20px;
  padding: 24px;
  min-height: 220px;
  overflow: hidden;
  box-shadow: 0 10px 40px -8px rgba(0,11,48,0.12);
  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 16px 48px -8px rgba(0,11,48,0.18); }
.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; } }

/* Blog cards — grid on the /blog/ list page, horizontal carousel in the homepage "Блог"
   block (see .blog-carousel below, styled after .popular-products). */
.blog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--st-white, #fff);
  border: 1px solid var(--st-border, var(--color-border));
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 40px -8px rgba(0,11,48,0.12);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover { border-color: var(--st-orange, #fd924a); transform: translateY(-2px); box-shadow: 0 16px 48px -8px rgba(0,11,48,0.18); }
.blog-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-border); }
.blog-card__image--placeholder { display: block; background: linear-gradient(135deg, #fff3ed, #ffe3d3); }
.blog-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.blog-card__date { font-size: 13px; font-weight: 600; color: var(--st-text-secondary, var(--color-muted)); }
.blog-card__title { margin: 0; font-weight: 800; font-size: 18px; color: var(--st-dark, var(--color-text)); }
.blog-card__excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--st-text-secondary, var(--color-muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .blog-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .blog-cards { grid-template-columns: 1fr; } }

/* Homepage "Блог" teaser — a horizontal carousel like the other homepage sections
   (Популярные товары, Отзывы) instead of the /blog/ list page's static grid above. */
.blog-carousel { position: relative; margin-top: 8px; }
.blog-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* iOS Safari has a known repaint bug where fast-swiped overflow:auto + scroll-snap
     content goes blank until the next interaction — this compositing hint (also applied
     to the other two carousels below) is the standard mitigation. */
  -webkit-overflow-scrolling: touch;
}
.blog-carousel__track::-webkit-scrollbar { display: none; }
.blog-carousel__track .blog-card { flex: 0 0 260px; scroll-snap-align: start; }
@media (max-width: 640px) {
  /* ~2 cards visible per screen on mobile, third peeking at the edge as a scroll hint. */
  .blog-carousel__track { gap: 12px; }
  .blog-carousel__track .blog-card { flex-basis: 46vw; }
  .blog-carousel__track .blog-card__body { padding: 12px; gap: 4px; }
  .blog-carousel__track .blog-card__title { font-size: 14px; }
  .blog-carousel__track .blog-card__date { font-size: 11px; }
  .blog-carousel__track .blog-card__excerpt { font-size: 12px; -webkit-line-clamp: 2; }
}

/* Blog post detail page */
.blog-post__meta { font-size: 14px; font-weight: 600; color: var(--st-text-secondary, var(--color-muted)); margin-bottom: 16px; }
.blog-post__cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin-bottom: 24px; }

.catalog-hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.catalog-hub-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 36px 20px; border: 1px solid var(--color-border); border-radius: 20px; background: #fff;
  text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.catalog-hub-tile:hover { border-color: #fc924c; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.catalog-hub-tile__icon { width: 64px; height: 64px; object-fit: contain; }
.catalog-hub-tile__name { font-weight: 700; font-size: 16px; color: var(--color-text); }
.catalog-hub-tile__count { font-size: 13px; color: var(--color-muted); }
@media (max-width: 860px) { .catalog-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .catalog-hub-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .catalog-hub-tile { padding: 24px 12px; } }

/* 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; }
.popup-added-actions { display: flex; flex-direction: column; gap: 10px; }

/* 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); }
.legal-link { color: var(--st-orange, #fd924a); text-decoration: none; }
.legal-link:hover { text-decoration: underline; }

/* Cookie consent banner — site-wide, bottom-right floating card */
.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 320px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  padding: 18px 20px 16px;
}
.cookie-banner__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}
.cookie-banner__text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  padding-right: 12px;
}
.cookie-banner__accept {
  width: 100%;
  border: none;
  border-radius: 50px;
  background: var(--st-orange, #fd924a);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cookie-banner__accept:hover { background: #e5813e; }
@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}