/* Section wrapper of the design engine: instance settings (width, spacing, colour scheme, alignment, visibility) and layout axes. docs/15-block-library-plan.md S1-S4. Tokens only.
   Markup: template/blocks/_section.twig — <div class="et-section et-section--<block> [modifiers]" data-section="<block>" data-variant="<variant>">
   around every home section. No modifier = the section exactly as its template draws it. */

/* The wrapper itself adds nothing; the inner block keeps its own spacing. */

/* ---------- width ---------- */
.et-section--w-wide .container { max-width: calc(var(--et-container) + var(--et-gutter) * 6); }
.et-section--w-full .container { max-width: none; }

/* ---------- spacing: the wrapper takes over the inner block's own top/bottom spacing ---------- */
.et-section--pt-none { padding-top: 0; }
.et-section--pt-s { padding-top: calc(var(--et-section-gap) * 0.5); }
.et-section--pt-m { padding-top: var(--et-section-gap); }
.et-section--pt-l { padding-top: calc(var(--et-section-gap) * 2); }
.et-section--pt-xl { padding-top: calc(var(--et-section-gap) * 3.5); }
.et-section--pb-none { padding-bottom: 0; }
.et-section--pb-s { padding-bottom: calc(var(--et-section-gap) * 0.5); }
.et-section--pb-m { padding-bottom: var(--et-section-gap); }
.et-section--pb-l { padding-bottom: calc(var(--et-section-gap) * 2); }
.et-section--pb-xl { padding-bottom: calc(var(--et-section-gap) * 3.5); }
.et-section[class*="et-section--pt-"] > * { padding-top: 0; margin-top: 0; }
.et-section[class*="et-section--pb-"] > * { padding-bottom: 0; margin-bottom: 0; }

/* ---------- colour scheme: .et-scheme-<code> redefines the colour tokens (rules compiled by the preset model) ---------- */
.et-section[class*="et-scheme-"] { background: var(--et-bg); color: var(--et-text); }

/* ---------- heading: subtitle, alignment ---------- */
.et-section__subtitle {
  margin: 0 0 var(--et-grid-gap);
  color: var(--et-text-secondary);
  font-size: var(--et-text-md);
}
.et-section__header + .et-section__subtitle { margin-top: calc(var(--et-grid-gap) * -0.5); }
.et-section--center .et-section__header { flex-direction: column; justify-content: center; text-align: center; }
.et-section--center .et-section__title,
.et-section--center .et-section__subtitle { text-align: center; }

/* ---------- visibility ---------- */
@media (max-width: 767.98px) {
  .et-section--hide-mobile { display: none; }
}
@media (min-width: 768px) {
  .et-section--hide-desktop { display: none; }
}

/* ---------- product grid of the products section: 2 / 3 / 4 / 5 columns, as the former Bootstrap row ---------- */
.et-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--et-grid-gap);
}
.et-products-grid__item { min-width: 0; }
@media (min-width: 768px) { .et-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .et-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .et-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Products section: tabs (settings.tabs, js/elbuz_lists.js) and header extras of a panel — countdown, "view all" */
.et-prod-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.et-prod-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--et-grid-gap); }
.et-prod-tabs__tab {
  font: inherit;
  font-size: var(--et-text-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: var(--et-border-width, 1px) solid var(--et-border);
  border-radius: var(--et-radius-full);
  background: transparent;
  color: var(--et-text-secondary);
  cursor: pointer;
  transition: var(--et-transition);
}
.et-prod-tabs__tab:hover { border-color: var(--et-accent); color: var(--et-text); }
.et-prod-tabs__tab[aria-selected="true"] { border-color: var(--et-accent); background: var(--et-accent); color: var(--et-accent-contrast); }
.et-prod-tile__body .et-prod-extras { margin-top: 0.75rem; }

/* Flash sale keeps its former 2 / 3 / 4 columns (no 5th at 1200+) */
@media (min-width: 1200px) { .et-products-grid--max4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- own grids of the other section types (former Bootstrap row/col), overridable by the axes below ---------- */
.et-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--et-grid-gap);
}
.et-promo__cell { min-width: 0; }
@media (min-width: 768px) { .et-promo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Brands as a logo grid / carousel (setting display of blocks/brands; default — the marquee of elbuz_theme.css) */
.et-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--et-grid-gap);
}
.et-brands-grid .et-brands-grid__item {
  justify-content: center;
  padding: var(--et-card-pad);
  font-size: var(--et-text-xl);
  white-space: normal;
  text-align: center;
  text-decoration: none;
}
.et-brands-grid__item img { max-width: 100%; height: auto; }
@media (min-width: 768px) { .et-brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .et-brands-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Recently viewed: a scrolling strip of fixed-width cards drawn by JS; columns or carousel turn it into the section grid */
.et-section--recently-viewed:is(.et-section--carousel, .et-section--cols, .et-section--cols-m) .et-recent-card { width: auto; min-width: 0; }
.et-section--recently-viewed:not(.et-section--carousel):is(.et-section--cols, .et-section--cols-m) .et-recently-viewed__scroll {
  display: grid;
  grid-template-columns: repeat(var(--et-cols-mobile, 2), minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
@media (min-width: 768px) {
  .et-section--recently-viewed:not(.et-section--carousel):is(.et-section--cols, .et-section--cols-m) .et-recently-viewed__scroll { grid-template-columns: repeat(var(--et-cols-tablet, 3), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .et-section--recently-viewed:not(.et-section--carousel):is(.et-section--cols, .et-section--cols-m) .et-recently-viewed__scroll { grid-template-columns: repeat(var(--et-cols, 4), minmax(0, 1fr)); }
}

/* ---------- category tile (blocks/categories/_tile.twig), shared by the tiles and mosaic variants: the name over the photo ---------- */
.et-cat-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: var(--et-card-pad);
  overflow: hidden;
  border-radius: var(--et-card-radius);
  background: var(--et-media-box, var(--et-surface-2));
  color: var(--et-text-light);
  text-decoration: none;
}
.et-cat-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--et-transition); }
.et-cat-tile:hover .et-cat-tile__img { transform: scale(1.05); }
.et-cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0) 60%);
}
.et-cat-tile__name {
  position: relative;
  z-index: 1;
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  line-height: var(--et-heading-leading);
  letter-spacing: var(--et-heading-tracking);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
  overflow-wrap: anywhere;
}
/* No photo: the icon large on the accent surface, no fade */
.et-cat-tile--icon { background: var(--et-accent); color: var(--et-accent-contrast); }
.et-cat-tile--icon::after { content: none; }
.et-cat-tile__icon { position: absolute; top: var(--et-card-pad); right: var(--et-card-pad); font-size: var(--et-text-4xl); opacity: 0.35; }
.et-cat-tile:hover { color: var(--et-text-light); }
.et-cat-tile--icon:hover { color: var(--et-accent-contrast); background: var(--et-accent-hover); }

/* ---------- layout axes (S4): columns and display on the section grid (.et-section__grid in the block template).
   _section.twig sets --et-cols (desktop), --et-cols-tablet (= min(cols, 3)), --et-cols-mobile only for set values. ---------- */
@media (max-width: 767.98px) {
  .et-section--cols-m .et-section__grid { grid-template-columns: repeat(var(--et-cols-mobile), minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .et-section--cols .et-section__grid { grid-template-columns: repeat(var(--et-cols-tablet), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .et-section--cols .et-section__grid { grid-template-columns: repeat(var(--et-cols), minmax(0, 1fr)); }
}

/* Carousel: one row scrolling sideways with snap points, --et-n cards in view (columns of the breakpoint, else 2 / 3 / 4) */
.et-section.et-section--carousel .et-section__grid {
  --et-n: var(--et-cols-mobile, 2);
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--et-n) - 1) * var(--et-grid-gap)) / var(--et-n));
  column-gap: var(--et-grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: calc(var(--et-grid-gap) * 0.5);
}
.et-section.et-section--carousel .et-section__grid > * { scroll-snap-align: start; }
@media (min-width: 768px) {
  .et-section.et-section--carousel .et-section__grid { --et-n: var(--et-cols-tablet, 3); }
}
@media (min-width: 992px) {
  .et-section.et-section--carousel .et-section__grid { --et-n: var(--et-cols, 4); }
}
@media (prefers-reduced-motion: no-preference) {
  .et-section.et-section--carousel .et-section__grid { scroll-behavior: smooth; }
}