/* ==========================================================================
   Page-level section styles — composed from tokens.css + components.css
   ========================================================================== */

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-15);
  background: var(--color-bg);
}
.section__title { text-align: center; }
.section__lead {
  max-width: 650px;
  text-align: center;
  color: var(--color-text-muted-80);
}

.btn--lg { padding: 21px var(--space-8); }

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .site-header { position: relative; z-index: 2; }
.hero__content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: 558px;
  padding: 0 var(--gutter-desktop) 80px;
}
.hero__subtitle { color: var(--color-text-muted-80); max-width: 358px; }

@media (max-width: 768px) {
  .hero__content { padding: 0 var(--gutter-tablet) 60px; max-width: 440px; }
}
@media (max-width: 480px) {
  .hero { min-height: 560px; }
  .hero__content { padding: 0 var(--gutter-mobile) 40px; gap: var(--space-4); max-width: 100%; }
}

/* --------------------------------------------------------------- Promo banner */
.promo-banner {
  position: relative;
  padding: var(--space-10) var(--gutter-desktop) var(--space-5);
  background: var(--color-bg);
}
.promo-banner img { width: 100%; height: 300px; object-fit: cover; }
.promo-banner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
}
.promo-banner__nav--prev { left: calc(var(--gutter-desktop) + var(--space-4)); }
.promo-banner__nav--next { right: calc(var(--gutter-desktop) + var(--space-4)); }
.promo-banner__dots { display: flex; justify-content: center; align-items: center; gap: var(--space-1); }
.promo-banner__dots span { width: 28px; height: 8px; background: var(--color-surface-hover); }
.promo-banner__dots span.is-active { background: var(--color-accent); }

@media (max-width: 768px) { .promo-banner { padding: var(--space-5) var(--gutter-tablet) var(--space-5); } .promo-banner img { height: 300px; } }
@media (max-width: 480px) { .promo-banner { padding: var(--space-5) var(--gutter-mobile); } .promo-banner img { height: 220px; } }

/* ---------------------------------------------------------------- Tags row */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}
.tag {
  padding: 15px var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label-m);
  letter-spacing: -0.02em;
}
.tag--active { background: var(--color-accent); color: var(--color-text-on-accent); }

/* ------------------------------------------------------------- Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .product-grid { gap: var(--space-1) 4px; } }

/* ---------------------------------------------------------------- About + features */
.about-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}
.about-block__text {
  display: flex;
  gap: var(--space-6);
  max-width: 1080px;
}
.about-block__text p { flex: 1; margin: 0; }

.features { display: flex; flex-direction: column; gap: var(--space-10); width: 100%; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.feature { display: flex; flex-direction: column; gap: var(--space-4); }
.feature__num { color: var(--color-accent); }
.feature h5 { margin: 0 0 var(--space-2); }
.feature p { margin: 0; color: var(--color-text-muted-80); }

@media (max-width: 900px) { .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .about-block__text { flex-direction: column; } }
@media (max-width: 480px) { .features__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- CTA */
.cta {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-15) var(--gutter-desktop);
  background: var(--color-bg);
  overflow: hidden;
}
.cta__glow {
  position: absolute;
  width: 600px;
  height: 560px;
  border-radius: 50%;
  background: var(--color-surface);
  filter: blur(120px);
  opacity: .6;
}
.cta__glow--1 { top: -30%; left: 10%; }
.cta__glow--2 { top: -50%; right: -10%; }
.cta__glow--3 { bottom: -50%; left: -15%; }
.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 598px;
  text-align: center;
}
.cta__content p { max-width: 374px; color: var(--color-text-muted-80); margin: 0; }

@media (max-width: 768px) { .section { padding: var(--space-15) var(--gutter-tablet); gap: var(--space-8); } .cta { padding: var(--space-15) var(--gutter-tablet); } }
@media (max-width: 480px) { .section { padding: var(--space-10) var(--gutter-mobile); gap: var(--space-6); } .cta { padding: var(--space-10) var(--gutter-mobile); } }

/* ------------------------------------------------------------ Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumbs a { color: var(--color-text); }
.breadcrumbs a:hover { color: var(--color-accent-hover); }
.breadcrumbs__current { color: var(--color-text-muted-50); }

/* -------------------------------------------------------- Category header */
.tag--dropdown { display: inline-flex; align-items: center; gap: var(--space-1); }
.tag--dropdown img { width: 14px; height: 14px; opacity: .7; transform: rotate(90deg); }

.category-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}
.category-filters__group { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }

.filter-group { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-group__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { cursor: pointer; }
.tag input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
select.tag { appearance: none; -webkit-appearance: none; border: none; }

/* ----------------------------------------------------- Category / catalog */
.catalog-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: var(--space-15);
  background: var(--color-bg);
}
.category-intro { display: flex; flex-direction: column; gap: var(--space-10); align-items: flex-start; }

.product-lineup { display: flex; flex-direction: column; gap: var(--space-10); width: 100%; }
.product-row { display: flex; flex-wrap: wrap; gap: var(--space-5); width: 100%; }
.product-row .product-card { flex: 1 1 315px; max-width: 315px; }

@media (max-width: 768px) { .catalog-body { padding: var(--space-15) var(--gutter-tablet); } }
@media (max-width: 480px) {
  .catalog-body { padding: var(--space-10) var(--gutter-mobile); gap: var(--space-10); }
  .product-row .product-card { flex: 1 1 100%; max-width: none; }
}

/* -------------------------------------------------------------- Text stack */
.text-stack { display: flex; flex-direction: column; gap: var(--space-5); max-width: 650px; text-align: left; }
.text-stack p { margin: 0; color: var(--color-text-muted-80); }

/* ---------------------------------------------------------------- Content block (title + alternating media/text rows) */
.content-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: 80px var(--gutter-desktop);
  background: var(--color-bg);
}
.split-row { display: flex; align-items: center; gap: var(--space-10); }
.split-row--reverse { flex-direction: row-reverse; }
.split-row__media { flex: 1 1 0; min-width: 0; }
.split-row__media img { width: 100%; height: 600px; object-fit: cover; }
.split-row__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); color: var(--color-text); }
.split-row__text p { margin: 0; color: var(--color-text-muted-80); }

@media (max-width: 768px) {
  .content-block { padding: var(--space-10) var(--gutter-tablet); }
  .split-row, .split-row--reverse { flex-direction: column; }
  .split-row__media img { height: 320px; }
}
@media (max-width: 480px) {
  .content-block { padding: var(--space-8) var(--gutter-mobile); gap: var(--space-8); }
}

/* ------------------------------------------------------------- Line cards */
.line-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
}
.line-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); background: var(--color-bg); }
.line-card__media img { width: 100%; height: 320px; object-fit: cover; }
.line-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); color: var(--color-text); }
.line-card__body p { margin: 0; color: var(--color-text-muted-80); }

@media (max-width: 900px) { .line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .line-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Product hero */
.product-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-15);
  background: var(--color-bg);
}
.product-hero__layout { display: flex; gap: var(--space-10); width: 100%; }

.product-gallery { display: flex; gap: var(--space-1); flex: 1 1 0; min-width: 0; }
.product-gallery__thumbs { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 60px; flex-shrink: 0; }
.product-gallery__thumbs-list { display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; max-height: 428px; }
.product-gallery__thumb { width: 60px; height: 60px; flex-shrink: 0; border: 1px solid transparent; overflow: hidden; padding: 0; }
.product-gallery__thumb.is-active { border-color: var(--color-accent); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__nav { width: 60px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); flex-shrink: 0; }
.product-gallery__nav img { width: 20px; height: 20px; }
.product-gallery__main { flex: 1 1 0; min-width: 0; }
.product-gallery__main img { width: 100%; height: 500px; object-fit: cover; }

.product-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.product-info__head { display: flex; flex-direction: column; gap: var(--space-3); }
.product-info__head p { margin: 0; color: var(--color-text-muted-80); }

.price-block { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.price-block__prices { display: flex; align-items: baseline; gap: var(--space-2); }
.price-block__price { color: var(--color-accent); }
.price-block__price-old { color: var(--color-text-muted-50); text-decoration: line-through; text-decoration-color: var(--color-gray); }
.price-block__badge { background: var(--color-surface); color: var(--color-accent); font-size: var(--fs-label-s); padding: 2px var(--space-1); }
.price-block__buy { min-width: 210px; }

.spec-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; width: 100%; }
.spec-list > div { display: flex; align-items: baseline; gap: var(--space-2); border-bottom: 1px solid var(--color-text-muted-30); padding-bottom: var(--space-2); }
.spec-list dt { margin: 0; color: var(--color-text-muted-50); font-weight: 500; }
.spec-list dd { margin: 0 0 0 auto; color: var(--color-text); font-weight: 500; white-space: nowrap; }

.spec-columns { display: flex; gap: var(--space-10); width: 100%; }
.spec-columns .spec-list { flex: 1; }

.instruction-download { display: flex; align-items: center; gap: var(--space-3); }
.instruction-download__icon { width: 32px; height: 32px; flex-shrink: 0; opacity: .8; }
.instruction-download__meta { display: flex; flex-direction: column; gap: 2px; }
.instruction-download__meta .body-s { color: var(--color-text-muted-50); }

@media (max-width: 900px) { .product-hero__layout { flex-direction: column; } }
@media (max-width: 768px) { .product-hero { padding: var(--space-15) var(--gutter-tablet); } }
@media (max-width: 480px) {
  .product-hero { padding: var(--space-10) var(--gutter-mobile); gap: var(--space-6); }
  .product-gallery { flex-direction: column-reverse; }
  .product-gallery__thumbs { flex-direction: row; width: 100%; }
  .product-gallery__thumbs-list { flex-direction: row; max-height: none; overflow-x: auto; }
  .product-gallery__nav { display: none; }
  .product-gallery__main img { height: 280px; }
  .price-block { flex-direction: column; align-items: flex-start; }
  .price-block__buy { width: 100%; }
  .spec-columns { flex-direction: column; gap: var(--space-6); }
}

/* --------------------------------------------------------- Spec tabs */
.spec-tabs { display: flex; flex-direction: column; gap: var(--space-10); width: 100%; }
.spec-tabs__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.spec-tabs__panel[hidden] { display: none; }

/* ------------------------------------------------------------- Carousel */
.carousel-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-4); }
.carousel-nav { display: flex; gap: var(--space-2); }
.carousel-nav__btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); flex-shrink: 0; }
.carousel-nav__btn img { width: 16px; height: 16px; }
.carousel-nav__btn--next img { transform: rotate(180deg); }
.carousel-track { display: flex; gap: var(--space-5); width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex: 0 0 315px; }
@media (max-width: 480px) { .carousel-track > * { flex-basis: 260px; } }

/* --------------------------------------------------------------- Review card */
.review-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); padding: var(--space-6); gap: var(--space-6); background: var(--color-bg); }
.review-card__media img { width: 100%; height: 240px; object-fit: cover; }
.review-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.review-card__body h3 { margin: 0; }
.review-card__meta { margin: 0; color: var(--color-text-muted-50); }
.review-card__footer { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted-50); margin-top: var(--space-2); }
@media (max-width: 480px) { .review-card__media img { height: 180px; } }

/* ---------------------------------------------------------------- Store map (static placeholder — see AGENTS.md) */
.store-map {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: var(--color-surface);
}
.store-pin {
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  border: none;
}
.store-pin.is-active { background: var(--color-bg); color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }

.store-popup {
  position: absolute;
  width: 320px;
  max-width: calc(100% - var(--space-6));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.store-popup__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.store-popup__close img { width: 14px; height: 14px; opacity: .7; }
.store-popup__head p { margin: 0; }
.store-popup__meta { display: flex; flex-direction: column; gap: var(--space-2); }
.store-popup__meta p { margin: 0; color: var(--color-text-muted-80); }

.store-list { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; }
.store-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); flex-wrap: wrap; }
.store-list__item p { margin: 0; }
.store-list__meta { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-muted-80); }

@media (max-width: 768px) {
  .store-map { height: 420px; }
  .store-popup { width: 280px; }
}
@media (max-width: 480px) {
  .store-map { height: 320px; }
  .store-popup {
    left: var(--space-3) !important;
    top: auto !important;
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
  }
  .store-list__item { flex-direction: column; align-items: flex-start; }
}