/* Eshop search field (GtsPim widget) in the wicgts2 header and home hero. EshopSearch/Styles.twig links this file only
   while the integration is active. The widget styles itself inside its shadow root; this file only places and sizes it.

   Every rule that touches a theme element goes through :has(.gts-eshop-search). The header renders inside a
   cacheblock, so after a config change a cached header may still hold today's search group; these rules never meet
   it. Values and breakpoints come from the compiled shopkonstrukt-main.css and the mockups (Main, Results, Mobile). */

.gts-eshop-search {
  /* Results.dc.html header form and the gaps beside it, Main.dc.html hero form */
  --gts-eshop-search-header-width: 660px;
  --gts-eshop-search-header-gap: 40px;
  --gts-eshop-search-hero-width: 900px;
  /* Wish list plus basket: the theme places them out of the flow at the header row's right end. */
  --gts-eshop-search-header-buttons: 280px;
  --gts-eshop-search-panel-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 15px -15px rgba(0, 0, 0, 0.15);

  display: block;
  text-align: left;
}

/* ── Hero (home) ─────────────────────────────────────────────────────────── */

.gts-eshop-search[data-slot='hero'] {
  max-width: var(--gts-eshop-search-hero-width);
  margin: 28px auto 58px;
}

/* The hero has a fixed height and an absolute content box. With the field it grows instead: the content box joins
   the flow, keeps today's widths and top offsets as padding, and the hero keeps today's heights as a minimum. */
#heroshot:has(> #oldSearch .gts-eshop-search) {
  height: auto;
  min-height: 500px;
}

/* .bg sizes itself to 100% of the hero; on an auto-height hero that resolves to nothing. */
#heroshot:has(> #oldSearch .gts-eshop-search) > .bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/* Bootstrap's .position-absolute carries !important. */
#heroshot > #oldSearch:has(.gts-eshop-search) {
  position: relative !important;
  top: auto;
  left: auto;
  transform: none;
  margin-inline: auto;
  padding-block: 30px;
}

/* ── Header (every other page) ───────────────────────────────────────────── */

@media (min-width: 1200px) {
  /* Out of the flow, as #search-outer was: an open assistant grows over the page instead of into the header row,
     where the theme centres the wish list and basket. Without :has() the field keeps #search-outer's place, centred on
     the row with the buttons' width free on both sides. */
  .gts-eshop-search[data-slot='header'] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--gts-eshop-search-header-width);
    max-width: calc(100% - 2 * var(--gts-eshop-search-header-buttons));
    transform: translate(-50%, -50%);
  }

  /* With :has(), the collapse takes the room between the brand and the header buttons in the flow, as the header row
     in Results.dc.html does, and the field stays inside that room, so it never reaches the logo. Centred on the whole
     row, it covered the logo wherever the logo is not at the left edge (feedback d/89). Growing, the collapse also
     takes the free space that auto margins would use to centre the brand. */
  .search-collapse:has(> .gts-eshop-search[data-slot='header']) {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }

  .search-collapse:has(> .gts-eshop-search[data-slot='header']) > .gts-eshop-search[data-slot='header'] {
    right: calc(var(--gts-eshop-search-header-buttons) + var(--gts-eshop-search-header-gap));
    left: var(--gts-eshop-search-header-gap);
    width: auto;
    max-width: var(--gts-eshop-search-header-width);
    margin-inline: auto;
    transform: translateY(-50%);
  }
}

/* Below 1200 px the field sits in .search-collapse, opened by the theme's toggle (custom.js). The open collapse grows
   with the field instead of today's fixed 85 / 160 px, so neither the open assistant nor a dropdown is cut off. */
.search-collapse.search-expanded:has(> .gts-eshop-search) {
  height: auto;
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* The open panel hangs from the header row's bottom edge, not from the theme's fixed 60 px. The wish list and basket
     centre on that row, so a taller row (another logo) slid them onto the field (feedback d/89). */
  .search-collapse:has(> .gts-eshop-search) {
    top: 100%;
  }

  /* The open panel keeps today's 85 px footprint around the 50 px compact field. */
  .gts-eshop-search[data-slot='header'] {
    padding: 17px 30px;
    border-top: 1px solid #eee;
    background: #fff;
    box-shadow: var(--gts-eshop-search-panel-shadow);
  }

  /* The closed collapse clips the field to 0 px; hidden also keeps it out of the tab order. */
  .search-collapse:not(.search-expanded) > .gts-eshop-search {
    visibility: hidden;
  }
}

@media (max-width: 767px) {
  .gts-eshop-search[data-slot='header'] {
    padding: 10px 12px 12px;
    background: #fff;
    box-shadow: var(--gts-eshop-search-panel-shadow);
  }
}

/* ── Hero offsets per width, as #heroshot .position-absolute today ───────── */

@media (min-width: 576px) {
  #heroshot:has(> #oldSearch .gts-eshop-search) {
    min-height: 580px;
  }
}

@media (min-width: 768px) {
  #heroshot:has(> #oldSearch .gts-eshop-search) {
    min-height: 620px;
  }

  #heroshot > #oldSearch:has(.gts-eshop-search) {
    padding-top: 55px;
  }
}

@media (min-width: 992px) {
  #heroshot > #oldSearch:has(.gts-eshop-search) {
    padding-top: 75px;
  }
}

@media (max-width: 575px) {
  .gts-eshop-search[data-slot='hero'] {
    margin: 16px auto 28px;
  }
}