/* ioc-search.css - preview stylesheet owned by the "search" stream (mobile review 2026-10-03, SEARCH-SPEC v2 B1/B2/B4/B5)
   Loaded after every theme stylesheet (including Mirasvit's searchautocomplete/default.css, whose 2-column list,
   70px rows, 650px panel and 12px text are reset here). Colours: navy #0b3c6b (white on navy 11:1), focus #f18200.
   Phones: max-width 40em. Desktop keeps the same box, in the header's slot. */

/* =========================================================== the search box (all sizes) */
#search_mini_form.ioc-search { position: relative; margin: 0; padding: 0; }
#search_mini_form.ioc-search [hidden] { display: none !important; }
#search_mini_form .ioc-search-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; width: 100%; }
#search_mini_form .ioc-search-field { position: relative; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; float: none; }

#search_mini_form input#search {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  box-sizing: border-box; display: block; width: 100%; height: 48px; min-height: 48px; margin: 0;
  padding: 0 46px 0 12px; position: relative; z-index: 1;
  font-family: Roboto, Arial, sans-serif; font-size: 18px; line-height: 44px; color: #1a1a1a;
  background: #fff; border: 2px solid #0b3c6b; border-right: 0; border-radius: 4px 0 0 4px; box-shadow: none;
}
#search_mini_form input#search::-webkit-input-placeholder { color: #5f6368; opacity: 1; }
#search_mini_form input#search::-moz-placeholder { color: #5f6368; opacity: 1; }
#search_mini_form input#search::placeholder { color: #5f6368; opacity: 1; }
#search_mini_form input#search:focus { outline: 3px solid #f18200; outline-offset: 0; background: #fff; box-shadow: none; }
#search_mini_form input#search::-webkit-search-cancel-button,
#search_mini_form input#search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* clear button, inside the field on the right */
#search_mini_form button.ioc-search-clear {
  position: absolute; top: 2px; right: 1px; z-index: 2; width: 44px; height: 44px; min-height: 0; min-width: 0;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #444;
  font: 400 30px/44px Arial, sans-serif; text-align: center; cursor: pointer; box-shadow: none;
}
#search_mini_form button.ioc-search-clear:hover { color: #0b3c6b; background: #eef4fb; }
#search_mini_form button.ioc-search-clear:focus { outline: 3px solid #f18200; outline-offset: -3px; }

/* "Cerca" button: white on navy, the word next to the magnifier */
#search_mini_form button.ioc-search-btn {
  -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  box-sizing: border-box; height: 48px; min-height: 48px; min-width: 48px; margin: 0; padding: 0 14px;
  border: 2px solid #0b3c6b; border-radius: 0 4px 4px 0; background: #0b3c6b; color: #fff;
  font-family: Roboto, Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1; white-space: nowrap;
  text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
}
#search_mini_form button.ioc-search-btn:hover { background: #093f6e; border-color: #093f6e; color: #fff; }
#search_mini_form button.ioc-search-btn:focus { outline: 3px solid #f18200; outline-offset: 2px; }
#search_mini_form button.ioc-search-btn[aria-busy="true"] { cursor: progress; background: #2f5d8a; border-color: #2f5d8a; }
#search_mini_form .ioc-search-ico { width: 22px; height: 22px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; -webkit-flex: 0 0 auto; flex: 0 0 auto; }

/* hint under the box ("Scrivi almeno 3 lettere.") */
#search_mini_form .ioc-search-hint {
  margin: 6px 0 0; padding: 8px 10px; font-size: 17px; line-height: 1.35; color: #1a1a1a;
  background: #fff8e6; border-left: 4px solid #f18200;
}

/* loader: words in a bar at the top of the panel, never over the button (Mirasvit shows/hides it) */
#search_mini_form .searchautocomplete-loader.UI-LOADER {
  position: absolute; top: 50px; left: 0; right: 0; bottom: auto; width: auto; height: auto; z-index: 104;
  -webkit-transform: none; transform: none; margin: 0; padding: 10px 12px; box-sizing: border-box;
  background: #f2f6fa; border: 1px solid #b8c4d0; color: #0b3c6b; font-size: 17px; line-height: 1.3; font-weight: 700;
}
#search_mini_form .searchautocomplete-loader div { display: none; }

/* =========================================================== the suggestion panel */
#search_mini_form .searchautocomplete-placeholder {
  position: absolute; top: 50px; left: 0; right: 0; z-index: 103; width: auto; min-width: 0; max-width: none;
  margin: 0; padding: 0; background: #fff; border: 1px solid #b8c4d0; border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); text-align: left;
}
#search_mini_form .searchautocomplete-placeholder:before { display: none; }
#search_autocomplete ul.ioc-ac {
  list-style: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;
}
#search_autocomplete ul.ioc-ac > li {
  height: auto; overflow: visible; float: none; margin: 0; padding: 0; text-align: left;
  border: 0; border-top: 1px solid #e3e8ee; background: #fff; box-shadow: none; list-style: none;
}
#search_autocomplete ul.ioc-ac > li:first-child { border-top: 0; }
#search_autocomplete ul.ioc-ac > li:before, #search_autocomplete ul.ioc-ac > li:after { display: none; }
#search_autocomplete ul.ioc-ac > li > a {
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center; box-sizing: border-box; min-height: 56px; padding: 8px 12px;
  color: #1a1a1a; font-size: 17px; line-height: 1.3; text-decoration: none; cursor: pointer;
}
#search_autocomplete ul.ioc-ac > li.active, #search_autocomplete ul.ioc-ac > li:hover { background: #eef4fb; box-shadow: none; }
#search_autocomplete ul.ioc-ac > li > a:focus { outline: 3px solid #f18200; outline-offset: -3px; }

/* group label inside the first row of its group */
#search_autocomplete .ioc-ac-label {
  display: block; -webkit-flex: 0 0 100%; flex: 0 0 100%; width: 100%; margin: 0 0 4px;
  font-size: 15px; line-height: 1.2; font-weight: 700; color: #444;
}

/* "Vedi tutti i risultati (11) >" */
#search_autocomplete ul.ioc-ac > li.ioc-ac-all { background: #f2f6fa; }
#search_autocomplete ul.ioc-ac > li.ioc-ac-all.active, #search_autocomplete ul.ioc-ac > li.ioc-ac-all:hover { background: #e2ecf6; }
#search_autocomplete ul.ioc-ac > li.ioc-ac-all > a { color: #0b3c6b; font-weight: 700; font-size: 18px; }

#search_autocomplete .ioc-ac-line { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex: 1 1 100%; flex: 1 1 100%; min-width: 0; }
#search_autocomplete .ioc-ac-text { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
#search_autocomplete .ioc-ac-name { font-weight: 700; color: #0b3c6b; }
#search_autocomplete .ioc-ac-count { color: #333; white-space: nowrap; }
#search_autocomplete .ioc-ac-go { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 10px; font-size: 28px; line-height: 1; color: #0b3c6b; }

/* product rows */
#search_autocomplete .ioc-ac-prod-in { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex: 1 1 100%; flex: 1 1 100%; min-width: 0; }
#search_autocomplete img.ioc-ac-img { display: block; -webkit-flex: 0 0 64px; flex: 0 0 64px; width: 64px; height: 51px; margin: 0 12px 0 0; float: none; object-fit: contain; background: #f4f4f4; }
#search_autocomplete .ioc-ac-prod-text { display: block; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
#search_autocomplete .ioc-ac-title {
  display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-height: 2.6em; font-size: 17px; line-height: 1.3; color: #1a1a1a; word-wrap: break-word; overflow-wrap: anywhere;
}
#search_autocomplete .ioc-ac-price { display: block; margin-top: 2px; font-size: 18px; line-height: 1.3; font-weight: 700; color: #1a1a1a; }

/* message without a link ("Nessun suggerimento...") */
#search_autocomplete .ioc-ac-msg { padding: 14px 12px; font-size: 17px; line-height: 1.4; color: #1a1a1a; }

/* =========================================================== results and empty pages */
.ioc-sr { margin: 0 0 24px; }
.ioc-sr .ioc-sr-title { margin: 0 0 14px; padding: 0; border: 0; }
.ioc-sr .ioc-sr-title h1 {
  margin: 0; padding: 0; text-transform: none; font-size: 26px; line-height: 1.25; font-weight: 700; color: #0b3c6b;
  overflow-wrap: anywhere; word-wrap: break-word;
}
.ioc-sr h2 { text-transform: none; border: 0; }
.ioc-sr .ioc-sr-catnotice { margin: 0 0 16px; padding: 10px 12px; font-size: 18px; line-height: 1.4; background: #fff8e6; border-left: 4px solid #f18200; }
.ioc-sr .ioc-sr-catnotice a { font-weight: 700; color: #0b3c6b; text-decoration: underline; white-space: nowrap; }
.ioc-sr .ioc-sr-block { margin: 0 0 20px; }
.ioc-sr .ioc-sr-lead { margin: 0 0 8px; font-size: 18px; line-height: 1.35; font-weight: 700; color: #1a1a1a; }
.ioc-sr .ioc-sr-btns { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

.ioc-sr a.ioc-sr-btn {
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between; box-sizing: border-box;
  min-height: 52px; margin: 0 0 10px; padding: 10px 14px; background: #fff; color: #0b3c6b;
  border: 2px solid #0b3c6b; border-radius: 6px; font-size: 18px; line-height: 1.3; font-weight: 700;
  text-decoration: none; text-align: left; overflow-wrap: anywhere; word-wrap: break-word;
}
.ioc-sr a.ioc-sr-btn:hover { background: #eef4fb; color: #0b3c6b; }
.ioc-sr a.ioc-sr-btn:focus { outline: 3px solid #f18200; outline-offset: 2px; }
.ioc-sr .ioc-sr-btn-text { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.ioc-sr .ioc-sr-count { font-weight: 400; color: #333; white-space: nowrap; }
.ioc-sr .ioc-sr-go { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 10px; font-size: 28px; line-height: 1; }
.ioc-sr a.ioc-sr-btn-strong { background: #f2f6fa; }
.ioc-sr .ioc-sr-lot { padding: 12px; background: #fff8e6; border: 2px solid #f18200; border-radius: 8px; }
.ioc-sr .ioc-sr-lot a.ioc-sr-btn { margin: 0; }
.ioc-sr .ioc-sr-sold .ioc-sr-lead { font-size: 20px; }

.ioc-sr .ioc-sr-tips ul { margin: 0 0 0 1.2em; padding: 0; list-style: disc; }
.ioc-sr .ioc-sr-tips li { font-size: 18px; line-height: 1.45; margin: 0 0 4px; }

/* the 6 departments: 2 per row on phones, 3 from 640px */
.ioc-sr .ioc-sr-grid { display: -ms-grid; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
.ioc-sr .ioc-sr-grid a.ioc-sr-btn { margin: 0; -webkit-justify-content: center; justify-content: center; text-align: center; padding: 10px 8px; }

/* call us */
.ioc-sr .ioc-sr-call { margin: 24px 0 8px; padding: 16px; background: #f2f6fa; border: 1px solid #c9d6e3; border-radius: 8px; }
.ioc-sr .ioc-sr-call h2 { margin: 0 0 12px; padding: 0; font-size: 22px; line-height: 1.3; color: #0b3c6b; font-weight: 700; }
.ioc-sr .ioc-sr-call a.ioc-sr-btn { -webkit-justify-content: center; justify-content: center; text-align: center; }
.ioc-sr .ioc-sr-call a.ioc-sr-btn-call { background: #0b3c6b; color: #fff; border-color: #0b3c6b; font-size: 20px; }
.ioc-sr .ioc-sr-call a.ioc-sr-btn-call:hover { background: #093f6e; color: #fff; }
.ioc-sr .ioc-sr-ico { width: 22px; height: 22px; margin-right: 8px; fill: currentColor; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.ioc-sr .ioc-sr-hours { margin: 0 0 12px; font-size: 18px; line-height: 1.45; color: #1a1a1a; }
.ioc-sr .ioc-sr-call a.ioc-sr-btn-mail { margin-bottom: 0; }

/* =========================================================== phones */
@media only screen and (max-width: 40em) {
  #search_autocomplete .ioc-ac-more { display: none; }
  .ioc-sr .ioc-sr-title h1 { font-size: 24px; }
}
@media only screen and (max-width: 359px) {
  /* very narrow phones: the word "Cerca" stays, the magnifier goes */
  #search_mini_form .ioc-search-ico { display: none; }
  #search_mini_form button.ioc-search-btn { padding: 0 10px; }
}

/* =========================================================== tablets and computers */
@media only screen and (min-width: 40.063em) {
  .ioc-sr .ioc-sr-btns { -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .ioc-sr .ioc-sr-btns a.ioc-sr-btn { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; margin-right: 10px; max-width: 100%; }
  .ioc-sr .ioc-sr-block > a.ioc-sr-btn { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; min-width: 320px; max-width: 100%; }
  .ioc-sr .ioc-sr-lot a.ioc-sr-btn { display: -webkit-flex; display: flex; }
  .ioc-sr .ioc-sr-grid { grid-template-columns: 1fr 1fr 1fr; max-width: 720px; }
  .ioc-sr .ioc-sr-call { max-width: 640px; }
}

/* =========================================================== round 3 (2026-10-04, PLAN v3 U1 U2 U4 U5 U6) */

/* U1 (SU-01, SU-02): while the box is in use (html.ioc-search-active, ioc-search.js) and from "Cerca" or a row tap
   until the page goes away (html.ioc-search-busy) the sticky phone/tablet bar steps back into the page, as it
   already does while a field has the focus (html.ioc-hdr-typing, header stream). Same media query as the header's
   sticky rule; same specificity, this file loads later. So a quick second tap on "Cerca" lands on the busy button
   and never on "Carrello", and the bar never covers the box. */
@media only screen and (max-width: 40em), only screen and (min-width: 40.0625em) and (hover: none) and (pointer: coarse) {
  html.ioc-search-active .preheader.ioc-hdr,
  html.ioc-search-busy .preheader.ioc-hdr { position: static; box-shadow: none; }
  html.ioc-search-active, html.ioc-search-busy { scroll-padding-top: 0; }
}

/* U2: the engine corrected the typed word ("Hai scritto «dirigibilli»: abbiamo cercato «dirigibili».") */
.ioc-sr .ioc-sr-autonote { margin: 0 0 16px; padding: 10px 12px; font-size: 18px; line-height: 1.4; color: #1a1a1a; background: #f2f6fa; border-left: 4px solid #0b3c6b; }
.ioc-sr .ioc-sr-autonote a { display: inline-block; min-height: 44px; padding: 10px 0 0; box-sizing: border-box; font-weight: 700; color: #0b3c6b; text-decoration: underline; }
.ioc-sr .ioc-sr-autonote a:focus { outline: 3px solid #f18200; outline-offset: 2px; }
/* the panel: message above the rows ("Risultati per «dirigibili»"), "Forse cercavi «cuba» ›" row */
#search_autocomplete .ioc-ac-msg.ioc-ac-msg--auto { padding: 10px 12px; background: #f2f6fa; border-bottom: 1px solid #e3e8ee; font-weight: 700; color: #0b3c6b; }
#search_autocomplete ul.ioc-ac > li.ioc-ac-dym > a { color: #0b3c6b; font-weight: 700; font-size: 18px; }
/* a lot code: the exact lot is the first product row, labelled "Il lotto 2632" */
#search_autocomplete ul.ioc-ac > li.ioc-ac-lot { background: #fff8e6; }
#search_autocomplete ul.ioc-ac > li.ioc-ac-lot.active, #search_autocomplete ul.ioc-ac > li.ioc-ac-lot:hover { background: #fdecc8; }
#search_autocomplete ul.ioc-ac > li.ioc-ac-lot .ioc-ac-label { color: #7a4100; }

/* U4: the phone number line: a 44 px tall tap area, same look (the padding is taken back by the margin) */
.ioc-sr .ioc-sr-hours a.ioc-nw { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* one help block on a nothing-found page: the page's own "Scrivici" block stays, the footer's copy goes */
html.ioc-sr-empty-page .ioc-help.ioc-help--footer { display: none !important; }
/* the 8 department tiles (same as the home page) */
.ioc-sr .ioc-sr-grid a.ioc-sr-btn-dept { min-height: 56px; }

/* U5: "Cambia ricerca" under the results list (next to the pager) */
.ioc-sr .ioc-sr-change { margin: 18px 0 8px; }
.ioc-sr button.ioc-sr-change-btn,
.ioc-sr button.ioc-sr-change-btn:hover,
.ioc-sr button.ioc-sr-change-btn:focus {
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 52px; height: auto;
  margin: 0; padding: 10px 16px; background: #fff; color: #0b3c6b; border: 2px solid #0b3c6b; border-radius: 6px;
  box-shadow: none; font-family: Roboto, Arial, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 700;
  text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  touch-action: manipulation;
}
.ioc-sr button.ioc-sr-change-btn:hover { background: #eef4fb; }
.ioc-sr button.ioc-sr-change-btn:focus { outline: 3px solid #f18200; outline-offset: 2px; }
.ioc-sr .ioc-sr-change-btn svg { width: 22px; height: 22px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
@media only screen and (min-width: 40.063em) {
  .ioc-sr button.ioc-sr-change-btn,
  .ioc-sr button.ioc-sr-change-btn:hover,
  .ioc-sr button.ioc-sr-change-btn:focus { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; width: auto; min-width: 320px; }
}

/* U6: touch tablets (the live tablet mode: from 641 px, no hover, coarse pointer). Panel rows 18 px; the panel is
   as wide as the form (left/right 0 above); empty-page and category buttons 2 per row upright, 3 sideways; the
   call block at most 600 px. Computers never match (hover: none) and (pointer: coarse). */
@media only screen and (min-width: 40.0625em) and (hover: none) and (pointer: coarse) {
  #search_autocomplete ul.ioc-ac > li > a { min-height: 56px; font-size: 18px; }
  #search_autocomplete .ioc-ac-title { font-size: 18px; max-height: 2.6em; }
  #search_autocomplete .ioc-ac-msg { font-size: 18px; }
  #search_autocomplete .ioc-ac-label { font-size: 16px; }
  .ioc-sr .ioc-sr-btns { display: -ms-grid; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
  .ioc-sr .ioc-sr-btns a.ioc-sr-btn { display: -webkit-box; display: -webkit-flex; display: flex; margin: 0; max-width: none; min-width: 0; }
  .ioc-sr .ioc-sr-grid { grid-template-columns: 1fr 1fr; max-width: none; }
  .ioc-sr .ioc-sr-call { max-width: 600px; }
}
@media only screen and (min-width: 40.0625em) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .ioc-sr .ioc-sr-btns,
  .ioc-sr .ioc-sr-grid { grid-template-columns: 1fr 1fr 1fr; }
}