/* ============================================================
   TEMPLATE 4 — CONTEXTUAL CATEGORY PROMOTION OVERRIDES
   DeliGo modern style: hero banner with overlay, large image,
   glassmorphism, bold accent, app-like feed.
   Scoped to .tpl-template4 so it only affects Template 4.
   ============================================================ */

.tpl-template4 .cat-promo-banner-wrap {
    padding: 0 16px;
    margin: 0 0 14px;
}

.tpl-template4 .cat-promo-banner {
    position: relative;
    border-radius: var(--radius-lg, 24px);
    border: 1px solid var(--border-card, rgba(0,0,0,.06));
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
    background: var(--bg-card, var(--color-card, #fff));
    overflow: hidden;
}

/* Image: full-width hero with overlay */
.tpl-template4 .cat-promo-media {
    flex: 0 0 44%;
    max-width: 44%;
    min-height: 160px;
}
.tpl-template4 .cat-promo-media img {
    border-radius: 0;
}
.tpl-template4 .cat-promo-media::after {
    background: linear-gradient(90deg, transparent 40%, rgba(12,12,16,.6));
}

/* Body: modern glass-like layout */
.tpl-template4 .cat-promo-body {
    padding: 18px 20px;
    gap: 6px;
    position: relative;
}
.tpl-template4 .cat-promo-badge {
    background: var(--accent-primary, var(--color-primary, #FFB800));
    color: var(--accent-text-dark, #0c0c10);
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-full, 999px);
    box-shadow: 0 2px 10px var(--accent-glow, rgba(255,184,0,.3));
}
.tpl-template4 .cat-promo-banner-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary, var(--color-text, #1a1a2e));
    line-height: 1.2;
}
.tpl-template4 .cat-promo-banner-subtitle {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.8rem;
    color: var(--text-secondary, var(--color-text-secondary, #5c5c72));
}

/* Price: bold accent */
.tpl-template4 .cat-promo-price-now {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent-primary, var(--color-primary, #FFB800));
}
.tpl-template4 .cat-promo-price-old {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    color: var(--text-muted, var(--color-text-secondary, #8e8ea2));
}
.tpl-template4 .cat-promo-price-off {
    background: var(--accent-primary, var(--color-primary, #FFB800));
    color: var(--accent-text-dark, #0c0c10);
    border-radius: var(--radius-full, 999px);
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 800;
}

/* CTA: modern pill with glow */
.tpl-template4 .cat-promo-cta {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--radius-full, 999px);
    padding: 12px 24px;
    background: var(--accent-primary, var(--color-primary, #FFB800));
    color: var(--accent-text-dark, #0c0c10);
    box-shadow: 0 6px 20px var(--accent-glow, rgba(255,184,0,.35));
    transition: var(--transition-smooth, all 0.28s cubic-bezier(0.16,1,0.3,1));
}
.tpl-template4 .cat-promo-cta:hover {
    background: var(--accent-hover, var(--color-primary-hover, #FFA000));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow, rgba(255,184,0,.45));
}

/* Multi-product chips: modern glass style */
.tpl-template4 .cat-promo-product {
    background: var(--bg-input, var(--color-surface, #f4f4f8));
    border: 1px solid var(--border-light, rgba(0,0,0,.04));
    border-radius: var(--radius-full, 999px);
    backdrop-filter: blur(8px);
}
.tpl-template4 .cat-promo-product:hover {
    background: color-mix(in srgb, var(--accent-primary, #FFB800) 10%, transparent);
    transform: translateY(-1px);
}
.tpl-template4 .cat-promo-product-name {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    color: var(--text-primary, var(--color-text, #1a1a2e));
}
.tpl-template4 .cat-promo-product-price {
    color: var(--accent-primary, var(--color-primary, #FFB800));
}
.tpl-template4 .cat-promo-product-cta {
    background: var(--accent-primary, var(--color-primary, #FFB800));
    color: var(--accent-text-dark, #0c0c10);
    border-radius: var(--radius-full, 999px);
}

/* Dark mode overrides for Template 4 */
.tpl-template4.dark-mode .cat-promo-banner,
[data-theme="dark"] .tpl-template4 .cat-promo-banner {
    background: var(--bg-card, #1c1c24);
    border-color: var(--border-card, #282836);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.45));
}
.tpl-template4.dark-mode .cat-promo-product,
[data-theme="dark"] .tpl-template4 .cat-promo-product {
    background: var(--bg-input, #171720);
    border-color: var(--border-light, rgba(255,255,255,.06));
}
.tpl-template4.dark-mode .cat-promo-banner-title,
[data-theme="dark"] .tpl-template4 .cat-promo-banner-title {
    color: var(--text-primary, #fff);
}
.tpl-template4.dark-mode .cat-promo-product-name,
[data-theme="dark"] .tpl-template4 .cat-promo-product-name {
    color: var(--text-primary, #fff);
}
.tpl-template4.dark-mode .cat-promo-media::after,
[data-theme="dark"] .tpl-template4 .cat-promo-media::after {
    background: linear-gradient(90deg, transparent 40%, rgba(12,12,16,.75));
}

/* Responsive — Template 4 */
@media (max-width: 768px) {
    .tpl-template4 .cat-promo-media { flex-basis: 40%; max-width: 40%; min-height: 140px; }
    .tpl-template4 .cat-promo-body { padding: 14px 16px; }
    .tpl-template4 .cat-promo-banner-title { font-size: 1rem; }
    .tpl-template4 .cat-promo-price-now { font-size: 1.15rem; }
}
@media (max-width: 560px) {
    .tpl-template4 .cat-promo-banner { flex-direction: column; border-radius: var(--radius-md, 18px); }
    .tpl-template4 .cat-promo-media { flex: none; max-width: 100%; width: 100%; height: 150px; }
    .tpl-template4 .cat-promo-media::after { background: linear-gradient(180deg, transparent 50%, rgba(12,12,16,.7)); }
    .tpl-template4 .cat-promo-body { padding: 14px 16px 18px; }
    .tpl-template4 .cat-promo-cta { width: 100%; justify-content: center; padding: 12px; }
}