/**
 * For Lucky TCG - tema figlio di Storefront.
 * Palette derivata dal logo: nero profondo, oro, bianco.
 */

:root {
	--flt-nero: #0b0b0d;
	--flt-nero-2: #16161b;
	--flt-nero-3: #22222a;
	--flt-oro: #d4af37;
	--flt-oro-chiaro: #f0d78a;
	--flt-oro-scuro: #8a6d1f;
	--flt-testo: #16161a;
	--flt-grigio: #6b6b76;
	--flt-bordo: #e3e3e8;
	--flt-sfondo-soft: #f7f7f9;
	--flt-rosso: #b32d2e;
	--flt-verde: #1a7f37;
	--flt-raggio: 10px;
}

body {
	color: var(--flt-testo);
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--flt-nero);
	font-weight: 800;
	letter-spacing: -0.01em;
}

a {
	color: var(--flt-oro-scuro);
}

a:hover {
	color: var(--flt-nero);
}

/* ---------------------------------------------------------------
 * Impaginazione senza sidebar
 * ------------------------------------------------------------ */

body.flt-no-sidebar .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

body.flt-no-sidebar .widget-area {
	display: none;
}

/* In home il titolo della pagina e sostituito dal titolo dell'hero:
   due <h1> nella stessa pagina confondono lettori di schermo e motori. */
body.flt-home .entry-header,
body.flt-home .page-title {
	display: none;
}

body.flt-home .site-main > .type-page > .entry-content {
	margin-top: 0;
}

/* ---------------------------------------------------------------
 * Barra promozionale
 * ------------------------------------------------------------ */

.flt-topbar {
	background: var(--flt-nero);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	padding: 0.5rem 0;
	text-align: center;
	border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.flt-topbar__sep {
	margin: 0 0.6rem;
	color: var(--flt-oro);
}

@media (max-width: 700px) {
	.flt-topbar span:not(:first-child):not(.flt-topbar__sep) {
		display: none;
	}

	.flt-topbar__sep {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------ */

.site-header {
	background: var(--flt-nero) !important;
	border-bottom: 2px solid var(--flt-oro);
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}

/*
 * L'intestazione mantiene sempre la stessa altezza.
 * In una versione precedente si rimpiccioliva scorrendo verso il basso e
 * tornava grande risalendo: non essendo fissa in cima, ogni cambio spostava
 * tutta la pagina e lo scorrimento risultava a scatti.
 */
.site-header .site-branding img,
.site-header .custom-logo-link img {
	max-height: 84px;
	width: auto;
}

.site-header .site-title a,
.site-header .site-description,
.site-header a:not(.button) {
	color: #fff;
}

.site-header a:not(.button):hover {
	color: var(--flt-oro-chiaro);
}

.storefront-primary-navigation {
	background: var(--flt-nero) !important;
}

.main-navigation ul li a {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--flt-oro-chiaro);
}

.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li:hover > a {
	box-shadow: inset 0 -3px 0 var(--flt-oro);
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background: var(--flt-nero-2);
	border: 1px solid rgba(212, 175, 55, 0.3);
}

.site-header-cart .cart-contents {
	color: #fff;
}

.site-header-cart .cart-contents .count {
	color: var(--flt-oro-chiaro);
}

.site-search .widget_product_search input[type="search"] {
	border-radius: var(--flt-raggio);
}

/* ---------------------------------------------------------------
 * Pulsanti
 * ------------------------------------------------------------ */

.button,
button,
input[type="submit"],
.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: linear-gradient(180deg, var(--flt-oro-chiaro), var(--flt-oro));
	color: #2b2205;
	font-weight: 700;
	border-radius: var(--flt-raggio);
	border: none;
	text-shadow: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: linear-gradient(180deg, #f7e6b0, #e0bd4a);
	color: #2b2205;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--flt-nero);
	color: var(--flt-oro-chiaro);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--flt-nero-2);
	color: #fff;
}

/* Il pulsante "Procedi all ordine" deve essere il piu evidente della pagina. */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: linear-gradient(180deg, var(--flt-oro-chiaro), var(--flt-oro));
	color: #2b2205;
	font-size: 1.05rem;
	padding: 1rem;
}

/* ---------------------------------------------------------------
 * Catalogo prodotti
 * ------------------------------------------------------------ */

ul.products li.product {
	background: #fff;
	border: 1px solid var(--flt-bordo);
	border-radius: 12px;
	padding: 0.9rem;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	display: flex;
	flex-direction: column;
}

ul.products li.product:hover {
	border-color: var(--flt-oro);
	box-shadow: 0 10px 26px rgba(11, 11, 13, 0.09);
	transform: translateY(-2px);
}

ul.products li.product a img {
	margin-bottom: 0.8rem;
	border-radius: 8px;
	background: #fff;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.92rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--flt-testo);
	margin-bottom: 0.4rem;
	min-height: 2.6em;
}

ul.products li.product .price {
	color: var(--flt-nero);
	font-weight: 800;
	font-size: 1.12rem;
	margin-bottom: 0.6rem;
}

ul.products li.product .price del {
	color: var(--flt-grigio);
	font-weight: 500;
	font-size: 0.85rem;
	opacity: 1;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--flt-rosso);
}

ul.products li.product .button {
	margin-top: auto;
	width: 100%;
	text-align: center;
}

ul.products li.product .star-rating {
	font-size: 0.72rem;
	margin-bottom: 0.4rem;
}

/*
 * Card tutte alte uguali.
 * Storefront impagina il catalogo con float e larghezze in percentuale:
 * ogni card è alta quanto il suo contenuto, quindi un titolo su tre righe
 * sfalsa l'intera fila. Con la griglia le card di una riga si allungano
 * insieme e il pulsante (margin-top: auto) resta allineato in fondo.
 * Il selettore lungo serve a superare quelli di Storefront
 * (".site-main ul.products.columns-4 li.product").
 */
body.woocommerce-active .site-main ul.products,
body.woocommerce-active .site-main .woocommerce ul.products {
	display: grid;
	/* Colonne in base alla larghezza dello schermo (vedi sotto): con il
	   layout a tutta larghezza il numero fisso di 4 sprecava spazio. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 768px) {
	body.woocommerce-active .site-main ul.products,
	body.woocommerce-active .site-main .woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	body.woocommerce-active .site-main ul.products,
	body.woocommerce-active .site-main .woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1600px) {
	body.woocommerce-active .site-main ul.products,
	body.woocommerce-active .site-main .woocommerce ul.products {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Il clearfix dei float diventerebbe una cella vuota della griglia. */
body.woocommerce-active .site-main ul.products::before,
body.woocommerce-active .site-main ul.products::after {
	display: none;
}

body.woocommerce-active .site-main ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
}

/*
 * I badge (lingua, preordine) stanno sopra l'immagine, nell'angolo:
 * se occupassero una riga propria, le card con badge avrebbero
 * immagine e titolo più in basso di quelle senza.
 */
body.woocommerce-active .site-main ul.products li.product {
	position: relative;
}

body.woocommerce-active .site-main ul.products li.product .flt-badges {
	position: absolute;
	top: calc(0.9rem + 8px);
	left: calc(0.9rem + 8px);
	right: calc(0.9rem + 8px);
	margin: 0;
	pointer-events: none;
}

body.woocommerce-active .site-main ul.products li.product .flt-badge {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Immagine sempre quadrata, qualunque formato abbia la foto caricata. */
body.woocommerce-active .site-main ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Titolo su massimo tre righe con spazio riservato: i prezzi si allineano. */
body.woocommerce-active .site-main ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 3);
}

body.woocommerce-active .site-main ul.products li.product .button {
	margin-top: auto;
}

/* ---------------------------------------------------------------
 * Layout a tutta larghezza
 *
 * Storefront chiude tutto in un contenitore di circa 1064 px: su uno
 * schermo da 1920 px oltre metà della pagina restava vuota. Il
 * contenitore ora occupa tutta la larghezza (fino a 1920 px, oltre i
 * quali le righe diventerebbero illeggibili) con margini laterali
 * proporzionati allo schermo.
 * ------------------------------------------------------------ */

.col-full {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 3vw, 56px);
	padding-right: clamp(16px, 3vw, 56px);
	box-sizing: border-box;
}

/* I testi lunghi (pagine legali, contatti, FAQ) restano su una colonna
   leggibile: righe da 200 caratteri affaticano la lettura. */
body.page:not(.flt-home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* Carrello, pagamento, account e scheda prodotto: larghi ma non sconfinati. */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.single-product .site-main {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

span.onsale,
.woocommerce span.onsale {
	background: var(--flt-rosso);
	color: #fff;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.72rem;
	padding: 0.35em 0.8em;
	min-height: auto;
	min-width: auto;
	line-height: 1.5;
	top: 0.8rem;
	left: 0.8rem;
	right: auto;
}

.stock.out-of-stock {
	color: var(--flt-rosso);
	font-weight: 700;
}

.stock.in-stock {
	color: var(--flt-verde);
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Scheda prodotto
 * ------------------------------------------------------------ */

/* Con una sola immagine FlexSlider duplica la slide e le copie sbordano
   fuori dalla colonna: il contenitore deve ritagliare quello che eccede. */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	overflow: hidden;
}

.single-product div.product .product_title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.2;
}

.single-product div.product .price {
	color: var(--flt-nero);
	font-weight: 800;
	font-size: 1.9rem;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: #3b3b45;
	line-height: 1.65;
}

.flt-rassicurazioni {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	font-size: 0.88rem;
	color: #3b3b45;
}

.flt-rassicurazioni li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.4rem;
	line-height: 1.5;
}

.flt-rassicurazioni li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--flt-oro-scuro);
	font-weight: 800;
}

.woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--flt-oro);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--flt-nero);
	font-weight: 700;
}

/* ---------------------------------------------------------------
 * Carrello e checkout
 * ------------------------------------------------------------ */

.flt-soglia {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--flt-raggio);
	background: var(--flt-sfondo-soft);
	border-left: 3px solid var(--flt-oro);
	font-size: 0.92rem;
}

.flt-soglia--ok {
	border-left-color: var(--flt-verde);
	background: #f1f9f3;
}

.woocommerce-checkout #payment {
	background: var(--flt-sfondo-soft);
	border-radius: 12px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--flt-bordo);
}

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--flt-oro);
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--flt-oro-scuro);
}

/* ---------------------------------------------------------------
 * Breadcrumb
 * ------------------------------------------------------------ */

.flt-breadcrumb {
	font-size: 0.82rem;
	color: var(--flt-grigio);
}

.flt-bc-sep {
	margin: 0 0.4rem;
	color: var(--flt-bordo);
}

/* ---------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------ */

.site-footer {
	background: var(--flt-nero) !important;
	color: rgba(255, 255, 255, 0.75);
	padding: 0;
}

.flt-footer {
	padding: 3rem 0 2rem;
}

.flt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 2rem;
}

.flt-footer__col h3 {
	color: var(--flt-oro-chiaro);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 0.9rem;
}

.flt-footer__logo {
	max-width: 230px;
	height: auto;
	margin-bottom: 0.9rem;
}

.flt-footer__claim {
	font-size: 0.86rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.flt-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.flt-footer__menu li {
	margin-bottom: 0.45rem;
}

/* Le regole di Storefront sui link del footer sono piu specifiche:
   senza .site-footer davanti i link restano grigio scuro su nero. */
/* Storefront stampa inline ".site-footer a:not(.button):not(.components-button)"
   (specificita 0-3-1): i due :not() servono a superarla. */
.site-footer .flt-footer__menu a:not(.button):not(.components-button),
.site-footer .flt-footer__claim a:not(.button):not(.components-button) {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.88rem;
	text-decoration: none;
}

.site-footer .flt-footer__menu a:not(.button):not(.components-button):hover,
.site-footer .flt-footer__menu a:not(.button):not(.components-button):focus {
	color: var(--flt-oro-chiaro);
	text-decoration: underline;
}

.site-footer .flt-footer__social a:not(.button):not(.components-button) {
	color: var(--flt-oro-chiaro);
	margin-right: 0.9rem;
	font-size: 0.86rem;
	text-decoration: none;
}

/* La card contatti nel footer eredita il tema scuro. */
.flt-footer .flt-contatti {
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin: 0;
}

.site-footer .flt-contatti__item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	padding: 0.7rem 0.9rem;
	text-decoration: none;
}

.site-footer .flt-contatti__item:hover {
	border-color: var(--flt-oro);
}

.site-footer .flt-contatti__label {
	color: rgba(255, 255, 255, 0.55);
}

/* Gli indirizzi email lunghi devono andare a capo sulla chiocciola,
   non spezzarsi a metà parola. */
.site-footer .flt-contatti__valore {
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: 1.4;
}

.site-footer .flt-btn--ghost {
	color: var(--flt-oro-chiaro);
	border-color: rgba(240, 215, 138, 0.45);
	margin-top: 0.9rem;
	padding: 8px 14px;
	font-size: 0.82rem;
	text-decoration: none;
}

.site-footer .flt-btn--ghost:hover {
	color: #fff;
	border-color: var(--flt-oro-chiaro);
	background: rgba(240, 215, 138, 0.12);
}

.flt-footer__pagamenti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
}

.flt-pagamenti {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.flt-pagamenti__badge {
	padding: 0.3rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 0.74rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.05);
}

.flt-footer__legale {
	margin-top: 1.25rem;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.6;
}

.flt-footer__legale p {
	margin-bottom: 0.3rem;
}

@media (max-width: 900px) {
	.flt-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.flt-footer__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* ---------------------------------------------------------------
 * Accessibilita
 * ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--flt-oro);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}