/* Mobile-only refinements requested for Ketabika. Desktop is intentionally untouched. */
@media (max-width:700px){
  /* Keep the brand at the right and controls grouped on the left in RTL. */
  html body > header.site-header .header-row{
    direction:rtl !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"logo actions" "search search" "nav nav" !important;
  }
  html body > header.site-header .logo{grid-area:logo !important;justify-self:end !important;}
  html body > header.site-header .header-actions{grid-area:actions !important;justify-self:start !important;}
  html body > header.site-header .mobile-nav-toggle{left:12px !important;right:auto !important;}

  /* Let the actual hero artwork show through; remove the opaque card overlay. */
  html body .ketabika-promo-hero .promo-hero-copy{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Refined floating wishlist heart. */
  html body .product-card .wishlist-corner-form{position:absolute !important;top:8px !important;right:8px !important;z-index:5 !important;margin:0 !important;}
  html body .product-card .wishlist-icon-button{
    display:grid !important;place-items:center !important;
    width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;
    padding:0 !important;border:1px solid rgba(61,60,196,.14) !important;border-radius:50% !important;
    background:rgba(255,255,255,.96) !important;color:#4b49c8 !important;
    font-size:21px !important;line-height:1 !important;
    box-shadow:0 3px 12px rgba(33,35,105,.15) !important;
    transition:transform .18s ease,background .18s ease,color .18s ease !important;
  }
  html body .product-card .wishlist-icon-button.is-active{background:#fce8f0 !important;color:#e83e72 !important;border-color:#f6c3d4 !important;}
  html body .product-card .wishlist-icon-button:active{transform:scale(.94) !important;}

  /* Sale badge sits horizontally opposite the heart, never underneath it. */
  html body .product-card .cover{position:relative !important;}
  html body .product-card .cover .sale{
    position:absolute !important;top:9px !important;left:8px !important;right:auto !important;bottom:auto !important;
    z-index:4 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
    min-height:26px !important;padding:3px 10px !important;border:1px solid rgba(255,255,255,.3) !important;
    border-radius:999px !important;background:linear-gradient(135deg,#f04468,#c92c54) !important;
    color:#fff !important;font-size:11px !important;font-weight:800 !important;line-height:1 !important;
    box-shadow:0 4px 12px rgba(201,44,84,.25) !important;white-space:nowrap !important;
  }
}


/* Header spacing refinement: mobile only, keep brand pinned right and controls left. */
@media (max-width:700px){
  html body > header.site-header .header-row{
    display:grid !important;
    direction:rtl !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"logo actions" "search search" "nav nav" !important;
    column-gap:16px !important;
    padding-inline:14px !important;
  }
  html body > header.site-header .logo{
    grid-area:logo !important;
    justify-self:start !important;
    align-self:center !important;
    margin:0 !important;
    max-width:40vw !important;
  }
  html body > header.site-header .site-logo-image{
    max-width:40vw !important;
    max-height:38px !important;
    object-fit:contain !important;
  }
  html body > header.site-header .header-actions{
    grid-area:actions !important;
    justify-self:end !important;
    align-self:center !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
  }
  html body > header.site-header .header-action-link,
  html body > header.site-header .mobile-nav-toggle{
    flex:0 0 36px !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
  }
}


/* Mobile-only: keep a clear touch gap between the hamburger and cart. */
@media (max-width: 700px) {
  html body > header.site-header .mobile-nav-toggle {
    margin-right: 10px !important;
  }
}


/* Ketabika: polished mobile quantity controls (product page only) */
@media (max-width:700px){
  .detail .qty-stepper{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:7px !important; padding:5px !important; border:1px solid #e0e5ff !important;
    border-radius:16px !important; background:linear-gradient(145deg,#ffffff 0%,#f5f6ff 100%) !important;
    box-shadow:0 5px 14px rgba(67,56,202,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
    vertical-align:middle !important;
  }
  .detail .qty-stepper > button.qty-step-btn{
    -webkit-appearance:none !important; appearance:none !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important; flex:0 0 34px !important;
    width:34px !important; min-width:34px !important; max-width:34px !important;
    height:34px !important; min-height:34px !important; margin:0 !important; padding:0 !important;
    border:1px solid rgba(255,255,255,.35) !important; border-radius:11px !important;
    background:linear-gradient(145deg,#7568ff 0%,#4f46e5 58%,#4338ca 100%) !important;
    color:#fff !important; font-family:Arial,sans-serif !important; font-size:23px !important;
    font-weight:600 !important; line-height:1 !important; text-align:center !important;
    box-shadow:0 3px 0 #3428a8,0 5px 11px rgba(67,56,202,.20) !important;
    cursor:pointer !important; touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important; transition:transform .12s ease,box-shadow .12s ease,filter .12s ease !important;
  }
  .detail .qty-stepper > button.qty-step-btn:active{
    transform:translateY(2px) scale(.97) !important; filter:brightness(.97) !important;
    box-shadow:0 1px 0 #3428a8,0 2px 5px rgba(67,56,202,.15) !important;
  }
  .detail .qty-stepper > button.qty-step-btn:focus-visible{
    outline:3px solid rgba(99,102,241,.28) !important; outline-offset:2px !important;
  }
  .detail .qty-stepper input.qty{
    -webkit-appearance:textfield !important; appearance:textfield !important; -moz-appearance:textfield !important;
    flex:0 0 52px !important; width:52px !important; min-width:52px !important; max-width:52px !important;
    height:38px !important; min-height:38px !important; margin:0 !important; padding:0 4px !important;
    box-sizing:border-box !important; border:1px solid #d9defa !important; border-radius:12px !important;
    background:#fff !important; color:#292b67 !important; font-size:15px !important; font-weight:700 !important;
    line-height:38px !important; text-align:center !important; box-shadow:inset 0 1px 2px rgba(31,41,90,.04) !important;
  }
  .detail .qty-stepper input.qty:focus{outline:none !important;border-color:#766bff !important;box-shadow:0 0 0 3px rgba(99,102,241,.13) !important;}
  .detail .qty-stepper input.qty::-webkit-inner-spin-button,.detail .qty-stepper input.qty::-webkit-outer-spin-button{-webkit-appearance:none !important;margin:0 !important;}
  .detail .part-qty-stepper input.qty{flex-basis:48px !important;width:48px !important;min-width:48px !important;max-width:48px !important;}
}