/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: PURE WHITE STICKY HEADER CSS                               ++ */
/* ++ Description: Forces pure white background and darkens icons       ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 1. The main sticky container styling */
.custom-fast-white-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    /* Forces pure white */
    z-index: 9999 !important;
    /* Keeps it above all other content */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    /* Gentle shadow to separate it from page */
    animation: fastSlideDownHeader 0.3s ease-out forwards !important;
}

/* 2. Darken the icons and text so they are visible on the white background */
.custom-fast-white-sticky i[class^="sicon-"],
.custom-fast-white-sticky .header-btn__icon,
.custom-fast-white-sticky .menu-label,
.custom-fast-white-sticky .total-price,
.custom-fast-white-sticky .s-cart-summary-total,
.custom-fast-white-sticky .s-cart-summary-icon {
    color: #050b14 !important;
    /* Very dark navy/black */
    transition: color 0.3s ease !important;
}

/* 3. The smooth drop-down animation */
@keyframes fastSlideDownHeader {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: PURE WHITE STICKY HEADER CSS                                 ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Best Sellers                                  ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Hide decorative clutter on ALL screen sizes */
.s-block--product-tabs .enhanced-title-border,
.s-block--product-tabs .product-tabs-container {
    display: none !important;
}

/* Remove the nav arrows + border line from .s-slider-block__title,
   but keep the container visible so the display-all button inside it shows */
.s-block--product-tabs .s-slider-block__title-left,
.s-block--product-tabs .s-slider-block__title-nav,
.s-block--product-tabs .s-slider-nav-arrow {
    display: none !important;
}

.s-block--product-tabs .s-slider-block__title {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── Desktop: "عرض الكل" button styling (≥1024px) ─────────────────── */
@media (min-width: 1024px) {
    .s-block--product-tabs .s-slider-block__title {
        display: flex !important;
        justify-content: center !important;
        margin-top: 12px !important;
        margin-bottom: 40px !important;
    }

    .s-block--product-tabs .s-slider-block__display-all {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--store-text-primary, #111827) !important;
        color: var(--bg-primary, #ffffff) !important;
        padding: 12px 48px !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        border: none !important;
        transition: background-color 0.3s ease, transform 0.2s ease !important;
    }

    .s-block--product-tabs .s-slider-block__display-all:hover {
        background-color: var(--color-primary, #333333) !important;
        transform: translateY(-2px) !important;
    }
}

/*
 * All remaining rules scoped to max-width: 1023px.
 * On desktop (1024px+) the section renders as native Salla — zero overrides.
 */
@media (max-width: 1023px) {

    .s-block--product-tabs hr {
        display: none !important;
    }

    .s-block--product-tabs .home-block-title {
        text-align: right !important;
    }

    .s-block--product-tabs .home-block-title p {
        text-align: right !important;
    }

    .s-block--product-tabs .home-block-title h2 {
        display: inline-block;
        position: relative;
        padding-bottom: 12px;
        margin-bottom: 5px;
        font-size: 1.4rem !important;
    }

    .s-block--product-tabs .home-block-title h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px;
        height: 1px;
        background-color: var(--store-text-primary, #111827);
    }

    .custom-best-sellers-footer,
    .s-block--product-tabs .product-tab-content > .container > .flex.justify-center {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 40px !important;
        margin-bottom: 20px !important;
    }

    .s-block--product-tabs .s-slider-block__display-all,
    .s-block--product-tabs .product-tab-content > .container > .flex.justify-center > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--store-text-primary, #111827) !important;
        color: var(--bg-primary, #ffffff) !important;
        padding: 10px 40px !important;
        font-size: 0.85rem !important;
        font-weight: bold !important;
        text-decoration: none !important;
        text-align: center !important;
        border-radius: 0px !important;
        border: none !important;
        transition: background-color 0.3s ease, transform 0.2s ease !important;
    }

    .s-block--product-tabs .s-slider-block__display-all:hover,
    .s-block--product-tabs .product-tab-content > .container > .flex.justify-center > a:hover {
        background-color: var(--color-primary, #333333) !important;
        transform: translateY(-2px) !important;
    }

    .s-block--product-tabs .product-tab-content > .container > .flex.justify-center > a span {
        color: var(--bg-primary, #ffffff) !important;
    }

    .s-block--product-tabs .product-tab-content > .container > .flex.justify-center > a i,
    .s-block--product-tabs .product-tab-content > .container > .flex.justify-center > a span.absolute {
        display: none !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__content {
        margin-top: 20px !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__content,
    .s-block--product-tabs custom-salla-product-card .product-card__content-wrapper,
    .s-block--product-tabs custom-salla-product-card .product-card__title {
        text-align: right !important;
        align-items: flex-start !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__price {
        justify-content: flex-start !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__image {
        position: relative !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__addToCart {
        position: absolute !important;
        bottom: 12px !important;
        left: 12px !important;
        right: auto !important;
        top: auto !important;
        width: 48px !important;
        height: 48px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 20 !important;
    }

    .s-block--product-tabs custom-salla-product-card salla-add-product-button,
    .s-block--product-tabs custom-salla-product-card salla-button,
    .s-block--product-tabs custom-salla-product-card .s-button-wrap {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__addToCart__btn button {
        position: relative !important;
        background-color: #ffffff !important;
        color: transparent !important;
        border: none !important;
        border-radius: 4px !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        transition: all 0.3s ease !important;
        overflow: hidden !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__addToCart__btn button:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
        transform: translateY(-2px) !important;
    }

    .s-block--product-tabs custom-salla-product-card .product-card__addToCart__btn button i {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 1.4rem !important;
        color: #111827 !important;
        margin: 0 !important;
    }

} /* end @media (max-width: 1023px) */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Best Sellers                                    ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Testimonials (Brew Style)                     ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 4. SUBTLE GREY BACKGROUND FOR THE ENTIRE SECTION */
.s-block--testimonials {
    background-color: #f6f6f6 !important;
    /* Perfect Brew subtle grey back-canvas */
    background-image: none !important;
    /* Strips the intrusive Salla grid pattern */
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* ==========================================================
   3. RESTYLE THE SECTION TITLE (BREW STYLE, RTL) 
   ========================================================== */
.s-block--testimonials .home-block-title {
    display: block !important;
    text-align: right !important;
    /* Perfect RTL alignment */
    padding: 0 15px;
    margin-bottom: 30px !important;
}

/* Eradicate the chaotic Salla thin lines and center circle */
.s-block--testimonials .enhanced-title-border,
.s-block--testimonials .home-block-line,
.s-block--testimonials .home-block-title::before,
.s-block--testimonials .home-block-title::after {
    display: none !important;
}

/* Style the precise Heading Text */
.s-block--testimonials .home-block-title h2 {
    display: inline-block !important;
    position: relative !important;
    padding-bottom: 20px !important;
    /* Pushes the fine line beneath the text */
    margin-bottom: 20px !important;
    /* Forces the sub-heading <p> further down beneath the fine line */
    font-size: 1.6rem !important;
    color: var(--store-text-primary, #111827) !important;
    font-weight: bold !important;
}

/* The exact fine black line BETWEEN the heading and the sub-heading */
.s-block--testimonials .home-block-title h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    /* RTL anchors line to the right */
    width: 60px !important;
    /* Clean Brew-style short fine line */
    height: 1px !important;
    background-color: var(--store-text-primary, #111827) !important;
    display: block !important;
}

/* Sub-heading styling (if you add a sub-title text in Salla, it gracefully drops beneath the fine line) */
.s-block--testimonials .home-block-title p {
    color: #6b7280 !important;
    font-size: 1rem !important;
    margin-top: 0 !important;
}

/* PURE WHITE BREW CARDS */
.s-block--testimonials .review>div {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    /* Sharp Brew corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    /* Minimal transparent shadow float */
    padding: 30px !important;
    /* Generous breathable inner margins */

    /* WE MUST REDEFINE FLEXBOX TO REORDER THE HTML DOM EXPERTLY */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* HIDE THE GIANT BACKGROUND QUOTE ICON */
.s-block--testimonials .sicon-quote {
    display: none !important;
}

/* ==========================================================
   2. REORDER: STARS -> REVIEWER NAME -> GAP -> REVIEW
   ========================================================== */

/* The outer profile container (holds Avatar + Name + Stars block) */
.s-block--testimonials .review>div>.flex.items-center {
    order: 1 !important;
    /* FORCE THIS TO THE ABSOLUTE TOP OF THE CARD */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* RTL correctly pushes everything cleanly to the Right edge */
    margin: 0 0 20px 0 !important;
    /* BREATHING DISTANCE between the Profile Block and the text below! */
}

/* Hide the user Avatar entirely */
.s-block--testimonials .review>div>.flex.items-center img {
    display: none !important;
}

/* Remove side padding from Salla's container and flex vertically */
.s-block--testimonials .review>div>.flex.items-center>div.mx-2 {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Stacking Order 1: Stars */
.s-block--testimonials .review .comment__rating {
    order: 1 !important;
    margin-bottom: 15px !important;
    /* Gap beneath stars */
    justify-content: flex-start !important;
}

/* 1. STARS TO BE BLACK (not yellow) */
.s-block--testimonials .comment__rating i {
    color: #111827 !important;
    /* True black solid stars! */
    font-size: 1.1rem !important;
    /* Make stars impactful */
}

/* Stacking Order 2: Reviewer Name */
.s-block--testimonials .review .flex.items-center p {
    order: 2 !important;
    font-weight: bold !important;
    font-size: 1.15rem !important;
    color: #111827 !important;
    /* Pitch black strong name */
    margin: 0 !important;
    margin-bottom: 5px !important;
}

/* THE ACTUAL REVIEW TEXT (Pushed beneath the profile block) */
.s-block--testimonials .review>div>#item-text {
    order: 2 !important;
    /* Forces review text below the stars and name */
}

/* Clean, modern styling for the review body text */
.s-block--testimonials .review>div>#item-text p {
    color: #6b7280 !important;
    /* Professional subdued grey text like Brew */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    /* Highly readable spacing */
    margin: 0 !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Testimonials                                    ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Bracelet Preview Slider                                    ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#bracelet-preview-slider {
  display: none;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.dark #bracelet-preview-slider {
  border-color: rgba(255, 255, 255, 0.08);
}

#bracelet-preview-slider.bps--visible {
  display: block;
  animation: bpsSlideIn 0.35s ease forwards;
}

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

/* Label */
#bracelet-preview-slider .bps__label {
  font-family: var(--font-main, inherit);
  font-size: 0.8rem;
  color: var(--store-text-secondary);
  text-align: center;
  padding: 10px 16px 6px;
  letter-spacing: 0.04em;
}

/* --- Compositing Stage --- */
#bracelet-preview-slider .bps__stage-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

#bracelet-preview-slider .bps__stage {
  position: absolute;
  inset: 0;
}

/* Both image layers share the same absolute footprint */
#bracelet-preview-slider .bps__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 1:1 canvas → both layers render at identical scale */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#bracelet-preview-slider .bps__layer--case  { z-index: 1; }
#bracelet-preview-slider .bps__layer--strap { z-index: 2; }

/* Hidden during lifestyle tab */
#bracelet-preview-slider .bps__layer--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Strap expands to cover in lifestyle tab */
#bracelet-preview-slider .bps__layer--solo {
  object-fit: cover;
  z-index: 3;
}

/* --- Tab Bar --- */
#bracelet-preview-slider .bps__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 10px;
}

#bracelet-preview-slider .bps__tab {
  font-family: var(--font-main, inherit);
  font-size: 0.75rem;
  color: var(--store-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 4px 14px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#bracelet-preview-slider .bps__tab--active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.dark #bracelet-preview-slider .bps__tab--active {
  border-color: var(--color-primary-reverse);
  color: var(--store-text-primary);
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Bracelet Preview Slider                                      ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Hide Product Tags                                          ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Hide the product tags block (div.mb-3 containing /tag- links) */
div.mb-3:has(a[href*="/tag-"]) {
    display: none !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Hide Product Tags                                            ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Combined Payment Widget                                    ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ── Hide native Salla installment blocks ──────────────────────────────
   salla-installment only exists on product pages — safe to hide globally.
───────────────────────────────────────────────────────────────────────── */
salla-installment {
    display: none !important;
}

/* ── Ghost card ─────────────────────────────────────────────────────────
   Faint grey background + visible border, fully centered, two-line layout.
───────────────────────────────────────────────────────────────────────── */
#tawqit-payment-widget {
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid rgba(100, 100, 100, 0.45);
    border-radius: 6px;
    padding: 14px 20px;
    margin-bottom: 16px;
    text-align: center;
    direction: rtl;
    font-family: var(--font-main, inherit);
}

/* ── Line 1: price text  /  Line 2: logos ───────────────────────────── */
#tawqit-payment-widget .tpw__line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    color: var(--store-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.6;
}

#tawqit-payment-widget .tpw__line--price {
    margin-bottom: 6px;
}

#tawqit-payment-widget .tpw__amount {
    font-weight: 700;
}

/* ── Logo images ────────────────────────────────────────────────────────
   mix-blend-mode: multiply removes the white JPEG background on light pages.
   Dark mode: invert to keep logos visible on dark backgrounds.
───────────────────────────────────────────────────────────────────────── */
#tawqit-payment-widget .tpw__logo {
    height: 20px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    mix-blend-mode: multiply;
}

.dark #tawqit-payment-widget .tpw__logo {
    filter: invert(1);
    mix-blend-mode: normal;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Combined Payment Widget                                      ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Product Page Luxury Refinement                             ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ═══════════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY HIERARCHY
   ═══════════════════════════════════════════════════════════════════════ */

/* Product title — give it authority and breathing room */
.product-single__info h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
}

/* Rating stars — separated clearly from the title */
.product-single__info salla-rating-stars {
    display: block !important;
    margin-bottom: 1.5rem !important;
}

/* Main price — more prominent */
.product-single__info .starting-or-normal-price .total-price {
    font-size: 1.6rem !important;
}

/* Top price block — stand alone with space below */
.product-single__info .product-price-top {
    margin-bottom: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. WHITE SPACE — generous vertical rhythm throughout
   ═══════════════════════════════════════════════════════════════════════ */

/* Availability badge row */
.product-single__info .inventory-content {
    margin-bottom: 1rem !important;
}

/* Payment widget (tabby/tamara) — breathe on both sides */
#tawqit-payment-widget {
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Size guide info section — generous bottom gap before buy buttons */
.product-single__info section.bg-storeBG:not(.sticky-product-bar) {
    margin-bottom: 2rem !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.dark .product-single__info section.bg-storeBG:not(.sticky-product-bar) {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Product info tabs (details / reviews) — substantial space above and below */
.product-more-info {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

/* Hide the duplicate "السعر" price row (price is already shown above the buy buttons) */
.product-price.product-price-bottom {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. HIDE MODEL NUMBER ROW
   ═══════════════════════════════════════════════════════════════════════ */

/* The model number row uses border-b-[1px] Tailwind class */
.product-single__info section.bg-storeBG .border-b-\[1px\] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. SIZE GUIDE ROW — interactive feel
   ═══════════════════════════════════════════════════════════════════════ */

.product-single__info section.bg-storeBG .center-between {
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.product-single__info section.bg-storeBG .center-between:hover {
    opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. ADD-ONS SECTION (Gomla) — woven in naturally
   ═══════════════════════════════════════════════════════════════════════ */

/* Add top divider and breathing space above the add-ons block */
#gomla__container {
    margin-top: 2.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.dark #gomla__container {
    border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* Gomla section title — match page hierarchy */
#gomla__container h2,
#gomla__container h3,
#gomla__container .gomla__title {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    text-align: right !important;
    margin-bottom: 1.25rem !important;
    color: var(--store-text-primary) !important;
}

/* Add-on cards — subtle lift on hover */
.gomla__product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.gomla__product-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Product Page Luxury Refinement                               ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Size Guide Accordion & Feature Cards                       ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ═══════════════════════════════════════════════════════════════════════
   1. HIDE ORIGINAL SIZE GUIDE SECTION
      (now lives in the accordion below — no longer needed inline)
   ═══════════════════════════════════════════════════════════════════════ */

.product-single__info section.bg-storeBG:not(.sticky-product-bar) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. FEATURE CARDS — icon on top, bold title, subtitle text
   ═══════════════════════════════════════════════════════════════════════ */

/* Switch to vertical layout */
.product-features-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem 0.5rem !important;
    gap: 0.4rem !important;
}

/* Bigger icon */
.product-features-item .feature-icon i {
    font-size: 2rem !important;
}

/* Bold, slightly larger title */
.product-features-item .feature-text h3 {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--store-text-primary) !important;
}

/* Subtitle text — secondary, smaller, readable */
.product-features-item .feature-subtitle {
    font-size: 0.68rem !important;
    color: var(--store-text-secondary) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Size Guide Accordion & Feature Cards                         ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Product Page Accordion Style & Layout                      ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ═══════════════════════════════════════════════════════════════════════
   1. ACCORDION — clean minimal style matching reference image
   ═══════════════════════════════════════════════════════════════════════ */

/* Strip any background from the section and its containers */
.product-more-info,
.product-more-info__inner,
.product-more-info .more-info-tabs__content,
.product-more-info .more-tab-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mobile accordion header — transparent background, thin separator line */
.product-more-info .more-info-tabs__nav-link.mobile {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--store-text-primary) !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    padding: 1.1rem 0 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.dark .product-more-info .more-info-tabs__nav-link.mobile {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hide the theme's existing icon (whatever form it takes) */
.product-more-info .more-info-tabs__nav-link.mobile > i,
.product-more-info .more-info-tabs__nav-link.mobile::before {
    display: none !important;
    content: none !important;
}

/* Down-pointing chevron via ::after — CSS border trick, no font dependency */
.product-more-info .more-info-tabs__nav-link.mobile::after {
    content: '' !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 1.5px solid var(--store-text-primary) !important;
    border-bottom: 1.5px solid var(--store-text-primary) !important;
    transform: rotate(45deg) !important;   /* ˅ points down */
    transition: transform 0.25s ease !important;
    margin-top: -3px !important;           /* visual centering offset */
}

/* When accordion is open — chevron flips up */
.product-more-info .more-info-tabs__nav-link.mobile.active::after {
    transform: rotate(-135deg) !important; /* ˄ points up */
    margin-top: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. FEATURE CARD — breathing room between title and subtitle
   ═══════════════════════════════════════════════════════════════════════ */

.product-features-item .feature-text h3 {
    margin-bottom: 0.35rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. PAYMENT WIDGET — slightly larger text
   ═══════════════════════════════════════════════════════════════════════ */

#tawqit-payment-widget .tpw__line {
    font-size: 0.88rem !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Product Page Accordion Style & Layout                        ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Watch Spotlight                                            ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ── Reset: scope everything to .tawqit-watch-spotlight ───────────── */
.tawqit-watch-spotlight,
.tawqit-watch-spotlight * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Section shell ───────────────────────────────────────────────── */
.tawqit-watch-spotlight {
    background-color: transparent;
    width: 100%;
    padding: 52px 0 44px;
    overflow: hidden;
    direction: rtl;
    font-family: inherit;
    position: relative;
}

/* ── Background layers — hidden (transparent section needs no bg) ── */
.tawqit-watch-spotlight .tws__bg-layers {
    display: none;
}

.tawqit-watch-spotlight .tws__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
}

.tawqit-watch-spotlight .tws__bg--active {
    opacity: 1;
}

/* Watch 0 background image */
.tawqit-watch-spotlight .tws__bg[data-bg="0"] {
    background-image: url('https://cdn.salla.sa/BraEDz/198b2f96-ec2f-40aa-be11-2656ddebc380-500x279.06976744186-WhwRQCFIMJtwBQCXDovi5jzefvmK6qNeqrPBbEnL.jpg');
    background-size: cover;
    background-position: center;
}

/* Watch 1: no background yet */
.tawqit-watch-spotlight .tws__bg[data-bg="1"] {
    background: none;
}

/* Shared fruit base */
.tawqit-watch-spotlight .tws__fruit {
    position: absolute;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Watch 0 fruits (lemons) — right side (RTL: watch 0 is on the right) */
.tawqit-watch-spotlight .tws__bg[data-bg="0"] .tws__fruit--a {
    width: 180px;
    top: 4%;
    right: 2%;
    transform: rotate(22deg);
    opacity: 0.85;
}
.tawqit-watch-spotlight .tws__bg[data-bg="0"] .tws__fruit--b {
    width: 130px;
    bottom: 12%;
    right: 8%;
    transform: rotate(-18deg);
    opacity: 0.75;
}
.tawqit-watch-spotlight .tws__bg[data-bg="0"] .tws__fruit--c {
    width: 90px;
    top: 28%;
    left: 8%;
    transform: rotate(40deg);
    opacity: 0.35;
}
.tawqit-watch-spotlight .tws__bg[data-bg="0"] .tws__fruit--d {
    width: 110px;
    bottom: 4%;
    left: 20%;
    transform: rotate(-30deg);
    opacity: 0.45;
}

/* Watch 1 fruits (strawberries) — left side (RTL: watch 1 is on the left) */
.tawqit-watch-spotlight .tws__bg[data-bg="1"] .tws__fruit--a {
    width: 170px;
    top: 6%;
    left: 2%;
    transform: rotate(-22deg);
    opacity: 0.85;
}
.tawqit-watch-spotlight .tws__bg[data-bg="1"] .tws__fruit--b {
    width: 120px;
    bottom: 14%;
    left: 7%;
    transform: rotate(18deg);
    opacity: 0.75;
}
.tawqit-watch-spotlight .tws__bg[data-bg="1"] .tws__fruit--c {
    width: 85px;
    top: 30%;
    right: 10%;
    transform: rotate(-40deg);
    opacity: 0.35;
}
.tawqit-watch-spotlight .tws__bg[data-bg="1"] .tws__fruit--d {
    width: 105px;
    bottom: 5%;
    right: 22%;
    transform: rotate(30deg);
    opacity: 0.45;
}

/* ── Content above background layers ────────────────────────────── */
.tawqit-watch-spotlight .tws__header,
.tawqit-watch-spotlight .tws__track,
.tawqit-watch-spotlight .tws__info,
.tawqit-watch-spotlight .tws__nav-arrows {
    position: relative;
    z-index: 1;
}

/* ── Section header ──────────────────────────────────────────────── */
.tawqit-watch-spotlight .tws__header {
    text-align: center;
    margin-bottom: 36px;
    padding: 0 24px;
}

.tawqit-watch-spotlight .tws__header-label {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 400;
}

.tawqit-watch-spotlight .tws__header-title {
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 14px;
}

/* Short decorative line under the title */
.tawqit-watch-spotlight .tws__header-line {
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, 0.40);
    margin: 0 auto;
}

/* ── Watch track ─────────────────────────────────────────────────── */
.tawqit-watch-spotlight .tws__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 4px 24px;
    touch-action: pan-y; /* allow vertical scroll; let JS own horizontal swipe */
}

/* ── Watch item (anchor) ─────────────────────────────────────────── */
.tawqit-watch-spotlight .tws__item {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
    display: block;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-drag: none;
    user-select: none;

    /* Inactive (receded) state */
    transform: scale(0.85);
    opacity: 0.55;
    transition:
        transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity   0.45s ease;
    transform-origin: center center;
    position: relative;
    z-index: 1;
}

.tawqit-watch-spotlight .tws__item--active {
    transform: scale(1.85);
    opacity: 1;
    z-index: 2;
    pointer-events: none; /* active watch blocks inactive item's click area — pass through */
}

/* Active: shift toward section center.
   Formula: T = ±(0.5 / S) where S = active scale, items split 50/50.
   At scale 1.85 → T = 0.5 / 1.85 ≈ 27% of own width. */
.tawqit-watch-spotlight .tws__track .tws__item:nth-child(1).tws__item--active {
    /* item 1 is on the RIGHT in RTL — shift left toward center */
    transform: scale(1.85) translateX(-27%);
}
.tawqit-watch-spotlight .tws__track .tws__item:nth-child(2).tws__item--active {
    /* item 2 is on the LEFT in RTL — shift right toward center */
    transform: scale(1.85) translateX(27%);
}

/* ── Watch card ──────────────────────────────────────────────────── */
.tawqit-watch-spotlight .tws__card {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tawqit-watch-spotlight .tws__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Info area ───────────────────────────────────────────────────── */
.tawqit-watch-spotlight .tws__info {
    position: relative;
    min-height: 140px;
    padding: 32px 24px 0;
    text-align: center;
}

/* Both panels stacked; only the active one is visible */
.tawqit-watch-spotlight .tws__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0 0;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.tawqit-watch-spotlight .tws__panel--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tawqit-watch-spotlight .tws__name {
    color: var(--store-text-primary, #111827);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
    direction: rtl;
}

.tawqit-watch-spotlight .tws__name-sub {
    color: var(--store-text-secondary, #6b7280);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.6;
    direction: rtl;
    margin: 0;
}

.tawqit-watch-spotlight .tws__cta {
    display: inline-block;
    margin-top: 22px;
    color: var(--store-text-primary, #111827);
    border: 1px solid var(--store-text-primary, #111827);
    padding: 10px 36px;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
}

.tawqit-watch-spotlight .tws__cta:hover {
    background: var(--store-text-primary, #111827);
    color: var(--bg-primary, #ffffff);
}

/* ── Navigation arrows ───────────────────────────────────────────── */
.tawqit-watch-spotlight .tws__nav-arrows {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px 0 0;
}

.tawqit-watch-spotlight .tws__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--store-text-primary, #111827);
    color: var(--store-text-primary, #111827);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.25s ease, color 0.25s ease;
}

.tawqit-watch-spotlight .tws__arrow:hover {
    background: var(--store-text-primary, #111827);
    color: var(--bg-primary, #ffffff);
}

/* ── Mobile only: larger active watch ───────────────────────────── */
@media (max-width: 767px) {
    .tawqit-watch-spotlight .tws__item--active {
        transform: scale(2.2);
    }
    /* At scale 2.2 → T = 0.5 / 2.2 ≈ 23% */
    .tawqit-watch-spotlight .tws__track .tws__item:nth-child(1).tws__item--active {
        transform: scale(2.2) translateX(-23%);
    }
    .tawqit-watch-spotlight .tws__track .tws__item:nth-child(2).tws__item--active {
        transform: scale(2.2) translateX(23%);
    }

    /* Extra bottom padding on mobile so the scaled watch doesn't crowd the text */
    .tawqit-watch-spotlight .tws__track {
        padding-bottom: 64px;
    }

    /* Slightly taller info area on mobile */
    .tawqit-watch-spotlight .tws__info {
        min-height: 160px;
    }
}

/* ── Tablet & desktop ────────────────────────────────────────────── */
@media (min-width: 768px) {
    .tawqit-watch-spotlight {
        padding: 72px 0 60px;
    }

    .tawqit-watch-spotlight .tws__track {
        gap: 24px;
        padding: 20px 10% 32px;
    }

    .tawqit-watch-spotlight .tws__header-title {
        font-size: 1.8rem;
    }

    .tawqit-watch-spotlight .tws__name {
        font-size: 1.3rem;
    }

    /* Shrink active watch on desktop — S=1.35 → T=0.5/1.35≈37% */
    .tawqit-watch-spotlight .tws__item--active {
        transform: scale(1.35);
    }
    .tawqit-watch-spotlight .tws__track .tws__item:nth-child(1).tws__item--active {
        transform: scale(1.35) translateX(-37%);
    }
    .tawqit-watch-spotlight .tws__track .tws__item:nth-child(2).tws__item--active {
        transform: scale(1.35) translateX(37%);
    }

    /* Breathing room: push info block below the scaled image overflow */
    .tawqit-watch-spotlight .tws__info {
        min-height: 150px;
        margin-top: 48px;
    }
}

@media (min-width: 1024px) {
    .tawqit-watch-spotlight .tws__track {
        padding: 20px 18% 32px;
        gap: 32px;
    }

    /* Slightly less receded on large screens */
    .tawqit-watch-spotlight .tws__item {
        transform: scale(0.82);
    }

    /* Further reduce active watch on large desktop — S=1.2 → T=0.5/1.2≈42% */
    .tawqit-watch-spotlight .tws__item--active {
        transform: scale(1.2);
    }
    .tawqit-watch-spotlight .tws__track .tws__item:nth-child(1).tws__item--active {
        transform: scale(1.2) translateX(-42%);
    }
    .tawqit-watch-spotlight .tws__track .tws__item:nth-child(2).tws__item--active {
        transform: scale(1.2) translateX(42%);
    }

    .tawqit-watch-spotlight .tws__info {
        margin-top: 36px;
    }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Watch Spotlight                                              ++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Category Circle Background Remove                          ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Remove the black circular background behind brand logos in the
   sub-category slider on the category page (.container.mt-6).
   The logos are dark-colored so the bg-primary circle is hidden.       */
.container.mt-6 salla-slider .rounded-full.bg-primary {
    background-color: transparent !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Category Circle Background Remove                            ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Category Logos Only                                        ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 1. Hide the text labels under each brand logo */
.container.mt-6 salla-slider .swiper-slide span {
    display: none;
}

/* 2. Compensate for the removed text height so the spacing
      below the logo row stays consistent (text-sm ~14px + mt-2 ~8px) */
.container.mt-6 {
    padding-bottom: 1.5rem;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Category Logos Only                                          ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Category Back Button                                       ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#tawqit-back-btn {
    position: fixed;
    bottom: 24px;
    left: 50%;                              /* bottom-center: clear of scroll-to-top (left) and WhatsApp (right) */
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-btn-primary-text, #fff);
    border: none;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
    direction: rtl;
    white-space: nowrap;
}

#tawqit-back-btn.tawqit-back-btn--visible {
    opacity: 1;
    pointer-events: auto;
}

#tawqit-back-btn:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

#tawqit-back-btn:active {
    transform: translateX(-50%) translateY(0);
}

/* Left-pointing arrow — appears after "رجوع" in RTL flow (visually to the left) */
#tawqit-back-btn .tawqit-back-btn__icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Category Back Button                                         ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Brand Story                                                ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ── Reset (scoped) ───────────────────────────────────────────────────── */
.tbs,
.tbs * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Section shell ───────────────────────────────────────────────────── */
.tbs {
    background-color: #0d0d0d;
    width: 100%;
    padding: 64px 0;
    overflow: hidden;
    direction: rtl;
    font-family: inherit;
}

/* ── Inner container ─────────────────────────────────────────────────── */
.tbs__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
}

/* ── Images column ───────────────────────────────────────────────────── */
.tbs__images {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 0.96;
    flex-shrink: 0;
}

.tbs__img-wrap {
    position: absolute;
    width: 63%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    will-change: transform;
}

.tbs__img-wrap--dial {
    top: 0;
    right: 0;
    z-index: 1;
}

.tbs__img-wrap--movement {
    bottom: 0;
    left: 0;
    z-index: 2;
}

.tbs__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* ── Text column ─────────────────────────────────────────────────────── */
.tbs__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    direction: rtl;
    width: 100%;
}

.tbs__label {
    display: block;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 400;
}

.tbs__heading {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 22px;
}

.tbs__line {
    width: 52px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.32);
    margin-bottom: 26px;
}

.tbs__body {
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.95rem;
    line-height: 1.9;
    margin-bottom: 38px;
    max-width: 480px;
}

.tbs__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.42);
    padding: 12px 28px;
    font-size: 0.82rem;
    font-family: inherit;
    letter-spacing: 0.07em;
    text-decoration: none;
    white-space: nowrap;
    direction: rtl;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.tbs__cta:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.80);
}

.tbs__cta-icon {
    font-size: 1rem;
    line-height: 1;
}

/* ── Desktop ≥ 768px — side by side (RTL: images right, text left) ───── */
@media (min-width: 768px) {
    .tbs {
        padding: 88px 0;
    }

    .tbs__inner {
        flex-direction: row;
        align-items: center;
        gap: 72px;
    }

    .tbs__images {
        width: 44%;
        max-width: none;
        aspect-ratio: 1 / 1;
    }

    .tbs__text {
        flex: 1;
    }

    .tbs__heading {
        font-size: 2.4rem;
    }

    .tbs__body {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .tbs__heading {
        font-size: 2.75rem;
    }

    .tbs__images {
        width: 46%;
    }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Brand Story                                                  ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Footer Tweaks                                              ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 1. Gap between the two badges once موثق is moved inside .footer-badges */
.footer-badges {
    gap: 20px;
    flex-wrap: wrap;
}

/* Style the moved موثق badge to visually match salla-trust-badges */
.tawqit-mawthiq-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    color: var(--footer-text-color);
    font-size: 0.75rem;
    text-decoration: none;
}

.tawqit-mawthiq-badge img {
    width: 55px !important;
    height: 55px !important;
    object-fit: contain;
    margin-bottom: 4px;
}

/* Hide the now-empty last grid column */
.tawqit-mawthiq-col-hidden {
    display: none !important;
}

/* 2. Remove dotted border line above the social / payment strip */
.footer-bottom {
    border-top: none !important;
}

/* 3. Add vertical gap between social icons row and payment icons row */
.footer-bottom .flex {
    gap: 20px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Footer Tweaks                                                ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Hero Caption Position                                      ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ─── DESKTOP (≥640px): keep LEFT side, push caption LOWER ─────────── */
@media (min-width: 640px) {
    .advanced-slider--0 .advanced-slider__caption {
        display: flex !important;
        align-items: flex-end !important;   /* push to bottom zone       */
        padding-bottom: 80px !important;    /* comfortable gap from edge */
    }
}

/* ─── MOBILE (<640px): move to RIGHT side, push caption LOWER ──────── */
@media (max-width: 639px) {

    /* Vertical: push to bottom */
    .advanced-slider--0 .advanced-slider__caption {
        display: flex !important;
        align-items: flex-end !important;
        padding-bottom: 44px !important;
    }

    /* Horizontal: RTL — flex-start = visual RIGHT.
       The container becomes flex so the inner block is pulled to the right. */
    .advanced-slider--0 .advanced-slider__caption .container {
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* Clear any margin/float the --left modifier may have set */
    .advanced-slider--0 .advanced-slider__caption__inner--left {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Align text to the right (natural RTL start direction) */
    .advanced-slider--0 .advanced-slider__caption__inner__content {
        text-align: start !important;
    }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Hero Caption Position                                        ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */