/*
|--------------------------------------------------------------------------
| Veresel Carousel - visual layer
|--------------------------------------------------------------------------
| Rewritten as a single, de-duplicated stylesheet (the previous version had
| several "Patch" sections that redefined the same selectors 2-3 times).
| Uses CSS custom properties for easy theming and logical properties
| (margin-inline / inset-inline-*) so it behaves correctly in both RTL
| (Persian storefronts) and LTR sites without special-casing either.
*/

.vsl-carousel {
    --vsl-radius: 12px;
    --vsl-border: #eceff1;
    --vsl-shadow: 0 10px 25px rgba(17, 24, 39, .08);
    --vsl-shadow-lg: 0 16px 40px rgba(17, 24, 39, .12);
    --vsl-accent: #16a34a;
    --vsl-accent-dark: #15803d;
    --vsl-sale: #ef4444;
    --vsl-out: #6b7280;
    --vsl-text: #1f2328;
    --vsl-muted: #6b7280;
    --vsl-speed: .28s;
    --vsl-speed-slow: .45s;
    --vsl-ease: cubic-bezier(.22, .61, .36, 1);

    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .vsl-carousel {
        --vsl-speed: 0ms;
        --vsl-speed-slow: 0ms;
    }
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.vsl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 20px;
    gap: 12px;
}

.vsl-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--vsl-text);
}

.vsl-view-all {
    color: var(--vsl-accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--vsl-speed) var(--vsl-ease);
}

.vsl-view-all:hover,
.vsl-view-all:focus-visible {
    color: var(--vsl-accent-dark);
}

/*
|--------------------------------------------------------------------------
| Swiper container + loading state
|--------------------------------------------------------------------------
| The carousel is server-rendered (real products, not an empty shell), so
| there is a brief moment between "HTML painted" and "Swiper.js finished
| initializing" where slides could flash unstyled/overflowing. We hide the
| track behind a skeleton shimmer during that window and cross-fade to the
| real content once assets/js/swiper.js adds the `vsl-ready` class.
*/

.vsl-swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.vsl-carousel.vsl-ready .vsl-swiper {
    opacity: 1;
}

.vsl-swiper .swiper-wrapper {
    align-items: stretch;
}

.vsl-swiper .swiper-slide {
    height: auto;
}

.vsl-carousel:not(.vsl-ready) {
    position: relative;
    min-height: 260px;
}

.vsl-carousel:not(.vsl-ready)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vsl-radius);
    background: #eef0f2;
    overflow: hidden;
}

.vsl-carousel:not(.vsl-ready)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vsl-radius);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, .6) 50%,
        transparent 100%
    );
    animation: vsl-shimmer 1.4s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .vsl-carousel:not(.vsl-ready)::after {
        animation: none;
        opacity: .6;
    }
}

@keyframes vsl-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Staggered fade/slide-in for each card once the carousel becomes ready. */

.vsl-carousel.vsl-ready .swiper-slide {
    /* backwards (not both): the animation must release the slide's
       transform once finished, otherwise every slide keeps a permanent
       animated transform layer for the lifetime of the page. */
    animation: vsl-card-in var(--vsl-speed-slow) var(--vsl-ease) backwards;
}

.vsl-carousel.vsl-ready .swiper-slide:nth-child(1) { animation-delay: 0ms; }
.vsl-carousel.vsl-ready .swiper-slide:nth-child(2) { animation-delay: 40ms; }
.vsl-carousel.vsl-ready .swiper-slide:nth-child(3) { animation-delay: 80ms; }
.vsl-carousel.vsl-ready .swiper-slide:nth-child(4) { animation-delay: 120ms; }
.vsl-carousel.vsl-ready .swiper-slide:nth-child(5) { animation-delay: 160ms; }
.vsl-carousel.vsl-ready .swiper-slide:nth-child(n+6) { animation-delay: 200ms; }

@keyframes vsl-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vsl-carousel.vsl-ready .swiper-slide {
        animation: none;
    }
}

/*
|--------------------------------------------------------------------------
| Intro slide ("Amazing Deals" style)
|--------------------------------------------------------------------------
| A normal, scrolling swiper-slide (title, optional countdown, optional
| custom icon, "view all" link) that scrolls away with the rest of the
| carousel instead of staying fixed - lets more products be visible.
*/

.vsl-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    color: #fff;
    text-align: center;
    border: none;
}

.vsl-intro-full-image {
    padding: 0;
    position: relative;
    /* No independent aspect-ratio here on purpose: this slide sits in
       the same row as regular product cards, which stretch to match the
       tallest slide. Forcing this slide to its own fixed ratio made IT
       the tallest one and stretched every other card in the carousel to
       match. It now simply takes whatever height the row already has. */
}

.vsl-intro-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vsl-intro-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 14px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .15) 60%, transparent 100%);
    text-align: center;
}

.vsl-intro-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.vsl-intro-countdown {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    direction: ltr;
    background: rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 4px 10px;
}

.vsl-intro-icon-img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.vsl-intro-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 13px;
    transition: background var(--vsl-speed) var(--vsl-ease);
}

.vsl-intro-link:hover,
.vsl-intro-link:focus-visible {
    background: rgba(255, 255, 255, .15);
}

.vsl-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: currentColor;
    transform: rotate(-135deg); /* points toward the start (right, in RTL) */
}

[dir="ltr"] .vsl-chevron,
html:not([dir]) .vsl-chevron {
    transform: rotate(45deg); /* points toward the end (right) in LTR */
}

@media (max-width: 767px) {
    .vsl-intro-title {
        font-size: 13px;
    }

    .vsl-intro-countdown {
        font-size: 12px;
    }

    .vsl-intro-icon-img {
        max-width: 32px;
        max-height: 32px;
    }

    .vsl-intro-link {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/*
|--------------------------------------------------------------------------
| Navigation arrows
|--------------------------------------------------------------------------
| Positioned with logical inset properties so "start"/"end" follow the
| document's actual reading direction instead of a hard-coded side.
*/

.vsl-nav {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;
    transition: transform var(--vsl-speed) var(--vsl-ease), box-shadow var(--vsl-speed) var(--vsl-ease), opacity var(--vsl-speed) var(--vsl-ease);
    opacity: 0;
}

.vsl-carousel:hover .vsl-nav,
.vsl-nav:focus-visible {
    opacity: 1;
}

/* Arrows are a desktop-only affordance - touch/swipe is the natural
   interaction on mobile/tablet, matching the reference storefront. */
@media (max-width: 1023px), (hover: none) {
    .vsl-nav {
        display: none;
    }
}

.vsl-nav:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: var(--vsl-shadow-lg);
}

.vsl-nav:active {
    transform: translateY(-50%) scale(.96);
}

.vsl-nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.vsl-prev {
    inset-inline-end: -20px;
}

.vsl-next {
    inset-inline-start: -20px;
}

/*
|--------------------------------------------------------------------------
| "View all" trailing card
|--------------------------------------------------------------------------
*/

.vsl-more a {
    display: block;
    height: 100%;
    text-decoration: none;
}

.vsl-more-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    height: 100%;
    font-weight: 700;
    font-size: 18px;
    color: var(--vsl-text);
    border: 1px dashed var(--vsl-border);
    border-radius: var(--vsl-radius);
    transition: background var(--vsl-speed) var(--vsl-ease), color var(--vsl-speed) var(--vsl-ease);
}

.vsl-more a:hover .vsl-more-inner,
.vsl-more a:focus-visible .vsl-more-inner {
    background: var(--vsl-accent);
    color: #fff;
    border-color: var(--vsl-accent);
}

/*
|--------------------------------------------------------------------------
| Product card
|--------------------------------------------------------------------------
*/

.vsl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--vsl-border);
    border-radius: var(--vsl-radius);
    overflow: hidden;
    transition: box-shadow var(--vsl-speed) var(--vsl-ease);
}

/* Shadow only - no translateY lift: the slide sits inside Swiper's
   overflow:hidden track, so a lift just clipped the card's top border. */
.vsl-card:hover {
    box-shadow: var(--vsl-shadow);
}

.vsl-no-shadow .vsl-card:hover {
    box-shadow: none;
}

.vsl-card:focus-within {
    box-shadow: var(--vsl-shadow);
}

.vsl-media {
    position: relative;
}

.vsl-image {
    display: block;
}

.vsl-image-wrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fafafa;
}

.vsl-product-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity var(--vsl-speed-slow) var(--vsl-ease), transform var(--vsl-speed-slow) var(--vsl-ease);
}

.vsl-product-image.second {
    opacity: 0;
}

.vsl-card:hover .has-second-image .vsl-product-image.first {
    opacity: 0;
    transform: scale(1.05);
}

.vsl-card:hover .has-second-image .vsl-product-image.second {
    opacity: 1;
    transform: scale(1.05);
}

/* Products with only one image (no gallery): never hide it on hover -
   just zoom in, so hover never shows a blank/white card. */
.vsl-card:hover .vsl-image-wrapper:not(.has-second-image) .vsl-product-image.first {
    opacity: 1;
    transform: scale(1.05);
}

/* Skeleton shimmer behind product images while they load (native lazy-load
   means the browser may still be fetching them even after vsl-ready). */
.vsl-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f2f3f4;
    z-index: 0;
    overflow: hidden;
}

.vsl-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
    animation: vsl-shimmer 1.4s ease-in-out infinite;
    will-change: transform;
    z-index: 0;
}

/* Product images sit above the shimmer skeleton (::before/::after, z-index 0)
   and stay transparent so the skeleton shows through until they paint.
   Must stay position:absolute - this selector used to be
   `.vsl-image-wrapper img { position: relative }`, which out-ranked
   .vsl-product-image's `position: absolute` and pushed the second (hover)
   image below the first, where overflow:hidden clipped it - so hovering
   faded the main image out to an empty card. */
.vsl-image-wrapper .vsl-product-image {
    position: absolute;
    z-index: 1;
    background: transparent;
    -webkit-user-drag: none;
    user-select: none;
}

/* Once the main image has painted (swiper.js adds .vsl-img-loaded), drop
   the skeleton entirely. Previously the shimmer kept animating forever
   behind every card - dozens of permanently running composited animations
   on a page with several carousels, a major cause of stutter while
   swiping. */
.vsl-image-wrapper.vsl-img-loaded::before,
.vsl-image-wrapper.vsl-img-loaded::after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .vsl-image-wrapper::after {
        animation: none;
    }
}

/*
|--------------------------------------------------------------------------
| Badges (sale / out of stock)
|--------------------------------------------------------------------------
*/

.vsl-badges {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.vsl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 26px;
    padding: 0 10px;
    border-radius: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    animation: vsl-badge-in var(--vsl-speed) var(--vsl-ease) both;
}

@keyframes vsl-badge-in {
    from {
        opacity: 0;
        transform: scale(.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.vsl-sale {
    background: var(--vsl-sale);
}

.vsl-out {
    background: var(--vsl-out);
}

/*
|--------------------------------------------------------------------------
| Quick actions (quick view / wishlist / compare)
|--------------------------------------------------------------------------
| These had no base styling at all before this rewrite (only width/height
| overrides existed in the old responsive "patches").
*/

.vsl-actions {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(0);
    transition: opacity var(--vsl-speed) var(--vsl-ease);
}

.vsl-card:hover .vsl-actions,
.vsl-card:focus-within .vsl-actions {
    opacity: 1;
}

/* On touch devices there is no hover, so these can't be a hidden-until-
   hover overlay - but leaving them as an always-visible overlay covers
   part of the product image. Instead, take them out of the image overlay,
   lay them out as a normal row right below the image, and only reveal
   them after the shopper's first tap on the card (see swiper.js) - so a
   normal first tap still navigates straight to the product, matching the
   platform-standard "tap to peek, tap again to open" pattern. */
@media (hover: none) {
    .vsl-actions {
        position: static;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        margin: 0;
        transform: none;
        transition: opacity var(--vsl-speed) var(--vsl-ease), max-height var(--vsl-speed) var(--vsl-ease), margin var(--vsl-speed) var(--vsl-ease);
    }

    .vsl-card.vsl-tapped .vsl-actions {
        opacity: 1;
        max-height: 60px;
        margin: 8px 0 0;
    }
}

.vsl-action {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--vsl-text);
    transition: transform var(--vsl-speed) var(--vsl-ease), background var(--vsl-speed) var(--vsl-ease), color var(--vsl-speed) var(--vsl-ease);
}

.vsl-action.vsl-wishlist.vsl-active {
    background: var(--vsl-sale);
    color: #fff;
}

.vsl-action.vsl-compare.vsl-active {
    background: var(--vsl-accent);
    color: #fff;
}

.vsl-action.vsl-loading {
    opacity: .6;
    pointer-events: none;
}

.vsl-action:hover {
    background: var(--vsl-accent);
    color: #fff;
    transform: scale(1.08);
}

.vsl-action:active {
    transform: scale(.94);
}

.vsl-action:focus-visible {
    outline: 2px solid var(--vsl-accent);
    outline-offset: 2px;
}

/*
|--------------------------------------------------------------------------
| Card content
|--------------------------------------------------------------------------
*/

.vsl-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 8px;
    /* Logical alignment: resolves to right on RTL sites and left on LTR
       ones, following the dir attribute the template sets from is_rtl().
       Previously unset, so card text silently inherited whatever direction
       the theme happened to apply to the container - which on some themes
       meant Persian titles and prices rendered left-to-right. */
    text-align: start;
}

.vsl-content .vsl-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    min-height: 2.6em;
    margin: 0 0 8px;
    color: var(--vsl-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vsl-content .vsl-title a {
    color: var(--vsl-text);
    text-decoration: none;
    transition: color var(--vsl-speed) var(--vsl-ease);
}

.vsl-content .vsl-title a:hover,
.vsl-content .vsl-title a:focus-visible {
    color: var(--vsl-accent);
}

.vsl-rating {
    margin-bottom: 4px;
    font-size: 12px;
}

.vsl-content .vsl-price {
    margin-top: auto;
    margin-bottom: 8px;
    color: var(--vsl-text);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vsl-price-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vsl-price-old {
    font-size: 11px;
    font-weight: 400;
    color: var(--vsl-muted);
    text-decoration: line-through;
}

.vsl-price-now {
    font-size: 14px;
    font-weight: 700;
}

.vsl-price-badge {
    display: inline-flex;
    align-items: center;
    background: var(--vsl-sale);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 8px;
    direction: ltr;
}

.vsl-cart .button {
    width: 100%;
    min-height: 26px;
    font-size: 11px;
    text-align: center;
    border-radius: 6px;
    background: var(--vsl-accent);
    color: #fff;
    border: none;
    padding: 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: background var(--vsl-speed) var(--vsl-ease), transform var(--vsl-speed) var(--vsl-ease);
}

.vsl-cart .button:hover {
    background: var(--vsl-accent-dark);
}

.vsl-cart .button:active {
    transform: scale(.98);
}

.vsl-cart .button:focus-visible {
    outline: 2px solid var(--vsl-accent-dark);
    outline-offset: 2px;
}

/* Empty state (see VSL_Renderer's 'vsl_no_products' filter). */

.vsl-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--vsl-muted);
    background: #fafafa;
    border-radius: var(--vsl-radius);
    border: 1px dashed var(--vsl-border);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
| Matches the slidesPerView breakpoints in assets/js/swiper.js: 1.15 / 2 /
| 3 / 4 / 5 columns at 0 / 480 / 768 / 1024 / 1440px. Typography and
| spacing scale down a step at each of those same breakpoints so density
| and column count change together, rather than the fonts staying
| desktop-sized on a 2-column mobile layout.
*/

@media (max-width: 1439px) {
    .vsl-carousel {
        --vsl-radius: 12px;
    }
}

@media (max-width: 1023px) {
    .vsl-title {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .vsl-header {
        margin-block-end: 14px;
    }

    .vsl-title {
        font-size: 15px;
    }

    .vsl-content {
        padding: 8px;
    }

    .vsl-content .vsl-title {
        font-size: 12px;
        min-height: 2.6em;
    }

    .vsl-price-now {
        font-size: 13px;
    }

    .vsl-action {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .vsl-nav {
        width: 30px;
        height: 30px;
    }

    .vsl-more-inner {
        font-size: 13px;
    }
}

@media (max-width: 479px) {
    .vsl-header {
        flex-wrap: wrap;
    }

    .vsl-content {
        padding: 6px;
    }

    .vsl-content .vsl-title {
        font-size: 11px;
        min-height: 2.2em;
        margin-bottom: 4px;
    }

    .vsl-price-now {
        font-size: 12px;
    }

    .vsl-badge {
        height: 22px;
        font-size: 11px;
        padding: 0 8px;
    }
}

/*
|--------------------------------------------------------------------------
| Compare table ([veresel_compare] shortcode)
|--------------------------------------------------------------------------
*/

.vsl-compare-wrap {
    overflow-x: auto;
}

.vsl-compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.vsl-compare-table th,
.vsl-compare-table td {
    padding: 12px;
    border: 1px solid var(--vsl-border, #eceff1);
    vertical-align: middle;
}

.vsl-compare-table th {
    background: #fafafa;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.vsl-compare-row-image img {
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.vsl-compare-title a {
    color: var(--vsl-text, #1f2328);
    text-decoration: none;
    font-weight: 600;
}

.vsl-compare-remove {
    margin: 8px auto 0;
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.vsl-compare-row-cart .button {
    display: inline-block;
    background: var(--vsl-accent, #16a34a);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| Banner carousel ([veresel_banner] shortcode) - "peek" center mode
|--------------------------------------------------------------------------
*/

.vsl-banner-carousel {
    position: relative;
    overflow: hidden;
}

.vsl-banner-swiper {
    width: 100%;
    overflow: visible;
}

.vsl-banner-slide {
    width: var(--vsl-banner-w-mobile, 86%);
    border-radius: var(--vsl-radius, 12px);
    overflow: hidden;
    opacity: .55;
    transition: opacity .3s ease;
}

@media (min-width: 768px) {
    .vsl-banner-slide {
        width: var(--vsl-banner-w-tablet, 78%);
    }
}

@media (min-width: 1200px) {
    .vsl-banner-slide {
        width: var(--vsl-banner-w-desktop, 72%);
    }
}

.vsl-banner-slide.swiper-slide-active {
    opacity: 1;
}

.vsl-banner-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.vsl-banner-nav {
    top: 50%;
}

/*
|--------------------------------------------------------------------------
| Toggleable card features
|--------------------------------------------------------------------------
| Each of these is opt-out (shown by default), controlled from the admin
| Carousels screen or the Elementor widget.
*/

.vsl-hide-rating .vsl-toggleable-rating {
    display: none;
}

.vsl-hide-quickview .vsl-quick {
    display: none;
}

.vsl-hide-wishlist .vsl-wishlist {
    display: none;
}

.vsl-hide-compare .vsl-compare {
    display: none;
}

.vsl-hide-cart .vsl-cart {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Rounded outer edges only (first/last slide), not every card
|--------------------------------------------------------------------------
| Gives the impression of one seamless rounded strip: the very first
| product's outer (RTL-start / right) corners are rounded, and the very
| last product's outer (RTL-end / left) corners are rounded, while every
| card in between - and the shared inner edges between cards - stays
| square, matching the reference layout.
*/

.vsl-swiper .swiper-wrapper > .vsl-card:first-child {
    border-start-start-radius: var(--vsl-radius);
    border-end-start-radius: var(--vsl-radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.vsl-swiper .swiper-wrapper > .vsl-card:last-child {
    border-start-end-radius: var(--vsl-radius);
    border-end-end-radius: var(--vsl-radius);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.vsl-swiper .swiper-wrapper > .vsl-card:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/*
|--------------------------------------------------------------------------
| Post / article cards (Posts carousel type)
|--------------------------------------------------------------------------
*/

.vsl-post-card .vsl-image-wrapper {
    aspect-ratio: 16 / 10;
}

.vsl-post-card .vsl-product-image {
    object-fit: cover;
}

.vsl-post-noimage {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #eef2f5, #dfe6ea);
}

.vsl-post-meta {
    font-size: 11px;
    color: var(--vsl-muted);
    margin-bottom: 6px;
}

.vsl-post-excerpt {
    font-size: 12px;
    line-height: 1.7;
    color: var(--vsl-muted);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vsl-post-card .vsl-cart .button {
    text-decoration: none;
    line-height: 1.6;
}

/*
|--------------------------------------------------------------------------
| No-Swiper fallback
|--------------------------------------------------------------------------
| If Swiper's JS never initialized (missing/conflicting library), its own
| bundled CSS would keep the slides hidden forever. This fallback (applied
| via a JS-added class) forces a plain, horizontally-scrollable flex row so
| products remain VISIBLE and usable instead of an empty gap.
*/

.vsl-no-swiper .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    transform: none !important;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.vsl-no-swiper .swiper-slide {
    flex: 0 0 auto !important;
    width: 45% !important;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .vsl-no-swiper .swiper-slide {
        width: 22% !important;
    }
}