/* Ketabika dedicated mobile experience — loaded after all legacy styles */
@media (max-width: 700px) {
  :root { --mobile-gutter: 14px; }
  html { -webkit-text-size-adjust: 100%; }
  body { width: 100%; max-width: 100%; overflow-x: clip; }
  main, section, header, footer, .container { min-width: 0; }
  .container { width: calc(100% - 2 * var(--mobile-gutter)) !important; max-width: 100% !important; margin-inline: auto !important; }
  .site-header { position: relative; width: 100%; max-width: 100%; }
  .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; gap: 9px 8px !important; width: calc(100% - 20px) !important; padding: 10px 0 0 !important; margin-inline: auto !important; }
  .site-header .logo { grid-area: logo; min-width: 0 !important; min-height: 42px !important; max-width: 100%; justify-content: flex-start; overflow: hidden; }
  .site-header .site-logo-image { display: block; width: auto !important; max-width: min(42vw, 155px) !important; max-height: 42px !important; object-fit: contain; }
  .site-header .logo-fallback-text { font-size: 19px !important; }
  .site-header .header-actions { grid-area: actions; display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; gap: 5px !important; min-width: 0; }
  .site-header .header-action-link { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px !important; min-width: 38px; min-height: 38px !important; padding: 5px 7px !important; border-radius: 11px; font-size: 11px !important; white-space: nowrap; }
  .site-header .header-favorite-link { display: none !important; }
  .site-header .header-login-link > span:not(.header-action-icon):not(.header-account-avatar) { display: none !important; }
  .site-header .header-account-name { display: none !important; }
  .site-header .header-action-icon { font-size: 18px !important; line-height: 1; }
  .site-header .cart-badge { position: absolute; top: -4px; inset-inline-start: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 20px; font-size: 10px; line-height: 17px; text-align: center; }
  .site-header form.search { grid-area: search; display: flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 43px !important; margin: 0 0 2px !important; border-radius: 12px; overflow: hidden; }
  .site-header form.search input { width: 0 !important; min-width: 0 !important; flex: 1 1 auto !important; font-size: 14px !important; }
  .site-header form.search button { flex: 0 0 auto; padding-inline: 15px; }
  .site-header nav.primary-nav { grid-area: nav; display: flex !important; align-items: center; gap: 4px !important; width: calc(100% + 20px) !important; max-width: none !important; min-height: 43px !important; margin-inline: -10px !important; padding: 0 10px 7px !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap; flex-wrap: nowrap !important; justify-content: flex-start !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-header nav.primary-nav::-webkit-scrollbar { display: none; }
  .site-header nav.primary-nav > a, .site-header nav.primary-nav .nav-main-link { display: inline-flex !important; align-items: center; min-height: 34px !important; padding: 0 12px !important; border-radius: 18px; font-size: 12px !important; line-height: 1.2; flex: 0 0 auto !important; }
  .site-header nav.primary-nav .nav-item { flex: 0 0 auto !important; }
  .site-header nav.primary-nav .nav-submenu { position: fixed !important; z-index: 9999; top: auto !important; inset-inline: 12px !important; width: auto !important; max-width: calc(100vw - 24px) !important; max-height: 55vh; overflow-y: auto; }
  .ketabika-promo-hero, .hero.ketabika-promo-hero { min-height: 0 !important; height: auto !important; margin: 0 !important; overflow: hidden; border-radius: 0 0 22px 22px; }
  .ketabika-promo-hero .promo-hero-inner { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; width: calc(100% - 28px) !important; min-height: 0 !important; padding: 23px 0 25px !important; }
  .ketabika-promo-hero .promo-book-art, .ketabika-promo-hero .promo-line-art { display: none !important; }
  .ketabika-promo-hero .promo-hero-copy { grid-column: 1 !important; order: 1; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 20px 17px !important; transform: none !important; text-align: right !important; border-radius: 18px; box-sizing: border-box; }
  .ketabika-promo-hero .promo-eyebrow { font-size: 12px !important; }
  .ketabika-promo-hero .promo-hero-copy h1 { max-width: 100% !important; margin: 8px 0 10px !important; font-size: clamp(27px, 7vw, 34px) !important; line-height: 1.35 !important; }
  .ketabika-promo-hero .promo-hero-copy p { max-width: 100% !important; font-size: 13px !important; line-height: 1.9 !important; }
  .ketabika-promo-hero .promo-shop-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 8px; }
  .section { padding-block: 22px !important; }
  .category-showcase-head { display: block !important; margin-bottom: 14px !important; }
  .category-showcase-head h2, .section-head h2 { font-size: 20px !important; line-height: 1.45; }
  .category-showcase-head p { font-size: 12px; line-height: 1.8; }
  .category-grid, #categoryGrid, .product-grid, .media-grid, .result-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; }
  .category-tile, #categoryGrid > .category-tile { min-width: 0 !important; min-height: 112px !important; padding: 11px 7px !important; border-radius: 13px !important; box-sizing: border-box; }
  .category-tile-title { font-size: 12px !important; line-height: 1.5; overflow-wrap: anywhere; }
  .category-tile-count { font-size: 10px !important; }
  .product-card { min-width: 0 !important; width: 100% !important; overflow: hidden; border-radius: 13px !important; }
  .product-card .cover { display: flex; align-items: center; justify-content: center; height: clamp(145px, 46vw, 205px) !important; min-height: 0 !important; padding: 8px !important; box-sizing: border-box; }
  .product-card .cover img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
  .product-info { min-width: 0 !important; padding: 9px !important; }
  .product-info h3 { font-size: 12px !important; line-height: 1.55 !important; min-height: 0 !important; overflow-wrap: anywhere; }
  .product-info .price { font-size: 14px !important; }
  .card-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .card-actions .btn, .product-card .btn { flex: 1 1 100%; min-height: 36px; padding: 8px 6px !important; font-size: 11px !important; }
  .section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between; flex-wrap: wrap !important; gap: 9px !important; }
  .detail-grid, .product-detail-grid, .contact-grid, .about-highlights { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 17px !important; }
  .detail-cover { width: 100%; max-width: 230px !important; margin-inline: auto !important; }
  .detail h1, .product-detail h1 { font-size: 24px !important; line-height: 1.5; overflow-wrap: anywhere; }
  .footer-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 17px !important; }
  img, video, iframe, svg { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
  .container *, .section *, .product-card, .category-tile { min-width: 0; }
  h1, h2, h3, p, a, label, td, th { overflow-wrap: anywhere; }
  .table-wrap, .cart-table-wrap, .orders-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 380px) {
  :root { --mobile-gutter: 10px; }
  .site-header .header-row { width: calc(100% - 16px) !important; }
  .site-header .site-logo-image { max-width: 38vw !important; }
  .site-header .header-action-link { min-width: 34px; padding: 4px !important; }
  .category-grid, #categoryGrid, .product-grid, .media-grid, .result-grid { gap: 7px !important; }
  .product-card .cover { height: 142px !important; }
}


/* Final responsive overrides based on current www3 package */
@media (max-width: 700px) {
  html, body { width:100% !important; max-width:100vw !important; overflow-x:hidden !important; }
  .site-header { width:100% !important; max-width:100vw !important; }
  .site-header > .container.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:calc(100% - 20px) !important; max-width:none !important;
    padding:9px 0 0 !important; margin:0 auto !important;
  }
  .site-header .logo { grid-area:logo !important; min-width:0 !important; }
  .site-header .site-logo-image { max-width:42vw !important; max-height:40px !important; object-fit:contain !important; }
  .site-header .search { grid-area:search !important; display:flex !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; }
  .site-header .search input { flex:1 1 auto !important; width:0 !important; min-width:0 !important; }
  .site-header .header-actions { grid-area:actions !important; display:flex !important; flex-wrap:nowrap !important; min-width:0 !important; }
  .site-header .header-action-link { min-width:34px !important; padding:6px !important; white-space:nowrap !important; }
  .site-header .header-favorite-link { display:none !important; }
  .site-header .header-login-link > span:not(.header-action-icon):not(.header-account-avatar) { display:none !important; }
  .site-header nav.primary-nav { grid-area:nav !important; display:flex !important; width:calc(100% + 20px) !important; max-width:none !important; overflow-x:auto !important; flex-wrap:nowrap !important; justify-content:flex-start !important; gap:5px !important; margin:0 -10px !important; padding:4px 10px 9px !important; white-space:nowrap !important; }
  .site-header nav.primary-nav > * { flex:0 0 auto !important; }
  body .hero.ketabika-promo-hero { min-height:0 !important; height:auto !important; background-size:auto 100% !important; background-position:left center !important; }
  body .hero.ketabika-promo-hero .promo-hero-inner {
    display:flex !important; flex-direction:column !important; justify-content:center !important;
    width:100% !important; min-height:0 !important; padding:24px 16px !important;
    background:linear-gradient(90deg,rgba(244,245,255,.84),rgba(244,245,255,.93)) !important;
    box-sizing:border-box !important;
  }
  body .hero.ketabika-promo-hero .promo-hero-copy {
    display:block !important; order:0 !important; width:100% !important; max-width:100% !important;
    margin:0 !important; padding:8px 4px !important; box-sizing:border-box !important;
    text-align:center !important; background:transparent !important;
  }
  body .hero.ketabika-promo-hero .promo-hero-copy h1 { font-size:clamp(27px,7.5vw,36px) !important; line-height:1.35 !important; margin:8px 0 12px !important; }
  body .hero.ketabika-promo-hero .promo-hero-copy p { font-size:14px !important; line-height:1.8 !important; }
  body .hero.ketabika-promo-hero .promo-shop-btn { margin-top:12px !important; }
  body .hero.ketabika-promo-hero .promo-book-art, body .hero.ketabika-promo-hero .promo-line-art { display:none !important; }
  .container { width:calc(100% - 24px) !important; max-width:100% !important; }
  .product-grid, .category-grid, #categoryGrid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:701px) {
  body .hero.ketabika-promo-hero .promo-hero-copy { background:transparent !important; }
}