/* ===== Countdown campaign (Ali) ===== */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd {
  --ali-cd-accent: var(--ali-accent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__grid {
  display: grid;
  /* BOTH columns get an explicit `minmax(0, …)` minimum. Without it the content
     column defaults to a min of `auto` (its min-content), which the product
     carousel — fixed-size image + non-shrinking "Ekle" button — inflates. That
     stole width from the image column (which CAN shrink to 0), squashing the
     campaign photo to nothing and overflowing the row. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
  max-width: 1320px;
  margin-inline: auto;
  /* No padding on the grid on desktop: the media column runs flush to the edge.
     The text column carries its own inline padding (see .ali-cd__content) so the
     copy never sticks to the side while the image stays edge-to-edge. Mobile
     re-adds symmetric side padding in the media query below. */
  padding: 0;
}

/* ----- Media + marquee (desktop: image with a vertical marquee on its right) ----- */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__media {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0; /* vertical marquee sits flush against the image edge */
  min-height: 0;
}
/* Image stretches to the column height (which the content side defines) so the
   media + vertical marquee fill the panel flush, with no aspect-ratio band of
   empty section above/below. A min-height keeps it substantial when the copy is
   short. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 42vw, 560px);
  object-fit: cover;
  display: block;
  border-radius: var(--ali-radius-sm);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__img--empty {
  background: color-mix(in srgb, var(--ali-neutral) 6%, transparent);
}

/* Vertical marquee rail beside the image. The rail stretches to the image
   height; the track is taken OUT OF FLOW (absolute) so its long repeated text
   can't inflate the section height — overflow:hidden clips it to the rail. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee {
  position: relative;
  flex: 0 0 1.7em;
  align-self: stretch;
  min-height: 0;
  padding-inline-start: 0.45em; /* rail flush to image; text gets a hair of room */
  overflow: hidden;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: var(--ali-weight-medium);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ali-cd-accent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: cc_xqaduz1e_qPnsGD33v7_ali-cd-vscroll 22s linear infinite;
  will-change: transform;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee-seg {
  writing-mode: vertical-rl;
  white-space: nowrap;
  display: block;
}
@keyframes cc_xqaduz1e_qPnsGD33v7_ali-cd-vscroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* ----- Content ----- */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2vw, 22px);
  /* Let this grid item shrink below its content's intrinsic width so the
     carousel can ellipsis/clip instead of forcing the row wider. */
  min-width: 0;
  /* This block padding defines the row height that the image stretches to match,
     and keeps the headline + timer off the top/bottom edges. The inline-end
     padding keeps the copy off the section's right edge now that the grid itself
     has no horizontal padding (the image column stays flush to the left edge). */
  padding-block: clamp(28px, 3.2vw, 52px);
  padding-inline-end: clamp(20px, 5vw, 48px);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--ali-weight-strong);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__title {
  margin: 0;
  width: fit-content;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__body {
  margin: 0;
  max-width: 54ch;
  opacity: 0.86;
}

/* ----- Timer ----- */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__timer {
  display: flex;
  gap: clamp(20px, 4vw, 56px);
  align-items: flex-start;
  margin-top: clamp(12px, 2vw, 28px);
  padding-top: clamp(16px, 2vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--ali-neutral) 16%, transparent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__unit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__value {
  display: flex;
  font-size: clamp(44px, 6vw, 84px);
  font-weight: var(--ali-weight-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ----- Odometer digit ----- */
/* Each digit is a 1em-tall window clipping a vertical strip of 0–9. Translating
   the strip by `--d` cells rolls the live digit into view; the transition makes
   the roll physical. Tabular figures keep the column width stable as it spins. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__digit-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 0.7s var(--ali-ease-out);
  will-change: transform;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__digit-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__label {
  font-weight: var(--ali-weight-medium);
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__done {
  color: var(--ali-cd-accent);
}

/* ----- Optional campaign products carousel (below the timer) ----- */
/* One product visible at a time; arrows advance the track by a single slide so
   2 or 20 products read identically and the panel height never grows. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__products {
  margin-top: clamp(20px, 2.4vw, 32px);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
/* Title reads as a quiet section label in the body text colour (not full gold,
   which fought the headline) with a short accent rule leading it — tying it to
   the brand without shouting. min-width:0 lets it ellipsis next to the arrows. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__products-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: var(--ali-weight-strong);
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__products-title::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ali-cd-accent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__products-nav {
  display: flex;
  gap: 8px;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ali-neutral) 22%, transparent);
  border-radius: var(--ali-radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--ali-ease-out),
    background-color 0.2s var(--ali-ease-out), opacity 0.2s var(--ali-ease-out);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__nav-btn:hover:not(:disabled) {
  border-color: var(--ali-cd-accent);
  background: color-mix(in srgb, var(--ali-neutral) 6%, transparent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__nav-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

/* Viewport clips the track; the track lays slides in a row and slides by whole
   100% steps. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__viewport {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ali-neutral) 14%, transparent);
  border-radius: var(--ali-radius-sm);
  background: color-mix(in srgb, var(--ali-neutral) 4%, transparent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__track {
  display: flex;
  /* Premium easing: a long easeOutQuint glide so the slide settles softly rather
     than stopping flat. */
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell {
  flex: 0 0 100%;
  min-width: 0;
  /* Off-screen slides recede slightly + dim; the active one rises to full. The
     translate handles the slide, this layers a subtle depth/focus shift on top. */
  opacity: 0.18;
  transform: scale(0.93);
  transition: opacity 0.55s var(--ali-ease-out),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell[data-active] {
  opacity: 1;
  transform: scale(1);
}

.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
}
/* Inner content rises a touch as the slide becomes active — staggered after the
   glide for a refined, settled entrance. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-info, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-add, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-soldout {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ali-ease-out) 0.08s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell[data-active] .ali-cd__slide-info, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell[data-active] .ali-cd__slide-add, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell[data-active] .ali-cd__slide-soldout {
  opacity: 1;
  transform: translateY(0);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-link {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-img {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--ali-radius-sm) - 4px);
  background: color-mix(in srgb, var(--ali-neutral) 6%, transparent);
  transition: filter 0.3s var(--ali-ease-out), opacity 0.3s var(--ali-ease-out);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-img--empty {
  display: block;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-name {
  font-weight: var(--ali-weight-medium);
  line-height: 1.3;
  /* one line + ellipsis so a long name can never push the slide taller */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-link:hover .ali-cd__slide-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-price {
  font-weight: var(--ali-weight-strong);
  font-variant-numeric: tabular-nums;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-sell {
  font-weight: var(--ali-weight-medium);
  text-decoration: line-through;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-savings {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: var(--ali-weight-strong);
  color: var(--ali-cd-accent);
  background: color-mix(in srgb, var(--ali-cd-accent) 16%, transparent);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--ali-radius-sm);
  /* Khaki-green button by default (merchant-editable), tuned to sit on the dark
     campaign background. */
  background: var(--ali-cd-btn, #6f7350);
  color: var(--ali-neutral);
  font-family: inherit;
  font-weight: var(--ali-weight-strong);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.2s var(--ali-ease-out), transform 0.2s var(--ali-ease-out),
    background-color 0.3s var(--ali-ease-out);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add:active {
  transform: translateY(0) scale(0.97);
}
/* Confirmation state after a successful add — settles to the accent gold with a
   check that pops in. */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add.is-added {
  background: var(--ali-cd-accent);
  color: var(--ali-cd-bg, #1a140d);
  cursor: default;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add-icon {
  font-weight: inherit;
  line-height: 1;
  display: inline-flex;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add.is-added .ali-cd__slide-add-icon {
  animation: cc_xqaduz1e_qPnsGD33v7_ali-cd-pop 0.4s var(--ali-ease-out);
}
@keyframes cc_xqaduz1e_qPnsGD33v7_ali-cd-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

/* ----- Out of stock: no add button, muted slide, a clear "sold out" tag ----- */
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide--soldout .ali-cd__slide-img {
  filter: grayscale(1);
  opacity: 0.55;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide--soldout .ali-cd__slide-info {
  opacity: 0.6;
}
.cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-soldout {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--ali-neutral) 22%, transparent);
  border-radius: var(--ali-radius-sm);
  font-weight: var(--ali-weight-strong);
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* ----- Tablet: keep the two columns but tighten the carousel so the slide
   (image + price + button) fits the narrower content column without crowding. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__grid {
    gap: clamp(20px, 3vw, 36px);
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide {
    gap: 12px;
    padding: 12px;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-link {
    gap: 12px;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-img {
    width: 64px;
    height: 64px;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add {
    padding: 10px 16px;
  }
}

/* ----- Mobile: stack; marquee becomes a horizontal band under the image ----- */
@media (max-width: 767px) {
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    /* No vertical padding here either; horizontal padding keeps image + copy off
       the side edges. The image min-height + content block padding carry the
       vertical rhythm. */
    padding: 0 20px;
  }
  /* Stacked + the grid re-adds symmetric side padding, so drop the content's
     desktop-only inline-end padding to avoid a lopsided right edge. */
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__content {
    padding-inline-end: 0;
  }
  /* Stacked: the image no longer needs to match a tall content column. */
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__img {
    min-height: clamp(300px, 80vw, 460px);
  }
  /* Smaller digits so all four units fit a phone row without overflowing. */
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__value {
    font-size: clamp(30px, 9vw, 46px);
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__media {
    flex-direction: column;
    gap: 12px;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee {
    flex: 0 0 auto;
    width: 100%;
    height: 2.4em;
    align-self: auto;
    border-block: 1px solid color-mix(in srgb, var(--ali-neutral) 16%, transparent);
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee-track {
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    flex-direction: row;
    animation-name: cc_xqaduz1e_qPnsGD33v7_ali-cd-hscroll;
    animation-duration: 16s;
    align-items: center;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee-seg {
    writing-mode: horizontal-tb;
    padding-inline: 0.25em;
  }
  @keyframes cc_xqaduz1e_qPnsGD33v7_ali-cd-hscroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__timer {
    gap: 0;
    justify-content: space-between;
  }
  /* Carousel head: title can ellipsis, arrows stay pinned right. */
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__products-head {
    margin-bottom: 12px;
  }
  /* Stack the add button under the product so a narrow phone row never clips. */
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide {
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 12px;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-link {
    flex: 1 1 100%;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-img {
    width: 64px;
    height: 64px;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add {
    flex: 1 1 100%;
    justify-content: center;
    padding: 12px 18px;
  }
}

/* Respect reduced motion: freeze the marquee + skip digit roll travel */
@media (prefers-reduced-motion: reduce) {
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__marquee-track {
    animation: none;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__digit-strip {
    transition: none;
  }
  /* Carousel: keep the slide change instant, no glide/fade/scale or pop. */
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-info, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-add, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-soldout {
    transition: none;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell {
    opacity: 1;
    transform: none;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-info, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-add, .cc_xqaduz1e_qPnsGD33v7 .ali-cd__track-cell .ali-cd__slide-soldout {
    opacity: 1;
    transform: none;
  }
  .cc_xqaduz1e_qPnsGD33v7 .ali-cd__slide-add.is-added .ali-cd__slide-add-icon {
    animation: none;
  }
}