/* ============================================================
   SAFQA — Hero Carousel + Promo Banners
   Block 1: .homepage-banners (hero owl-carousel)
   Block 2: .banners-grid-resizable (category tiles)
   Block 3+: .banners.ut2-scroll-container (promo rows)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   BLOCK 1 — HERO FULL-WIDTH CAROUSEL
   ══════════════════════════════════════════════════════════════ */

/* Reset legacy margin from responsive theme, handle floating header */
.homepage-banners {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* When floating header is active, pull banner up behind it exactly */
body.floating-header .homepage-banners {
  margin-top: calc(
    (var(--ut2-top-panel-height, 0px) + var(--ut2-header-height, 0px) + var(--ut2-header-menu-height, 0px)) * -1
  ) !important;
}

/* Each slide — use CSS custom property for height, clamp for responsiveness */
.homepage-banners .ut2-banner {
  width: 100% !important;
  overflow: hidden !important;
}

.homepage-banners .ut2-a__bg-banner {
  min-height: var(--ab-banner-height, 500px) !important;
  height: var(--ab-banner-height, 500px) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative !important;
}

/* ── Hero: content layout ── */
.homepage-banners .ut2-a__content {
  display: flex !important;
  align-items: center !important;
  padding: var(--ab-banner-content-padding, 40px 5%) !important;
  height: 100% !important;
  min-height: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

/* valign variants */
.homepage-banners .ut2-a__content.valign-top    { align-items: flex-start !important; }
.homepage-banners .ut2-a__content.valign-center { align-items: center !important; }
.homepage-banners .ut2-a__content.valign-bottom { align-items: flex-end !important; }

/* halign variants — text + content side */
.homepage-banners .ut2-a__content.align-right {
  justify-content: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
.homepage-banners .ut2-a__content.align-left {
  justify-content: flex-start !important;
  text-align: left !important;
}
.homepage-banners .ut2-a__content.align-center {
  justify-content: center !important;
  text-align: center !important;
}

/* width-half limits the text column to 50% of slide */
.homepage-banners .ut2-a__content.width-half .ut2-a__description {
  max-width: 50% !important;
}

/* ── Hero: internal-image layout (text + product image side by side) ── */
.homepage-banners .ut2-a__content.internal-image {
  gap: 24px !important;
  overflow: visible !important;
}
.homepage-banners .ut2-a__content.internal-image .ut2-a__img {
  flex-shrink: 0 !important;
  max-width: 45% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.homepage-banners .ut2-a__content.internal-image .ut2-a__img img {
  max-height: calc(var(--ab-banner-height, 500px) * 0.9) !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.homepage-banners .ut2-a__content.internal-image .ut2-a__description {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* ── Hero: text elements ── */
.homepage-banners .ut2-a__title small {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.3px !important;
}

.homepage-banners .ut2-a__title {
  font-size: var(--ab-banner-title-size, 36px) !important;
  color: var(--ab-banner-title-color, #0f1111) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

.homepage-banners .ut2-a__descr {
  font-size: var(--ab-banner-description-size, 15px) !important;
  color: var(--ab-banner-description-color, #444) !important;
  line-height: 1.55 !important;
  margin-bottom: 20px !important;
}

/* Dark/light variants */
.homepage-banners .ut2-a__bg-banner.dark .ut2-a__title  { color: #fff !important; }
.homepage-banners .ut2-a__bg-banner.dark .ut2-a__descr  { color: rgba(255,255,255,.85) !important; }
.homepage-banners .ut2-a__bg-banner.light .ut2-a__title { color: var(--ab-banner-title-color, #0f1111) !important; }

/* ── Hero: CTA button ── */
.homepage-banners .ut2-a__button .ty-btn,
.homepage-banners .ut2-a__button a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffd814 !important;
  border: 1px solid #fcd200 !important;
  color: #0f1111 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 9px 22px !important;
  box-shadow: 0 2px 5px rgba(213,177,0,.4) !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.homepage-banners .ut2-a__button .ty-btn:hover,
.homepage-banners .ut2-a__button a:hover {
  background: #f7ca00 !important;
  border-color: #f2b600 !important;
  box-shadow: 0 3px 8px rgba(213,177,0,.6) !important;
  color: #0f1111 !important;
}
/* ty-btn__text / ty-btn__outline override */
.homepage-banners .ut2-a__button .ty-btn__text,
.homepage-banners .ut2-a__button .ty-btn__outline {
  background: transparent !important;
  border-color: rgba(255,255,255,.7) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.homepage-banners .ut2-a__button .ty-btn__text:hover,
.homepage-banners .ut2-a__button .ty-btn__outline:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: #fff !important;
}
/* --tc --bc color-scheme buttons (dark bg) */
.homepage-banners .ut2-a__button .ty-btn.--tc,
.homepage-banners .ut2-a__button .ty-btn.--bc {
  background: #ffd814 !important;
  border-color: #fcd200 !important;
  color: #0f1111 !important;
}

/* ── Hero owl-carousel: left/right navigation arrows ── */
.homepage-banners .owl-controls {
  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: 10 !important;
  margin: 0 !important;
}
.homepage-banners .owl-buttons {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  pointer-events: none !important;
}
.homepage-banners .owl-prev,
.homepage-banners .owl-next {
  pointer-events: all !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  transition: background .15s, box-shadow .15s !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}
.homepage-banners .owl-prev:hover,
.homepage-banners .owl-next:hover {
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
}
/* Hide the original icon spans, use CSS chevrons */
.homepage-banners .owl-prev *,
.homepage-banners .owl-next * {
  display: none !important;
}
.homepage-banners .owl-prev::after {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid #0f1111 !important;
  border-right: 2px solid #0f1111 !important;
  transform: rotate(225deg) translateX(2px) !important;
}
.homepage-banners .owl-next::after {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid #0f1111 !important;
  border-right: 2px solid #0f1111 !important;
  transform: rotate(45deg) translateX(-2px) !important;
}
/* RTL: flip chevron directions */
html[dir="rtl"] .homepage-banners .owl-prev::after {
  transform: rotate(45deg) translateX(-2px) !important;
}
html[dir="rtl"] .homepage-banners .owl-next::after {
  transform: rotate(225deg) translateX(2px) !important;
}

/* ── Hero owl-carousel: dot pagination ── */
.homepage-banners .owl-controls .owl-pagination {
  position: absolute !important;
  bottom: 14px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  pointer-events: all !important;
  z-index: 11 !important;
}
.homepage-banners .owl-controls .owl-page {
  display: inline-block !important;
  vertical-align: middle !important;
}
.homepage-banners .owl-controls .owl-page span {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 4px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  opacity: 1 !important;
  transition: background .2s, transform .2s !important;
}
.homepage-banners .owl-controls .owl-page.active span {
  background: #fff !important;
  border-color: #fff !important;
  transform: scale(1.35) !important;
  opacity: 1 !important;
}

/* ── Hero: responsive height ── */
@media (max-width: 1024px) {
  .homepage-banners .ut2-a__bg-banner {
    min-height: clamp(300px, 45vw, 500px) !important;
    height: clamp(300px, 45vw, 500px) !important;
  }
  .homepage-banners .ut2-a__content.width-half .ut2-a__description {
    max-width: 60% !important;
  }
}
@media (max-width: 767px) {
  .homepage-banners .ut2-a__bg-banner {
    min-height: 260px !important;
    height: 260px !important;
  }
  .homepage-banners .ut2-a__title {
    font-size: clamp(20px, 5vw, 32px) !important;
  }
  .homepage-banners .ut2-a__descr {
    display: none !important;
  }
  .homepage-banners .ut2-a__content.width-half .ut2-a__description {
    max-width: 100% !important;
  }
  .homepage-banners .ut2-a__content.internal-image .ut2-a__img {
    display: none !important;
  }
  .homepage-banners .owl-prev,
  .homepage-banners .owl-next {
    width: 32px !important;
    height: 32px !important;
  }
}
@media (max-width: 480px) {
  .homepage-banners .ut2-a__bg-banner {
    min-height: 200px !important;
    height: 200px !important;
  }
  .homepage-banners .ut2-a__button .ty-btn,
  .homepage-banners .ut2-a__button a {
    font-size: 12px !important;
    padding: 7px 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 2 — CATEGORY BANNER GRID (.banners-grid-resizable)
   Amazon-style: white card, image centred, label below, hover lift.

   Base UniTheme2 sets:
     display:grid; grid-auto-rows:1fr; gap:var(--gap)
     .ut2-banner { height:100% }           ← keeps equal row heights
     .ut2-a__img { flex-grow:1 }           ← image fills available space
   We MUST NOT override height:100% or flex-grow:1 — it breaks equal rows.
   We only restyle colours, spacing, typography and hover.
   ══════════════════════════════════════════════════════════════ */

/* Section spacing — sits directly after the hero */
.span16.banners-grid-resizable {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* Card shell — white background, subtle border, rounded, pointer */
.banners-grid-resizable .ut2-banner {
  background: #fff !important;
  border-radius: 8px !important;
  border: 1px solid #e3e6e6 !important;
  overflow: hidden !important;
  /* height:100% is set by base — do NOT override */
  transition: box-shadow .15s, border-color .15s !important;
  cursor: pointer !important;
}
.banners-grid-resizable .ut2-banner:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
  border-color: #c8cccc !important;
}

/* bg-banner: vertical flex column, no height override (let grid row drive it) */
.banners-grid-resizable .ut2-a__bg-banner {
  background-color: #fff !important;
  background-image: none !important;       /* no background image on category cards */
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100% !important;                 /* fill the card shell */
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Content area: column, centred, full height */
.banners-grid-resizable .ut2-banner .ut2-a__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 12px 14px !important;
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Image area: flex-grow:1 (base rule) fills space — we only control alignment */
.banners-grid-resizable .ut2-banner .ut2-a__img {
  /* flex-grow:1 is set by base — do NOT override with flex-grow:0 */
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
  transition: transform .15s !important;
}
.banners-grid-resizable .ut2-banner:hover .ut2-a__img {
  transform: scale(1.04) !important;
}

/* Image: contain within its flex box, never overflow */
.banners-grid-resizable .ut2-banner .ut2-a__img img {
  max-width: 100% !important;
  max-height: 130px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Description: fixed at bottom, no flex-grow */
.banners-grid-resizable .ut2-banner .ut2-a__description {
  flex-shrink: 0 !important;
  width: 100% !important;
}
.banners-grid-resizable .ut2-banner .ut2-a__description .box {
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Category label — clean, centered, Amazon-weight */
.banners-grid-resizable .ut2-a__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f1111 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  margin: 0 !important;
}

/* "Shop now" micro-link — Amazon shows this below the label */
.banners-grid-resizable .ut2-a__button {
  margin-top: 6px !important;
}
.banners-grid-resizable .ut2-a__button a {
  font-size: 12px !important;
  color: #007185 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.banners-grid-resizable .ut2-a__button a:hover {
  text-decoration: underline !important;
  color: #c7511f !important;
}

/* RTL: flip text alignment inside cards */
html[dir="rtl"] .banners-grid-resizable .ut2-banner .ut2-a__content {
  text-align: center !important;   /* centred looks correct in both directions */
}
html[dir="rtl"] .banners-grid-resizable .ut2-a__title {
  text-align: center !important;
}

/* Mobile: 2-column grid (base already sets this at ≤576px) — just tighten padding */
@media (max-width: 576px) {
  .banners-grid-resizable .ut2-banner .ut2-a__content {
    padding: 12px 8px 10px !important;
  }
  .banners-grid-resizable .ut2-banner .ut2-a__img img {
    max-height: 90px !important;
  }
  .banners-grid-resizable .ut2-a__title {
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BLOCK 3+ — PROMO BANNER ROWS (.banners.ut2-scroll-container)
   ══════════════════════════════════════════════════════════════ */

.banners.ut2-scroll-container {
  margin: 32px 0 8px !important;
  padding: 0 !important;
  position: relative;
}

.banners.ut2-scroll-container > .ut2-scroll-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--ab-banner-min-width, 260px), 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.ut2-banner.ut2-banner-desktop.ut2-scroll-item {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.10) !important;
  transition: box-shadow .18s, transform .18s !important;
  min-height: 220px !important;
}
.ut2-banner.ut2-banner-desktop.ut2-scroll-item:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
  transform: translateY(-2px) !important;
}

/* Generic banner background (non-hero) */
.banners.ut2-scroll-container .ut2-a__bg-banner {
  min-height: 220px !important;
  height: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}

.banners.ut2-scroll-container .ut2-a__content {
  padding: 22px 20px !important;
  display: flex !important;
  align-items: flex-end !important;
  height: 100% !important;
}
.banners.ut2-scroll-container .ut2-a__content.align-right,
.banners.ut2-scroll-container .ut2-a__content.valign-bottom.align-right {
  justify-content: flex-end !important;
  text-align: right !important;
}

.banners.ut2-scroll-container .ut2-a__description .box {
  padding: 0 !important;
  max-width: none;
  min-width: 0;
}

.banners.ut2-scroll-container .ut2-a__title small {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 0.75 !important;
  margin-bottom: 2px !important;
}
.banners.ut2-scroll-container .ut2-a__title {
  font-size: var(--ab-banner-title-size, 26px) !important;
  color: var(--ab-banner-title-color, #0f1111) !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}
.banners.ut2-scroll-container .ut2-a__descr {
  font-size: var(--ab-banner-description-size, 13.5px) !important;
  color: var(--ab-banner-description-color, #444) !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

/* Promo row CTA button */
.banners.ut2-scroll-container .ut2-a__button .ty-btn,
.banners.ut2-scroll-container .ut2-a__button a.ty-btn {
  display: inline-block !important;
  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 20px !important;
  box-shadow: rgba(213,177,0,.4) 0 2px 5px 0 !important;
  transition: background .12s, border-color .12s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.banners.ut2-scroll-container .ut2-a__button .ty-btn:hover,
.banners.ut2-scroll-container .ut2-a__button a.ty-btn:hover {
  background: #f7ca00 !important;
  border-color: #f2b600 !important;
  color: #0f1111 !important;
}

/* Promo row image */
.banners.ut2-scroll-container .ut2-a__img { flex-shrink: 0; }
.banners.ut2-scroll-container .ut2-a__img img {
  max-height: 200px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Promo row scroll arrows */
.banners.ut2-scroll-container .ut2-scroll-left,
.banners.ut2-scroll-container .ut2-scroll-right {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid #d5d9d9 !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.banners.ut2-scroll-container .ut2-scroll-left:hover,
.banners.ut2-scroll-container .ut2-scroll-right:hover {
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.2) !important;
}

/* Dark/light variants */
.banners.ut2-scroll-container .ut2-a__bg-banner.dark .ut2-a__title { color: #fff !important; }
.banners.ut2-scroll-container .ut2-a__bg-banner.dark .ut2-a__descr { color: rgba(255,255,255,.85) !important; }
.banners.ut2-scroll-container .ut2-a__bg-banner.dark .ut2-a__button .ty-btn {
  background: #ffd814 !important;
  color: #0f1111 !important;
}

/* Divider above promo rows */
.sqz-pb__tabs-area + div .banners.ut2-scroll-container,
.tygh-content .banners.ut2-scroll-container {
  border-top: 1px solid #e7e7e7;
  padding-top: 28px !important;
  margin-top: 24px !important;
}

/* Internal-image layout in promo rows */
.banners.ut2-scroll-container .ut2-a__content.internal-image {
  overflow: visible !important;
}
.banners.ut2-scroll-container .ut2-a__content.internal-image .ut2-a__description {
  overflow: visible !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.banners.ut2-scroll-container .ut2-a__content.internal-image .ut2-a__description .box {
  max-width: none !important;
  width: auto !important;
}
.banners.ut2-scroll-container .ut2-a__content.internal-image .ut2-a__img {
  flex-shrink: 0 !important;
  max-width: 50% !important;
}

/* ── RTL ── */
html[dir="rtl"] .ut2-a__content.align-right {
  justify-content: flex-start !important;
  text-align: right !important;
}
html[dir="rtl"] .ut2-a__content.align-left  { justify-content: flex-end !important; }
html[dir="rtl"] .ut2-a__description .box    { text-align: right !important; }
html[dir="rtl"] .homepage-banners .ut2-a__content.align-right {
  justify-content: flex-end !important;
}

/* ── Promo row mobile ── */
@media (max-width: 767px) {
  .banners.ut2-scroll-container > .ut2-scroll-content {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ut2-banner.ut2-banner-desktop.ut2-scroll-item { min-height: 160px !important; }
  .banners.ut2-scroll-container .ut2-a__bg-banner { min-height: 160px !important; }
  .banners.ut2-scroll-container .ut2-a__title { font-size: 20px !important; }
}

/* ══════════════════════════════════════════════════════════════
   GRID BANNERS — equal-height columns (.banners-grid, not resizable)
   ══════════════════════════════════════════════════════════════ */
.banners-grid:not(.banners-grid-resizable) .row-fluid > div[class^="span"] {
  display: flex !important;
  flex-direction: column !important;
}
.banners-grid:not(.banners-grid-resizable) .row-fluid > div[class^="span"] > * {
  flex: 1 !important;
}
.banners-grid:not(.banners-grid-resizable) .banners.owl-carousel,
.banners-grid:not(.banners-grid-resizable) .banners .owl-wrapper-outer,
.banners-grid:not(.banners-grid-resizable) .banners .owl-wrapper,
.banners-grid:not(.banners-grid-resizable) .banners .owl-item,
.banners-grid:not(.banners-grid-resizable) .ut2-banner,
.banners-grid:not(.banners-grid-resizable) .ut2-a__bg-banner {
  height: 100% !important;
}