/* ==========================================================================
   TcHeroSlider - the full-width banner slider.

   The theme loads swiper-bundle.js but NOT Swiper's stylesheet, which is why
   product-card.css already carries its own scoped copy of the few structural
   rules Swiper needs. The same is done here, scoped to .tc-hero, rather than
   pulling in the library sheet for one component.

   The ARROWS below belong to the NEWS STRIP, not to the banner. The banner has
   dots and nothing else - Owl never drew arrows on it either, and on a
   full-bleed image a pair of plated arrows over the artwork reads as chrome
   bolted onto a picture.

   They are not styled here at all. TcHeroSlider builds them with the theme's own
   `.tc-row__nav` classes, so their size, radius, frosted plate, hover and
   disabled state come from product-card.css section 8 - the same arrows every
   product row uses. Only their placement is set below.
   ========================================================================== */

.vp-slider-full {
    position: relative;
}

/* STRUCTURE. Swiper needs exactly this much: a clipped viewport, a flex track,
   and slides that do not shrink. */
.tc-hero {
    overflow: hidden;
    width: 100%;

    /* GESTURE OWNERSHIP. The same omission product-card.css section 2 documents, repeated
       here because this sheet was written for STRUCTURE and gesture ownership is not
       structure - it is the one rule the library's own stylesheet carries that a scoped copy
       is most likely to leave behind. Swiper's swiper.css declares `touch-action: pan-y` on
       .swiper; the theme does not load that sheet, so this container inherited `auto`.

       With `auto` the browser keeps BOTH axes and only surrenders the horizontal one after
       its scroll-intent heuristic has watched the gesture for several frames - which reads as
       a sticky, half-ignored swipe where the banner often does not change at all. Measured on
       the product row before the same fix was applied there: ONE touchMove out of sixteen
       reached Swiper, and setTranslate never fired; with pan-y, 16 of 16.

       A vertical drag still scrolls the page, and the tap through to the banner's link is
       unaffected - touch-action governs panning, not clicks. */
    touch-action: pan-y;
}

.tc-hero > .swiper-wrapper {
    display: flex;
    box-sizing: content-box;
    /* Swiper drives the transform; without this the track has no baseline and
       the first paint can land mid-slide. */
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tc-hero > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    position: relative;
    /* The banner is one image in one link. Making the slide the block that sizes
       it keeps the image from inheriting a stale width during the transform. */
    display: block;
}

.tc-hero .vp-slide,
.tc-hero .vp-slide > a {
    display: block;
}

.tc-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ARROWS - placement only, and only the news strip builds any. Vertically
   centred, inset from the edge, above the pagination rail. */
.tc-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.tc-hero__nav.tc-row__nav--prev {
    right: 16px;
}

.tc-hero__nav.tc-row__nav--next {
    left: 16px;
}

/* PAGINATION. A rail of pills under the banner's lower edge, centred. The
   active one widens rather than changing colour alone, so it reads at a glance
   on a busy banner and does not depend on a single accent being visible
   against whatever artwork is behind it. */
.tc-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.tc-hero__dots .swiper-pagination-bullet {
    pointer-events: auto;
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.tc-hero__dots .swiper-pagination-bullet-active {
    width: 22px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .tc-hero__dots .swiper-pagination-bullet {
        transition: none;
    }
}

@media only screen and (max-width: 767.98px) {
    /* Nothing builds arrows at this width - the news strip is desktop-only and the
       banner has none at all. Restated here so a CACHED script from before either
       of those decisions cannot leave a pair drawn over the artwork. */
    .tc-hero__nav {
        display: none;
    }

    /* On a phone the rail shrinks into one small frosted capsule: 4px dots 2px apart on a
       translucent white plate, the active one a 16px white pill. Measured off the reference
       banner (a 1080px-wide screenshot, so about 2.7 device pixels per CSS pixel). The rail
       stops being full width so the plate hugs the dots. */
    .tc-hero__dots {
        left: 50%;
        right: auto;
        bottom: 6px;
        transform: translateX(-50%);
        width: auto;
        gap: 2px;
        padding: 2px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.35);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .tc-hero__dots .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        margin: 0;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: none;
        opacity: 1;
    }

    .tc-hero__dots .swiper-pagination-bullet-active {
        width: 16px;
        background: #fff;
    }
}

/* ==========================================================================
   THE HOME NEWS STRIP (.vp-post-slider), the second Owl slider to move.

   Owl's `autoWidth: true` let each card keep the width the theme gives
   `.vp-post-item-theme`. `slidesPerView: 'auto'` is that same behaviour, and
   it needs the slide box to stop claiming a share of the track - hence
   `width: auto` below. Without it every card collapses to Swiper's default
   equal share and the strip reflows.
   ========================================================================== */
.tc-postrow__host {
    position: relative;
}

.tc-postrow {
    overflow: hidden;
    width: 100%;
    /* Desktop-only today, so this is the mouse-drag path - but a touch laptop reaches it,
       and the reason is the same one above. */
    touch-action: pan-y;
}

.tc-postrow > .swiper-wrapper {
    display: flex;
    box-sizing: content-box;
    position: relative;
}

.tc-postrow > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: auto;
    height: auto;
}

/* Arrows: vertically centred on the cards, clear of the section heading above
   them. Everything else about them is product-card.css section 8. */
.tc-postrow__host > .tc-hero__nav {
    top: 60%;
}

/* ==========================================================================
   THE BRAND STRIP (.brand_slider-home), the third and last Owl slider.

   A row of brand logos from NopLine.Plugin.Widgets.PicturesSection. The theme
   has no rule anywhere for .brand_slider-home or .brands-slider - the strip's
   whole appearance came from Owl, which is why it has looked like an unstyled
   stack since Owl was dropped. What follows is the structure Swiper needs and
   nothing more; slide WIDTH is Swiper's (slidesPerView per breakpoint), so no
   width is set here.
   ========================================================================== */
.tc-brandrow__host {
    position: relative;
}

.tc-brandrow {
    overflow: hidden;
    width: 100%;
    /* Same reason as .tc-hero above: Swiper's own stylesheet is not loaded, and
       this is the rule in it that decides who owns a horizontal drag. */
    touch-action: pan-y;
}

.tc-brandrow > .swiper-wrapper {
    display: flex;
    box-sizing: content-box;
    position: relative;
}

.tc-brandrow > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    height: auto;
}

/* The plugin emits <a><div class="item"><div class="item__photo"><img>. Only the
   image needs constraining - it arrives at whatever size the thumbnail was cut. */
.tc-brandrow .item__photo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.tc-brandrow__host > .tc-hero__nav {
    top: 50%;
}

/* ==========================================================================
   HOME HERO PIN (mobile) - see the block of the same name in hero-slider.js.
   The banner's row is held under the sticky header; every later row is a white layer
   drawn over it, the first one with a soft shadow along its top edge.

   The band: while the pin is on (body.tc-home-band - the home page, below 960px, banner
   first) the header and the banner's row are light grey and the search box white, as on
   Digikala. The rows after the banner stay white, so the sheet is seen covering the banner.
   The banner's row is a flow-root so the grey runs through the space above and below the
   banner too (its inner margins no longer fall outside it).
   ========================================================================== */
@media only screen and (max-width: 959.98px) {
    .tc-home-band {
        --tc-home-band: #F0F0F1;
    }

    .tc-home-pin {
        position: sticky;
        top: var(--tc-home-pin-top, 0px);
        z-index: 0;
        display: flow-root;
        background-color: var(--tc-home-band, transparent);
    }

    .tc-home-band #vp-header,
    .tc-home-band #vp-header .vp-middle-header,
    .tc-home-band #vp-header .tc-msh-brand {
        background-color: var(--tc-home-band);
    }

    /* the grey band ends on a sharp edge, as noon's header does: the theme's soft shadow under
       it smeared that edge into a blurred strip over the white rows scrolling beneath */
    html body.tc-home-band #vp-header .vp-middle-header {
        box-shadow: none;
    }

    /* the theme sets the search box with `html body #vp-header .vp-middle-header
       .headerHome--search_box.search_box.vp-search-box ...`; the same chain plus the band's
       class outranks it without !important */
    html body.tc-home-band #vp-header .vp-middle-header .headerHome--search_box.search_box.vp-search-box .vp-search-box-inner {
        background: var(--tc-home-band);
    }

    html body.tc-home-band #vp-header .vp-middle-header .headerHome--search_box.search_box.vp-search-box .vp-form {
        background: #FFFFFF;
    }

    .tc-home-sheet {
        position: relative;
        z-index: 1;
        display: flow-root;
        background-color: #FFFFFF;
    }

    /* square corners, as the product page's sheet (pdp-mobile.css) */
    .tc-home-sheet--edge {
        box-shadow: 0 -6px 16px rgba(12, 12, 12, .08);
    }
}