/* ============================================================
   mobile-banner.css — CORE mobile hero slider touch-ups (<=767px)
   ------------------------------------------------------------
   The hero is the AnywhereSlider (Swiper, .nop-slider) — its slides
   are generated by the plugin JS and its content/colours are shop
   config. We DON'T restyle it; we only add defensive, neutral
   best-practice aids: caption legibility over imagery, and 44px
   touch targets for the CTA and pagination. Attribute selectors are
   defensive — if a class isn't present the rule simply no-ops.
   ============================================================ */
@media (max-width: 767.98px) {
    /* caption legibility over busy/ light images (subtle, colour-neutral) */
    .nop-slider [class*="caption"],
    .nop-slider [class*="title"],
    .nop-slider [class*="subtitle"],
    .nop-slider [class*="text"] {
        text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }

    /* touch-friendly CTA button/link inside a slide
       (.swiper-full-link = the whole image is the link: it must stay a plain block, not a 44px flex box) */
    .nop-slider .swiper-slide a:not(.swiper-full-link) {
        min-height: var(--m-touch-min);
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* larger pagination dots for thumb taps */
    .nop-slider .swiper-pagination-bullet {
        width: 11px; height: 11px;
    }

    /* visual hierarchy: on a phone the hero is a short wide strip and the
       absolutely-positioned dot row lands ON the slide content (covered the
       baked-in CTA in the GOL002 audit). Best practice (Shein/Sephora mobile
       heroes): dots sit BELOW the imagery on their own row. Static flow also
       stops dots from fighting the slide for taps. Colour stays the swiper/
       shop default. */
    /* (!important: the swiper bundle css is injected at widget render time —
       after the theme list — so plain order/specificity can lose to it) */
    .nop-slider .swiper-pagination,
    .nop-slider .swiper-pagination-horizontal {
        position: static !important;
        margin-top: 8px;
        line-height: 1;
    }
    .nop-slider .swiper-pagination-bullet { margin: 0 5px !important; }

    /* slide CTA (.npc-slider-btn): the plugin lays it mid-left IN flow, where
       it covers the artwork's baked-in copy on a short mobile strip (user
       report). Best practice (mobile heroes): compact pill pinned bottom-left,
       clear of the headline zone. Colour-neutral translucent dark. */
    .nop-slider .swiper-slide { position: relative; }
    /* the plugin nests the CTA in a 20x20 .npc-slider-caption-inner whose
       TRANSFORM makes it the containing block for the absolute pill (a
       transformed element captures abs descendants even when static) — the
       pill must anchor to the FULL-SLIDE caption box, so neutralise both */
    .nop-slider .npc-slider-caption-inner {
        position: static !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }
    .nop-slider .swiper-slide .npc-slider-btn {
        position: absolute !important;
        left: 10px !important; right: auto !important;
        bottom: 8px !important; top: auto !important;
        transform: none !important;
        z-index: 2;
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; padding: 0 18px;
        border-radius: 999px;
        font-size: 12px; font-weight: 700; letter-spacing: .06em;
        white-space: nowrap;
        background: rgba(17, 19, 26, .78); color: #fff;
    }

    /* prev/next arrows: half-clipped 27px circles at the strip edges on a
       phone, and they fight the CTA for space — swipe + the dot row below are
       the mobile navigation (Shein/Sephora pattern). Desktop unaffected. */
    .nop-slider .swiper-button-prev,
    .nop-slider .swiper-button-next { display: none !important; }
}