/* =========================================================
   ZARA CATALOG — DESIGN SYSTEM
   ========================================================= */

:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F7F7F7;
  --color-text: #111111;
  --color-text-secondary: #555555;
  --color-text-muted: #555555;
  --color-text-placeholder: #999999;
  --color-icon-muted: #777777;
  --color-border: #EAEAEA;
  --color-discount: #D40000;
  --color-card-bg: #FAFAFA;

  /* Typography */
  --font-main: "Helvetica Neue", Inter, Arial, sans-serif;

  --fs-h1: 32px;
  --fs-product-name: 17px;
  --fs-description: 16px;
  --fs-price: 18px;
  --fs-menu: 16px;
  --fs-subcategory: 14px;
  --fs-button: 16px;
  --fs-old-price: 14px;
  --fs-footer: 13px;

  --lh-tight: 1.1;
  --lh-normal: 1.231;
  --lh-loose: 1.5;
  --ls-caps: 0.05em;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;

  /* Components */
  --height-search: 48px;
  --height-input: 52px;
  --height-button: 52px;
  --radius: 0px;
  --transition: 180ms ease;
}

/* =========================================================
   RESET
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* fallback for browsers without dvh */
  /* Dynamic viewport height: tracks Telegram/Safari's collapsing toolbar on
     iOS instead of assuming the toolbar is always hidden (which 100vh does),
     so the page isn't taller than the visible area on entry. */
  min-height: 100dvh;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--fs-description);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.catalog-main,
.product-swipe {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

input {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* =========================================================
   STICKY HEADER STACK (search + categories + subcategories)
   ========================================================= */

.site-sticky {
  /* Deliberately NOT pinned. Inside Telegram's in-app browser on iOS a
     `position: sticky; top: 0` header fought the browser's collapsing top
     toolbar: on entry the toolbar is still visible while the page is already
     laid out at full height, so the header showed a gap under the browser
     chrome and jumped as the viewport height animated. Letting the header
     scroll away with the page removes that conflict entirely.
     Class name kept so templates and zc_render_sticky_nav_scroll_script()
     (which scrolls the active category into view) need no changes. */
  position: static;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* =========================================================
   SEARCH
   ========================================================= */

.catalog-search {
  padding: var(--space-3) 20px var(--space-2);
  background: var(--color-bg);
}

.catalog-search__field {
  position: relative;
  height: var(--height-search);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
}

.catalog-search__icon {
  width: 18px;
  height: 18px;
  margin: 0 var(--space-3);
  color: var(--color-icon-muted);
  flex-shrink: 0;
}

.catalog-search__input {
  flex: 1;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
}

.catalog-search__input::placeholder {
  color: var(--color-text-placeholder);
}

.catalog-search__results {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.catalog-search__results.is-open {
  display: block;
  animation: searchResultsIn 250ms ease-out;
}

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

/* =========================================================
   CATEGORIES (horizontal scroll, single row)
   ========================================================= */

.categories-nav {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: var(--space-6);
  padding: var(--space-4) 20px 10px;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.categories-nav::-webkit-scrollbar {
  display: none;
}

.categories-nav__item {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
  flex-shrink: 0;
}

.categories-nav__item.is-active {
  border-bottom-color: var(--color-text);
}

/* =========================================================
   SUBCATEGORIES (horizontal scroll, second row)
   ========================================================= */

.subcategories-nav {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: 8px 20px 12px;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.subcategories-nav::-webkit-scrollbar {
  display: none;
}

.subcategories-nav__item {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), color var(--transition);
  flex-shrink: 0;
}

.subcategories-nav__item.is-active {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* =========================================================
   BRANDS (horizontal scroll filter row)
   ========================================================= */

.brands-nav {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 4px 20px 14px;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.brands-nav::-webkit-scrollbar {
  display: none;
}

.brands-nav__item {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
  flex-shrink: 0;
}

.brands-nav__item.is-active {
  border-bottom-color: var(--color-text-muted);
}

/* =========================================================
   PRODUCT GRID (catalog)
   ========================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-6);
  padding: var(--space-4) 20px var(--space-7);
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
  min-width: 0;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card.is-visible {
  opacity: 1;
}

.product-card__image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-secondary);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card.is-visible .product-card__image {
  opacity: 1;
  transform: scale(1);
}

/* Swipeable gallery inside a catalog card: a horizontal track of full-size
   slides the user can drag through with a finger, with dots showing
   position — only rendered when a product has more than one photo. */
.product-card__image-track {
  display: flex;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  /* will-change is toggled on in JS only during a drag/animation (see
     initCardGallerySwipe). Keeping it here permanently would promote every
     multi-photo card in the grid to its own compositor layer for the whole
     session — a lot of wasted memory on a long catalog on low-end phones. */
}

.product-card__image-track .product-card__image {
  flex-shrink: 0;
}

.product-card__dots {
  position: absolute;
  bottom: var(--space-2);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  pointer-events: none;
}

.product-card__dot {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.6);
  transition: background var(--transition);
}

.product-card__dot.is-active {
  background: #FFFFFF;
}

.product-card__info {
  padding-top: var(--space-2);
}

.product-card__name {
  font-size: var(--fs-product-name);
  font-weight: 400;
  line-height: 23px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card__price {
  font-size: var(--fs-old-price);
  font-weight: 400;
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.product-card__price--old {
  font-size: var(--fs-old-price);
  font-weight: 400;
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

.product-card__price--discount {
  color: var(--color-discount);
}

.product-card__discount {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-discount);
  color: #FFFFFF;
  width: fit-content;
}

.product-card__discount-percent {
  font-size: var(--fs-old-price);
  font-weight: 500;
}

.product-card__discount-price {
  font-size: 12px;
  font-weight: 500;
}

.product-card__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.contact-btn {
  flex: 1;
  height: var(--height-button);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
}

.contact-btn svg {
  width: 22px;
  height: 22px;
}

.contact-btn svg.icon-stroke {
  stroke: currentColor;
  fill: none;
}

.contact-btn svg.icon-fill {
  fill: currentColor;
  stroke: none;
}

.contact-btn .icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.contact-btn:hover,
.contact-btn:active {
  background: var(--color-text);
  color: var(--color-bg);
}

/* =========================================================
   PRODUCT SWIPE (prev/next product drag track)
   ========================================================= */

.product-swipe {
  overflow: hidden;
  /* Isolate this subtree's layout so swapping it for a new product (likely
     a different page height) doesn't force WebKit to recompute/repaint the
     sticky header above it on the same frame. */
  contain: layout style;
}

.product-swipe__track {
  display: flex;
  width: 300%;
  transform: translateX(-33.3333%);
  touch-action: pan-y;
  will-change: transform;
}

.product-swipe__slide {
  width: 33.3333%;
  flex-shrink: 0;
  min-height: 100px;
}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-page {
  padding-bottom: var(--space-7);
}

.product-main {
  padding: var(--space-4) 20px;
}

.product-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-3);
  color: var(--color-text-placeholder);
}

.product-back svg {
  width: 44px;
  height: 12px;
  flex-shrink: 0;
}

.product-main__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-bg-secondary);
  margin-bottom: var(--space-5);
}

.product-main__name {
  font-size: 20px;
  font-weight: 300;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.product-main__price {
  font-size: var(--fs-price);
  font-weight: 400;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.product-main__price--old {
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

.product-main__price--discount {
  color: var(--color-discount);
}

.product-main .product-card__discount {
  margin-bottom: var(--space-5);
}

/* "Уточнить цену" badge — shown when a product has no price, or the manager
   marked it "price on request". Sharp-cornered outlined label in spaced caps,
   matching the site's nav/button style. Placed after the price rules above so
   it overrides their display/colour. */
.product-card__price--request,
.product-main__price--request {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.product-card__price--request {
  font-size: 11px;
}

.product-main__price--request {
  font-size: 12px;
}

.product-main__brand {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.product-main__contact-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.product-main__actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.product-description {
  margin-bottom: var(--space-5);
}

.product-description__text {
  font-size: var(--fs-description);
  color: var(--color-text);
  line-height: 27px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  transition: max-height var(--transition);
}

.product-description.is-expanded .product-description__text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Links a content manager adds inside a product description read as the
   normal body text — same color — just underlined, not a coloured link. */
.product-description__text a,
.product-main__description a {
  color: inherit;
  text-decoration: underline;
}

.product-description__toggle {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-description);
  color: var(--color-text);
  text-decoration: underline;
}

.product-description__toggle-less {
  display: none;
}

.product-description.is-expanded .product-description__toggle-more {
  display: none;
}

.product-description.is-expanded .product-description__toggle-less {
  display: inline;
}

/* =========================================================
   PRODUCT GALLERY STACK (images, one below another)
   ========================================================= */

.product-gallery-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-gallery-stack__image {
  width: 100%;
}

/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

.related-products {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.related-products__title {
  font-size: var(--fs-subcategory);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: 0 20px;
  margin-bottom: var(--space-4);
}

.related-products__scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--space-3);
  padding: 0 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.related-products__scroll::-webkit-scrollbar {
  display: none;
}

.related-products__track {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: var(--space-3);
}

.related-products__scroll .product-card {
  width: 200px;
  flex-shrink: 0;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 20px;
  text-align: center;
}

.site-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.site-footer__social a svg {
  width: 24px;
  height: 24px;
}

.site-footer__social a svg.icon-stroke {
  stroke: var(--color-text);
  fill: none;
}

.site-footer__social a svg.icon-fill {
  fill: var(--color-text);
  stroke: none;
}

.site-footer__social a .icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.site-footer__credit {
  font-size: var(--fs-footer);
  color: var(--color-text-secondary);
}

.site-footer__credit a {
  text-decoration: underline;
}

/* =========================================================
   EMPTY / NO RESULTS
   ========================================================= */

.catalog-empty {
  padding: var(--space-7) 20px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fs-description);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__image,
  .categories-nav__item,
  .subcategories-nav__item {
    transition: none !important;
    animation: none !important;
  }
  .product-card {
    opacity: 1;
  }
  .product-card__image {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   MOBILE: compact search + tighter sticky stack
   ========================================================= */

@media (max-width: 767px) {
  .catalog-search {
    padding: 10px 32px 6px;
  }

  .catalog-search__field {
    height: 40px;
  }

  .catalog-search__icon {
    margin: 0 12px;
  }

  .categories-nav {
    padding-top: 8px;
  }

  .product-grid {
    padding-top: 12px;
  }
}

/* =========================================================
   DESKTOP (progressive enhancement, mobile-first base)
   ========================================================= */

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) 40px var(--space-8);
  }

  .categories-nav,
  .subcategories-nav,
  .catalog-search {
    padding-left: 40px;
    padding-right: 40px;
  }

  .categories-nav,
  .subcategories-nav {
    gap: var(--space-6);
    justify-content: center;
  }

  .brands-nav {
    justify-content: center;
  }

  .catalog-search__field {
    max-width: 480px;
    margin: 0 auto;
  }

  .catalog-search__results {
    max-width: 480px;
    margin: 0 auto;
  }

  /* The dropdown stays capped at 480px above, but .product-grid still picks
     up the 3/4/5-column rules meant for the full-width catalog grid at this
     and wider breakpoints — squeezing cards until names/prices wrap badly.
     Pin it back to 2 columns here so the search dropdown always matches its
     own (narrow) container instead of the page-level grid. */
  .catalog-search__results .product-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
    margin: 0;
    padding: var(--space-3) 20px var(--space-4);
  }

  .product-main {
    padding-left: 40px;
    padding-right: 40px;
  }

  .related-products__title,
  .related-products__scroll {
    padding-left: 40px;
    padding-right: 40px;
  }

  .site-footer {
    padding: var(--space-6) 40px;
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
  }

  .categories-nav,
  .subcategories-nav {
    max-width: 1400px;
    margin: 0 auto;
  }

  .related-products__scroll {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
  }

  .related-products__title {
    max-width: 1400px;
    margin: 0 auto var(--space-4);
  }

  .related-products__scroll .product-card {
    width: 240px;
  }

  .site-footer {
    max-width: 1400px;
    margin: 0 auto;
  }

  .product-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) 40px 0;
  }

  .product-main {
    padding: 0;
  }

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

  .product-main__actions {
    max-width: 420px;
  }

  .related-products {
    width: 100%;
    margin-top: var(--space-6);
  }
}

@media (min-width: 1440px) {
  .product-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}