/* ============================================================
   Divi Promo Countdown — Frontend v2
   Aspect ratio 9:16 (max 1080×1920) | Slider | No overflow
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS custom props ─────────────────────────────────────── */
.dpc-promos-wrapper {
  --dpc-orange:   #f5a623;
  --dpc-fire:     #ff6b35;
  --dpc-dark:     #0f0f1a;
  --dpc-dark2:    #1a1a2e;
  --dpc-white:    #ffffff;
  --dpc-off:      #f7f7fa;
  --dpc-border:   #ebebf0;
  --dpc-text:     #111118;
  --dpc-muted:    #888899;
  --dpc-radius:   clamp(10px, 2vw, 18px);

  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════
   PROMO BLOCK  —  9:16  (max 1080 × 1920)
   ════════════════════════════════════════════════════════════ */
.dpc-promo-block {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--dpc-white);
  border-radius: var(--dpc-radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.10);
  border: 1px solid var(--dpc-border);
  box-sizing: border-box;
}

/* top accent stripe */
.dpc-promo-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(3px, .35%, 5px);
  background: linear-gradient(90deg, var(--dpc-orange), var(--dpc-fire));
  z-index: 3;
}

/* ── TOP SECTION ──────────────────────────────────────────── */
.dpc-top-section {
  flex: 0 0 auto;
  max-height: 40%;
  overflow: hidden;
  padding: clamp(12px, 3%, 32px) clamp(14px, 4%, 40px) clamp(8px, 1.8%, 20px);
  background: var(--dpc-white);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2%, 14px);
  box-sizing: border-box;
  z-index: 1;
}

/* ── Header ── */
.dpc-promo-header {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 14px);
  overflow: hidden;
}

.dpc-promo-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--dpc-orange), var(--dpc-fire));
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: clamp(8px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: .08em;
  padding: clamp(3px, .4%, 5px) clamp(7px, 1.1%, 14px);
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dpc-promo-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(12px, 2vw, 24px);
  color: var(--dpc-text);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Countdown ── */
.dpc-countdown-wrap {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--dpc-dark2), var(--dpc-dark));
  border-radius: clamp(8px, 1.5vw, 14px);
  padding: clamp(7px, 1.4%, 16px) clamp(10px, 2.5%, 26px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 18px);
  overflow: hidden;
}

.dpc-countdown-label {
  color: rgba(255,255,255,.6);
  font-family: 'Inter', sans-serif;
  font-size: clamp(8px, .9vw, 12px);
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.dpc-countdown {
  display: flex;
  align-items: center;
  gap: clamp(3px, .7vw, 7px);
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.dpc-countdown-unit {
  flex: 1;
  min-width: 0;
  max-width: clamp(44px, 7vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: clamp(5px, .9vw, 10px);
  padding: clamp(5px, .9%, 12px) clamp(4px, 1%, 16px);
}

.dpc-num {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 3.2vw, 38px);
  color: var(--dpc-orange);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.dpc-num.flip { animation: numFlip .25s ease; }
@keyframes numFlip {
  0%   { transform: scaleY(1); opacity: 1; }
  50%  { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

.dpc-unit-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(6px, .8vw, 10px);
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
  white-space: nowrap;
}

.dpc-countdown-sep {
  font-family: 'Syne', sans-serif;
  font-size: clamp(12px, 2.2vw, 26px);
  color: rgba(255,255,255,.28);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Expired ── */
.dpc-expired-msg {
  background: #fff8f8;
  border: 1px solid #fed7d7;
  color: #c53030;
  border-radius: clamp(6px, 1vw, 10px);
  padding: clamp(7px, 1.2%, 12px) clamp(10px, 2%, 18px);
  font-size: clamp(9px, 1.2vw, 13px);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

/* ── Timeline ── */
.dpc-timeline { flex-shrink: 0; }

.dpc-timeline-bar {
  height: clamp(3px, .45%, 6px);
  background: var(--dpc-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: clamp(3px, .5%, 7px);
}

.dpc-timeline-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dpc-orange), var(--dpc-fire));
  border-radius: 4px;
  transition: width .5s ease;
}

.dpc-timeline-dates {
  display: flex;
  justify-content: space-between;
  font-size: clamp(8px, .9vw, 11px);
  color: var(--dpc-muted);
  font-family: 'Inter', sans-serif;
}

/* ════════════════════════════════════════════════════════════
   PRODUCTS SECTION  —  fills the remaining 60 %
   ════════════════════════════════════════════════════════════ */
.dpc-products-section {
  flex: 1 1 0;
  min-height: 0;          /* ← prevents flex children from growing */
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1%, 10px);
  padding: clamp(8px, 2%, 18px) clamp(14px, 4%, 40px) clamp(8px, 1.8%, 16px);
  background: var(--dpc-off);
  box-sizing: border-box;
  overflow: hidden;
}

/* ─── SINGLE PRODUCT ─────────────────────────────────────── */
.dpc-single-product .dpc-products-section {
  justify-content: stretch;
}

.dpc-single-product .dpc-product-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: var(--dpc-radius);
  background: var(--dpc-white);
  border: 1px solid var(--dpc-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.dpc-single-product .dpc-product-img-wrap {
  flex: 0 0 46%;
  aspect-ratio: unset;
  height: 100%;
}

.dpc-single-product .dpc-product-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── SLIDER ─────────────────────────────────────────────── */
.dpc-slider-wrap {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(5px, 1.2vw, 12px);
  overflow: hidden;
}

.dpc-slider-viewport {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--dpc-radius);
  position: relative;
}

.dpc-slider-track {
  display: flex;
  height: 100%;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Every slide occupies exactly the viewport width */
.dpc-has-slider .dpc-product-card {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dpc-white);
  border-radius: 0;  /* radius on viewport */
  border: none;
}

.dpc-has-slider .dpc-product-img-wrap {
  flex: 0 0 54%;
  aspect-ratio: unset;
}

.dpc-has-slider .dpc-product-info {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Arrows ── */
.dpc-arrow {
  flex-shrink: 0;
  align-self: center;
  width:  clamp(32px, 5vw, 48px);
  height: clamp(32px, 5vw, 48px);
  border-radius: 50%;
  border: 2px solid var(--dpc-border);
  background: var(--dpc-white);
  color: var(--dpc-dark);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dpc-arrow svg {
  width:  45%;
  height: 45%;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
}
.dpc-arrow:hover  {
  background: var(--dpc-orange);
  border-color: var(--dpc-orange);
  color: #fff;
  transform: scale(1.08);
}
.dpc-arrow:active { transform: scale(.94); }

/* ── Dots ── */
.dpc-dots {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: clamp(4px, .7vw, 8px);
}

.dpc-dot {
  width:  clamp(6px, .9vw, 10px);
  height: clamp(6px, .9vw, 10px);
  border-radius: 50%;
  border: none;
  background: var(--dpc-border);
  cursor: pointer;
  transition: background .2s, transform .18s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dpc-dot-active, .dpc-dot:hover {
  background: var(--dpc-orange);
  transform: scale(1.32);
}

/* ════════════════════════════════════════════════════════════
   PRODUCT CARD INTERNALS  (shared by single + slider)
   ════════════════════════════════════════════════════════════ */
.dpc-product-card { position: relative; }

.dpc-product-badge {
  position: absolute;
  top:  clamp(7px, 1.1%, 13px);
  left: clamp(7px, 1.1%, 13px);
  background: linear-gradient(135deg, var(--dpc-fire), var(--dpc-orange));
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(9px, 1.3vw, 15px);
  padding: clamp(2px, .35%, 5px) clamp(7px, 1.1%, 13px);
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(255,107,53,.28);
  white-space: nowrap;
}

.dpc-product-img-wrap {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--dpc-off);
  flex-shrink: 0;
}
/* default 1:1 only for stacked layout */
.dpc-single-product .dpc-product-img-wrap,
.dpc-has-slider     .dpc-product-img-wrap { aspect-ratio: unset; }

.dpc-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.dpc-product-card:hover .dpc-product-img-wrap img { transform: scale(1.04); }

.dpc-product-info {
  padding: clamp(10px, 2.2%, 20px) clamp(12px, 3%, 24px);
  box-sizing: border-box;
  overflow: hidden;
}

.dpc-product-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.5vw, 18px);
  color: var(--dpc-text);
  margin: 0 0 clamp(5px, .9%, 10px);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dpc-product-name a { color: inherit; text-decoration: none; }
.dpc-product-name a:hover { color: var(--dpc-orange); }

.dpc-prices {
  display: flex;
  align-items: baseline;
  gap: clamp(5px, .9vw, 11px);
  flex-wrap: wrap;
  margin-bottom: clamp(7px, 1.3%, 14px);
  overflow: hidden;
}

.dpc-price-before {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 1.2vw, 14px);
  color: var(--dpc-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

.dpc-price-after {
  font-family: 'Syne', sans-serif;
  font-size: clamp(15px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--dpc-fire);
  line-height: 1;
  white-space: nowrap;
}
.dpc-price-after .woocommerce-Price-currencySymbol {
  font-size: .55em; vertical-align: super;
}

.dpc-product-cta {
  display: block;
  background: linear-gradient(135deg, var(--dpc-dark2), var(--dpc-dark));
  color: var(--dpc-orange) !important;
  text-decoration: none !important;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 1.3vw, 14px);
  letter-spacing: .03em;
  text-align: center;
  padding: clamp(7px, 1.1%, 13px) clamp(8px, 1.8%, 18px);
  border-radius: clamp(5px, .9vw, 10px);
  transition: all .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: auto;
}
.dpc-product-cta:hover {
  background: linear-gradient(135deg, var(--dpc-orange), var(--dpc-fire)) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   clamp() handles fluid scaling; these handle layout changes.
   ════════════════════════════════════════════════════════════ */

/* ≤ 640px — stack image above info in single mode */
@media (max-width: 640px) {
  .dpc-top-section { max-height: 44%; }
  .dpc-countdown-label { display: none; }

  .dpc-single-product .dpc-product-card { flex-direction: column; }
  .dpc-single-product .dpc-product-img-wrap { flex: 0 0 52%; height: 52%; }

  .dpc-has-slider .dpc-product-card { flex-direction: column; }
  .dpc-has-slider .dpc-product-img-wrap { flex: 0 0 52%; }
}

/* ≤ 420px — tighter chrome */
@media (max-width: 420px) {
  .dpc-top-section { max-height: 46%; padding: 10px 12px 8px; }
  .dpc-countdown-wrap { padding: 8px 10px; gap: 6px; }
}

/* ≤ 320px — hide arrows, use swipe only */
@media (max-width: 320px) {
  .dpc-arrow { display: none; }
  .dpc-slider-wrap { gap: 0; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP  ≥ 769px  —  single column, 9:16, max 600px centered
   Same vertical layout as mobile, just wider max-width cap.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* Single centered column, fixed max width so it doesn't
     stretch into an unusable wide banner */
  .dpc-promo-block {
    max-width: 480px;
    aspect-ratio: 9 / 16;
    flex-direction: column;  /* keep vertical */
    container-type: size;
  }

  /* Accent stays as top horizontal stripe */
  .dpc-promo-block::before {
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100%;
    height: clamp(3px, .35%, 5px);
  }

  /* Top section: up to 40% of block height, same as mobile */
  .dpc-top-section {
    flex: 0 0 auto;
    max-height: 40%;
    height: auto;
    width: 100%;
    border-right: none;
    padding: 4cqh 5cqi 2cqh;
    gap: 2cqh;
    justify-content: flex-start;
    background: var(--dpc-white);
    box-sizing: border-box;
  }

  /* Title: single line with ellipsis (narrow column) */
  .dpc-promo-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(14px, 4cqw, 22px);
    display: block;
    -webkit-line-clamp: unset;
  }

  .dpc-promo-badge {
    font-size: clamp(9px, 2.5cqw, 13px);
    padding: .5cqh 2cqi;
  }

  /* Countdown: horizontal row of units, same as mobile */
  .dpc-countdown-wrap {
    flex-direction: row;
    align-items: center;
    padding: 2cqh 3cqi;
    gap: 2cqi;
  }

  .dpc-countdown-label {
    display: none;   /* too narrow for label in column */
  }

  .dpc-countdown {
    flex: 1;
    gap: 1cqi;
    justify-content: center;
  }

  .dpc-countdown-unit {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 1.5cqh 1cqi;
    border-radius: 1.2cqh;
  }

  .dpc-num {
    font-size: clamp(16px, 5cqw, 32px);
    line-height: 1;
  }

  .dpc-unit-label {
    font-size: clamp(7px, 2cqw, 11px);
  }

  .dpc-countdown-sep {
    font-size: clamp(14px, 4cqw, 24px);
    flex-shrink: 0;
  }

  .dpc-timeline-bar  { height: clamp(3px, .5cqh, 6px); }
  .dpc-timeline-dates { font-size: clamp(9px, 2.2cqw, 12px); }

  /* Products section: fills remaining height, column */
  .dpc-products-section {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: auto;
    flex-direction: column;
    padding: 2cqh 4cqi 2.5cqh;
    background: var(--dpc-off);
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Single product card: column (image top, info bottom) */
  .dpc-single-product .dpc-product-card {
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    height: 100%;
    border-radius: 1.5cqh;
    overflow: hidden;
    background: var(--dpc-white);
    border: 1px solid var(--dpc-border);
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
  }

  .dpc-single-product .dpc-product-img-wrap {
    flex: 0 0 55%;
    aspect-ratio: unset;
    width: 100%;
    height: 55%;
  }

  .dpc-single-product .dpc-product-info {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2cqh 3cqi;
    overflow: hidden;
  }

  /* Slider: same column card */
  .dpc-slider-wrap {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    align-items: stretch;
    gap: 2cqi;
  }

  .dpc-slider-viewport {
    border-radius: 1.5cqh;
    overflow: hidden;
  }

  .dpc-slider-track { height: 100%; }

  .dpc-has-slider .dpc-product-card {
    flex-direction: column;
    height: 100%;
    background: var(--dpc-white);
    border-radius: 0;
    border: none;
    overflow: hidden;
  }

  .dpc-has-slider .dpc-product-img-wrap {
    flex: 0 0 55%;
    aspect-ratio: unset;
    width: 100%;
  }

  .dpc-has-slider .dpc-product-info {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2cqh 3cqi;
    overflow: hidden;
  }

  /* Arrows */
  .dpc-arrow {
    align-self: center;
    flex-shrink: 0;
    width:  5cqh;
    height: 5cqh;
    font-size: 3cqh;
  }

  /* Dots */
  .dpc-dots { padding: 1.2cqh 0 0; }
  .dpc-dot  { width: 1.2cqh; height: 1.2cqh; }

  /* Card internals */
  .dpc-product-badge {
    font-size: clamp(10px, 3cqw, 15px);
    padding: .6cqh 1.8cqi;
    top:  1.5cqh;
    left: 1.8cqi;
    border-radius: 3cqh;
  }

  .dpc-product-name {
    font-size: clamp(12px, 3.5cqw, 18px);
    -webkit-line-clamp: 2;
    margin: 0 0 1cqh;
    line-height: 1.3;
  }

  .dpc-prices {
    gap: 2cqi;
    margin-bottom: 1cqh;
    flex-wrap: nowrap;
    align-items: baseline;
  }

  .dpc-price-before { font-size: clamp(10px, 2.5cqw, 14px); }

  .dpc-price-after  {
    font-size: clamp(18px, 6cqw, 34px);
  }

  .dpc-product-cta {
    flex-shrink: 0;
    font-size: clamp(11px, 3cqw, 15px);
    padding: 1.5cqh 2cqi;
    border-radius: 1.2cqh;
    margin-top: auto;
  }
}