/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Theme Settings (generated — edit via `npm run admin`)      ++ */
/* ++ Source: modifications/theme-settings/theme-settings.json          ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* === THEME SETTINGS:START === */
:root {
  --tw-banner-bottom: 30px;
  --tw-banner-right: 90px;
  --tw-banner-gap: 16px;
  --tw-banner-btn-x: -59px;
}
@media (min-width: 768px) {
  :root {
    --tw-banner-bottom: 290px;
    --tw-banner-right: 49px;
    --tw-banner-gap: 52px;
    --tw-banner-btn-x: -141px;
  }
}
/* === THEME SETTINGS:END === */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Theme Settings                                               ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ 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: 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: 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: Brand Category Nav                                         ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Brand Page "Shop by Category" grid — injected above the product list.
   All rules scoped under #tawqit-brand-cat-nav to avoid theme collisions.
   Uses theme CSS variables for dark-mode + brand consistency. RTL-aware. */

#tawqit-brand-cat-nav.tbcn {
  width: 100%;
  margin: 3.5rem auto;
  padding: 0 0.625rem;
  /* matches theme .container px-2.5 */
}

#tawqit-brand-cat-nav .tbcn__inner {
  max-width: 1140px;
  margin: 0 auto;
}

#tawqit-brand-cat-nav .tbcn__heading {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  color: var(--store-text-primary);
  text-align: start;
}

/* 2-column grid (2x2 for four tiles) at all breakpoints, mirroring the
   reference. Switch to repeat(4, 1fr) here for a single desktop row. */
#tawqit-brand-cat-nav .tbcn__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
  #tawqit-brand-cat-nav .tbcn__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

#tawqit-brand-cat-nav .tbcn__tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

#tawqit-brand-cat-nav .tbcn__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid var(--product-border-color, #eee);
  border-radius: 4px;
}

#tawqit-brand-cat-nav .tbcn__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

#tawqit-brand-cat-nav .tbcn__tile:hover .tbcn__img {
  transform: scale(1.04);
}

#tawqit-brand-cat-nav .tbcn__label {
  display: block;
  margin-top: 0.85rem;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--store-text-primary);
}

#tawqit-brand-cat-nav .tbcn__cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--store-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#tawqit-brand-cat-nav .tbcn__tile:hover .tbcn__cta {
  color: var(--color-primary);
}

/* Slightly tighter on small phones */
@media (max-width: 480px) {
  #tawqit-brand-cat-nav .tbcn__grid {
    gap: 1.25rem 0.85rem;
  }
}

/* ── Spotlight cards (below the grid) ─────────────────────────────────── */

#tawqit-brand-spotlights.tbcn-spot {
  width: 100%;
  margin: 3.5rem auto;
  padding: 0 0.625rem;
}

#tawqit-brand-spotlights .tbcn-spot__inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* Two-up on desktop, single column (stacked) on mobile */
#tawqit-brand-spotlights .tbcn-spot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}

@media (min-width: 768px) {
  #tawqit-brand-spotlights .tbcn-spot__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

#tawqit-brand-spotlights .tbcn-spot__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

#tawqit-brand-spotlights .tbcn-spot__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid var(--product-border-color, #eee);
  border-radius: 4px;
}

#tawqit-brand-spotlights .tbcn-spot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

#tawqit-brand-spotlights .tbcn-spot__card:hover .tbcn-spot__img {
  transform: scale(1.04);
}

#tawqit-brand-spotlights .tbcn-spot__heading {
  margin: 1.4rem 0 0;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--store-text-primary);
}

#tawqit-brand-spotlights .tbcn-spot__desc {
  max-width: 42ch;
  margin: 0.85rem auto 0;
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  line-height: 1.7;
  color: var(--store-text-secondary);
}

#tawqit-brand-spotlights .tbcn-spot__cta {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--store-text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#tawqit-brand-spotlights .tbcn-spot__card:hover .tbcn-spot__cta {
  color: var(--color-primary);
}

/* ── "Shop by Collection" — 3 cards, start-aligned ────────────────────── */

#tawqit-brand-collections.tbcn-coll {
  width: 100%;
  margin: 3.5rem auto;
  padding: 0 0.625rem;
}

#tawqit-brand-collections .tbcn-coll__inner {
  max-width: 1140px;
  margin: 0 auto;
}

#tawqit-brand-collections .tbcn-coll__heading {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  color: var(--store-text-primary);
  text-align: start;
}

/* 1 column (stacked) on mobile, 3 per row on desktop */
#tawqit-brand-collections .tbcn-coll__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 1.75rem;
}

@media (min-width: 768px) {
  #tawqit-brand-collections .tbcn-coll__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

#tawqit-brand-collections .tbcn-coll__card {
  display: flex;
  flex-direction: column;
  text-align: start;
  text-decoration: none;
  color: inherit;
}

#tawqit-brand-collections .tbcn-coll__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid var(--product-border-color, #eee);
  border-radius: 4px;
}

#tawqit-brand-collections .tbcn-coll__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

#tawqit-brand-collections .tbcn-coll__card:hover .tbcn-coll__img {
  transform: scale(1.04);
}

#tawqit-brand-collections .tbcn-coll__title {
  margin: 1.1rem 0 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--store-text-primary);
}

#tawqit-brand-collections .tbcn-coll__desc {
  margin: 0.75rem 0 0;
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  line-height: 1.7;
  color: var(--store-text-secondary);
}

#tawqit-brand-collections .tbcn-coll__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--store-text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#tawqit-brand-collections .tbcn-coll__card:hover .tbcn-coll__cta {
  color: var(--color-primary);
}

/* ── "Follow Us" — social thumbnail slider ────────────────────────────── */

#tawqit-brand-social.tbcn-social {
  width: 100%;
  margin: 3.5rem auto;
  padding: 0 0.625rem;
}

#tawqit-brand-social .tbcn-social__inner {
  max-width: 1140px;
  margin: 0 auto;
}

#tawqit-brand-social .tbcn-social__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

#tawqit-brand-social .tbcn-social__heading {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--store-text-primary);
}

#tawqit-brand-social .tbcn-social__links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

#tawqit-brand-social .tbcn-social__follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#tawqit-brand-social .tbcn-social__follow:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

#tawqit-brand-social .tbcn-social__follow-icon svg,
#tawqit-brand-social .tbcn-social__badge svg {
  display: block;
  fill: currentColor;
}

#tawqit-brand-social .tbcn-social__follow-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Horizontal scroll-snap slider (swipe on mobile, scroll/drag on desktop) */
#tawqit-brand-social .tbcn-social__track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

#tawqit-brand-social .tbcn-social__track::-webkit-scrollbar {
  height: 6px;
}

#tawqit-brand-social .tbcn-social__track::-webkit-scrollbar-thumb {
  background: var(--product-border-color, #ddd);
  border-radius: 3px;
}

#tawqit-brand-social .tbcn-social__item {
  flex: 0 0 auto;
  width: 9.5rem;
  scroll-snap-align: start;
  text-decoration: none;
}

@media (max-width: 480px) {
  #tawqit-brand-social .tbcn-social__item {
    width: 8rem;
  }
}

#tawqit-brand-social .tbcn-social__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid var(--product-border-color, #eee);
}

#tawqit-brand-social .tbcn-social__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

#tawqit-brand-social .tbcn-social__item:hover .tbcn-social__thumb {
  transform: scale(1.05);
}

/* Centered play triangle */
#tawqit-brand-social .tbcn-social__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* Platform badge, pinned to the start-top corner (RTL-aware) */
#tawqit-brand-social .tbcn-social__badge {
  position: absolute;
  top: 0.4rem;
  inset-inline-start: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}

#tawqit-brand-social .tbcn-social__badge svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* ── Hide native product listing (filters + sort + heading + grid) ────── */
/* Applied by JS to the .s-blocks-wrapper containing <salla-products-list>
   when a brand config sets hideProductList: true. */
.tbcn-products-hidden {
  display: none !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Brand Category Nav                                           ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Banner Caption Position                                    ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Stack the hero/banner caption (heading → text → button) at the
   bottom-RIGHT of the slide, so the heading sits ABOVE the button.
   The caption overlays the whole .advanced-slider__slide.

   TWO levels of control (both configurable from the admin Styling panel):
     Group  → --tw-banner-bottom (Y from bottom) + --tw-banner-right (X from right)
     Button → --tw-banner-gap   (Y gap above btn) + --tw-banner-btn-x (X shift)
     Colors → per-slide, set via JS (admin Banner Slides section)                    */

.advanced-slider__slide {
  position: relative;
  /* anchor (already set by the theme's `relative` class) */
}

.advanced-slider__caption__inner__content {
  position: absolute;

  /* GROUP Y — how far the whole caption sits from the banner's bottom edge.
     Admin: "Caption position → Y". Fallback: 30px. */
  bottom: var(--tw-banner-bottom, 30px);

  /* GROUP X — how far from the right edge of the slide.
     Admin: "Caption position → X". Fallback: 40px. */
  right: var(--tw-banner-right, 40px);

  width: auto;
  /* shrink-wrap to content; don't span the full slide */
  direction: rtl;

  display: flex;
  flex-direction: column;
  /* flex-start = right side in RTL direction → right-aligns children */
  align-items: flex-start;
  text-align: right;
  z-index: 5;
  /* keep above the full-slide link overlay so the button is clickable */
}

/* TEXT COLOR — var is set per-slide by JS (slides-config.json); falls back to white */
.advanced-slider__caption__inner__content__heading,
.advanced-slider__caption__inner__content__text {
  color: var(--tw-banner-text-color, #ffffff) !important;
}

.advanced-slider__caption__inner__content__button {
  /* BUTTON Y — gap between heading and button.
     Admin: "Button position → Y". Fallback: 24px. */
  margin-top: var(--tw-banner-gap, 24px);
  margin-bottom: 0;

  /* BUTTON X — independent horizontal shift of the button.
     Admin: "Button position → X". Negative = toward left/center; positive = toward right.
     Fallback: 0px (no shift). */
  transform: translateX(var(--tw-banner-btn-x, 0px));
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Banner Caption Position                                      ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Slider Title Divider Removal                               ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Remove the thin full-width divider line under product-slider titles
   (e.g. the "وصل حديثا" New Arrivals block).
   The theme puts a 1px border-bottom on the title CONTAINER
   (.s-slider-block__title) — that's the line we hide here.
   The short accent directly under the title TEXT lives on a different
   element (.s-slider-block__title-right) and is left untouched. */

.s-block--best-offers .s-slider-block__title,
salla-products-slider .s-slider-block__title {
  border-bottom: 0 !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Slider Title Divider Removal                                 ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: TikTok Product Reviews                                     ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* === TIKTOK-PRODUCT-VIDEOS:START === */
.tw-tiktok-section {
  margin-top: 1rem;
}

.tw-tiktok-btn {
  display: block;
  width: 100%;
  background: #54281d;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 14px 20px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  direction: rtl;
}

.tw-tiktok-btn:hover {
  background: #6b3326;
}

.tiktok-embed-wrapper {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.tiktok-embed-wrapper iframe {
  width: 325px;
  height: clamp(400px, 65vh, 820px);
  max-width: 100%;
  border-radius: 12px;
  border: none;
}

/* === TIKTOK-PRODUCT-VIDEOS:END === */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: TikTok Product Reviews                                       ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Blog Customizer                                             ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* === BLOG-CUSTOMIZER:START === */
/* — Shared blog layout helpers — */
.tw-blog-banner {
  margin-bottom: 1.5rem;
}

.tw-blog-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.tw-blog-products-grid {
  margin-top: 2rem;
}

.tw-blog-products-heading {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 1rem;
  direction: rtl;
  text-align: right;
}

.tw-blog-products-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* — Per-article rules — */
/* article: 1265485275 */
/* === BLOG-CUSTOMIZER:END === */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Blog Customizer                                               ++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Blog Index Redesign                                         ++ */
/* ++ Source: modifications/blog-index/blog-index.css                   ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* === BLOG-INDEX:START === */

/* ── Canvas ── */
body.blog-index main {
  background-color: #ffffff;
  padding-bottom: 4rem;
}

/* ── Hide unchanged Salla elements ── */
body.blog-index .blog-slider {
  display: none !important;
}

body.blog-index .dropdown-toggler.cat-filter {
  display: none !important;
}

body.blog-index .breadcrumbs {
  display: none;
}

/* ── Masthead column (reuses nav#filters-menu sticky slot) ── */
body.blog-index #filters-menu {
  padding: 0;
}

/* ── Masthead typography ── */
.tw-blog-index-masthead {
  padding-top: 0.5rem;
  user-select: none;
}

.tw-blog-index-wordmark {
  font-size: clamp(2.6rem, 4.2vw, 4.8rem);
  font-weight: 900;
  line-height: 0.88;
  color: rgb(21, 21, 21);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  direction: rtl;
}

.tw-blog-index-subtitle {
  font-size: 0.7rem;
  color: rgba(21, 21, 21, 0.55);
  letter-spacing: 0.07em;
  font-style: italic;
  line-height: 1.6;
  direction: rtl;
}

/* ── Feed: override 2-col grid → single column list ── */
body.blog-index salla-infinite-scroll {
  display: block !important;
  grid-template-columns: unset !important;
}

/* ── Card: flex-col → flex-row (RTL: image right, text left) ── */
body.blog-index .post-entry {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none;
  border-top: none;
  border-bottom: 1px solid rgba(21, 21, 21, 0.15);
  flex-direction: row;
  padding: 2.5rem 0;
  gap: 1.75rem;
  height: auto !important;
  align-items: flex-start;
}

body.blog-index .post-entry:hover {
  box-shadow: none !important;
}

body.blog-index .post-entry:last-child {
  border-bottom: none;
}

/* ── Card image (first child → right side in RTL row) ── */
body.blog-index .post-entry__image {
  width: 190px !important;
  min-width: 190px !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  flex-shrink: 0;
  background-color: rgb(21, 21, 21);
  overflow: hidden;
}

body.blog-index .post-entry__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* placeholder image → show black tile, hide the faint logo */
body.blog-index .post-entry__image.tw-no-image img {
  display: none !important;
}

/* ── Card text area (second child → left side in RTL row) ── */
body.blog-index .post-entry>.flex-1 {
  padding: 0.25rem 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* ── Date / author line ── */
body.blog-index .post-entry>.flex-1>div:first-child {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.45) !important;
  margin-bottom: 0.5rem !important;
}

body.blog-index .post-entry>.flex-1>div:first-child i {
  display: none;
}

/* ── Title ── */
body.blog-index .post-entry__title {
  font-size: clamp(1.15rem, 2vw, 1.65rem) !important;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem !important;
  color: rgb(21, 21, 21) !important;
}

body.blog-index .post-entry__title a {
  color: inherit;
  text-decoration: none;
}

body.blog-index .post-entry__title a:hover {
  opacity: 0.75;
}

/* ── Excerpt ── */
body.blog-index .post-entry>.flex-1>p {
  font-size: 0.78rem !important;
  color: rgba(21, 21, 21, 0.6) !important;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 0 !important;
}

/* ── Pill CTA (injected by JS) ── */
.tw-blog-discover {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgb(21, 21, 21);
  color: rgb(213, 208, 202);
  border-radius: 9999px;
  padding: 0.32rem 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-decoration: none;
  margin-top: 1rem;
  width: fit-content;
  transition: opacity 0.15s;
}

.tw-blog-discover:hover {
  opacity: 0.75;
}

/* ── Hide tag pills ── */
body.blog-index .post-entry>.p-4.flex.flex-wrap.items-center {
  display: none !important;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 1023px) {
  body.blog-index .post-entry {
    flex-direction: column;
    padding: 1.5rem 0;
    gap: 0.85rem;
  }

  body.blog-index .post-entry__image {
    width: 100% !important;
    min-width: unset !important;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
  }
}

/* ─────────────────────────────────────────────
   Blog Single Page — co.bo-inspired layout
   ───────────────────────────────────────────── */

/* Content column: horizontal breathing room on every screen size */
body.blog-single .main-content {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

@media (min-width: 768px) {
  body.blog-single .main-content {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

/* Title: larger, tighter line-height */
body.blog-single .main-content h1 {
  font-size: clamp(1.6rem, 5vw, 2.6rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  margin-bottom: 1rem !important;
}

/* Meta bar (date + author): small, spaced, uppercase */
body.blog-single .main-content .mb-10.text-gray-500 {
  font-size: 0.65rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem !important;
}

body.blog-single .main-content .mb-10.text-gray-500 i {
  display: none;
}

/* Override Quill editor's per-paragraph center alignment → RTL default (right) */
body.blog-single article p,
body.blog-single article blockquote,
body.blog-single article li {
  text-align: right !important;
}

/* Article images: rounded corners + fine border, full content width */
body.blog-single article img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(21, 21, 21, 0.1);
  margin: 1.5rem 0;
  object-fit: cover;
}

/* Blog-customizer banner image: same treatment */
body.blog-single .tw-blog-banner {
  margin-bottom: 2rem;
}

body.blog-single .tw-blog-banner img {
  border-radius: 10px;
  border: 1px solid rgba(21, 21, 21, 0.1);
}

/* === BLOG-INDEX:END === */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ START: Promo Popup                                                 ++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* === PROMO-POPUP:START === */

/* Overlay — full-screen dark backdrop */
.tw-promo-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.tw-promo-modal__overlay.tw-promo-modal--visible {
  opacity: 1;
  visibility: visible;
}

/* Modal box */
.tw-promo-modal__box {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.28s ease;
}
.tw-promo-modal__overlay.tw-promo-modal--visible .tw-promo-modal__box {
  transform: scale(1);
}

/* Close button — top-left (RTL start) */
.tw-promo-modal__close {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}
.tw-promo-modal__close:hover { background: rgba(0, 0, 0, 0.6); }

/* Image */
.tw-promo-modal__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.tw-promo-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content */
.tw-promo-modal__content {
  padding: 1.5rem;
  text-align: right;
  direction: rtl;
}
.tw-promo-modal__label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #0a0a08);
  opacity: 0.55;
  margin-bottom: 0.5rem;
}
.tw-promo-modal__heading {
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-primary, #0a0a08);
  margin-bottom: 0.5rem;
}
.tw-promo-modal__body {
  font-size: 0.82rem;
  color: rgba(10, 10, 8, 0.6);
  line-height: 1.65;
  margin: 0;
}

/* === PROMO-POPUP:END === */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Promo Popup                                                   ++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++ END: Blog Index Redesign                                           ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */