.cc_q8ux376z_tDnZSiQRWP .cc-categories {
  width: 100%;
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}

/* Mobile-first base: one flat wrapping flex row. .cc-categories__regular
   is display:contents here so its children (the regular boxes, rendered
   through IkasComponentRenderer) merge straight into THIS row as real
   siblings of the large item — needed so the large item can sit paired
   next to the last regular item on mobile (see the 768px block below)
   regardless of whether the desktop "tall" split (further down) is on. */
.cc_q8ux376z_tDnZSiQRWP .cc-categories__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__regular {
  display: contents;
}

@media (min-width: 769px) {
  /* largeLastImage OFF: one flat 4-col grid, everything (regular boxes +
     the large item, both flattened into direct children via
     display:contents) auto-flows through it uniformly — no explicit
     per-item placement needed at all, so it's immune to the
     order/auto-placement issues a shared grid + spanning item ran into
     before. Any count (5, 6, 7…) just wraps to the next row of 4. */
  .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* auto, not a fixed 280px — CategoryBox now sizes itself via
       aspect-ratio (376:280), so the row just follows however tall that
       ends up at the actual column width instead of fighting it. */
    grid-auto-rows: auto;
    gap: 32px;
  }

  /* largeLastImage ON: instead of trying to make one item span rows
     inside a shared auto-flowing grid (unreliable — the regular items'
     auto-placement order relative to the large item's explicit placement
     kept leaving row 1 empty), split into two independent flex children:
     a self-contained 3×2 mini-grid on the left (regular boxes, own
     explicit column count, no interaction with the large item's
     placement) and the large item on the right. align-items:stretch
     (flex's own default) then matches the large item's height to the
     mini-grid's real rendered height (2×280px + 32px gap) automatically —
     no explicit height needed anywhere. */
  .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid--tall {
    display: flex;
    align-items: stretch;
    gap: 32px;
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid--tall .cc-categories__regular {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* auto, not a fixed 280px — CategoryBox now sizes itself via
       aspect-ratio (376:280), so the row just follows however tall that
       ends up at the actual column width instead of fighting it. */
    grid-auto-rows: auto;
    gap: 32px;
    flex: 3 3 0%;
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid--tall .cc-categories__large {
    flex: 1 1 0%;
  }
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__large {
  position: relative;
  display: block;
  min-height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--wUp6NoOHuO);
  text-decoration: none;
  container-type: inline-size;
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__large-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__large-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__large-blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to top, black, transparent);
  -webkit-mask-image: linear-gradient(to top, black, transparent);
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__large-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

/* Same proportional (container-query) sizing as CategoryBox's own title —
   see that component's styles.css for the math — so this large card's
   title shrinks along with its own actual rendered width instead of
   wrapping onto broken lines at a fixed 40px. */
.cc_q8ux376z_tDnZSiQRWP .cc-categories__large-title {
  margin: 0;
  font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", Georgia, serif;
  font-size: clamp(18px, 10.64cqw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--asbcXylAmk);
  word-break: break-word;
}

.cc_q8ux376z_tDnZSiQRWP .cc-categories__large-hover-text {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 35px;
  transform: translateY(50%);
  margin: 0;
  color: var(--asbcXylAmk);
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .cc_q8ux376z_tDnZSiQRWP .cc-categories__large:hover .cc-categories__large-hover-text {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .cc_q8ux376z_tDnZSiQRWP .cc-categories__inner {
    padding: 16px;
  }

  /* Both the regular boxes (via the wrapper-reach-through trick — they go
     through IkasComponentRenderer, whose display:contents wrapper depth
     is unpredictable) and the large item (a real direct child, plain
     class) end up as flat flex-wrap siblings here regardless of the
     desktop tall/off split above. Plain (Tam Boy): full width. Yarım Boy
     (--mobile-half): ~half, so it pairs with its neighbor. flex-grow:0 on
     both — a lone Yarım Boy item (next sibling wrapped away because IT'S
     Tam Boy) must not stretch to fill the empty half of its own row. */
  .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid > *, .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid > * > * {
    flex: 0 0 100%;
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid > *:has(.cc-category-box--mobile-half), .cc_q8ux376z_tDnZSiQRWP .cc-categories__grid > * > *:has(.cc-category-box--mobile-half) {
    flex: 0 0 calc(50% - 8px);
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__large {
    min-height: 160px;
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__large-scrim {
    background: color-mix(in srgb, var(--wRii4B2Py4) 20%, transparent);
  }

  /* "The Seasons" is self-hosted via @font-face in MobileMenu/styles.css,
     registered at only one weight (400). Requesting any other weight here
     triggers browser font synthesis (fake bold), which renders inconsistently
     with the rest of the site's "The Seasons" usage — so this stays at 400. */
  .cc_q8ux376z_tDnZSiQRWP .cc-categories__large-title {
    font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__large-content {
    padding: 32px 16px;
  }

  .cc_q8ux376z_tDnZSiQRWP .cc-categories__large--half-mobile {
    flex: 0 0 calc(50% - 8px);
  }
}