/* Header uniform theme overrides */
.main-navbar a { padding: 0.6rem 1.2rem !important; font-size: 16px !important; font-weight: 600 !important; color: var(--gray-color) !important; }
.site-header .main-navbar a:hover,
.site-header .main-navbar a.active {
  background: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.site-header .main-navbar a:not(.active):hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}
.site-header .main-navbar a.active:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}
@media (min-width: 769px) { .main-navbar .nav-account-wrap { display: none !important; } }
.header-icons { gap: 1.5rem !important; }
.header-icons { padding-right: calc(28px + env(safe-area-inset-right, 0px)) !important; }
.header-icons .icon-link:last-child, .header-icons .icon-btn:last-child { margin-right: 16px !important; }
.header-icons .icon-link, .header-icons .icon-btn { font-size: 24px !important; }
.site-header .header-icons .icon-link:hover,
.site-header .header-icons .icon-btn:hover {
  color: var(--primary-color) !important;
  background: var(--secondary-color) !important;
}
.search-input { padding: 0.6rem 1.2rem !important; font-size: 15px !important; }
#menu-btn, #menu-btn i { font-size: 24px !important; }
@media (max-width: 768px) { #menu-btn { display: block !important; } }
@media (min-width: 769px) { #menu-btn { display: none !important; } }
.badge { width: 20px !important; height: 20px !important; font-size: 0.75rem !important; }
@media (max-width: 768px) {
  body { font-size: 14px !important; line-height: 1.6 !important; }
  .header-icons { gap: 1rem !important; }
  .header-icons .icon-link, .header-icons .icon-btn { font-size: 20px !important; }
  .header-container { padding-left: clamp(24px, 7vw, 48px) !important; padding-right: clamp(24px, 7vw, 48px) !important; }
  .header-icons { padding-right: 0 !important; }
  .header-icons .icon-link:last-child, .header-icons .icon-btn:last-child { margin-right: 0 !important; }
  .search-input { width: 135px !important; padding: 0.55rem 1.1rem !important; font-size: 14px !important; }
  .search-input::placeholder { font-size: 14px !important; }
  .search-input:focus { width: 185px !important; }
  .site-header .search-container { position: relative !important; }
  .site-header #searchForm.search-form { position: relative !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: nowrap !important; }
  .site-header .search-container:focus-within #searchInput { display: block !important; }
  .site-header #searchInput.search-input { padding-right: 2.8rem !important; }
  .site-header #searchToggleBtn.icon-btn {
    margin: 0 !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .site-header .search-container:focus-within #searchForm.search-form,
  .site-header #searchForm.search-form:focus-within {
    width: 185px !important;
  }
  .site-header .search-container:focus-within #searchInput.search-input,
  .site-header #searchForm.search-form:focus-within #searchInput.search-input {
    width: 100% !important;
    display: block !important;
  }
  .site-header .search-container:focus-within #searchToggleBtn.icon-btn,
  .site-header #searchForm.search-form:focus-within #searchToggleBtn.icon-btn {
    position: absolute !important;
    right: 0.15rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }
  .main-navbar .nav-account-dropdown .btn.btn-primary {
    background: var(--primary-color) !important;
    color: #fff !important;
  }
  .main-navbar .nav-account-dropdown .btn.btn-primary:hover {
    background: var(--primary-dark) !important;
  }
  .logo img { height: 40px !important; }
  .badge { width: 18px !important; height: 18px !important; font-size: 0.7rem !important; }
  /* Avoid header slide-up on mobile to prevent masking */
  body.scrolled .site-header { transform: none !important; }
}
@media (max-width: 768px) {
  .header-container { display: grid !important; grid-template-columns: auto auto 1fr auto !important; grid-template-areas: "menu search logo cart" !important; align-items: center !important; column-gap: 12px !important; }
  #menu-btn { grid-area: menu !important; }
  .header-icons { display: contents !important; }
  .search-ui { grid-area: search !important; }
  .logo { grid-area: logo !important; justify-self: center !important; }
  .cart-link { grid-area: cart !important; justify-self: end !important; }
  .header-account { display: none !important; }
}
/* Stronger right safe-area padding for index only on mobile */
@media (max-width: 768px) {
  /* Mobile-only: add robust right padding using clamp to cover devices like Galaxy A34 */
  .index-page .header-container { padding-right: clamp(32px, 7vw, 44px) !important; }
  .index-page .header-icons { gap: 0.6rem !important; padding-right: clamp(28px, 6vw, 40px) !important; }
  .index-page .header-icons .icon-link, .index-page .header-icons .icon-btn { font-size: 18px !important; }
  .index-page .header-icons .icon-link:last-child, .index-page .header-icons .icon-btn:last-child { margin-right: clamp(16px, 4vw, 20px) !important; }
  .index-page .search-input { width: 140px !important; }
}
@media (max-width: 360px) {
  .search-input { width: 120px !important; font-size: 13px !important; }
  .search-input::placeholder { font-size: 13px !important; }
  .search-input:focus { width: 170px !important; }
}
@media (max-width: 400px) {
  .header-container { padding-right: calc(22px + env(safe-area-inset-right, 0px)) !important; }
  .header-icons { gap: 0.6rem !important; }
  .header-icons .icon-link, .header-icons .icon-btn { font-size: 18px !important; }
}
@media (max-width: 320px) {
  .search-input { width: 105px !important; font-size: 12px !important; }
  .search-input::placeholder { font-size: 12px !important; }
  .search-input:focus { width: 140px !important; }
  .header-icons { gap: 0.6rem !important; }
}
:root { --promo-height: 40px; }
.promo-banner { height: auto !important; min-height: 40px; font-size: 16px !important; }
@media (max-width: 768px) { .promo-banner { font-size: 14px !important; } }
@media (max-width: 360px) { .promo-banner { font-size: 13px !important; } }
@media (max-width: 320px) { .promo-banner { font-size: 12px !important; } }
.promo-banner { overflow: visible !important; white-space: normal !important; }
.promo-banner .promo-content { display: flex !important; align-items: center !important; justify-content: center !important; padding: 6px 12px !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; animation: none !important; will-change: auto !important; }
.promo-vertical { display: none !important; }
/* Safe-area and overflow fixes for mobile with notches */
.promo-banner { top: env(safe-area-inset-top, 0px) !important; width: 100% !important; }
.site-header { top: calc(var(--promo-height) + env(safe-area-inset-top, 0px)) !important; width: 100% !important; left: 0; right: 0; overflow: visible; z-index: 10000 !important; }
.index-page .header-icons { padding-right: 0 !important; }
body { padding-top: calc(var(--header-height) + var(--promo-height) + env(safe-area-inset-top, 0px)) !important; }
.header-container { padding-left: calc(18px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(18px + env(safe-area-inset-right, 0px)) !important; gap: 0.75rem !important; }
.header-desktop-right { padding-right: 18px !important; }
@media (min-width: 1024px) {
  .header-container { padding-right: calc(18px + env(safe-area-inset-right, 0px)) !important; }
  .header-icons { padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important; }
  .header-icons .icon-link:last-child, .header-icons .icon-btn:last-child { margin-right: 6px !important; }
}
.search-container { flex: 1 1 auto !important; min-width: 0 !important; }
.header-icons { flex: 0 0 auto !important; }