/* ioc-desktop-home.css - desktop refresh, HOME stream (preview theme). v2, 1 Nov 2026: "same shop, tidied".
 * Today's homepage stays as it is (left "Categorie" list, CMS promo box, six photo tiles, vetrina, latest arrivals,
 * "Chi e'" text, trust strip, footer); only spacing, type, buttons and the product card are tidied.
 * The v1 home of 27 Oct (no list, no tiles, "Cosa cerchi?" copy, help and who cards, dates, "Leggi tutto") is gone.
 * Computers only: every rule sits in the desktop query (= the <link media> in ioc_mobile/home.xml), so phones,
 * touch tablets and 641-1024 px mouse windows are unchanged. Loaded on every page (<default>) because of the footer
 * and trust strip rules (sections 7-9); every other rule is scoped to .ioc-home (the homepage).
 * Old browsers: no :has(), nesting, container queries, @layer, color-mix(), dvh, inset; photo boxes use padding-top.
 * M 1025-1279, L 1280-1679, XL 1680+. Unhashed source; the page loads ioc-desktop-home-<md5 8>.css. */

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

/* ==== 0. A little air between the header and the page */
.ioc-home { padding-top: 16px; }

/* ==== 1. Left "Categorie" list, home only. Today's capitals and title font; rows 44 px; chevron at the right.
   The list on the other pages is styled by ioc-desktop-list.css (section 1b); these rules are more specific. */
.ioc-home .category-block {
	box-sizing: border-box; margin: 0; padding: 14px 14px 6px;
	border: 1px solid #cfd8e3; border-radius: 10px; background: #fff; box-shadow: none;
}
.ioc-home .category-block .block-title { margin: 0; padding: 0; border: 0; font-size: 16px; }
.ioc-home .category-block .block-title h3 {
	margin: 0 0 4px; padding: 0 0 10px 2px; border: 0; border-bottom: 1px solid #cfd8e3;
	font-family: "Roboto Condensed", Roboto, Helvetica, Arial, sans-serif;
	font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: 0; text-transform: none; color: #003482;
}
.ioc-home .category-block ul.featured-cats { margin: 0; padding: 0; list-style: none; font-size: 16px; }
.ioc-home .category-block ul.featured-cats > li.cat {
	position: relative; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0;
	border: 0; border-bottom: 1px solid #e3e8ee; background: none; list-style: none; font-size: 16px; line-height: 1.3;
}
.ioc-home .category-block ul.featured-cats > li.cat:last-child { border-bottom: 0; }
.ioc-home .category-block ul.featured-cats > li.cat > a {
	flex: 1 1 auto; display: block; min-width: 0; padding: 11px 0 11px 10px;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; font-weight: 400;
	letter-spacing: 0; text-transform: uppercase; color: #1a1a1a; text-decoration: none; overflow-wrap: break-word; word-wrap: break-word;
}
.ioc-home .category-block ul.featured-cats > li.cat > i {
	position: static; flex: 0 0 auto; width: 20px; margin: 0 4px 0 6px;
	font-size: 18px; line-height: 1; text-align: center; color: #5f6b7a; pointer-events: none;
}
/* hover: light tint, the shop's light blue as a 4 px mark on the left, navy underlined name */
.ioc-home .category-block ul.featured-cats > li.cat:hover { background: #eef4fa; box-shadow: inset 4px 0 0 #0298da; }
.ioc-home .category-block ul.featured-cats > li.cat:hover > a,
.ioc-home .category-block ul.featured-cats > li.cat > a:hover,
.ioc-home .category-block ul.featured-cats > li.cat > a:focus { color: #003482; text-decoration: underline; text-underline-offset: 3px; }
.ioc-home .category-block ul.featured-cats > li.cat:hover > i { color: #003482; }
/* sub-categories: the hover panel opens to the right, as today. Long lists in columns (classes from
   js/ioc-desktop-home.js; without JS one column, as today) */
.ioc-home .category-block ul.featured-cats li ul.featured-sub-cats { display: none; }
.ioc-home .category-block ul.featured-cats > li.cat:hover > ul.featured-sub-cats {
	display: block; position: absolute; top: -1px; left: 100%; z-index: 20; box-sizing: border-box;
	width: 300px; margin: 0; padding: 4px 0;
	border: 1px solid #b9c9da; border-radius: 0 6px 6px 0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); list-style: none;
}
.ioc-home .category-block ul.featured-sub-cats > li.sub-cat {
	margin: 0; padding: 0; border: 0; border-bottom: 1px solid #eef1f5; background: #fff; list-style: none;
}
.ioc-home .category-block ul.featured-sub-cats > li.sub-cat:last-child { border-bottom: 0; }
.ioc-home .category-block ul.featured-sub-cats > li.sub-cat:hover { background: #eef4fa; }
.ioc-home .category-block ul.featured-sub-cats > li.sub-cat > a {
	display: block; padding: 9px 14px; background: none;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; font-weight: 400;
	letter-spacing: 0; text-transform: uppercase; color: #1a1a1a; text-decoration: none; overflow-wrap: break-word; word-wrap: break-word;
}
.ioc-home .category-block ul.featured-sub-cats > li.sub-cat > a:hover,
.ioc-home .category-block ul.featured-sub-cats > li.sub-cat > a:focus { background: none; color: #003482; text-decoration: underline; text-underline-offset: 3px; }
.ioc-home .category-block ul.featured-cats > li.cat:hover > ul.featured-sub-cats.ioc-dk-flyout--2 {
	width: 560px; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 0; column-gap: 0;
}
.ioc-home .category-block ul.featured-cats > li.cat:hover > ul.featured-sub-cats.ioc-dk-flyout--4 {
	width: 960px; max-width: calc(75vw - 10px); -webkit-columns: 200px 4; columns: 200px 4; -webkit-column-gap: 0; column-gap: 0;
}
.ioc-home .category-block ul.featured-sub-cats.ioc-dk-flyout--2 > li.sub-cat,
.ioc-home .category-block ul.featured-sub-cats.ioc-dk-flyout--4 > li.sub-cat {
	-webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; border-bottom: 0;
}
/* keyboard: tabbing onto a department opens its panel (a separate rule: browsers without :focus-within skip it) */
.ioc-home .category-block ul.featured-cats > li.cat:focus-within > ul.featured-sub-cats {
	display: block; position: absolute; top: -1px; left: 100%; z-index: 20; box-sizing: border-box;
	width: 300px; margin: 0; padding: 4px 0;
	border: 1px solid #b9c9da; border-radius: 0 6px 6px 0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); list-style: none;
}
.ioc-home .category-block ul.featured-cats > li.cat:focus-within > ul.featured-sub-cats.ioc-dk-flyout--2 {
	width: 560px; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 0; column-gap: 0;
}
.ioc-home .category-block ul.featured-cats > li.cat:focus-within > ul.featured-sub-cats.ioc-dk-flyout--4 {
	width: 960px; max-width: calc(75vw - 10px); -webkit-columns: 200px 4; columns: 200px 4; -webkit-column-gap: 0; column-gap: 0;
}

/* ==== 2. Six photo tiles (CMS content): same photos, order, names and navy band; the whole tile is a link */
.ioc-home ul.elenco-categorie { margin: 0 -10px 4px; }
.ioc-home ul.elenco-categorie > li { position: relative; padding: 0 10px 20px; }
/* photo in a reserved box (52 %, centre crop); the CMS files are 231 x 136 and carry no size */
.ioc-home ul.elenco-categorie .cat-img-container {
	position: relative; height: 0; max-height: none; margin: 0; padding: 0 0 52%; overflow: hidden; background: #e9eef3;
}
.ioc-home ul.elenco-categorie .cat-img-container a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.ioc-home ul.elenco-categorie .cat-img-container picture { display: block; }
.ioc-home ul.elenco-categorie .cat-img-container a:focus { outline: 4px solid #0b3c6b; outline-offset: -4px; }
.ioc-home ul.elenco-categorie .cat-img-container img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover;
}
.ioc-home ul.elenco-categorie .wrapper-categoria { margin: 0; padding: 10px 12px 16px; background: #16507e; color: #fff; }
.ioc-home ul.elenco-categorie span.categoria {
	display: block; margin: 0 0 8px; font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 21px; line-height: 1.5; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; color: #fff;
}
.ioc-home ul.elenco-categorie .wrapper-categoria br { display: none; }
/* "Sfoglia prodotti": white on the navy band (orange stays for buying); no icon, so IT and EN look the same */
.ioc-home ul.elenco-categorie .wrapper-categoria a.button {
	position: static; display: inline-block; box-sizing: border-box; min-height: 44px; margin: 0; padding: 11px 22px;
	border: 0; border-radius: 6px; background: #fff; box-shadow: none;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 22px; font-weight: 500;
	letter-spacing: 0; text-transform: none; color: #0b3c6b; text-decoration: none; transition: none;
}
.ioc-home ul.elenco-categorie .wrapper-categoria a.button i { display: none; }
.ioc-home ul.elenco-categorie > li:hover .wrapper-categoria a.button,
.ioc-home ul.elenco-categorie .wrapper-categoria a.button:hover,
.ioc-home ul.elenco-categorie .wrapper-categoria a.button:focus { background: #dcebf7; color: #0b3c6b; text-decoration: none; }
.ioc-home ul.elenco-categorie > li:hover span.categoria { text-decoration: underline; text-underline-offset: 4px; }
/* the button's link covers the whole tile (photo + band, not the gutters) */
.ioc-home ul.elenco-categorie .wrapper-categoria a.button::after {
	content: ""; position: absolute; top: 0; right: 10px; bottom: 20px; left: 10px; z-index: 1;
}
.ioc-home ul.elenco-categorie .wrapper-categoria a.button:focus { outline: none; }
.ioc-home ul.elenco-categorie .wrapper-categoria a.button:focus::after { outline: 3px solid #0b3c6b; outline-offset: 2px; }
/* the photo link (CMS markup) is a second tab stop and its own ring is hidden under the photo: show the tile ring instead
   (a separate rule: browsers without :focus-within skip it) */
.ioc-home ul.elenco-categorie > li:focus-within .wrapper-categoria a.button::after { outline: 3px solid #0b3c6b; outline-offset: 2px; }

/* ==== 3. Section headings: today's capitals and navy, a hairline instead of the 2 px grey rule */
.ioc-home h2 {
	margin: 28px 0 20px; padding: 0 0 8px; border: 0; border-bottom: 1px solid #c9d4e0;
	font-family: "Roboto Condensed", Roboto, Helvetica, Arial, sans-serif;
	font-size: 26px; line-height: 1.3; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: #003482;
}

/* ==== 4. Product cards, vetrina and latest arrivals: one card, like the "Ultimi prodotti" page.
   16 + 12 cards as today, 4 per row (vetrina 3 per row at 1025-1279, section 10). The whole card opens the lot;
   price and button sit at the card bottom, so they line up across a row. */
.ioc-home ul.ioc-home-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 20px; gap: 20px;
	margin: 0 0 20px; padding: 0; list-style: none;
}
.ioc-home ul.ioc-home-grid > li.ioc-home-item { display: block; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ioc-home .ioc-home-card.panel-schede {
	position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: 100%;
	margin: 0; padding: 12px 12px 16px;
	border: 1px solid #cfd8e3; border-radius: 10px; background: #fff; box-shadow: none; color: #1a1a1a;
}
.ioc-home .ioc-home-card.panel-schede:hover { border-color: #0b3c6b; box-shadow: 0 2px 8px rgba(11, 60, 107, 0.12); }
/* photo: 5:4 box reserved before the image loads (padding trick), image contained */
.ioc-home .ioc-home-card a.ioc-home-card-photo {
	order: 1; position: relative; display: block; height: 0; margin: 0; padding: 0 0 80%; overflow: hidden;
	border-radius: 6px; background: #f5f8fb; line-height: 0;
}
.ioc-home .ioc-home-card a.ioc-home-card-photo img {
	position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; object-fit: contain;
}
/* title without the lot code (the full name stays in the page, hidden, with itemprop="name") */
.ioc-home .ioc-home-card a.ioc-home-card-name { order: 2; display: block; margin: 12px 0 4px; padding: 0; color: #111; text-decoration: none; }
.ioc-home .ioc-home-card a.ioc-home-card-name::after {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 10px;
}
.ioc-home .ioc-home-card a.ioc-home-card-name:focus { outline: none; }
.ioc-home .ioc-home-card a.ioc-home-card-name:focus::after { outline: 3px solid #0b3c6b; outline-offset: 2px; }
.ioc-home .ioc-home-card span.evidenza {
	display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	height: auto; min-height: 0; max-height: 4.05em; margin: 0;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.35; font-weight: 500;
	letter-spacing: 0; text-transform: none; color: #111; overflow-wrap: break-word; word-wrap: break-word;
}
.ioc-home .ioc-home-card:hover span.evidenza,
.ioc-home .ioc-home-card a.ioc-home-card-name:focus span.evidenza { text-decoration: underline; text-underline-offset: 3px; }
.ioc-home .ioc-home-card .ioc-name-full { display: none; }
.ioc-home .ioc-home-card .ioc-name-short { display: inline; }
/* "Lotto M23065" on its own line under the title */
.ioc-home .ioc-home-card p.ioc-lot {
	order: 3; display: block; margin: 0 0 8px; padding: 0;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.35; font-weight: 400;
	text-align: left; color: #5f6b7a; overflow-wrap: break-word; word-wrap: break-word;
}
/* hairline, price and button pinned to the card bottom */
.ioc-home .ioc-home-card hr.servizi {
	order: 4; display: block; width: 100%; height: 0; margin: auto 0 0; padding: 0; border: 0; border-top: 1px solid #e3e8ee;
}
.ioc-home .ioc-home-card .prezzoelenco { order: 5; margin: 10px 0 0; padding: 0; text-align: left; }
.ioc-home .ioc-home-card .prezzoelenco .price-box { margin: 0; padding: 0; text-align: left; }
.ioc-home .ioc-home-card .prezzoelenco .price-box p { margin: 0; }
.ioc-home .ioc-home-card .prezzoelenco .price-label { display: none; }
.ioc-home .ioc-home-card .prezzoelenco .old-price,
.ioc-home .ioc-home-card .prezzoelenco .special-price { display: inline-block; margin: 0 10px 0 0; padding: 0; }
.ioc-home .ioc-home-card .prezzoelenco .price {
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 24px; line-height: 1.25; font-weight: 700; color: #1a1a1a; white-space: nowrap;
}
.ioc-home .ioc-home-card .prezzoelenco .old-price .price { font-size: 17px; font-weight: 400; color: #5f6b7a; text-decoration: line-through; }
/* one buy button: full width, 48 px, the darker shop orange (white text 4.6:1); above the card link */
.ioc-home .ioc-home-card .ioc-home-card-action { order: 6; position: relative; z-index: 2; margin: 10px 0 0; text-align: left; }
.ioc-home .ioc-home-card .ioc-home-card-action .button,
.ioc-home .ioc-home-card .ioc-home-card-action .button:hover,
.ioc-home .ioc-home-card .ioc-home-card-action .button:focus {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 100%; min-height: 48px; margin: 0; padding: 6px 12px; border-radius: 8px; box-shadow: none;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.25; font-weight: 700;
	text-align: center; text-transform: none; letter-spacing: 0; text-decoration: none; white-space: normal; transition: none;
}
.ioc-home .ioc-home-card .ioc-home-card-action button.btn-cart { background: #b85c00; border: 1px solid #b85c00; color: #fff; }
.ioc-home .ioc-home-card .ioc-home-card-action button.btn-cart:hover,
.ioc-home .ioc-home-card .ioc-home-card-action button.btn-cart:focus { background: #8f4700; border-color: #8f4700; color: #fff; }
.ioc-home .ioc-home-card .ioc-home-card-action .button:focus { outline: 3px solid #0b3c6b; outline-offset: 2px; }
.ioc-home .ioc-home-card .ioc-home-card-action .button i { margin: 0 8px 0 0; font-size: 20px; color: inherit; }
/* lots with options ("Vedi dettagli"): same size, navy outline, not a buy button */
.ioc-home .ioc-home-card .ioc-home-card-action a.ioc-home-card-btn { border: 2px solid #0b3c6b; background: #fff; color: #0b3c6b; }
.ioc-home .ioc-home-card .ioc-home-card-action a.ioc-home-card-btn:hover,
.ioc-home .ioc-home-card .ioc-home-card-action a.ioc-home-card-btn:focus { background: #eef3f8; color: #0b3c6b; }
/* already in the cart: the green "Nel carrello / Vai al carrello" (colours from the shared bundle), 48 px as well,
   for the server's <a> and the <button> the add-to-cart script turns green */
.ioc-home .ioc-home-card .ioc-home-card-action .button.ioc-btn-incart,
.ioc-home .ioc-home-card .ioc-home-card-action .button.ioc-btn-incart:hover,
.ioc-home .ioc-home-card .ioc-home-card-action .button.ioc-btn-incart:focus { padding: 3px 8px; border-width: 1px; border-style: solid; font-size: 17px; line-height: 1.15; white-space: normal; }
.ioc-home .ioc-home-card .ioc-home-card-action .ioc-btn-incart .ioc-btn-go { font-size: 17px; line-height: 1.15; }
.ioc-home .ioc-home-card .ioc-home-card-action .ioc-btn-incart .ioc-btn-tick { margin: 0 8px 0 0; }

/* "Vedi tutta la vetrina" (in the page, hidden on computers until now) and "Vedi tutti gli ultimi arrivi" */
.ioc-home p.ioc-home-all,
.ioc-home p.ioc-home-all.ioc-home-all--phone { display: block; margin: 4px 0 8px; text-align: center; }
.ioc-home a.ioc-home-all-btn {
	display: inline-block; box-sizing: border-box; min-height: 52px; margin: 0; padding: 13px 28px;
	border: 2px solid #0b3c6b; border-radius: 8px; background: #fff;
	font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 22px; font-weight: 500;
	text-transform: none; color: #0b3c6b; text-decoration: none;
}
.ioc-home a.ioc-home-all-btn i { margin: 0 0 0 10px; font-size: 20px; vertical-align: -2px; }
.ioc-home a.ioc-home-all-btn:hover,
.ioc-home a.ioc-home-all-btn:focus { background: #0b3c6b; color: #fff; text-decoration: none; }
.ioc-home a.ioc-home-all-btn:focus { outline: 3px solid #0b3c6b; outline-offset: 2px; }

/* ==== 5. "Chi e' IoCollezionista.com": the whole text, as today, with Luciano in the shop beside it
   (decorative photo, fixed box: nothing moves when it arrives) */
.ioc-home .ioc-home-about {
	position: relative; box-sizing: border-box; min-height: 270px; margin: 40px 0 0; padding: 0 420px 0 0;
}
.ioc-home .ioc-home-about h1,
.ioc-home .ioc-home-about p { max-width: 940px; }
.ioc-home .ioc-home-about::before {
	content: ""; position: absolute; top: 6px; right: 0; width: 380px; height: 214px; border-radius: 6px;
	background: #e9eef3 url(/media/wysiwyg/chi-siamo/luciano-negozio-800.jpg) no-repeat 50% 50%; background-size: cover;
}
.ioc-home .ioc-home-about h1 {
	margin: 0 0 16px; padding: 0; border: 0;
	font-family: "Roboto Condensed", Roboto, Helvetica, Arial, sans-serif;
	font-size: 28px; line-height: 1.3; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: #003482;
}
.ioc-home .ioc-home-about p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: #1a1a1a; text-align: left; }
.ioc-home .ioc-home-about p a { color: #005b8f; text-decoration: underline; text-underline-offset: 2px; }
.ioc-home .ioc-home-about p a:hover { color: #003482; }
.ioc-home .ioc-home-about p a:focus { outline: 3px solid #0b3c6b; outline-offset: 2px; }
/* signature: the two closing lines together */
.ioc-home .ioc-home-about-more p:nth-last-child(2) { margin: 24px 0 0; }
.ioc-home .ioc-home-about-more p:last-child { margin: 0; }
.ioc-home .ioc-home-about .ioc-home-about-more,
html.ioc-home-js .ioc-home .ioc-home-about-more { display: block; }
.ioc-home button.ioc-home-readmore,
html.ioc-home-js .ioc-home button.ioc-home-readmore { display: none; }

/* ==== 6. Keyboard focus on the left list (the list stream's orange inset ring is replaced on the home) */
.ioc-home .category-block ul.featured-cats li a:focus { outline: 3px solid #0b3c6b; outline-offset: -3px; }

/* ==== 7. Trust strip above the footer (every page): v1's rules unchanged, so the other pages (and the "Ultimi
   prodotti" page) stay exactly as they are; text 17 px in its own column beside the icon. The CMS text itself is
   stored in capitals. */
.footer-container .row.iconefooter { padding-top: 20px; padding-bottom: 20px; }
.footer-container .row.iconefooter strong,
.footer-container .row.iconefooter a { font-size: 17px; line-height: 1.45; text-transform: none; color: #1a1a1a; }
.footer-container .row.iconefooter .columns > div {
	position: relative; min-height: 40px; padding-left: 76px;
	font-size: 17px; line-height: 1.45; text-transform: none; color: #1a1a1a;
}
.footer-container .row.iconefooter .columns > div > img { position: absolute; top: 2px; left: 0; float: none; margin: 0; }
.footer-container .row.iconefooter a:hover { color: #0b3c6b; text-decoration: underline; }

/* ==== 8. Footer (every page, from v1): help band across the top, 17 px text, 44 px links */
.footer-container .row.ioc-fphone.show-for-small-only { display: block !important; }
.footer-container .ioc-fphone .ioc-facc-group,
.footer-container .ioc-fphone .ioc-faddr { display: none !important; }
/* (0,2,1): ioc-footer.css still hides it on contact and cart */
footer .ioc-help.ioc-help--footer {
	display: grid; grid-template-columns: auto auto auto auto; justify-content: space-between;
	column-gap: 24px; row-gap: 4px; align-items: center;
	margin: 0; padding: 28px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); border-radius: 0;
	background: transparent; color: #fff;
}
footer .ioc-help--footer h2.ioc-help-title {
	grid-column: 1; grid-row: 1 / span 2; margin: 0; padding: 0; border: 0;
	font-family: Roboto, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25;
	color: #fff; text-transform: none;
}
footer .ioc-help--footer a.ioc-help-call {
	grid-column: 2; grid-row: 1; display: inline-flex; width: auto; min-width: 220px; min-height: 52px; padding: 10px 24px;
	border: 2px solid #fff; border-radius: 8px; background: #fff; color: #0b3c6b;
	font-size: 20px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
footer .ioc-help--footer a.ioc-help-call:hover,
footer .ioc-help--footer a.ioc-help-call:focus { background: #eef3f8; border-color: #eef3f8; color: #082d52; text-decoration: none; }
footer .ioc-help--footer a.ioc-help-call .ioc-help-ico { fill: currentColor; }
footer .ioc-help--footer p.ioc-help-reply { grid-column: 2; grid-row: 2; margin: 2px 0 0; padding: 0; font-size: 18px; line-height: 1.4; color: #d6e2ee; text-align: center; }
footer .ioc-help--footer p.ioc-help-phone { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 18px; line-height: 1.5; color: #d6e2ee; }
footer .ioc-help--footer p.ioc-help-phone a { display: inline-block; min-height: 44px; padding: 10px 0; color: #fff; font-size: 18px; font-weight: 700; line-height: 24px; text-decoration: none; }
footer .ioc-help--footer a.ioc-help-mail {
	grid-column: 4; grid-row: 1 / span 2; display: inline-flex; min-height: 48px; margin: 0; padding: 0;
	color: #fff; font-size: 18px; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px;
}
footer .ioc-help--footer a.ioc-help-mail:hover,
footer .ioc-help--footer a.ioc-help-mail:focus { color: #fff; text-decoration: none; }
footer .ioc-help--footer a.ioc-help-mail .ioc-help-ico { fill: currentColor; }

/* the four CMS columns, payments / shipping / social, copyright */
footer .contatti h3,
footer .contatti h4 {
	margin: 28px 0 8px; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .3);
	font-family: Roboto, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3;
	color: #fff; text-transform: none; letter-spacing: 0;
}
footer .contatti p,
footer .contatti li,
footer .contatti span.testo-spedizioni { font-size: 17px; line-height: 1.5; color: #d6e2ee; }
footer .contatti ul { margin: 0; padding: 0; }
footer .contatti li { margin: 0; padding: 0; list-style: none; }
footer .contatti li a,
footer .contatti .ioc-fdesk p a,
footer .contatti p.copy a,
footer .contatti .ioc-fsocial-text {
	display: inline-block; min-height: 44px; padding: 10px 0;
	font-size: 17px; line-height: 24px; color: #fff; text-decoration: none;
}
footer .contatti li a:hover,
footer .contatti .ioc-fdesk p a:hover,
footer .contatti p.copy a:hover,
footer .contatti .ioc-fsocial-text:hover { color: #fff; text-decoration: underline; }
footer .contatti .ioc-fdesk p a { text-decoration: underline; text-underline-offset: 3px; }
footer .contatti .ioc-fpay h3,
footer .contatti .ioc-fpay + .columns h3,
footer .contatti .ioc-fpay + .columns + .columns h3 { font-size: 18px; }
footer .contatti p.copy { margin: 16px 0 8px; font-size: 16px; line-height: 1.5; color: #d6e2ee; }
footer .contatti p.copy a { font-size: 16px; }
footer .contatti .social-icons a { display: inline-block; min-height: 48px; }
/* newsletter form (cart, contact): 17 px label, 44 px link, 48 px button */
footer #mc_embed_signup label { padding-left: 8px; font-size: 17px; line-height: 1.5; color: #fff; }
footer #mc_embed_signup label a[href] { padding: 13px 0; font-size: inherit; }
footer #mc_embed_signup input[type="submit"] {
	min-height: 48px; margin: 12px 0 0; padding: 0 28px; border: 2px solid #fff; border-radius: 8px;
	background: #fff; color: #0b3c6b; font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: none;
}
footer #mc_embed_signup input[type="submit"]:hover,
footer #mc_embed_signup input[type="submit"]:focus { background: #eef3f8; color: #082d52; }

/* ==== 9. Focus on the navy footer: yellow ring */
footer a:focus,
footer button:focus,
footer input:focus,
footer summary:focus,
footer .ioc-help--footer a.ioc-help-call:focus,
footer .ioc-help--footer a.ioc-help-mail:focus { outline: 3px solid #ffc400; outline-offset: 2px; }
footer .ioc-nl-foot a.ioc-nl-fbtn:focus { outline-color: #ffc400; }
}

/* ==== 10. M, 1025-1279 px: the list column is narrow, so the vetrina goes 3 per row (15 cards, no orphan);
   less padding in the list (names stay on one line), smaller tile names and buttons, a smaller photo beside "Chi e'", help band in three columns */
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (max-width: 79.9375em) {
.ioc-home .ioc-home-products--vetrina ul.ioc-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ioc-home .ioc-home-products--vetrina ul.ioc-home-grid > li.ioc-home-item:nth-child(16) { display: none; }
.ioc-home .category-block { padding: 12px 8px 4px; }
.ioc-home .category-block ul.featured-cats > li.cat > a { padding-left: 6px; }
.ioc-home .category-block ul.featured-cats > li.cat > i { width: 16px; margin: 0 2px 0 4px; }
.ioc-home ul.elenco-categorie span.categoria { font-size: 18px; }
.ioc-home ul.elenco-categorie .wrapper-categoria a.button { padding: 11px 14px; font-size: 16px; }
.ioc-home .ioc-home-about { padding-right: 340px; }
.ioc-home .ioc-home-about::before { width: 300px; height: 169px; }
footer .ioc-help.ioc-help--footer { grid-template-columns: auto auto auto; justify-content: start; column-gap: 40px; }
footer .ioc-help--footer h2.ioc-help-title { grid-column: 1 / -1; grid-row: 1; margin: 0 0 12px; }
footer .ioc-help--footer a.ioc-help-call { grid-column: 1; grid-row: 2; }
footer .ioc-help--footer p.ioc-help-reply { grid-column: 1; grid-row: 3; }
footer .ioc-help--footer p.ioc-help-phone { grid-column: 2; grid-row: 2 / span 2; }
footer .ioc-help--footer a.ioc-help-mail { grid-column: 3; grid-row: 2 / span 2; }
}

/* ==== 11. L/XL, 1536 px and wider: a larger photo beside "Chi e'", still on the grid's right edge */
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (min-width: 96em) {
.ioc-home .ioc-home-about { min-height: 290px; padding-right: 520px; }
.ioc-home .ioc-home-about::before { width: 480px; height: 270px; }
}

/* "Sconto 10%" corner button: hidden below 1960 px (it covered content); wider, it sits in the margin.
   Undo: delete this block (the newsletter link stays in the notice bar and the footer). */
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (max-width: 122.4375em) {
a.ioc-nl-pill { display: none !important; }
}

/* ==== 12. "Chi e'" with the shop video (2026-11-03, js/ioc-desktop-home: figure.ioc-home-video replaces the ::before photo).
   Same box and place as the photo: 380 x 214 (300 x 169 below 1280, 480 x 270 from 1536); a play button in the middle of the
   cover, the "Guarda il video" line and the caption under it. */
.ioc-home .ioc-home-about.ioc-home-about--video::before { display: none; }
.ioc-home .ioc-home-about.ioc-home-about--video { min-height: 330px; }
.ioc-home figure.ioc-home-video { position: absolute; top: 6px; right: 0; width: 380px; margin: 0; padding: 0; }
.ioc-home .ioc-home-video-play {
	display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.ioc-home .ioc-home-video-poster,
.ioc-home figure.ioc-home-video video {
	position: relative; display: block; box-sizing: border-box; width: 100%; height: 214px; border-radius: 6px; overflow: hidden; background: #0e1a26;
}
.ioc-home .ioc-home-video-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ioc-home .ioc-home-video-icon {
	position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
	background: #b85c00; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}
.ioc-home .ioc-home-video-icon::before {
	content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent #fff;
}
.ioc-home .ioc-home-video-play:hover .ioc-home-video-icon { background: #9a4d00; }
.ioc-home .ioc-home-video-label { display: block; margin: 10px 0 0; font: 600 18px/1.35 "Roboto", Helvetica, Arial, sans-serif; color: #0b3c6b; }
.ioc-home .ioc-home-video-play:hover .ioc-home-video-label { text-decoration: underline; }
.ioc-home .ioc-home-video-play:focus { outline: 3px solid #0b3c6b; outline-offset: 3px; }
.ioc-home figure.ioc-home-video video { background: #000; }
.ioc-home figure.ioc-home-video figcaption { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: #4a5563; }
.ioc-home figure.ioc-home-video figcaption a { color: #005b8f; font-weight: 600; white-space: nowrap; }
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (max-width: 79.9375em) {
	.ioc-home figure.ioc-home-video { width: 300px; }
	.ioc-home .ioc-home-video-poster, .ioc-home figure.ioc-home-video video { height: 169px; }
	.ioc-home .ioc-home-video-label { font-size: 16px; }
}
@media only screen and (min-width: 64.0625em) and (hover: hover) and (pointer: fine) and (min-width: 96em) {
	.ioc-home figure.ioc-home-video { width: 480px; }
	.ioc-home .ioc-home-video-poster, .ioc-home figure.ioc-home-video video { height: 270px; }
	.ioc-home .ioc-home-about.ioc-home-about--video { min-height: 390px; }
}