/* ==========================================================================
   Quarto Fuoco — Header
   Desktop: Figma node 192:398  |  Mobile: Figma node 192:1179
   ========================================================================== */

:root {
	--qf-max-width: 1464px;
}

/* Reset globale outline/focus/tap-highlight su tutto il sito */
a,
button,
input,
textarea,
select,
[role="button"] {
	-webkit-tap-highlight-color: transparent !important;
}
a:focus,
a:active,
a:focus-visible,
button:focus,
button:active,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
select:focus {
	outline: none !important;
	box-shadow: none !important;
}

body {
	overflow-x: hidden;
	max-width: 100%;
	position: relative;
}
/* Su html uso overflow-x: clip (non crea un scroll context, così non blocca
   i carousel interni su iOS Safari). Fallback a hidden solo se clip non supportato. */
html {
	overflow-x: clip;
}
@supports not (overflow-x: clip) {
	html {
		overflow-x: hidden;
	}
}

/* ==========================================================================
   DARK MODE (toggle via icona contrast nell'header)
   ========================================================================== */
html.qf-dark {
	filter: invert(1) hue-rotate(180deg);
}
html.qf-dark img,
html.qf-dark video,
html.qf-dark svg image,
html.qf-dark picture {
	filter: invert(1) hue-rotate(180deg);
}
html.qf-dark body {
	background: #FFFFFF; /* evita artefatti di border/edge con filter globale */
}


.qf-header,
.qf-header * {
	box-sizing: border-box;
}


.qf-header {
	width: 100%;
	background: #FFFFFF;
	padding: 23px 0;
}

.qf-header__inner {
	max-width: var(--qf-max-width);
	height: 47px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

/* ----- Logo ----- */
.qf-header__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 269px;
	height: 47px;
	background: #FFFFFF;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}
.qf-header__logo svg {
	display: block;
	width: 269px;
	height: 47px;
}

/* ----- Nav (desktop) ----- */
.qf-header__nav {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-left: 103px;
	flex-shrink: 0;
}
.qf-header__nav a {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0.12px;
	color: #12110F;
	text-decoration: none;
	white-space: nowrap;
}
.qf-header__nav a:hover {
	opacity: 0.7;
}

/* ----- Search ----- */
.qf-header__search {
	margin-left: 60px;
	flex: 1 1 480px;
	max-width: 520px;
	min-width: 0;
	height: 46px;
	border: 2px solid #9A4F3F;
	border-radius: 60px;
	background: transparent;
	display: flex;
	align-items: center;
	padding: 0 3px 0 21px;
}
.qf-header__search input {
	flex: 1;
	height: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0.12px;
	color: #12110F;
	padding: 0;
}
.qf-header__search input::placeholder {
	color: #12110F;
	opacity: 1;
}
.qf-header__search-btn,
.qf-header__search-btn:hover,
.qf-header__search-btn:active,
.qf-header__search-btn:focus,
.qf-header__search-btn:focus-visible {
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent !important;
	background-color: transparent !important;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 9999px;
	color: #5C2E26 !important;
	outline: none !important;
	box-shadow: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.qf-header__search-btn:hover,
.qf-header__search-btn:active,
.qf-header__search-btn:focus,
.qf-header__search-btn:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}
.qf-header__search-btn svg {
	display: block;
	width: 37px;
	height: 37px;
}

/* ----- User area (desktop) ----- */
.qf-header__user {
	margin-left: 33px;
	display: flex;
	align-items: center;
	gap: 40px;
	flex-shrink: 0;
}
.qf-header__user-link {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0.12px;
	color: #12110F;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.qf-header__user-link:hover,
.qf-header__user-link:active,
.qf-header__user-link:focus,
.qf-header__user-link:focus-visible {
	color: #12110F !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}
.qf-header__user-link:hover {
	opacity: 0.7;
}
.qf-header__user-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	font: inherit;
	position: relative;
}
.qf-header__user-icon:hover,
.qf-header__user-icon:active,
.qf-header__user-icon:focus,
.qf-header__user-icon:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}
.qf-header__user-icon svg {
	display: block;
}
.qf-header__user-icon:hover {
	opacity: 0.7;
}
/* Theme toggle: in dark mode il global filter lo rende bianco automaticamente.
   Non ri-invertiamo qui, così resta visibile sul nero. */

/* ----- Hamburger + drawer (mobile only) ----- */
.qf-header__hamburger {
	display: none;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	background-color: transparent;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	color: inherit;
	font: inherit;
}
.qf-header__hamburger:hover,
.qf-header__hamburger:active,
.qf-header__hamburger:focus,
.qf-header__hamburger:focus-visible,
.qf-header__hamburger[aria-expanded="true"] {
	background: transparent !important;
	background-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}
.qf-header__hamburger svg {
	display: block;
	width: 36px;
	height: 36px;
}
.qf-header__drawer {
	display: none;
}

/* ----- Cart badge (count nel pulsante carrello) ----- */
.qf-header__cart-count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background: #CF2617;
	color: #FFFFFF;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	box-shadow: 0 0 0 2px #FFFFFF;
}



/* ==========================================================================
   LAPTOP / TABLET LANDSCAPE — 992px - 1463px
   Mantiene il layout desktop ma con margini ridotti per evitare overflow
   ========================================================================== */
@media (max-width: 1463px) and (min-width: 992px) {
	.qf-header__inner {
		padding: 0 32px;
	}
	.qf-header__nav {
		margin-left: 48px;
		gap: 32px;
	}
	.qf-header__search {
		margin-left: 48px;
	}
	.qf-header__user {
		margin-left: 24px;
		gap: 28px;
	}
}

/* ==========================================================================
   MOBILE + TABLET PORTRAIT — fino a 991px
   2 righe (Figma node 192:1179)
   ========================================================================== */
@media (max-width: 991px) {
	.qf-header {
		padding: 0;
	}
	.qf-header__inner {
		max-width: 100%;
		height: auto;
		padding: 20px;
		display: grid;
		grid-template-columns: 1fr 36px;
		grid-template-areas:
			"logo   icons"
			"search hamburger";
		column-gap: 27px;
		row-gap: 20px;
		align-items: center;
	}

	/* Logo (mobile) */
	.qf-header__logo {
		grid-area: logo;
		width: 179px;
		height: 31px;
	}
	.qf-header__logo svg {
		width: 179px;
		height: 31px;
	}

	/* Nav: nascosto inline, va nel drawer */
	.qf-header__nav {
		display: none;
	}

	/* Search bar (mobile) */
	.qf-header__search {
		grid-area: search;
		margin-left: 0;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		min-width: 0;
		height: 46px;
	}
	.qf-header__search input {
		font-size: 16px;
		line-height: 24px;
	}

	/* User area (mobile): solo icone, no "Accedi" */
	.qf-header__user {
		grid-area: icons;
		justify-self: end;
		margin-left: 0;
		gap: 23px;
	}
	.qf-header__user-link {
		display: none;
	}
	.qf-header__user-icon {
		width: 36px;
		height: 36px;
		justify-content: center;
	}
	/* Icone più grandi su mobile (come da Figma) */
	.qf-header__user-icon[aria-label="Carrello"] svg {
		width: 30px;
		height: 30px;
	}
	.qf-header__user-icon[aria-label="Account"] svg,
	.qf-header__theme-toggle svg {
		width: 24px;
		height: 24px;
	}
	/* Logout su mobile è nel menu hamburger, nasconderlo dall'header */
	.qf-header__user-icon--logout {
		display: none;
	}
	/* Magazzino su mobile è nel drawer, nasconderlo dall'header */
	.qf-header__user-icon--magazzino {
		display: none;
	}

	/* Hamburger button (visibile solo mobile) */
	.qf-header__hamburger {
		grid-area: hamburger;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Drawer (mobile menu — Figma node 192:1603) */
	.qf-header__drawer {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		padding: 40px 20px;
		gap: 40px;
		box-shadow: 0 8px 16px rgba(18, 17, 15, 0.08);
		animation: qf-drawer-in 180ms ease-out;
	}
	.qf-header__drawer[hidden] {
		display: none;
	}
	.qf-header__drawer-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: "Inter", sans-serif;
		font-weight: 500;
		font-size: 22px;
		line-height: 33px;
		color: #5C2E26;
		text-decoration: none;
		text-transform: uppercase;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}
	.qf-header__drawer-link:hover,
	.qf-header__drawer-link:active,
	.qf-header__drawer-link:focus,
	.qf-header__drawer-link:focus-visible {
		color: #5C2E26 !important;
		background: transparent !important;
		background-color: transparent !important;
		outline: none !important;
		box-shadow: none !important;
	}
	.qf-header__drawer-link:hover,
	.qf-header__drawer-link:focus {
		opacity: 0.7;
	}
	.qf-header__drawer-divider {
		width: 100%;
		height: 0;
		margin: 0;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
	}
	.qf-header__drawer-accedi svg {
		width: 36px;
		height: 22px;
		display: block;
	}
	.qf-header__drawer-link--magazzino {
		gap: 12px;
	}
	.qf-header__drawer-link--magazzino svg {
		width: 24px;
		height: 24px;
		display: block;
	}

	/* Toggle: hamburger ↔ close (X) — due SVG separati, CSS li scambia */
	.qf-header__hamburger-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 0;
	}
	.qf-header__hamburger-icon--close {
		display: none;
	}
	.qf-header__hamburger[aria-expanded="true"] .qf-header__hamburger-icon--open {
		display: none;
	}
	.qf-header__hamburger[aria-expanded="true"] .qf-header__hamburger-icon--close {
		display: inline-flex;
	}
}

@keyframes qf-drawer-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SCHERMI STRETTI — sotto 420px (iPhone SE/12 mini, ecc.)
   Riduce padding/gap per dare più larghezza alla search bar
   ========================================================================== */
@media (max-width: 419px) {
	.qf-header__inner {
		padding: 16px;
		column-gap: 16px;
	}
	.qf-header__user {
		gap: 16px;
	}
	.qf-header__search input {
		font-size: 14px;
	}
	.qf-header__search {
		padding: 0 4px 0 16px;
	}
}

/* ==========================================================================
   Search autocomplete dropdown (header)
   ========================================================================== */
.qf-header__search-wrap {
	position: relative;
	margin-left: 60px;
	flex: 1 1 480px;
	max-width: 520px;
	min-width: 0;
	display: block;
}
.qf-header__search-wrap .qf-header__search {
	margin-left: 0;
	max-width: none;
	width: 100%;
}
.qf-search-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 1000;
	background: #FFFFFF;
	border: 1px solid rgba(92, 46, 38, 0.15);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	max-height: 460px;
	overflow-y: auto;
	padding: 8px 0;
	font-family: "Inter", sans-serif;
	color: #12110F;
}
.qf-search-suggest[hidden] { display: none; }
.qf-search-suggest__group + .qf-search-suggest__group {
	border-top: 1px solid rgba(92, 46, 38, 0.08);
	margin-top: 6px;
	padding-top: 6px;
}
.qf-search-suggest__title {
	display: block;
	padding: 8px 16px 4px;
	font-weight: 700;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #5C2E26;
}
.qf-search-suggest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.qf-search-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: #12110F;
	text-decoration: none;
	transition: background-color 120ms ease;
}
.qf-search-suggest__item:hover,
.qf-search-suggest__item:focus {
	background: rgba(92, 46, 38, 0.05);
	text-decoration: none;
	color: #12110F;
}
.qf-search-suggest__thumb {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #EEEEEE no-repeat center / cover;
}
.qf-search-suggest__avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #22286A no-repeat center / cover;
}
.qf-search-suggest__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.qf-search-suggest__name {
	font-weight: 600;
	font-size: 15px;
	line-height: 21px;
	color: #12110F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.qf-search-suggest__meta {
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	color: #616161;
}
.qf-search-suggest__price {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-weight: 700;
	font-size: 15px;
	line-height: 21px;
	color: #5C2E26;
}
.qf-search-suggest__price-old {
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	text-decoration: line-through;
	color: #616161;
}
.qf-search-suggest__empty {
	padding: 14px 16px;
	font-size: 14px;
	color: #616161;
	text-align: center;
}
@media (max-width: 991px) {
	.qf-header__search-wrap {
		grid-area: search;
		margin-left: 0;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		min-width: 0;
	}
	.qf-header__search-wrap .qf-search-suggest {
		left: 0px;
		right: -20px;
		border-radius: 10px;
		max-height: 96vh;
		width: 100%;
		max-width: 100vh;
	}
}