/* ============================================================
   SAFQA DESIGN SYSTEM — Full Override Layer
   Built on UniTheme2 base. CSS custom properties + modern UI.
   Version: 3.0 — July 2026
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (Custom Properties)
   Runtime-swappable — dark mode, brand changes, no recompile
   ============================================================ */
:root {
  /* Brand palette */
  --safqa-brand:         #009598;
  --safqa-brand-dark:    #005e60;
  --safqa-brand-light:   #bcf0f0;
  --safqa-brand-faint:   #edf9f9;
  --safqa-accent:        #ff6457;
  --safqa-accent-dark:   #d94d41;

  /* Semantic surface colors */
  --safqa-bg:            #f5f7f7;
  --safqa-surface:       #ffffff;
  --safqa-surface-alt:   #f9fbfb;
  --safqa-border:        #e2eaea;
  --safqa-border-strong: #c8d8d8;

  /* Text */
  --safqa-text-primary:  #0d1b1e;
  --safqa-text-secondary:#4a6060;
  --safqa-text-muted:    #7a9494;
  --safqa-text-inverse:  #ffffff;

  /* Feedback */
  --safqa-success:       #009598;
  --safqa-warning:       #f59e0b;
  --safqa-danger:        #ef4444;
  --safqa-info:          #3b82f6;

  /* Price */
  --safqa-price:         #0d1b1e;
  --safqa-price-old:     #7a9494;
  --safqa-discount:      #ff6457;

  /* Elevation (box-shadow) */
  --safqa-shadow-xs:     0 1px 2px rgba(0,0,0,.06);
  --safqa-shadow-sm:     0 2px 8px rgba(0,0,0,.08);
  --safqa-shadow-md:     0 4px 16px rgba(0,0,0,.10);
  --safqa-shadow-lg:     0 8px 32px rgba(0,0,0,.12);
  --safqa-shadow-focus:  0 0 0 3px rgba(0,149,152,.25);

  /* Radius */
  --safqa-radius-xs:     4px;
  --safqa-radius-sm:     8px;
  --safqa-radius-md:     12px;
  --safqa-radius-lg:     16px;
  --safqa-radius-xl:     24px;
  --safqa-radius-pill:   999px;

  /* Spacing scale */
  --safqa-space-1:       4px;
  --safqa-space-2:       8px;
  --safqa-space-3:       12px;
  --safqa-space-4:       16px;
  --safqa-space-5:       20px;
  --safqa-space-6:       24px;
  --safqa-space-8:       32px;
  --safqa-space-10:      40px;
  --safqa-space-12:      48px;

  /* Typography */
  --safqa-font:          'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
  --safqa-font-arabic:   'Noto Sans Arabic', 'Tahoma', sans-serif;
  --safqa-text-xs:       11px;
  --safqa-text-sm:       13px;
  --safqa-text-base:     14px;
  --safqa-text-md:       15px;
  --safqa-text-lg:       18px;
  --safqa-text-xl:       22px;
  --safqa-text-2xl:      28px;
  --safqa-text-3xl:      36px;
  --safqa-line-tight:    1.3;
  --safqa-line-base:     1.6;

  /* Motion */
  --safqa-ease:          cubic-bezier(.22,.68,0,1.2);
  --safqa-ease-out:      cubic-bezier(0,.55,.45,1);
  --safqa-duration-fast: 120ms;
  --safqa-duration:      200ms;
  --safqa-duration-slow: 350ms;

  /* Layout */
  --safqa-max-width:     1600px;
  --safqa-card-radius:   var(--safqa-radius-md);
  --safqa-card-shadow:   var(--safqa-shadow-sm);
  --safqa-card-shadow-hover: var(--safqa-shadow-md);
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
  --safqa-bg:            #0d1b1e;
  --safqa-surface:       #142427;
  --safqa-surface-alt:   #1a2e32;
  --safqa-border:        #1f3538;
  --safqa-border-strong: #2a4548;
  --safqa-text-primary:  #e8f4f4;
  --safqa-text-secondary:#93b8b8;
  --safqa-text-muted:    #5a8080;
  --safqa-shadow-sm:     0 2px 8px rgba(0,0,0,.4);
  --safqa-shadow-md:     0 4px 16px rgba(0,0,0,.5);
}

/* ---- Dark mode toggle button ---- */
.safqa-dark-toggle {
  position: fixed;
  bottom: var(--safqa-space-6);
  left: var(--safqa-space-6);
  z-index: 9000;
  width: 40px;
  height: 40px;
  border-radius: var(--safqa-radius-pill);
  background: var(--safqa-surface);
  border: 1.5px solid var(--safqa-border);
  box-shadow: var(--safqa-shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background var(--safqa-duration) var(--safqa-ease),
              transform var(--safqa-duration) var(--safqa-ease);
}
.safqa-dark-toggle:hover {
  transform: scale(1.1);
}
html[dir="rtl"] .safqa-dark-toggle {
  left: auto;
  right: var(--safqa-space-6);
}

/* ============================================================
   2. GLOBAL BASE OVERRIDES
   ============================================================ */
body {
  background-color: var(--safqa-bg) !important;
  color: var(--safqa-text-primary) !important;
  font-family: var(--safqa-font) !important;
  font-size: var(--safqa-text-base) !important;
  line-height: var(--safqa-line-base) !important;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--safqa-brand) !important;
  text-decoration: none !important;
  transition: color var(--safqa-duration-fast) !important;
}
a:hover {
  color: var(--safqa-brand-dark) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--safqa-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--safqa-text-muted); }

/* Focus ring */
:focus-visible {
  outline: none !important;
  box-shadow: var(--safqa-shadow-focus) !important;
}

/* ============================================================
   3. HEADER REDESIGN
   ============================================================ */

/* Top announcement bar */
.ut2-top-panel,
.ty-top-panel {
  background: var(--safqa-brand-faint) !important;
  border-bottom: 1px solid var(--safqa-border) !important;
  font-size: var(--safqa-text-sm) !important;
  color: var(--safqa-text-secondary) !important;
  padding: 6px 0 !important;
}

/* Main header */
.ut2-h,
.ty-header,
[class*="ut2-h__main"] {
  background: var(--safqa-surface) !important;
  border-bottom: 1px solid var(--safqa-border) !important;
  box-shadow: var(--safqa-shadow-xs) !important;
}

/* Logo */
.ut2-h__logo img,
.ty-header__logo img {
  filter: none !important;
  max-height: 44px !important;
  width: auto !important;
}

/* Search bar — prominent */
.ut2-h__search,
.ty-search-field {
  background: var(--safqa-bg) !important;
  border: 2px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-pill) !important;
  transition: border-color var(--safqa-duration) !important;
  overflow: hidden;
}
.ut2-h__search:focus-within,
.ty-search-field:focus-within {
  border-color: var(--safqa-brand) !important;
  box-shadow: var(--safqa-shadow-focus) !important;
}
.ut2-h__search input,
.ty-search-field input {
  background: transparent !important;
  font-size: var(--safqa-text-base) !important;
  color: var(--safqa-text-primary) !important;
}
.ut2-h__search button,
.ty-search-field__submit {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border-radius: 0 var(--safqa-radius-pill) var(--safqa-radius-pill) 0 !important;
  transition: background var(--safqa-duration) !important;
}
.ut2-h__search button:hover,
.ty-search-field__submit:hover {
  background: var(--safqa-brand-dark) !important;
}

/* Cart / Account icon buttons */
.ut2-h__cart,
.ut2-h__account,
.ty-header__cart {
  border-radius: var(--safqa-radius-sm) !important;
  transition: background var(--safqa-duration) !important;
}
.ut2-h__cart:hover,
.ut2-h__account:hover {
  background: var(--safqa-brand-faint) !important;
}

/* Navigation menu */
.ut2-h__menu {
  background: var(--safqa-surface) !important;
  border-top: 1px solid var(--safqa-border) !important;
}
.ut2-menu__item > a,
.ty-menu__item-link {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 500 !important;
  color: var(--safqa-text-primary) !important;
  padding: 10px 14px !important;
  border-radius: var(--safqa-radius-xs) !important;
  transition: background var(--safqa-duration-fast), color var(--safqa-duration-fast) !important;
}
.ut2-menu__item:hover > a,
.ty-menu__item-link:hover {
  background: var(--safqa-brand-faint) !important;
  color: var(--safqa-brand) !important;
}
.ut2-menu__item.active > a,
.ty-menu__item.active .ty-menu__item-link {
  color: var(--safqa-brand) !important;
  font-weight: 600 !important;
}

/* Mega dropdown */
.ut2-megamenu,
.ty-menu__submenu {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-lg) !important;
  padding: var(--safqa-space-4) !important;
  margin-top: 4px !important;
}

/* ============================================================
   4. PRODUCT CARD — Full Redesign
   ============================================================ */

/* Card container */
.ut2-gl__item {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-card-radius) !important;
  box-shadow: var(--safqa-card-shadow) !important;
  overflow: hidden !important;
  transition:
    transform var(--safqa-duration) var(--safqa-ease),
    box-shadow var(--safqa-duration) var(--safqa-ease),
    border-color var(--safqa-duration) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.ut2-gl__item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--safqa-card-shadow-hover) !important;
  border-color: var(--safqa-brand-light) !important;
}

/* Image area */
.ut2-gl__image {
  position: relative !important;
  overflow: hidden !important;
  background: var(--safqa-surface-alt) !important;
  border-radius: var(--safqa-card-radius) var(--safqa-card-radius) 0 0 !important;
}
.ut2-gl__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform var(--safqa-duration-slow) var(--safqa-ease-out) !important;
}
.ut2-gl__item:hover .ut2-gl__image img {
  transform: scale(1.04) !important;
}

/* Action overlay buttons (wishlist, compare, quick view) */
.ut2-w-c-q__buttons {
  position: absolute !important;
  top: var(--safqa-space-2) !important;
  right: var(--safqa-space-2) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--safqa-space-1) !important;
  z-index: 10 !important;
  opacity: 0 !important;
  transform: translateX(8px) !important;
  transition:
    opacity var(--safqa-duration) var(--safqa-ease),
    transform var(--safqa-duration) var(--safqa-ease) !important;
}
.ut2-gl__item:hover .ut2-w-c-q__buttons,
.w_c_q-hover.ut2-gl__item:hover .ut2-w-c-q__buttons {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.ut2-w-c-q__buttons .ty-btn,
.ut2-w-c-q__buttons button {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--safqa-radius-pill) !important;
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  box-shadow: var(--safqa-shadow-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: var(--safqa-text-secondary) !important;
  transition: background var(--safqa-duration-fast), color var(--safqa-duration-fast) !important;
}
.ut2-w-c-q__buttons .ty-btn:hover,
.ut2-w-c-q__buttons button:hover {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border-color: var(--safqa-brand) !important;
}

/* RTL: flip action buttons side */
html[dir="rtl"] .ut2-w-c-q__buttons {
  right: auto !important;
  left: var(--safqa-space-2) !important;
  transform: translateX(-8px) !important;
}
html[dir="rtl"] .ut2-gl__item:hover .ut2-w-c-q__buttons {
  transform: translateX(0) !important;
}

/* Content area */
.ut2-gl__content {
  padding: var(--safqa-space-3) var(--safqa-space-4) var(--safqa-space-4) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--safqa-space-2) !important;
}

/* Product name */
.ut2-gl__name {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 500 !important;
  color: var(--safqa-text-primary) !important;
  line-height: var(--safqa-line-tight) !important;
}
.ut2-gl__name a {
  color: inherit !important;
}
.ut2-gl__name a:hover {
  color: var(--safqa-brand) !important;
}

/* Rating */
.ut2-gl__content .ty-stars,
.ut2-gl__content .ut2-stars {
  font-size: 12px !important;
}

/* Price block */
.ut2-gl__price {
  margin-top: auto !important;
}
.ut2-gl__price .ty-price-num,
.ut2-gl__price .ty-price,
.ut2-gl__price bdi {
  font-size: var(--safqa-text-lg) !important;
  font-weight: 700 !important;
  color: var(--safqa-price) !important;
  font-family: var(--safqa-font) !important;
}
.ut2-gl__price .ty-list-price,
.ut2-gl__price .ty-strikethrough {
  font-size: var(--safqa-text-sm) !important;
  color: var(--safqa-price-old) !important;
  text-decoration: line-through !important;
}
.ut2-gl__price .ty-list-discount,
.ut2-gl__price .ty-discount-percent {
  font-size: var(--safqa-text-xs) !important;
  font-weight: 700 !important;
  color: var(--safqa-text-inverse) !important;
  background: var(--safqa-discount) !important;
  border-radius: var(--safqa-radius-xs) !important;
  padding: 2px 6px !important;
}

/* Add to cart button */
.ut2-gl__control .ty-btn,
.ut2-gl__control button[type="submit"] {
  width: 100% !important;
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border: none !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  transition:
    background var(--safqa-duration-fast),
    transform var(--safqa-duration-fast) !important;
  cursor: pointer !important;
}
.ut2-gl__control .ty-btn:hover,
.ut2-gl__control button[type="submit"]:hover {
  background: var(--safqa-brand-dark) !important;
  transform: translateY(-1px) !important;
}

/* Product labels (NEW, SALE, etc.) */
.ut2-gl__item .ty-product-labels,
.ut2-gl__item .ab__sticker,
.ut2-gl__item [class*="ut2-label"] {
  position: absolute !important;
  top: var(--safqa-space-2) !important;
  left: var(--safqa-space-2) !important;
  z-index: 11 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html[dir="rtl"] .ut2-gl__item .ty-product-labels,
html[dir="rtl"] .ut2-gl__item .ab__sticker,
html[dir="rtl"] .ut2-gl__item [class*="ut2-label"] {
  left: auto !important;
  right: var(--safqa-space-2) !important;
}

/* Vendor badge on card */
.ut2-gl__vendor,
.ut2-gl__content .ut2-vendor {
  font-size: var(--safqa-text-xs) !important;
  color: var(--safqa-text-muted) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ut2-gl__vendor::before {
  content: "🏪 ";
  font-style: normal !important;
}

/* Out of stock */
.ut2-gl__item.out-of-stock .ut2-gl__image img {
  opacity: .6 !important;
}
.ut2-gl__item.out-of-stock .ut2-gl__control .ty-btn {
  background: var(--safqa-border-strong) !important;
  color: var(--safqa-text-muted) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ============================================================
   5. PRODUCT PAGE — 3-Column Layout Polish
   ============================================================ */

/* Tab navigation redesign */
.amazon-tabs-section .ty-tabs,
.ty-tabs.cm-j-tabs {
  border: none !important;
  border-bottom: 2px solid var(--safqa-border) !important;
  background: transparent !important;
  display: flex !important;
  gap: var(--safqa-space-1) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.amazon-tabs-section .ty-tabs::-webkit-scrollbar { display: none !important; }
.amazon-tabs-section .ty-tab,
.ty-tabs .ty-tab {
  list-style: none !important;
}
.amazon-tabs-section .ty-tab a,
.amazon-tabs-section .ty-tab span,
.ty-tabs .ty-tab a,
.ty-tabs .ty-tab span {
  display: inline-block !important;
  padding: 10px 20px !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  color: var(--safqa-text-secondary) !important;
  border-radius: var(--safqa-radius-xs) var(--safqa-radius-xs) 0 0 !important;
  white-space: nowrap !important;
  transition: color var(--safqa-duration-fast), background var(--safqa-duration-fast) !important;
  position: relative !important;
  text-decoration: none !important;
}
.amazon-tabs-section .ty-tab a::after,
.ty-tabs .ty-tab a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important; right: 0 !important;
  height: 3px !important;
  border-radius: 2px 2px 0 0 !important;
  background: transparent !important;
  transition: background var(--safqa-duration-fast) !important;
}
.amazon-tabs-section .ty-tab.active a,
.amazon-tabs-section .ty-tab.active span,
.ty-tabs .ty-tab.active a,
.ty-tabs .ty-tab.active span {
  color: var(--safqa-brand) !important;
  background: var(--safqa-brand-faint) !important;
}
.amazon-tabs-section .ty-tab.active a::after,
.ty-tabs .ty-tab.active a::after {
  background: var(--safqa-brand) !important;
}

/* Tab content */
.amazon-tabs-section .ty-tab__content,
.ty-tab__content {
  padding: var(--safqa-space-6) 0 !important;
}

/* Buybox polish */
.buybox-inner-card {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-sm) !important;
  padding: var(--safqa-space-5) !important;
}
.buybox-main-price .ty-price,
.buybox-main-price bdi {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--safqa-price) !important;
  letter-spacing: -0.5px !important;
}
.buybox-stock {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 700 !important;
  color: var(--safqa-success) !important;
}
.buybox-buttons .ty-btn.ty-btn__primary,
.buybox-buttons .cm-form-submit {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border: none !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  width: 100% !important;
  transition: background var(--safqa-duration-fast), transform var(--safqa-duration-fast) !important;
}
.buybox-buttons .ty-btn.ty-btn__primary:hover,
.buybox-buttons .cm-form-submit:hover {
  background: var(--safqa-brand-dark) !important;
  transform: translateY(-1px) !important;
}
.buybox-buttons .ty-btn:not(.ty-btn__primary) {
  background: var(--safqa-surface) !important;
  color: var(--safqa-brand) !important;
  border: 1.5px solid var(--safqa-brand) !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-weight: 600 !important;
  width: 100% !important;
  padding: 10px 24px !important;
  transition: background var(--safqa-duration-fast), color var(--safqa-duration-fast) !important;
}
.buybox-buttons .ty-btn:not(.ty-btn__primary):hover {
  background: var(--safqa-brand-faint) !important;
}

/* ============================================================
   6. CATEGORY PAGE — Filters + Grid
   ============================================================ */

/* Page title */
.ut2-cat-container .ty-mainbox-title,
.cat-view-grid .ty-mainbox-title {
  font-size: var(--safqa-text-2xl) !important;
  font-weight: 800 !important;
  color: var(--safqa-text-primary) !important;
  margin-bottom: var(--safqa-space-4) !important;
}

/* Filter sidebar */
.ty-sidebox,
.ut2-sidebox,
[class*="ut2-s__sidebox"] {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  padding: var(--safqa-space-4) !important;
  margin-bottom: var(--safqa-space-4) !important;
  box-shadow: var(--safqa-shadow-xs) !important;
}
.ty-sidebox__title,
.ut2-sidebox__title {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 700 !important;
  color: var(--safqa-text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: var(--safqa-space-3) !important;
}

/* Filter checkboxes */
.ty-features-filter input[type="checkbox"],
.ty-product-filter input[type="checkbox"] {
  accent-color: var(--safqa-brand) !important;
  width: 16px !important;
  height: 16px !important;
}

/* Active filter tags */
.ty-features-hash,
.ut2-active-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--safqa-brand-faint) !important;
  color: var(--safqa-brand-dark) !important;
  border: 1px solid var(--safqa-brand-light) !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-size: var(--safqa-text-xs) !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  margin: 2px !important;
}

/* Sort & view controls */
.ty-sort-by,
.ut2-sort-by {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: var(--safqa-text-sm) !important;
  color: var(--safqa-text-primary) !important;
}

/* Horizontal filters bar */
.ty-horizontal-filters,
.ut2-horizontal-filters {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  padding: var(--safqa-space-3) var(--safqa-space-4) !important;
  margin-bottom: var(--safqa-space-4) !important;
  box-shadow: var(--safqa-shadow-xs) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--safqa-space-2) !important;
  align-items: center !important;
}

/* ============================================================
   7. BREADCRUMBS
   ============================================================ */
.ty-breadcrumbs {
  padding: var(--safqa-space-3) 0 !important;
  font-size: var(--safqa-text-sm) !important;
}
.ty-breadcrumbs__a {
  color: var(--safqa-text-muted) !important;
}
.ty-breadcrumbs__a:hover {
  color: var(--safqa-brand) !important;
}
.ty-breadcrumbs__current {
  color: var(--safqa-text-secondary) !important;
  font-weight: 500 !important;
}

/* ============================================================
   8. BUTTONS — Global System
   ============================================================ */
.ty-btn {
  border-radius: var(--safqa-radius-pill) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  transition:
    background var(--safqa-duration-fast),
    border-color var(--safqa-duration-fast),
    transform var(--safqa-duration-fast),
    box-shadow var(--safqa-duration-fast) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.ty-btn__primary {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border: 2px solid var(--safqa-brand) !important;
}
.ty-btn__primary:hover {
  background: var(--safqa-brand-dark) !important;
  border-color: var(--safqa-brand-dark) !important;
  transform: translateY(-1px) !important;
}
.ty-btn__secondary {
  background: transparent !important;
  color: var(--safqa-brand) !important;
  border: 2px solid var(--safqa-brand) !important;
}
.ty-btn__secondary:hover {
  background: var(--safqa-brand-faint) !important;
}
.ty-btn:focus-visible {
  box-shadow: var(--safqa-shadow-focus) !important;
}

/* ============================================================
   9. FORMS & INPUTS
   ============================================================ */
.ty-input-text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  background: var(--safqa-surface) !important;
  border: 1.5px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-sm) !important;
  color: var(--safqa-text-primary) !important;
  font-size: var(--safqa-text-sm) !important;
  padding: 9px 12px !important;
  transition: border-color var(--safqa-duration-fast), box-shadow var(--safqa-duration-fast) !important;
  width: 100% !important;
}
.ty-input-text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--safqa-brand) !important;
  box-shadow: var(--safqa-shadow-focus) !important;
  outline: none !important;
}

/* ============================================================
   10. PAGINATION
   ============================================================ */
.ty-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--safqa-space-1) !important;
  padding: var(--safqa-space-6) 0 !important;
}
.ty-pagination__item a,
.ty-pagination__item span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--safqa-radius-sm) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  color: var(--safqa-text-secondary) !important;
  border: 1.5px solid var(--safqa-border) !important;
  background: var(--safqa-surface) !important;
  transition: all var(--safqa-duration-fast) !important;
}
.ty-pagination__item a:hover {
  border-color: var(--safqa-brand) !important;
  color: var(--safqa-brand) !important;
  background: var(--safqa-brand-faint) !important;
}
.ty-pagination__item.active a,
.ty-pagination__item.active span {
  background: var(--safqa-brand) !important;
  border-color: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
}

/* ============================================================
   11. NOTIFICATIONS / TOASTS
   ============================================================ */
.ty-notification,
[class*="cm-notification"] {
  border-radius: var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-lg) !important;
  border-left: 4px solid var(--safqa-brand) !important;
  background: var(--safqa-surface) !important;
  color: var(--safqa-text-primary) !important;
  font-size: var(--safqa-text-sm) !important;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
.ty-footer,
.ut2-footer {
  background: var(--safqa-text-primary) !important;
  color: var(--safqa-text-inverse) !important;
  border-top: 3px solid var(--safqa-brand) !important;
  padding: var(--safqa-space-10) 0 var(--safqa-space-6) !important;
}
.ty-footer a,
.ut2-footer a {
  color: rgba(255,255,255,.65) !important;
  font-size: var(--safqa-text-sm) !important;
  transition: color var(--safqa-duration-fast) !important;
}
.ty-footer a:hover,
.ut2-footer a:hover {
  color: var(--safqa-brand-light) !important;
}
.ty-footer__title,
.ut2-footer__title {
  color: var(--safqa-text-inverse) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: var(--safqa-space-4) !important;
}
.ty-footer__bottom,
.ut2-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  margin-top: var(--safqa-space-8) !important;
  padding-top: var(--safqa-space-4) !important;
  font-size: var(--safqa-text-sm) !important;
  color: rgba(255,255,255,.45) !important;
}

/* ============================================================
   13. HOMEPAGE ENHANCEMENTS
   ============================================================ */

/* Trust bar */
.safqa-trust-bar {
  background: var(--safqa-brand-faint);
  border-top: 1px solid var(--safqa-border);
  border-bottom: 1px solid var(--safqa-border);
  padding: var(--safqa-space-3) 0;
}
.safqa-trust-bar__inner {
  display: flex;
  justify-content: center;
  gap: var(--safqa-space-8);
  flex-wrap: wrap;
  max-width: var(--safqa-max-width);
  margin: 0 auto;
  padding: 0 var(--safqa-space-6);
}
.safqa-trust-item {
  display: flex;
  align-items: center;
  gap: var(--safqa-space-2);
  font-size: var(--safqa-text-sm);
  font-weight: 600;
  color: var(--safqa-brand-dark);
}
.safqa-trust-item__icon {
  font-size: 20px;
}

/* Section headings */
.safqa-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--safqa-space-4);
  padding-bottom: var(--safqa-space-3);
  border-bottom: 2px solid var(--safqa-border);
}
.safqa-section-heading__title {
  font-size: var(--safqa-text-xl) !important;
  font-weight: 800 !important;
  color: var(--safqa-text-primary) !important;
  position: relative !important;
}
.safqa-section-heading__title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -14px !important;
  left: 0 !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--safqa-brand) !important;
  border-radius: 2px !important;
}
html[dir="rtl"] .safqa-section-heading__title::after {
  left: auto !important;
  right: 0 !important;
}
.safqa-section-heading__link {
  font-size: var(--safqa-text-sm) !important;
  color: var(--safqa-brand) !important;
  font-weight: 600 !important;
}

/* Banners */
.ut2-banner .ut2-a__img img {
  border-radius: var(--safqa-radius-lg) !important;
  overflow: hidden !important;
}
.ut2-banner .ut2-a__title {
  font-size: var(--safqa-text-2xl) !important;
  font-weight: 800 !important;
  line-height: var(--safqa-line-tight) !important;
}

/* ============================================================
   14. CART & CHECKOUT POLISH
   ============================================================ */

/* Cart summary */
.ty-cart-content {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-sm) !important;
}

/* Order total row */
.ty-price-total {
  font-size: var(--safqa-text-xl) !important;
  font-weight: 800 !important;
  color: var(--safqa-price) !important;
}

/* Checkout step indicators */
.ty-checkout__steps {
  background: var(--safqa-surface) !important;
  border-radius: var(--safqa-radius-md) !important;
  padding: var(--safqa-space-4) !important;
  box-shadow: var(--safqa-shadow-xs) !important;
}

/* ============================================================
   15. MOBILE BOTTOM NAV
   ============================================================ */
@media (max-width: 768px) {
  .safqa-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9990 !important;
    background: var(--safqa-surface) !important;
    border-top: 1px solid var(--safqa-border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.10) !important;
    display: flex !important;
    padding: var(--safqa-space-2) 0 !important;
    padding-bottom: max(var(--safqa-space-2), env(safe-area-inset-bottom)) !important;
  }
  .safqa-bottom-nav__item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: var(--safqa-space-1) !important;
    color: var(--safqa-text-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color var(--safqa-duration-fast) !important;
    cursor: pointer !important;
  }
  .safqa-bottom-nav__item.active,
  .safqa-bottom-nav__item:hover {
    color: var(--safqa-brand) !important;
  }
  .safqa-bottom-nav__icon {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .safqa-bottom-nav__badge {
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
    background: var(--safqa-accent) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: var(--safqa-radius-pill) !important;
    min-width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
  }
  /* Push page content above bottom nav */
  body {
    padding-bottom: 68px !important;
  }
}

/* ============================================================
   16. LOADING SKELETON (Perceived Performance)
   ============================================================ */
@keyframes safqa-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
.safqa-skeleton {
  background: var(--safqa-border) !important;
  border-radius: var(--safqa-radius-xs) !important;
  animation: safqa-skeleton-pulse 1.5s ease-in-out infinite !important;
}
.safqa-skeleton--card {
  height: 280px;
  border-radius: var(--safqa-card-radius) !important;
}
.safqa-skeleton--text {
  height: 12px;
  width: 80%;
}
.safqa-skeleton--price {
  height: 20px;
  width: 40%;
}

/* ============================================================
   17. DARK MODE — COMPONENT OVERRIDES
   ============================================================ */
[data-theme="dark"] .ut2-gl__item,
[data-theme="dark"] .buybox-inner-card,
[data-theme="dark"] .ty-sidebox {
  background: var(--safqa-surface) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ut2-h,
[data-theme="dark"] [class*="ut2-h__main"] {
  background: var(--safqa-surface) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ut2-megamenu,
[data-theme="dark"] .ty-menu__submenu {
  background: var(--safqa-surface) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ty-footer,
[data-theme="dark"] .ut2-footer {
  background: #060e10 !important;
}
[data-theme="dark"] .ut2-top-panel {
  background: var(--safqa-surface) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--safqa-surface-alt) !important;
  border-color: var(--safqa-border) !important;
  color: var(--safqa-text-primary) !important;
}

/* ============================================================
   18. RTL DESIGN SYSTEM ADJUSTMENTS
   ============================================================ */
html[dir="rtl"] {
  font-family: var(--safqa-font-arabic) !important;
}
html[dir="rtl"] .safqa-section-heading {
  flex-direction: row-reverse;
}
html[dir="rtl"] .ty-pagination {
  flex-direction: row-reverse;
}
html[dir="rtl"] .ut2-footer__title,
html[dir="rtl"] .ty-footer__title {
  text-align: right !important;
}

/* RTL title line decoration — span bg must match page bg */
html[dir="rtl"] .ut2-title-line-decoration > span {
  background: var(--safqa-bg) !important;
}

/* ============================================================
   19. ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */
@keyframes safqa-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes safqa-slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes safqa-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

.ut2-gl__item {
  animation: safqa-fadeIn var(--safqa-duration-slow) var(--safqa-ease-out) both;
}

/* Staggered card entrance (first 6 cards) */
.ut2-gl__wrap .ty-column:nth-child(1) .ut2-gl__item { animation-delay: 0ms; }
.ut2-gl__wrap .ty-column:nth-child(2) .ut2-gl__item { animation-delay: 40ms; }
.ut2-gl__wrap .ty-column:nth-child(3) .ut2-gl__item { animation-delay: 80ms; }
.ut2-gl__wrap .ty-column:nth-child(4) .ut2-gl__item { animation-delay: 120ms; }
.ut2-gl__wrap .ty-column:nth-child(5) .ut2-gl__item { animation-delay: 160ms; }
.ut2-gl__wrap .ty-column:nth-child(6) .ut2-gl__item { animation-delay: 200ms; }

.ut2-megamenu,
.ty-menu__submenu {
  animation: safqa-slideDown var(--safqa-duration) var(--safqa-ease-out) both;
}

/* Add to cart success pulse */
.ty-btn--added,
.ty-btn.cm-btn-add-to-cart-success {
  animation: safqa-pulse 400ms var(--safqa-ease) !important;
  background: var(--safqa-success) !important;
}

/* ============================================================
   20. PRINT STYLES
   ============================================================ */
@media print {
  .ut2-h,
  .ty-footer,
  .safqa-bottom-nav,
  .safqa-dark-toggle,
  .ut2-w-c-q__buttons,
  .buybox-buttons {
    display: none !important;
  }
  .ut2-amazon-layout-wrapper {
    grid-template-columns: 1fr 2fr !important;
  }
}

/* ============================================================
   21. SECTION TITLE SYSTEM
   Work WITH UniTheme2's native title system, don't fight it.
   UniTheme2 ut2-title-line-decoration draws a full-width HR behind
   the title text. The > span gets a bg color to sit on top.
   We just upgrade the font weight, color, and mark color.
   ============================================================ */

/* Enhance title font without breaking UniTheme2's layout */
.ty-mainbox-title {
  font-weight: 700 !important;
  color: var(--safqa-text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* The horizontal rule color — use brand border */
.ut2-title-line-decoration::after {
  border-bottom-color: var(--safqa-brand-light) !important;
  border-bottom-width: 2px !important;
}

/* Span inside line-decoration: sits on the line with bg color */
.ut2-title-line-decoration > span {
  background: var(--safqa-bg) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
[data-theme="dark"] .ut2-title-line-decoration > span {
  background: var(--safqa-bg) !important;
}

/* mark word — UniTheme2 already uses --color-main; we align to brand */
[class*="title"] mark {
  color: var(--safqa-brand) !important;
  background: none !important;
  font-weight: inherit !important;
}

/* Opacity variant — "The best deals of the day" subtitle style */
.ut2-title-opacity {
  opacity: 1 !important;
  color: var(--safqa-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 1em !important;
}
.ut2-title-opacity mark {
  color: var(--safqa-brand) !important;
  font-weight: 700 !important;
}

/* ============================================================
   22. BANNER CTA BUTTON — ut2-a__button
   ============================================================ */
.ut2-a__button a,
.ut2-a__button .ty-btn,
.ut2-banner .ut2-a__button a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border: 2px solid transparent !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  transition:
    background var(--safqa-duration-fast),
    transform var(--safqa-duration-fast),
    box-shadow var(--safqa-duration-fast) !important;
  box-shadow: 0 4px 14px rgba(0,149,152,.35) !important;
}
.ut2-a__button a:hover,
.ut2-a__button .ty-btn:hover,
.ut2-banner .ut2-a__button a:hover {
  background: var(--safqa-brand-dark) !important;
  color: var(--safqa-text-inverse) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,149,152,.45) !important;
}

/* Banner text polish */
.ut2-a__title {
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}
.ut2-a__title mark {
  background: none !important;
  color: var(--safqa-brand-light) !important;
  font-style: normal !important;
}
.ut2-a__descr,
.ut2-a__description {
  font-size: var(--safqa-text-md) !important;
  line-height: var(--safqa-line-base) !important;
  opacity: .88 !important;
}

/* Banner rounded corners */
.ut2-banner,
.ut2-banner .ut2-a__img,
.ut2-banner .ut2-a__bg-banner {
  border-radius: var(--safqa-radius-lg) !important;
  overflow: hidden !important;
}

/* ============================================================
   23. MEGA MENU — ut2-fm / ut2-lfl category tiles
   ============================================================ */

/* Mega menu container */
.ut2-fm {
  background: var(--safqa-surface) !important;
  border-bottom: 2px solid var(--safqa-brand-faint) !important;
  box-shadow: none !important;
}

/* Flyout wrapper */
.ut2-fmw {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: 0 0 var(--safqa-radius-md) var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-lg) !important;
}

/* Category tile in mega menu */
.ut2-lfl {
  border-radius: var(--safqa-radius-sm) !important;
  transition: background var(--safqa-duration-fast) !important;
  padding: var(--safqa-space-2) !important;
}
.ut2-lfl:hover {
  background: var(--safqa-brand-faint) !important;
}
.ut2-lfl__head {
  margin: var(--safqa-space-1) 0 0 !important;
}
.ut2-lfl__head__name {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  color: var(--safqa-text-primary) !important;
}
.ut2-lfl__head__d {
  font-size: var(--safqa-text-xs) !important;
  color: var(--safqa-text-muted) !important;
}
.ut2-lfl__head__t {
  font-size: var(--safqa-text-xs) !important;
  color: var(--safqa-brand) !important;
  font-weight: 600 !important;
}

/* Sub-list items */
.ut2-lsl a,
.ut2-lsl__more-link {
  font-size: var(--safqa-text-sm) !important;
  color: var(--safqa-text-secondary) !important;
  padding: 4px var(--safqa-space-2) !important;
  border-radius: var(--safqa-radius-xs) !important;
  display: block !important;
  transition: background var(--safqa-duration-fast), color var(--safqa-duration-fast) !important;
}
.ut2-lsl a:hover,
.ut2-lsl__more-link:hover {
  background: var(--safqa-brand-faint) !important;
  color: var(--safqa-brand) !important;
}
.ut2-lsl__more-link {
  color: var(--safqa-brand) !important;
  font-weight: 600 !important;
  font-size: var(--safqa-text-xs) !important;
}

/* Menu top-level items */
.ut2-fmbtm a,
.ut2-fm > a,
.ut2-fm .ut2-top-bottom a {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  color: var(--safqa-text-primary) !important;
  padding: 10px 12px !important;
  border-radius: var(--safqa-radius-xs) !important;
  transition: color var(--safqa-duration-fast), background var(--safqa-duration-fast) !important;
  display: inline-block !important;
}
.ut2-fmbtm a:hover,
.ut2-fm .ut2-top-bottom a:hover {
  color: var(--safqa-brand) !important;
  background: var(--safqa-brand-faint) !important;
}

/* ============================================================
   24. PRODUCT SCROLLER TABS (Homepage blocks)
   abt__ut2_grid_tabs items + ut2-scroll arrows
   ============================================================ */

/* Tab pills on product grids */
.abt__ut2_grid_tabs {
  background: transparent !important;
  border-bottom: none !important;
}
.abt__ut2_grid_tabs a,
.abt__ut2_grid_tabs span {
  display: inline-block !important;
  padding: 6px 16px !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  color: var(--safqa-text-secondary) !important;
  border: 1.5px solid var(--safqa-border) !important;
  background: var(--safqa-surface) !important;
  transition: all var(--safqa-duration-fast) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.abt__ut2_grid_tabs.active a,
.abt__ut2_grid_tabs.active span {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border-color: var(--safqa-brand) !important;
  box-shadow: 0 2px 8px rgba(0,149,152,.3) !important;
}
.abt__ut2_grid_tabs a:hover,
.abt__ut2_grid_tabs span:hover {
  border-color: var(--safqa-brand) !important;
  color: var(--safqa-brand) !important;
  background: var(--safqa-brand-faint) !important;
}

/* Horizontal scroll arrows */
.ut2-scroll-left,
.ut2-scroll-right {
  background: var(--safqa-surface) !important;
  border: 1.5px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-pill) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--safqa-shadow-sm) !important;
  cursor: pointer !important;
  transition: background var(--safqa-duration-fast), border-color var(--safqa-duration-fast) !important;
  z-index: 5 !important;
}
.ut2-scroll-left:hover,
.ut2-scroll-right:hover {
  background: var(--safqa-brand) !important;
  border-color: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
}
.ut2-scroll-left span,
.ut2-scroll-right span {
  color: inherit !important;
}

/* ============================================================
   25. MINI-CART DROPDOWN
   ut2-top-cart-content / ty-cart-items
   ============================================================ */
.ut2-top-cart-content,
.ty-dropdown-box__content--cart {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-lg) !important;
  padding: var(--safqa-space-4) !important;
  min-width: 320px !important;
}
.ty-minicart-count {
  background: var(--safqa-accent) !important;
  color: var(--safqa-text-inverse) !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
}
.ty-minicart-count.empty {
  display: none !important;
}
.ty-cart-items__empty {
  text-align: center !important;
  color: var(--safqa-text-muted) !important;
  font-size: var(--safqa-text-sm) !important;
  padding: var(--safqa-space-6) !important;
}

/* ============================================================
   26. ACCOUNT DROPDOWN
   ut2-top-my-account / ty-dropdown-box
   ============================================================ */
.ty-dropdown-box__content {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-md) !important;
  box-shadow: var(--safqa-shadow-lg) !important;
  padding: var(--safqa-space-2) 0 !important;
}
.ty-dropdown-box__item {
  padding: var(--safqa-space-2) var(--safqa-space-4) !important;
  transition: background var(--safqa-duration-fast) !important;
}
.ty-dropdown-box__item:hover {
  background: var(--safqa-brand-faint) !important;
}
.ty-dropdown-box__title {
  padding: var(--safqa-space-3) var(--safqa-space-4) var(--safqa-space-2) !important;
  font-size: var(--safqa-text-xs) !important;
  font-weight: 700 !important;
  color: var(--safqa-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  border-bottom: 1px solid var(--safqa-border) !important;
}

/* ============================================================
   27. LANGUAGE / CURRENCY SELECTOR
   ut2-languages / ut2-currencies
   ============================================================ */
.ut2-languages .ty-select-block,
.ut2-currencies .ty-select-block {
  background: var(--safqa-surface) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-sm) !important;
  box-shadow: var(--safqa-shadow-md) !important;
}
.ut2-languages .ty-select-block__list-a,
.ut2-currencies .ty-select-block__list-a {
  padding: 6px var(--safqa-space-3) !important;
  font-size: var(--safqa-text-sm) !important;
  transition: background var(--safqa-duration-fast) !important;
}
.ut2-languages .ty-select-block__list-a:hover,
.ut2-currencies .ty-select-block__list-a:hover {
  background: var(--safqa-brand-faint) !important;
  color: var(--safqa-brand) !important;
}

/* ============================================================
   28. PRODUCT GRID POLISH — utl2-gl__body, ut2-gl__amount
   ============================================================ */

/* Card body hover overlay — subtle gradient on image */
.ut2-gl__body {
  position: relative !important;
}
.ut2-gl__image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(0deg, rgba(0,0,0,.04) 0%, transparent 40%) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  transition: opacity var(--safqa-duration) !important;
}
.ut2-gl__item:hover .ut2-gl__image::after {
  background: linear-gradient(0deg, rgba(0,0,0,.08) 0%, transparent 40%) !important;
}

/* Stock indicator */
.ut2-gl__amount {
  font-size: var(--safqa-text-xs) !important;
  color: var(--safqa-text-muted) !important;
}
.ut2-gl__amount:not(:empty) {
  background: var(--safqa-brand-faint) !important;
  color: var(--safqa-brand-dark) !important;
  border-radius: var(--safqa-radius-xs) !important;
  padding: 2px 6px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Features list inside card */
.ut2-features-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: var(--safqa-space-2) !important;
}
.ut2-features-list .ty-features-list__item {
  font-size: var(--safqa-text-xs) !important;
  background: var(--safqa-surface-alt) !important;
  border: 1px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-xs) !important;
  padding: 2px 6px !important;
  color: var(--safqa-text-secondary) !important;
}

/* Bottom section inside card */
.ut2-gl__bottom {
  margin-top: auto !important;
}

/* ============================================================
   29. SEARCH BAR — REAL HTML CLASSES
   ty-search-block / ty-search-block__input
   ============================================================ */
.ty-search-block {
  position: relative !important;
}
.ty-search-block__input {
  background: var(--safqa-bg) !important;
  border: 2px solid var(--safqa-border) !important;
  border-radius: var(--safqa-radius-pill) !important;
  padding: 10px 48px 10px 20px !important;
  font-size: var(--safqa-text-base) !important;
  color: var(--safqa-text-primary) !important;
  width: 100% !important;
  transition: border-color var(--safqa-duration), box-shadow var(--safqa-duration) !important;
}
html[dir="rtl"] .ty-search-block__input {
  padding: 10px 20px 10px 48px !important;
}
.ty-search-block__input:focus {
  border-color: var(--safqa-brand) !important;
  box-shadow: var(--safqa-shadow-focus) !important;
  background: var(--safqa-surface) !important;
  outline: none !important;
}
.ty-search-magnifier {
  background: var(--safqa-brand) !important;
  border-radius: var(--safqa-radius-pill) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--safqa-duration-fast) !important;
}
.ty-search-magnifier:hover {
  background: var(--safqa-brand-dark) !important;
}

/* Search icon button (mobile toggle) */
.ut2-btn-search {
  background: transparent !important;
  border: none !important;
  color: var(--safqa-text-secondary) !important;
  padding: var(--safqa-space-2) !important;
  border-radius: var(--safqa-radius-sm) !important;
  transition: color var(--safqa-duration-fast), background var(--safqa-duration-fast) !important;
  cursor: pointer !important;
}
.ut2-btn-search:hover {
  color: var(--safqa-brand) !important;
  background: var(--safqa-brand-faint) !important;
}

/* ============================================================
   30. GEOLOCATION BAR
   ty-geo-maps__geolocation
   ============================================================ */
.ty-geo-maps__geolocation {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ty-geo-maps__geolocation__opener {
  color: var(--safqa-text-secondary) !important;
  font-size: var(--safqa-text-sm) !important;
  transition: color var(--safqa-duration-fast) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ty-geo-maps__geolocation__opener:hover {
  color: var(--safqa-brand) !important;
}
.ty-geo-maps__geolocation__location {
  font-weight: 600 !important;
  color: var(--safqa-brand) !important;
}

/* ============================================================
   31. PAGE-LEVEL LAYOUT CONTAINER
   ut2-wrap-container / ut2-center — let UniTheme2 handle layout,
   we only add max-width constraint if missing.
   ============================================================ */
.ut2-center {
  max-width: var(--safqa-max-width) !important;
  margin-inline: auto !important;
}

/* ============================================================
   32. POPUP / MODAL POLISH
   ut2-popup-box-title
   ============================================================ */
.ut2-popup-box-title {
  font-size: var(--safqa-text-lg) !important;
  font-weight: 700 !important;
  color: var(--safqa-text-primary) !important;
  border-bottom: 2px solid var(--safqa-border) !important;
  padding-bottom: var(--safqa-space-3) !important;
  margin-bottom: var(--safqa-space-4) !important;
}
.ut2-sw {
  background: var(--safqa-surface) !important;
  box-shadow: var(--safqa-shadow-lg) !important;
}
.ut2-btn-close {
  color: var(--safqa-text-muted) !important;
  transition: color var(--safqa-duration-fast) !important;
  cursor: pointer !important;
}
.ut2-btn-close:hover {
  color: var(--safqa-accent) !important;
}

/* ============================================================
   33. HOMEPAGE LOGO
   ============================================================ */
.ty-logo-container {
  display: inline-flex !important;
  align-items: center !important;
}
.ty-logo-container__image {
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: opacity var(--safqa-duration) !important;
}
.ty-logo-container:hover .ty-logo-container__image {
  opacity: .85 !important;
}

/* ============================================================
   34. GLOBAL TOP HELPER CONTAINER
   ty-helper-container
   ============================================================ */
.ty-helper-container {
  max-width: var(--safqa-max-width) !important;
  margin: 0 auto !important;
  padding: 4px var(--safqa-space-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--safqa-space-4) !important;
  font-size: var(--safqa-text-xs) !important;
}
html[dir="rtl"] .ty-helper-container {
  flex-direction: row-reverse !important;
}

/* ============================================================
   35. STICKY PANEL (header scroll sentinel)
   ============================================================ */
.ut2-sticky-panel__wrap {
  background: var(--safqa-surface) !important;
  border-bottom: 1px solid var(--safqa-border) !important;
  box-shadow: var(--safqa-shadow-sm) !important;
}

/* ============================================================
   36. DARK MODE — Extended Component Coverage
   ============================================================ */
[data-theme="dark"] .safqa-trust-bar {
  background: var(--safqa-surface-alt) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] [class*="title"] mark {
  color: var(--safqa-brand-light) !important;
}
[data-theme="dark"] .ut2-title-line-decoration::after {
  border-bottom-color: var(--safqa-border-strong) !important;
}
[data-theme="dark"] .abt__ut2_grid_tabs a,
[data-theme="dark"] .abt__ut2_grid_tabs span {
  background: var(--safqa-surface-alt) !important;
  border-color: var(--safqa-border) !important;
  color: var(--safqa-text-secondary) !important;
}
[data-theme="dark"] .abt__ut2_grid_tabs.active a,
[data-theme="dark"] .abt__ut2_grid_tabs.active span {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
}
[data-theme="dark"] .ut2-scroll-left,
[data-theme="dark"] .ut2-scroll-right {
  background: var(--safqa-surface-alt) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ty-dropdown-box__content,
[data-theme="dark"] .ut2-top-cart-content {
  background: var(--safqa-surface) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ty-search-block__input {
  background: var(--safqa-surface-alt) !important;
  border-color: var(--safqa-border) !important;
  color: var(--safqa-text-primary) !important;
}
[data-theme="dark"] .ut2-fmw {
  background: var(--safqa-surface) !important;
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ut2-lfl:hover {
  background: var(--safqa-surface-alt) !important;
}
[data-theme="dark"] .ut2-lfl__head__name {
  color: var(--safqa-text-primary) !important;
}
[data-theme="dark"] .ut2-gl__image::after {
  background: linear-gradient(0deg, rgba(0,0,0,.2) 0%, transparent 40%) !important;
}
[data-theme="dark"] .ut2-features-list .ty-features-list__item {
  background: var(--safqa-surface-alt) !important;
  border-color: var(--safqa-border) !important;
  color: var(--safqa-text-secondary) !important;
}
[data-theme="dark"] .ut2-gl__amount:not(:empty) {
  background: rgba(0,149,152,.15) !important;
  color: var(--safqa-brand-light) !important;
}

/* ============================================================
   37. RESPONSIVE — TABLET (769px–1100px)
   ============================================================ */
@media (max-width: 1100px) {
  .ut2-biggest-size-title {
    font-size: var(--safqa-text-xl) !important;
  }
  .ut2-top-cart-content,
  .ty-dropdown-box__content--cart {
    min-width: 280px !important;
  }
}

/* ============================================================
   38. MOBILE OVERRIDES (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Tighten section title sizes */
  .ty-mainbox-title {
    font-size: var(--safqa-text-lg) !important;
  }
  .ut2-biggest-size-title {
    font-size: var(--safqa-text-xl) !important;
  }

  /* Banner CTAs full-width on small screens */
  .ut2-a__button {
    display: block !important;
    text-align: center !important;
  }
  .ut2-a__button a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Scroll arrows smaller */
  .ut2-scroll-left,
  .ut2-scroll-right {
    width: 30px !important;
    height: 30px !important;
  }

  /* Trust bar: stack on very small */
  @media (max-width: 480px) {
    .safqa-trust-bar__inner {
      gap: var(--safqa-space-4) !important;
      justify-content: flex-start !important;
    }
    .safqa-trust-item {
      width: 45% !important;
    }
  }
}

/* ============================================================
   39. HOVER PERFORMANCE — GPU-hinted animating elements
   ============================================================ */
.ut2-gl__item,
.ut2-gl__image img,
.ut2-w-c-q__buttons,
.ut2-scroll-left,
.ut2-scroll-right,
.ty-btn,
.ut2-lfl {
  will-change: transform;
}
.ut2-gl__item,
.ut2-gl__image img,
.ut2-w-c-q__buttons {
  backface-visibility: hidden;
}

/* ============================================================
   40. PRINT ADDITIONS
   ============================================================ */
@media print {
  .safqa-trust-bar,
  .ut2-bottom-nav,
  .abt__ut2_grid_tabs {
    display: none !important;
  }
}

/* ============================================================
   48. HERO BANNER CTA BUTTON ONLY
   Only style the CTA button — never touch layout/position of
   the 600px hero banners as UniTheme2 manages that internally.
   ============================================================ */

/* Hero banner CTA — glass pill button */
.homepage-banners .ut2-a__button .ty-btn__outline,
.ut2-banner[style*="--ab-banner-height: 600px"] .ut2-a__button .ty-btn__outline {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255,255,255,.6) !important;
  color: #ffffff !important;
  border-radius: var(--safqa-radius-pill) !important;
  font-weight: 700 !important;
  transition: background var(--safqa-duration-fast), border-color var(--safqa-duration-fast) !important;
}
.homepage-banners .ut2-a__button .ty-btn__outline:hover,
.ut2-banner[style*="--ab-banner-height: 600px"] .ut2-a__button .ty-btn__outline:hover {
  background: rgba(255,255,255,.28) !important;
  border-color: #ffffff !important;
}

/* ============================================================
   49. HEADER POLISH
   Minimal — only color/shadow, never touch layout/display/position
   ============================================================ */

/* Top panel bar — subtle teal tint */
.tygh-top-panel {
  background: var(--safqa-brand-faint) !important;
  border-bottom: 1px solid var(--safqa-border) !important;
}

/* Main header — white bg + subtle shadow */
.tygh-header {
  background: var(--safqa-surface) !important;
  box-shadow: var(--safqa-shadow-xs) !important;
  border-bottom: 1px solid var(--safqa-border) !important;
}

/* "Safqa Now" pill — style only the inner span, NOT the wrapper */
.ut2-sp-n > span {
  background: var(--safqa-brand) !important;
  color: var(--safqa-text-inverse) !important;
  border-radius: var(--safqa-radius-pill) !important;
  padding: 6px 14px !important;
  font-size: var(--safqa-text-sm) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background var(--safqa-duration-fast) !important;
}
.ut2-sp-n > span:hover {
  background: var(--safqa-brand-dark) !important;
}

/* ============================================================
   50. TRUST BAR — UPGRADED
   ============================================================ */
.safqa-trust-bar {
  background: var(--safqa-surface) !important;
  border-bottom: 2px solid var(--safqa-border) !important;
  padding: 10px 0 !important;
}
.safqa-trust-bar__inner {
  gap: var(--safqa-space-6) !important;
  padding: 0 var(--safqa-space-8) !important;
}
.safqa-trust-item {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 600 !important;
  color: var(--safqa-text-secondary) !important;
  gap: var(--safqa-space-2) !important;
}
.safqa-trust-item__icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}
[data-theme="dark"] .safqa-trust-bar {
  background: var(--safqa-surface) !important;
  border-color: var(--safqa-border) !important;
}

/* ============================================================
   41. CATEGORY TILE BANNERS
   ONLY target 250px height banners (category grid tiles).
   Hero banners (600px) are left completely untouched.
   ============================================================ */

/* Target ONLY the 250px category tiles by their inline height */
.ut2-banner[style*="--ab-banner-height: 250px"] {
  border-radius: var(--safqa-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--safqa-shadow-xs) !important;
  border: 1px solid var(--safqa-border) !important;
  transition:
    transform var(--safqa-duration) var(--safqa-ease),
    box-shadow var(--safqa-duration) var(--safqa-ease) !important;
}
.ut2-banner[style*="--ab-banner-height: 250px"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--safqa-shadow-md) !important;
  border-color: var(--safqa-brand-light) !important;
}
.ut2-banner[style*="--ab-banner-height: 250px"] .ut2-a__img img {
  transition: transform var(--safqa-duration-slow) var(--safqa-ease-out) !important;
}
.ut2-banner[style*="--ab-banner-height: 250px"]:hover .ut2-a__img img {
  transform: scale(1.05) !important;
}

/* Category tile title — weight-400 class is the label under the image */
.ut2-banner[style*="--ab-banner-height: 250px"] .ut2-a__title.weight-400 {
  font-weight: 700 !important;
  font-size: var(--safqa-text-sm) !important;
  letter-spacing: .01em !important;
}

/* Dark mode */
[data-theme="dark"] .ut2-banner[style*="--ab-banner-height: 250px"] {
  border-color: var(--safqa-border) !important;
}
[data-theme="dark"] .ut2-banner[style*="--ab-banner-height: 250px"]:hover {
  border-color: var(--safqa-brand) !important;
}

/* Trust bar — improved visual weight */
.safqa-trust-bar {
  background: linear-gradient(135deg, var(--safqa-brand-faint) 0%, #f0fafa 100%) !important;
  border-bottom: 1px solid var(--safqa-border) !important;
  padding: var(--safqa-space-3) 0 !important;
}
.safqa-trust-item__icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.safqa-trust-item {
  font-size: var(--safqa-text-xs) !important;
  font-weight: 700 !important;
  color: var(--safqa-text-secondary) !important;
  letter-spacing: .01em !important;
}

/* ============================================================
   42. HEADER ICON BUTTONS — ut2-icon-use_icon_cart etc.
   ============================================================ */
.ut2-icon-use_icon_cart,
.ut2-icon-outline-account-circle,
.ut2-icon-outline-menu {
  font-size: 22px !important;
  color: var(--safqa-text-secondary) !important;
  transition: color var(--safqa-duration-fast) !important;
}
.ut2-icon-use_icon_cart:hover,
.ut2-icon-outline-account-circle:hover {
  color: var(--safqa-brand) !important;
}

/* Cart counter badge on header */
.ut2-rb .ty-minicart-count,
.ut2-top-cart-content + .ty-minicart-count {
  position: absolute !important;
  top: -6px !important;
  inset-inline-end: -6px !important;
}

/* ============================================================
   43. GRID ROW SPACING — row-fluid blocks
   ============================================================ */
/* Add comfortable vertical rhythm between content blocks */
.row-fluid + .row-fluid {
  margin-top: 0 !important;
}
.ut2-bottom .row-fluid {
  margin-bottom: var(--safqa-space-3) !important;
}

/* Category grid columns — equal height tiles */
.row-fluid .span4 > .ut2-banner,
.row-fluid .span3 > .ut2-banner {
  height: 100% !important;
}

/* ============================================================
   44. PAGE-WIDE BACKGROUND GRADIENT
   Subtle depth on the page body
   ============================================================ */
body {
  background: linear-gradient(180deg,
    var(--safqa-brand-faint) 0px,
    var(--safqa-bg) 320px) !important;
  background-attachment: fixed !important;
}
[data-theme="dark"] body {
  background: linear-gradient(180deg,
    #0a1618 0px,
    var(--safqa-bg) 320px) !important;
}

/* ============================================================
   45. FILL--COLOR SECTION OVERRIDE
   The coral "Explore current promotions" block uses
   CS-Cart's fill-color-box system (--fill-color CSS var).
   We override it to use our brand teal instead of coral #eb560c.
   ============================================================ */
[class*="fill--color"] {
  --fill-color: var(--safqa-brand) !important;
  --fill-color-inverse: #ffffff !important;
}
.container-fluid-row-full-width[class*="fill--color"],
.container-fluid-row.fill--color {
  background: var(--safqa-brand) !important;
}
/* Title text inside fill--color block */
[class*="fill--color"] .ty-mainbox-title,
[class*="fill--color"] .ut2-title-line-decoration > span {
  color: #ffffff !important;
  background: var(--safqa-brand) !important;
}
[class*="fill--color"] .ut2-title-line-decoration::after {
  border-bottom-color: rgba(255,255,255,.3) !important;
}
[class*="fill--color"] [class*="title"] mark {
  color: var(--safqa-brand-light) !important;
}

/* ============================================================
   46. CATEGORY PAGE — TITLE AREA
   ============================================================ */
/* Fix section heading line decoration bg on non-home pages */
.ut2-cat-container .ut2-title-line-decoration > span,
.ty-product-list .ut2-title-line-decoration > span {
  background: var(--safqa-bg) !important;
}

/* ============================================================
   47. SECTION TITLE — CATEGORY PAGES (safqa custom heading)
   ============================================================ */
.safqa-section-heading__title::after {
  display: none !important;
}
.safqa-section-heading {
  border-bottom: 2px solid var(--safqa-border) !important;
  padding-bottom: var(--safqa-space-3) !important;
  margin-bottom: var(--safqa-space-5) !important;
}
.safqa-section-heading__title {
  font-size: var(--safqa-text-xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--safqa-text-primary) !important;
}
.safqa-section-heading__title span {
  font-size: var(--safqa-text-sm) !important;
  font-weight: 500 !important;
  color: var(--safqa-text-muted) !important;
  margin-inline-start: var(--safqa-space-2) !important;
}