/* Taha — full-height editorial image beside an 8-product grid.
 *
 * The hero sits to the LEFT of the products at every breakpoint — the products
 * never wrap underneath it. Below 1024px the product area is a horizontally
 * scrollable strip (2 cards visible on mobile, 3 on tablet); at 1024px+ it
 * becomes a static 4-column grid, so 8 products fill two full rows.
 */

.cc_9mq44h5t_EFAndkNtGI .taha {
  --grid-gap: var(--space-xs, 8px);

  width: 100%;
  background-color: var(--color-bg, #FAF8F5);
  padding: var(--space-md, 24px) clamp(16px, 3vw, 32px);
}

@media (min-width: 768px) {
  .cc_9mq44h5t_EFAndkNtGI .taha {
    padding: var(--space-lg, 40px) clamp(24px, 3vw, 40px);
  }
}

.cc_9mq44h5t_EFAndkNtGI .taha__inner {
  display: grid;
  gap: var(--grid-gap);
  width: 100%;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
}

/* The hero stretches to the full height of the product area beside it, so the
 * absolutely-positioned image can crop rather than dictate its own ratio. */
.cc_9mq44h5t_EFAndkNtGI .taha__hero {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--color-surface-alt, #F2EDE8);
  height: 100%;
}

.cc_9mq44h5t_EFAndkNtGI .taha__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms ease;
}

.cc_9mq44h5t_EFAndkNtGI a.taha__hero:hover .taha__hero-image, .cc_9mq44h5t_EFAndkNtGI a.taha__hero:focus-visible .taha__hero-image {
  transform: scale(1.03);
}

/* ─── Product strip: mobile (base, < 768px) ─────────────────────
 * Single row that scrolls sideways. `grid-auto-columns` fixes each
 * card to half the visible width so exactly 2 land in view.
 */
.cc_9mq44h5t_EFAndkNtGI .taha__products {
  display: grid;
  gap: var(--grid-gap);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--grid-gap)) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Keep the strip flush with the hero — no reserved scrollbar gutter. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_9mq44h5t_EFAndkNtGI .taha__products::-webkit-scrollbar {
  display: none;
}

.cc_9mq44h5t_EFAndkNtGI .taha__products > * {
  scroll-snap-align: start;
}

/* ─── Tablet (≥ 768px) ──────────────────────────────────────────
 * Still a scrolling strip, but 3 cards fit in the visible area.
 */
@media (min-width: 768px) {
  .cc_9mq44h5t_EFAndkNtGI .taha__products {
    grid-auto-columns: calc((100% - (2 * var(--grid-gap))) / 3);
  }
}

/* ─── Desktop (≥ 1024px) ────────────────────────────────────────
 * Static 4-column grid — 8 products fill two full rows.
 */
@media (min-width: 1024px) {
  .cc_9mq44h5t_EFAndkNtGI .taha__products {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_9mq44h5t_EFAndkNtGI .taha__hero-image {
    transition: none;
  }

  .cc_9mq44h5t_EFAndkNtGI a.taha__hero:hover .taha__hero-image, .cc_9mq44h5t_EFAndkNtGI a.taha__hero:focus-visible .taha__hero-image {
    transform: none;
  }
}