/*
 * Template prodotto "quadrata" (Template prodotto Armani Dolci Quadrata, riga .hi-armani-square): linee guida
 * armani.it dal Figma NEW PDP, frame "Desk - NO INDOSSATO" (957:18891, 1512px) ridotto ai pezzi tenuti.
 * Vale solo con body.hi-armani-square (HI_ADI_Square_Page), dopo armani-product.css.
 * Misure a 1512px: colonna sinistra 960 (foto 752 da x=104, miniature 60px a x=64 centrate in verticale sulla foto,
 * breadcrumb a x=60, 38px sotto la foto); colonna destra 488 da x=960, margine destro 64, 60px sotto l'header.
 * La foto e' quadrata (decisione dell'utente) invece del 752x1011 del Figma.
 */

/* L'header Armani e' fisso: la scheda parte sotto (come il Figma, foto subito sotto l'header). */
body.hi-armani-square .l-main .l-section.hi-armani-square {
	padding: var(--header-height, 108px) 0 0 !important;
}
body.hi-armani-square .l-section.hi-armani-square > .l-section-h {
	max-width: none !important;
	padding: 0 0 64px !important;
}
body.hi-armani-square .hi-armani-square .g-cols {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 !important;
	gap: 0;
}
body.hi-armani-square .hi-armani-square .g-cols > .wpb_column {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}
body.hi-armani-square .hi-armani-square .g-cols > .wpb_column > .vc_column-inner {
	padding: 0 !important;
}
body.hi-armani-square .hi-armani-square .wpb_text_column,
body.hi-armani-square .hi-armani-square .wpb_text_column .wpb_wrapper > :last-child {
	margin-bottom: 0;
}
/* wpautop chiude il <p> attorno a miniature e galleria: i <p> vuoti non devono fare spazio. */
body.hi-armani-square .hi-armani-sq-gallery .wpb_wrapper > p:empty {
	display: none;
}

/* ===== Foto quadrata e miniature ===== */
body.hi-armani-square .hi-armani-sq-gallery .wpb_wrapper {
	position: relative;
}
body.hi-armani-square .hi-armani-sq-gallery .hi-adi-gallery-item {
	aspect-ratio: 1 / 1;
	max-width: 100%;
}
/* Miniature verticali (Figma "Immagini"): 60px, passo 77 (2px fra l'una e l'altra), bordo nero sulla selezionata. */
body.hi-armani-square .hi-armani-sq-gallery .hi-adi-thumbs {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 0;
}
body.hi-armani-square .hi-armani-sq-gallery .hi-adi-thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	margin: 0;
	border: 1px solid transparent !important;
}
body.hi-armani-square .hi-armani-sq-gallery .hi-adi-thumb[aria-pressed="true"] {
	border-color: var(--hi-a-black) !important;
}
body.hi-armani-square .hi-armani-sq-gallery .hi-adi-thumb[aria-pressed="true"] img {
	opacity: 1;
}

/* ===== Colonna destra: titolo, prezzo, acquisto ===== */
body.hi-armani-square .hi-armani-square .hi-armani-info > .vc_column-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}
body.hi-armani-square .hi-armani-square .hi-armani-title {
	margin: 0 0 16px !important;
	font-family: var(--hi-a-font) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 400 !important;
	letter-spacing: var(--hi-a-ls);
	text-transform: uppercase;
	color: var(--hi-a-black) !important;
}
body.hi-armani-square .hi-armani-square .hi-armani-price {
	margin: 0 !important;
	font-family: var(--hi-a-font);
	font-size: 13px !important;
	line-height: 19.5px;
	font-weight: 300;
	letter-spacing: var(--hi-a-ls);
	color: var(--hi-a-black) !important;
}
body.hi-armani-square .hi-armani-square .hi-armani-buy {
	margin: 40px 0 0 !important;
}
/* "Disponibile" non c'e' nel Figma; "Esaurito" resta visibile. */
body.hi-armani-square .hi-armani-square .hi-armani-buy .stock.in-stock {
	display: none;
}
body.hi-armani-square .hi-armani-square .hi-armani-buy .single_add_to_cart_button {
	height: 52px;
	min-height: 52px;
	text-transform: none;
	font-weight: 400;
}
body.hi-armani-square .hi-armani-square .hi-armani-buy .quantity {
	align-self: center;
}

/* ===== Dettagli prodotto [hi_adi_square_description] (Figma 1310:45007) ===== */
body.hi-armani-square .hi-armani-sq-desc {
	margin-top: 40px !important;
}
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__title {
	margin: 0 0 16px;
	padding: 0;
	font-family: var(--hi-a-font);
	font-size: 13px;
	line-height: 19.5px;
	font-weight: 500;
	letter-spacing: var(--hi-a-ls);
	text-transform: none;
	color: var(--hi-a-black);
}
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__body {
	position: relative;
	max-height: 78px; /* 4 righe da 19.5px */
	overflow: hidden;
	font-family: var(--hi-a-font);
	font-size: 12px;
	line-height: 19.5px;
	font-weight: 300;
	letter-spacing: var(--hi-a-ls);
	color: var(--hi-a-black);
}
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__body p {
	margin: 0 0 19.5px;
	font-size: inherit;
	line-height: inherit;
}
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__body > :last-child {
	margin-bottom: 0;
}
/* Sfumatura verso il fondo, come nel Figma; sparisce col testo aperto o senza pulsante (testo corto). */
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__body::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 64px;
	background: linear-gradient(to bottom, rgba(251, 251, 251, 0) 0%, var(--hi-a-offwhite) 92%);
	pointer-events: none;
}
body.hi-armani-square .hi-adi-desc--square.is-open .hi-adi-desc__body {
	max-height: none;
}
body.hi-armani-square .hi-adi-desc--square.is-open .hi-adi-desc__body::after,
body.hi-armani-square .hi-adi-desc--square:has(.hi-adi-desc__more[hidden]) .hi-adi-desc__body::after {
	display: none;
}
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__more {
	display: inline-block;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none;
	color: var(--hi-a-black) !important;
	font-family: var(--hi-a-font);
	font-size: 10px;
	line-height: 19.5px;
	font-weight: 400;
	letter-spacing: var(--hi-a-ls);
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}
/* Il display del pulsante batterebbe [hidden] del browser: testo corto = nessun pulsante. */
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__more[hidden] {
	display: none;
}
body.hi-armani-square .hi-adi-desc--square .hi-adi-desc__more:focus-visible {
	outline: 2px solid var(--hi-a-focus);
	outline-offset: 2px;
}

/* ===== Fisarmoniche (Figma "Progressive label"): righe alte 36px ogni 44, 13px medio, freccia giu', senza linee ===== */
body.hi-armani-square .hi-armani-sq-acc {
	margin-top: 8px !important;
}
body.hi-armani-square .hi-armani-sq-acc .hi-adi-accordion {
	margin-top: 0;
	border-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.hi-armani-square .hi-armani-sq-acc .hi-adi-acc {
	border-top: 0;
}
body.hi-armani-square .hi-armani-sq-acc .hi-adi-acc__title {
	height: 36px;
	font-weight: 500;
}
body.hi-armani-square .hi-armani-sq-acc .hi-adi-acc__title .hi-adi-chevron {
	width: 20px;
	height: 20px;
}
body.hi-armani-square .hi-armani-sq-acc .hi-adi-acc__body {
	padding: 4px 0 8px;
	font-size: 12px;
}

/* ===== Breadcrumb sotto la foto ===== */
body.hi-armani-square .hi-armani-square .hi-armani-crumbs-wrap {
	margin: 38px 0 0 !important;
}

/* ===== Desktop ===== */
@media (min-width: 1025px) {
	body.hi-armani-square .hi-armani-square .g-cols {
		grid-template-columns: minmax(0, 960fr) minmax(0, 552fr);
	}
	/* Foto larga 752/960 della colonna, a 104/960 dal bordo; miniature a 64/960, centrate sulla foto. */
	body.hi-armani-square .hi-armani-sq-gallery .wpb_wrapper {
		padding-left: 10.8333%;
		padding-right: 10.8333%;
	}
	body.hi-armani-square .hi-armani-sq-gallery .hi-adi-thumbs {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 6.6667%;
		transform: translateY(-50%);
		max-height: 100%;
		overflow-y: auto;
		scrollbar-width: none;
	}
	body.hi-armani-square .hi-armani-sq-gallery .hi-adi-thumbs::-webkit-scrollbar {
		display: none;
	}
	body.hi-armani-square .hi-armani-square .hi-armani-crumbs-wrap {
		padding-left: 6.25%; /* x=60 su 960 */
	}
	body.hi-armani-square .hi-armani-square .g-cols > .hi-armani-info > .vc_column-inner {
		padding: 60px 64px 0 0 !important;
		max-width: calc(488px + 64px);
		box-sizing: border-box;
	}
}

/* ===== Telefono e tablet: una colonna; foto + pallini, informazioni, breadcrumb in fondo ===== */
@media (max-width: 1024px) {
	/* La colonna della foto si "apre": galleria e breadcrumb diventano voci della griglia, ordinate attorno alle info. */
	body.hi-armani-square .hi-armani-square .g-cols > .hi-armani-media,
	body.hi-armani-square .hi-armani-square .g-cols > .hi-armani-media > .vc_column-inner {
		display: contents;
	}
	body.hi-armani-square .hi-armani-square .hi-armani-sq-gallery {
		order: 1;
	}
	body.hi-armani-square .hi-armani-square .g-cols > .hi-armani-info {
		order: 2;
	}
	/* Dal 2026-10-27 niente percorso su telefono e tablet: al suo posto l'icona angle-left in alto a sinistra sulla foto,
	   che torna indietro (armani-product.js). Il contenitore resta nella griglia ma senza spazio. */
	body.hi-armani-square .hi-armani-square .hi-armani-crumbs-wrap {
		order: 3;
		margin: 0 !important;
		padding: 0;
	}
	body.hi-armani-square .hi-armani-square .hi-armani-crumbs-wrap .hi-adi-crumbs {
		display: none;
	}
	body.hi-armani-square .hi-armani-square .g-cols {
		position: relative;
	}
	/* Sotto 1025px l'header non e' fisso (sticky spento per tablet e telefono negli header Armani): lo spazio alto
	   quanto l'header lasciava una fascia bianca sopra la foto (92px, 152 con l'header Gobino). */
	body.hi-armani-square .l-main .l-section.hi-armani-square {
		padding-top: 0 !important;
	}
	body.hi-armani-square .hi-armani-square .hi-adi-back {
		position: absolute;
		top: 12px;
		left: 3vw;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.85);
		color: var(--hi-a-black) !important;
		font-size: 26px;
		line-height: 1;
		text-decoration: none;
	}
	body.hi-armani-square .hi-armani-square .hi-adi-back:focus-visible {
		outline: 1px solid var(--hi-a-black);
		outline-offset: 2px;
	}
	body.hi-armani-square .hi-armani-square .g-cols > .hi-armani-info > .vc_column-inner {
		padding: var(--hi-a-s4) 3vw 0 !important;
	}
	body.hi-armani-square .hi-armani-square .hi-armani-buy {
		margin-top: var(--hi-a-s4) !important;
	}
	body.hi-armani-square .hi-armani-sq-desc {
		margin-top: 32px !important;
	}
}