/* =========================================================
   Trendo — Trendyol-Style Header (v2 — clean, harmonized)
   Single source of truth for the header / topbar / category bar.
   Avoids overlap, fixes RTL flex layout, ensures readable contrast
   across all breakpoints.
   ========================================================= */

:root{
  --tyh-orange:        #F27A1A;
  --tyh-orange-2:      #FF8E2D;
  --tyh-orange-dark:   #D9650E;
  --tyh-orange-soft:   #FFF4EA;
  --tyh-orange-100:    #FFEBD6;
  --tyh-ink:           #232323;
  --tyh-ink-2:         #4A4A4A;
  --tyh-muted:         #767676;
  --tyh-line:          #ECECEC;
  --tyh-line-2:        #DDDDDD;
  --tyh-bg:            #FFFFFF;
  --tyh-bg-soft:       #FAFAFA;
  --tyh-radius:        10px;
  --tyh-shadow-sm:     0 1px 2px rgba(0,0,0,.05);
  --tyh-shadow-md:     0 6px 18px rgba(0,0,0,.07);
  --tyh-shadow-lg:     0 18px 40px rgba(0,0,0,.10);
  --tyh-h-top:         36px;
  --tyh-h-cats:        46px;
  --tyh-stickyspace:   76px;
}

/* =========================================================
   1) GLOBAL RESET INSIDE HEADER ZONE  (only)
   ========================================================= */
body{ padding-top: 0; }

#top, #top *,
header#header, header#header *,
header, header *,
.atl-mega-wrap, .atl-mega-wrap *{
  box-sizing: border-box;
}

/* Remove leftover legacy flourishes that fight the new look */
#logo.atl-logo .atl-logo__link,
.atl-logo__link,
.tyh-logo__link{
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   2) TOP MINI BAR
   - row of small links (phone / sell / language / currency)
   - simple, light, readable
   ========================================================= */
#top,
#top.atl-topbar-lux,
.tyh-topbar{
  background: #FAFAFA !important;
  border-bottom: 1px solid var(--tyh-line) !important;
  box-shadow: none !important;
  font-size: 12px;
  line-height: 1;
  color: var(--tyh-ink-2);
  position: relative;
  z-index: 60;
}

#top.atl-topbar-lux > .container,
.tyh-topbar > .container{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: var(--tyh-h-top);
  padding-top: 4px;
  padding-bottom: 4px;
}

/* OpenCart currency / language dropdowns */
#top #form-currency,
#top #form-language{
  margin: 0;
  flex: 0 0 auto;
}
#top #form-currency .btn-link,
#top #form-language .btn-link,
#top #form-currency .currency-select,
#top #form-language .language-select{
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 6px 10px !important;
  height: 28px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--tyh-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
#top #form-currency .btn-link:hover,
#top #form-currency .btn-link:focus,
#top #form-language .btn-link:hover,
#top #form-language .btn-link:focus,
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover{
  background: var(--tyh-orange-soft) !important;
  color: var(--tyh-orange) !important;
}
#top #form-currency strong,
#top #form-language strong{ font-weight: 700; }
#top .dropdown-menu{
  border-radius: 10px;
  border: 1px solid var(--tyh-line);
  box-shadow: var(--tyh-shadow-md);
  padding: 6px;
  margin-top: 4px;
  min-width: 160px;
}
#top .dropdown-menu > li > a,
#top .dropdown-menu > li > button{
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--tyh-ink) !important;
  background: transparent !important;
  border: 0 !important;
  text-align: start;
  width: 100%;
}
#top .dropdown-menu > li > a:hover,
#top .dropdown-menu > li > button:hover{
  background: var(--tyh-orange-soft) !important;
  color: var(--tyh-orange) !important;
}

/* Right-side links wrapper — push to far end */
#top-links.nav.pull-right,
#top-links{
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-inline-start: auto !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#top-links > .atl-top-links,
#top-links > ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
}
.atl-top-links{
  margin: 0 !important;
  padding: 0 !important;
}
.atl-top-item,
#top-links li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  position: relative;
}

/* Top-bar links — ensure visibility, decent hit area */
.atl-top-link,
#top-links > ul > li > a,
#top-links > .atl-top-links > li > a,
#top-links a.dropdown-toggle{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--tyh-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.atl-top-link:hover,
.atl-top-link:focus,
#top-links > ul > li > a:hover,
#top-links > ul > li > a:focus,
#top-links > ul > li.open > a,
#top-links li:hover > a{
  background: var(--tyh-orange-soft) !important;
  color: var(--tyh-orange) !important;
}
.atl-top-link i.fa,
#top-links a i.fa{ font-size: 12px; line-height: 1; }
#top-links a .caret{ margin-inline-start: 4px; opacity: .8; }

/* Dividers between items (subtle vertical lines) — disabled to prevent overlap.
   Using whitespace via gap instead. */
.atl-top-item + .atl-top-item::before{ display: none; }

/* === IMPORTANT: force show the small labels in the top bar
   The default markup hides the text on most screens with
   `hidden-xs hidden-sm hidden-md`. We override so phone / sell
   are visible. We hide them only on real mobile (≤575px).
*/
#top-links .hidden-xs.hidden-sm.hidden-md,
#top-links .hidden-xs.hidden-sm,
#top-links .hidden-xs,
#top-links .atl-top-label{
  display: inline !important;
}
@media (max-width: 575.98px){
  #top-links .hidden-xs.hidden-sm.hidden-md,
  #top-links .atl-top-label{ display: none !important; }
}

/* === Hide cart/wishlist/checkout from top bar – they live in the main header now.
   These came from the original markup. We hide via attribute selectors. */
#top-links a#wishlist-total,
#top-links a[href*="checkout/cart"],
#top-links a[href*="checkout/checkout"]{
  display: none !important;
}
#top-links a#wishlist-total + .caret,
#top-links li:has(> a#wishlist-total),
#top-links li:has(> a[href*="checkout/cart"]),
#top-links li:has(> a[href*="checkout/checkout"]){
  display: none !important;
}

/* Account dropdown in topbar (legacy) → safely hide if it still renders */
#top-links li.dropdown:has(> a[title="My Account"]),
#top-links li.dropdown:has(> a[href*="account/account"]){
  /* keep visible only on RTL Arabic install where 'my account' label might differ */
}

/* Sellmenu (3rd-party plugin) tweaks */
#top-links li.dropdown > a.dropdown-toggle .fa-users{ color: var(--tyh-orange); }
#top-links li.dropdown.open > a{ background: var(--tyh-orange-soft) !important; color: var(--tyh-orange) !important; }
#top-links li.dropdown .dropdown-menu.wk{
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
}

/* =========================================================
   3) MAIN HEADER
   ========================================================= */
header,
header#header,
.atl-header{
  background: #fff !important;
  border-bottom: 1px solid var(--tyh-line) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 50;
}
header > .container{
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Convert OpenCart's bootstrap row into a clean flex row */
header > .container > .row,
header .row{
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 !important;
  gap: 16px;
}
header .row > [class*="col-"]{
  float: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0;
}
header .row > .col-sm-4{ flex: 0 0 auto; }
header .row > .col-sm-5{ flex: 1 1 420px; min-width: 240px; }
header .row > .col-sm-3{ flex: 0 0 auto; margin-inline-start: auto; }

/* ---- Logo ---- */
#logo.atl-logo,
.atl-logo,
.tyh-logo{
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
.atl-logo__link,
.tyh-logo__link{
  display: inline-flex;
  align-items: center;
  padding: 4px 4px;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  transition: opacity .2s ease;
}
.atl-logo__link:hover,
.tyh-logo__link:hover{ opacity: .92; transform: none; box-shadow: none !important; }

.atl-logo__img,
.tyh-logo__img{
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  user-select: none;
  display: block;
}
@media (max-width: 991.98px){
  .atl-logo__img,
  .tyh-logo__img{ height: 38px; max-width: 170px; }
}
@media (max-width: 575.98px){
  .atl-logo__img,
  .tyh-logo__img{ height: 32px; max-width: 140px; }
  header > .container{ padding-top: 10px; padding-bottom: 10px; }
}

/* =========================================================
   4) SEARCH BAR  (large pill / Trendyol-style)
   ========================================================= */
#search.atl-search,
.tyh-search{
  position: relative;
  display: flex !important;
  align-items: stretch;
  width: 100%;
  height: 48px;
  background: #F4F4F4;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#search.atl-search:focus-within,
.tyh-search:focus-within{
  background: #fff;
  border-color: var(--tyh-orange);
  box-shadow: 0 0 0 3px rgba(242,122,26,.15);
}
.atl-search__icon,
.tyh-search__icon{ display: none; }

/* Input */
#search.atl-search input[name="search"],
.tyh-search .tyh-search__input,
.tyh-search input[name="search"]{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 14px;
  color: var(--tyh-ink);
  padding: 0 16px;
  font-weight: 500;
  border-radius: 0 !important;
  margin: 0 !important;
}
#search.atl-search input[name="search"]::placeholder,
.tyh-search input[name="search"]::placeholder{
  color: #9A9A9A;
  font-weight: 500;
}

/* Search button */
#search.atl-search .input-group-btn,
.tyh-search .input-group-btn{
  display: flex !important;
  align-items: stretch;
  width: auto;
}
#search.atl-search .input-group-btn .btn,
#search.atl-search .atl-search__btn,
.tyh-search .tyh-search__btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 48px;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tyh-orange) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
#search.atl-search .input-group-btn .btn:hover,
#search.atl-search .atl-search__btn:hover,
.tyh-search .tyh-search__btn:hover{
  background: rgba(242,122,26,.10) !important;
  color: var(--tyh-orange-dark) !important;
}
#search.atl-search .atl-search__btn svg,
.tyh-search .tyh-search__btn svg{
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.atl-search__btn-label,
.tyh-search .tyh-search__btn-label{ display: none; }

@media (max-width: 575.98px){
  #search.atl-search,
  .tyh-search{ height: 44px; }
  #search.atl-search .input-group-btn .btn,
  #search.atl-search .atl-search__btn,
  .tyh-search .tyh-search__btn{ min-height: 44px; padding: 0 14px !important; }
}

/* =========================================================
   5) RIGHT ACTIONS  (account / wishlist / cart)
   ========================================================= */
.tyh-actions{
  display: inline-flex !important;
  align-items: stretch;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Common look for any action: column flex (icon + label) */
.tyh-action,
.tyh-action__link{
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 78px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--tyh-ink) !important;
  background: transparent;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  position: relative;
  white-space: nowrap;
}
.tyh-action:hover,
.tyh-action:focus,
.tyh-action__link:hover,
.tyh-action__link:focus,
.tyh-action.dropdown.open > .tyh-action__link{
  background: var(--tyh-orange-soft);
  color: var(--tyh-orange) !important;
  text-decoration: none !important;
}

/* If the action is a wrapper (dropdown), the wrapper itself stays unstyled
   so the inner link carries the visual */
.tyh-action.dropdown{
  padding: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: stretch;
}
.tyh-action.dropdown > .tyh-action__link{
  width: 100%;
}

/* Icon + label */
.tyh-action__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: inherit;
}
.tyh-action__icon svg{
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.tyh-action__label{
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
}

/* Account dropdown menu */
.tyh-action.dropdown > .dropdown-menu{
  margin-top: 6px;
  min-width: 220px;
  border-radius: 12px;
  border: 1px solid var(--tyh-line);
  box-shadow: var(--tyh-shadow-lg);
  padding: 6px;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  z-index: 1050;
}
.tyh-action.dropdown > .dropdown-menu > li > a{
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--tyh-ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.tyh-action.dropdown > .dropdown-menu > li > a:hover{
  background: var(--tyh-orange-soft);
  color: var(--tyh-orange) !important;
}

/* =========================================================
   6) CART (icon + label + badge + dropdown)
   ========================================================= */
#cart.tyh-cart,
.tyh-cart{
  position: relative;
  display: inline-flex !important;
  align-items: stretch;
  width: auto !important;
  margin: 0 !important;
}

/* Decorative icon stays outside the button so common.js can replace
   the button content without losing it. */
.tyh-cart__deco{
  position: absolute;
  inset-inline-start: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tyh-ink);
  pointer-events: none;
  transition: color .2s ease;
  z-index: 1;
}
[dir="rtl"] .tyh-cart__deco{ transform: translateX(50%); }
.tyh-cart__deco svg{
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.tyh-cart__badge{
  position: absolute;
  top: -7px;
  inset-inline-end: -8px;
  inset-inline-start: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tyh-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(242,122,26,.4);
  pointer-events: none;
  display: none;
}
.tyh-cart.has-items .tyh-cart__badge{ display: inline-block; }
.tyh-cart.has-items .tyh-cart__deco{ color: var(--tyh-orange); }

/* The cart button is now an action-styled button.
   common.js replaces its inner HTML, so we leave it as-is and style the chrome. */
#cart.tyh-cart > button,
.tyh-cart__btn{
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  min-width: 88px;
  height: auto !important;
  padding: 36px 12px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--tyh-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
/* Hide bootstrap's caret */
#cart.tyh-cart > button::after,
.tyh-cart__btn::after,
#cart.tyh-cart > button .caret,
.tyh-cart__btn .caret{ display: none !important; }

#cart.tyh-cart > button:hover,
#cart.tyh-cart.open > button,
.tyh-cart__btn:hover,
.tyh-cart__btn:focus{
  background: var(--tyh-orange-soft) !important;
  color: var(--tyh-orange) !important;
}
#cart.tyh-cart.open .tyh-cart__deco,
#cart.tyh-cart > button:hover ~ .tyh-cart__deco{ color: var(--tyh-orange); }

.tyh-cart__label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}
#cart-total{
  display: block !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--tyh-orange);
  letter-spacing: .2px;
  margin: 0 !important;
}
#cart-total .fa{ display: none !important; }

/* Cart dropdown panel */
#cart.tyh-cart .dropdown-menu,
.tyh-cart__menu{
  margin-top: 6px;
  min-width: 360px !important;
  max-width: 92vw;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--tyh-line);
  box-shadow: var(--tyh-shadow-lg);
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  z-index: 1050;
}
#cart.tyh-cart .dropdown-menu .table{ margin-bottom: 8px; }
#cart.tyh-cart .dropdown-menu .table > tbody > tr > td{
  padding: 8px 6px;
  border-color: var(--tyh-line);
  font-size: 13px;
  vertical-align: middle;
}
#cart.tyh-cart .dropdown-menu .img-thumbnail{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border-color: var(--tyh-line);
  padding: 2px;
}
#cart.tyh-cart .dropdown-menu .table > tbody > tr > td a{
  color: var(--tyh-ink);
  font-weight: 600;
  text-decoration: none;
}
#cart.tyh-cart .dropdown-menu .table > tbody > tr > td a:hover{ color: var(--tyh-orange); }
#cart.tyh-cart .dropdown-menu .btn-danger{
  background: #fff;
  border: 1px solid #f1c4c4;
  color: #d9534f;
  border-radius: 6px;
  box-shadow: none;
}
#cart.tyh-cart .dropdown-menu .btn-danger:hover{
  background: #d9534f; color:#fff; border-color:#d9534f;
}
#cart.tyh-cart .dropdown-menu p.text-right{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 6px 0 0;
}
#cart.tyh-cart .dropdown-menu p.text-right a{
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
}
#cart.tyh-cart .dropdown-menu p.text-right a:first-child{
  background: #fff;
  border: 1px solid var(--tyh-orange);
  color: var(--tyh-orange) !important;
}
#cart.tyh-cart .dropdown-menu p.text-right a:last-child{
  background: linear-gradient(135deg, var(--tyh-orange) 0%, var(--tyh-orange-dark) 100%);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(242,122,26,.28);
  border: 0;
}
#cart.tyh-cart .dropdown-menu p.text-center{
  margin: 22px 0;
  color: var(--tyh-muted);
  font-size: 14px;
}

/* =========================================================
   7) CATEGORIES BAR
   ========================================================= */
.atl-mega-wrap{
  background: #fff !important;
  border-bottom: 1px solid var(--tyh-line) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.04) !important;
  background-image: none !important;
  position: relative;
  z-index: 30;
}
#menu.atl-mega{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: var(--tyh-h-cats);
}
.atl-mega__list{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.atl-mega__list::-webkit-scrollbar{ height: 4px; }
.atl-mega__list::-webkit-scrollbar-thumb{ background: var(--tyh-line-2); border-radius: 4px; }

.atl-mega__item{
  margin: 0 !important;
  display: inline-flex;
  align-items: stretch;
  position: relative;
}
.atl-mega__link{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 14px 16px !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--tyh-ink) !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease;
}
.atl-mega__link::after{
  content:"";
  position:absolute;
  inset-inline: 14px;
  bottom: 0;
  height: 3px;
  background: var(--tyh-orange);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.atl-mega__item:hover > .atl-mega__link,
.atl-mega__item.is-open > .atl-mega__link{
  color: var(--tyh-orange) !important;
  background: transparent !important;
}
.atl-mega__item:hover > .atl-mega__link::after,
.atl-mega__item.is-open > .atl-mega__link::after{
  transform: scaleX(1);
}
.atl-mega__caret{
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
  transition: transform .2s ease;
}
.atl-mega__item:hover .atl-mega__caret,
.atl-mega__item.is-open .atl-mega__caret{
  transform: rotate(180deg);
}

/* Mobile toggle */
.atl-mega__toggle{
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tyh-orange-soft);
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tyh-orange);
  margin: 8px 0;
}
.atl-mega__toggle-icon{
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}
.atl-mega__toggle-icon i{
  display: block;
  height: 2px;
  background: var(--tyh-orange);
  border-radius: 2px;
}

@media (max-width: 991.98px){
  .atl-mega__toggle{ display: inline-flex; }
  .atl-mega__list{
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }
  #menu.atl-mega.is-open .atl-mega__list{
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: 8px !important;
  }
  .atl-mega__link{ padding: 12px 14px !important; }
  .atl-mega__link::after{ display:none; }
  .atl-mega__item:hover > .atl-mega__link,
  .atl-mega__item.is-open > .atl-mega__link{
    background: var(--tyh-orange-soft) !important;
  }
}

/* Mega panel */
.atl-mega__panel{
  position: fixed;
  top: var(--atl-mega-top, 100%);
  inset-inline-start: var(--atl-mega-left, 0);
  width: var(--atl-mega-width, 100%);
  background: #fff;
  border: 1px solid var(--tyh-line);
  border-radius: 12px;
  box-shadow: var(--tyh-shadow-lg);
  padding: 18px 22px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.atl-mega__item.is-open > .atl-mega__panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.atl-mega__panelHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tyh-line);
}
.atl-mega__panelTitle{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--tyh-ink);
}
.atl-mega__seeAll{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tyh-orange);
  text-decoration: none;
}
.atl-mega__seeAll:hover{ color: var(--tyh-orange-dark); }
.atl-mega__seeAllArrow{
  display: inline-block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}
[dir="rtl"] .atl-mega__seeAllArrow{
  border-width: 4px 6px 4px 0;
  border-color: transparent currentColor transparent transparent;
}
.atl-mega__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px 18px;
}
@media (max-width: 991.98px){
  .atl-mega__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .atl-mega__panel{
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 14px 12px;
    transform: none;
    width: 100% !important;
    inset: auto !important;
  }
}
.atl-mega__sub{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  font-size: 13px;
  color: var(--tyh-ink) !important;
  text-decoration: none !important;
  border-radius: 6px;
}
.atl-mega__sub:hover{
  background: var(--tyh-orange-soft);
  color: var(--tyh-orange) !important;
}
.atl-mega__subDot{
  width: 5px; height: 5px;
  background: var(--tyh-orange);
  border-radius: 999px;
  display: inline-block;
  opacity: .55;
}

/* =========================================================
   8) STICKY-ON-SCROLL  (compact main bar)
   ========================================================= */
body.tyh-is-sticky header{
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1040;
  box-shadow: var(--tyh-shadow-md) !important;
  animation: tyh-slidedown .25s ease both;
}
body.tyh-is-sticky header > .container{
  padding-top: 8px;
  padding-bottom: 8px;
}
body.tyh-is-sticky #search.atl-search,
body.tyh-is-sticky .tyh-search{ height: 42px; }
body.tyh-is-sticky #search.atl-search .input-group-btn .btn,
body.tyh-is-sticky .tyh-search .tyh-search__btn{ min-height: 42px; }
body.tyh-is-sticky .atl-logo__img,
body.tyh-is-sticky .tyh-logo__img{ height: 36px; }
body.tyh-is-sticky #cart.tyh-cart > button{ padding: 30px 12px 6px !important; }
body.tyh-is-sticky .tyh-cart__deco{ top: 6px; }
body.tyh-is-sticky .tyh-action,
body.tyh-is-sticky .tyh-action__link{ padding-top: 4px; padding-bottom: 4px; }
body.tyh-is-sticky{ padding-top: var(--tyh-stickyspace, 76px); }

@keyframes tyh-slidedown{
  from{ transform: translateY(-12px); opacity: 0; }
  to  { transform: translateY(0);     opacity: 1; }
}

/* =========================================================
   9) RESPONSIVE LAYOUT
   ========================================================= */
@media (max-width: 991.98px){
  header > .container > .row,
  header .row{ gap: 10px; }
  header .row > .col-sm-4{ order: 1; }
  header .row > .col-sm-3{ order: 2; }
  header .row > .col-sm-5{ order: 3; flex: 1 1 100%; }
  .tyh-action,
  .tyh-action__link{ min-width: 64px; padding: 6px 8px; }
  #cart.tyh-cart > button,
  .tyh-cart__btn{ min-width: 76px; padding: 30px 8px 6px !important; }
}
@media (max-width: 575.98px){
  .tyh-actions{ gap: 2px; }
  .tyh-action__label,
  .tyh-cart__label{ display: none; }
  #cart-total{ display: none !important; }
  .tyh-action,
  .tyh-action__link{ min-width: 44px; padding: 6px 6px; }
  #cart.tyh-cart > button,
  .tyh-cart__btn{ min-width: 44px; padding: 8px !important; height: 42px !important; }
  .tyh-cart__deco{ position: static; transform: none; top: auto; }
  [dir="rtl"] .tyh-cart__deco{ transform: none; }
  .tyh-cart__badge{ top: -2px; inset-inline-end: -2px; }
  body.tyh-is-sticky #cart.tyh-cart > button{ padding: 8px !important; }
}

/* =========================================================
   10) RTL fine-tuning  (already mostly handled via logical props)
   ========================================================= */
[dir="rtl"] header .row > .col-sm-3{ margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] #top-links{ margin-inline-start: auto !important; }
header .row .pull-right,
header .row .pull-left{ float: none !important; }

/* Hide legacy Mobikul promo strip if empty */
.app-link:empty{ display: none; }

/* =========================================================
   11) SAFE OVERRIDES — undo legacy header styles from
   stylesheet-a.css that fight the new look.
   ========================================================= */
#header, header#header, .atl-header{
  background-image: none !important;
}
#logo a, .logo a{ letter-spacing: normal; }

/* prevent legacy brand layer from shadowing the topbar */
#top.atl-topbar-lux{
  background-image: none !important;
  background: #FAFAFA !important;
  box-shadow: none !important;
}