.cc_q8ux376z_jD54yMjSaT .cc-category-box {
  position: relative;
  display: block;
  width: 100%;
  /* Figma: 376×280 (≈1.343:1), a landscape card — not square. A fixed
     min-height fought the grid's actual column width and rendered square
     whenever the column happened to end up near 280px wide; aspect-ratio
     keeps the 376:280 proportion at any column width instead. */
  aspect-ratio: 376 / 280;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--wUp6NoOHuO);
  text-decoration: none;
  container-type: inline-size;
}

/* Mobile: the parent switches to a wrapping flex row. Tam Boy (full) takes
   the whole row — a 100% flex-basis item never has room to sit beside
   anything, so it always forces its own new row regardless of what came
   before it. Yarım Boy (half) takes ~half, so two consecutive half-size
   cards pair up side by side; a half followed by a full still correctly
   breaks the full one to the next row on its own (see the "Popular"-style
   mobile reference — Yağ/Bal and Paketler/Fırsatlar sit two-up while the
   rest stack full-width). */
@media (max-width: 768px) {
  /* flex-grow:0 on both — a lone Yarım Boy card (its next sibling wrapped
     away because IT'S Tam Boy) must NOT stretch to fill the leftover half
     of its own row; that space stays visually empty instead. */
  .cc_q8ux376z_jD54yMjSaT .cc-category-box {
    flex: 0 0 100%;
  }

  .cc_q8ux376z_jD54yMjSaT .cc-category-box--mobile-half {
    flex: 0 0 calc(50% - 8px);
  }
}

.cc_q8ux376z_jD54yMjSaT .cc-category-box__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-out;
}

@media (hover: hover) {
  .cc_q8ux376z_jD54yMjSaT .cc-category-box:hover .cc-category-box__image {
    transform: scale(1.05);
  }
}

/* Desktop relies on the photo's own tone for legibility (no overlay in
   Figma); mobile explicitly adds a flat 20% black tint (see the media
   query below) since the same photos read lighter at the smaller crop. */
.cc_q8ux376z_jD54yMjSaT .cc-category-box__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Figma's own "Blur" layer at the bottom edge of every box — a frosted
   strip (not a color tint, that's __scrim above) for extra legibility
   right where the title sits. Same backdrop-blur + fade-to-transparent
   mask pattern as OfferPackageCard's bottom scrim. */
/* Animates `height` (not transform:scaleY) — scaling the box also scaled
   the mask-image gradient with it, compressing the soft fade into a
   shorter distance and making it read as an abrupt cutoff instead of a
   gradual blur. Animating height instead makes the browser recompute the
   mask fresh at every size, so the fade always spans the full current
   height and stays soft throughout the grow animation. 36px by default,
   growing taller on hover below. */
.cc_q8ux376z_jD54yMjSaT .cc-category-box__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  pointer-events: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  /* Bottom 60% stays fully opaque, only the top 40% fades — a sharper cutoff
     than fading across the whole strip. */
  mask-image: linear-gradient(to top, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
  transition: height 0.3s ease-out;
}

@media (hover: hover) {
  .cc_q8ux376z_jD54yMjSaT .cc-category-box:hover .cc-category-box__blur {
    height: 100px;
  }
}

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

/* 40px at the 376px reference card width (40 / 376 * 100cqw ≈ 10.64cqw),
   same math as OfferPackageCard's own title — clamped so it never grows
   past the design size, and shrinks proportionally as the card itself
   narrows (e.g. the 3-column desktop mini-grid at ~775px viewport) instead
   of wrapping onto 4+ broken lines at a fixed 40px. */
.cc_q8ux376z_jD54yMjSaT .cc-category-box__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;
}

/* Pinned to a fixed spot near the bottom of the box regardless of the
   title's own (centered) position — matches Figma's "Ürünleri Gör" reveal,
   which sits at the same height on every card whether the title above it
   is one line or two. Hidden until hover. */
.cc_q8ux376z_jD54yMjSaT .cc-category-box__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.3s ease-out;
  pointer-events: none;
}

@media (hover: hover) {
  .cc_q8ux376z_jD54yMjSaT .cc-category-box:hover .cc-category-box__hover-text {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .cc_q8ux376z_jD54yMjSaT .cc-category-box {
    min-height: 160px;
  }

  .cc_q8ux376z_jD54yMjSaT .cc-category-box__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_jD54yMjSaT .cc-category-box__title {
    font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
  }

  .cc_q8ux376z_jD54yMjSaT .cc-category-box__content {
    padding: 32px 16px;
  }
}