/* Ketabika responsive layout v6: final override, desktop and mobile intentionally separated */
*,*::before,*::after{box-sizing:border-box}
.site-header{position:relative;z-index:1000;width:100%;max-width:100%}
.site-header .primary-nav{position:relative;z-index:1002;overflow:visible}
.site-header .primary-nav .nav-item{position:relative;flex:0 0 auto}
.site-header .primary-nav .nav-submenu{display:none;position:absolute;top:calc(100% + 2px);inset-inline-start:0;inset-inline-end:auto;width:max-content;min-width:210px;max-width:min(320px,calc(100vw - 24px));max-height:min(65vh,460px);overflow-y:auto;overflow-x:hidden;z-index:1100;padding:8px;background:#fff;border:1px solid #e3e5f8;border-radius:12px;box-shadow:0 12px 30px rgba(28,31,105,.2);white-space:normal}
.site-header .primary-nav .nav-item.submenu-open>.nav-submenu{display:block}
.site-header .primary-nav .nav-submenu a{display:block;padding:10px 12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;border-radius:7px}
.site-header .primary-nav .nav-submenu a:hover{background:#f1f2ff}
/* Desktop/tablet hero: background image is the original artwork; do not overlay duplicate CSS book illustrations. */
@media (min-width:701px){
 .site-header>.header-row{display:grid;grid-template-columns:minmax(190px,260px) minmax(220px,1fr) auto;grid-template-areas:"logo search actions" "nav nav nav";align-items:center;gap:8px 18px;width:min(100% - 32px,1440px);margin-inline:auto;padding:10px 0 0}
 .site-header .logo{grid-area:logo;min-width:0;max-width:100%}
 .site-header .search{grid-area:search;min-width:0;width:100%;margin:0}
 .site-header .header-actions{grid-area:actions;display:flex;align-items:center;gap:8px;min-width:0}
 .site-header nav.primary-nav{grid-area:nav;width:100%;max-width:100%;margin:0;padding:0 12px;display:flex;align-items:center;justify-content:space-around;gap:4px;overflow:visible;white-space:nowrap}
 .hero.ketabika-promo-hero{height:clamp(390px,28vw,510px);min-height:390px;max-height:510px;overflow:hidden;background-image:url('../images/ketabika-hero-background.png')!important;background-repeat:no-repeat!important;background-position:center center!important;background-size:cover!important}
 .hero.ketabika-promo-hero>.promo-hero-inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center;width:min(100% - 40px,1440px)!important;height:100%;min-height:0!important;margin-inline:auto;padding:28px 3%!important;position:relative}
 .hero.ketabika-promo-hero .promo-book-art,.hero.ketabika-promo-hero .promo-line-art{display:none!important}
 .hero.ketabika-promo-hero .promo-hero-copy{grid-column:2!important;grid-row:1!important;justify-self:stretch;width:100%!important;max-width:600px!important;margin:0!important;padding:20px 0!important;text-align:right!important;position:relative;z-index:2;background:transparent!important;transform:none!important}
 .hero.ketabika-promo-hero .promo-hero-copy h1{font-size:clamp(38px,3.2vw,58px)!important;line-height:1.35!important;margin:12px 0!important;color:#30349f!important;text-shadow:0 1px 8px rgba(255,255,255,.6)!important}
 .hero.ketabika-promo-hero .promo-hero-copy p{font-size:clamp(16px,1.2vw,21px)!important;line-height:1.9!important;color:#303b9d!important}
}
/* Dedicated mobile layout */
@media (max-width:700px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 .site-header{width:100%;overflow:visible}
 .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;min-width:0;flex-wrap:nowrap!important}
 .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-login-link>span:not(.header-action-icon):not(.header-account-avatar),.site-header .header-account-name{display:none!important}
 .site-header .search{grid-area:search;display:flex!important;width:100%!important;max-width:none!important;min-width:0!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;min-width:0!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}
 /* Dropdown is moved to the viewport by the small JS helper below, avoiding clipping by the swipeable nav. */
 .site-header nav.primary-nav .nav-submenu{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:55vh!important;overflow-y:auto!important;z-index:5000!important;border-radius:12px!important;box-shadow:0 14px 35px rgba(25,28,100,.25)!important}
 .site-header .primary-nav .nav-submenu a{padding:12px 14px;font-size:14px}
 .hero.ketabika-promo-hero{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:340px!important;max-height:none!important;overflow:hidden!important;background-image:url('../images/ketabika-hero-background.png')!important;background-repeat:no-repeat!important;background-size:auto 100%!important;background-position:left center!important}
 .hero.ketabika-promo-hero>.promo-hero-inner{display:flex!important;align-items:center!important;justify-content:flex-end!important;width:100%!important;max-width:100%!important;min-height:340px!important;height:auto!important;margin:0!important;padding:24px 14px!important;position:relative!important;background:linear-gradient(90deg,rgba(245,246,255,0) 0%,rgba(245,246,255,.42) 32%,rgba(245,246,255,.94) 58%,rgba(245,246,255,.96) 100%)!important}
 .hero.ketabika-promo-hero .promo-book-art,.hero.ketabika-promo-hero .promo-line-art{display:none!important}
 .hero.ketabika-promo-hero .promo-hero-copy{display:block!important;width:58%!important;max-width:58%!important;margin:0!important;padding:12px 0!important;text-align:right!important;position:relative!important;z-index:2!important;background:transparent!important;transform:none!important}
 .hero.ketabika-promo-hero .promo-eyebrow{font-size:11px!important}
 .hero.ketabika-promo-hero .promo-hero-copy h1{font-size:clamp(25px,7vw,34px)!important;line-height:1.35!important;margin:8px 0 10px!important;overflow-wrap:anywhere}
 .hero.ketabika-promo-hero .promo-hero-copy p{font-size:12px!important;line-height:1.8!important}
 .hero.ketabika-promo-hero .promo-shop-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;margin-top:8px!important;padding:9px 12px!important;font-size:12px!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,.product-info,.category-tile{min-width:0!important;max-width:100%!important}
 .product-card .cover{height:155px!important;min-height:0!important}
 .product-card .cover img,.detail-cover img{max-width:100%!important;height:auto;object-fit:contain}
 .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){.hero.ketabika-promo-hero .promo-hero-copy{width:62%!important;max-width:62%!important}.hero.ketabika-promo-hero>.promo-hero-inner{padding-inline:10px!important}.site-header .header-action-link{min-width:31px!important}}


/* Dropdown single-open fix v7: disable sticky touch-hover and show only the clicked menu. */
.site-header nav.primary-nav .nav-item > .nav-submenu { display: none !important; }
.site-header nav.primary-nav .nav-item.submenu-open > .nav-submenu { display: block !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .site-header nav.primary-nav .nav-item:hover > .nav-submenu,
  .site-header nav.primary-nav .nav-item:focus-within > .nav-submenu { display: block !important; }
}
@media (max-width: 700px) {
  .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; }
  .site-header nav.primary-nav .nav-submenu {
    position: fixed !important;
    top: var(--mobile-menu-top, 105px) !important;
    inset-inline-start: 12px !important;
    inset-inline-end: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(60vh, 420px) !important;
    overflow: auto !important;
    z-index: 99999 !important;
    background: #fff !important;
    box-shadow: 0 14px 35px rgba(25,28,100,.28) !important;
  }
  .site-header, .site-header .header-row { overflow: visible !important; }
}