/* ioc-desktop-header.css - desktop refresh 2026-10-27, stream "header" (preview theme only).
   Computers only: screens of 1025 px and more with a mouse or trackpad. The <link> carries the same media query and
   every rule below sits inside it, so phones, touch tablets of any width and 641-1024 px windows never apply a rule.
   Contents: 0. base layer (text size, focus ring), 1. notice bar, 2. old parts hidden, 3. header grid (Row A + sticky
   Row B), 4. Row A tools and currency list, 5. Row B (Categorie, Ultimi prodotti, search slot, Carrello),
   6. category panel, 7. checkout header.
   Markup: page/html/header.phtml + ioc_desktop/header/menu.phtml. Behaviour: js/ioc-desktop-header-*.js.
   Older computers (Chrome 109, Firefox 115 ESR, Safari 15-16): grid, flex gap, sticky and variables only; every focus
   ring is also set on plain :focus. */

@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) {

/* ===================================================================== 0. base layer (every page) */
body, p, ul, ol, dl, address, blockquote, label, legend { font-size: 18px; line-height: 1.6; }
h1, h2 { text-transform: none; }
a:focus, button:focus, summary:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
	outline: 3px solid #c76a00; outline-offset: 2px;
}
/* mouse clicks do not leave a ring where the browser knows the difference; browsers without :focus-visible drop
   this rule and keep the ring */
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) {
	outline: none;
}
/* text fields: app.css drops their outline on focus (input[type=text]:focus{outline:none}); same weight, later file.
   The search box keeps its own orange ring (#search_mini_form input#search:focus is stronger) */
input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, textarea:focus { outline: 3px solid #c76a00; outline-offset: 2px; }
/* focused or linked content never lands under the sticky Row B. Set on the content, not as html scroll-padding: that
   also applied to the sticky bar's own fields, so a click or typing in the search box while scrolled down made the page
   jump up 300-1100 px (integration QA 27 Oct) */
.main-container *, .footer-container *, .ioc-crumbs-row * { scroll-margin-top: 80px; }

/* ===================================================================== 1. notice bar (CMS block "avviso", not edited) */
.ioc-dh-notice .avviso { padding: 5px 16px !important; font-size: 17px !important; line-height: 1.4 !important; text-wrap: balance; }
.ioc-dh-notice a:focus { outline-color: #ffc400; }
.ioc-dh-notice .ioc-promo-2026q4 a:focus { outline-color: #0e3760; }

/* ===================================================================== 2. old parts hidden */
.preheader.ioc-hdr { display: none; }                          /* welcome, top links, flags, currency select (kept in the DOM) */
header#header .ioc-dh-cartcol.skip-links { display: none !important; }   /* orange "Carrello (0)"; #header-minicart stays */
header#header .divtopmenu { display: none; }                   /* the light-blue category bar */
body.f-topbar-fixed { padding-top: 0 !important; }             /* Foundation still adds 45 px for its hidden sticky bar */
header#header .page-header-container::before,
header#header .page-header-container::after { display: none; } /* clearfix pseudo-elements would become grid items */

/* ===================================================================== 3. header grid: Row A 112 + hairline, Row B 64 (sticky)
   v2 2026-11-03 (Stefano "prova a rimettere tutto"): Row A 72 -> 112 for the big logo (340 px, today 412) */
header#header.page-header {
	position: -webkit-sticky; position: sticky; top: -113px; z-index: 1003;
	margin: 0; padding: 0;
	background: #fff linear-gradient(to bottom, #fff 112px, #d3dbe4 112px, #d3dbe4 113px, #fff 113px);
	border-bottom: 1px solid #d3dbe4;
	box-shadow: 0 2px 6px rgba(14, 55, 96, 0.08);
	text-transform: none;
}
header#header .page-header-container {
	position: relative; display: grid; margin: 0 auto; padding: 0 15px;
	grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 113px 64px; column-gap: 16px;
	grid-template-areas: "logo util util" "cats latest search";
	align-items: center;
}
header#header .page-header-container > .columns { float: none; width: auto; padding: 0; margin: 0; }
header#header .ioc-dh-logocol { grid-area: logo; display: flex !important; align-items: center; height: 112px; align-self: start; }
header#header .ioc-dh-logocol a { display: block; line-height: 0; border-radius: 4px; }
header#header .ioc-dh-logocol img.logo { width: 340px; height: auto; max-width: none; margin: 0; padding: 0; }
/* the search column holds the box and, after it, the Carrello button (see header.phtml: the old cart column stays last) */
header#header .ioc-dh-searchcol { grid-area: search; min-width: 0; display: flex; align-items: center; gap: 16px; }
header#header .ioc-dh-searchcol .topsearch { flex: 1 1 auto; min-width: 0; margin: 0; width: auto; max-width: none; }

/* ===================================================================== 4. Row A: phone, Scrivici, language, currency, account, orders */
.ioc-dh-util[hidden] {
	display: flex; grid-area: util; justify-content: flex-end; align-items: center; gap: 4px;
	align-self: start; height: 112px; min-width: 0;
}
.ioc-dh-ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ioc-dh-chev { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ioc-dh-util .ioc-dh-item {
	display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 10px;
	border-radius: 6px; background: transparent; color: #0b3c6b; text-decoration: none; text-transform: none; white-space: nowrap;
	font: 500 17px/1.2 "Roboto", Helvetica, Arial, sans-serif; letter-spacing: normal;
}
.ioc-dh-util a.ioc-dh-item:hover, .ioc-dh-util summary.ioc-dh-item:hover { background: #eef3f8; color: #0b3c6b; text-decoration: underline; }
.ioc-dh-util .ioc-dh-phone { cursor: default; }
.ioc-dh-util .ioc-dh-phone strong { font-weight: 700; color: #1a1a1a; }
/* both flags, as in the old header; the current language has a navy frame */
.ioc-dh-flags { display: inline-flex; align-items: center; }
.ioc-dh-util .ioc-dh-lang { padding: 0 7px; }
.ioc-dh-util .ioc-dh-lang img { width: 26px; height: 19px; outline: 1px solid #d3dbe4; }
.ioc-dh-util .ioc-dh-lang[aria-current="true"] img { outline: 2px solid #0b3c6b; outline-offset: 1px; }

.ioc-dh-cur { position: relative; display: block; margin: 0; }
.ioc-dh-util .ioc-dh-cur > summary { min-height: 48px; list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
/* closed: the list is not rendered at all (no find-in-page match can open it by itself) */
.ioc-dh-cur:not([open]) > .ioc-dh-curlist { display: none; }
.ioc-dh-cur > summary::-webkit-details-marker { display: none; }
.ioc-dh-cur[open] > summary { background: #eef3f8; }
.ioc-dh-cur[open] > summary .ioc-dh-chev { transform: rotate(180deg); }
.ioc-dh-curlist {
	position: absolute; top: 100%; right: 0; z-index: 20; width: 280px; margin: 4px 0 0; padding: 6px 0; list-style: none;
	background: #fff; border: 1px solid #b9c9da; border-radius: 8px; box-shadow: 0 12px 28px rgba(14, 55, 96, 0.18);
}
.ioc-dh-curlist li { margin: 0; padding: 0; list-style: none; }
.ioc-dh-curlist a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 16px;
	font: 400 17px/1.3 "Roboto", Helvetica, Arial, sans-serif; color: #1a1a1a; text-decoration: none;
}
.ioc-dh-curlist a:hover { background: #eef3f8; color: #0b3c6b; text-decoration: underline; }
.ioc-dh-curlist a[aria-current="true"] { font-weight: 700; color: #0b3c6b; }
.ioc-dh-curlist a:focus { outline-offset: -3px; }
.ioc-dh-tick { font-weight: 700; color: #0b3c6b; }

/* ===================================================================== 5. Row B */
/* "Categorie" button = the summary of the panel */
.ioc-dm[hidden] { display: block; grid-area: cats; margin: 0; }
.ioc-dm > summary {
	display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 18px 0 14px;
	list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap;
	background: #0b3c6b; color: #fff; border-radius: 8px; transition: background-color 0.1s;
	font: 500 18px/1.2 "Roboto", Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: normal;
}
.ioc-dm > summary::-webkit-details-marker { display: none; }
.ioc-dm > summary:hover, .ioc-dm[open] > summary { background: #082d52; color: #fff; }
.ioc-dm > summary .ioc-dm-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ioc-dm[open] > summary .ioc-dm-chev { transform: rotate(180deg); }

.ioc-dh-latest[hidden] {
	display: inline-flex; grid-area: latest; align-items: center; gap: 8px; box-sizing: border-box; min-height: 48px; padding: 0 12px;
	border-radius: 8px; color: #0b3c6b; text-decoration: none; white-space: nowrap;
	font: 500 18px/1.2 "Roboto", Helvetica, Arial, sans-serif; text-transform: none;
}
.ioc-dh-latest:hover { background: #eef3f8; color: #0b3c6b; text-decoration: underline; }

.ioc-dh-cart[hidden] {
	display: inline-flex; flex: 0 0 auto; align-items: center; gap: 16px; box-sizing: border-box; min-height: 48px; padding: 0 16px 0 14px;
	border: 2px solid #0b3c6b; border-radius: 8px; background: #fff; color: #0b3c6b; text-decoration: none; white-space: nowrap;
	font: 500 18px/1.2 "Roboto", Helvetica, Arial, sans-serif; text-transform: none;
}
.ioc-dh-cart:hover { background: #eef3f8; color: #0b3c6b; text-decoration: underline; }
.ioc-dh-cart-ico { position: relative; display: inline-block; width: 26px; height: 26px; }
.ioc-dh-cart-ico .ioc-dh-ico { width: 26px; height: 26px; }
/* "Carrello (0)" as in the old header: the count is plain text after the word, also at 0 (ioc-header.css hides 0) */
.ioc-dh-cart .ioc-dh-cartn .ioc-cart-count,
.ioc-dh-cart .ioc-dh-cartn .ioc-cart-count[data-count="0"],
.ioc-dh-cart .ioc-dh-cartn .ioc-cart-count[hidden] {
	display: inline !important; position: static; min-width: 0; height: auto; padding: 0; border-radius: 0;
	background: none; color: inherit; font: inherit; box-shadow: none; vertical-align: baseline;
}

/* ===================================================================== 6. category panel (two panes) */
.ioc-dm-panel {
	position: absolute; top: 100%; left: 15px; right: 15px; z-index: 10; margin: 0; padding: 0; text-align: left;
	background: #fff; border: 1px solid #b9c9da; border-top: 0; border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 28px rgba(14, 55, 96, 0.18); font-family: "Roboto", Helvetica, Arial, sans-serif; text-transform: none;
}
/* bridge over the 8 px gap between the button and the panel: the pointer never falls out on its way down. Exactly the
   gap (QA 27 Oct: a 12 px bridge covered the bottom 4 px of the open "Categorie" button, where a click did not close it) */
.ioc-dm-panel::before { content: ""; position: absolute; left: 0; top: -8px; width: 240px; height: 8px; }
/* closed: the panel is not rendered at all, so Ctrl+F on the page never finds (and opens) a category inside it */
.ioc-dm:not([open]) > .ioc-dm-panel { display: none; }
.ioc-dm-nav { display: grid; grid-template-columns: 300px minmax(0, 1fr); margin: 0; }
.ioc-dm-depts, .ioc-dm-panes {
	max-height: calc(100vh - 230px); max-height: var(--ioc-dm-h, calc(100vh - 230px));
	overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
}
.ioc-dm-depts {   /* 4 px padding: the 9 rows (430 px with 8 px) overflowed the 427 px column at 1280/1366x650 by 3 px (QA) */
	margin: 0; padding: 4px 0; list-style: none; background: #f5f8fb; border-right: 1px solid #d3dbe4; border-radius: 0 0 0 10px;
}
.ioc-dm-depts li { margin: 0; padding: 0; list-style: none; }
.ioc-dm-dept {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; min-height: 46px;
	padding: 0 16px 0 12px; border-left: 4px solid transparent; color: #0b3c6b; text-decoration: none;
	font: 500 18px/1.3 "Roboto", Helvetica, Arial, sans-serif;
}
.ioc-dm-dept:hover { background: #eef3f8; color: #0b3c6b; text-decoration: underline; }
.ioc-dm-dept.is-on { background: #fff; border-left-color: #0b3c6b; font-weight: 700; }
.ioc-dm-dept.is-current > span:first-child::before {
	content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: #0b3c6b; vertical-align: middle;
}
.ioc-dm-dept:focus { outline-offset: -3px; }
.ioc-dm-arr { font-size: 26px; line-height: 1; font-weight: 400; color: #0b3c6b; }
.ioc-dm-panes { padding: 0 28px 24px; scroll-padding-top: 76px; }
.ioc-dm-pane { display: block; margin: 0; }
.ioc-dm-pane + .ioc-dm-pane { margin-top: 24px; padding-top: 16px; border-top: 1px solid #d3dbe4; }  /* without JS: stacked */
html.ioc-dm-js .ioc-dm-pane { display: none; }
html.ioc-dm-js .ioc-dm-pane.is-on { display: block; margin-top: 0; padding-top: 0; border-top: 0; }
/* the pane title stays at the top while a long pane (Monete) scrolls, so no link ever slides under the Chiudi button
   (QA 27 Oct); the right padding keeps the title clear of the button */
.ioc-dm-head {
	position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #fff;
	display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; margin: 0 0 8px; padding: 18px 140px 4px 0; line-height: 1.3;
}
.ioc-dm-h { display: inline-flex; align-items: center; min-height: 44px; font-size: 22px; font-weight: 700; color: #0b3c6b; text-decoration: none; }
a.ioc-dm-h:hover { color: #082d52; text-decoration: underline; }
.ioc-dm-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 17px; color: #005b8f; text-decoration: underline; }
.ioc-dm-all:hover { color: #003a5c; }
.ioc-dm-links {
	margin: 0 0 8px; padding: 0; list-style: none;
	-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px;
}
.ioc-dm-links li { margin: 0; padding: 0; list-style: none; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.ioc-dm-links a {
	display: block; box-sizing: border-box; min-height: 44px; padding: 10px 8px; border-radius: 6px;
	font: 400 17px/1.4 "Roboto", Helvetica, Arial, sans-serif; color: #1a1a1a; text-decoration: none;
}
.ioc-dm-links a:hover { background: #eef3f8; color: #0b3c6b; text-decoration: underline; }
.ioc-dm-links a:focus, .ioc-dm-chips a:focus { outline-offset: -1px; }
.ioc-dm-tree > li.ioc-dm-grp { margin: 0 0 12px; }
.ioc-dm-tree a.ioc-dm-top { font-weight: 700; color: #0b3c6b; }
.ioc-dm-tree ul { margin: 0; padding: 0 0 0 16px; list-style: none; }
.ioc-dm-g { margin: 16px 0 8px; font: 700 18px/1.3 "Roboto", Helvetica, Arial, sans-serif; color: #0b3c6b; }
.ioc-dm-head + .ioc-dm-g { margin-top: 4px; }
.ioc-dm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.ioc-dm-chips li { margin: 0; padding: 0; list-style: none; }
.ioc-dm-chips a {
	display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 14px;
	background: #fff; border: 2px solid #b9c9da; border-radius: 8px; color: #0b3c6b; text-decoration: none;
	font: 500 17px/1.2 "Roboto", Helvetica, Arial, sans-serif;
}
.ioc-dm-chips a:hover { background: #0b3c6b; border-color: #0b3c6b; color: #fff; }
.ioc-dm-solo { margin: 8px 0 0; }
.ioc-dm-allbig {
	display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 48px; padding: 0 22px;
	border: 2px solid #0b3c6b; border-radius: 8px; background: #fff; color: #0b3c6b; text-decoration: none;
	font: 500 18px/1.2 "Roboto", Helvetica, Arial, sans-serif;
}
.ioc-dm-allbig:hover { background: #0b3c6b; color: #fff; }
.ioc-dm-panel button.ioc-dm-close {
	position: absolute; top: 14px; right: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
	box-sizing: border-box; width: auto; height: auto; min-height: 48px; margin: 0; padding: 0 16px;
	background: #fff; color: #0b3c6b; border: 2px solid #0b3c6b; border-radius: 8px; box-shadow: none; cursor: pointer;
	font: 500 17px/1.2 "Roboto", Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: normal;
}
.ioc-dm-panel button.ioc-dm-close[hidden] { display: none; }
.ioc-dm-panel button.ioc-dm-close:hover { background: #eef3f8; color: #0b3c6b; }
.ioc-dm-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1002; background: rgba(14, 55, 96, 0.25); }
.ioc-dm-scrim[hidden] { display: none; }
/* the search suggestions step aside while the panel is open: both hang under Row B and overlapped (integration QA) */
#ioc-dm[open] ~ .ioc-dh-searchcol .searchautocomplete-placeholder { display: none !important; }

/* ===================================================================== 7. checkout: calm, one static row (logo, phone, Scrivici) */
body.firecheckout-index-index header#header.page-header { position: static; background-image: none; }
body.firecheckout-index-index header#header .page-header-container {
	grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 113px; grid-template-areas: "logo util";
}
body.firecheckout-index-index header#header .ioc-dm[hidden],
body.firecheckout-index-index header#header .ioc-dh-latest[hidden],
body.firecheckout-index-index header#header .ioc-dh-cart[hidden],
body.firecheckout-index-index header#header .ioc-dh-searchcol,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-cur,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-flags,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-new,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-login,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-acct,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-orders,
body.firecheckout-index-index .ioc-dh-util .ioc-dh-out { display: none; }

}

/* ---- 1025-1279 px (M): smaller logo, Row A without the optional words, 2 link columns, notice 16 px ---- */
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (max-width: 79.9375em) {
	.ioc-dh-notice .avviso { font-size: 16px !important; }
	header#header .ioc-dh-logocol img.logo { width: 260px; }
	.ioc-dh-util .ioc-dh-opt { display: none; }
	.ioc-dh-util .ioc-dh-item { padding: 0 8px; }
	.ioc-dm-nav { grid-template-columns: 260px minmax(0, 1fr); }
	.ioc-dm-links { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}

/* ---- 1536 px and more: the logo at today's size (412 px), Row A 128 (v2 2026-11-03). Below 1536 it stays 340 / 260 px so
   Row A (phone, Scrivici, flags, currency, Accedi, Nuovo cliente, I miei ordini) keeps one line at 1280 and 1366. ---- */
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (min-width: 96em) {
	header#header.page-header { top: -129px; background: #fff linear-gradient(to bottom, #fff 128px, #d3dbe4 128px, #d3dbe4 129px, #fff 129px); }
	header#header .page-header-container { grid-template-rows: 129px 64px; }
	header#header .ioc-dh-logocol { height: 128px; }
	.ioc-dh-util[hidden] { height: 128px; }
	header#header .ioc-dh-logocol img.logo { width: 412px; }
	body.firecheckout-index-index header#header .page-header-container { grid-template-rows: 129px; }
}

/* ---- 1680 px and more (XL): 4 link columns ---- */
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (min-width: 105em) {
	.ioc-dm-links { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
}