body {
    background-color: rgb(250 247 242);
}

/* =========================================================
   SALLA REVIEWS — REFERENCE DESIGN
   Desktop: 3 compact cards
   Tablet: 2 cards
   Mobile: 1 card
   ========================================================= */

.s-reviews-container {
    direction: rtl !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 34px 20px 30px !important;

    background: #faf7f2 !important;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.s-reviews-header-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 30px !important;
}

.s-reviews-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #292522 !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.s-reviews-header::before,
.s-reviews-header::after {
    content: "" !important;

    display: block !important;

    width: 20px !important;
    height: 1px !important;

    flex: 0 0 20px !important;

    background: #c99a4a !important;
}


/* =========================================================
   SLIDER ROOT
   ========================================================= */

#custom-testimonials-6-slider {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#custom-testimonials-6-slider .s-slider-block__title {
    display: none !important;
}

#custom-testimonials-6-slider .s-slider-container {
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;
}


/* =========================================================
   DESKTOP SLIDER WRAPPER
   ========================================================= */

@media (min-width: 1024px) {

    #custom-testimonials-6-slider .s-slider-swiper-wrapper {

        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 790px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: 16px !important;

        transform: none !important;
        transition: none !important;
    }


    /*
     * Only show the three cards visible in the design.
     * The fourth review remains available on smaller screens.
     */
    #custom-testimonials-6-slider
    .s-reviews-swiper-slide:nth-child(4) {
        display: none !important;
    }


    /*
     * IMPORTANT:
     * Override Swiper's inline width.
     */
    #custom-testimonials-6-slider
    .s-reviews-swiper-slide {

        display: block !important;

        flex: 0 0 252px !important;

        width: 252px !important;
        max-width: 252px !important;
        min-width: 252px !important;

        height: 88px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }
}


/* =========================================================
   CARD
   ========================================================= */

#custom-testimonials-6-slider
.s-reviews-testimonial {

    display: block !important;

    width: 100% !important;
    height: 88px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


#custom-testimonials-6-slider
.s-reviews-testimonial__inner {

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    width: 100% !important;
    height: 88px !important;

    min-height: 88px !important;

    margin: 0 !important;

    padding: 11px 13px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-radius: 15px !important;

    box-shadow: none !important;
}


/* =========================================================
   AVATAR — RIGHT SIDE
   ========================================================= */

#custom-testimonials-6-slider
.s-reviews-testimonial__avatar {

    order: 1 !important;

    display: block !important;

    flex: 0 0 38px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 0 0 10px !important;

    padding: 0 !important;
}


#custom-testimonials-6-slider
.s-reviews-testimonial__avatar img {

    display: block !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    background: #dedede !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

#custom-testimonials-6-slider
.s-reviews-testimonial__text {

    order: 2 !important;

    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;
}


/* Review text */

#custom-testimonials-6-slider
.s-reviews-testimonial__text > p {

    display: block !important;

    width: 100% !important;

    height: 20px !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #222222 !important;

    font-family: inherit !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    line-height: 20px !important;

    text-align: right !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   NAME / RATING
   ========================================================= */

#custom-testimonials-6-slider
.s-reviews-testimonial__name_wrapper {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 6px !important;
}


#custom-testimonials-6-slider
.s-reviews-testimonial__info {

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


#custom-testimonials-6-slider
.s-reviews-testimonial__info h2 {

    display: block !important;

    width: 100% !important;

    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #222222 !important;

    font-family: inherit !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 20px !important;

    text-align: right !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   STARS
   ========================================================= */

#custom-testimonials-6-slider
.s-reviews-testimonial__rating {

    display: block !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
}


#custom-testimonials-6-slider
.s-rating-stars-wrapper {

    display: flex !important;

    align-items: center !important;

    gap: 1px !important;

    height: 14px !important;
}


#custom-testimonials-6-slider
.s-rating-stars-btn-star {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 11px !important;
    height: 11px !important;

    margin: 0 !important;
    padding: 0 !important;
}


#custom-testimonials-6-slider
.s-rating-stars-btn-star svg {

    display: block !important;

    width: 11px !important;
    height: 11px !important;

    fill: #c99a4a !important;
}


/* =========================================================
   QUOTE ICON / CONTROLS
   ========================================================= */

#custom-testimonials-6-slider
.s-reviews-testimonial__icon {
    display: none !important;
}

#custom-testimonials-6-slider
.s-slider-nav-arrow {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .s-reviews-container {
        padding: 30px 20px !important;
    }

    #custom-testimonials-6-slider
    .s-slider-container {
        overflow: hidden !important;
    }

    #custom-testimonials-6-slider
    .s-slider-swiper-wrapper {

        display: flex !important;

        justify-content: center !important;

        gap: 14px !important;

        width: 100% !important;

        margin: 0 auto !important;

        transform: none !important;
    }

    #custom-testimonials-6-slider
    .s-reviews-swiper-slide {

        flex: 0 1 calc((100% - 14px) / 2) !important;

        width: calc((100% - 14px) / 2) !important;

        max-width: 330px !important;

        height: 88px !important;

        margin: 0 !important;
    }

    #custom-testimonials-6-slider
    .s-reviews-swiper-slide:nth-child(4) {
        display: block !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .s-reviews-container {
        padding: 25px 12px 24px !important;
    }


    /* Heading */

    .s-reviews-header-wrapper {
        margin-bottom: 22px !important;
    }

    .s-reviews-header {
        font-size: 20px !important;
        gap: 10px !important;
    }

    .s-reviews-header::before,
    .s-reviews-header::after {
        width: 16px !important;
        flex-basis: 16px !important;
    }


    /* Horizontal mobile carousel */

    #custom-testimonials-6-slider
    .s-slider-container {

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch !important;
    }

    #custom-testimonials-6-slider
    .s-slider-container::-webkit-scrollbar {
        display: none !important;
    }


    #custom-testimonials-6-slider
    .s-slider-swiper-wrapper {

        display: flex !important;

        justify-content: flex-start !important;

        width: max-content !important;

        max-width: none !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 2px !important;

        transform: none !important;
        transition: none !important;
    }


    #custom-testimonials-6-slider
    .s-reviews-swiper-slide {

        display: block !important;

        flex: 0 0 calc(100vw - 40px) !important;

        width: calc(100vw - 40px) !important;

        max-width: none !important;
        min-width: 0 !important;

        height: 88px !important;

        margin: 0 !important;
    }


    #custom-testimonials-6-slider
    .s-reviews-swiper-slide:nth-child(4) {
        display: block !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    #custom-testimonials-6-slider
    .s-reviews-swiper-slide {

        flex-basis: calc(100vw - 28px) !important;

        width: calc(100vw - 28px) !important;
    }

    #custom-testimonials-6-slider
    .s-reviews-testimonial__inner {
        padding: 10px 12px !important;
    }
}


/* =========================================================
   SALLA FEATURES — CUSTOM DESIGN
   ========================================================= */

section[data-testid="store-home-features"] {
    direction: rtl !important;

    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 auto !important;
    padding: 0 20px !important;
}


/* =========================================================
   FEATURES CONTAINER
   ========================================================= */

section[data-testid="store-home-features"] > div {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 790px !important;

    margin: 0 auto !important;
    padding: 26px 20px !important;

    box-sizing: border-box !important;

    gap: 0 !important;

    background: #ffffff !important;

    border-radius: 15px !important;

    box-shadow: none !important;
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

section[data-testid="store-home-features"]
.s-block--features__item {

    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 18px !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   VERTICAL DIVIDER
   ========================================================= */

section[data-testid="store-home-features"]
.s-block--features__item:not(:last-child)::after {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 1px !important;
    height: 78px !important;

    background: #e8d1ad !important;

    opacity: 0.9 !important;
}


/* =========================================================
   ICON
   ========================================================= */

section[data-testid="store-home-features"]
.feature-icon {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 0 4px !important;

    padding: 0 !important;

    color: #d29a3a !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* Salla icon itself */

section[data-testid="store-home-features"]
.feature-icon i {

    display: block !important;

    color: #d29a3a !important;

    font-size: 42px !important;

    line-height: 1 !important;

    font-weight: normal !important;
}


/* =========================================================
   TITLE
   ========================================================= */

section[data-testid="store-home-features"]
.s-block--features__item h2 {

    width: 100% !important;

    margin: 2px 0 4px !important;
    padding: 0 !important;

    color: #28231f !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

section[data-testid="store-home-features"]
.s-block--features__item p {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #665f58 !important;

    font-family: inherit !important;

    font-size: 10px !important;
    font-weight: 400 !important;

    line-height: 1.6 !important;

    text-align: center !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

    section[data-testid="store-home-features"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    section[data-testid="store-home-features"] > div {
        max-width: 790px !important;

        min-height: 138px !important;

        padding: 26px 18px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    section[data-testid="store-home-features"]
    .feature-icon {
        width: 58px !important;
        height: 58px !important;
    }

    section[data-testid="store-home-features"]
    .feature-icon i {
        font-size: 42px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    section[data-testid="store-home-features"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    section[data-testid="store-home-features"] > div {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        max-width: 100% !important;

        padding: 24px 12px !important;

        border-radius: 14px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    section[data-testid="store-home-features"]
    .feature-icon i {
        font-size: 36px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item h2 {
        font-size: 13px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item p {
        font-size: 9px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    section[data-testid="store-home-features"] {
        padding: 0 12px !important;
    }

    section[data-testid="store-home-features"] > div {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        max-width: 100% !important;

        padding: 20px 8px !important;

        gap: 0 !important;

        border-radius: 13px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item {

        min-height: 105px !important;

        padding: 5px 8px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item:not(:last-child)::after {

        height: 75px !important;
    }

    section[data-testid="store-home-features"]
    .feature-icon {

        width: 48px !important;
        height: 48px !important;

        margin-bottom: 3px !important;
    }

    section[data-testid="store-home-features"]
    .feature-icon i {

        font-size: 34px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item h2 {

        margin-top: 1px !important;
        margin-bottom: 3px !important;

        font-size: 12px !important;

        white-space: normal !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item p {

        font-size: 9px !important;

        line-height: 1.5 !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: unset !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    section[data-testid="store-home-features"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    section[data-testid="store-home-features"] > div {
        padding: 17px 4px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item {
        min-height: 100px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    section[data-testid="store-home-features"]
    .feature-icon {
        width: 44px !important;
        height: 44px !important;
    }   

    section[data-testid="store-home-features"]
    .feature-icon i {
        font-size: 31px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item h2 {
        font-size: 11px !important;
    }

    section[data-testid="store-home-features"]
    .s-block--features__item p {
        font-size: 8px !important;
    }
}

/* =========================================================
   SALLA PRODUCTS SLIDER  —  reference design
   Native CSS only · RTL · no stretch, no dead space

   SCOPE: #slider-with-bg-2
   To target another block, find/replace that ID with the
   slider-id of the block you want (e.g. #best-offers-2-slider).
   ========================================================= */

#slider-with-bg-2 {
    --d-bg:         #faf8f5;
    --d-card:       #ffffff;
    --d-gold:       #c99d55;
    --d-gold-hover: #b88b45;
    --d-text:       #29231e;
    --d-muted:      #bdb9b5;
    --d-price:      #3a322b;
    --d-img-bg:     #f1eeea;

    display: block !important;

    background: var(--d-bg) !important;
    padding: 34px 32px 40px !important;

    overflow: hidden !important;
}


/* =========================================================
   TITLE  —  centred, gold dash each side
   ========================================================= */

#slider-with-bg-2 .s-slider-block__title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 30px !important;
    min-height: 35px !important;
}

#slider-with-bg-2 .s-slider-block__title-right {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Prev / next arrows — not in the reference.
   Remove this rule if you need them back. */
#slider-with-bg-2 .s-slider-block__title-left {
    display: none !important;
}

#slider-with-bg-2 .s-slider-block__title-right h2 {
    position: relative !important;
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 34px !important;

    color: var(--d-text) !important;

    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#slider-with-bg-2 .s-slider-block__title-right h2::before,
#slider-with-bg-2 .s-slider-block__title-right h2::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;

    width: 20px !important;
    height: 1.5px !important;

    background: var(--d-gold) !important;

    transform: translateY(-50%) !important;
}

#slider-with-bg-2 .s-slider-block__title-right h2::before { right: 0 !important; }
#slider-with-bg-2 .s-slider-block__title-right h2::after  { left: 0 !important; }


/* =========================================================
   SLIDER SHELL
   THE GAP FIX — slides must NOT stretch to the section height.
   ========================================================= */

#slider-with-bg-2.s-slider-wrapper,
#slider-with-bg-2 .s-slider-container {
    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
}

#slider-with-bg-2 .s-slider-swiper-wrapper {
    align-items: flex-start !important;

    height: auto !important;
    min-height: 0 !important;
}

#slider-with-bg-2 .s-products-slider-card {
    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PRODUCT CARD
   custom-salla-product-card is a custom element — it needs
   an explicit display value.
   ========================================================= */

#slider-with-bg-2 .s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;

    /* NOT height:100% — that is what inflated the card */
    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;
    padding: 18px !important;

    background: var(--d-card) !important;

    border: 0 !important;
    border-radius: 14px !important;

    overflow: hidden !important;
    box-shadow: none !important;
}


/* =========================================================
   IMAGE  —  aspect-ratio so it scales with the card width
   ========================================================= */

#slider-with-bg-2 .s-product-card-image {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;

    margin: 0 0 14px !important;

    border-radius: 12px !important;
    overflow: hidden !important;

    background: var(--d-img-bg) !important;
}

#slider-with-bg-2 .s-product-card-image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

#slider-with-bg-2 .s-product-card-image-cover {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;
}

#slider-with-bg-2 .s-product-card-wishlist-btn {
    display: none !important;
}

#slider-with-bg-2 .s-product-card-promotion-title {
    top: 8px !important;
    right: 8px !important;

    padding: 3px 9px !important;

    background: var(--d-gold) !important;
    color: #fff !important;

    border-radius: 6px !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}


/* =========================================================
   CONTENT
   flex:0 0 auto — the content must not absorb free space.
   ========================================================= */

#slider-with-bg-2 .s-product-card-content {
    display: flex !important;
    flex-direction: column !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    color: var(--d-text) !important;
}


/* =========================================================
   TITLE + SUBTITLE
   ========================================================= */

#slider-with-bg-2 .s-product-card-content-main {
    display: block !important;
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}

#slider-with-bg-2 .s-product-card-content-title {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--d-text) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;

    text-align: center !important;
}

#slider-with-bg-2 .s-product-card-content-title a {
    display: block !important;
    width: 100% !important;

    color: var(--d-text) !important;
    text-decoration: none !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#slider-with-bg-2 .s-product-card-content-subtitle {
    display: block !important;
    width: 100% !important;

    margin: 4px 0 0 !important;
    padding: 0 !important;

    color: var(--d-muted) !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: center !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#slider-with-bg-2 .s-product-card-content-subtitle:empty {
    display: none !important;
}


/* =========================================================
   PRICE + RATING ROW
   These products render an EMPTY <h4 class="s-product-card-price">.
   Collapse it so it contributes zero height.
   ========================================================= */

#slider-with-bg-2 .s-product-card-content-sub {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;
}

#slider-with-bg-2 .s-product-card-price:empty {
    display: none !important;
}

/* Whole row gone when there is no price and no rating */
#slider-with-bg-2 .s-product-card-content-sub:not(:has(:not(:empty))) {
    display: none !important;
    margin: 0 !important;
}

#slider-with-bg-2 .s-product-card-price {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    width: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--d-price) !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

#slider-with-bg-2 .s-product-card-price.has-sale-price,
#slider-with-bg-2 .s-product-card-sale-price {
    color: var(--d-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* ---- Rating stars ---- */

#slider-with-bg-2 salla-rating-stars,
#slider-with-bg-2 .s-rating-stars {
    display: inline-flex !important;
    align-items: center !important;

    gap: 1px !important;
    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;

    color: var(--d-gold) !important;
}

#slider-with-bg-2 salla-rating-stars i,
#slider-with-bg-2 salla-rating-stars svg,
#slider-with-bg-2 .s-rating-stars i,
#slider-with-bg-2 .s-rating-stars svg {
    color: var(--d-gold) !important;
    fill: currentColor !important;

    font-size: 11px !important;
}

#slider-with-bg-2 .s-rating-stars-count {
    display: none !important;
}


/* =========================================================
   FOOTER
   margin-top:auto removed — that was pushing the button to
   the bottom of an inflated card.
   ========================================================= */

#slider-with-bg-2 .s-product-card-content-footer {
    display: block !important;
    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    margin-top: 0 !important;

    padding: 14px 14px 0 !important;

    gap: 0 !important;
}

#slider-with-bg-2 salla-add-product-button,
#slider-with-bg-2 salla-add-product-button > div,
#slider-with-bg-2 salla-add-product-button salla-button {
    display: block !important;
    width: 100% !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   ADD TO CART BUTTON
   Salla renders it as s-button-primary-outline — overriding
   the outline fill to a solid gold.
   ========================================================= */

#slider-with-bg-2 .s-product-card-content-footer .s-button-element,
#slider-with-bg-2 .s-product-card-content-footer .s-button-primary-outline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 32px !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px 12px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: var(--d-gold) !important;
    color: #ffffff !important;

    box-shadow: none !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    transition: background .2s ease !important;

    visibility: visible !important;
    opacity: 1 !important;
}

#slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover {
    background: var(--d-gold-hover) !important;
}

#slider-with-bg-2 .s-product-card-content-footer .s-button-text,
#slider-with-bg-2 .s-product-card-content-footer .s-button-text span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
}

#slider-with-bg-2 .s-product-card-content-footer .s-button-text {
    width: 100% !important;
    gap: 0 !important;
}

/* Shopping bag icon hidden — text only */
#slider-with-bg-2 .s-product-card-content-footer .s-button-text > i,
#slider-with-bg-2 .s-product-card-content-footer .sicon-shopping-bag {
    display: none !important;
}


/* =========================================================
   DESKTOP  —  4 per row
   ========================================================= */

@media (min-width: 1024px) {

    #slider-with-bg-2 {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    #slider-with-bg-2 .s-products-slider-card {
        width: calc(25% - 14px) !important;
        margin-left: 18px !important;
    }

    #slider-with-bg-2 .s-products-slider-card:last-child {
        margin-left: 0 !important;
    }
}


/* =========================================================
   TABLET  —  2 per row
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    #slider-with-bg-2 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #slider-with-bg-2 .s-products-slider-card {
        width: calc(50% - 9px) !important;
        margin-left: 18px !important;
    }

    #slider-with-bg-2 .s-products-slider-card:nth-child(even) {
        margin-left: 0 !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #slider-with-bg-2 {
        padding: 26px 14px 30px !important;
    }

    #slider-with-bg-2 .s-slider-block__title {
        margin-bottom: 20px !important;
    }

    #slider-with-bg-2 .s-slider-block__title-right h2 {
        font-size: 21px !important;
        padding: 0 30px !important;
    }

    #slider-with-bg-2 .s-slider-block__title-right h2::before,
    #slider-with-bg-2 .s-slider-block__title-right h2::after {
        width: 17px !important;
    }

    #slider-with-bg-2 .s-product-card-entry {
        padding: 13px !important;
    }

    #slider-with-bg-2 .s-product-card-image {
        margin-bottom: 11px !important;
    }

    #slider-with-bg-2 .s-product-card-content-title {
        font-size: 13.5px !important;
    }

    #slider-with-bg-2 .s-product-card-content-subtitle {
        font-size: 12px !important;
    }

    #slider-with-bg-2 .s-product-card-price {
        font-size: 13px !important;
    }

    #slider-with-bg-2 .s-product-card-content-footer {
        padding: 12px 8px 0 !important;
    }

    #slider-with-bg-2 .s-product-card-content-footer .s-button-element {
        min-height: 30px !important;
        padding: 6px 8px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   SALLA STORE FOOTER  —  reference design
   Native CSS only · RTL · responsive · full width
   Target: .store-footer
   ========================================================= */

.store-footer {
    --f-bg:       #281b13;
    --f-gold:     #c99d55;
    --f-text:     #e6ddd2;
    --f-muted:    #a2917f;
    --f-hairline: rgba(201, 157, 85, .18);

    display: block !important;

    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--f-bg) !important;
    color: var(--f-text) !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;
}

.store-footer * {
    box-sizing: border-box !important;
}


/* =========================================================
   BACKGROUND OVERRIDE
   The theme paints .store-footer__inner via
   `.footer-is-light .store-footer .store-footer__inner`
   (three classes). These selectors match that depth so the
   brown wins on source order.
   ========================================================= */

.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner,
.footer-is-light .store-footer .store-footer__inner > .container,
.footer-is-light .store-footer > .container,
.footer-is-light .store-footer > div:last-child {
    background-color: #281b13 !important;
    background-image: none !important;
}

.footer-is-light .store-footer .store-footer__inner {
    border-bottom-color: rgba(201, 157, 85, .18) !important;
}


/* =========================================================
   INNER GRID
   DOM is a 6-col Tailwind grid: brand(2) · menu(1) ·
   contacts(1) · apps(2). The apps node renders empty, so
   it is removed and the col-span classes are neutralised —
   otherwise the brand eats two tracks and contacts wraps
   onto a second row.
   ========================================================= */

.store-footer .store-footer__inner {
    padding: 44px 0 34px !important;
}

.store-footer .store-footer__inner > .container {
    display: grid !important;

    grid-template-columns: 1.7fr 1fr 1fr !important;
    gap: 40px !important;

    align-items: start !important;

    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* Kill lg:col-span-2 on the brand and apps columns */
.store-footer .store-footer__inner > .container > * {
    grid-column: auto !important;
}

/* Tailwind spacers on the brand / apps columns */
.store-footer .store-footer__inner > .container > div,
.store-footer salla-apps-icons {
    padding-left: 0 !important;
    padding-right: 0 !important;

    margin: 0 !important;
}

/* Empty app-icons column would eat a grid track */
.store-footer salla-apps-icons:empty {
    display: none !important;
}


/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.store-footer .store-footer__inner h3,
.store-footer .s-contacts-title {
    display: block !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    color: var(--f-gold) !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    text-align: start !important;
}


/* =========================================================
   BRAND COLUMN
   ========================================================= */

.store-footer .store-footer__inner > .container > div:first-child {
    text-align: start !important;
}

/* Logo block flows normally — static, full width */
.store-footer .store-footer__inner > .container > div:first-child > a {
    position: static !important;

    display: block !important;
    width: 100% !important;

    margin: 0 0 24px !important;

    text-decoration: none !important;
}

/* Text logo — swap for a real logo in Salla settings if you have one */
.store-footer .store-footer__inner > .container > div:first-child > a h3 {
    margin: 0 !important;

    color: var(--f-gold) !important;

    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: .16em !important;
}

/* Logo image, if one is set */
.store-footer .store-footer__inner > .container > div:first-child > a img {
    max-height: 62px !important;
    width: auto !important;

    object-fit: contain !important;
}

/* ---------------------------------------------------------
   OPTIONAL TAGLINE
   No DOM node exists for this line, so it is injected.
   Static flow — an absolute one stacks on top of the logo.
   Delete this block if the store adds real footer copy.
   --------------------------------------------------------- */
.store-footer .store-footer__inner > .container > div:first-child > a::after {

    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 280px !important;

    margin: 14px 0 0 !important;

    color: var(--f-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.9 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.store-footer salla-social {
    display: block !important;
    margin: 0 0 22px !important;
}

.store-footer .s-social-list {
    display: flex !important;
    align-items: center !important;

    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.store-footer .s-social-list:empty {
    display: none !important;
}

.store-footer .s-social-list li a,
.store-footer .s-social-list-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    color: var(--f-gold) !important;

    border-radius: 50% !important;

    font-size: 17px !important;

    transition: color .2s ease, background .2s ease !important;
}

.store-footer .s-social-list li a:hover {
    color: var(--f-bg) !important;
    background: var(--f-gold) !important;
}

.store-footer .s-social-list svg {
    width: 18px !important;
    height: 18px !important;

    fill: currentColor !important;
}


/* =========================================================
   TRUST BADGES  (commercial register — keep for compliance)
   ========================================================= */

.store-footer salla-trust-badges {
    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--f-hairline) !important;
    border-radius: 10px !important;
}

.store-footer .s-trust-badges-image {
    width: 40px !important;
    height: 40px !important;

    flex: 0 0 auto !important;
    object-fit: contain !important;
}

.store-footer .s-trust-badges-label {
    margin: 0 !important;

    color: var(--f-muted) !important;

    font-size: 11px !important;
    line-height: 1.5 !important;
}

.store-footer .s-trust-badges-number {
    display: block !important;

    color: var(--f-text) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}


/* =========================================================
   MENU LINKS
   ========================================================= */

.store-footer .s-menu-footer-list {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.store-footer .s-menu-footer-item {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--f-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: start !important;
    text-decoration: none !important;

    transition: color .2s ease !important;
}

.store-footer .s-menu-footer-item:hover {
    color: var(--f-gold) !important;
}


/* =========================================================
   CONTACTS
   Icon sits at the start of the line (right, in RTL)
   ========================================================= */

.store-footer .s-contacts-list,
.store-footer .s-contacts-list-vertical {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.store-footer #contact-slot {
    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;

    width: 100% !important;
}

.store-footer .s-contacts-item {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--f-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-decoration: none !important;

    transition: color .2s ease !important;
}

.store-footer .s-contacts-item:hover {
    color: var(--f-gold) !important;
}

.store-footer .s-contacts-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 20px !important;
    height: 20px !important;

    color: var(--f-gold) !important;
}

.store-footer .s-contacts-icon svg {
    width: 17px !important;
    height: 17px !important;

    fill: currentColor !important;
}

/* Phone numbers must stay LTR */
.store-footer .s-contacts-item .unicode {
    direction: ltr !important;
    unicode-bidi: embed !important;
}


/* =========================================================
   COPYRIGHT + PAYMENTS BAR
   ========================================================= */

.store-footer > .container,
.store-footer > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    margin: 0 auto !important;
    padding: 16px 48px !important;

    border-top: 1px solid var(--f-hairline) !important;
}

.store-footer .copyright-text,
.store-footer .copyright-text p {
    margin: 0 !important;

    color: var(--f-muted) !important;

    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

.store-footer .copyright-text a {
    color: var(--f-gold) !important;
    text-decoration: none !important;
}

.store-footer .s-payments-list {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.store-footer .s-payments-list-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 27px !important;

    margin: 0 !important;
    padding: 3px !important;

    background: rgba(255, 255, 255, .92) !important;
    border-radius: 5px !important;

    overflow: hidden !important;
}

.store-footer .s-payments-list-item img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}


/* =========================================================
   TABLET  —  brand full width, two columns beneath
   ========================================================= */

@media (max-width: 1023px) {

    .store-footer .store-footer__inner {
        padding: 36px 0 28px !important;
    }

    .store-footer .store-footer__inner > .container {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;

        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    /* Higher specificity than the > * reset above, so this wins */
    .store-footer .store-footer__inner > .container > div:first-child {
        grid-column: 1 / -1 !important;
    }

    .store-footer > .container,
    .store-footer > div:last-child {
        padding: 16px 28px !important;
    }
}


/* =========================================================
   MOBILE  —  single column
   ========================================================= */

@media (max-width: 767px) {

    .store-footer .store-footer__inner {
        padding: 30px 0 24px !important;
    }

    .store-footer .store-footer__inner > .container {
        grid-template-columns: 1fr !important;
        gap: 26px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .store-footer .store-footer__inner h3,
    .store-footer .s-contacts-title {
        margin-bottom: 13px !important;
        font-size: 14.5px !important;
    }

    .store-footer .store-footer__inner > .container > div:first-child > a h3 {
        font-size: 26px !important;
    }

    .store-footer .store-footer__inner > .container > div:first-child > a {
        margin-bottom: 20px !important;
    }

    .store-footer .store-footer__inner > .container > div:first-child > a::after {
        margin-top: 12px !important;
        font-size: 13.5px !important;
    }

    /* Mobile social block lives in the contacts column */
    .store-footer .contact-social {
        margin-top: 18px !important;
    }

    .store-footer salla-trust-badges {
        width: 100% !important;
        max-width: 260px !important;
    }

    /* Copyright bar stacks */
    .store-footer > .container,
    .store-footer > div:last-child {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 14px !important;
        padding: 18px 20px !important;

        text-align: center !important;
    }

    .store-footer .s-payments-list {
        justify-content: center !important;
    }
}