/* IB Navigation — desktop bar + panels, phone burger + drawer.
   Colours and type come from the site's own tokens (Core Framework); every var has a fallback. */

/* How much of the bottom edge the bar at the thumb occupies, published for
   anything else that pins itself down there — today the «Parla con noi»
   contact panel of ib-phone-agent, which was sitting on top of the four tabs
   (Matteo, 2026-09-21). Zero everywhere the bar is not drawn, so a consumer
   can write `calc(… + var(--ibnav-tabs-h, 0px))` once and be right on every
   screen. The safe area is NOT included: the bar adds it to its own padding,
   and a consumer that needs it adds `env(safe-area-inset-bottom)` itself. */
:root {
	--ibnav-tabs-h: 0px;
}

.ibnav,
.ibnav-bar,
.ibnav-item {
	position: static;
}

/* The panel spans the whole header row: the row is the positioned ancestor.
   Layered so any Oxygen position rule on the row (sticky, fixed) always wins — those are containing blocks too. */
@layer ibnav {
	.oxy-header-row:has(.ibnav) {
		position: relative;
	}
}

.ibnav-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ibnav-item {
	margin: 0;
	padding: 0;
}

.ibnav-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--text-title, #1f1f1f);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ibnav-top:hover,
.ibnav-top:focus-visible,
.ibnav-item.is-open > .ibnav-top {
	color: var(--primary, #b80000);
	background: var(--primary-5, rgba(184, 0, 0, 0.05));
	outline: none;
}

.ibnav-top:focus-visible {
	box-shadow: 0 0 0 2px var(--primary, #b80000);
}

.ibnav-chevron {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.ibnav-item.is-open > .ibnav-top .ibnav-chevron,
.ibnav-acc[open] > .ibnav-acc-head .ibnav-chevron {
	transform: rotate(180deg);
}

/* ── Panels ───────────────────────────────────────────── */

.ibnav-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--bg-surface, #fff);
	border-top: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	box-shadow: 0 24px 32px -20px var(--shadow-primary, rgba(0, 0, 0, 0.15));
}

.ibnav-panel[hidden] {
	display: none;
}

.ibnav-panel-inner {
	display: flex;
	gap: 36px;
	align-items: flex-start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 48px 34px;
}

.ibnav-col {
	flex: 1 1 0;
	min-width: 0;
}

.ibnav-col--intro {
	flex: 1.1 1 0;
	padding-right: 16px;
	border-right: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
}

.ibnav-intro-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--text-title, #1f1f1f);
	text-wrap: balance;
}

.ibnav-intro-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body, #404040);
}

.ibnav-col--photos {
	flex: var(--ibnav-span, 1) 1 0;
}

.ibnav-col--photos-small {
	flex: 1.2 1 0;
}

.ibnav-cards {
	display: grid;
	grid-template-columns: repeat(var(--ibnav-span, 1), minmax(0, 1fr));
	gap: 24px;
}

.ibnav-col--photos-small .ibnav-cards {
	grid-template-columns: 1fr;
	gap: 14px;
}

.ibnav-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ibnav-card-ph {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--bg-body, #f7f7f7);
	border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
}

.ibnav-card-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* the whole product, never cut — every frame in the menu is square */
	transition: transform 0.3s ease;
}

.ibnav-card:hover .ibnav-card-ph img {
	transform: scale(1.04);
}

.ibnav-card-name {
	display: block;
	margin: 10px 0 2px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-title, #1f1f1f);
}

.ibnav-card:hover .ibnav-card-name {
	color: var(--primary, #b80000);
}

.ibnav-card-sub {
	display: block;
	font-size: 12.5px;
	color: var(--text-body, #404040);
	opacity: 0.85;
}

.ibnav-col--photos-small .ibnav-card {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
}

.ibnav-col--photos-small .ibnav-card-ph {
	grid-row: 1 / span 2;
}

.ibnav-col--photos-small .ibnav-card-name,
.ibnav-col--photos-small .ibnav-card-sub {
	grid-column: 2;
	align-self: end;
}

.ibnav-col--photos-small .ibnav-card-sub {
	align-self: start;
}

.ibnav-col--photos-small .ibnav-card-ph {
	aspect-ratio: 1 / 1;
	border-radius: 4px;
}

.ibnav-col--photos-small .ibnav-card-name {
	margin: 0;
}

.ibnav-kicker {
	display: block;
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary, #b80000);
	text-decoration: none;
}

a.ibnav-kicker:hover {
	text-decoration: underline;
}

.ibnav-links {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ibnav-links li {
	margin: 0;
	padding: 0;
}

.ibnav-link {
	display: block;
	font-size: 15px;
	line-height: 1.3;
	color: var(--text-title, #1f1f1f);
	text-decoration: none;
}

.ibnav-link:hover {
	color: var(--primary, #b80000);
}

.ibnav-link-sub {
	display: block;
	margin-top: 1px;
	font-size: 12.5px;
	color: var(--text-body, #404040);
	opacity: 0.85;
}

.ibnav-link--all {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--primary, #b80000);
}

.ibnav-arrow {
	white-space: nowrap;
}

span.ibnav-link {
	color: var(--text-body, #404040);
}

/* ── The phone chrome: claim line, folding logo row, bar at the thumb ── */

/* Everything below is phone-only; the desktop header is untouched. */
.ibnav-claim,
.ibnav-tabs {
	display: none;
}

.ibnav-claim {
	--ibnav-mark-w: 26.5px;
	--ibnav-mark-gap: 12px;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: var(--ibnav-mark-gap);
	padding: 5px 14px;
	background: var(--bg-surface, #fff);
	border-bottom: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--text-body, #404040);
	text-align: center;
}

.ibnav-claim-text {
	font-family: 'ABeeZee', var(--font-body, inherit);
}

/* Folded, the brand's ribbon appears at the left of the claim and the two are centred TOGETHER,
   as one block — Matteo, 2026-09-08: «quello che dovevi fare era centrare il blocco logo+slogan».
   So the words sit right of the screen centre by half the ribbon, on purpose. */
.ibnav-claim-home {
	display: none;
	line-height: 0;
	flex: 0 0 auto;
}

.ibnav-claim-mark {
	display: block;
	width: var(--ibnav-mark-w);
	height: auto;
}

/* ── The same ribbon, on a computer, inside the delivery bar's own slogan ──
   Matteo, 2026-09-10 (session «Deliver to», thread 1): «prendendo spunto
   dall'header mobile, vorrei che su desktop la prima riga rimanga sticky e che
   quando sparisce la seconda riga del logo compaia l'icona di italiana
   bandiere prima dello slogan».

   The node is CLONED from the phone claim's own mark by `navigation.js`, never
   written again: the shop's ribbon already exists twice (here and in
   ib-delivery-promise's checkout claim, that repo's technical TODO #64), and a
   third hand-written copy would be one more place to forget the day the brand
   mark changes.

   Its own width, because `--ibnav-mark-w` is declared on `.ibnav-claim` and
   this copy lives in somebody else's element: without it the variable would
   not resolve and the ribbon would paint at its full 167 px. */
.ibnav-bar-home {
	display: none;
	line-height: 0;
	flex: 0 0 auto;
	margin-right: 8px;
	vertical-align: middle;
}

.ibnav-bar-home .ibnav-claim-mark {
	width: 24px;
	height: auto;
}

/* Folded: the logo row closes, the strip and this line stay, the mark stands in for the logo.
   `!important` on purpose: the row's height comes from an Oxygen rule written with an id
   selector, which no class of ours can outweigh. */
html.ibnav-folded .ibnav-logorow {
	height: 0 !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	opacity: 0;
	overflow: hidden;
	transition: height 0.18s ease, opacity 0.14s ease;
}

html.ibnav-folded .ibnav-claim {
	padding-top: 8px;
	padding-bottom: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

html.ibnav-folded .ibnav-claim-home {
	display: block;
}

/* ── A switch for testing on a real phone: ?ibnav-test=nosticky or ?ibnav-test=plain ──
   Nothing here is on by default; the address alone turns it on, for one page view. */
html.ibnav-test-nosticky .ibnav-header,
html.ibnav-test-plain .ibnav-header {
	position: static !important;
}

html.ibnav-test-plain .ibnav-tabs,
html.ibnav-test-plain .ibnav-claim {
	display: none !important;
}

html.ibnav-test-plain .ibnav-header .oxy-header-search_toggle-open,
html.ibnav-test-plain .ibnav-cart {
	position: static !important;
	display: flex !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	clip-path: none !important;
	pointer-events: auto !important;
	opacity: 1 !important;
}

html.ibnav-test-plain body {
	padding-bottom: 0 !important;
}

/* The bar at the thumb. */
.ibnav-tabs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: var(--bg-surface, #fff);
	border-top: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}

.ibnav-tab {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 10.5px;
	line-height: 1.2;
	color: var(--text-body, #404040);
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
	justify-content: center;
}

.ibnav-tab svg {
	width: 23px;
	height: 23px;
}

.ibnav-tab.is-on {
	color: var(--primary, #b80000);
	font-weight: 600;
}

.ibnav-tab:focus-visible {
	outline: 2px solid var(--primary, #b80000);
	outline-offset: -3px;
	border-radius: 6px;
}

.ibnav-tab-badge {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(4px);
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--primary, #b80000);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

/* An extra tab from `ib_navigation_thumb_tabs` (Renderer::thumb_tabs()), «in evidenza,
   verde» (Matteo, 2026-09-21): the label and the icon pick up the shop's green through
   `currentColor` — every tab icon, ours and a consumer's, strokes/fills with it — while
   the tab itself stays the same size and shape as its four grey siblings. The whole tab
   is deliberately NOT painted green: among four plain tabs that would fight the bar
   rather than stand out from it. */
.ibnav-tab--accent {
	color: var(--text-accent, hsl(121, 30%, 30%));
}

/* The LED «connesso»: a small dot at the icon's top-right corner, pulsing to read as
   live rather than as a plain notification badge (which `.ibnav-tab-badge` already is). */
.ibnav-tab-led {
	position: absolute;
	top: -1px;
	left: calc(50% + 7px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: hsl(121, 45%, 42%);
	animation: ibnav-tab-led-pulse 2s ease-in-out infinite;
}

@keyframes ibnav-tab-led-pulse {
	0% {
		box-shadow: 0 0 0 0 hsla(121, 45%, 42%, 0.55);
	}
	70% {
		box-shadow: 0 0 0 6px hsla(121, 45%, 42%, 0);
	}
	100% {
		box-shadow: 0 0 0 0 hsla(121, 45%, 42%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ibnav-tab-led {
		animation: none;
		box-shadow: 0 0 0 3px hsla(121, 45%, 42%, 0.25);
	}
}

/* ── Account block (top of the drawer) ────────────────── */

.ibnav-acct {
	display: block;
	padding: 14px 18px 16px;
	border-top: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	background: var(--bg-body, #f7f7f7);
	text-decoration: none;
	color: var(--text-title, #1f1f1f);
}

/* Signed out: the door and the always-visible row (.ibnav-acct-links) sit in this same
   wrapper, so the reader script can swap both together for a signed-in reader — one
   element, no duplicate row (0.24.0). */
.ibnav-acct--out {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ibnav-acct-door {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.ibnav-acct-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	background: var(--bg-surface, #fff);
	border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
}

.ibnav-acct-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.ibnav-acct-title {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 500;
}

.ibnav-acct--out .ibnav-arrow {
	flex: 0 0 auto;
	color: var(--primary, #b80000);
	font-size: 22px;
	line-height: 1;
}

.ibnav-acct-hello {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

.ibnav-acct-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.ibnav-acct-links a {
	font-size: 15px;
	color: var(--primary, #b80000);
	text-decoration: none;
}

/* ── The account dropdown of the computer header ──────────
   That header is not ours: it is built in the Oxygen template «Header and
   footer», and until 2026-09-09 it printed «Hello <first name>» straight into
   the page, from Oxygen's own dynamic data. A page that carries a name cannot
   be shared by a cache, and sharing catalogue pages with signed-in readers is
   what takes a page from 0,65 s to 0,14 s.

   So the template now renders the same two blocks for everybody and marks
   them: the greeting block waits, hidden, and the sign-in block is on show.
   The script, once the greeting route has said who is reading, takes the
   waiting mark off the first and puts the hidden mark on the second. The name
   itself lands in `.ibnav-reader-name`. Nothing here decides anything: a
   visitor who is not signed in never asks, and keeps exactly the page the
   cache gave him.

   `!important` because Oxygen styles those blocks from an id selector, which
   beats any class; taking the mark off leaves Oxygen's own rules untouched. */

.ibnav-when-signed-in {
	display: none !important;
}

.ibnav-hidden {
	display: none !important;
}

/* ── Our own search: a page of its own ────────────────── */

.ibnav-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* White, edge to edge, over everything — the bar at the thumb included. Nothing of the page
   stays visible: that is the whole point of it (IKEA, Zalando, Amazon all do exactly this).
   Measured on the four shops on 2026-09-08. */
.ibnav-search {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	flex-direction: column;
	background: var(--bg-surface, #fff);
	color: var(--text-title, #1f1f1f);
}

.ibnav-search[hidden] {
	display: none;
}

.ibnav-search-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px) * 0);
	padding-top: calc(8px + env(safe-area-inset-top, 0px));
	border-bottom: 1px solid var(--border-primary, rgba(128, 128, 128, 0.18));
}

.ibnav-search-field {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 0 6px 0 14px;
	height: 46px;
	border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	border-radius: 999px;
	background: var(--bg-body, #f7f7f7);
}

.ibnav-search-field > svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	stroke: var(--text-body, #6b6b6b);
	fill: none;
	stroke-width: 1.9;
}

.ibnav-search-field input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px; /* 16 px or the phone zooms the page when the field takes focus */
	color: var(--text-title, #1f1f1f);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ibnav-search-field input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Nothing changes when the cursor arrives: the pill IS the field, and a second edge or a shadow
   inside it only dirties it (Matteo, 2026-09-08: «essendo dentro la pill con i bordi arrotondati
   non serve e rovina la pulizia»). `!important` because the shop dresses every focused input. */
.ibnav-search-field input,
.ibnav-search-field input:focus,
.ibnav-search-field input:focus-visible {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: none !important;
}

.ibnav-search-close,
.ibnav-search-wipe {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--text-title, #1f1f1f);
	cursor: pointer;
}

.ibnav-search-wipe {
	width: 34px;
	height: 34px;
	color: var(--text-body, #6b6b6b);
}

/* `display: grid` above beats the browser's own rule for a hidden element: without this the
   cross showed on an empty field. */
.ibnav-search-wipe[hidden] {
	display: none;
}

.ibnav-search-close svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* A phone goes «back», a computer «closes»: the button carries both drawings and shows one. */
.ibnav-search-close svg:last-child {
	display: none;
}

.ibnav-search-wipe svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

.ibnav-search-close:focus-visible,
.ibnav-search-wipe:focus-visible,
.ibnav-search-forget:focus-visible {
	outline: 2px solid var(--text-title, #1f1f1f);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Everything the shop can offer lives here: the last searches of this phone, the words people
   search most, and the products themselves as soon as two letters are in. */
.ibnav-search-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 24px;
}

.ibnav-search-block[hidden] {
	display: none;
}

.ibnav-search-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 6px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-body, #6b6b6b);
}

.ibnav-search-forget {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary, #b80000);
	cursor: pointer;
}

.ibnav-search-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 7px 16px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	text-align: left;
	color: var(--text-title, #1f1f1f);
	text-decoration: none;
	cursor: pointer;
}

.ibnav-search-row:active {
	background: var(--bg-body, #f7f7f7);
}

.ibnav-search-row svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	stroke: var(--text-body, #8a8a8a);
	fill: none;
	stroke-width: 1.9;
}

.ibnav-search-row img {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: 3px;
	background: var(--bg-body, #f2f2f2);
}

.ibnav-search-row span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ibnav-search-none {
	margin: 0;
	padding: 26px 16px;
	color: var(--text-body, #6b6b6b);
	font-size: 15px;
}

.ibnav-search-none[hidden] {
	display: none;
}

/* ── Drawer (phone) ───────────────────────────────────── */

.ibnav-drawer {
	position: fixed;
	inset: 0 0 calc(62px + env(safe-area-inset-bottom, 0px)) 0;
	z-index: 100000; /* moved to <body> by the script: outside the header's own stacking context (z-index 100) */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--bg-surface, #fff);
	color: var(--text-title, #1f1f1f);
}

.ibnav-drawer[hidden] {
	display: none;
}

html.ibnav-drawer-open,
body.ibnav-drawer-open {
	overflow: hidden;
}

.ibnav-drawer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 12px;
}

.ibnav-drawer-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-title, #1f1f1f);
}

.ibnav-close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ibnav-close svg {
	width: 16px;
	height: 16px;
}

.ibnav-acc {
	border-top: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
}

.ibnav-acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	font-size: 17px;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

.ibnav-acc-head::-webkit-details-marker {
	display: none;
}

.ibnav-acc[open] > .ibnav-acc-head {
	color: var(--primary, #b80000);
}

.ibnav-acc-head .ibnav-chevron {
	width: 14px;
	height: 14px;
}

.ibnav-acc-body {
	padding: 0 18px 16px;
}

.ibnav-acc-body .ibnav-kicker {
	margin: 14px 0 6px;
}

.ibnav-acc-body .ibnav-kicker:first-child {
	margin-top: 0;
}

.ibnav-acc-body .ibnav-link {
	padding: 9px 0;
	border-bottom: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
}

.ibnav-acc-body .ibnav-link:last-child,
.ibnav-acc-all {
	border-bottom: 0;
}

.ibnav-acc-all {
	padding-top: 12px;
}

.ibnav-thumbs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 4px 0 10px;
}

.ibnav-thumb {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ibnav-thumb-ph {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	background: var(--bg-body, #f7f7f7);
}

.ibnav-thumb-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ibnav-thumb-name {
	display: block;
	padding: 6px 0 2px;
	font-size: 13.5px;
	font-weight: 500;
}

.ibnav-row {
	display: block;
	padding: 16px 18px;
	border-top: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
	font-size: 17px;
	font-weight: 500;
	color: var(--text-title, #1f1f1f);
	text-decoration: none;
}

/* «Help & contact» — replaces the old .ibnav-drawer-foot line (footer job, 2026-09-22). */
.ibnav-drawer-svc {
	margin-top: 8px;
	padding: 18px;
	border-top: 1px solid var(--border-primary, rgba(128, 128, 128, 0.25));
}

.ibnav-drawer-svc-kicker {
	margin: 0 0 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted, #7a7a7a);
}

.ibnav-drawer-svc-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--text-body, #404040);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.ibnav-drawer-svc-phone {
	font-size: 12px;
	color: var(--text-muted, #7a7a7a);
}

.ibnav-drawer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 14px 18px 22px;
	font-size: 12px;
}

.ibnav-drawer-legal a {
	color: var(--text-muted, #7a7a7a);
	text-decoration: none;
}

/* ── Breakpoint: Oxygen's tablet (≤ 991 px) hides the bar, shows the burger ── */

@media (max-width: 991px) {
	.ibnav-bar {
		display: none;
	}

	.ibnav-claim {
		display: flex;
	}

	.ibnav-tabs {
		display: flex;
	}

	/* The header carries no controls on a phone: search, basket and the account menu
	   are all one thumb tap away in the bar. */
	.ibnav-cart {
		display: none !important;
	}

	/* The search button is taken out of sight but LEFT RENDERED: the shop's own script
	   refuses to open the overlay for a button that is not laid out, and the «Search» tab
	   works by clicking exactly that button. */
	.ibnav-header .oxy-header-search_toggle-open {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip-path: inset(50%);
		pointer-events: none;
		opacity: 0;
	}

	/* The logo sits alone, in the middle of its row. Centring the row itself does nothing — the row
	   is not the flexible box, the container inside it is, and it holds three columns of which two
	   are empty on a phone. So the logo is pinned to the middle and the columns are left alone
	   (they still carry the shop's search, which must stay in the page). */
	.ibnav-logorow .oxy-header-container {
		position: relative;
	}

	.ibnav-logorow .wrapper-logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* The delivery line used to be centred here, with its arrow pinned to the right edge by an
	   absolute position (2026-09-08, area decision (73), when the three phone rows were each
	   centred on the screen). SUPERSEDED on 2026-09-10: the strip is now a bordered control that
	   fills the row (ib-delivery-promise, mockup «C — Control», approved by Matteo), so it is
	   already centred by being as wide as the screen, its sentence reads from the left like every
	   other control, and its chevron sits behind its own divider at the right. Both rules are
	   removed rather than adjusted — the absolute one also silently cancelled the chevron's own
	   half-turn when the panel opened, since one element cannot hold two transforms. The other
	   two rows of the phone header keep their centring, untouched.
	   ------------------------------------------------------------------------------------ */

	/* The header keeps the strip and the claim on screen while the page moves.
	   The wrapper around it is raised too: the header's own z-index only competes inside
	   its parent's layer, and page content was painting over the delivery strip. */
	.oxy-header-wrapper:has(.ibnav-header),
	.ibnav-header-wrapper {
		position: relative;
		z-index: 9000;
	}

	.ibnav-header {
		position: sticky;
		top: 0;
		z-index: 9000;
		background: var(--bg-surface, #fff);
	}

	/* While a full-screen sheet is open — the delivery panel, the search — the header stops being
	   sticky. On iPhones a sheet that is fixed INSIDE a sticky box is drawn in one place and
	   touched in another: taps land outside it, so the delivery panel closed on every tap and the
	   search cross did nothing. Nothing is lost: the sheet covers the page anyway. */
	html.ibnav-overlay-open .ibnav-header {
		position: static;
	}

	/* Nothing of the page hides under the bar. */
	:root {
		--ibnav-tabs-h: 62px;
	}

	body {
		padding-bottom: calc(var(--ibnav-tabs-h) + env(safe-area-inset-bottom, 0px));
	}

	/* The «Contattaci» bubble sat exactly on top of the basket tab: lift it above the bar. */
	#arcontactus {
		transform: translateY(-64px);
	}

	/* Lifted, it landed on the search field instead. While a sheet is open the bubble goes away:
	   the sheet is what the customer is using, and the bubble comes back when it closes. */
	html.ibnav-drawer-open #arcontactus {
		display: none !important;
	}
}

.ibnav-bar-search {
	display: none;
}

@media (min-width: 992px) {
	.ibnav-drawer {
		display: none !important;
	}

	/* ── The computer keeps the delivery strip on screen, and folds the rest ──
	   Matteo, 2026-09-10, «prendendo spunto dall'header mobile»: the same three rules the phone
	   has had since 2026-09-08, now at every width. The header sticks; past 48 px of scroll the
	   row carrying the logo closes (`html.ibnav-folded .ibnav-logorow`, which has always been
	   width-independent — it simply had nothing to show for it here, because the whole header
	   scrolled away); and the brand ribbon appears at the left of the slogan as the way home.

	   WHAT LEAVES THE SCREEN WITH THAT ROW, and Matteo decided it does: on a computer that row
	   is not only the logo — it also carries the menu, the search, the account and the basket.
	   The phone loses nothing when it folds because the bar at the thumb holds all four; here
	   they are gone until the reader scrolls back up. He was told, and answered «sparisce tutta
	   la riga».

	   The wrapper is raised for the same reason as on the phone: the header's own z-index only
	   competes inside its parent's layer, and page content would paint over the strip. */
	.oxy-header-wrapper:has(.ibnav-header),
	.ibnav-header-wrapper {
		position: relative;
		z-index: 9000;
	}

	.ibnav-header {
		position: sticky;
		/* Under the WordPress admin bar, which is fixed at this width and would
		 * otherwise cover the top 32 px of the pinned strip for everyone signed
		 * in. The phone block needs no such thing: below 782 px WordPress makes
		 * that bar scroll away with the page. */
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 9000;
		background: var(--bg-surface, #fff);
	}

	html.ibnav-folded .ibnav-bar-home {
		display: inline-flex;
	}

	/* The magnifier of the bar, where the shop's own one used to be. */
	.ibnav-bar-search {
		display: flex;
		align-items: center;
	}

	.ibnav-bar-search-button {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var(--text-title, #1f1f1f);
		cursor: pointer;
	}

	.ibnav-bar-search-button svg {
		width: 21px;
		height: 21px;
	}

	.ibnav-bar-search-button:hover {
		background: var(--bg-body, #f4f4f4);
	}

	.ibnav-bar-search-button:focus-visible {
		outline: 2px solid var(--text-title, #1f1f1f);
		outline-offset: 2px;
	}

	/* ── The search on a computer: a panel under the header, not a whole screen ──
	   Matteo, 2026-09-09: «pannello con i suggerimenti sotto l'intestazione». The page stays
	   visible and quiet behind it; the panel is as wide as the shop's own content. */
	.ibnav-search {
		background: rgba(0, 0, 0, 0.42);
		display: block;
	}

	.ibnav-search-bar,
	.ibnav-search-body {
		max-width: 760px;
		margin: 0 auto;
		background: var(--bg-surface, #fff);
	}

	.ibnav-search {
		padding-top: var(--ibnav-search-top, 14px);
	}

	.ibnav-search-bar {
		margin-top: 8px;
		padding: 14px 16px;
		border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.2));
		border-bottom: 0;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.5);
	}

	.ibnav-search-body {
		max-height: min(60vh, 560px);
		border: 1px solid var(--border-primary, rgba(128, 128, 128, 0.2));
		border-top: 0;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.5);
	}

	.ibnav-search-close svg:first-child {
		display: none;
	}

	.ibnav-search-close svg:last-child {
		display: block;
	}

	.ibnav-search-row:hover {
		background: var(--bg-body, #f7f7f7);
	}
}

@media (max-width: 1400px) {
	.ibnav-top {
		padding: 10px 10px;
		font-size: 14.5px;
	}

	.ibnav-panel-inner {
		gap: 28px;
		padding: 24px 32px 30px;
	}
}

/* ── Small laptops: the entries give way so the icons stay on screen ──
   Measured on the Italian shop, 2026-09-20. At 1024 px the row is the logo
   (150 px), the five entries (854 px) and the magnifier, account and basket
   (80 px): 1 084 px of content plus the row's own padding, in 1 024 px of
   screen. The three icons began where the screen ended and the page scrolled
   sideways by 82 px. It held from 992 px — where the phone drawer gives way to
   this bar — up to 1 199 px; at 1 200 px everything fits on its own.

   What gives is the menu, because the icons cannot: the basket and the account
   are how a customer buys and signs in, and a magnifier that is half off the
   screen is worse than a smaller word. Two steps rather than one, so the text
   is only as small as that width really needs.

   Proven at 992, 1 024 and 1 120 px before it was written: the row ends inside
   the screen and the page no longer scrolls sideways. Italian is the worst
   case of the six — «Bandiere personalizzate» is the longest entry the shop
   has; French and Spanish sit just under it. */
@media (min-width: 1100px) and (max-width: 1199.98px) {
	.ibnav-bar {
		gap: 2px;
	}

	.ibnav-top {
		padding: 10px 6px;
		font-size: 13.5px;
	}
}

@media (min-width: 992px) and (max-width: 1099.98px) {
	.ibnav-bar {
		gap: 2px;
	}

	.ibnav-top {
		padding: 10px 4px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ibnav-top,
	.ibnav-chevron,
	.ibnav-card-ph img {
		transition: none;
	}
}

/* ============================================================
   footer — trust strip, link columns, contact card, offers form,
   bottom bar. Grey ground #e6e6e6, IBM Plex Sans 300 body, ABeeZee
   titles, green #366336, pill buttons (approved copy 2026-09-22).
   Same phone breakpoint as the rest of this file: 991px.
   ============================================================ */

.ibnav-footer {
	--ibnav-footer-green: var(--ibnav-green, #366336);
	--ibnav-footer-ground: #e6e6e6;
	background: var(--ibnav-footer-ground);
	color: #2b2b2b;
	font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
	font-weight: 300;
	padding: 40px 0 24px;
}

.ibnav-footer * {
	box-sizing: border-box;
}

.ibnav-footer h3,
.ibnav-footer-trust-title,
.ibnav-footer-offers-title {
	font-family: 'ABeeZee', var(--font-heading, inherit);
	font-weight: 400;
	margin: 0;
}

/* a) trust strip */

.ibnav-footer-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	max-width: none;
	margin: 0 0 32px;
}

.ibnav-footer-trust-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}

.ibnav-footer-trust-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ibnav-footer-trust-icon {
	color: var(--ibnav-footer-green);
	width: 30px;
	height: 30px;
	flex: none;
}

.ibnav-footer-trust-icon svg {
	width: 100%;
	height: 100%;
}

.ibnav-footer-trust-title {
	font-family: 'ABeeZee', var(--font-heading, inherit);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: #1f1f1f;
	margin: 0;
}

.ibnav-footer-trust-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
}

.ibnav-footer-more {
	color: var(--ibnav-footer-green);
	text-decoration: none;
	font-weight: 400;
	white-space: nowrap;
}

.ibnav-footer-more:hover {
	text-decoration: underline;
}

.ibnav-footer-help {
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
	margin-left: 2px;
}

.ibnav-nowrap {
	white-space: nowrap;
}

.ibnav-stars {
	color: var(--ibnav-footer-green);
	letter-spacing: 1px;
}

/* b) + c) columns + contact card */

.ibnav-footer-body {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1.55fr;
	gap: 56px;
	max-width: none;
	margin: 0 0 32px;
	align-items: start;
}

.ibnav-footer-cols {
	display: contents;
}

.ibnav-footer-acc {
	border: none;
}

.ibnav-footer-acc-head {
	font-family: 'ABeeZee', var(--font-heading, inherit);
	font-size: 16px;
	font-weight: 400;
	color: #1f1f1f;
	cursor: default;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ibnav-footer-acc-head::-webkit-details-marker {
	display: none;
}

.ibnav-footer-acc .ibnav-chevron {
	display: none;
}

.ibnav-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ibnav-footer-links a {
	color: #2b2b2b;
	text-decoration: none;
	font-size: 14px;
}

.ibnav-footer-links a:hover {
	text-decoration: underline;
}

.ibnav-footer-links a.ibnav-link--all {
	color: var(--ibnav-footer-green);
}

.ibnav-footer-contact {
	background: #fff;
	border-radius: 14px;
	padding: 24px;
}

.ibnav-footer-contact h3 {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 8px;
}

.ibnav-footer-contact > p {
	margin: 0 0 16px;
	font-size: 14px;
	color: #4a4a4a;
}

.ibnav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	padding: 12px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid var(--ibnav-footer-green);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ibnav-btn--solid {
	width: 100%;
	background: var(--ibnav-footer-green);
	color: #fff;
}

.ibnav-btn--solid svg {
	width: 18px;
	height: 18px;
}

.ibnav-btn--outline {
	background: transparent;
	color: var(--ibnav-footer-green);
}

.ibnav-btn--outline:hover,
.ibnav-btn--solid:hover {
	opacity: 0.85;
}

.ibnav-footer-contact-sub {
	text-align: center;
	font-size: 12px;
	color: #6b6b6b;
	margin: 8px 0 16px;
}

.ibnav-footer-contact-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ibnav-footer-contact-row .ibnav-btn {
	flex: 1 1 0;
	padding: 8px 12px;
	font-size: 14px;
	white-space: nowrap;
}

.ibnav-footer-phone {
	font-size: 13px;
	color: #4a4a4a;
	margin: 0;
}

.ibnav-footer-phone a {
	color: var(--ibnav-footer-green);
	text-decoration: none;
	white-space: nowrap;
}

.ibnav-footer-rule {
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 20px 0;
}

/* d) offers form */

.ibnav-footer-offers-title {
	font-size: 15px;
	margin-bottom: 4px;
}

.ibnav-footer-offers-text {
	font-size: 13px;
	color: #4a4a4a;
	margin: 0 0 12px;
}

.ibnav-footer-offers-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ibnav-footer-offers-form input[type='email'] {
	flex: 1 1 160px;
	min-width: 0;
	border: 1.5px solid #d5d5d5;
	border-radius: 999px;
	padding: 11px 16px;
	font-family: inherit;
	font-size: 14px;
}

.ibnav-footer-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ibnav-footer-offers-msg {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ibnav-footer-green);
}

.ibnav-footer-offers-msg[data-ibnav-offers-error] {
	color: #b3261e;
}

/* e) bottom bar */

.ibnav-footer-bottom {
	max-width: none;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid #d5d5d5;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 12px;
	color: #5a5a5a;
}

.ibnav-footer-bottom-pay {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ibnav-footer-bottom-label {
	font-weight: 400;
	margin-right: 4px;
}

/* `.ibnav-footer img.…`: WooCommerce's own `.woocommerce img, .woocommerce-page img { height: auto;
   max-width: 100% }` (specificity 0,1,1) beat the plain class on product pages and let the 256 px SVGs
   render full size (seen on the live Italy Flag page, 2026-09-22). */
.ibnav-footer img.ibnav-footer-logo {
	height: 28px;
	width: auto;
	max-width: 72px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	padding: 3px 5px;
	box-sizing: border-box;
}

.ibnav-footer img.ibnav-footer-logo[alt="UPS"],
.ibnav-footer img.ibnav-footer-logo[alt="BRT"],
.ibnav-footer img.ibnav-footer-logo[alt="GLS"] {
	background: transparent;
	border-color: transparent;
	padding: 0;
	height: 24px;
}

.ibnav-footer-badge {
	border: 1px solid #d9d9d9;
	background: #fff;
	border-radius: 4px;
	padding: 5px 8px;
	font-size: 11.5px;
	font-weight: 500;
	color: #1f1f1f;
	line-height: 1;
	white-space: nowrap;
}

.ibnav-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.ibnav-footer-legal a {
	color: #5a5a5a;
	text-decoration: none;
}

.ibnav-footer-legal a:hover {
	text-decoration: underline;
}

/* The EU legal-guarantee trigger — last item of the legal row (Italiana Bandiere area
   decision (578)): same colour/size/weight as its siblings (inherited), icon and label on
   one line with a small gap. */
.ibnav-footer-legal-guarantee {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ibnav-footer-legal-guarantee svg {
	display: block;
	flex: none;
}

.ibnav-footer-copy {
	margin: 0;
}

/* «From the blog» carousel — sits inside .ibnav-footer-body, DOM order between the columns and
   the contact card; CSS grid places it under the four columns (the contact card stays at
   column 5, spanning both rows). Area decision (399), 2026-09-22. */

.ibnav-footer-blog {
	grid-column: 1 / span 4;
	border-top: 1px solid #d5d5d5;
	padding-top: 22px;
	margin-top: 6px;
	/* A grid item defaults to min-width:auto, so the track's eight cards widened the whole footer
	   past the phone screen (seen live, 2026-09-22): the row must shrink and let the track scroll. */
	min-width: 0;
	max-width: 100%;
}

/* The contact card keeps the fifth column and spans both rows (columns + blog row), so the blog
   row fills the space under the four columns instead of pushing the card down (seen on stg, 0.25.0). */
@media (min-width: 992px) {
	.ibnav-footer-body {
		align-items: start;
	}

	.ibnav-footer-contact {
		grid-column: 5;
		grid-row: 1 / span 2;
	}
}

.ibnav-footer-blog-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ibnav-footer-blog-head h3 {
	font-size: 16px;
}

.ibnav-footer-blog-nav {
	display: flex;
	gap: 6px;
}

.ibnav-footer-blog-nav button {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #d5d5d5;
	border-radius: 50%;
	background: #fff;
	color: #2b2b2b;
	font-size: 16px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.ibnav-footer-blog-nav button:disabled {
	opacity: 0.4;
	cursor: default;
}

.ibnav-footer-blog-track {
	min-width: 0;
	max-width: 100%;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ibnav-footer-blog-track::-webkit-scrollbar {
	display: none;
}

.ibnav-footer-card {
	flex: 0 0 calc((100% - 3 * 16px) / 4);
	scroll-snap-align: start;
	display: block;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
}

.ibnav-footer-card-img {
	display: block;
	height: 110px;
	background: linear-gradient(135deg, #cfd8cf, #e9ede9);
}

.ibnav-footer .ibnav-footer-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.ibnav-footer-card-body {
	display: block;
	padding: 12px 14px 14px;
}

.ibnav-footer-card-kicker {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
}

.ibnav-footer-card-title {
	display: block;
	font-family: 'ABeeZee', var(--font-heading, inherit);
	font-size: 15px;
	color: #1f1f1f;
	margin: 4px 0 6px;
}

.ibnav-footer-card-text {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: #6b6b6b;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Same desktop threshold as the rest of the file (992px): four open columns, no accordion. The
   markup prints every column `<details open>` (a closed <details> hides its body whatever CSS says);
   on the phone the footer script closes them at load, so a phone without JavaScript simply shows
   the lists open. */

/* f) phone layout (≤ 991px): trust strip 2×2, contact card, columns as closed accordions,
   offers form, language, logos, legal, copyright — same markup as the computer, CSS decides. */
@media (max-width: 991px) {
	.ibnav-footer {
		padding: 32px 0 20px;
	}

	.ibnav-footer-trust {
		grid-template-columns: 1fr 1fr;
		gap: 18px 14px;
	}

	/* The mockup's phone sizes: 24 px icon, 14.5 px title, 12.5 px text. */
	.ibnav-footer-trust-item {
		gap: 10px;
	}

	.ibnav-footer-trust-icon {
		width: 24px;
		height: 24px;
	}

	.ibnav-footer-trust-title {
		font-size: 14.5px;
	}

	.ibnav-footer-trust-text {
		font-size: 12.5px;
	}

	.ibnav-footer-body {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ibnav-footer-contact {
		order: -1;
	}

	.ibnav-footer-blog {
		grid-column: auto;
	}

	.ibnav-footer-blog-nav {
		display: none;
	}

	/* The strip starts and ends on the footer's own edges — which are now the page's edges.
	   It used to be pulled out by the footer's 20 px gutter; without that gutter a pull-out
	   would put the cards on the section's background, outside the footer's grey ground, and
	   `max-width: 100%` (above) would clamp it back on the right only. */

	.ibnav-footer-card {
		flex: 0 0 72%;
	}

	.ibnav-footer-card-img {
		height: 96px;
	}

	.ibnav-footer-acc-head {
		cursor: pointer;
	}

	.ibnav-footer-acc .ibnav-chevron {
		display: block;
		width: 16px;
		height: 16px;
		transition: transform 0.15s ease;
	}

	.ibnav-footer-acc[open] .ibnav-chevron {
		transform: rotate(180deg);
	}

	.ibnav-footer-legal,
	.ibnav-footer-bottom-pay {
		gap: 8px;
	}
}

/* «Your account» leaves the footer on the phone — the drawer's own account block already
   carries My Account/My Orders/My Print Jobs/Support/Reviews there. Its own threshold, as
   specified: 768px, not the 991px the rest of the footer switches layout at. */
@media (max-width: 768px) {
	.ibnav-footer-acc--account {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ibnav-footer-acc .ibnav-chevron,
	.ibnav-btn,
	.ibnav-footer-blog-nav button {
		transition: none;
	}

	.ibnav-footer-blog-track {
		scroll-behavior: auto;
	}
}

/* The Oxygen section «Footer Light» (template «Header and footer», post 82) holds only the
   [ib_navigation part="footer"] shortcode since area decision (394). Its inner wrap keeps its own
   band — max-width 1400 px and a var(--space-s) gutter, exactly like every other row of the shop —
   and the footer fills it edge to edge, so the columns line up with the content above them.
   Until 0.26.3 a `:has(> .ibnav-footer)` rule tried to zero that wrap, but Oxygen prints the
   shortcode inside a `div.ct-shortcode`, so the footer was never its direct child: the rule never
   matched and the footer's own 56 px gutter simply added to the section's, leaving the footer
   56 px narrower per side than the rest of the site (measured on the test shop, 2026-09-22). */

/* ============================================================
   EU legal-guarantee notice — checkout line + dialog
   (Italiana Bandiere area decisions (578)/(579)). The footer's own
   trigger link is styled above, next to `.ibnav-footer-legal`.
   ============================================================ */

/* The checkout line, printed by `Main::print_legal_guarantee_checkout_line()` above the terms
   checkbox. The link's colour carries `!important`: the checkout theme (ib-delivery-promise
   `checkout-theme.css`) colours every link in the form and summary through id-level rules
   (`html body.wfacp_oxygen_template #wfacp-e-form a`), which a class selector can never outrank —
   without it the approved black would depend on that other plugin's own link colour. */
.ibnav-legal-guarantee-line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: #333;
}

.ibnav-legal-guarantee-line svg {
	flex: none;
}

html body .ibnav-legal-guarantee-line a {
	color: #333 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The dialog — native <dialog>, opened with `showModal()`; the browser supplies the centring
   and the top layer, this only styles the box, its backdrop and its own children. */
.ibnav-legal-guarantee-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: 94vh;
	max-height: 94dvh;
	overflow-y: auto;
	padding: 14px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
}

.ibnav-legal-guarantee-dialog::backdrop {
	background: rgba(20, 20, 20, 0.6);
}

/* Sticky, floated right with a negative bottom margin: it stays in view while the notice
   scrolls on a short phone screen, and takes no line of its own above the image. */
.ibnav-legal-guarantee-close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 1;
	margin: 0 0 -34px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ibnav-legal-guarantee-dialog img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 6px;
}

.ibnav-legal-guarantee-address {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	text-align: center;
	color: #333;
	text-decoration: underline;
}