/* ============================================================
   Ketabika — Device-tier responsive layer (FINAL, loads last)
   Desktop >=1025px | Tablet/iPad 701-1024px | Phone <=700px
   Rule: only ONE dropdown can be visible at any time.
   ============================================================ */

/* ---------- Global safety: never clip dropdowns ---------- */
.site-header, .site-header .header-row { overflow: visible !important; }

/* ============================================================
   1) DESKTOP — large screens, full layout (min-width:1025px)
   ============================================================ */
@media (min-width: 1025px) {
  .site-header > .header-row {
    display: grid !important;
    grid-template-columns: minmax(200px, 270px) minmax(280px, 1fr) auto !important;
    grid-template-areas: "logo search actions" "nav nav nav" !important;
    align-items: center !important;
    gap: 10px 24px !important;
    width: min(100% - 48px, 1440px) !important;
    margin-inline: auto !important;
    padding: 14px 0 0 !important;
  }
  .site-header .logo { grid-area: logo; min-width: 0; }
  .site-header .search { grid-area: search; width: 100% !important; max-width: 640px; margin-inline: auto; }
  .site-header .header-actions { grid-area: actions; display: flex; align-items: center; gap: 10px; }
  .site-header nav.primary-nav {
    grid-area: nav;
    display: flex !important; flex-wrap: nowrap;
    align-items: center; justify-content: space-between; gap: 6px;
    width: 100% !important; margin: 0 !important; padding: 0 8px !important;
    overflow: visible !important; white-space: nowrap;
  }
  .site-header nav.primary-nav > a,
  .site-header nav.primary-nav .nav-main-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 12px 16px; font-size: 15px; min-height: 44px;
  }
  /* Dropdown: absolute panel under its own item — can never stack over a sibling */
  .site-header nav.primary-nav .nav-item { position: relative !important; flex: 0 0 auto; }
  .site-header nav.primary-nav .nav-item > .nav-submenu {
    display: none !important; visibility: hidden !important; opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important; top: calc(100% + 4px) !important; bottom: auto !important;
    inset-inline-start: 0 !important; inset-inline-end: auto !important;
    width: max-content !important; min-width: 230px !important;
    max-width: min(340px, calc(100vw - 32px)) !important;
    max-height: min(70vh, 480px) !important; overflow-y: auto !important;
    z-index: 3000 !important;
    background: #fff !important; border: 1px solid #e3e5f8 !important; border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(28,31,105,.22) !important;
    transform: translateY(6px); transition: opacity .15s ease, transform .15s ease;
  }
  .site-header nav.primary-nav .nav-item.submenu-open > .nav-submenu,
  .site-header nav.primary-nav .nav-item:hover > .nav-submenu,
  .site-header nav.primary-nav .nav-item:focus-within > .nav-submenu {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important; transform: translateY(0) !important;
  }
  .site-header nav.primary-nav .nav-submenu a {
    display: block; padding: 11px 14px; line-height: 1.5;
    white-space: normal; overflow-wrap: anywhere; border-radius: 8px; font-size: 14px;
  }
  .site-header nav.primary-nav .nav-submenu a:hover { background: #f1f2ff; }

  .container { width: min(100% - 48px, 1440px) !important; }
  .product-grid, .category-grid, #categoryGrid {
    display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 20px !important;
  }
  .hero.ketabika-promo-hero { height: clamp(420px, 30vw, 540px) !important; }
}

/* ============================================================
   2) TABLET / iPad — 701px..1024px (own design, NOT desktop clone)
   Header stacked in 3 rows, nav wraps to centered chips,
   dropdowns drop as full-width sheets under the nav row.
   ============================================================ */
@media (min-width: 701px) and (max-width: 1024px) {
  .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: 10px 16px !important;
    width: calc(100% - 32px) !important; max-width: 100% !important;
    margin-inline: auto !important; padding: 12px 0 0 !important;
  }
  .site-header .logo { grid-area: logo; min-width: 0; }
  .site-header .site-logo-image { max-height: 52px !important; width: auto !important; max-width: 44vw !important; object-fit: contain; }
  .site-header .header-actions { grid-area: actions; display: flex !important; align-items: center; gap: 8px; }
  .site-header .header-action-link { padding: 8px 12px !important; font-size: 13px !important; min-height: 42px; }

  .site-header .search {
    grid-area: search; display: flex !important;
    width: 100% !important; max-width: 720px !important; margin-inline: auto !important;
    height: 48px !important;
  }
  .site-header .search input { font-size: 15px !important; }

  /* Nav: wrapped pill rows, centered — a tablet signature look */
  .site-header nav.primary-nav {
    grid-area: nav;
    display: flex !important; flex-wrap: wrap !important;
    align-items: center; justify-content: center; gap: 6px !important;
    width: 100% !important; margin: 4px 0 0 !important; padding: 6px 4px 10px !important;
    overflow: visible !important; white-space: normal !important;
  }
  .site-header nav.primary-nav > a,
  .site-header nav.primary-nav .nav-main-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 9px 14px !important; font-size: 14px !important; min-height: 40px;
    background: #f4f5ff; border: 1px solid #e3e5f8; border-radius: 999px;
  }
  .site-header nav.primary-nav .nav-item { position: relative !important; flex: 0 0 auto; }
  /* Tablet dropdown: fixed sheet pinned under nav — never overlaps a sibling item */
  .site-header nav.primary-nav .nav-item > .nav-submenu {
    display: none !important; visibility: hidden !important; opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: var(--tablet-menu-top, 210px) !important;
    inset-inline-start: 16px !important; inset-inline-end: 16px !important;
    width: auto !important; min-width: 0 !important;
    max-width: none !important; max-height: min(58vh, 460px) !important; overflow-y: auto !important;
    z-index: 6000 !important;
    background: #fff !important; border: 1px solid #e3e5f8 !important; border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(25,28,100,.25) !important;
    columns: 2; column-gap: 0;
  }
  .site-header nav.primary-nav .nav-item.submenu-open > .nav-submenu,
  .site-header nav.primary-nav .nav-item:hover > .nav-submenu,
  .site-header nav.primary-nav .nav-item:focus-within > .nav-submenu {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important;
  }
  .site-header nav.primary-nav .nav-submenu a {
    display: block !important; break-inside: avoid;
    padding: 12px 16px !important; font-size: 15px !important; line-height: 1.5;
    white-space: normal; overflow-wrap: anywhere; border-radius: 8px;
  }
  .site-header nav.primary-nav .nav-submenu a:hover { background: #f1f2ff; }

  .container { width: calc(100% - 32px) !important; max-width: 100% !important; }
  .product-grid, .category-grid, #categoryGrid {
    display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 14px !important;
  }
  .product-card .cover { height: 220px !important; }

  /* Tablet hero: two-column but tighter */
  .hero.ketabika-promo-hero { height: clamp(360px, 46vw, 460px) !important; min-height: 360px !important; }
  .hero.ketabika-promo-hero > .promo-hero-inner { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important; }
  .hero.ketabika-promo-hero .promo-hero-copy h1 { font-size: clamp(30px, 4.4vw, 44px) !important; }
  .hero.ketabika-promo-hero .promo-hero-copy p { font-size: clamp(14px, 1.7vw, 18px) !important; }
}

/* ============================================================
   3) PHONE — <=700px (click-only menus, one at a time)
   ============================================================ */
@media (max-width: 700px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .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: 8px !important; width: calc(100% - 20px) !important; max-width: none !important;
    margin: 0 auto !important; padding: 8px 0 0 !important; align-items: center !important;
  }
  .site-header .logo { grid-area: logo; min-width: 0 !important; min-height: 40px !important; overflow: hidden; }
  .site-header .site-logo-image { width: auto !important; max-width: 42vw !important; max-height: 40px !important; object-fit: contain; }
  .site-header .header-actions { grid-area: actions; display: flex !important; gap: 4px !important; flex-wrap: nowrap !important; min-width: 0; }
  .site-header .header-action-link {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 34px !important; min-height: 36px !important; padding: 5px !important;
    font-size: 11px !important; white-space: nowrap;
  }
  .site-header .header-favorite-link { display: none !important; }
  .site-header .header-account-name { display: none !important; }
  .site-header .search {
    grid-area: search; display: flex !important; width: 100% !important;
    max-width: none !important; height: 42px !important; margin: 0 !important;
  }
  .site-header .search input { flex: 1 1 auto !important; width: 0 !important; min-width: 0 !important; font-size: 14px !important; }

  .site-header nav.primary-nav {
    grid-area: nav;
    display: flex !important; align-items: center; justify-content: flex-start !important;
    gap: 4px !important; width: calc(100% + 20px) !important; max-width: none !important;
    margin: 0 -10px !important; padding: 4px 10px 8px !important; min-height: 42px !important;
    overflow-x: auto !important; overflow-y: visible !important; white-space: nowrap !important;
    flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .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; justify-content: center;
    min-height: 34px !important; padding: 0 10px !important; font-size: 12px !important; flex: 0 0 auto !important;
  }
  .site-header nav.primary-nav .nav-item { position: static !important; flex: 0 0 auto !important; }

  /* Phone dropdown: fixed sheet, click-only (NO hover) */
  .site-header nav.primary-nav .nav-item > .nav-submenu {
    display: none !important; visibility: hidden !important; opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important; top: var(--mobile-menu-top, 120px) !important;
    inset-inline-start: 12px !important; inset-inline-end: 12px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: min(60vh, 420px) !important; overflow-y: auto !important;
    z-index: 99999 !important; background: #fff !important;
    border: 1px solid #e3e5f8 !important; border-radius: 12px !important;
    box-shadow: 0 14px 35px rgba(25,28,100,.28) !important;
  }
  .site-header nav.primary-nav .nav-item:hover > .nav-submenu,
  .site-header nav.primary-nav .nav-item:focus-within > .nav-submenu { display: none !important; }
  .site-header nav.primary-nav .nav-item.submenu-open > .nav-submenu {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important;
  }
  .site-header nav.primary-nav .nav-submenu a { padding: 12px 14px !important; font-size: 14px !important; }

  .container { width: calc(100% - 24px) !important; max-width: 100% !important; }
  .product-grid, .category-grid, #categoryGrid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important;
  }
  .product-card .cover { height: 155px !important; }
  .detail-grid, .hero-grid, .form-grid { grid-template-columns: minmax(0,1fr) !important; }
  .footer-grid { grid-template-columns: minmax(0,1fr) !important; }
  img, video, iframe { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 380px) {
  .site-header .header-action-link { min-width: 31px !important; }
}

/* ============================================================
   4) ONE-AT-A-TIME guarantee: a closed sibling dropdown can
   never render, whatever earlier CSS files say.
   ============================================================ */
.site-header nav.primary-nav .nav-item:not(.submenu-open):not(:hover):not(:focus-within) > .nav-submenu {
  display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
@media (max-width: 700px) {
  .site-header nav.primary-nav .nav-item:not(.submenu-open) > .nav-submenu {
    display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
  }
}


/* ============================================================
   5) MOBILE OVERFLOW HARDENING — kill any horizontal bleed
   (100vw / fixed 1440px-1320px rules in older sheets)
   ============================================================ */
@media (max-width: 700px) {
  html, body {
    width: 100% !important; max-width: 100% !important;
    overflow-x: hidden !important; margin: 0 !important; padding: 0 !important;
  }
  /* fixed 1320/1440px containers from older sheets */
  .container, main > .container, footer > .container,
  .site-header .container.header-row, .site-header .header-row, .header-row {
    width: calc(100% - 24px) !important; max-width: 100% !important;
    min-width: 0 !important; margin-left: auto !important; margin-right: auto !important;
  }
  /* hero inner was forced to 1440px !important in reference-redesign.css */
  html body section.hero.ketabika-promo-hero,
  .hero.ketabika-promo-hero {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  html body section.hero.ketabika-promo-hero > .container.promo-hero-inner,
  .hero.ketabika-promo-hero > .container.promo-hero-inner,
  .hero.ketabika-promo-hero > .promo-hero-inner {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  /* nav was 100vw in older sheets -> remove bleed */
  .site-header nav.primary-nav,
  .site-header .header-row > nav.primary-nav,
  .site-header > .container.header-row nav.primary-nav {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 2px !important; padding-right: 2px !important;
  }
  /* wide editorial / merch cards */
  .editorial-card, .home-merch, section, .section, .category-showcase {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .category-showcase-head, .section-head { flex-wrap: wrap !important; }
  /* media & tables never exceed viewport */
  img, video, iframe, svg { max-width: 100% !important; height: auto; }
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* flex/grid children shrink instead of pushing the page wide */
  .product-card, .category-tile, .product-info, .promo-hero-copy,
  .header-actions, .search, .logo { min-width: 0 !important; }
}


/* ============================================================
   6) MOBILE ROUND-2 FIXES
   ============================================================ */
@media (max-width: 700px) {
  /* --- the 560px search box (higher specificity than older sheets) --- */
  body .site-header .search,
  body .site-header .header-row > .search,
  html body .site-header > .container.header-row .search {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  /* --- dropdown must render ABOVE the hero: lift the whole header context --- */
  .site-header { z-index: 300000 !important; }
  /* --- hero: remove the heavy white blur, fit artwork properly --- */
  html body .hero.ketabika-promo-hero,
  body .hero.ketabika-promo-hero {
    background-size: cover !important;
    background-position: center center !important;
  }
  html body .hero.ketabika-promo-hero > .container.promo-hero-inner,
  html body .hero.ketabika-promo-hero > .promo-hero-inner,
  body .hero.ketabika-promo-hero .promo-hero-inner {
    background: transparent !important;
  }
  body .hero.ketabika-promo-hero .promo-hero-copy,
  html body section.hero.ketabika-promo-hero > .container.promo-hero-inner > .promo-hero-copy {
    background: rgba(255,255,255,.28) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-radius: 14px !important;
    padding: 14px 12px !important;
  }
  body .hero.ketabika-promo-hero .promo-hero-copy h1,
  body .hero.ketabika-promo-hero .promo-hero-copy p { text-shadow: 0 1px 6px rgba(255,255,255,.85) !important; }
  /* --- nothing may exceed the screen, whatever older sheets say --- */
  body .promo-hero-copy, body .hero p, body .latest-copy,
  body .editorial-card, body .editorial-card > p,
  body .empty-state, body .auth-shell, body .detail-copy,
  body .hero h1, body .latest-copy p {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
}