/*
 * Ketabika mobile homepage rebuild.
 * This is the only Ketabika redesign stylesheet enabled below 701px.
 * Normal document flow is intentional: header -> main content -> footer.
 */
@media (max-width: 700px) {
  :root { color-scheme: light; }
  html {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    scroll-behavior: auto;
    background: #f6f7fb !important;
  }
  html body {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-x: clip !important;
    background: #f6f7fb !important;
    color: #20264a;
    font-family: Tahoma, Arial, sans-serif;
    line-height: 1.65;
  }
  html body * { box-sizing: border-box; }
  html body > header.site-header,
  html body > main,
  html body > footer.footer {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }
  html body > main {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body > main > section {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible;
  }
  .container,
  html body main > .container,
  html body footer > .container {
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Header */
  html body > header.site-header {
    z-index: 50 !important;
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid #e3e6f2 !important;
    box-shadow: 0 3px 14px rgba(33, 39, 100, .07);
    overflow: visible !important;
  }
  .site-header > .header-row,
  .site-header .header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "logo actions" "search search" "nav nav" !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px 9px !important;
    overflow: visible !important;
  }
  .site-header .logo {
    grid-area: logo !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    overflow: hidden !important;
  }
  .site-header .site-logo-image {
    display: block !important;
    width: auto !important;
    max-width: min(42vw, 170px) !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }
  .site-header .logo-fallback-text { font-size: 18px !important; }
  .site-header .header-actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .site-header .header-action-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 34px !important;
    min-height: 36px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
    background: #f3f4ff !important;
    color: #3738b9 !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .site-header .header-favorite-link,
  .site-header .header-account-name { display: none !important; }
  .site-header .header-action-icon { font-size: 17px !important; }
  .site-header .search {
    grid-area: search !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
  }
  .site-header .search input {
    width: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 9px 12px !important;
    border: 1px solid #dfe2f1 !important;
    border-radius: 0 10px 10px 0 !important;
    background: #f9faff !important;
    font-size: 13px !important;
  }
  .site-header .search button {
    flex: 0 0 auto !important;
    padding: 0 15px !important;
    border-radius: 10px 0 0 10px !important;
    background: #3d3cc4 !important;
  }
  .site-header .mobile-nav-toggle {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    top: 12px !important;
    z-index: 100004 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 9px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 11px !important;
    background: #3938bc !important;
    box-shadow: 0 4px 12px rgba(57,56,188,.24) !important;
  }
  .site-header .mobile-nav-toggle span {
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    min-height: 2px !important;
    padding: 0 !important;
    border-radius: 2px !important;
    background: #fff !important;
  }
  .site-header nav.primary-nav {
    grid-area: nav !important;
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 74px) !important;
    margin: 0 !important;
    padding: 9px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    color: #29286f !important;
    border: 1px solid #e0e1fb !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 38px rgba(39,38,133,.24) !important;
    z-index: 100003 !important;
  }
  body.mobile-nav-open .site-header nav.primary-nav { display: flex !important; }
  .site-header nav.primary-nav > a,
  .site-header nav.primary-nav > .nav-item,
  .site-header nav.primary-nav > .nav-item > .nav-main-link {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    color: #302f7f !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }
  .site-header nav.primary-nav > .nav-item { flex-direction: column !important; align-items: stretch !important; }
  .site-header nav.primary-nav .nav-submenu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 3px 0 6px !important;
    padding: 5px !important;
    overflow: visible !important;
    background: #f4f4ff !important;
    border: 1px solid #e5e4fb !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .site-header nav.primary-nav .nav-item.submenu-open > .nav-submenu { display: block !important; }

  /* Hero banner: keep the existing banner art, but rebuild its phone layout. */
  html body main > .hero.ketabika-promo-hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .ketabika-promo-hero .promo-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    gap: 0 !important;
  }
  .ketabika-promo-hero .promo-book-art,
  .ketabika-promo-hero .promo-line-art { display: none !important; }
  .ketabika-promo-hero .promo-hero-copy {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 14px !important;
    transform: none !important;
    text-align: center !important;
    color: #292d8f !important;
    background: rgba(250,250,255,.88) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(34,37,135,.12) !important;
  }
  .promo-eyebrow { font-size: 12px !important; }
  .ketabika-promo-hero .promo-hero-copy h1 {
    margin: 8px 0 !important;
    font-size: clamp(27px, 7.4vw, 35px) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }
  .ketabika-promo-hero .promo-hero-copy p { margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.9 !important; }
  .ketabika-promo-hero .promo-shop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 43px !important;
    padding: 9px 20px !important;
    border-radius: 11px !important;
    background: #3938bc !important;
    color: #fff !important;
  }

  /* Categories and product rails */
  .section { padding: 24px 0 !important; }
  .category-showcase { padding-top: 24px !important; padding-bottom: 20px !important; }
  .category-showcase-head { display: block !important; margin: 0 0 14px !important; }
  .category-showcase-head h2,
  .section-head h2 { margin: 0 !important; font-size: 20px !important; line-height: 1.5 !important; color: #242b75 !important; }
  .category-showcase-head p { margin: 5px 0 0 !important; color: #747b98 !important; font-size: 13px !important; }
  .category-grid,
  #categoryGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 9px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .category-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 112px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 13px !important;
    background: #fff !important;
    border: 1px solid #e7e8f4 !important;
    box-shadow: 0 3px 12px rgba(37,40,112,.04) !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .category-icon { display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; margin-bottom: 6px !important; color: #4845cf !important; background: #f0f0ff !important; border-radius: 10px !important; }
  .category-icon svg { width: 26px !important; height: 26px !important; }
  .category-tile-title { font-size: 13px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; }
  .category-tile-count { font-size: 11px !important; color: #8187a2 !important; }
  .category-more-wrap { max-width: 100% !important; }
  .category-more-wrap button { min-height: 38px !important; border-radius: 9px !important; }

  .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }
  .section-head > div { min-width: 0 !important; }
  .section-head .muted { display: block !important; font-size: 12px !important; }
  .section-head .btn { flex: 0 0 auto !important; padding: 8px 11px !important; font-size: 12px !important; }
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .product-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid #e7e9f2 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(35,39,100,.05) !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .product-card .cover { flex: none !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important; }
  .product-card .cover img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .product-info { min-width: 0 !important; padding: 10px !important; }
  .product-info h3 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; font-size: 13px !important; line-height: 1.55 !important; }
  .product-info .author { min-height: 0 !important; font-size: 11px !important; }
  .product-info .price { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 7px !important; font-size: 13px !important; }
  .card-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 9px !important; }
  .card-actions .btn { flex: 1 1 100% !important; min-height: 36px !important; padding: 7px !important; font-size: 11px !important; }
  .empty { padding: 28px 14px !important; font-size: 13px !important; }

  /* Footer stays in natural flow after main. No flex viewport filler or fixed height. */
  html body > footer.footer {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 25px 0 0 !important;
    color: #f2f2ff !important;
    background: linear-gradient(145deg, #3036ac, #4946d5) !important;
    border: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
  .footer-grid h3, .footer-grid h4 { margin: 0 0 6px !important; color: #fff !important; font-size: 15px !important; }
  .footer-grid p { margin: 0 !important; font-size: 12px !important; line-height: 1.8 !important; }
  .footer-grid a { margin: 5px 0 !important; color: #f2f2ff !important; font-size: 12px !important; overflow-wrap: anywhere; }
  .footer-contact-info { min-width: 0 !important; }
  .footer-email-link { display: flex !important; align-items: center !important; gap: 7px !important; }
  .footer-email-link span { min-width: 0 !important; overflow-wrap: anywhere !important; }
  .footer-social-icons { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 12px !important; }
  .footer-social-icons .social-icon-btn { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.14) !important; }
  .footer-social-icons .social-badge { position: absolute !important; top: -4px !important; right: -4px !important; font-size: 9px !important; }
  .copyright { margin: 18px 0 0 !important; padding: 13px 14px max(14px, env(safe-area-inset-bottom)) !important; border-top: 1px solid rgba(255,255,255,.2) !important; color: #e3e4ff !important; font-size: 11px !important; line-height: 1.7 !important; text-align: center !important; }

  /* Floating UI must never become an in-flow child and extend page height. */
  html body > #scroll-progress,
  html body > #back-to-top,
  html body > .cart-drawer-overlay,
  html body > .cart-drawer {
    position: fixed !important;
    flex: none !important;
  }
  #scroll-progress { top: 0 !important; right: 0 !important; left: 0 !important; z-index: 200000 !important; }
  #back-to-top { right: 14px !important; bottom: 14px !important; width: 42px !important; height: 42px !important; line-height: 42px !important; z-index: 200001 !important; }
  .cart-drawer-overlay { inset: 0 !important; z-index: 200010 !important; }
  .cart-drawer { top: 0 !important; right: 0 !important; bottom: 0 !important; height: 100dvh !important; max-height: 100dvh !important; z-index: 200011 !important; }
  html body::before,
  html body::after,
  html body > footer.footer::before,
  html body > footer.footer::after { content: none !important; display: none !important; }

  img, video, iframe { max-width: 100% !important; }
  input, select, textarea, button { max-width: 100%; }
}


/* Mobile navigation panel: compact natural-height list, not distributed over viewport. */
@media (max-width: 700px) {
  html body > header.site-header,
  html body > header.site-header > .container.header-row,
  html body > header.site-header .header-row {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    overflow: visible !important;
  }
  html body > header.site-header nav#primary-navigation,
  html body > header.site-header .header-row > nav#primary-navigation,
  html body > header.site-header nav.primary-nav {
    position: fixed !important;
    top: 112px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 126px) !important;
    margin: 0 !important;
    padding: 8px !important;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #dfe2ff !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(39,38,133,.2) !important;
    z-index: 100003 !important;
  }
  html body.mobile-nav-open > header.site-header nav#primary-navigation,
  html body.mobile-nav-open > header.site-header .header-row > nav#primary-navigation,
  html body.mobile-nav-open > header.site-header nav.primary-nav {
    display: flex !important;
  }
  html body > header.site-header nav#primary-navigation > a,
  html body > header.site-header nav#primary-navigation > .nav-item {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
    white-space: normal !important;
  }
  html body > header.site-header nav#primary-navigation > a,
  html body > header.site-header nav#primary-navigation > .nav-item > .nav-main-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #302f7f !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: right !important;
    white-space: normal !important;
  }
  html body > header.site-header nav#primary-navigation > a:hover,
  html body > header.site-header nav#primary-navigation > .nav-item > .nav-main-link:hover {
    background: #f2f2ff !important;
  }
  html body > header.site-header nav#primary-navigation > .nav-item.has-submenu {
    display: block !important;
    align-self: auto !important;
  }
  html body > header.site-header nav#primary-navigation .nav-submenu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 4px !important;
    padding: 4px !important;
    overflow: visible !important;
    background: #f6f6ff !important;
    border: 1px solid #e9e8ff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body > header.site-header nav#primary-navigation .nav-item.submenu-open > .nav-submenu {
    display: block !important;
  }
  html body > header.site-header nav#primary-navigation .nav-submenu a {
    display: block !important;
    width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: #302f7f !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
  html body > header.site-header .mobile-nav-toggle {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 100004 !important;
  }
}


/* Header action buttons: compact icon-only controls with favorites visible. */
@media (max-width: 700px) {
  html body > header.site-header .header-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "logo actions" "search search" "nav nav" !important;
    column-gap: 8px !important;
    padding: 10px 12px 9px 58px !important;
  }
  html body > header.site-header .logo {
    grid-area: logo !important;
    justify-self: end !important;
    min-width: 0 !important;
  }
  html body > header.site-header .site-logo-image {
    max-width: min(34vw, 140px) !important;
    max-height: 38px !important;
  }
  html body > header.site-header .header-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body > header.site-header .header-action-link {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 36px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e1e3fb !important;
    border-radius: 10px !important;
    background: #f5f5ff !important;
    color: #3938bc !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
  html body > header.site-header .header-action-link > span:not(.header-action-icon):not(.header-account-avatar) {
    display: none !important;
  }
  html body > header.site-header .header-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #3938bc !important;
  }
  html body > header.site-header .header-login-link .header-account-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    font-size: 14px !important;
  }
  html body > header.site-header .header-favorite-link {
    display: inline-flex !important;
    order: 1 !important;
  }
  html body > header.site-header .header-login-link { order: 2 !important; }
  html body > header.site-header .header-cart-link { order: 3 !important; }
  html body > header.site-header .cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border: 2px solid #fff !important;
    border-radius: 99px !important;
    background: #e83e68 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  html body > header.site-header .mobile-nav-toggle {
    top: 10px !important;
    left: 10px !important;
    width: 40px !important;
    height: 40px !important;
  }
}


/* Final mobile header alignment: hamburger belongs to the icon button group. */
@media (max-width: 700px) {
  html body > header.site-header .header-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body > header.site-header .header-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
  }
  html body > header.site-header .mobile-nav-toggle {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    order: 4 !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 10px !important;
    background: #3938bc !important;
    box-shadow: 0 3px 8px rgba(57,56,188,.18) !important;
    transform: none !important;
    z-index: 100004 !important;
  }
  html body > header.site-header .header-favorite-link .favorite-heart-icon {
    display: inline-flex !important;
    color: #e53968 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
}


/* Mobile header alignment: brand anchored at the right, controls grouped left. */
@media (max-width: 700px) {
  html body > header.site-header .header-row {
    direction: rtl !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "logo actions" "search search" "nav nav" !important;
    align-items: center !important;
    column-gap: 8px !important;
    padding: 10px 12px 9px !important;
  }
  html body > header.site-header .logo {
    grid-area: logo !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 38vw !important;
    min-width: 0 !important;
  }
  html body > header.site-header .site-logo-image {
    display: block !important;
    max-width: 38vw !important;
    max-height: 38px !important;
    object-fit: contain !important;
  }
  html body > header.site-header .header-actions {
    grid-area: actions !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Hide the category showcase on phones only; desktop layout remains untouched. */
@media (max-width: 700px) {
  html body #categories.category-showcase {
    display: none !important;
  }
}