/* ============================================================
   SAFQA — Amazon-Style Category / Product Listing Page  v1
   Targets: .ut2-gl__* product grid cards on category pages
   Goals:
     - White card on white/light page background (no grey)
     - Image fills card edge-to-edge, no white padding/border
     - Subtle card shadow + hover lift (professional depth)
     - Amazon-style add-to-cart button
     - Clean price / title typography
   ============================================================ */

/* ── PAGE BACKGROUND ─────────────────────────────────────── */
/* Replace the dull grey #f3f4f4 with a very light warm white */
.tygh-main,
#tygh_main_container .tygh-main {
  background: #f8f8f8 !important;
}

/* Grid list inside main-content-grid must not overflow */
.main-content-grid .grid-list,
.main-content-grid .ut2-load-more-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.main-content-grid .grid-list .ut2-gl__wrap,
.main-content-grid .grid-list > div[id*="pagination"]:not(.ut2-load-more-container) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── WIDER CONTAINER (Amazon style — use full screen width) ─ */
/* UniTheme2 caps everything at 1500px. Override for wide screens. */
@media (min-width: 1600px) {
  :root {
    --fluidContainerMaxWidth: 1700px !important;
    --fluid-container-_max-width_-calc: 1700px !important;
  }
  .container-fluid-row,
  .container-fluid-row-full-width > .row-fluid {
    max-width: 1700px !important;
  }
}

@media (min-width: 1920px) {
  :root {
    --fluidContainerMaxWidth: 1860px !important;
    --fluid-container-_max-width_-calc: 1860px !important;
  }
  .container-fluid-row,
  .container-fluid-row-full-width > .row-fluid {
    max-width: 1860px !important;
  }
}

@media (min-width: 2400px) {
  :root {
    --fluidContainerMaxWidth: 2300px !important;
    --fluid-container-_max-width_-calc: 2300px !important;
  }
  .container-fluid-row,
  .container-fluid-row-full-width > .row-fluid {
    max-width: 2300px !important;
  }
}

/* ── PRODUCT GRID WRAPPER ────────────────────────────────── */
.grid-list {
  gap: 12px;
}

/* ── RESPONSIVE AUTO-FILL COLUMNS (Amazon style) ─────────────
   Two layout contexts:
   A) WITH sidebar: span9.main-content-grid beside span7.side-grid
      → max 4 columns at all breakpoints (sidebar eats ~400px)
   B) WITHOUT sidebar: span16 full-width product grid
      → 5+ columns at wider breakpoints

   --gl-cols is set inline on the grid element; CSS vars can't
   override inline styles, so we target grid-template-columns directly
   on the pagination wrapper / ut2-gl__wrap.
   ────────────────────────────────────────────────────────────── */

/* ── A: WITH SIDEBAR — cap at 4 columns always ── */
/*
 * Confirmed layout: .span9.main-content-grid sits next to .span7.side-grid
 * inside the same .row-fluid. .main-content-grid has width:100% which makes
 * it fluid, but the grid still needs to be capped or cards overflow.
 */
.main-content-grid .grid-list .ut2-gl__wrap,
.main-content-grid .grid-list > div[id*="pagination"]:not(.ut2-load-more-container),
.main-content-grid .grid-list.ut2-wl__grid .ut2-gl,
.main-content-grid .ut2-load-more-wrap {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1100px) {
    .main-content-grid .grid-list .ut2-gl__wrap,
    .main-content-grid .grid-list > div[id*="pagination"]:not(.ut2-load-more-container),
    .main-content-grid .ut2-load-more-wrap {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .main-content-grid .grid-list .ut2-gl__wrap,
    .main-content-grid .grid-list > div[id*="pagination"]:not(.ut2-load-more-container),
    .main-content-grid .ut2-load-more-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── B: WITHOUT SIDEBAR — full-width grid, more columns allowed ── */
/*
 * When there's no sidebar the product grid is in a span16 column.
 * These rules only apply when the grid is NOT inside .main-content-grid.
 */
@media (min-width: 1280px) {
    :not(.main-content-grid) > .grid-list .ut2-gl__wrap,
    :not(.main-content-grid) > .grid-list > div[id*="pagination"]:not(.ut2-load-more-container),
    :not(.main-content-grid) .grid-list.ut2-wl__grid .ut2-gl {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (min-width: 1440px) {
    :not(.main-content-grid) > .grid-list .ut2-gl__wrap,
    :not(.main-content-grid) > .grid-list > div[id*="pagination"]:not(.ut2-load-more-container) {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
@media (min-width: 1600px) {
    :not(.main-content-grid) > .grid-list .ut2-gl__wrap,
    :not(.main-content-grid) > .grid-list > div[id*="pagination"]:not(.ut2-load-more-container) {
        grid-template-columns: repeat(7, 1fr) !important;
    }
}
@media (min-width: 1920px) {
    :not(.main-content-grid) > .grid-list .ut2-gl__wrap,
    :not(.main-content-grid) > .grid-list > div[id*="pagination"]:not(.ut2-load-more-container) {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}
@media (min-width: 2400px) {
    :not(.main-content-grid) > .grid-list .ut2-gl__wrap,
    :not(.main-content-grid) > .grid-list > div[id*="pagination"]:not(.ut2-load-more-container) {
        grid-template-columns: repeat(10, 1fr) !important;
    }
}

/* ── PRODUCT CARD ────────────────────────────────────────── */
.ut2-gl__item {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.ut2-gl__body {
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}

/* hover shadow handled by grid_override.css */

/* ── PRODUCT IMAGE AREA — edge-to-edge, no white border ──── */
.ut2-gl__image {
  background: #fff !important;
  padding: 0 !important;
  border-bottom: 1px solid #eef0f2 !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
}

.ut2-gl__image img,
.ut2-gl__image .ty-pict {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  background: #fff !important;
  transition: transform 0.22s ease !important;
}

/* no image scale — keep clean like Amazon */

/* ── CONTENT AREA (title, rating, price, button) ─────────── */
.ut2-gl__content {
  padding: 10px 12px 12px !important;
  background: #fff !important;
}

/* ── PRODUCT NAME ────────────────────────────────────────── */
.ut2-gl__name .product-title,
.ut2-gl__name .product-title span {
  color: #0f1111 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ut2-gl__name .product-title:hover span {
  color: #c7511f !important;
  text-decoration: underline !important;
}

/* ── STAR RATING ─────────────────────────────────────────── */
.ut2-rating-stars .ty-product-review-reviews-stars,
.ut2-gl__content .ty-product-review-reviews-stars {
  color: #f0a500 !important;
}

.ut2-rating-stars-num,
.cn-reviews {
  font-size: 12px !important;
  color: #007185 !important;
}

/* ── STOCK STATUS ────────────────────────────────────────── */
.ty-qty-in-stock {
  color: #007600 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── PRICE — remove fixed min-height that causes gap ─────── */
/* UniTheme2 sets min-height inline on .ut2-gl__price to equalise
   card heights. This causes a large gap between stars and price
   when cards in the same row have different content heights.
   Override to 0 so each card is only as tall as its content.   */
.ut2-gl__price {
  min-height: 0 !important;
}

/* ── PRICE ───────────────────────────────────────────────── */
.ut2-gl__price .ty-price-num,
.ut2-gl__price bdi,
.ut2-gl__price .ty-price bdi {
  color: #0f1111 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* List price strikethrough */
.ut2-gl__price .ty-list-price .ty-price-num,
.ut2-gl__price .ty-list-price bdi {
  color: #888 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}

/* Discount badge */
.ty-discount-label,
.ut2-gl__price .ty-discount-label {
  background: #cc0c39 !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
}

/* ── STICKER LABELS (تخفيض %, الأعلى تقييماً) ───────────── */
/* Source: ab__stickers addon — text stickers on product images */
.ab-stickers-container .ab-sticker {
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
}
/* Ensure sticker text doesn't overflow/double in RTL */
html[dir="rtl"] .ab-stickers-container .ab-sticker {
  direction: rtl !important;
  text-align: right !important;
}
html[dir="rtl"] .ab-stickers-container .ab-sticker span:not(.tfs):not(.tss) {
  display: inline !important;
}
/* Position sticker at top of image — Amazon corner badge style */
.ty-product-labels {
  position: absolute !important;
  top: 0 !important;
  inset-inline-start: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 4px !important;
}

/* ── ADD TO CART BUTTON ──────────────────────────────────── */
.ut2-gl__control .ty-btn__primary,
.ut2-gl__control .ty-btn__add-to-cart,
.ut2-gl__control .cm-dialog-opener.ty-btn__primary,
.ut2-gl__body .ty-btn__primary,
.ut2-gl__body .ty-btn__add-to-cart {
  background: #ffd814 !important;
  border: 1px solid #fcd200 !important;
  color: #0f1111 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}

.ut2-gl__control .ty-btn__primary:hover,
.ut2-gl__control .ty-btn__add-to-cart:hover,
.ut2-gl__control .cm-dialog-opener.ty-btn__primary:hover,
.ut2-gl__body .ty-btn__primary:hover,
.ut2-gl__body .ty-btn__add-to-cart:hover {
  background: #f7ca00 !important;
  border-color: #f2b600 !important;
}

/* ── WISHLIST / COMPARE ICONS ────────────────────────────── */
.ut2-gl__control.icon {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid #dde0e4 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
  transition: background 0.15s !important;
}

.ut2-gl__control.icon:hover {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

/* ── CATEGORY BREADCRUMB / PAGE TITLE AREA ───────────────── */
.ty-breadcrumbs {
  font-size: 12.5px !important;
}

/* ── SUBCATEGORY THUMBNAILS ROW ──────────────────────────── */
.ut2__subcategories .ut2-lfl__item {
  border: 1px solid #dde0e4 !important;
  border-radius: 8px !important;
  background: #fff !important;
  transition: box-shadow 0.15s !important;
}

.ut2__subcategories .ut2-lfl__item:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
  border-color: #aab7c4 !important;
}

/* ── SIDEBAR CARDS (Categories + Product filters) ────────── */
/*
 * Base theme sets: overflow:hidden on .ut2-sidebox-important
 * This clips long filter labels (e.g. "ABBEY ROAD STUDIOS", "android 4.0 ice cream sandwich")
 * Fix: allow overflow so text is never invisibly cut.
 * Also fix RTL direction on the whole sidebar filter context.
 */
.ut2-sidebox-important {
    background: #fff !important;
    border: 1px solid #dde0e4 !important;
    border-radius: 8px !important;
    overflow: visible !important;   /* CRITICAL: base sets overflow:hidden which clips labels */
    width: 100% !important;
    box-sizing: border-box !important;
}

.ut2-sidebox-important__title {
    background: #fff !important;
    border-bottom: 1px solid #eef0f2 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ut2-sidebox-important__title span {
    color: #0f1111 !important;
    font-weight: 700 !important;
}

.ut2-sidebox-important__body {
    background: #fff !important;
    padding: 6px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Filter block padding already handled by grid_override.css (12px 14px) */

/* ── Filter wrapper inside sidebox: no overflow clip ── */
.side-grid .cm-product-filters,
.side-grid .ty-product-filters__wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Sidebar category links */
.ut2-sidebox-important .ut2-item a,
.ut2-sidebox-important .ut2-subcategories a {
    color: #0f1111 !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

.ut2-sidebox-important .ut2-item a:hover,
.ut2-sidebox-important .ut2-subcategories a:hover {
    color: #c7511f !important;
    text-decoration: underline !important;
}

/* Price filter inputs */
.ut2-sidebox-important input[type="text"],
.ut2-sidebox-important .ty-price-slider input {
  border: 1px solid #dde0e4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #0f1111 !important;
}

/* Filter slider track */
.ut2-sidebox-important .ui-slider {
  background: #e7e7e7 !important;
}

.ut2-sidebox-important .ui-slider .ui-slider-range {
  background: #febd69 !important;
}

.ut2-sidebox-important .ui-slider .ui-slider-handle {
  border-color: #febd69 !important;
  background: #febd69 !important;
}

/* ── SORT BAR (sort + pagination row above product grid) ─── */
.span16.b-top.ut2-top-bottom,
.b-top.ut2-top-bottom {
  background: #fff !important;
  border: 1px solid #dde0e4 !important;
  border-top: 1px solid #dde0e4 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}

/* ── BESTSELLERS BLOCK ────────────────────────────────────── */
.ut2-bestsellers-block,
.ty-mainbox-container.ut2-bestsellers-block {
  background: #fff !important;
  border: 1px solid #dde0e4 !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.ut2-bestsellers-block .ty-mainbox-title,
.ut2-bestsellers-block .ty-mainbox-title * {
  color: #0f1111 !important;
  font-weight: 700 !important;
}

/* Bestsellers list item */
.ut2-template-small__item {
  border-bottom: 1px solid #f0f2f2 !important;
  background: #fff !important;
  padding: 10px 0 !important;
}

.ut2-template-small__item:last-child {
  border-bottom: none !important;
}

/* Bestseller rank badge (the orange circle numbers) */
.ut2-bestsellers-block .ut2-bestsellers-number,
.ut2-bestsellers-block [class*="bestsellers-num"] {
  background: #ff9900 !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* ── MOBILE SIDEBAR ──────────────────────────────────────── */
.ut2-sw-w {
  background: #fff !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ut2-gl__body {
    border-radius: 6px !important;
  }
  .ut2-gl__image img,
  .ut2-gl__image .ty-pict {
    padding: 6px !important;
  }
  .ut2-gl__content {
    padding: 8px 10px 10px !important;
  }
}

/* ============================================================
   PRODUCT SCROLLER / CAROUSEL — Amazon-style compact cards
   Targets: .ty-scroller-list__item (homepage "مستوحى من تصفحك")
   ============================================================ */

/* ── SCROLLER CARD ──────────────────────────────────────── */
.ty-scroller-list__item {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transition: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ty-scroller-list__item:hover {
  box-shadow: none !important;
}

/* ── SCROLLER IMAGE ─────────────────────────────────────── */
.ty-scroller-list__img-block {
  background: #fff !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.ty-scroller-list__img-block img {
  object-fit: contain !important;
  max-height: 180px !important;
  max-width: 100% !important;
}

/* ── SCROLLER DESCRIPTION AREA ──────────────────────────── */
.ty-scroller-list__description {
  padding: 0 8px 8px !important;
  background: #fff !important;
}

.ty-scroller-list__description .ut2-simple-list__wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* ── TITLE — 2 lines max, Amazon style ─────────────────── */
.ty-scroller-list__description .product-title {
  color: #0f1111 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.ty-scroller-list__description .product-title:hover {
  color: #c7511f !important;
}

/* ── HIDE STOCK STATUS on listing cards (Amazon doesn't show "متوفر") ── */
.ty-scroller-list__description .stock-wrap,
.ty-scroller-list__description .product-list-field,
.ut2-gl__content .stock-wrap,
.ut2-gl__content .ty-control-group.product-list-field,
.ut2-simple-list__wrap .stock-wrap {
  display: none !important;
}

/* Show only for OUT OF STOCK items (red text) */
.ty-scroller-list__description .stock-wrap:has(.ty-qty-out-of-stock),
.ut2-gl__content .stock-wrap:has(.ty-qty-out-of-stock),
.ut2-simple-list__wrap .stock-wrap:has(.ty-qty-out-of-stock) {
  display: block !important;
}

.ty-qty-out-of-stock {
  color: #b12704 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── PRICE — bold, compact, Amazon style ────────────────── */
.ty-scroller-list__description .ut2-simple-list__price {
  margin: 0 !important;
  padding: 0 !important;
}

.ty-scroller-list__description .ut2-simple-list__price .ty-price-num,
.ty-scroller-list__description .ut2-simple-list__price bdi {
  color: #0f1111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.ty-scroller-list__description .ut2-simple-list__price .ty-list-price .ty-price-num,
.ty-scroller-list__description .ut2-simple-list__price .ty-list-price bdi {
  color: #888 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}

/* Currency label (جنيه) — small, muted */
.ty-scroller-list__description .ut2-currency-sup {
  font-size: 11px !important;
  color: #565959 !important;
  font-weight: 400 !important;
}

/* "اتصل بنا لمعرفة السعر" — compact */
.ty-scroller-list__description .ty-no-price {
  font-size: 12px !important;
  color: #565959 !important;
}

/* ── STICKER BADGE ON SCROLLER ──────────────────────────── */
.ty-scroller-list__description .ab-stickers-container {
  margin-bottom: 4px !important;
}

/* ── REMOVE EXTRA SPACING ───────────────────────────────── */
.ty-scroller-list__description .ut2-simple-list {
  margin: 0 !important;
  padding: 0 !important;
}

.ty-scroller-list__description .ut2-simple-list__wrap .ut2-simple-list__price {
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill any min-height or fixed heights from owl-carousel */
.ty-scroller .owl-item,
.ty-scroller-list .owl-item {
  height: auto !important;
}

.ty-scroller-list__item {
  height: auto !important;
  min-height: 0 !important;
}

/* ── ALSO HIDE "متوفر" label on category grid cards ─────── */
.ut2-gl__content .ty-qty-in-stock {
  display: none !important;
}

/* ── SECTION TITLE (مستوحى من تصفحك) — Amazon style ─────── */
.ty-mainbox-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f1111 !important;
  padding: 0 0 12px !important;
  border-bottom: none !important;
}

.ty-mainbox-title span,
.ty-mainbox-title a {
  color: #0f1111 !important;
  font-weight: 700 !important;
}

/* ── OVERRIDE GREY BACKGROUNDS from --color-general ──────── */
/* UniTheme2 sets --color-general:#f3f4f4 in compiled LESS which we can't override
   via :root (it comes after). Target the elements directly. */
.ty-mainbox-body,
.ut2-sidebox__body,
.ab-mix-center .ty-mainbox-body,
.ab-mix-first .ty-mainbox-body,
.ab-mix-last .ty-mainbox-body,
[style*="--color-general"],
.ty-product-block,
.ut2-gl__body,
.mix-grid .ty-mainbox-body {
  background: #fff !important;
}

/* Additional grey background overrides */
.ab__pb--item,
.ut2-a__products .grid-list.ut2-scroll-container .ut2-gl__body,
.ut2-a__products .ut2-thumbnail-list__item {
  background: #fff !important;
}

/* ── HIDE IN-STOCK TEXT ON LISTING CARDS (correct selector) ── */
.ty-scroller-list__description .ty-control-group.product-list-field {
  display: none !important;
}
.ty-scroller-list__description .ty-control-group.product-list-field:has(.ty-qty-out-of-stock) {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIST & COMPACT LAYOUT FIXES — Amazon style
   Fixes: grey backgrounds, ugly orange icon button, bad spacing
   Targets: short_list (ty-compact-list) + products_without_options (ut2-pl)
   ═══════════════════════════════════════════════════════════════ */

/* ── SHORT LIST (ty-compact-list) ───────────────────────────── */

/* Kill the grey card background + box-shadow border hack */
.ty-compact-list__content {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e7e7e7 !important;
    padding: 16px 12px !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
}
.ty-compact-list__item:last-child .ty-compact-list__content {
    border-bottom: none !important;
}

/* Image area — white bg, constrained, no grey */
.ty-compact-list__image {
    background: #fff !important;
    flex-shrink: 0 !important;
    width: 120px !important;
    max-width: 120px !important;
    padding: 0 !important;
}
.ty-compact-list__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 120px !important;
    object-fit: contain !important;
    background: #fff !important;
}

/* Title — Amazon link color + size */
.ty-compact-list .product-title,
.ty-compact-list .ty-compact-list__title a {
    color: #0f1111 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}
.ty-compact-list .product-title:hover {
    color: #c7511f !important;
    text-decoration: underline !important;
}

/* Price */
.ty-compact-list__price .ty-price-num,
.ty-compact-list__price bdi {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
}
.ty-compact-list__price .ty-list-price .ty-price-num,
.ty-compact-list__price .ty-list-price bdi {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #888 !important;
    text-decoration: line-through !important;
}

/* Stock status */
.ty-compact-list .ty-qty-in-stock { color: #007600 !important; font-size: 12px !important; }
.ty-compact-list .ty-qty-out-of-stock,
.ty-compact-list .ty-low-stock { color: #b12704 !important; font-size: 12px !important; }

/* Add to cart button — Amazon yellow pill */
.ty-compact-list__controls .ty-btn__add-to-cart,
.ty-compact-list__controls .ty-btn__primary {
    background: linear-gradient(to bottom, #f8e367, #ffd814) !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    height: auto !important;
    box-shadow: none !important;
    min-width: 100px !important;
    text-align: center !important;
}
.ty-compact-list__controls .ty-btn__add-to-cart:hover,
.ty-compact-list__controls .ty-btn__primary:hover {
    background: linear-gradient(to bottom, #fdf09d, #f7ca00) !important;
}

/* Kill the orange icon-only button style on compact layouts */
.ty-compact-list__controls .ut2-pl__control .ty-btn__add-to-cart[class*="icon"],
.ty-compact-list__controls .ty-btn__add-to-cart.icon_button {
    border-radius: 20px !important;
    background: linear-gradient(to bottom, #f8e367, #ffd814) !important;
    padding: 6px 12px !important;
    width: auto !important;
    min-width: 80px !important;
}

/* ── PRODUCTS WITHOUT OPTIONS (ut2-pl) ──────────────────────── */

/* Outer container - white bg */
.ut2-pl__wrap,
.ty-product-list .ut2-pl__wrap {
    background: transparent !important;
    gap: 0 !important;
}

/* Each item row — white card with bottom border like Amazon list */
.ut2-pl__item {
    background: #fff !important;
    border-bottom: 1px solid #e7e7e7 !important;
    padding: 16px 12px !important;
    transition: background .1s !important;
}
.ut2-pl__item:last-child { border-bottom: none !important; }
.ut2-pl__item:hover { background: #fafafa !important; }

/* Image — white, no grey swatch */
.ut2-pl__image > a,
.ut2-pl__image .cm-item-gallery > a,
.ut2-pl__image .ut2-image-reload > a {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 4px !important;
}
.ut2-pl__image img {
    background: #fff !important;
    object-fit: contain !important;
    padding: 4px !important;
}

/* Info panel — no border-right divider on the left (RTL: right becomes left) */
.ut2-pl__info {
    border-right: none !important;
    border-inline-end: none !important;
    padding-inline-end: 0 !important;
    margin-inline-end: 0 !important;
}

/* Title */
.ut2-pl__item-name a,
.ut2-pl__item-name .product-title {
    color: #0f1111 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}
.ut2-pl__item-name a:hover { color: #c7511f !important; text-decoration: underline !important; }

/* Price */
.ut2-pl__price .ty-price-num,
.ut2-pl__price bdi {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
}
.ut2-pl__price .ty-list-price .ty-price-num,
.ut2-pl__price .ty-list-price bdi {
    font-size: 13px !important;
    color: #888 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Add to cart — Amazon yellow pill, NOT orange icon square */
.ut2-pl__control .ty-btn__add-to-cart,
.ut2-pl__control .ty-btn__primary,
.ut2-pl__control [class*="add-to-cart"] {
    background: linear-gradient(to bottom, #f8e367, #ffd814) !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.ut2-pl__control .ty-btn__add-to-cart:hover { background: linear-gradient(to bottom, #fdf09d, #f7ca00) !important; }

/* Kill the icon-only button style that gives the orange square */
.ut2-pl__control .ty-btn.icon_button.ty-btn__add-to-cart {
    width: auto !important;
    height: auto !important;
    min-width: 120px !important;
    border-radius: 20px !important;
    padding: 7px 16px !important;
}
/* Show the button text, hide cart icon when in icon_button mode */
.ut2-pl__control .ty-btn.icon_button.ty-btn__add-to-cart bdi { display: inline !important; }

/* Discount badge */
.ut2-pl__price .ty-discount-label,
.ut2-pl__price .ty-discount-label__item {
    background: none !important;
    color: #cc0c39 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    position: static !important;
    display: inline !important;
    float: none !important;
}

/* ── OVERALL PAGE BACKGROUND ────────────────────────────────── */
/* Make sure list pages have clean white backgrounds too */
.ty-compact-list,
.ty-product-list {
    background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 5 — SEASON DEALS MIX LAYOUT (.mix-grid / .ut2-wrap-container)
   Structure: title + 3-column mix (ab-mix-first | ab-mix-center | ab-mix-last)
   Each column contains: banners (ut2-banner) + products_small_items blocks
   ══════════════════════════════════════════════════════════════ */

/* Section outer wrapper — top separator, white bg, breathing room */
.ut2-wrap-container.ut2-bottom {
    margin-top: 8px !important;
    border-top: 1px solid #e7e7e7 !important;
    padding-top: 0 !important;
    background: #fff !important;
}

/* Inner wrapper that holds title + mix-grid */
.ut2-wrap-container .ut2-bottom {
    padding: 20px 20px 24px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* ── Box style overrides — undo UniTheme2 coloured backgrounds ─
 * ut2-color-box: rgba(255,153,0,0.1) orange tint → white
 * ut2-gray-box:  var(--fill-gray) = #f0f2f2 → white
 * ut2-border-box: var(--color-general) = #f3f4f4 + border → white + thin border
 */
.mix-grid .ut2-color-box,
.mix-grid .ut2-gray-box,
.mix-grid .ut2-border-box,
.ab-mix-first .ut2-color-box,
.ab-mix-first .ut2-gray-box,
.ab-mix-first .ut2-border-box,
.ab-mix-center .ut2-color-box,
.ab-mix-center .ut2-gray-box,
.ab-mix-center .ut2-border-box,
.ab-mix-last .ut2-color-box,
.ab-mix-last .ut2-gray-box,
.ab-mix-last .ut2-border-box {
    background: #fff !important;
    border-color: #e7e7e7 !important;
}

/* ── Mix-grid column gap — tighten from default --gap (20px) ── */
.mix-grid > div {
    gap: 12px !important;
}
.mix-grid > div [class*="span"] {
    gap: 12px !important;
}

/* ── Banners inside mix columns — constrained height, rounded ── */
.mix-grid .ut2-banner {
    border-radius: 6px !important;
    overflow: hidden !important;
}
.mix-grid .ut2-a__bg-banner {
    border-radius: 6px !important;
    min-height: 160px !important;
}
.mix-grid .ut2-a__title {
    font-size: clamp(14px, 2vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
.mix-grid .ut2-a__button .ty-btn,
.mix-grid .ut2-a__button a {
    background: #ffd814 !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 18px !important;
    box-shadow: 0 2px 5px rgba(213,177,0,.3) !important;
    transition: background .12s !important;
    text-decoration: none !important;
}
.mix-grid .ut2-a__button .ty-btn:hover,
.mix-grid .ut2-a__button a:hover {
    background: #f7ca00 !important;
}

/* ── Products_small_items inside mix columns ────────────────── */
/* The mainbox title inside each column sub-block */
.mix-grid .ty-mainbox-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    padding: 0 0 8px !important;
    margin-bottom: 8px !important;
    border-bottom: none !important;
    /* Kill line-decoration inside mix columns */
    display: block !important;
}
.mix-grid .ty-mainbox-title::after {
    display: none !important;
    content: none !important;
}
.mix-grid .ty-mainbox-title span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    background: none !important;
    padding: 0 !important;
}
.mix-grid .ty-mainbox-title mark {
    background: none !important;
    color: #007185 !important;
    font-style: normal !important;
}

/* Scroller list (products_scroller.tpl) inside grey box */
.mix-grid .ty-scroller-list {
    background: #fff !important;
}
.mix-grid .owl-carousel.ty-scroller-list {
    background: #fff !important;
}

/* Compact list items inside mix columns */
.mix-grid .ty-compact-list__content {
    background: #fff !important;
    border-bottom: 1px solid #f0f2f2 !important;
    padding: 10px 8px !important;
}
.mix-grid .ty-compact-list__image {
    width: 80px !important;
    max-width: 80px !important;
}
.mix-grid .ty-compact-list__image img {
    max-height: 80px !important;
}
.mix-grid .ty-compact-list .product-title,
.mix-grid .ty-compact-list .ty-compact-list__title a {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
}
.mix-grid .ty-compact-list__price .ty-price-num,
.mix-grid .ty-compact-list__price bdi {
    font-size: 14px !important;
    color: #b12704 !important;
}

/* ── Mobile: stack columns vertically below 768px ──────────── */
@media (max-width: 767px) {
    .mix-grid .ut2-a__bg-banner {
        min-height: 120px !important;
    }
    .mix-grid .ut2-a__title {
        font-size: 16px !important;
    }
    .mix-grid .ty-compact-list__image {
        width: 60px !important;
        max-width: 60px !important;
    }
}

/* ── RTL ────────────────────────────────────────────────────── */
html[dir="rtl"] .mix-grid .ty-mainbox-title {
    text-align: right !important;
    direction: rtl !important;
}
html[dir="rtl"] .mix-grid .ty-compact-list__content {
    direction: rtl !important;
    text-align: right !important;
}
html[dir="rtl"] .mix-grid .ty-compact-list .product-title,
html[dir="rtl"] .mix-grid .ty-compact-list__title a {
    text-align: right !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOCKS 6 + 7 + 8 — PRODUCT SCROLLER SECTIONS
   (.ut2-bottom-sm + products_scroller_advanced / ab__grid_list)
   Block 6: "مطلوب بكثرة"   — FULL-WIDTH, scroller_advanced + banners
   Block 7: "الأكثر شعبية" — standard width, ab__grid_list 6 cols
   Block 8: "أفضل الكاميرات" — standard width, scroller_advanced
   ══════════════════════════════════════════════════════════════ */

/* ── Title fixes: ut2-big-size-title + ut2-title-opacity ───────
 * These two classes together produce a muted, centred, oversized title.
 * ut2-title-opacity  → color: var(--color-font-lighten) = grey
 * ut2-big-size-title → font-size: var(--font-size-extra-big) ≈ 28-32px
 * ut2-center-title   → justify-content: center
 * All three need full override to Amazon left-aligned bold black.
 * (ut2-biggest-size-title already fixed in amazon_related_products.css)
 */
.ty-mainbox-title.ut2-big-size-title,
.ty-mainbox-title.ut2-big-size-title.ut2-title-opacity {
    color: #0f1111 !important;
    font-size: 20px !important;
}
.ty-mainbox-title.ut2-big-size-title span,
.ty-mainbox-title.ut2-big-size-title > span:first-child,
.ty-mainbox-title.ut2-big-size-title.ut2-title-opacity span {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
    background: none !important;
    padding: 0 !important;
}
/* ut2-title-opacity specifically: override the muted --color-font-lighten */
.ty-mainbox-title.ut2-title-opacity {
    color: #0f1111 !important;
}
.ty-mainbox-title.ut2-title-opacity span {
    color: #0f1111 !important;
}

/* ── Section separator for ut2-bottom-sm sections ────────────── */
/* Each .ut2-bottom-sm section gets a top border as visual divider */
.container-fluid-row > .row-fluid > .span16.ut2-bottom-sm {
    border-top: 1px solid #e7e7e7 !important;
    padding-top: 20px !important;
    background: #fff !important;
}
/* Also for the full-width variant */
.container-fluid-row-full-width > .row-fluid > .span16.ut2-bottom-sm {
    border-top: 1px solid #e7e7e7 !important;
    padding-top: 20px !important;
    background: #fff !important;
}

/* ── Full-width block: edge-to-edge on all viewport sizes ────── */
.container-fluid-row-full-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.container-fluid-row-full-width > .row-fluid {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* ── products_scroller_advanced: owl carousel + item numbers ─── */
/* Hide the rank numbers (1. 2. 3.) — Amazon doesn't show these */
.ty-scroller-list .item-number,
.ty-scroller-list .ut2-gl__name .item-number {
    display: none !important;
}

/* Owl controls-outside for scroller_advanced outside sqz-row ── */
/* .ty-owl-controls floats right at z-index:100 by default —
   undo the float so it doesn't collapse the container */
.ut2-bottom-sm .ty-owl-controls {
    float: none !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ut2-bottom-sm .owl-controls.clickable.owl-controls-outside {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 20 !important;
    margin: 0 !important;
}
.ut2-bottom-sm .owl-prev,
.ut2-bottom-sm .owl-next {
    position: absolute !important;
    pointer-events: all !important;
    width: 36px !important;
    height: 52px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
    transition: box-shadow .15s, background .15s !important;
    z-index: 20 !important;
    top: 0 !important;
}
.ut2-bottom-sm .owl-prev { left: -18px !important; right: auto !important; }
.ut2-bottom-sm .owl-next { right: -18px !important; left: auto !important; }
html[dir="rtl"] .ut2-bottom-sm .owl-prev { left: auto !important; right: -18px !important; }
html[dir="rtl"] .ut2-bottom-sm .owl-next { left: -18px !important; right: auto !important; }

.ut2-bottom-sm .owl-prev:hover,
.ut2-bottom-sm .owl-next:hover {
    background: #f7f8f8 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
}
/* Arrow icon colour */
.ut2-bottom-sm .owl-prev i,
.ut2-bottom-sm .owl-next i {
    font-size: 20px !important;
    color: #0f1111 !important;
}
/* Grid needs relative positioning so arrows are anchored to it */
.ut2-bottom-sm > .row-fluid > .span16 {
    position: relative !important;
}

/* ── Banner block (id=116) following Block 6 products ────────── */
/* abt__ut2_banner_multiple with height 450px, navigation arrows  */
/* Scoped to NOT affect the homepage hero (.homepage-banners)      */
.container-fluid-row-full-width .banners.owl-carousel:not(.homepage-banners .banners),
.ut2-bottom .banners.owl-carousel,
.ut2-bottom-sm + .row-fluid .banners.owl-carousel {
    border-radius: 0 !important;
}
/* Banner carousel dots — same style as hero */
.container-fluid-row-full-width .owl-controls .owl-pagination,
.ut2-bottom .owl-controls .owl-pagination {
    text-align: center !important;
}
.container-fluid-row-full-width .owl-controls .owl-page span,
.ut2-bottom .owl-controls .owl-page span {
    background: rgba(0,0,0,.3) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transition: background .2s !important;
}
.container-fluid-row-full-width .owl-controls .owl-page.active span,
.ut2-bottom .owl-controls .owl-page.active span {
    background: #fff !important;
}

/* ── Grid scroller (ty-scroller-list) card styling ───────────── */
/* Cards inside all ut2-bottom-sm product scrollers              */
.ut2-bottom-sm .ty-scroller-list .ut2-gl__body,
.ut2-bottom .ty-scroller-list .ut2-gl__body {
    background: #fff !important;
    border: 1px solid #e3e6e6 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    overflow: hidden !important;
}
.ut2-bottom-sm .ty-scroller-list .ut2-gl__item:hover .ut2-gl__body,
.ut2-bottom .ty-scroller-list .ut2-gl__item:hover .ut2-gl__body {
    border-color: #007185 !important;
    box-shadow: 0 2px 8px rgba(0,113,133,.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Image */
.ut2-bottom-sm .ty-scroller-list .ut2-gl__image,
.ut2-bottom .ty-scroller-list .ut2-gl__image {
    background: #fff !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #f0f2f2 !important;
}
.ut2-bottom-sm .ty-scroller-list .ut2-gl__image img,
.ut2-bottom .ty-scroller-list .ut2-gl__image img {
    max-height: 180px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Content */
.ut2-bottom-sm .ty-scroller-list .ut2-gl__content,
.ut2-bottom .ty-scroller-list .ut2-gl__content {
    padding: 10px 12px 12px !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Product name */
.ut2-bottom-sm .ty-scroller-list .ut2-gl__name a,
.ut2-bottom .ty-scroller-list .ut2-gl__name a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #0f1111 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}
.ut2-bottom-sm .ty-scroller-list .ut2-gl__name a:hover,
.ut2-bottom .ty-scroller-list .ut2-gl__name a:hover {
    color: #c7511f !important;
    text-decoration: underline !important;
}

/* Stars */
.ut2-bottom-sm .ty-scroller-list .ut2-rating-stars,
.ut2-bottom .ty-scroller-list .ut2-rating-stars {
    color: #f0a500 !important;
    font-size: 13px !important;
}
.ut2-bottom-sm .ty-scroller-list .ut2-rating-stars-num,
.ut2-bottom .ty-scroller-list .ut2-rating-stars-num {
    font-size: 12px !important;
    color: #007185 !important;
}

/* Price */
.ut2-bottom-sm .ty-scroller-list .ut2-gl__price .ty-price-num,
.ut2-bottom-sm .ty-scroller-list .ut2-gl__price bdi,
.ut2-bottom .ty-scroller-list .ut2-gl__price .ty-price-num,
.ut2-bottom .ty-scroller-list .ut2-gl__price bdi {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
}
.ut2-bottom-sm .ty-scroller-list .ty-list-price .ty-price-num,
.ut2-bottom-sm .ty-scroller-list .ty-list-price bdi,
.ut2-bottom .ty-scroller-list .ty-list-price .ty-price-num,
.ut2-bottom .ty-scroller-list .ty-list-price bdi {
    font-size: 12px !important;
    color: #888 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Add to cart */
.ut2-bottom-sm .ty-scroller-list .ty-btn__add-to-cart,
.ut2-bottom-sm .ty-scroller-list .ty-btn__primary,
.ut2-bottom .ty-scroller-list .ty-btn__add-to-cart,
.ut2-bottom .ty-scroller-list .ty-btn__primary {
    background: linear-gradient(to bottom, #f8e367, #ffd814) !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 7px 10px !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important;
    box-shadow: 0 2px 5px rgba(213,177,0,.2) !important;
    height: auto !important;
    min-height: 0 !important;
}
.ut2-bottom-sm .ty-scroller-list .ty-btn__add-to-cart:hover,
.ut2-bottom .ty-scroller-list .ty-btn__add-to-cart:hover {
    background: linear-gradient(to bottom, #fdf09d, #f7ca00) !important;
}

/* Hide noise */
.ut2-bottom-sm .ty-scroller-list .ut2-gl__bottom,
.ut2-bottom-sm .ty-scroller-list .ut2-gl__amount,
.ut2-bottom .ty-scroller-list .ut2-gl__bottom,
.ut2-bottom .ty-scroller-list .ut2-gl__amount {
    display: none !important;
}

/* ── RTL ────────────────────────────────────────────────────── */
html[dir="rtl"] .ut2-bottom-sm .ty-scroller-list .ut2-gl__name a,
html[dir="rtl"] .ut2-bottom .ty-scroller-list .ut2-gl__name a {
    text-align: right !important;
    direction: rtl !important;
}
html[dir="rtl"] .ut2-bottom-sm .ty-scroller-list .ut2-gl__price,
html[dir="rtl"] .ut2-bottom .ty-scroller-list .ut2-gl__price {
    direction: rtl !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ut2-bottom-sm .owl-prev { left: -8px !important; }
    .ut2-bottom-sm .owl-next { right: -8px !important; }
    html[dir="rtl"] .ut2-bottom-sm .owl-prev { right: -8px !important; left: auto !important; }
    html[dir="rtl"] .ut2-bottom-sm .owl-next { left: -8px !important; right: auto !important; }
    .ut2-bottom-sm .ty-scroller-list .ut2-gl__image img { max-height: 130px !important; }
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 9 — "اكتشف عروض صفقه" PROMO BANNER GRID
   Structure: .banners-grid.hidden-phone (NOT resizable)
   3 columns: span5 (2 stacked) | span6 (1 tall) | span5 (2 stacked)
   Uses: abt__ut2_banner_carousel_combined.tpl
   ══════════════════════════════════════════════════════════════ */

/* Section top separator */
.ut2-bottom > .row-fluid > .span16.banners-grid {
    border-top: 1px solid #e7e7e7 !important;
    padding-top: 0 !important;
}

/* The grid row — use CSS gap instead of Bootstrap gutters */
.banners-grid:not(.banners-grid-resizable) > .row-fluid {
    display: grid !important;
    grid-template-columns: 5fr 6fr 5fr !important;
    gap: 10px !important;
    align-items: stretch !important;
}
.banners-grid:not(.banners-grid-resizable) > .row-fluid::after,
.banners-grid:not(.banners-grid-resizable) > .row-fluid::before {
    display: none !important;
}
/* Each column spans full height */
.banners-grid:not(.banners-grid-resizable) > .row-fluid > [class*="span"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    flex: none !important;
}

/* Individual banner inside the grid — rounded corners, overflow hidden */
.banners-grid:not(.banners-grid-resizable) .ut2-banner {
    border-radius: 6px !important;
    overflow: hidden !important;
    flex: 1 !important;
}
.banners-grid:not(.banners-grid-resizable) .ut2-a__bg-banner {
    border-radius: 6px !important;
    height: 100% !important;
    min-height: 140px !important;
}

/* Banner content inside grid — compact padding */
.banners-grid:not(.banners-grid-resizable) .ut2-a__content {
    padding: var(--ab-banner-content-padding, 16px) !important;
}
.banners-grid:not(.banners-grid-resizable) .ut2-a__title {
    font-size: clamp(13px, 1.6vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--ab-banner-title-color, #0f1111) !important;
}
.banners-grid:not(.banners-grid-resizable) .ut2-a__bg-banner.dark .ut2-a__title {
    color: #fff !important;
}
.banners-grid:not(.banners-grid-resizable) .ut2-a__button .ty-btn,
.banners-grid:not(.banners-grid-resizable) .ut2-a__button a {
    background: #ffd814 !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    box-shadow: 0 2px 5px rgba(213,177,0,.3) !important;
    transition: background .12s !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.banners-grid:not(.banners-grid-resizable) .ut2-a__button .ty-btn:hover,
.banners-grid:not(.banners-grid-resizable) .ut2-a__button a:hover {
    background: #f7ca00 !important;
}

/* Owl dots on these carousels */
.banners-grid:not(.banners-grid-resizable) .owl-controls .owl-page span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.3) !important;
    opacity: 1 !important;
    transition: background .2s !important;
}
.banners-grid:not(.banners-grid-resizable) .owl-controls .owl-page.active span {
    background: #0f1111 !important;
}

/* Mobile: stack all columns */
@media (max-width: 767px) {
    .banners-grid:not(.banners-grid-resizable) > .row-fluid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .banners-grid:not(.banners-grid-resizable) .ut2-a__bg-banner {
        min-height: 160px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 10 — "أفضل صفقات اليوم" DEAL OF THE DAY
   Template: ab__deal_of_the_day.tpl → .ab__deal_of_the_day
   Has countdown timer, product scroller, price prominence
   ══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.ab__deal_of_the_day:not(.pd-dp) {
    background: #fff !important;
    border-top: 1px solid #e7e7e7 !important;
    padding-top: 20px !important;
}

/* Title — already fixed by ut2-big-size-title rules above */

/* Countdown timer — Amazon red urgency */
.ab__deal_of_the_day .js-counter,
.ab__deal_of_the_day .ab-dotd-countdown {
    background: transparent !important;
    border: none !important;
}
.ab__deal_of_the_day .js-counter .countdown-section,
.ab__deal_of_the_day .ab-dotd-countdown-item {
    background: #232f3e !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 2px !important;
}
.ab__deal_of_the_day .js-counter .countdown-amount,
.ab__deal_of_the_day .ab-dotd-countdown-number {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    display: block !important;
}
.ab__deal_of_the_day .js-counter .countdown-period,
.ab__deal_of_the_day .ab-dotd-countdown-label {
    font-size: 10px !important;
    color: rgba(255,255,255,.7) !important;
    text-transform: lowercase !important;
    display: block !important;
}

/* Deal product cards */
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__body {
    background: #fff !important;
    border: 1px solid #e3e6e6 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__item:hover .ut2-gl__body {
    border-color: #007185 !important;
    box-shadow: 0 2px 8px rgba(0,113,133,.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__image {
    background: #fff !important;
    padding: 10px !important;
    border-bottom: 1px solid #f0f2f2 !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__image img {
    max-height: 160px !important;
    object-fit: contain !important;
    width: auto !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__content {
    padding: 10px 12px 12px !important;
    background: #fff !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__name a {
    font-size: 13px !important;
    color: #0f1111 !important;
    font-weight: 400 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__price .ty-price-num,
.ab__deal_of_the_day .ab-scroller-pd .ut2-gl__price bdi {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #b12704 !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ty-list-price .ty-price-num,
.ab__deal_of_the_day .ab-scroller-pd .ty-list-price bdi {
    font-size: 12px !important;
    color: #888 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}
/* Add to cart on deal cards */
.ab__deal_of_the_day .ab-scroller-pd .ty-btn__add-to-cart,
.ab__deal_of_the_day .ab-scroller-pd .ty-btn__primary {
    background: linear-gradient(to bottom, #f8e367, #ffd814) !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 10px !important;
    width: 100% !important;
    margin-top: auto !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
}
.ab__deal_of_the_day .ab-scroller-pd .ty-btn__add-to-cart:hover {
    background: linear-gradient(to bottom, #fdf09d, #f7ca00) !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 11 — "استكشف العروض الحالية" PROMOTIONS SCROLLER
   Template: ab__dotd_scroller.tpl → .ab__dotd_promotions
   Similar card layout to deal-of-the-day but without timer
   ══════════════════════════════════════════════════════════════ */

.ab__dotd_promotions {
    background: #fff !important;
    border-top: 1px solid #e7e7e7 !important;
    padding-top: 4px !important;
}

/* Promo cards — same treatment as deal cards */
.ab__dotd_promotions .ut2-gl__body {
    background: #fff !important;
    border: 1px solid #e3e6e6 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.ab__dotd_promotions .ut2-gl__item:hover .ut2-gl__body {
    border-color: #007185 !important;
    box-shadow: 0 2px 8px rgba(0,113,133,.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
}
.ab__dotd_promotions .ut2-gl__image {
    background: #fff !important;
    padding: 10px !important;
    border-bottom: 1px solid #f0f2f2 !important;
}
.ab__dotd_promotions .ut2-gl__image img {
    max-height: 160px !important;
    object-fit: contain !important;
    width: auto !important;
    max-width: 100% !important;
}
.ab__dotd_promotions .ut2-gl__content {
    padding: 10px 12px 12px !important;
    background: #fff !important;
}
.ab__dotd_promotions .ut2-gl__name a {
    font-size: 13px !important;
    color: #0f1111 !important;
    font-weight: 400 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
.ab__dotd_promotions .ut2-gl__name a:hover { color: #c7511f !important; text-decoration: underline !important; }
.ab__dotd_promotions .ut2-gl__price .ty-price-num,
.ab__dotd_promotions .ut2-gl__price bdi {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #b12704 !important;
}
.ab__dotd_promotions .ty-list-price .ty-price-num,
.ab__dotd_promotions .ty-list-price bdi {
    font-size: 12px !important;
    color: #888 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}
.ab__dotd_promotions .ty-btn__add-to-cart,
.ab__dotd_promotions .ty-btn__primary {
    background: linear-gradient(to bottom, #f8e367, #ffd814) !important;
    border: 1px solid #fcd200 !important;
    color: #0f1111 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 10px !important;
    width: 100% !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
}
.ab__dotd_promotions .ty-btn__add-to-cart:hover {
    background: linear-gradient(to bottom, #fdf09d, #f7ca00) !important;
}
/* Discount badge on promo cards */
.ab__dotd_promotions .ty-discount-label {
    background: none !important;
    color: #cc0c39 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    position: static !important;
    display: inline !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 12 — "مستوحى من تصفحك" BROWSING HISTORY SIDEBOX
   Template: .ut2-sidebox with owl-carousel .ty-scroller-list
   Shows recently browsed products — Amazon "Keep shopping for" style
   ══════════════════════════════════════════════════════════════ */

/* Sidebox wrapper */
.ut2-sidebox {
    background: #fff !important;
    border-top: 1px solid #e7e7e7 !important;
    padding: 20px 0 !important;
    margin-bottom: 0 !important;
}

/* Sidebox title — inline with external owl arrows */
.ut2-sidebox__title {
    padding: 0 0 14px !important;
    border-bottom: none !important;
}
.ut2-sidebox__title-wrapper,
.ut2-sidebox__title span {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
}

/* Owl controls position — already in .ut2-sidebox__title.outside-controls padding-right:85px */
/* We just need to ensure the arrow buttons are styled */
.ut2-sidebox .owl-prev,
.ut2-sidebox .owl-next {
    background: rgba(255,255,255,.95) !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 4px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
    transition: background .12s !important;
}
.ut2-sidebox .owl-prev:hover,
.ut2-sidebox .owl-next:hover {
    background: #f7f8f8 !important;
}
.ut2-sidebox .owl-prev i,
.ut2-sidebox .owl-next i,
.ut2-sidebox .owl-prev span[class*="icon"],
.ut2-sidebox .owl-next span[class*="icon"] {
    font-size: 16px !important;
    color: #0f1111 !important;
}

/* Scroller list items */
.ut2-sidebox .ty-scroller-list__item {
    background: #fff !important;
    border: 1px solid #e3e6e6 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: border-color .15s, box-shadow .15s !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.ut2-sidebox .ty-scroller-list__item:hover {
    border-color: #007185 !important;
    box-shadow: 0 2px 8px rgba(0,113,133,.1) !important;
}
.ut2-sidebox .ty-scroller-list__img-block {
    background: #fff !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #f0f2f2 !important;
}
.ut2-sidebox .ty-scroller-list__img-block img {
    max-height: 120px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
.ut2-sidebox .ty-scroller-list__description {
    padding: 8px 10px 10px !important;
    background: #fff !important;
}
.ut2-sidebox .ty-scroller-list__description .product-title,
.ut2-sidebox .ty-scroller-list__description .product-title span {
    font-size: 12px !important;
    color: #0f1111 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}
.ut2-sidebox .ty-scroller-list__description .product-title:hover span {
    color: #c7511f !important;
    text-decoration: underline !important;
}
.ut2-sidebox .ut2-simple-list__price .ty-price-num,
.ut2-sidebox .ut2-simple-list__price bdi {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
}
.ut2-sidebox .ut2-simple-list__price .ty-list-price .ty-price-num,
.ut2-sidebox .ut2-simple-list__price .ty-list-price bdi {
    font-size: 11px !important;
    color: #888 !important;
    text-decoration: line-through !important;
}

/* Hide noise */
.ut2-sidebox .ut2-gl__bottom,
.ut2-sidebox .ut2-gl__amount,
.ut2-sidebox .stock-wrap { display: none !important; }

/* ── RTL for all remaining blocks ──────────────────────────── */
html[dir="rtl"] .banners-grid:not(.banners-grid-resizable) .ut2-a__content.align-right {
    justify-content: flex-end !important;
    text-align: right !important;
}
html[dir="rtl"] .ab__deal_of_the_day .ut2-gl__name a,
html[dir="rtl"] .ab__dotd_promotions .ut2-gl__name a {
    text-align: right !important;
    direction: rtl !important;
}
html[dir="rtl"] .ut2-sidebox { direction: rtl !important; text-align: right !important; }
html[dir="rtl"] .ut2-sidebox__title { text-align: right !important; }
html[dir="rtl"] .ut2-sidebox .ty-scroller-list__description .product-title {
    text-align: right !important;
    direction: rtl !important;
}

/* ── Mobile for remaining blocks ───────────────────────────── */
@media (max-width: 767px) {
    .ab__deal_of_the_day .ab-scroller-pd .ut2-gl__image img { max-height: 120px !important; }
    .ab__dotd_promotions .ut2-gl__image img { max-height: 120px !important; }
    .ut2-sidebox .ty-scroller-list__img-block img { max-height: 90px !important; }
    .ut2-sidebox__title-wrapper,
    .ut2-sidebox__title span { font-size: 17px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   VENDOR INFO IN PRODUCT GRID — Compact Amazon-style
   ═══════════════════════════════════════════════════════════════ */
.ut2__vendor-info--list-product {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    border-top: 1px solid #f0f2f2 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
}
.ut2__vendor-info--logo {
    flex-shrink: 0 !important;
}
.ut2__vendor-info--logo img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.ut2__vendor-info--wrap {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
}
.ut2__vendor-info--name {
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ut2__vendor-info--name a {
    color: #007185 !important;
    text-decoration: none !important;
}
.ut2__vendor-info--name a:hover {
    color: #c7511f !important;
    text-decoration: underline !important;
}
.ut2__vendor-info--location {
    font-size: 11px !important;
    color: #565959 !important;
    white-space: nowrap !important;
}
.ut2__vendor-info--rating {
    font-size: 11px !important;
    color: #565959 !important;
    margin-inline-start: auto !important;
    white-space: nowrap !important;
}
.ut2__vendor-info--rating .vr-gold {
    color: #daa520 !important;
    font-size: 14px !important;
}