/**
 * Qing Vendor / Product Slider widget styles.
 * Swiper based, same model as the Category Slider: Swiper owns slide widths
 * and gaps, this file styles the cards, arrows and pagination only.
 */

.qing-vendor-slider {
    --qing-vendor-accent: #b3946f;
    --qing-vendor-accent-dark: #96774f;
    --qing-vendor-text: #2f2b28;
    --qing-vendor-muted: #7a736c;
    --qing-vendor-border: #eae5df;
    --qing-vendor-link: #6b4f9e; /* title + "Learn more" link colour */
    position: relative;
}

.qing-vendor-slider__title {
    font-family: Georgia, "Songti SC", serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--qing-vendor-text);
    margin: 0 0 20px;
    /* No side padding: the title has to line up with the first card, and the
       Swiper track starts at the container's left edge. */
    padding: 0;
}

/* ---------- Swiper ----------
   Same model as the Category Slider: Swiper owns slide widths and gaps, so
   cards can never exceed the container. The wrapper is the positioning
   context for the arrows, which sit outside the clipped container. */
.qing-vendor-slider__wrap {
    position: relative;
}

.qing-vendor-slider__swiper {
    overflow: hidden;
    width: 100%;
}

.qing-vendor-slider__slide {
    height: auto; /* cards size naturally instead of stretching */
    display: flex;
}

/* ---------- Tile / card ---------- */
.vendorTile {
    width: 100%; /* the slide controls the width now */
    background: #fff;
    border: 1px solid var(--qing-vendor-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* No hover shadow by default. If you want one, set it in the widget:
   Style -> Card -> Hover -> Box Shadow. */
.vendorTile:hover {
    transform: translateY(-3px);
}

/* Gallery */
.vendorTileGallery {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f2ede7;
}

.vendorTileGallery__imageLink,
.vendorTileGallery__image {
    display: block;
    width: 100%;
    height: 100%;
}

.vendorTileGallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.vendorTile:hover .vendorTileGallery__image img {
    transform: scale(1.05);
}

/* Favorite heart */
/* Icon only: no circle, no shadow. Hover just scales it (no colour change). */
.vendorTileGallery__favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: #ffffff;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    transition: transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

/* `i` covers icon-font choices from the widget's Favorite Icon control. */
.vendorTileGallery__favorite svg,
.vendorTileGallery__favorite i {
    display: block;
    pointer-events: none;
    line-height: 1;
    /* Keeps a white outline readable on light photos. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.vendorTileGallery__favorite:hover,
.vendorTileGallery__favorite:focus-visible {
    transform: scale(1.15);
    background: none;
}

/* Active state is the only place the colour changes. */
.vendorTileGallery__favorite.is-active .qing-heart {
    fill: currentColor;
}

/* Content */
.vendorTile__content {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vendorTile__titleWrap {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.35;
}

.vendorTile__title {
    color: var(--qing-vendor-link, #6b4f9e);
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vendorTile__title:hover {
    text-decoration: underline;
}

.vendorTile__subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 13px;
    color: var(--qing-vendor-muted);
    margin-bottom: 10px;
}

.vendorTile__contentRating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.vendorTile__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #f4a825;
    font-weight: 600;
}

/* `i` covers icon-font choices from the widget's Rating Star Icon control. */
.vendorTile__rating svg,
.vendorTile__rating i {
    flex: 0 0 auto;
    line-height: 1;
}

.vendorTile__reviews {
    color: var(--qing-vendor-muted);
    font-weight: 400;
}

.vendorTile__location {
    display: inline-flex;
    align-items: center;
}

/* ---------- Price row ----------
   "From £350"  +  deal tag  +  -15%  on one line, wrapping if needed. */
.vendorTile__priceRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.vendorTile__price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--qing-vendor-text);
}

/* `i` covers icon-font choices from the widget's Price Icon control. */
.vendorTile__price svg,
.vendorTile__price i {
    color: var(--qing-vendor-muted);
    flex: 0 0 auto;
    line-height: 1;
}

.vendorTile__priceText del {
    color: var(--qing-vendor-muted);
    font-weight: 400;
}

.vendorTile__priceText ins {
    text-decoration: none;
}

.vendorTile__deal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--qing-vendor-text);
}

/* `i` covers icon-font choices from the widget's Deal Tag Icon control. */
.vendorTile__deal svg,
.vendorTile__deal i {
    color: var(--qing-vendor-muted);
    flex: 0 0 auto;
    line-height: 1;
}

.vendorTile__discount {
    color: #c0392b;
    font-weight: 600;
}

/* ---------- Learn more ---------- */
.vendorTile__more {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    color: var(--qing-vendor-link, #6b4f9e);
    text-decoration: none;
}

.vendorTile__more:hover {
    text-decoration: underline;
}

/* Underline behaviour, driven by the widget's "Underline" control. */
.qing-vendor-slider.qing-more-underline .vendorTile__more {
    text-decoration: underline;
}

.qing-vendor-slider.qing-more-no-underline .vendorTile__more,
.qing-vendor-slider.qing-more-no-underline .vendorTile__more:hover {
    text-decoration: none;
}

/* ---------- Arrows ----------
   Mirrors the Category Slider: flex centring, line-height:0 to kill the
   inline baseline gap, and an offset variable so the widget can push the
   arrows in or out of the slider. */
.qing-vendor-slider__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--qing-vendor-border);
    border-radius: 50%;
    background: #fff;
    color: var(--qing-vendor-text);
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.qing-vendor-slider__arrow:hover {
    color: var(--qing-vendor-accent);
}

.qing-vendor-slider__arrow svg {
    display: block;
    position: relative;
    pointer-events: none;
}

/* The chevron is not geometrically centred in its viewBox. */
.qing-vendor-slider__arrow--prev svg {
    left: -1px;
}

.qing-vendor-slider__arrow--next svg {
    left: 1px;
}

.qing-vendor-slider__arrow--prev {
    left: 6px;
}

.qing-vendor-slider__arrow--next {
    right: 6px;
}

/* At either end: visible but dimmed (default). */
.qing-vendor-slider__arrow.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.qing-vendor-slider__arrow.is-disabled:hover {
    color: var(--qing-vendor-text);
    transform: translateY(-50%);
}

/* Optional: hide completely instead of dimming. */
.qing-vendor-slider__arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* No drop shadow variant. */
.qing-vendor-slider.qing-arrows-flat .qing-vendor-slider__arrow {
    box-shadow: none;
}

/* ---------- Pagination ---------- */
.qing-vendor-slider__pagination {
    position: static;
    margin-top: 14px;
    text-align: center;
}

/* ---------- Responsive ----------
   No mobile font-size override here: the widget's responsive Typography
   control owns the title size on every breakpoint. Card width comes from
   Swiper's slidesPerView, so there is no fixed width either. */
@media (max-width: 767px) {
    /* Arrows off on mobile by default (widget toggle "Show Arrows on
       Mobile"). With a negative Horizontal Offset they hang outside the
       slider, and since the container is full-width on a phone that pushes
       past the viewport and makes the whole page scroll sideways. */
    .qing-vendor-slider.qing-arrows-hide-mobile .qing-vendor-slider__arrow {
        display: none;
    }

    /* Belt and braces: even if arrows are switched on with a negative
       offset, clip them here instead of letting the page scroll sideways.
       `clip` (not `hidden`) on purpose: `overflow-x: hidden` alone forces
       overflow-y to compute as auto, which would create a stray scroll
       container. */
    .qing-vendor-slider {
        overflow-x: clip;
    }
}

/* ---------- Hover: zoom + gallery swap ----------
   Same model as the product grid. <picture> is the stacking context.
   !important overrides the Hover Zoom control, which writes its scale
   from a widget-scoped selector that outranks this file. */
.vendorTileGallery__image {
    position: relative;
}

.vendorTileGallery__image img {
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.vendorTile:hover .vendorTileGallery__image img,
.vendorTile:focus-within .vendorTileGallery__image img {
    transform: scale(var(--qing-vendor-zoom, 1.06)) !important;
}

/* Only tiles that rendered a second layer stack them. */
.vendorTileGallery.has-hoverImage .vendorTileGallery__image img {
    position: absolute;
    top: 0;
    left: 0;
}

.vendorTileGallery__img--hover {
    opacity: 0;
}

.vendorTile:hover .vendorTileGallery__img--hover,
.vendorTile:focus-within .vendorTileGallery__img--hover {
    opacity: 1;
}

/* Scoped to .has-hoverImage on purpose: --primary exists on every tile, so
   an unscoped rule would fade the only image of a gallery-less product out to
   nothing on hover instead of just zooming it. */
.vendorTile:hover .vendorTileGallery.has-hoverImage .vendorTileGallery__img--primary,
.vendorTile:focus-within .vendorTileGallery.has-hoverImage .vendorTileGallery__img--primary {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    .vendorTileGallery__image img {
        transition: none;
    }

    .vendorTile:hover .vendorTileGallery__image img,
    .vendorTile:focus-within .vendorTileGallery__image img {
        transform: none !important;
    }
}