/* =========================================================
   KANO TASARLA — MOBILE HEADER SINGLE ROW (Spreadshirt-like)
   Purpose:
   - Force header to ONE ROW on mobile (like Spreadshirt)
   - Override the 2-row grid rule in style.css (@media max-width:430px)
   - Keep existing desktop behavior untouched

   How to use:
   1) Upload this file to: /public/assets/css/kano_tasarla_header_single_row.css
   2) In tasarla.html, include it AFTER style.css and AFTER kano_header_override.css
      (must be last so it wins)
   ========================================================= */

@media (max-width: 520px){

  /* Kill the 2-row GRID layout coming from style.css */
  header.site-header .nav-search-bar .nav-search-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    gap: 12px !important;
    padding: 8px 12px !important;
    min-height: 56px !important;

    /* reset grid leftovers */
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
  }

  /* Hide desktop nav in header (Spreadshirt uses hamburger) */
  header.site-header .nav-center{
    display: none !important;
  }

  /* Make right side a single inline row */
  header.site-header .header-actions.header-right{
    display: flex !important;           /* override style.css 'display: contents' */
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;

    width: auto !important;
    min-width: 0 !important;
  }

  /* Logo */
  header.site-header .header-logo{
    flex: 0 0 auto !important;
  }
  header.site-header .header-logo img{
    height: 22px !important;
    width: auto !important;
    display: block !important;
  }

  /* Search becomes icon-only (to fit in one row like Spreadshirt) */
  header.site-header form.header-search-main{
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
  }
  header.site-header form.header-search-main input,
  header.site-header form.header-search-main .search-suggestions{
    display: none !important;
  }
  header.site-header form.header-search-main button{
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
    position: static !important; /* prevent absolute rules from pushing layout */
  }

  /* Fav + cart icon-only */
  header.site-header a.header-fav,
  header.site-header button.header-cart.header-icon{
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  /* Icon sizes */
  header.site-header .ui-ico{
    width: 22px !important;
    height: 22px !important;
  }

  /* Badge position */
  header.site-header .cart-badge{
    top: -6px !important;
    right: -6px !important;
  }
}