/* ── AAryans search bar – desktop ──────────────────────────────────── */

/* Hide chip links (Novinky / Výprodej) */
.news_sale { display: none !important; }

/* Desktop layout: logo | search (fixed 500px) | nav-buttons – equal side flex */
.site-name-wrapper  { flex: 1 1 auto !important; }
.navigation-buttons { flex: 1 1 auto !important; }
.search-news_sale   {
  flex: 0 0 500px !important;
  padding: 0 !important;
  margin-top: 4px !important;
}

/* Override Shoptet's internal div.search { width: 500px } cap */
.search-news_sale .search {
  width: 100% !important;
  max-width: none !important;
}

/* Unified search form container – border + rounded bottom-right corner */
#formSearchForm {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 42px !important;
  border: 1.5px solid #b0cfe0 !important;
  border-radius: 0 0 16px 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Text input – no individual border (container handles it) */
.query-input.form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  font-size: 15px !important;
  background: #fff !important;
}

/* Submit button */
#formSearchForm button[type="submit"] {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 100% !important;
  background: #66A8DC !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* SVG magnifying glass icon on submit button */
#formSearchForm button[type="submit"]::after {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* Mobile bar hidden by default (JS activates it on narrow screens) */
#aaryans-search-bar { display: none; }


/* ── AAryans search bar – mobile (≤767px) ──────────────────────────── */
@media screen and (max-width: 767px) {

  /* Hide the native Shoptet search on mobile */
  .search-news_sale { display: none !important; }

  /* Keep the magnifying glass slot invisible
     (preserves icon spacing for person/CZK/cart/hamburger row) */
  .toggle-window[data-target="search"] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hide the close-search button */
  .header-close-link-search { display: none !important; }


  /* ── Override Onboard/Shoptet hardcoded header height ─────────────
     The template sets a fixed height on the header container.
     Force height: auto so it only takes what it needs.              */
  #header,
  #top-navigation-bar,
  .header-wrapper,
  .header-main,
  #header-wrapper,
  #header .row,
  #header > div,
  #top-navigation-bar > div,
  #top-navigation-bar > .container,
  #top-navigation-bar > .container-fluid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    box-sizing: border-box !important;
  }

  /* Shrink logo image to reduce row height */
  .site-name-wrapper img,
  .site-name a img,
  #top-navigation-bar .site-name img,
  .logo img,
  .site-name img {
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
  }

  /* Compact icon/button row */
  .navigation-buttons {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    align-items: center !important;
  }


  /* ── Strip Shoptet's built-in top padding on the content area ─────
     Shoptet/Onboard adds padding-top to the content wrapper equal to
     the header height so content doesn't hide under the sticky bar.
     Our injected search bar now handles that offset, so we zero it.  */
  body,
  #page,
  #page-wrapper,
  .page-wrapper,
  #content,
  #content-wrapper,
  .content-wrapper,
  #main,
  #main-content,
  .main-content,
  .page-content,
  #page-content,
  [class*="content-wrapper"],
  [id="content"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Shoptet homepage box (carries the hero + chips) */
  .homepage-box,
  .content-wrapper.homepage-box,
  #content .homepage-box,
  #content > .homepage-box,
  #homepage-box,
  [class*="homepage-box"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Hero banner / slider containers */
  .hp-slider,
  .hp-slider-wrapper,
  .banner-section,
  .hp-banner-section,
  [class*="hp-slider"],
  [class*="banner-slider"],
  #hp-banner-slider {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  /* ── Our injected search bar ────────────────────────────────────── */
  #aaryans-search-bar {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    padding: 5px 12px !important;
    border-bottom: 1px solid #dde8f0 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  .aaryans-search-form {
    display: flex !important;
    height: 42px !important;
    border: 1.5px solid #b0cfe0 !important;
    border-radius: 0 0 16px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .aaryans-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    background: #fff !important;
    height: 100% !important;
    -webkit-appearance: none !important;
  }

  .aaryans-search-btn {
    flex: 0 0 46px !important;
    width: 46px !important;
    background: #66A8DC !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .aaryans-search-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: white !important;
    fill: none !important;
  }
}