/* ============================================================
   APEX THEME — Main Stylesheet
   CS-Cart 4.18 / UniTheme2 parent
   Better than UniTheme2 — Safqa Edition
   ============================================================ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Brand */
  --apex-brand:          #009598;
  --apex-brand-dark:     #005e60;
  --apex-brand-mid:      #007a7d;
  --apex-brand-light:    #bcf0f0;
  --apex-brand-faint:    #edf9f9;
  --apex-accent:         #ff6457;
  --apex-accent-dark:    #d94e43;
  --apex-gold:           #f59e0b;

  /* Neutrals */
  --apex-bg:             #f5f7f7;
  --apex-surface:        #ffffff;
  --apex-surface-alt:    #f9fbfb;
  --apex-border:         #e2eaea;
  --apex-border-strong:  #c4d4d4;

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

  /* Semantic */
  --apex-success:        #059669;
  --apex-warning:        #f59e0b;
  --apex-danger:         #ef4444;
  --apex-price:          #0d1b1e;
  --apex-price-old:      #7a9494;
  --apex-discount:       #ff6457;
  --apex-stars:          #f59e0b;

  /* Legacy safqa tokens (design_system.css compat) */
  --safqa-brand:         #009598;
  --safqa-brand-dark:    #005e60;
  --safqa-brand-light:   #bcf0f0;
  --safqa-brand-faint:   #edf9f9;
  --safqa-bg:            #f5f7f7;
  --safqa-surface:       #ffffff;
  --safqa-border:        #e2eaea;
  --safqa-text-primary:  #0d1b1e;
  --safqa-text-secondary:#4a6060;
  --safqa-text-muted:    #7a9494;
  --safqa-price:         #0d1b1e;
  --safqa-discount:      #ff6457;
  --safqa-stars:         #f59e0b;
  --safqa-success:       #059669;

  /* Shadows */
  --apex-shadow-xs:  0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
  --apex-shadow-sm:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --apex-shadow-md:  0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.06);
  --apex-shadow-lg:  0 8px 32px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.07);
  --apex-shadow-xl:  0 20px 60px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.09);
  --apex-shadow-brand: 0 4px 16px rgba(0,149,152,.28);
  --apex-shadow-focus: 0 0 0 3px rgba(0,149,152,.22);

  /* Radii */
  --apex-r-xs:   4px;
  --apex-r-sm:   8px;
  --apex-r-md:   12px;
  --apex-r-lg:   16px;
  --apex-r-xl:   24px;
  --apex-r-pill: 999px;

  /* Spacing */
  --apex-s1:  4px;   --apex-s2:  8px;   --apex-s3:  12px;
  --apex-s4:  16px;  --apex-s5:  20px;  --apex-s6:  24px;
  --apex-s8:  32px;  --apex-s10: 40px;  --apex-s12: 48px;
  --apex-s16: 64px;

  /* Typography */
  --apex-font:    -apple-system, BlinkMacSystemFont, 'Inter', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
  --apex-font-ar: 'Noto Sans Arabic', 'Tahoma', sans-serif;
  --apex-fs-xs:   11px;  --apex-fs-sm:   13px;  --apex-fs-base: 14px;
  --apex-fs-md:   15px;  --apex-fs-lg:   18px;  --apex-fs-xl:   22px;
  --apex-fs-2xl:  28px;  --apex-fs-3xl:  36px;  --apex-fs-4xl:  48px;
  --apex-lh-tight: 1.25; --apex-lh-snug: 1.4;  --apex-lh-base: 1.6;

  /* Motion */
  --apex-ease:      cubic-bezier(.22,.68,0,1.2);
  --apex-ease-out:  cubic-bezier(0,.55,.45,1);
  --apex-ease-in:   cubic-bezier(.55,.0,1,.45);
  --apex-dur-fast:  100ms;
  --apex-dur:       180ms;
  --apex-dur-slow:  320ms;

  /* Layout */
  --apex-max-w:    1680px;
  --apex-header-h: 68px;
}

/* ── 2. GLOBAL RESET & BASE ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--apex-bg) !important;
  color: var(--apex-text-primary) !important;
  font-family: var(--apex-font) !important;
  font-size: var(--apex-fs-base) !important;
  line-height: var(--apex-lh-base) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir="rtl"] body { font-family: var(--apex-font-ar) !important; }

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

img { max-width: 100%; height: auto; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--apex-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--apex-brand); }

:focus-visible { outline: none !important; box-shadow: var(--apex-shadow-focus) !important; border-radius: var(--apex-r-xs) !important; }
::selection { background: var(--apex-brand-light); color: var(--apex-brand-dark); }

/* ── 3. TOP PANEL ──────────────────────────────────────────── */
.tygh-top-panel {
  background: var(--apex-brand-faint) !important;
  border-bottom: 1px solid rgba(0,149,152,.12) !important;
}
.tygh-top-panel a,
.tygh-top-panel .ty-text-links__a,
.tygh-top-panel .ty-select-block__txt {
  color: var(--apex-text-secondary) !important;
  font-size: var(--apex-fs-xs) !important;
  font-weight: 500 !important;
}
.tygh-top-panel a:hover { color: var(--apex-brand) !important; }
.tygh-top-panel [class*="ty-icon-"] { color: var(--apex-brand) !important; }

/* ── 4. HEADER ─────────────────────────────────────────────── */
#tygh_main_container .tygh-header {
  background: var(--apex-surface) !important;
  border-bottom: 1px solid var(--apex-border) !important;
  box-shadow: var(--apex-shadow-sm) !important;
}
body.floating-header:not(.fixed-header) #tygh_main_container .tygh-top-panel,
body.floating-header:not(.fixed-header) #tygh_main_container .tygh-top-panel > div,
body.floating-header:not(.fixed-header) #tygh_main_container .tygh-header,
body.floating-header:not(.fixed-header) #tygh_main_container .tygh-header > [class*=container],
body.floating-header:not(.fixed-header) #tygh_main_container .top-menu-grid {
  background: var(--apex-surface) !important;
}

/* ── 5. SEARCH BAR ─────────────────────────────────────────── */
.ty-search-block {
  background: var(--apex-bg) !important;
  border-radius: var(--apex-r-pill) !important;
}
body.floating-header:not(.fixed-header) #tygh_main_container .tygh-header > [class*=container] .ty-search-block:not(.ut2-sw-w .ty-search-block) {
  background: var(--apex-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ty-search-block__input {
  background: var(--apex-bg) !important;
  border: 2px solid var(--apex-border) !important;
  border-radius: var(--apex-r-pill) !important;
  color: var(--apex-text-primary) !important;
  font-size: var(--apex-fs-base) !important;
  height: 44px !important;
  padding-inline: var(--apex-s4) !important;
  transition: border-color var(--apex-dur), box-shadow var(--apex-dur) !important;
}
.ty-search-block__input:focus {
  border-color: var(--apex-brand) !important;
  background: var(--apex-surface) !important;
  box-shadow: var(--apex-shadow-focus) !important;
  outline: none !important;
}
.ty-search-block__input::placeholder { color: var(--apex-text-muted) !important; }
.ty-search-magnifier {
  background: var(--apex-brand) !important;
  border-radius: var(--apex-r-pill) !important;
  width: 44px !important; height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background var(--apex-dur-fast) !important;
}
.ty-search-magnifier:hover { background: var(--apex-brand-dark) !important; }
.ty-search-magnifier i { color: #fff !important; font-size: 18px !important; }

/* ── 6. NAVIGATION MEGA-MENU ───────────────────────────────── */
/* Slide panel */
.ut2-fm { background: var(--apex-surface) !important; }
.ut2-fmw {
  background: var(--apex-surface) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 0 0 var(--apex-r-lg) var(--apex-r-lg) !important;
  box-shadow: var(--apex-shadow-xl) !important;
}

/* Category items */
.ut2-lfl {
  border-radius: var(--apex-r-sm) !important;
  transition: background var(--apex-dur-fast) !important;
}
.ut2-lfl:hover { background: var(--apex-brand-faint) !important; }
.ut2-lfl__head__name { font-size: var(--apex-fs-sm) !important; font-weight: 600 !important; color: var(--apex-text-primary) !important; }
.ut2-lfl__head__d   { font-size: var(--apex-fs-xs) !important; color: var(--apex-text-muted) !important; line-height: 1.4 !important; }
.ut2-lfl__head__t   { font-size: var(--apex-fs-xs) !important; color: var(--apex-brand) !important; font-weight: 600 !important; }

/* Sub-links */
.ut2-lsl a, .ut2-lsl__more-link {
  font-size: var(--apex-fs-sm) !important;
  color: var(--apex-text-secondary) !important;
  padding: 3px 6px !important;
  border-radius: var(--apex-r-xs) !important;
  transition: background var(--apex-dur-fast), color var(--apex-dur-fast) !important;
  display: inline-block !important;
}
.ut2-lsl a:hover, .ut2-lsl__more-link:hover {
  background: var(--apex-brand-faint) !important;
  color: var(--apex-brand) !important;
}

/* Horizontal nav */
.ut2-h__menu .ut2-menu__link { color: var(--apex-text-primary) !important; font-weight: 500 !important; }
.ut2-h__menu .ut2-menu__item:hover .ut2-menu__link { color: var(--apex-brand) !important; }
.ut2-h__menu .ut2-menu__submenu__wrapper {
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-r-md) !important;
  box-shadow: var(--apex-shadow-xl) !important;
  background: var(--apex-surface) !important;
}

/* ── 7. SECTION TITLES & SPACING ──────────────────────────── */
.ty-mainbox-title {
  font-size: var(--apex-fs-xl) !important;
  font-weight: 800 !important;
  color: var(--apex-text-primary) !important;
  letter-spacing: -0.02em !important;
}
.ty-mainbox-title.ut2-biggest-size-title {
  font-size: var(--apex-fs-2xl) !important;
}
.ty-mainbox-title.ut2-big-size-title {
  font-size: var(--apex-fs-xl) !important;
}
/* Tighten section vertical rhythm */
.container-fluid-row {
  padding-top: var(--apex-s5) !important;
  padding-bottom: var(--apex-s5) !important;
}
.container-fluid-row + .container-fluid-row {
  padding-top: 0 !important;
}
.container-fluid-row-full-width {
  padding-top: var(--apex-s6) !important;
  padding-bottom: var(--apex-s6) !important;
}
.container-fluid-row-no-limit {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* UniTheme2 native HR decoration — work with it, not against it */
.ut2-title-line-decoration > span {
  background: var(--apex-bg) !important;
  font-weight: 800 !important;
  padding-inline-end: var(--apex-s3) !important;
}
.ut2-title-line-decoration::after {
  border-bottom: 2px solid var(--apex-border-strong) !important;
}
[class*="title"] mark { color: var(--apex-brand) !important; background: none !important; font-style: normal !important; }

/* Fill-color sections (coral override → brand teal) */
[class*="fill--color"] { --fill-color: var(--apex-brand) !important; }
.container-fluid-row-full-width[class*="fill--color"] { background: var(--apex-brand) !important; }
[class*="fill--color"] .ut2-title-line-decoration > span { background: var(--apex-brand) !important; color: #fff !important; }
[class*="fill--color"] .ut2-title-line-decoration::after { border-bottom-color: rgba(255,255,255,.25) !important; }

/* ── 8. ALL BANNERS — BASE ────────────────────────────────── */
.ut2-banner {
  border-radius: var(--apex-r-md) !important;
  overflow: hidden !important;
  transition:
    transform var(--apex-dur) var(--apex-ease),
    box-shadow var(--apex-dur) var(--apex-ease) !important;
}
.ut2-banner .ut2-a__img img {
  transition: transform var(--apex-dur-slow) var(--apex-ease-out) !important;
}
.ut2-banner:hover .ut2-a__img img {
  transform: scale(1.04) !important;
}
.ut2-banner[style*="color-schemes: dark"] .ut2-a__title {
  text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
.ut2-banner .ut2-a__button .ty-btn,
.ut2-banner .ut2-a__button a {
  border-radius: var(--apex-r-pill) !important;
  font-weight: 700 !important;
  font-size: var(--apex-fs-sm) !important;
  letter-spacing: .02em !important;
  transition: background var(--apex-dur-fast), border-color var(--apex-dur-fast), transform var(--apex-dur-fast) !important;
}
.ut2-banner .ut2-a__button .ty-btn:hover,
.ut2-banner .ut2-a__button a:hover {
  transform: translateY(-1px) !important;
}

/* ── 8a. HERO / LARGE BANNERS (520px, 600px) ─────────────── */
.homepage-banners .ut2-banner {
  border-radius: var(--apex-r-lg) !important;
}
.homepage-banners .ut2-a__button .ty-btn__outline,
.homepage-banners .ut2-a__button .ty-btn {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255,255,255,.6) !important;
  color: #fff !important;
  border-radius: var(--apex-r-pill) !important;
  font-size: var(--apex-fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: 10px 24px !important;
}
.homepage-banners .ut2-a__button .ty-btn__outline:hover,
.homepage-banners .ut2-a__button .ty-btn:hover {
  background: rgba(255,255,255,.28) !important;
  border-color: #fff !important;
}

/* Full-width bottom banner section */
.container-fluid-row-no-limit .homepage-banners .ut2-banner {
  border-radius: 0 !important;
}

/* ── 8b. MEDIUM BANNERS (450px) ──────────────────────────── */
.ut2-banner[style*="--ab-banner-height: 450px"] {
  border-radius: var(--apex-r-lg) !important;
  box-shadow: var(--apex-shadow-sm) !important;
}
.ut2-banner[style*="--ab-banner-height: 450px"]:hover {
  box-shadow: var(--apex-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* ── 9. CATEGORY / SMALL TILES (250px) ───────────────────── */
.ut2-banner[style*="--ab-banner-height: 250px"] {
  border-radius: var(--apex-r-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--apex-border) !important;
  box-shadow: var(--apex-shadow-xs) !important;
  transition:
    transform var(--apex-dur) var(--apex-ease),
    box-shadow var(--apex-dur) var(--apex-ease),
    border-color var(--apex-dur) !important;
}
.ut2-banner[style*="--ab-banner-height: 250px"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--apex-shadow-md) !important;
  border-color: var(--apex-brand-light) !important;
}
.ut2-banner[style*="--ab-banner-height: 250px"]:hover .ut2-a__img img {
  transform: scale(1.06) !important;
}
.ut2-banner[style*="--ab-banner-height: 250px"] .ut2-a__title {
  font-size: var(--apex-fs-sm) !important;
  font-weight: 700 !important;
}

/* ── 9a. OWL CAROUSEL DOTS ────────────────────────────────── */
.owl-pagination {
  text-align: center !important;
  padding: var(--apex-s3) 0 !important;
}
.owl-page span {
  width: 10px !important;
  height: 10px !important;
  background: rgba(255,255,255,.5) !important;
  border-radius: var(--apex-r-pill) !important;
  margin: 0 4px !important;
  transition: background var(--apex-dur-fast), transform var(--apex-dur-fast) !important;
}
.owl-page.active span {
  background: #fff !important;
  transform: scale(1.3) !important;
}
.homepage-banners .owl-pagination {
  bottom: var(--apex-s4) !important;
}
.ut2-scroll-left,
.ut2-scroll-right {
  background: var(--apex-surface) !important;
  border: 1.5px solid var(--apex-border) !important;
  border-radius: var(--apex-r-pill) !important;
  box-shadow: var(--apex-shadow-sm) !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--apex-dur-fast), border-color var(--apex-dur-fast), color var(--apex-dur-fast), transform var(--apex-dur-fast) !important;
}
.ut2-scroll-left:hover,
.ut2-scroll-right:hover {
  background: var(--apex-brand) !important;
  border-color: var(--apex-brand) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
}

/* ── 9b. SCROLLABLE BANNER ROW ────────────────────────────── */
.banners.ut2-scroll-container {
  gap: var(--apex-s4) !important;
}
.banners.ut2-scroll-container .ut2-scroll-item {
  border-radius: var(--apex-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--apex-shadow-sm) !important;
  transition: transform var(--apex-dur) var(--apex-ease), box-shadow var(--apex-dur) !important;
}
.banners.ut2-scroll-container .ut2-scroll-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--apex-shadow-lg) !important;
}

/* ── 9c. BANNER GRID (category tiles) ────────────────────── */
.banners-grid {
  gap: var(--apex-s3) !important;
}
.banners-grid .ut2-banner {
  border-radius: var(--apex-r-md) !important;
  overflow: hidden !important;
}
.banners-grid-resizable {
  gap: var(--apex-s4) !important;
}

/* ── 10. TAB PILLS ─────────────────────────────────────────── */
.abt__ut2_grid_tabs a,
.abt__ut2_grid_tabs span {
  border-radius: var(--apex-r-pill) !important;
  font-size: var(--apex-fs-sm) !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--apex-border) !important;
  background: var(--apex-surface) !important;
  color: var(--apex-text-secondary) !important;
  transition: all var(--apex-dur-fast) !important;
  padding: 6px 16px !important;
}
.abt__ut2_grid_tabs.active a,
.abt__ut2_grid_tabs.active span {
  background: var(--apex-brand) !important;
  color: #fff !important;
  border-color: var(--apex-brand) !important;
  box-shadow: var(--apex-shadow-brand) !important;
}
.abt__ut2_grid_tabs a:hover,
.abt__ut2_grid_tabs span:hover {
  border-color: var(--apex-brand) !important;
  color: var(--apex-brand) !important;
  background: var(--apex-brand-faint) !important;
}
/* ── 11. PRODUCT CARD ──────────────────────────────────────── */
.ut2-gl__item {
  background: var(--apex-surface) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-r-md) !important;
  box-shadow: var(--apex-shadow-xs) !important;
  overflow: hidden !important;
  transition:
    transform var(--apex-dur) var(--apex-ease),
    box-shadow var(--apex-dur) var(--apex-ease),
    border-color var(--apex-dur) !important;
  position: relative !important;
}
.ut2-gl__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--apex-shadow-md) !important;
  border-color: var(--apex-brand-light) !important;
  z-index: 2 !important;
}

/* Image zoom on hover */
.ut2-gl__image { background: var(--apex-surface-alt) !important; overflow: hidden !important; }
.ut2-gl__image img {
  transition: transform var(--apex-dur-slow) var(--apex-ease-out) !important;
  will-change: transform;
}
.ut2-gl__item:hover .ut2-gl__image img { transform: scale(1.05) !important; }

/* Title */
.ut2-gl__name { font-size: var(--apex-fs-sm) !important; font-weight: 500 !important; line-height: var(--apex-lh-snug) !important; color: var(--apex-text-primary) !important; }
.ut2-gl__name a { color: inherit !important; }
.ut2-gl__name a:hover { color: var(--apex-brand) !important; }

/* Vendor */
.ut2-gl__vendor { font-size: var(--apex-fs-xs) !important; color: var(--apex-text-muted) !important; font-weight: 500 !important; }
.ut2-gl__vendor a { color: var(--apex-brand) !important; }

/* Prices */
.ut2-gl__price .ty-price-num,
.ut2-gl__price .ty-price,
.ut2-gl__price bdi {
  font-size: var(--apex-fs-lg) !important;
  font-weight: 800 !important;
  color: var(--apex-price) !important;
  letter-spacing: -0.3px !important;
}
.ut2-gl__price .ty-list-price,
.ut2-gl__price .ty-strikethrough {
  font-size: var(--apex-fs-sm) !important;
  color: var(--apex-price-old) !important;
  text-decoration: line-through !important;
}
.ut2-gl__price .ty-list-discount,
.ut2-gl__price .ty-discount-percent {
  background: var(--apex-discount) !important;
  color: #fff !important;
  font-size: var(--apex-fs-xs) !important;
  font-weight: 800 !important;
  border-radius: var(--apex-r-xs) !important;
  padding: 2px 6px !important;
  letter-spacing: .02em !important;
}

/* Stars */
.ut2-stars, .ty-stars, [class*="ty-stars"] { color: var(--apex-stars) !important; }

/* Add to Cart */
.ut2-gl__control .ty-btn,
.ut2-gl__control button[type="submit"] {
  width: 100% !important;
  background: var(--apex-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--apex-r-pill) !important;
  font-size: var(--apex-fs-sm) !important;
  font-weight: 700 !important;
  height: 38px !important;
  transition: background var(--apex-dur-fast), transform var(--apex-dur-fast), box-shadow var(--apex-dur-fast) !important;
  cursor: pointer !important;
}
.ut2-gl__control .ty-btn:hover,
.ut2-gl__control button[type="submit"]:hover {
  background: var(--apex-brand-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--apex-shadow-brand) !important;
}

/* Action buttons (wishlist/compare) — fade in on hover */
.ut2-w-c-q__buttons {
  opacity: 0 !important;
  transition: opacity var(--apex-dur) !important;
  z-index: 10 !important;
}
.ut2-gl__item:hover .ut2-w-c-q__buttons { opacity: 1 !important; }

/* Staggered entrance animation */
@keyframes apex-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ut2-gl__item {
  animation: apex-fade-up var(--apex-dur-slow) var(--apex-ease-out) both;
}
.ty-column:nth-child(1) .ut2-gl__item { animation-delay: 0ms; }
.ty-column:nth-child(2) .ut2-gl__item { animation-delay: 50ms; }
.ty-column:nth-child(3) .ut2-gl__item { animation-delay: 100ms; }
.ty-column:nth-child(4) .ut2-gl__item { animation-delay: 150ms; }

/* ── 12. PRODUCT LABELS / STICKERS ─────────────────────────── */
.ty-product-labels__item,
.ab__sticker {
  font-size: var(--apex-fs-xs) !important;
  font-weight: 800 !important;
  border-radius: var(--apex-r-xs) !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
}
.ty-product-labels__item.ty-product-labels__item_sale { background: var(--apex-discount) !important; color: #fff !important; }
.ty-product-labels__item.ty-product-labels__item_new { background: var(--apex-brand) !important; color: #fff !important; }
.ty-product-labels__item.ty-product-labels__item_bestseller { background: var(--apex-gold) !important; color: var(--apex-text-primary) !important; }

/* ── 13. BUTTONS GLOBAL ────────────────────────────────────── */
.ty-btn {
  border-radius: var(--apex-r-pill) !important;
  font-weight: 600 !important;
  font-size: var(--apex-fs-sm) !important;
  cursor: pointer !important;
  transition: background var(--apex-dur-fast), border-color var(--apex-dur-fast), transform var(--apex-dur-fast), box-shadow var(--apex-dur-fast) !important;
  letter-spacing: .01em !important;
}
.ty-btn__primary {
  background: var(--apex-brand) !important;
  color: #fff !important;
  border: 2px solid var(--apex-brand) !important;
}
.ty-btn__primary:hover {
  background: var(--apex-brand-dark) !important;
  border-color: var(--apex-brand-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--apex-shadow-brand) !important;
}
.ty-btn__secondary {
  background: transparent !important;
  color: var(--apex-brand) !important;
  border: 2px solid var(--apex-brand) !important;
}
.ty-btn__secondary:hover {
  background: var(--apex-brand-faint) !important;
  transform: translateY(-1px) !important;
}
.ty-btn__outline {
  background: transparent !important;
  border: 2px solid var(--apex-border-strong) !important;
  color: var(--apex-text-secondary) !important;
}
.ty-btn__outline:hover {
  border-color: var(--apex-brand) !important;
  color: var(--apex-brand) !important;
  background: var(--apex-brand-faint) !important;
}
.ty-btn--added,
.ty-btn.cm-btn-add-to-cart-success {
  background: var(--apex-success) !important;
  border-color: var(--apex-success) !important;
}

/* ── 14. FORMS ─────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
select, textarea {
  background: var(--apex-surface) !important;
  border: 1.5px solid var(--apex-border) !important;
  border-radius: var(--apex-r-sm) !important;
  color: var(--apex-text-primary) !important;
  font-size: var(--apex-fs-sm) !important;
  font-family: var(--apex-font) !important;
  transition: border-color var(--apex-dur-fast), box-shadow var(--apex-dur-fast) !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color: var(--apex-brand) !important;
  box-shadow: var(--apex-shadow-focus) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--apex-text-muted) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--apex-brand) !important; }

/* ── 15. FILTER SIDEBAR ────────────────────────────────────── */
.ty-sidebox, .ut2-sidebox {
  background: var(--apex-surface) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-r-md) !important;
  box-shadow: var(--apex-shadow-xs) !important;
  padding: var(--apex-s4) !important;
  margin-bottom: var(--apex-s4) !important;
}
.ty-sidebox__title, .ut2-sidebox__title {
  font-size: var(--apex-fs-sm) !important;
  font-weight: 800 !important;
  color: var(--apex-text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: var(--apex-s3) !important;
  padding-bottom: var(--apex-s2) !important;
  border-bottom: 2px solid var(--apex-brand-light) !important;
}
.ty-features-hash, .ut2-active-filter {
  background: var(--apex-brand-faint) !important;
  color: var(--apex-brand-dark) !important;
  border: 1px solid var(--apex-brand-light) !important;
  border-radius: var(--apex-r-pill) !important;
  font-size: var(--apex-fs-xs) !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

/* ── 16. BREADCRUMBS ───────────────────────────────────────── */
.ty-breadcrumbs { font-size: var(--apex-fs-sm) !important; padding: var(--apex-s3) 0 !important; }
.ty-breadcrumbs__a { color: var(--apex-text-muted) !important; }
.ty-breadcrumbs__a:hover { color: var(--apex-brand) !important; }
.ty-breadcrumbs__current { color: var(--apex-text-secondary) !important; font-weight: 500 !important; }
.ty-breadcrumbs .ty-breadcrumbs__step::after { color: var(--apex-text-muted) !important; }

/* ── 17. PAGINATION ────────────────────────────────────────── */
.ty-pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--apex-s1) !important; padding: var(--apex-s8) 0 !important; flex-wrap: wrap !important; }
.ty-pagination__item a,
.ty-pagination__item span {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important;
  border-radius: var(--apex-r-sm) !important;
  font-size: var(--apex-fs-sm) !important; font-weight: 600 !important;
  color: var(--apex-text-secondary) !important;
  border: 1.5px solid var(--apex-border) !important;
  background: var(--apex-surface) !important;
  transition: all var(--apex-dur-fast) !important;
}
.ty-pagination__item a:hover {
  border-color: var(--apex-brand) !important;
  color: var(--apex-brand) !important;
  background: var(--apex-brand-faint) !important;
  transform: translateY(-1px) !important;
}
.ty-pagination__item.active a,
.ty-pagination__item.active span {
  background: var(--apex-brand) !important;
  border-color: var(--apex-brand) !important;
  color: #fff !important;
  box-shadow: var(--apex-shadow-brand) !important;
}
html[dir="rtl"] .ty-pagination { flex-direction: row-reverse; }

/* ── 18. NOTIFICATIONS & ALERTS ────────────────────────────── */
.ty-notification, [class*="cm-notification"] {
  background: var(--apex-surface) !important;
  border-radius: var(--apex-r-md) !important;
  box-shadow: var(--apex-shadow-lg) !important;
  font-size: var(--apex-fs-sm) !important;
  color: var(--apex-text-primary) !important;
  border: 1px solid var(--apex-border) !important;
}
html:not([dir="rtl"]) .ty-notification,
html:not([dir="rtl"]) [class*="cm-notification"] { border-left: 4px solid var(--apex-brand) !important; }
html[dir="rtl"] .ty-notification,
html[dir="rtl"] [class*="cm-notification"] { border-right: 4px solid var(--apex-brand) !important; }
.ty-notification--success { border-color: var(--apex-success) !important; }
.ty-notification--warning { border-color: var(--apex-warning) !important; }
.ty-notification--error   { border-color: var(--apex-danger) !important; }

/* ── 19. DROPDOWN MENUS ────────────────────────────────────── */
.ty-dropdown-box__content {
  background: var(--apex-surface) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-r-md) !important;
  box-shadow: var(--apex-shadow-xl) !important;
}
.ty-dropdown-box__title[id] {
  font-size: var(--apex-fs-sm) !important;
  color: var(--apex-text-primary) !important;
  font-weight: 500 !important;
}
.ty-dropdown-box__title[id]:hover { color: var(--apex-brand) !important; }

/* ── 20. CART MINI-BADGE ───────────────────────────────────── */
.ty-minicart-count {
  background: var(--apex-accent) !important;
  color: #fff !important;
  border-radius: var(--apex-r-pill) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  padding: 0 4px !important;
  text-align: center !important;
  display: inline-block !important;
}
.ty-minicart-count.empty { display: none !important; }

/* ── 21. PRODUCT PAGE ──────────────────────────────────────── */
.buybox-inner-card {
  background: var(--apex-surface) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-r-lg) !important;
  box-shadow: var(--apex-shadow-md) !important;
  padding: var(--apex-s6) !important;
}
.buybox-main-price .ty-price,
.buybox-main-price bdi {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--apex-price) !important;
  letter-spacing: -0.5px !important;
}
.buybox-buttons .ty-btn.ty-btn__primary,
.buybox-buttons .cm-form-submit {
  background: var(--apex-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--apex-r-pill) !important;
  font-weight: 700 !important;
  font-size: var(--apex-fs-md) !important;
  padding: 14px 28px !important;
  width: 100% !important;
  transition: background var(--apex-dur-fast), transform var(--apex-dur-fast), box-shadow var(--apex-dur-fast) !important;
}
.buybox-buttons .ty-btn.ty-btn__primary:hover,
.buybox-buttons .cm-form-submit:hover {
  background: var(--apex-brand-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--apex-shadow-brand) !important;
}

/* Product page tabs */
.ty-tabs { border: none !important; border-bottom: 2px solid var(--apex-border) !important; }
.ty-tab a, .ty-tab span {
  font-size: var(--apex-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--apex-text-secondary) !important;
  border-radius: var(--apex-r-sm) var(--apex-r-sm) 0 0 !important;
  transition: color var(--apex-dur-fast), background var(--apex-dur-fast) !important;
}
.ty-tab.active a, .ty-tab.active span {
  color: var(--apex-brand) !important;
  background: var(--apex-brand-faint) !important;
}
.ty-tab a:hover { color: var(--apex-brand) !important; }

/* ── 22. CHECKOUT ──────────────────────────────────────────── */
.ty-checkout__step-title {
  font-size: var(--apex-fs-lg) !important;
  font-weight: 800 !important;
  color: var(--apex-text-primary) !important;
}
.ty-checkout__step-number {
  background: var(--apex-brand) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: var(--apex-r-pill) !important;
}
.ty-checkout .ty-btn__primary {
  background: var(--apex-brand) !important;
  border-color: var(--apex-brand) !important;
}

/* ── 23. FOOTER ────────────────────────────────────────────── */
.ty-footer-grid {
  background: #0d1b1e !important;
  border-top: 3px solid var(--apex-brand) !important;
  color: rgba(255,255,255,.7) !important;
}
.ty-footer-grid a {
  color: rgba(255,255,255,.6) !important;
  font-size: var(--apex-fs-sm) !important;
  transition: color var(--apex-dur-fast) !important;
}
.ty-footer-grid a:hover { color: var(--apex-brand-light) !important; }
.ty-footer-grid .ty-mainbox-title,
.ty-footer-grid .ty-footer-title {
  color: rgba(255,255,255,.9) !important;
  font-weight: 700 !important;
  font-size: var(--apex-fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.ty-footer-bottom {
  background: #060e10 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.4) !important;
  font-size: var(--apex-fs-xs) !important;
}

/* ── 24. APEX TRUST BAR ────────────────────────────────────── */
.apex-trust-bar {
  background: var(--apex-surface);
  border-bottom: 1px solid var(--apex-border);
  padding: 10px 0;
}
.apex-trust-bar__inner {
  display: flex;
  justify-content: center;
  gap: var(--apex-s8);
  flex-wrap: wrap;
  max-width: var(--apex-max-w);
  margin: 0 auto;
  padding: 0 var(--apex-s6);
}
.apex-trust-item {
  display: flex;
  align-items: center;
  gap: var(--apex-s2);
  font-size: var(--apex-fs-sm);
  font-weight: 600;
  color: var(--apex-text-secondary);
}
.apex-trust-item__icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
html[dir="rtl"] .apex-trust-bar__inner { flex-direction: row-reverse; }

/* ── 25. APEX SECTION HEADER ───────────────────────────────── */
.apex-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--apex-s5);
  padding-bottom: var(--apex-s3);
  border-bottom: 2px solid var(--apex-border);
}
.apex-section-head__title {
  font-size: var(--apex-fs-xl) !important;
  font-weight: 800 !important;
  color: var(--apex-text-primary) !important;
  letter-spacing: -0.02em !important;
}
.apex-section-head__link {
  font-size: var(--apex-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--apex-brand) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
html[dir="rtl"] .apex-section-head { flex-direction: row-reverse; }

/* ── 26. DARK MODE ─────────────────────────────────────────── */
[data-theme="dark"] {
  --apex-brand:          #00c2c2;
  --apex-brand-dark:     #009598;
  --apex-brand-light:    #004f50;
  --apex-brand-faint:    #0d2626;
  --apex-bg:             #0d1b1e;
  --apex-surface:        #142427;
  --apex-surface-alt:    #1a2e32;
  --apex-border:         #1f3538;
  --apex-border-strong:  #2a4548;
  --apex-text-primary:   #e8f4f4;
  --apex-text-secondary: #93b8b8;
  --apex-text-muted:     #5a8080;
  --apex-shadow-xs:  0 1px 3px rgba(0,0,0,.4);
  --apex-shadow-sm:  0 2px 8px rgba(0,0,0,.5);
  --apex-shadow-md:  0 4px 16px rgba(0,0,0,.6);
  --apex-shadow-lg:  0 8px 32px rgba(0,0,0,.7);
}
[data-theme="dark"] body { background: var(--apex-bg) !important; color: var(--apex-text-primary) !important; }
[data-theme="dark"] .ut2-gl__item { background: var(--apex-surface) !important; border-color: var(--apex-border) !important; }
[data-theme="dark"] .ty-sidebox, [data-theme="dark"] .ut2-sidebox { background: var(--apex-surface) !important; border-color: var(--apex-border) !important; }
[data-theme="dark"] .ty-dropdown-box__content { background: var(--apex-surface) !important; border-color: var(--apex-border) !important; }
[data-theme="dark"] .ut2-fmw { background: var(--apex-surface) !important; border-color: var(--apex-border) !important; }
[data-theme="dark"] #tygh_main_container .tygh-header { background: var(--apex-surface) !important; border-color: var(--apex-border) !important; }
[data-theme="dark"] .ty-footer-grid { background: #060e10 !important; }
[data-theme="dark"] .ut2-title-line-decoration > span { background: var(--apex-bg) !important; }
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"], [data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--apex-surface-alt) !important; border-color: var(--apex-border) !important; color: var(--apex-text-primary) !important; }

/* Dark mode toggle */
.apex-dark-toggle {
  position: fixed;
  bottom: var(--apex-s6);
  right: var(--apex-s6);
  z-index: 9000;
  width: 42px; height: 42px;
  border-radius: var(--apex-r-pill);
  background: var(--apex-surface);
  border: 1.5px solid var(--apex-border);
  box-shadow: var(--apex-shadow-md);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform var(--apex-dur) var(--apex-ease), box-shadow var(--apex-dur);
}
.apex-dark-toggle:hover { transform: scale(1.12); box-shadow: var(--apex-shadow-lg); }
html[dir="rtl"] .apex-dark-toggle { right: auto; left: var(--apex-s6); }

/* ── 27. RTL ───────────────────────────────────────────────── */
html[dir="rtl"] .ty-pagination { flex-direction: row-reverse; }
html[dir="rtl"] .ty-notification,
html[dir="rtl"] [class*="cm-notification"] { border-left: none !important; border-right: 4px solid var(--apex-brand) !important; direction: rtl !important; text-align: right !important; }
/* Protect icon fonts in RTL */
html[dir="rtl"] [class*="ty-icon-"],
html[dir="rtl"] [class*="ut2-icon-"] { direction: ltr !important; display: inline-block !important; }

/* ── 28. MOBILE BOTTOM NAV ─────────────────────────────────── */
@media (max-width: 768px) {
  body { padding-bottom: 70px !important; }

  .apex-bottom-nav {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 9990 !important;
    background: var(--apex-surface) !important;
    border-top: 1px solid var(--apex-border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.12) !important;
    display: flex !important;
    padding: var(--apex-s2) 0 !important;
    padding-bottom: max(var(--apex-s2), env(safe-area-inset-bottom)) !important;
  }
  .apex-bottom-nav__item {
    flex: 1 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 2px !important;
    color: var(--apex-text-muted) !important;
    font-size: 10px !important; font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-decoration: none !important;
    transition: color var(--apex-dur-fast) !important;
    cursor: pointer !important;
    padding: var(--apex-s1) !important;
    position: relative !important;
  }
  .apex-bottom-nav__item.active,
  .apex-bottom-nav__item:hover { color: var(--apex-brand) !important; }
  .apex-bottom-nav__icon { font-size: 22px !important; line-height: 1 !important; }
  .apex-bottom-nav__badge {
    position: absolute !important;
    top: 0 !important; right: calc(50% - 18px) !important;
    background: var(--apex-accent) !important; color: #fff !important;
    font-size: 9px !important; font-weight: 800 !important;
    border-radius: var(--apex-r-pill) !important;
    min-width: 16px !important; height: 16px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 3px !important;
  }

  /* Stack product grid to 2 cols on mobile */
  .ut2-gl__wrap .ty-column { width: 50% !important; }
}

/* ── 29. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --apex-max-w: 100%; }
}
@media (max-width: 768px) {
  .ty-mainbox-title { font-size: var(--apex-fs-lg) !important; }
  .buybox-main-price .ty-price, .buybox-main-price bdi { font-size: 26px !important; }
}
@media (max-width: 480px) {
  .apex-trust-bar__inner { gap: var(--apex-s4); }
  .ut2-gl__item:hover { transform: none !important; }
}

/* ── 30. ANIMATIONS & GPU HINTS ────────────────────────────── */
@keyframes apex-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes apex-scale-in   { from { opacity: 0; transform: scale(.96); }       to { opacity: 1; transform: scale(1); } }
@keyframes apex-pulse-cart { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.ty-dropdown-box__content { animation: apex-scale-in var(--apex-dur) var(--apex-ease-out) both; }
.ut2-fmw                  { animation: apex-slide-down var(--apex-dur) var(--apex-ease-out) both; }
.ty-minicart-count.pulse  { animation: apex-pulse-cart 400ms var(--apex-ease) !important; }

.ut2-gl__item,
.ut2-banner[style*="--ab-banner-height: 250px"],
.ty-dropdown-box__content { will-change: transform; }

/* ── 31. PRINT ─────────────────────────────────────────────── */
@media print {
  .apex-trust-bar, .apex-bottom-nav, .apex-dark-toggle,
  .ut2-w-c-q__buttons, .buybox-buttons .ty-btn__secondary,
  .tygh-top-panel, .ty-search-block { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .ut2-gl__item { box-shadow: none !important; border: 1px solid #ccc !important; }
}