/* =====================================================================
   Care Ur Baby - Phase 3 storefront overrides
   Loaded LAST in the theme2 layout so these rules win.

   #5  - Offer badge must be bigger and eye-catching.
         The old badge was 9px with 2px padding - practically invisible
         on a phone. It is now larger, bolder and uses the brand red
         (#E30613 from the CUB logo). Offers are allowed to be colorful
         per the brand rules, so the badge also gets a subtle shadow so
         it lifts off busy product photos.

   #13 - The offer image is now a link; give it pointer feedback.
   ===================================================================== */

/* ---- Product card offer badge (#5) ------------------------------- */
/* Beats: main.css (9px !important), storefront-theme.css media rules
   (9-10px !important) and the phase bundle defaults. */

.theme2-offer-badge,
.phase1-storefront .theme2-offer-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #E30613 !important;   /* CUB brand red */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.2px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    min-height: 26px !important;
    box-shadow: 0 2px 8px rgba(227, 6, 19, 0.35) !important;
    text-transform: none !important;
    max-width: 100% !important;
    white-space: normal !important;   /* long Bangla badge text can wrap */
}

/* Phones get a slightly smaller - but still clearly readable - badge. */
@media (max-width: 767px) {
    .theme2-offer-badge,
    .phase1-storefront .theme2-offer-badge {
        font-size: 11px !important;
        padding: 5px 9px !important;
        min-height: 22px !important;
        border-radius: 7px !important;
    }
}

/* ---- Offers page discount badge (#5) ------------------------------ */

.phase2-discount-badge {
    background: #E30613 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(227, 6, 19, 0.4) !important;
}

@media (max-width: 767px) {
    .phase2-discount-badge {
        font-size: 13px !important;
        padding: 6px 11px !important;
    }
}

/* ---- Clickable offer image (#13) ----------------------------------- */

.phase3-offer-image-link {
    display: block;
    cursor: pointer;
}

.phase3-offer-image-link img {
    transition: transform 0.25s ease;
}

.phase3-offer-image-link:hover img {
    transform: scale(1.03);
}

.phase3-offer-image-link:focus-visible {
    outline: 3px solid #E30613;
    outline-offset: 2px;
}