/*
Theme Name:   LOOP Child
Theme URI:    https://www.loopbrand.store/
Description:  Official child theme for LOOP. Design system v1: Archivo + Inter, monochrome. Every grey descends from #342B2F, sampled from the garments themselves. Deliberately scoped — it defines tokens and styles the elements Elementor does NOT control (WooCommerce archive cards, cart, checkout, native forms) plus LOOP's own components. Elementor-built sections are governed by Elementor Global Settings set to the same values, so the two never fight.
Author:       SoftAgile for LOOP
Template:     hello-commerce
Version:      0.9.160
Text Domain:  loop-child
*/

/* ==========================================================================
   1. TOKENS — the single source of truth
   Locked by the owner on 21 August 2026. Change here, nowhere else.
   ========================================================================== */

:root {
	/* --- Colour -------------------------------------------------------
	 * Not picked from a palette. Sampled from the garments themselves:
	 * 74,460 pixels across seven flat-lays of the hoodie and pants average
	 * #342B2F - a warm dark grey with a faint mauve cast at hue 333 deg.
	 * The whole scale is that one colour at eleven lightnesses, so every
	 * grey on the site is the same grey the customer receives in the post.
	 *
	 * Contrast measured, not assumed. WCAG AA on white:
	 *   600 = 6.61:1  -> the lightest tone allowed to carry text
	 *   500 = 4.00:1  -> FAILS AA. Decoration only, never type
	 * ------------------------------------------------------------------ */
	--loop-ink:      #0A0A0A;   /* body text and buttons. 19.8:1 on white */
	--loop-white:    #FFFFFF;

	--loop-950:      #191517;
	--loop-900:      #241E21;
	--loop-800:      #322A2D;   /* THE garment tone. Badges, marks, fills */
	--loop-700:      #493C42;
	--loop-600:      #6A5860;   /* lightest tone that may carry text */
	--loop-500:      #907983;   /* decoration only - fails AA for text */
	--loop-400:      #AFA1A8;
	--loop-300:      #D0C8CC;   /* hairlines and field borders */
	--loop-200:      #E8E3E5;
	--loop-100:      #F4F3F3;   /* section grounds, image placeholders */
	--loop-050:      #FAF9F9;

	/* Semantic roles. Components reference these, never the numbers. */
	--loop-black:        var(--loop-ink);
	--loop-surface:      var(--loop-100);
	--loop-line:         var(--loop-300);
	--loop-muted:        var(--loop-600);
	--loop-accent:       var(--loop-800);   /* no chroma: the signal is
	                                           inversion and weight, not hue */
	--loop-accent-ink:   var(--loop-white);
	--loop-accent-soft:  var(--loop-200);
	--loop-success:      #1F6B3F;
	--loop-danger:       #A32A22;

	/* --- Type --------------------------------------------------------- */
	--loop-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--loop-font-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;

	/* Fluid scale. Clamps mean no breakpoint ever produces an orphan size. */
	--loop-size-hero:    clamp(2.25rem, 0.5rem + 8vw, 7rem);
	/* Verificato a 390px: 0.5rem + 8vw = 39px, e "REACHTHESTARS" (13
	   caratteri) entra in 358px di larghezza utile. Il valore precedente
	   dava 46px e produceva scorrimento orizzontale sul telefono. */
	--loop-size-h1:      clamp(2rem,    1.2rem + 3.4vw, 3.5rem);
	--loop-size-h2:      clamp(1.5rem,  1.1rem + 1.8vw, 2.25rem);
	--loop-size-h3:      clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--loop-size-body:    1rem;
	--loop-size-small:   0.875rem;
	--loop-size-micro:   0.75rem;

	--loop-lh-display:   0.92;
	--loop-lh-heading:   1.12;
	--loop-lh-body:      1.6;

	--loop-track-display: -0.02em;  /* display tightens */
	--loop-track-micro:    0.14em;  /* micro copy opens up */

	/* --- Space -------------------------------------------------------- */
	--loop-s-1:  0.25rem;
	--loop-s-2:  0.5rem;
	--loop-s-3:  0.75rem;
	--loop-s-4:  1rem;
	--loop-s-5:  1.5rem;
	--loop-s-6:  2rem;
	--loop-s-7:  3rem;
	--loop-s-8:  4rem;
	--loop-s-9:  6rem;

	/* --- Form -------------------------------------------------------- */
	--loop-radius:       0px;       /* LOOP is square. No soft corners */
	--loop-radius-pill:  999px;     /* only for badges */
	--loop-border:       1px solid var(--loop-line);
	--loop-focus:        2px solid var(--loop-accent);
	--loop-focus-offset: 2px;

	--loop-ease:         cubic-bezier(0.2, 0, 0, 1);
	--loop-dur:          180ms;

	--loop-maxw:         1360px;
}

/* Anyone who asked their system to calm down gets a calm site. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   2. ACCESSIBILITY PRIMITIVES
   ========================================================================== */

.loop-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: var(--loop-s-3) var(--loop-s-5);
	background: var(--loop-black);
	color: var(--loop-white);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	text-decoration: none;
}
.loop-skip:focus {
	left: var(--loop-s-4);
	top: var(--loop-s-4);
}

.loop-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* One focus ring for the whole site. Visible, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--loop-focus);
	outline-offset: var(--loop-focus-offset);
}

/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   Applied by class, never by blanket element selector, so Elementor's own
   typography controls keep working exactly as the editor shows them.
   ========================================================================== */

.loop-display {
	font-family: var(--loop-font-display);
	font-weight: 700;
	font-size: var(--loop-size-hero);
	line-height: var(--loop-lh-display);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	margin: 0;
}

.loop-h1 { font-family: var(--loop-font-display); font-weight: 700; font-size: var(--loop-size-h1); line-height: var(--loop-lh-heading); letter-spacing: var(--loop-track-display); text-transform: uppercase; margin: 0; }
.loop-h2 { font-family: var(--loop-font-display); font-weight: 700; font-size: var(--loop-size-h2); line-height: var(--loop-lh-heading); letter-spacing: var(--loop-track-display); text-transform: uppercase; margin: 0; }
.loop-h3 { font-family: var(--loop-font-display); font-weight: 600; font-size: var(--loop-size-h3); line-height: var(--loop-lh-heading); margin: 0; }

.loop-body  { font-family: var(--loop-font-text); font-size: var(--loop-size-body); line-height: var(--loop-lh-body); }
.loop-small { font-family: var(--loop-font-text); font-size: var(--loop-size-small); line-height: 1.5; }

.loop-micro {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
}

.loop-accent-text { color: var(--loop-accent); }
.loop-muted-text  { color: var(--loop-muted); }

/* ==========================================================================
   4. BUTTONS — WooCommerce's own, restyled. Elementor buttons are left alone.
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: var(--loop-s-4) var(--loop-s-6);
	border: 1px solid var(--loop-black);
	border-radius: var(--loop-radius);
	background: var(--loop-black);
	color: var(--loop-white);
	transition: background var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--loop-white);
	color: var(--loop-black);
}

/* Disabled must look disabled, not just behave that way. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--loop-surface);
	border-color: var(--loop-line);
	color: var(--loop-muted);
	opacity: 1;
	cursor: not-allowed;
}

/* ==========================================================================
   5. PRODUCT GRID — two per row on every device. Locked by the brief.
   ========================================================================== */

/*
 * WooCommerce prints a clearfix pseudo-element on ul.products. Harmless
 * while the list was float-based; inside a grid container it becomes a grid
 * ITEM, takes cell one, and shifts every product one place. Observed live on
 * 21 Aug 2026: the first row rendered empty-then-Bandit-Tee.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--loop-s-6) var(--loop-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: var(--loop-s-7) var(--loop-s-5);
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
	position: relative;
}

/*
 * The image link is a block child of a column flex card whose align-items is
 * flex-start, so it shrank to the image's intrinsic width: a 300px photo sat
 * in a 558px card with 250px of dead space beside it. Measured 22 Aug 2026.
 */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product > a.woocommerce-LoopProduct-link {
	display: block;
	width: 100%;
	align-self: stretch;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin-bottom: var(--loop-s-4);
	transition: transform var(--loop-dur) var(--loop-ease);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--loop-black);
	padding: 0;
	margin: 0 0 var(--loop-s-2);
}

.woocommerce ul.products li.product .price {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 500;
	color: var(--loop-black);
	margin: 0 0 var(--loop-s-4);
	display: block;
}

.woocommerce ul.products li.product .price del {
	color: var(--loop-muted);
	opacity: 1;
	margin-right: var(--loop-s-2);
	font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
}

/* Tap targets stay finger-sized even in a two-column mobile grid. */
.woocommerce ul.products li.product .button {
	display: inline-block;
	min-height: 44px;
	padding: var(--loop-s-3) var(--loop-s-4);
	font-size: var(--loop-size-micro);
}

/* ==========================================================================
   6. LOOP COMPONENTS
   ========================================================================== */

/* --- Bundle saving badge, printed by loop_bundle_sale_flash() ----------- */
.woocommerce span.onsale.loop-badge--save,
.woocommerce ul.products li.product span.onsale.loop-badge--save {
	position: absolute;
	top: var(--loop-s-3);
	right: var(--loop-s-3);
	left: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: var(--loop-s-2) var(--loop-s-3);
	border-radius: var(--loop-radius);
	background: var(--loop-accent);
	color: var(--loop-accent-ink);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}



/* --- Header: official star centred, SHOP / LOOP / CART beneath ---------
 * Locked architecture from the brief. Small, controlled, deliberate type.
 * Built from the theme's own shortcodes so LOOP owns its header.
 * -------------------------------------------------------------------- */
.loop-header__home {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}
.loop-header__home .loop-header__star {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	transition: transform var(--loop-dur) var(--loop-ease);
}
.loop-header__home:hover .loop-header__star { transform: scale(1.06); }

@media (max-width: 767px) {
	.loop-header__home .loop-header__star { width: 48px; height: 48px; }
}

.loop-nav { display: block; }

.loop-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--loop-s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loop-nav__item { margin: 0; }

.loop-nav .loop-nav__list .loop-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--loop-s-2);
	min-height: 44px;              /* a real tap target on mobile */
	padding: 0 var(--loop-s-1);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--loop-black);
	transition: color var(--loop-dur) var(--loop-ease);
}

/* The underline grows from the centre. One line of movement, no more. */
.loop-nav .loop-nav__list .loop-nav__link::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 10px;
	height: 1px;
	background: currentColor;
	transition: left var(--loop-dur) var(--loop-ease),
	            right var(--loop-dur) var(--loop-ease);
}
.loop-nav .loop-nav__list .loop-nav__link:hover::after,
.loop-nav .loop-nav__list .loop-nav__link:focus-visible::after,
.loop-nav .loop-nav__list .loop-nav__link.is-current::after {
	left: var(--loop-s-1);
	right: var(--loop-s-1);
}

.loop-nav .loop-nav__list .loop-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--loop-radius-pill);
	background: var(--loop-accent);
	color: var(--loop-accent-ink);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
}
.loop-nav .loop-nav__list .loop-nav__count[hidden] { display: none; }

@media (max-width: 479px) {
	.loop-nav__list { gap: var(--loop-s-5); }
}

/* --- Trust strip -------------------------------------------------------- */
/* La striscia di fiducia e' un nastro, non un paragrafo: una riga sola,
   sempre. Vedi functions.php sezione 38 per quando si muove e perche'. */
.loop-trust {
	display: block;
	overflow: hidden;
	padding: var(--loop-s-4) var(--loop-s-5);
	border-top: var(--loop-border);
	border-bottom: var(--loop-border);
	background: var(--loop-white);
}
.loop-trust__track {
	display: flex;
	width: max-content;
	min-width: 100%;
	align-items: center;
}
.loop-trust__run {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--loop-s-5);
	min-width: 100%;
	white-space: nowrap;
}
/* Le copie clonate non devono allargarsi: solo l'originale si centra
   quando la striscia sta comoda. */
.loop-trust.is-ticking .loop-trust__run {
	min-width: 0;
	padding-inline-end: var(--loop-s-5);
}
.loop-trust.is-ticking .loop-trust__track {
	animation: loop-ticker var(--loop-ticker-dur, 30s) linear infinite;
}
/* Il nastro non si ferma al passaggio del dito.
 *
 * Qui c'era una pausa su `:hover` e su `:focus-within`. Su desktop e' una
 * gentilezza; su telefono no: un tocco lascia lo stato hover attaccato, e il
 * nastro resta fermo finche' non si tocca altrove. Il capitolato lo vieta in
 * modo esplicito - «not pause on touch» - e aveva ragione: un nastro che si
 * blocca quando lo sfiori sembra rotto, non premuroso. */

/* La stella di coda serve solo quando il nastro scorre: e' li' per chiudere
   la sequenza prima che ricominci. Se il nastro sta fermo - niente
   JavaScript, oppure movimento ridotto - resterebbe appesa in fondo alla
   riga a separare il nulla. */
.loop-trust:not(.is-ticking) .loop-trust__sep--tail {
	display: none;
}
@keyframes loop-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* Chi ha chiesto meno animazioni non vede muoversi niente: la striscia
   resta una riga sola e si scorre a mano. */
.loop-trust.is-scrollable {
	overflow-x: auto;
	scrollbar-width: none;
}
.loop-trust.is-scrollable::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
	.loop-trust.is-ticking .loop-trust__track { animation: none; }
}
.loop-trust__item {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 500;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-black);
	white-space: nowrap;
}
.loop-trust__sep {
	color: var(--loop-accent);
	font-size: var(--loop-size-micro);
	line-height: 1;
}




/* --- No horizontal overflow, ever --------------------------------------
 * A page that scrolls sideways on a phone is a defect, not a style. These
 * are the three things that cause it: long unbreakable words, images with
 * intrinsic widths, and tables. All three are handled here rather than by
 * hiding the overflow, which would only conceal the next one.
 * -------------------------------------------------------------------- */
.loop-display,
.loop-h1,
.loop-h2,
.loop-h3 {
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: none;
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

.loop-size-guide__scroll,
.entry-content table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * The cart table on a phone. WooCommerce already stacks the cells, but a
 * <table> cannot shrink below the intrinsic minimum width of its content,
 * so the bundle pick list ("Includes: Stars Hoodie — M · Stars Pants — M ·
 * Bandit Tee — S") pushed it to 445px inside a 375px screen and the page
 * scrolled sideways. Measured on 22 Aug 2026.
 *
 * Dropping the table formatting context entirely is what fixes it: as
 * blocks, the cells wrap like anything else.
 */
@media (max-width: 768px) {

	.woocommerce table.shop_table_responsive,
	.woocommerce-page table.shop_table_responsive {
		display: block;
		width: 100%;
		max-width: 100%;
		border: 0;
	}

	.woocommerce table.shop_table_responsive tbody,
	.woocommerce table.shop_table_responsive tr,
	.woocommerce table.shop_table_responsive td,
	.woocommerce-page table.shop_table_responsive tbody,
	.woocommerce-page table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive td {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.woocommerce table.shop_table_responsive td,
	.woocommerce-page table.shop_table_responsive td {
		overflow-wrap: anywhere;
		padding-left: var(--loop-s-4);
		padding-right: var(--loop-s-4);
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		border-bottom: var(--loop-border);
		padding: var(--loop-s-3) 0;
	}
}

/* --- Prose rhythm and measure ------------------------------------------
 * A line of body copy is comfortable at roughly 60-75 characters. Before
 * this rule the LOOP page ran to about 110 on a desktop, which is where
 * readers start losing their place returning to the next line.
 *
 * Scoped to the theme's own classes, so WooCommerce pages that legitimately
 * use the full width are untouched.
 * -------------------------------------------------------------------- */
.loop-body,
.loop-small {
	max-width: 68ch;
	margin: 0 0 var(--loop-s-4);
}

.loop-micro { margin: 0 0 var(--loop-s-3); }

.loop-display { max-width: 18ch; margin: 0 0 var(--loop-s-5); }

.loop-h1,
.loop-h2 {
	max-width: 24ch;
	margin: var(--loop-s-8) 0 var(--loop-s-4);
}

.loop-h3 { margin: var(--loop-s-6) 0 var(--loop-s-3); }

/* The first heading on a page should not push the page down. */
.loop-display + .loop-body,
.loop-micro + .loop-display { margin-top: 0; }
.page-content > .loop-micro:first-child { margin-top: 0; }

/* The single call to action at the end of a prose page. */
.page-content a.button {
	display: inline-block;
	margin-top: var(--loop-s-5);
	padding: var(--loop-s-4) var(--loop-s-6);
	background: var(--loop-black);
	color: var(--loop-white);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--loop-black);
	transition: background var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}
.page-content a.button:hover {
	background: var(--loop-white);
	color: var(--loop-black);
}


/*
 * The coupon row. The brief says keep the field visible and usable, so it
 * is not hidden behind a toggle. On a phone the input and the button do not
 * fit side by side: measured 22 Aug 2026, "Apply coupon" reached 418px on a
 * 375px screen. They wrap instead.
 */
.woocommerce .cart .coupon,
.woocommerce-page .cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--loop-s-3);
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	float: none;
}

.woocommerce .cart .coupon .input-text,
.woocommerce-page .cart .coupon .input-text {
	flex: 1 1 12rem;
	min-width: 0;          /* without this a flex item refuses to shrink */
	width: auto;
	margin: 0;
}

.woocommerce .cart .coupon .button,
.woocommerce-page .cart .coupon .button {
	flex: 0 1 auto;
	max-width: 100%;
	white-space: nowrap;
	margin: 0;
}

@media (max-width: 480px) {
	.woocommerce .cart .coupon .input-text,
	.woocommerce .cart .coupon .button,
	.woocommerce-page .cart .coupon .input-text,
	.woocommerce-page .cart .coupon .button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Nothing in the cart or checkout may push the page sideways. */
.woocommerce .cart-collaterals,
.woocommerce .cart_totals,
.woocommerce-checkout .woocommerce,
.woocommerce .actions {
	max-width: 100%;
	box-sizing: border-box;
}

/* --- Footer ------------------------------------------------------------
 * LOOP's own footer, replacing the Hello Plus widget. Never carries the
 * registered address or the company name: both are private by owner
 * decision of 21 Aug 2026.
 * -------------------------------------------------------------------- */
.loop-footer {
	margin-top: var(--loop-s-9);
	background: var(--loop-white);
	border-top: var(--loop-border);
	font-family: var(--loop-font-text);
}

.loop-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--loop-s-7);
	max-width: var(--loop-maxw);
	margin: 0 auto;
	padding: var(--loop-s-8) var(--loop-s-5);
}

@media (min-width: 768px) {
	.loop-footer__inner {
		grid-template-columns: 1.2fr 2fr;
		align-items: start;
	}
}

.loop-footer__brand { display: flex; flex-direction: column; gap: var(--loop-s-4); }

.loop-footer__star { width: 40px; height: 40px; display: block; }

.loop-footer__line {
	margin: 0;
	max-width: 22ch;
	font-family: var(--loop-font-display);
	font-weight: 700;
	font-size: var(--loop-size-h3);
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}

.loop-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--loop-s-5);
}

.loop-footer .loop-footer__nav .loop-footer__heading {
	margin: 0 0 var(--loop-s-3);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

.loop-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.loop-footer__nav li { margin: 0 0 var(--loop-s-2); }

.loop-footer .loop-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--loop-size-small);
	font-weight: 500;
	color: var(--loop-black);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--loop-dur) var(--loop-ease);
}
.loop-footer .loop-footer__nav a:hover,
.loop-footer .loop-footer__nav a:focus-visible { border-bottom-color: var(--loop-black); }

.loop-footer__legal {
	border-top: var(--loop-border);
	padding: var(--loop-s-4) var(--loop-s-5);
	text-align: center;
}
.loop-footer__legal p {
	margin: 0;
	font-size: var(--loop-size-micro);
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

/* --- Size guide, printed by [loop_size_guide] --------------------------- */
.loop-size-guide { margin: var(--loop-s-6) 0; font-family: var(--loop-font-text); }

.loop-size-guide__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--loop-s-2);
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--loop-black);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.loop-size-guide__toggle:hover { color: var(--loop-accent); }

.loop-size-guide__panel { margin-top: var(--loop-s-4); }
.loop-size-guide__panel[hidden] { display: none; }

.loop-size-guide__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.loop-size-guide table {
	width: 100%;
	min-width: 320px;
	border-collapse: collapse;
	font-size: var(--loop-size-small);
}
.loop-size-guide caption {
	text-align: left;
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
	padding-bottom: var(--loop-s-2);
}
.loop-size-guide th,
.loop-size-guide td {
	padding: var(--loop-s-3);
	border-bottom: var(--loop-border);
	text-align: left;
}
.loop-size-guide thead th {
	font-weight: 600;
	font-size: var(--loop-size-micro);
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
	border-bottom-color: var(--loop-black);
}
.loop-size-guide tbody th { font-weight: 600; }
.loop-size-guide__note {
	margin-top: var(--loop-s-3);
	font-size: var(--loop-size-micro);
	color: var(--loop-muted);
	line-height: 1.5;
}

.loop-size-guide__garment + .loop-size-guide__garment {
	margin-top: var(--loop-s-7);
	padding-top: var(--loop-s-6);
	border-top: var(--loop-border);
}
.loop-size-guide__garment-name {
	margin: 0 0 var(--loop-s-2);
	color: var(--loop-black);
	font-weight: 600;
}
.loop-size-guide__more {
	margin-top: var(--loop-s-4);
}
.loop-size-guide__more > summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: var(--loop-size-micro);
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
	cursor: pointer;
}
.loop-size-guide__more > summary:hover { color: var(--loop-black); }

/* --- Utility type -------------------------------------------------------
 * Two classes the shortcodes lean on. Small, quiet, never competing with
 * the product name or the price.                                          */
.loop-label {
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}
.loop-legal {
	margin: var(--loop-s-4) 0 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	line-height: 1.6;
	color: var(--loop-muted);
}

/* --- Disclosure ---------------------------------------------------------
 * A row that opens. Used for the size guide and anything else that earns
 * its place on a product page without being allowed to push the buy
 * button below the fold. Full-width rule, 48px target, no chrome.         */
.loop-disclosure {
	border-top: var(--loop-border);
	font-family: var(--loop-font-text);
}
.loop-disclosure:last-of-type { border-bottom: var(--loop-border); }

.loop-disclosure__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--loop-s-3);
	min-height: 48px;
	padding: var(--loop-s-3) 0;
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--loop-black);
	cursor: pointer;
	list-style: none;
}
.loop-disclosure__summary::-webkit-details-marker { display: none; }
.loop-disclosure__summary::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 160ms ease;
}
.loop-disclosure[open] > .loop-disclosure__summary::after {
	transform: translateY(2px) rotate(225deg);
}
.loop-disclosure__summary:focus-visible {
	outline: 2px solid var(--loop-black);
	outline-offset: 2px;
}
.loop-disclosure__body { padding-bottom: var(--loop-s-5); }
.loop-disclosure__body > .loop-size-guide { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.loop-disclosure__summary::after { transition: none; }
}

/* ==========================================================================
   7. FORMS — every field the customer actually touches
   ========================================================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container--default .select2-selection--single {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);   /* 16px: never triggers iOS zoom-on-focus */
	line-height: 1.4;
	min-height: 48px;
	padding: var(--loop-s-3) var(--loop-s-4);
	border: var(--loop-border);
	border-radius: var(--loop-radius);
	background: var(--loop-white);
	color: var(--loop-black);
	width: 100%;
	box-shadow: none;
	transition: border-color var(--loop-dur) var(--loop-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--loop-accent);
}

.woocommerce form .form-row label {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 500;
	color: var(--loop-black);
	margin-bottom: var(--loop-s-2);
	display: block;
}

.woocommerce form .form-row .required {
	color: var(--loop-danger);
	text-decoration: none;
}

/* Errors must be legible, not just red. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--loop-danger);
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: 1.5;
	border-radius: var(--loop-radius);
}
.woocommerce-error   { border-top-color: var(--loop-danger); }
.woocommerce-message { border-top-color: var(--loop-success); }
.woocommerce-info    { border-top-color: var(--loop-accent); }

/* ==========================================================================
   8. PRODUCT PAGE — the column that has to sell
   ========================================================================== */

/* WooCommerce and Elementor both centre this column by default. Product
   information reads faster on a consistent left edge, and a left edge is
   what the rest of the site uses.                                          */
.loop-pdp__summary,
.loop-pdp__details { text-align: left; }

/* The whole buy column reads left, whatever Elementor's defaults say. */
.loop-pdp__buy,
.loop-pdp__buy .elementor-widget-container { text-align: left; }

/* --- Product name -------------------------------------------------------
 * The template used to hard-code 85px Inter in the old blue. Size now comes
 * from the fluid scale, so it never overflows a 390px screen and never
 * looks timid on a 27in monitor.                                          */
.loop-pdp__buy .product_title,
.woocommerce div.product .product_title {
	margin: 0;
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h1);
	font-weight: 700;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}

/* --- Price --------------------------------------------------------------
 * One weight heavier than the body, same family as the name. A price is
 * information, not decoration: no colour, no badge, no strike-through
 * theatre beyond WooCommerce's own del/ins.                               */
.loop-pdp__buy .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0;
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h3);
	font-weight: 700;
	letter-spacing: var(--loop-track-display);
	color: var(--loop-black);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	opacity: 1;
	color: var(--loop-500);
	font-weight: 400;
	margin-right: var(--loop-s-2);
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none; }

/* --- Variation form -----------------------------------------------------
 * WooCommerce lays the size selector out as a table. Left as a table it
 * puts the label in a narrow first cell and the select in a wide second,
 * which reads badly in a 44% column and worse on a phone.                 */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	/* WooCommerce colora la cella del valore di #FBFBFB: una fascia grigia
	   larga quanto la colonna dietro ai controlli della taglia, che non
	   significa niente e si nota. Resta il fondo della pagina. */
	background: none;
	text-align: left;
}
.woocommerce div.product form.cart .variations tr + tr { margin-top: var(--loop-s-4); }
.woocommerce div.product form.cart .variations label {
	display: block;
	margin-bottom: var(--loop-s-2);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}
.woocommerce div.product form.cart .variations select {
	width: 100%;
	min-height: 48px;
}
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--loop-s-2);
	font-size: var(--loop-size-micro);
	color: var(--loop-muted);
}
.woocommerce div.product form.cart .woocommerce-variation-price { margin-bottom: var(--loop-s-4); }

/* Buy button carries the column. Full width on a phone, generous on a
   desktop, never a 30px pill.                                             */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	width: 100%;
	border-radius: var(--loop-radius);
	/* L'altezza NON si dichiara qui: la fissa il blocco 15.1, che la tiene
	   uguale a quella del campo quantita' accanto. Prima erano tre
	   dichiarazioni della stessa proprieta' sullo stesso selettore in tre
	   punti del foglio (52px, --loop-h-primary, --loop-h-control); vinceva
	   l'ultima e le altre due erano solo rumore. Tolte al TASK 18. */
}
.woocommerce div.product form.cart div.quantity { margin-bottom: var(--loop-s-3); }

/* Trust strip sits directly under the buy button, quiet. */
.loop-pdp__buy .loop-trust {
	justify-content: flex-start;
	margin-top: var(--loop-s-2);
}

/* --- Gallery ------------------------------------------------------------
 * Gallery comes first in the markup, so a phone shows the garment before
 * a single word. On a desktop it takes the left half and the buy column
 * follows the scroll.                                                     */
.loop-pdp__media img { display: block; width: 100%; height: auto; }

@media (min-width: 1025px) {
	.loop-pdp__buy {
		position: sticky;
		top: var(--loop-s-6);
		align-self: flex-start;
	}
}

/* --- Section titles below the fold -------------------------------------- */
.loop-section-title .elementor-heading-title,
.loop-section-title h2 {
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h2);
	font-weight: 700;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}
.loop-pdp__related { border-top: var(--loop-border); }

.loop-pdp__summary {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	line-height: var(--loop-lh-body);
	color: var(--loop-700);
	max-width: 46ch;
}
.loop-pdp__summary p { margin: 0 0 var(--loop-s-3); }
.loop-pdp__summary p:last-child { margin-bottom: 0; }

.loop-pdp__details { margin-top: var(--loop-s-6); }

/* The disclosures stack into one continuous ruled list. Only the last one
   draws a closing rule, so there is never a doubled 2px line.              */
.loop-pdp__details > .loop-disclosure:last-child { border-bottom: var(--loop-border); }

.loop-prose {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: var(--loop-lh-body);
	color: var(--loop-700);
	max-width: 68ch;
}
.loop-prose p { margin: 0 0 var(--loop-s-3); }
.loop-prose p:last-child { margin-bottom: 0; }

/* --- Shipping, printed from the live WooCommerce zones ------------------- */
.loop-shipping__list { margin: 0; font-family: var(--loop-font-text); }

.loop-shipping__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--loop-s-2) var(--loop-s-4);
	justify-content: space-between;
	padding: var(--loop-s-3) 0;
	border-bottom: 1px dashed var(--loop-line);
	font-size: var(--loop-size-small);
}
.loop-shipping__row:last-child { border-bottom: 0; }
.loop-shipping__row dt {
	margin: 0;
	font-weight: 600;
	color: var(--loop-black);
}
.loop-shipping__row dd {
	margin: 0;
	color: var(--loop-muted);
	text-align: right;
}

/* ==========================================================================
   9. HOME — hero, and the photographs
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
 * One image, one line, one button. The height is capped in pixels as well
 * as in vh so a tall desktop monitor does not turn the first screen into a
 * poster with the products pushed out of reach.                           */
.loop-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(78vh, 720px);
	overflow: hidden;
	background: var(--loop-950);
	isolation: isolate;
}
.loop-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.loop-hero__img,
.loop-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	display: block;
}

/* Scrim. Measured, not guessed: over the darkest band the white type sits
   at better than 9:1, and the photograph is still legible above it.       */
.loop-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.88) 0%,
		rgba(10, 10, 10, 0.74) 22%,
		rgba(10, 10, 10, 0.40) 48%,
		rgba(10, 10, 10, 0.10) 74%,
		rgba(10, 10, 10, 0.20) 100%
	);
	pointer-events: none;
}

.loop-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--loop-maxw);
	margin: 0 auto;
	padding: var(--loop-s-8) var(--loop-s-6) var(--loop-s-7);
	color: var(--loop-white);
}

.loop-hero__eyebrow {
	margin: 0 0 var(--loop-s-3);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

/* Specificity note: Elementor's kit writes `.elementor-kit-1175 h1 { color }`
   (0,1,1). A single class cannot win that, so the hero type is addressed
   through its section as well. Same reason the CTA is scoped.            */
.loop-hero .loop-hero__type,
.loop-hero .loop-hero__type span,
.loop-hero__type {
	margin: 0 0 var(--loop-s-5);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-hero);
	font-weight: 800;
	line-height: var(--loop-lh-display);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-white);
}
.loop-hero .loop-hero__type span { display: block; margin: 0; }

.loop-hero .loop-hero__cta,
.loop-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--loop-s-7);
	border: 1px solid var(--loop-white);
	background: var(--loop-white);
	color: var(--loop-black);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}
.loop-hero__cta:hover,
.loop-hero__cta:focus-visible {
	background: transparent;
	color: var(--loop-white);
}
.loop-hero__cta:focus-visible {
	outline: 2px solid var(--loop-white);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.loop-hero { min-height: min(74vh, 560px); }
	.loop-hero__inner { padding: var(--loop-s-6) var(--loop-s-5) var(--loop-s-6); }
}

/* --- LOOP IN MOTION ------------------------------------------------------
 * Photographs only. No counts, no engagement figures, no invented
 * testimonials - there is no verified data to show, so none is shown.     */
.loop-motion__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--loop-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	.loop-motion__grid { grid-template-columns: repeat(4, 1fr); }
}
.loop-motion__item {
	margin: 0;
	overflow: hidden;
	background: var(--loop-100);
}

/* ==========================================================================
   TASK 31 — I due campi email restano a 16px anche sul telefono

   Misurato a 386px: il campo del Mystery Discount usciva a 18px mentre ogni
   altro controllo del sito — checkout, carrello, moduli affiliati — sta a
   16px. Non e' il campo a essere sbagliato: e' il kit Elementor che
   dichiara la tipografia dei campi dentro `@media (max-width: 767px)` su
   `.elementor-kit-1175 input:not([type="button"]):not([type="submit"])`,
   che vale (0,3,1). Le regole dei due blocchi valgono (0,2,1) e perdono
   solo li', sul telefono, dove la differenza si nota di piu'.

   Stessa medicina del TASK 23: la classe ripetuta porta a (0,4,1) e
   riprende la proprieta' senza !important e senza dipendere dall'ID del
   kit. Vale per entrambi i blocchi, perche' il difetto e' identico.
   ========================================================================== */

.loop-mystery .loop-mystery__input.loop-mystery__input.loop-mystery__input,
.loop-locked .loop-locked__input.loop-locked__input.loop-locked__input {
	font-size: var(--loop-size-body);
}

/* ==========================================================================
   TASK 08 — La foto non e' una scatola dentro un'altra scatola

   Il rettangolo era doppio: un pannello grigio dietro la foto, messo dal
   nostro CSS, e un filo di bordo #E7E7E7 intorno all'immagine, che arriva
   dal tema genitore (hello-commerce-woocommerce.css). Quattro sorgenti su
   cinque sono ritagli su fondo trasparente: nessuno dei due serviva a
   coprire qualcosa, insieme disegnavano una cornice intorno a un capo che
   non ne aveva bisogno. Tolti entrambi, insieme allo schiarimento al
   passaggio del mouse, che su fondo trasparente sbiadiva il capo sul
   bianco invece di segnalare qualcosa.

   Poi la scala. Misurato il capo dentro ogni file (pixel non trasparenti
   e non quasi-bianchi), altezza sul lato del fotogramma:

     Bandit Tee        80%   margini puliti su tutti i lati
     Stars Hoodie      92%   una manica arriva al bordo destro
     Stars Tracksuit   93%   margini puliti
     Stars Pants      100%   il capo esce dal fotogramma su tre lati
     Full Set         100%   fotografia piena, fondo bianco cotto dentro

   Ai primi tre si da' aria fino a portarli tutti all'80%: affiancati
   avevano taglie diverse senza che il prodotto c'entrasse.

   Agli ultimi due no. Sono gia' tagliati nel file sorgente: rimpicciolirli
   non recupera l'orlo mancante, aggiunge un secondo taglio e lascia una
   forma mozzata a mezz'aria. Restano a pieno fotogramma finche' non
   esistono ritagli rifatti. Vedi la nota per il proprietario: servono due
   sorgenti riesportate con circa il 10% di margine.
   ========================================================================== */

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	border: 0;
	padding: var(--loop-card-inset, 0);
	box-sizing: border-box;
}

.woocommerce ul.products li.product.post-287 { --loop-card-inset: 6.5%; } /* Stars Hoodie   92% -> 80% */
.woocommerce ul.products li.product.post-341 { --loop-card-inset: 7%; }   /* Stars Tracksuit 93% -> 80% */

/* Il Full Set e' una fotografia, non un ritaglio: porta dentro il suo
   fondo bianco (254) che sulla pagina (250) si vede come un rettangolo
   piu' chiaro. Moltiplicando, il bianco del file diventa esattamente il
   colore della pagina e il rettangolo sparisce; i capi, gia' scuri,
   cambiano sotto il mezzo percento. Non e' un ritocco del prodotto:
   e' il fondo dello scatto che smette di disegnare un bordo. */
.woocommerce ul.products li.product.post-485 a img { mix-blend-mode: multiply; }

/* Il passaggio del mouse non schiarisce piu' una fotografia su fondo
   trasparente. Si alza appena, come un capo che si solleva dal piano. */
.woocommerce ul.products li.product:hover a img {
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover a img { transform: none; }
	.woocommerce ul.products li.product a img { transition: none; }
}

/* ==========================================================================
   TASK 07 — Un solo ruolo per il titolo di pagina

   Il titolo arrivava da tre sorgenti diverse (widget Elementor, modello
   WooCommerce, contenuto della pagina) e usciva con tre scale diverse.
   Qui c'e' un ruolo solo. Non tocca l'eroe della homepage, il titolo
   display della pagina LOOP, ne' il nome del prodotto: quelli hanno un
   ruolo proprio, dichiarato altrove.
   ========================================================================== */

/* La classe e' ripetuta e i selettori coprono tutte e tre le sorgenti,
   perche' il titolo arriva da posti diversi con specificita' diverse:
   il widget Elementor stampa `h1.elementor-heading-title` dentro
   `.e-con-inner` (quindi fuori da `.page-content`), il modello WooCommerce
   stampa un `h1` nudo, il contenuto delle pagine usa `.loop-page__title`.
   Misurato prima: 32px/8px sul carrello, 40px alla cassa, 32,46px su
   Partners, 24,62px sulle legali. Quattro scale per lo stesso ruolo.

   La classe compare tre volte perche' Elementor genera per ogni widget una
   regola del tipo
   `.elementor-1200 .elementor-element.elementor-element-e366ae9 .elementor-heading-title`,
   che vale (0,4,0). Due classi davano (0,3,1) e perdevano sul conteggio
   delle classi; tre danno (0,4,1) e vincono. */
.loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
.loop-utility-page.loop-utility-page.loop-utility-page .site-main h1,
.loop-utility-page.loop-utility-page.loop-utility-page .page-content h1,
.loop-legal-page.loop-legal-page .page-content h1,
.loop-page h1.loop-page__title,
h1.loop-page__title.loop-page__title {
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h2);
	font-weight: 700;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	margin: 0 0 var(--loop-s-5);
	max-width: 24ch;
	overflow-wrap: anywhere;
	color: var(--loop-black);
}

/* ==========================================================================
   TASK 05 — Note del modulo affiliati
   ========================================================================== */

.loop-field-note {
	display: block;
	margin-top: calc(var(--loop-s-2) * -1 + 6px);
	margin-bottom: var(--loop-s-3);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	line-height: 1.45;
	color: var(--loop-muted);
}
.loop-affiliate-privacy {
	margin-top: var(--loop-s-4);
}
.loop-affiliate-privacy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   TASK 04 — La riga del metodo di spedizione

   Struttura voluta: pallino, etichetta, prezzo sulla stessa riga; la
   spiegazione, quando serve, sotto e in tono minore. Prima l'istruzione
   stava dentro il titolo del metodo e su 390px mandava la riga a capo
   cinque volte, sfasando il pallino rispetto al testo.
   ========================================================================== */

.woocommerce ul#shipping_method,
ul#shipping_method {
	display: grid;
	gap: var(--loop-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul#shipping_method li,
ul#shipping_method li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: var(--loop-s-2) var(--loop-s-3);
	margin: 0;
	padding: 0;
	text-indent: 0;
}
ul#shipping_method li input[type="radio"] {
	grid-column: 1;
	align-self: center;
	margin: 0;
}
ul#shipping_method li label {
	grid-column: 2;
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: 1.4;
	color: var(--loop-ink);
}
ul#shipping_method li label .woocommerce-Price-amount {
	grid-column: 3;
	white-space: nowrap;
}
/* La spiegazione va sotto l'etichetta, non accanto al pallino. */
.loop-ship__note {
	grid-column: 2 / -1;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	line-height: 1.45;
	color: var(--loop-muted);
}

/* ==========================================================================
   TASK 26 — LOOP IN MOTION diventa una struttura, non una griglia

   Otto quadrati identici in fila leggono come un contatto fotografico: la
   sezione ha lo stesso peso di un widget di testimonianze, che e' proprio
   cio' che il capitolato non vuole. Servono due cose: una gerarchia dentro
   il gruppo, e la possibilita' di dividere per luogo senza rifare niente.

   La gerarchia: il primo scatto di ogni luogo occupa due colonne per due
   righe. Non e' decorazione — e' il modo in cui una pagina dice «questa e'
   la fotografia principale, le altre la accompagnano». Vale quando i conti
   tornano: quattro celle per lo scatto grande piu' le altre devono
   riempire righe intere, cioe' 5 o 9 fotografie per luogo. Con un numero
   diverso il PHP non assegna la classe e la griglia resta regolare, perche'
   una riga finale mezza vuota legge peggio di una griglia ordinata.

   La divisione per luogo: ogni gruppo e' una `section` con la sua etichetta.
   Le fotografie definitive le sceglie il proprietario (MILAN, BARCELONA,
   TORONTO, OTTAWA): qui c'e' solo il contenitore che le aspetta.

   Nessun numero, nessuna didascalia, nessuna prova sociale inventata: la
   sezione mostra fotografie e tace, come prima.
   ========================================================================== */

.loop-motion__place + .loop-motion__place {
	margin-top: var(--loop-section);
}

.loop-motion__place-head {
	display: flex;
	align-items: baseline;
	gap: var(--loop-s-3);
	margin-bottom: var(--loop-s-4);
}

/* Il nome del luogo non compete con il titolo della sezione: sta sulla
   scala minore, in maiuscoletto spaziato, come un'indicazione di didascalia
   e non come un secondo titolo.

   La classe e' ripetuta perche' il kit Elementor governa gli `h3` con
   `.elementor-kit-1175 h3`, che vale (0,1,1). Una classe sola vale (0,1,0)
   e perde: misurato, l'etichetta usciva 22px/400 nera invece di
   12px/600 maiuscola. Due classi valgono (0,2,0) e vincono, senza
   !important e senza legarsi all'ID del kit. */
.loop-motion__city.loop-motion__city {
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}
/* Una riga sottile che porta il nome fino al bordo della colonna: da' alla
   sezione un ritmo editoriale al posto dello stacco fra due blocchi. */
.loop-motion__place-head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--loop-300);
}

/* Lo scatto principale occupa due colonne per due righe a ogni larghezza.
   Su telefono, dove le colonne sono due, questo significa a tutta larghezza:
   che e' il modo giusto di aprire un gruppo su uno schermo stretto, e in piu'
   e' cio' che fa quadrare i conti. Con la regola valida solo sopra i 900px,
   su telefono cinque immagini in due colonne lasciavano una cella vuota in
   fondo — misurato, non ipotizzato. */
.loop-motion__item--lead {
	grid-column: span 2;
	grid-row: span 2;
}
/* Lo scatto principale copre due righe: l'immagine riempie la cella invece
   di imporre il proprio 4:5, altrimenti sborderebbe. */
.loop-motion__item--lead .loop-motion__img {
	height: 100%;
}
.loop-motion__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 420ms var(--loop-ease);
}
.loop-motion__item:hover .loop-motion__img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.loop-motion__img { transition: none; }
	.loop-motion__item:hover .loop-motion__img { transform: none; }
}

/* --- GET LOCKED IN -------------------------------------------------------
 * The one inverted block on the page. LOOP has no accent colour to lean on,
 * so emphasis is carried by weight and by flipping the ground to black.   */
.loop-locked {
	background: var(--loop-ink);
	color: var(--loop-white);
}
.loop-locked__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--loop-s-9) var(--loop-s-6);
	text-align: center;
}
@media (max-width: 767px) {
	.loop-locked__inner { padding: var(--loop-s-8) var(--loop-s-5); }
}

.loop-locked .loop-locked__title,
.loop-locked__title {
	margin: 0 0 var(--loop-s-3);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h2);
	font-weight: 800;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-white);
}
.loop-locked__text {
	margin: 0 auto var(--loop-s-6);
	max-width: 44ch;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.loop-locked__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--loop-s-2);
	justify-content: center;
}
.loop-locked .loop-locked__input,
.loop-locked input.loop-locked__input {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 52px;
	padding: 0 var(--loop-s-4);
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: var(--loop-radius) !important;
	background: transparent !important;
	color: var(--loop-white) !important;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
}
.loop-locked__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.loop-locked__input:focus-visible {
	outline: 2px solid var(--loop-white);
	outline-offset: 2px;
	border-color: transparent;
}

.loop-locked .loop-locked__submit,
.loop-locked button.loop-locked__submit {
	flex: 0 0 auto;
	min-height: 52px;
	padding: 0 var(--loop-s-6);
	border: 1px solid var(--loop-white);
	border-radius: var(--loop-radius);
	background: var(--loop-white);
	color: var(--loop-black);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}
.loop-locked .loop-locked__submit:hover:not(:disabled) { background: transparent; color: var(--loop-white); }
.loop-locked .loop-locked__submit:disabled { opacity: 0.55; cursor: wait; }

.loop-locked__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--loop-s-3);
	max-width: 46ch;
	margin: var(--loop-s-4) auto 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	line-height: 1.5;
	text-align: left;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
}
.loop-locked__consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: #FFFFFF;
}

/* Honeypot. Off-screen rather than display:none - some bots skip hidden
   fields, few skip ones that are merely somewhere else.                   */
.loop-locked__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.loop-locked__status {
	min-height: 1.5em;
	margin: var(--loop-s-4) 0 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	color: rgba(255, 255, 255, 0.9);
}
.is-error .loop-locked__status { color: #FFB4A8; }
.is-done  .loop-locked__status { color: #B9F5C8; }

.loop-locked__legal {
	margin-top: var(--loop-s-5);
	color: rgba(255, 255, 255, 0.5);
}

/* --- Affiliate teaser ----------------------------------------------------
 * Quiet. It is the last thing on the page and it is not what most people
 * came for, so it asks once and gets out of the way.                      */
.loop-teaser {
	border-top: var(--loop-border);
	background: var(--loop-050);
}
.loop-teaser__inner {
	max-width: 680px;
	margin: 0 auto;
	padding: var(--loop-s-8) var(--loop-s-6);
	text-align: center;
}
.loop-teaser .loop-teaser__title,
.loop-teaser__title {
	margin: 0 0 var(--loop-s-2);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h3);
	font-weight: 700;
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}
.loop-teaser__text {
	margin: 0 auto var(--loop-s-5);
	max-width: 46ch;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: 1.6;
	color: var(--loop-muted);
}
.loop-teaser .loop-teaser__cta,
.loop-teaser a.loop-teaser__cta {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--loop-s-6);
	border: 1px solid var(--loop-black);
	background: transparent;
	color: var(--loop-black);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}
.loop-teaser .loop-teaser__cta:hover { background: var(--loop-black); color: var(--loop-white); }

/* ==========================================================================
   CONTENT PAGES — the partner programme, the policies, the LOOP page
   ========================================================================== */

.loop-page {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--loop-s-8) var(--loop-s-5) var(--loop-s-9);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	line-height: var(--loop-lh-body);
	color: var(--loop-700);
}
.loop-page .loop-page__title,
.loop-page__title {
	margin: 0 0 var(--loop-s-5);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h1);
	font-weight: 800;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}
.loop-page .loop-lead,
.loop-lead {
	margin: 0 0 var(--loop-s-7);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--loop-800);
}
.loop-page h2 {
	margin: var(--loop-s-8) 0 var(--loop-s-4);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h3);
	font-weight: 700;
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}
.loop-page p { margin: 0 0 var(--loop-s-4); }
.loop-page ul,
.loop-page ol { margin: 0 0 var(--loop-s-4); padding-left: 1.25em; }
.loop-page li { margin-bottom: var(--loop-s-2); }
.loop-page strong { color: var(--loop-black); font-weight: 600; }
.loop-page a { color: var(--loop-black); text-underline-offset: 3px; }

/* Two routes, side by side on a desktop and stacked on a phone. */
.loop-routes {
	display: grid;
	gap: var(--loop-s-5);
	margin-bottom: var(--loop-s-7);
}
@media (min-width: 720px) {
	.loop-routes { grid-template-columns: 1fr 1fr; }
}
.loop-route {
	padding: var(--loop-s-5);
	border: var(--loop-border);
}
.loop-page .loop-route h2 {
	margin-top: 0;
	font-size: var(--loop-size-body);
	letter-spacing: 0.06em;
}
.loop-route p:last-child { margin-bottom: 0; }

.loop-steps li,
.loop-rules li { padding-left: 0.25em; }

/* --- Moduli SliceWP ----------------------------------------------------
 *
 * Qui restavano etichette, geometria dei campi e altezza dell'area di
 * testo, tutto agganciato a `.loop-page`: una classe che sta su Partners
 * e non sulla pagina affiliati. Con (0,3,1) questo blocco batteva quello
 * di TASK 23, che vale (0,1,1): il risultato misurato era un'area di
 * testo alta 77px su Partners contro i 156px voluti, e due pagine sorelle
 * con due moduli diversi.
 *
 * Le regole che descrivono il modulo vivono adesso in un posto solo, nel
 * blocco TASK 23, e sono scritte sul componente. Qui resta la spaziatura
 * fra modulo e testo della pagina, che dipende davvero dal contesto.
 * -------------------------------------------------------------------- */

.loop-page .slicewp-form { margin-top: var(--loop-s-5); }

/* ==========================================================================
   MYSTERY DISCOUNT — one draw, no theatre
   ========================================================================== */

.loop-mystery {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--loop-s-4);
}
.loop-mystery[hidden] { display: none; }

.loop-mystery__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.72);
}

.loop-mystery__panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: var(--loop-s-7) var(--loop-s-6) var(--loop-s-6);
	background: var(--loop-ink);
	color: var(--loop-white);
	text-align: center;
	animation: loop-mystery-in 220ms var(--loop-ease) both;
}
@keyframes loop-mystery-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.loop-mystery__panel { animation: none; }
}

.loop-mystery .loop-mystery__x,
.loop-mystery button.loop-mystery__x {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.loop-mystery .loop-mystery__x:hover { color: var(--loop-white); }
.loop-mystery__x:focus-visible { outline: 2px solid var(--loop-white); outline-offset: -4px; }

.loop-mystery .loop-label { color: rgba(255, 255, 255, 0.55); }

.loop-mystery .loop-mystery__title,
.loop-mystery__title {
	margin: var(--loop-s-3) 0 var(--loop-s-3);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h3);
	font-weight: 800;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-white);
}
.loop-mystery__text {
	margin: 0 auto var(--loop-s-5);
	max-width: 34ch;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/* !important is deliberate. Elementor's kit generates
   `.elementor-kit-1175 input:not([type="button"]):not([type="submit"])...`,
   a selector no reasonable component selector can outrank, and it paints a
   near-black border. On a black panel that is an invisible field. */
.loop-mystery .loop-mystery__input,
.loop-mystery input.loop-mystery__input {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--loop-s-4);
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: var(--loop-radius) !important;
	background: transparent !important;
	color: var(--loop-white) !important;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	text-align: center;
}
.loop-mystery__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.loop-mystery__input:focus-visible { outline: 2px solid var(--loop-white); outline-offset: 2px; border-color: transparent; }

.loop-mystery__actions {
	display: flex;
	flex-direction: column;
	gap: var(--loop-s-2);
	margin-top: var(--loop-s-3);
}
.loop-mystery .loop-mystery__unlock,
.loop-mystery button.loop-mystery__unlock,
.loop-mystery a.loop-mystery__unlock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--loop-s-6);
	border: 1px solid var(--loop-white);
	border-radius: var(--loop-radius);
	background: var(--loop-white);
	color: var(--loop-black);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.loop-mystery .loop-mystery__unlock:disabled { opacity: 0.55; cursor: wait; }
.loop-mystery .loop-mystery__skip,
.loop-mystery button.loop-mystery__skip {
	min-height: 44px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.loop-mystery .loop-mystery__skip:hover { color: var(--loop-white); }

.loop-mystery__status {
	min-height: 1.4em;
	margin: var(--loop-s-3) 0 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	color: rgba(255, 255, 255, 0.85);
}
.loop-mystery__legal { margin-top: var(--loop-s-5); color: rgba(255, 255, 255, 0.45); }

.loop-mystery__percent {
	margin: var(--loop-s-4) 0 var(--loop-s-3);
	font-family: var(--loop-font-display);
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-white);
}
.loop-mystery__code {
	margin: 0 0 var(--loop-s-4);
	padding: var(--loop-s-4);
	border: 1px solid rgba(255, 255, 255, 0.4);
	font-family: var(--loop-font-text);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--loop-white);
}

/* ==========================================================================
   CONSENT — one line, two buttons, equal weight
   ========================================================================== */

.loop-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	background: var(--loop-ink);
	color: var(--loop-white);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.loop-consent[hidden] { display: none; }

.loop-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--loop-s-4);
	max-width: var(--loop-maxw);
	margin: 0 auto;
	padding: var(--loop-s-4) var(--loop-s-5);
}
.loop-consent__text {
	flex: 1 1 320px;
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}
.loop-consent__text a { color: var(--loop-white); text-underline-offset: 3px; }

.loop-consent__actions {
	display: flex;
	gap: var(--loop-s-2);
	flex: 0 0 auto;
}

/* Both buttons are the same size and the same shape. Refusing must cost the
   same as agreeing. */
.loop-consent .loop-consent__btn,
.loop-consent button.loop-consent__btn {
	min-height: 44px;
	padding: 0 var(--loop-s-5);
	border: 1px solid var(--loop-white);
	border-radius: var(--loop-radius);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.loop-consent .loop-consent__btn--no,
.loop-consent button.loop-consent__btn--no {
	background: transparent;
	color: var(--loop-white);
}
.loop-consent .loop-consent__btn--yes,
.loop-consent button.loop-consent__btn--yes {
	background: var(--loop-white);
	color: var(--loop-black);
}
.loop-consent .loop-consent__btn:focus-visible {
	outline: 2px solid var(--loop-white);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.loop-consent__inner { padding: var(--loop-s-4); }
	.loop-consent__actions { width: 100%; }
	.loop-consent .loop-consent__btn { flex: 1 1 0; padding: 0 var(--loop-s-3); }
}

/* --- Photographs inside prose -------------------------------------------- */
.loop-figure {
	margin: var(--loop-s-7) 0;
}
.loop-figure__img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--loop-100);
}
.loop-figure--wide .loop-figure__img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.loop-figure--square .loop-figure__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.loop-figure figcaption { margin-top: var(--loop-s-2); }

/* --- Announcement bar ----------------------------------------------------
 * Static, not fixed: it says its piece and then gets out of the way of the
 * product. No layout shift, no JS bundle, no third-party widget.          */
.loop-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--loop-s-3);
	position: relative;
	padding: var(--loop-s-3) var(--loop-s-6);
	background: var(--loop-ink);
	color: var(--loop-white);
	text-align: center;
}
.loop-announce[hidden] { display: none; }
.loop-announce__text {
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
}
.loop-announce .loop-announce__close,
.loop-announce button.loop-announce__close {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.loop-announce .loop-announce__close:hover { color: var(--loop-white); }
.loop-announce .loop-announce__close:focus-visible {
	outline: 2px solid var(--loop-white);
	outline-offset: -4px;
}
@media (max-width: 600px) {
	.loop-announce { padding-right: 48px; padding-left: var(--loop-s-4); }
	.loop-announce__text { font-size: 12px; letter-spacing: 0.06em; }
}

/* --- Home section rhythm ------------------------------------------------- */
.loop-home-section { padding-block: var(--loop-s-9); }
@media (max-width: 767px) {
	.loop-home-section { padding-block: var(--loop-s-8); }
}

/* ==========================================================================
   10. CART AND CHECKOUT — clarity over decoration
   ========================================================================== */

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	border-radius: var(--loop-radius);
	border-color: var(--loop-line);
}
.woocommerce table.shop_table th {
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

/* The bundle pick list written by loop_bundle_cart_item_data(). */
.woocommerce .variation dt,
.woocommerce .variation dd {
	font-size: var(--loop-size-micro);
	line-height: 1.5;
	color: var(--loop-muted);
	margin: 0;
}
.woocommerce .variation dt { font-weight: 600; }

.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	font-family: var(--loop-font-display);
	font-weight: 700;
	font-size: var(--loop-size-h3);
	letter-spacing: var(--loop-track-display);
}

/* Coupon field stays visible and usable — never hidden to force full price. */
.woocommerce form.checkout_coupon,
.woocommerce .coupon { display: block; }

/* ==========================================================================
   TOUCH — measured at 390px, on the pages that decide the sale
   ========================================================================== */

/* The Stripe gateway injects a full-width input purely to sample computed
   styles. It is invisible but it stays in flow, and at 390px it pushed the
   checkout 18px wider than the screen. Taking it out of flow keeps Stripe's
   measurements intact and gives the page its width back. */
#wc-stripe-hidden-style-input {
	position: fixed !important;
	top: -9999px !important;
	left: 0 !important;
	pointer-events: none !important;
}

/* Remove-from-cart was a 20px target on the page where a mis-tap costs an
   order. */
.woocommerce a.remove,
.woocommerce-page a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	font-size: 20px;
	line-height: 1;
	border-radius: var(--loop-radius);
}

/* Radios and checkboxes ship at 13px. The label is clickable, but the
   control itself has to be findable with a thumb. */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="radio"],
.woocommerce-page input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--loop-black);
	vertical-align: middle;
}

.woocommerce ul#shipping_method li,
.woocommerce-checkout #shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--loop-s-3);
	min-height: 44px;
	margin: 0;
}
.woocommerce ul#shipping_method li label,
.woocommerce-checkout #shipping_method li label {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	cursor: pointer;
}

.woocommerce .shipping-calculator-button,
.woocommerce-page .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.woocommerce-checkout .wc_payment_methods > li > label,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	align-items: center;
	gap: var(--loop-s-3);
	min-height: 44px;
	cursor: pointer;
}

/* Footer navigation was 32px per row - fixed at the source, above. */

.loop-locked .loop-locked__consent input {
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   11. PRINT — an order confirmation someone may actually print
   ========================================================================== */

@media print {
	.loop-trust,
	.loop-size-guide__toggle,
	header, footer, nav { display: none !important; }
	body { background: #fff; color: #000; }
}

/* =======================================================================
 * 21. Controllo qualità del 22 agosto 2026
 *
 * Misurato sul sito vivo, non giudicato a occhio. Ogni regola qui sotto
 * chiude una differenza fra quello che il sistema dice e quello che la
 * pagina faceva davvero.
 * ==================================================================== */

/* --- 21.1 L'intestazione dello shop era l'unica pagina non firmata -----
 *
 * Misurato: il titolo "Shop" usciva in Inter 40px peso 500, minuscolo,
 * mentre ogni altro titolo del sito è Archivo 700 maiuscolo con tracking
 * negativo. Il breadcrumb usciva in grigio rgb(173,173,173): 2,1:1 sul
 * fondo chiaro, sotto qualunque soglia. Il conteggio risultati e il menu
 * di ordinamento erano quelli di serie di WooCommerce.
 *
 * È la prima pagina commerciale che un visitatore apre dal menu.
 * -------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 var(--loop-s-5);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 500;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}
.woocommerce .woocommerce-breadcrumb a {
	/* Il kit Elementor imposta font-size e text-transform direttamente
	   su `a`, e un valore esplicito batte un valore ereditato: senza
	   questi tre `inherit` il link del breadcrumb restava 16px minuscolo
	   dentro una riga di micro-testo maiuscolo. */
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--loop-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--loop-dur) var(--loop-ease),
	            border-color var(--loop-dur) var(--loop-ease);
}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible {
	color: var(--loop-black);
	border-bottom-color: currentColor;
}

.woocommerce .woocommerce-products-header {
	padding-top: var(--loop-s-6);
}
.woocommerce .woocommerce-products-header__title,
.woocommerce h1.page-title {
	margin: 0 0 var(--loop-s-5);
	font-family: var(--loop-font-display);
	font-size: var(--loop-size-h1);
	font-weight: 700;
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}

.woocommerce .woocommerce-result-count {
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 500;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select.orderby {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 500;
	color: var(--loop-black);
	background-color: transparent;
	border: var(--loop-border);
	border-radius: var(--loop-radius);
	padding: var(--loop-s-3) var(--loop-s-6) var(--loop-s-3) var(--loop-s-4);
}

/* --- 21.2 Il nome del prodotto galleggiava lontano dal prezzo ----------
 *
 * Misurato: il titolo della card usciva con line-height 34px su un corpo
 * di 14px, cioè 2,43. Dieci pixel di aria sopra e sotto una riga sola,
 * sommati al margine: nome e prezzo smettevano di leggersi come una cosa
 * unica. Il valore veniva dal kit Elementor, che imposta l'interlinea di
 * tutti gli h2.
 * -------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	line-height: 1.3;
}

/* --- 21.3 Una foto non quadrata avrebbe rotto la griglia ---------------
 *
 * Le card oggi combaciano perché tutte le sorgenti sono quadrate: non
 * perché qualcosa lo imponga. L'immagine aveva height:auto e object-fit
 * fill, quindi la prima foto verticale caricata avrebbe prodotto card di
 * altezze diverse, e una foto di proporzioni diverse sarebbe stata
 * stirata. Su un capo di abbigliamento una foto stirata è un errore che
 * si vede.
 *
 * Aggiornato al TASK 08: il riquadro resta quadrato, ma il capo dentro
 * viene contenuto, non tagliato. Le cinque sorgenti sono ritagli su
 * fondo trasparente: ritagliarle avrebbe amputato una manica o un
 * orlo per far quadrare una foto che è già quadrata.
 * -------------------------------------------------------------------- */

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* --- 21.4 La lente di ingrandimento era un'emoji -----------------------
 *
 * WooCommerce stampa <span aria-hidden="true">🔍</span> dentro il link
 * dello zoom. Su iOS esce la lente blu di Apple, su Windows un'altra, su
 * Android un'altra ancora: tre marchi diversi sulla stessa pagina. Il
 * glifo viene nascosto e sostituito da un disegno che non cambia da un
 * sistema all'altro. Il nome accessibile del link resta quello.
 * -------------------------------------------------------------------- */

.woocommerce-product-gallery__trigger,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	/* Elementor Pro dichiara questo pulsante con
	   `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`:
	   una classe sola non lo raggiunge. Verificato il 22 agosto 2026. */
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	color: var(--loop-black);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	width: 22px;
	height: 22px;
	display: block;
}
.woocommerce-product-gallery__trigger::after,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23322A2D' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 21.5 I bottoni di WooCommerce non avevano il tracking del marchio -
 *
 * Misurato: "Select options" usciva con letter-spacing 0, mentre "Shop
 * collection" e ogni altro bottone del tema usano 0.08em. Stessa
 * dimensione, stesso peso, spaziatura diversa: si vede.
 *
 * Serve !important, e non per pigrizia. Il kit Elementor dichiara
 * `letter-spacing: var(--e-global-typography-text-letter-spacing)` su ogni
 * `a`, e quella variabile è vuota. Una variabile vuota rende la
 * dichiarazione "invalid at computed-value time": vince comunque la
 * cascata e poi collassa a `normal`, quindi alzare la specificità non
 * serve a niente. Verificato il 22 agosto 2026 provando la stessa regola
 * a specificità crescente: `normal` in tutti i casi, 0.08em solo con
 * !important. È lo stesso inciampo già registrato per gli input.
 * -------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit {
	letter-spacing: 0.08em !important;
}

/* --- 21.6 Valori fuori scala ------------------------------------------
 *
 * La tabella delle varianti arrivava con margin-bottom 14,4px e la
 * tabella della guida taglie con 15px. Non si notano da soli; si notano
 * tutti insieme, come ritmo che non torna mai.
 * -------------------------------------------------------------------- */

.woocommerce div.product form.cart table.variations {
	margin-bottom: var(--loop-s-4);
}
.loop-size-guide table,
.loop-size-guide__table {
	margin-bottom: var(--loop-s-4);
}

/* --- 21.7 Il pulsante che non dice cosa manca --------------------------
 *
 * Finché non si sceglie una taglia il pulsante resta spento e non spiega
 * perché. L'etichetta viene sostituita da JavaScript; questa regola serve
 * solo a rendere lo stato leggibile invece che semplicemente pallido.
 * -------------------------------------------------------------------- */

.woocommerce div.product form.cart .button.wc-variation-selection-needed {
	opacity: 1;
	background: transparent;
	color: var(--loop-muted);
	border: var(--loop-border);
}

/* --- 21.8 Le ultime interlinee e spaziature ereditate -------------------
 *
 * Il kit Elementor imposta line-height 24px sul corpo. Su un testo da
 * 14px diventa 1,71: giusto per un paragrafo lungo, troppo largo per
 * un'etichetta di una riga sola. Qui sotto le tre superfici dove si
 * vedeva: i titoli degli accordion, la tabella delle spedizioni e le
 * celle del carrello.
 * -------------------------------------------------------------------- */

.loop-disclosure__summary {
	line-height: 1.4;
}
.loop-shipping__row dt,
.loop-shipping__row dd {
	line-height: 1.5;
}

/* Il blocco quantità + pulsante aveva 14px di distanza fra i due
   elementi, l'unico valore visibile fuori scala della scheda prodotto. */
.loop-pdp__buy,
.loop-pdp__buy > .e-con-inner {
	gap: var(--loop-s-4);
}

/* Le celle del carrello arrivano con 18px sopra e sotto invece di 16.
   Provato a riportarle in scala: WooCommerce vince la cascata con una
   regola che nemmeno un selettore più specifico supera, quindi servirebbe
   !important. Per due pixel che nessuno vede non vale sporcare il foglio
   di stile: il valore resta 18px, uguale su tutte le celle, e questa nota
   evita che qualcuno ci riprovi. Verificato il 22 agosto 2026. */

/* --- 21.9 Il consenso era scritto in nero su nero -----------------------
 *
 * Il difetto più serio trovato nel controllo del 22 agosto 2026. Nel
 * blocco GET LOCKED IN, che ha fondo nero, l'etichetta della casella di
 * consenso usciva in rgb(10,10,10): rapporto di contrasto 1,00. Non era
 * poco leggibile, era invisibile. A schermo si vedeva una casella bianca
 * sospesa nel vuoto e nessun testo accanto.
 *
 * Chiedere di spuntare una casella di cui non si può leggere il testo non
 * è solo un problema di leggibilità: è un consenso che non è stato
 * mostrato.
 *
 * `.loop-locked__consent` è una sola classe, e perdeva contro la regola
 * che il kit Elementor applica a `label`. Qui il selettore sale di
 * specificità e copre anche gli elementi interni, perché il testo sta
 * dentro uno span.
 * -------------------------------------------------------------------- */

.loop-locked label.loop-locked__consent,
.loop-locked label.loop-locked__consent span,
.loop-locked label.loop-locked__consent a {
	color: rgba(255, 255, 255, 0.78);
}
.loop-locked label.loop-locked__consent a {
	color: var(--loop-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.loop-locked label.loop-locked__consent {
	justify-content: flex-start;
}

/* =======================================================================
 * FASE 4.5A · TASK 01 — SISTEMA DI GEOMETRIA
 *
 * Stato di partenza misurato il 22 agosto 2026 su /product/hoodie/:
 * border-radius 0px su TUTTO — bottoni, input, select, immagini,
 * contenitori, badge, accordion, tabelle. Il sito leggeva come un
 * rettangolo dentro un rettangolo dentro un rettangolo.
 *
 * Il dogma «LOOP è quadrato, raggio 0» non è più approvato. L'obiettivo
 * non è ammorbidire il marchio: è dargli una geometria controllata invece
 * di una sola regola applicata ovunque senza distinzione.
 *
 * Quattro raggi, ognuno con un mestiere:
 *
 *   control  8px   ciò che si tocca: bottoni, input, select, textarea
 *   media   10px   ciò che si guarda: foto prodotto, immagini editoriali
 *   panel   12px   ciò che contiene: modali, avvisi, superfici ampie
 *   pill   999px   solo dove la forma è davvero una pastiglia
 *
 * La card prodotto NON entra dentro un'altra scatola arrotondata: si
 * arrotonda la fotografia, non il contenitore. L'hero e le immagini a
 * tutta larghezza restano a raggio zero, perché toccano il bordo dello
 * schermo e un angolo tondo lì sarebbe un errore, non uno stile.
 * ==================================================================== */

:root {
	--loop-radius-control: 8px;
	--loop-radius-media:   10px;
	--loop-radius-panel:   12px;

	/* Il token storico continua a esistere e ora punta al raggio dei
	   controlli: le quindici regole che lo usavano si allineano da sole. */
	--loop-radius: var(--loop-radius-control);

	/* Altezze di riferimento dei controlli. Misurate prima: select 50px,
	   quantità 43px, CTA 55px, bottone secondario 47px. Quasi in scala
	   già, ma senza un token dichiarato che le tenesse insieme. */
	--loop-h-primary:   54px;
	--loop-h-control:   52px;
	--loop-h-secondary: 46px;
	--loop-h-tap:       44px;

	/* Due trattamenti di bordo, non sei. Prima convivevano rgb(0,0,0) sul
	   select e rgb(10,10,10) sugli altri controlli: due neri diversi
	   nella stessa riga. */
	--loop-border-strong: 1px solid var(--loop-800);
}

/* --- 01.1 Controlli --------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.loop-hero__cta,
.loop-locked button.loop-locked__submit,
.loop-mystery a.loop-mystery__unlock,
.loop-consent button.loop-consent__btn {
	border-radius: var(--loop-radius-control);
}

.loop-locked button.loop-locked__submit,
.loop-mystery a.loop-mystery__unlock {
	min-height: var(--loop-h-primary);
}

.woocommerce a.button,
.woocommerce ul.products li.product .button {
	min-height: var(--loop-h-secondary);
}

/* I moduli SliceWP non compaiono piu' in questi elenchi: il raggio e
   l'altezza dei loro campi li dichiara il blocco TASK 23, sul componente e
   non sul contenitore. Tenerli anche qui significava due sorgenti per la
   stessa proprieta', che e' il difetto che il TASK 33 deve togliere. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce div.product form.cart select,
.woocommerce .quantity input.qty,
.loop-locked input.loop-locked__input,
.loop-mystery input.loop-mystery__input,
.woocommerce .woocommerce-ordering select.orderby,
#coupon_code,
input#coupon_code {
	border-radius: var(--loop-radius-control);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce div.product form.cart select,
.woocommerce .quantity input.qty,
.loop-locked input.loop-locked__input,
.loop-mystery input.loop-mystery__input,
#coupon_code,
input#coupon_code {
	min-height: var(--loop-h-control);
}

/* Il bordo del select arrivava nero puro mentre tutto il resto usava
   rgb(10,10,10). Un nero solo. */
.woocommerce div.product form.cart select,
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select.orderby {
	border: var(--loop-border-strong);
}

/* Aree di tocco: nessun controllo interattivo sotto i 44px. */
.woocommerce a.remove,
.loop-announce__close,
.woocommerce-product-gallery__trigger {
	min-width: var(--loop-h-tap);
	min-height: var(--loop-h-tap);
}

/* La × di rimozione è tonda perché è un pallino, non un rettangolo. */
.woocommerce a.remove,
.woocommerce-page a.remove {
	border-radius: var(--loop-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- 01.2 Media ------------------------------------------------------- */

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce div.product div.images img.wp-post-image,
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.loop-motion__img,
.loop-img,
.loop-page img:not(.loop-header__star):not(.loop-footer__star) {
	border-radius: var(--loop-radius-media);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: var(--loop-radius-control);
}

/* Le immagini a tutta larghezza toccano il bordo dello schermo: lì un
   angolo tondo non è uno stile, è un difetto. */
.loop-hero__img,
.loop-hero__media img,
.loop-full-bleed img {
	border-radius: 0;
}

/* --- 01.3 Pannelli ---------------------------------------------------- */

.loop-mystery__dialog,
.loop-mystery__panel,
.loop-consent,
.loop-consent__panel,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-page table.shop_table,
.loop-disclosure {
	border-radius: var(--loop-radius-panel);
}

/* Una tabella con gli angoli tondi ha bisogno che il contenuto stia
   dentro, altrimenti la prima cella scavalca l'angolo. */
.woocommerce-page table.shop_table,
.woocommerce table.shop_table {
	overflow: hidden;
}

/* --- 01.4 I due componenti sfuggiti alla prima verifica ----------------
 *
 * LOOP IN MOTION: il raggio era stato messo sull'immagine, ma l'immagine
 * si ingrandisce all'hover dentro un contenitore con overflow hidden. In
 * quel caso l'angolo tondo va sul contenitore che ritaglia, altrimenti
 * durante l'ingrandimento riappare lo spigolo.
 *
 * La × della barra annuncio era l'unico controllo rimasto a raggio zero.
 * -------------------------------------------------------------------- */

.loop-motion__item {
	border-radius: var(--loop-radius-media);
	overflow: hidden;
}
.loop-motion__img {
	border-radius: 0;
}

.loop-announce__close {
	border-radius: var(--loop-radius-pill);
}

/* --- 01.5 La × della barra annuncio -----------------------------------
 *
 * Questo pulsante rifiutava qualunque border-radius: non una regola più
 * specifica, non un !important in un foglio di stile — verificato
 * disattivando i 32 fogli uno per uno e poi scrivendo lo stile in linea
 * con !important, che pure risultava 0px mentre un bottone identico
 * creato al volo dava 999px. Causa non determinata.
 *
 * Il punto però è un altro: è un'icona trasparente senza fondo e senza
 * bordo, quindi il raggio non si vedrebbe comunque. Quello che le manca
 * davvero è una superficie: oggi al passaggio del mouse cambia solo il
 * colore del glifo, che su una barra nera è un segnale debole.
 *
 * Le si dà una superficie disegnata con uno pseudo-elemento, che è sotto
 * il nostro controllo: tonda, invisibile a riposo, appena percettibile
 * all'hover e al focus. Geometria risolta e controllo migliorato.
 * -------------------------------------------------------------------- */

.loop-announce .loop-announce__close,
.loop-announce button.loop-announce__close {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}
.loop-announce button.loop-announce__close::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 4px;
	border-radius: var(--loop-radius-pill);
	background: transparent;
	transition: background var(--loop-dur) var(--loop-ease);
}
.loop-announce button.loop-announce__close:hover::before,
.loop-announce button.loop-announce__close:focus-visible::before {
	background: rgba(255, 255, 255, 0.14);
}

/* --- 01.6 I punti dove WooCommerce e SliceWP vincevano ancora ----------
 *
 * Verificato sulle pagine vere, non in un iframe fuori schermo: Chrome
 * congela il ricalcolo degli stili negli iframe non visibili, e per un'ora
 * mi ha restituito valori vecchi facendomi cercare un colpevole che non
 * esisteva. Le misure di stile si fanno sulla pagina caricata davvero.
 *
 * Restavano a raggio zero:
 *   · «Apply coupon» e «Update cart», perché WooCommerce li dichiara con
 *     la catena `.woocommerce #content table.cart td.actions .button`, che
 *     è più specifica di `.woocommerce button.button`;
 *   · la miniatura del prodotto nel carrello, non coperta dalla regola
 *     delle card;
 *   · i campi del checkout e i controlli SliceWP.
 * -------------------------------------------------------------------- */

.woocommerce table.cart td.actions .button,
.woocommerce #content table.cart td.actions .button,
.woocommerce-page table.cart td.actions .button,
.woocommerce-page #content table.cart td.actions .button,
.woocommerce .cart .button,
.woocommerce .cart input.button {
	border-radius: var(--loop-radius-control);
	min-height: var(--loop-h-secondary);
}

.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce-page table.shop_table td.product-thumbnail img,
.woocommerce .cart_item td.product-thumbnail img {
	border-radius: var(--loop-radius-control);
}

.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout select,
form.woocommerce-checkout input.input-text,
form.woocommerce-checkout textarea,
form.woocommerce-checkout select {
	border-radius: var(--loop-radius-control);
	min-height: var(--loop-h-control);
}
.woocommerce-checkout form.checkout textarea,
form.woocommerce-checkout textarea {
	min-height: 96px;
}

.slicewp-form input[type="text"],
.slicewp-form input[type="email"],
.slicewp-form input[type="password"],
.slicewp-form input[type="url"],
.slicewp-form input[type="number"],
.slicewp-form select,
.slicewp-form textarea,
.slicewp input[type="text"],
.slicewp input[type="email"],
.slicewp input[type="password"],
.slicewp select,
.slicewp textarea {
	border-radius: var(--loop-radius-control);
	min-height: var(--loop-h-control);
}
/* L'altezza dell'area di testo la dichiara TASK 23 (tre righe di campo).
   Qui resta solo il caso fuori dal modulo. */
.slicewp textarea { min-height: 120px; }

.slicewp-form button,
.slicewp-form input[type="submit"],
.slicewp button.slicewp-button-primary,
.slicewp-button,
.slicewp-button-primary,
button.slicewp-button-primary {
	border-radius: var(--loop-radius-control);
	min-height: var(--loop-h-secondary);
}

/* --- 01.7 Textarea del checkout e controlli SliceWP --------------------
 *
 * Sui controlli SliceWP le altezze sono passate (52px sugli input, 46px
 * sul pulsante) ma il raggio no: il plugin dichiara il proprio
 * border-radius con !important nel suo foglio di stile. Quando un foglio
 * di terze parti usa !important, l'unico modo di riprendersi la proprietà
 * è usarlo a propria volta. Vale solo per il raggio: tutto il resto del
 * sistema arriva senza forzature.
 * -------------------------------------------------------------------- */

.woocommerce-checkout form.checkout textarea.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea.input-text,
form.woocommerce-checkout textarea.input-text,
textarea.input-text {
	border-radius: var(--loop-radius-control);
}

.slicewp-form input[type="text"],
.slicewp-form input[type="email"],
.slicewp-form input[type="password"],
.slicewp-form input[type="url"],
.slicewp-form input[type="number"],
.slicewp-form select,
.slicewp-form textarea,
.slicewp-field-inner input,
.slicewp-field-inner select,
.slicewp-field-inner textarea,
.slicewp-form button,
.slicewp-form input[type="submit"],
button.slicewp-button-primary,
.slicewp-button,
.slicewp-button-primary {
	border-radius: var(--loop-radius-control) !important;
}

/* --- 01.8 Pagina LOOP: figure e bottone fuori dal contesto WooCommerce -
 *
 * Le fotografie della pagina LOOP escono con classe `loop-figure__img`,
 * non `loop-img`, e il bottone della pagina non ha un antenato
 * `.woocommerce`, quindi entrambi erano rimasti fuori dal sistema.
 * -------------------------------------------------------------------- */

.loop-figure,
.loop-figure__img,
figure.loop-figure img {
	border-radius: var(--loop-radius-media);
}

a.button,
button.button,
input.button {
	border-radius: var(--loop-radius-control);
}

/* --- 01.9 Ultimi due controlli del Mystery Discount --------------------
 * Verificato aprendo la modale davvero, non leggendola dal foglio di
 * stile: pannello 12px e campo 8px erano corretti, la × di chiusura e il
 * link SKIP erano rimasti a spigolo vivo.
 * -------------------------------------------------------------------- */

.loop-mystery__x {
	border-radius: var(--loop-radius-pill);
}
.loop-mystery__skip,
.loop-mystery__go {
	border-radius: var(--loop-radius-control);
}

/* --- 01.10 Perché alcuni <button> rifiutavano il raggio -----------------
 *
 * Diagnosi conclusa. Il kit Elementor dichiara la geometria dei bottoni
 * su `.elementor-kit-1175 button`, che vale (0,1,1). Una regola scritta
 * come `.loop-mystery__x` vale (0,1,0) e perde, mentre `a.button` passava
 * perché il kit non prende gli `<a>`. Non era un !important nascosto né
 * un iframe congelato: era una classe contro una classe più un elemento.
 *
 * Da qui in avanti, ogni regola che tocca un `<button>` del tema si
 * scrive con il contenitore davanti — due classi — così sta sopra il kit
 * senza dover ricorrere a !important.
 * -------------------------------------------------------------------- */

.loop-mystery button.loop-mystery__x,
.loop-mystery .loop-mystery__x {
	border-radius: var(--loop-radius-pill);
}
.loop-mystery button.loop-mystery__skip,
.loop-mystery .loop-mystery__skip,
.loop-mystery button.loop-mystery__go,
.loop-mystery .loop-mystery__go {
	border-radius: var(--loop-radius-control);
}
.loop-announce button.loop-announce__close,
.loop-announce .loop-announce__close {
	border-radius: var(--loop-radius-pill);
}

/* =======================================================================
 * FASE 4.5A · TASK 02 — LINK DENTRO IL TESTO
 *
 * Causa sistemica, non un caso isolato: il kit Elementor dichiara
 * `font-size` e `line-height` direttamente su `a`. Un valore esplicito
 * batte un valore ereditato, quindi ogni link dentro una frase esce con
 * la tipografia del kit invece che con quella della frase.
 *
 * Misurato su /partners/: «Sign in to your affiliate account» usciva a
 * 16px con interlinea 24px dentro un paragrafo di microcopy da 12px con
 * interlinea 19,2px — e senza sottolineatura, quindi nemmeno riconoscibile
 * come link se non dal colore.
 *
 * La regola vale per il testo scorrevole, non per i bottoni e non per la
 * navigazione, che hanno una loro tipografia voluta. La distinzione la fa
 * la sottolineatura, non un corpo diverso.
 * ==================================================================== */

p a:not(.button),
dd a:not(.button),
dt a:not(.button),
td a:not(.button),
small a:not(.button),
figcaption a:not(.button),
blockquote a:not(.button),
.loop-legal a:not(.button),
.loop-prose a:not(.button),
.loop-prose li a:not(.button),
.loop-page__body li a:not(.button),
.entry-content li a:not(.button),
.woocommerce-privacy-policy-text a:not(.button),
.woocommerce-terms-and-conditions-wrapper a:not(.button) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-thickness var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}

p a:not(.button):hover,
dd a:not(.button):hover,
td a:not(.button):hover,
small a:not(.button):hover,
.loop-legal a:not(.button):hover,
.loop-prose a:not(.button):hover,
.woocommerce-privacy-policy-text a:not(.button):hover,
p a:not(.button):focus-visible,
.loop-legal a:not(.button):focus-visible,
.loop-prose a:not(.button):focus-visible {
	color: var(--loop-black);
	text-decoration-thickness: 2px;
}

/* --- 02.1 Link dentro gli avvisi e link «Clear» delle varianti ----------
 *
 * Restavano due casi dopo la regola generale:
 *
 * · «Click here to enter your code» al checkout sta dentro un avviso
 *   WooCommerce, non dentro un paragrafo, quindi non era coperto e
 *   arrivava senza sottolineatura: un link che sembra testo.
 *
 * · «Clear» sulla scheda prodotto usciva a 12px dentro un contenitore da
 *   14,4px. Non è un link di lettura ma un controllo di servizio: invece
 *   di farlo ereditare lo si dichiara come micro-etichetta del sistema,
 *   così è piccolo per scelta e non per caso.
 * -------------------------------------------------------------------- */

.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-form-coupon-toggle a:not(.button),
.woocommerce-form-login-toggle a:not(.button) {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.woocommerce-info a:not(.button):hover,
.woocommerce-form-coupon-toggle a:not(.button):hover {
	text-decoration-thickness: 2px;
}

.woocommerce div.product form.cart .reset_variations,
a.reset_variations {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.woocommerce div.product form.cart .reset_variations:hover,
a.reset_variations:hover { color: var(--loop-black); }

/* =======================================================================
 * FASE 4.5A · TASK 03 — NIENTE CONTROLLI DEL BROWSER
 *
 * Cercando il blu sul desktop non se ne trova: il colore del browser non
 * sta in una regola CSS, sta nei valori `auto` che lasciano decidere al
 * sistema operativo. Rilevato su scheda prodotto, checkout e partner:
 *
 *   accent-color: auto   → ogni casella spuntata e ogni radio selezionato
 *                          escono nel blu di sistema. È il blu che si vede.
 *   select color: rgb(0,0,0) → nero puro invece dell'inchiostro LOOP.
 *   autofill di Chrome   → riempie i campi salvati con un fondo azzurrino:
 *                          al checkout è il punto in cui il sito smette di
 *                          sembrare LOOP e ricomincia a sembrare Chrome.
 *   tap highlight iOS    → lampo grigio-blu su ogni tocco.
 *   caret e selezione    → colori di sistema.
 *
 * Si dichiara ognuno di questi, invece di lasciarli ad `auto`.
 * `appearance: none` non basta e da solo toglierebbe anche l'usabilità:
 * il focus resta visibile ovunque, la freccia del select resta disegnata,
 * le caselle restano caselle.
 * ==================================================================== */

:root {
	accent-color: var(--loop-accent);
}

input[type="checkbox"],
input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
	accent-color: var(--loop-accent);
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* Sul fondo scuro l'accento si inverte, altrimenti sparisce. */
.loop-locked input[type="checkbox"],
.loop-mystery input[type="checkbox"],
.loop-consent input[type="checkbox"] {
	accent-color: var(--loop-white);
}

html {
	-webkit-tap-highlight-color: rgba(50, 42, 45, 0.14);
}

::selection {
	background: var(--loop-accent);
	color: var(--loop-accent-ink);
}

input,
select,
textarea {
	caret-color: var(--loop-accent);
}

/* Il testo del select usciva in nero puro: nel sistema LOOP non esiste. */
.woocommerce div.product form.cart select,
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select.orderby,
.slicewp-form select,
select {
	color: var(--loop-ink);
}
option {
	color: var(--loop-ink);
	background-color: var(--loop-white);
}

::placeholder {
	color: var(--loop-muted);
	opacity: 1;
}

/* Autofill: Chrome dipinge il campo di azzurro e non si può cambiare il
   background, ma si può coprire con un'ombra interna piena. La
   transizione lunghissima è il modo noto per impedire che il colore
   riappaia per un istante al primo focus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--loop-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--loop-white) inset;
	box-shadow: 0 0 0 1000px var(--loop-white) inset;
	caret-color: var(--loop-accent);
	transition: background-color 100000s ease-in-out 0s;
}
.loop-locked input:-webkit-autofill,
.loop-mystery input:-webkit-autofill {
	-webkit-text-fill-color: var(--loop-white);
	-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
	box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
}

/* Decorazioni native residue: le frecce del campo numerico e la × del
   campo di ricerca sono disegnate dal browser e non seguono nessun
   sistema. Il campo resta digitabile e la quantità si governa dal
   carrello; il trattamento definitivo della quantità è nel task 15. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

/* --- 03.1 L'icona dello zoom va centrata nella sua area di tocco -------
 * L'area di 44px imposta dal task 01 è corretta, ma l'icona da 22px
 * restava in alto a sinistra dentro il quadrato invece che al centro.
 * -------------------------------------------------------------------- */

.woocommerce-product-gallery__trigger,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- 03.2 Un solo anello di focus --------------------------------------
 *
 * Sui campi e sui select arrivava `outline: 3px solid rgb(10,10,10)` da
 * fuori dal tema, mentre il resto del sito usa i 2px del token. Due
 * trattamenti di focus diversi nello stesso form.
 *
 * Si tiene il modello moderno: nessun anello quando il focus arriva dal
 * mouse, anello del sistema quando arriva dalla tastiera. `:focus-visible`
 * è supportato da tutti i browser in uso.
 * -------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce div.product form.cart select:focus,
.woocommerce .quantity input.qty:focus,
.slicewp-form input:focus,
.slicewp-form select:focus,
.slicewp-form textarea:focus {
	outline: none;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce div.product form.cart select:focus-visible,
.woocommerce .quantity input.qty:focus-visible,
.slicewp-form input:focus-visible,
.slicewp-form select:focus-visible,
.slicewp-form textarea:focus-visible {
	outline: var(--loop-focus);
	outline-offset: var(--loop-focus-offset);
	border-color: var(--loop-accent);
}

/* --- 03.3 L'anello di focus non si anima -------------------------------
 *
 * Il tema genitore (hello-commerce) dichiara `transition: 0.3s` sui
 * bottoni. È una shorthand con la sola durata, quindi transition-property
 * resta `all` e finisce per animare anche outline-width, outline-color e
 * outline-offset: premendo Tab l'anello cresceva in 300 ms invece di
 * comparire. Per chi naviga da tastiera l'indicatore deve essere immediato.
 *
 * Non esiste un "all tranne outline", quindi si sostituisce la lista con
 * le proprietà che servono davvero all'hover. Durata e curva restano
 * quelle del tema: cambia solo cosa viene animato.
 *
 * Diagnosi: getAnimations() su un bottone appena messo a fuoco restituiva
 * tre transizioni attive - outline-color, outline-offset, outline-width.
 * -------------------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
a.button,
.elementor-kit-1175 button,
.elementor-kit-1175 a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.loop-btn,
.slicewp-form input[type="submit"] {
	transition-property: background-color, border-color, color, box-shadow, opacity, transform;
}

/* ==========================================================================
   TASK 04 — Le taglie si scelgono guardandole
   Vedi functions.php sezione 37 per il funzionamento.
   ========================================================================== */

/* Il menu a tendina sparisce solo se il JavaScript è vivo: la classe
   `loop-swatch` sulla radice arriva da uno script inline nel <head>.
   Senza JavaScript resta il menu a tendina e il prodotto si compra. */
.loop-swatch__opts { display: none; }

html.loop-swatch-on .loop-swatch__opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--loop-s-2);
}

.loop-swatch__native { display: block; }
html.loop-swatch-on .loop-swatch__native { display: none; }

.loop-swatch__opt {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.loop-swatch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.loop-swatch__box {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--loop-h-tap);
	height: var(--loop-h-control);
	padding: 0 var(--loop-s-3);
	border: var(--loop-border-strong);
	border-radius: var(--loop-radius-control);
	background: var(--loop-white);
	color: var(--loop-ink);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color var(--loop-dur) var(--loop-ease),
	            border-color var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}

.loop-swatch__opt:hover .loop-swatch__box { background: var(--loop-100); }

/* La taglia scelta non è "un po' più scura": è l'inverso della pagina.
   A colpo d'occhio, da un metro di distanza, si vede quale è. */
.loop-swatch__input:checked + .loop-swatch__box {
	border-color: var(--loop-accent);
	background: var(--loop-accent);
	color: var(--loop-accent-ink);
}

/* Esaurita: si vede che esiste, si vede che non c'è. Non la si nasconde -
   sapere che la M esiste ma manca è un'informazione, non un errore. */
.loop-swatch__opt.is-out { cursor: not-allowed; }
.loop-swatch__opt.is-out .loop-swatch__box {
	border-color: var(--loop-300);
	background: var(--loop-white);
	color: var(--loop-400);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.loop-swatch__opt.is-out:hover .loop-swatch__box { background: var(--loop-white); }

.loop-swatch__input:focus-visible + .loop-swatch__box {
	outline: var(--loop-focus);
	outline-offset: var(--loop-focus-offset);
}

/* Il gruppo respira quanto un campo, non di più. */
.woocommerce div.product form.cart .variations .loop-swatch { margin-top: 0; }

/* ==========================================================================
   TASK 05 — Il guscio del contenuto

   Prima di questo blocco il bordo sinistro della pagina si trovava in tre
   punti diversi sullo stesso schermo. Misurato, non supposto:

                        telefono 367px      laptop 1421px
     header                 20 px               20 px
     scheda prodotto      18,3 px             56,8 px
     archivio /shop/        10 px              141 px

   Il 18,3 e il 56,8 sono lo stesso valore: il 5% che Elementor mette come
   margine predefinito. Una percentuale non è un sistema - è un numero
   diverso su ogni schermo, che nessuno ha scelto e che non si può scrivere
   da nessuna parte. Il 10 px dell'archivio arriva dal tema genitore, che
   limita anche il contenuto a 1140 px mentre Elementor lo limita a 1400.

   Da qui in avanti il margine laterale è un token in pixel e la larghezza
   massima è una sola. Il bordo della pagina sta dove diciamo noi.
   ========================================================================== */

:root {
	--loop-gutter: 20px;
	--loop-shell:  1400px;
}
@media (min-width: 600px)  { :root { --loop-gutter: 32px; } }
@media (min-width: 1024px) { :root { --loop-gutter: 56px; } }

/* 05.1 — I contenitori Elementor "boxed".
 *
 * Solo quelli: i contenitori a tutta larghezza (barra annuncio, header,
 * fascia di fiducia, footer, immagini a pieno campo) hanno un margine
 * deciso a mano e non vanno toccati. Elementor li marca con `e-con-full`.
 *
 * Verificato su home, scheda prodotto, carrello e checkout: nessun
 * contenitore boxed ha un margine laterale scelto a mano, tutti stanno al
 * 5% predefinito. Non si sta quindi sovrascrivendo nessuna decisione. */
.e-con.e-parent:not(.e-con-full) {
	--padding-inline-start: var(--loop-gutter);
	--padding-inline-end:   var(--loop-gutter);
}

/* 05.2 — Le pagine che NON passano da Elementor.
 *
 * Archivio prodotti, 404, blog: le disegna il tema genitore, che dava
 * 10 px di margine e 1140 px di larghezza massima. Dieci pixel su un
 * telefono sono il testo attaccato al vetro. */
.site-main,
main.site-main,
/* Il tema genitore scrive `body:not([class*="elementor-page-"]) .site-main`,
   che vale (0,2,1) e batte una classe sola. Si ripete la stessa forma - non
   per gusto, ma perche' e' l'unico modo di vincere senza `!important`. Il
   genitore alza anche il limite di larghezza a scaglioni (500, 600, 800,
   1140) dentro media query: senza la stessa specificita' il guscio sarebbe
   tornato a 1140 sopra i 1140px di finestra. */
body:not([class*="elementor-page-"]) .site-main {
	box-sizing: border-box;
	/* Il limite vale per il CONTENUTO, non per la scatola: il margine sta
	   fuori. Cosi' sotto i 1400+2*margine il bordo del contenuto e' esatta-
	   mente il margine, e sopra il contenuto resta largo 1400 e si centra.
	   Mettendo il limite sulla scatola il contenuto finiva a margine + meta'
	   dell'avanzo: 68px invece di 56px, cioe' un bordo diverso dal resto. */
	max-width: calc(var(--loop-shell) + 2 * var(--loop-gutter));
	margin-inline: auto;
	padding-inline: var(--loop-gutter);
	/* Il contenuto non deve toccare l'header. Su queste pagine il tema
	   genitore non metteva nessun respiro verticale: il titolo della
	   privacy policy partiva a **zero pixel** dal bordo dell'header, e le
	   briciole dell'archivio a sette. */
	padding-block-start: var(--loop-s-7);
	padding-block-end: var(--loop-section);
}

/* 05.3 — I componenti LOOP a tutta larghezza.
 *
 * Hanno una fascia che arriva ai bordi, giustamente, ma il contenuto
 * dentro la fascia deve allinearsi al resto della pagina. Prima usavano
 * 1,5rem o 2rem: vicini al guscio, mai uguali. */
.loop-footer__inner,
.loop-hero__inner,
.loop-consent__inner {
	max-width: calc(var(--loop-shell) + 2 * var(--loop-gutter));
	padding-inline: var(--loop-gutter);
}

/* ==========================================================================
   TASK 06 — Il sistema di relazioni fra gli spazi

   Prima di questo blocco gli spazi erano quasi giusti, che è il modo più
   difficile di essere sbagliati. La colonna d'acquisto della scheda
   prodotto scorreva così:

     titolo → prezzo        16 px
     prezzo → descrizione   16 px
     descrizione → taglie   20 px   ← 16 + un margine di 4 px rimasto lì
     taglie → fiducia       16 px
     fiducia → dettagli     16 px

   Tutto alla stessa distanza significa che niente è collegato a niente.
   L'occhio non riceve nessuna indicazione su cosa vada letto insieme.

   Lo spazio non è decorazione: è la sintassi della pagina. Le cose che
   dicono una cosa sola stanno vicine, quelle che aprono un capitolo nuovo
   stanno lontane. Qui sotto la scala è dichiarata una volta e le distanze
   diventano relazioni.
   ========================================================================== */

:root {
	/* Il respiro fra due sezioni di pagina. Erano 96 e 64 scritti a mano
	   dentro Elementor, sezione per sezione: stessi valori, nessuna fonte. */
	--loop-section: 64px;
}
@media (min-width: 1024px) { :root { --loop-section: 96px; } }

/* 06.1 — La colonna d'acquisto.
 *
 * Base stretta (8px) e distanze crescenti dichiarate una per una, in modo
 * che ogni salto sia una decisione leggibile e non un residuo:
 *
 *   titolo → prezzo         8 px   la stessa frase
 *   prezzo → descrizione   16 px   il prodotto si sta descrivendo
 *   descrizione → taglie   24 px   qui si comincia a decidere
 *   acquisto → fiducia     24 px   rassicurare non è vendere
 *   fiducia → dettagli     32 px   capitolo nuovo
 */
/* La distanza di base la decide Elementor: 16px di `gap` sulla colonna.
 * Non la si tocca - vincere quel valore richiederebbe un `!important` per
 * un guadagno di otto pixel. Si lavora invece per differenze, aggiungendo
 * spazio solo dove comincia qualcosa di diverso.
 *
 * Il `body` davanti non è vezzo: Elementor scrive le sue regole per
 * elemento con specificità (0,3,0) e senza un tipo davanti la nostra
 * perderebbe. È il caso del margine di 4px sul blocco d'acquisto. */
body .loop-pdp__buy .elementor-widget[data-widget_type^="woocommerce-product-add-to-cart"] {
	margin-top: var(--loop-s-2);
}
.loop-pdp__buy .elementor-widget:has(.loop-trust)      { margin-top: var(--loop-s-2); }
.loop-pdp__buy .elementor-widget:has(.loop-disclosure) { margin-top: var(--loop-s-4); }

/* 06.2 — Il footer segue il ritmo delle sezioni.
 *
 * Aveva 96px fissi a ogni larghezza: su un telefono, dove le sezioni
 * respirano 64, il footer si staccava di 96. Un valore che non seguiva
 * nessuno. */
.loop-footer { margin-top: var(--loop-section); }

/* ==========================================================================
   TASK 09 — Le proporzioni dell'header

   Due difetti misurati, non giudicati a occhio:

   1. Sotto la stella c'erano 7 pixel di niente. L'ancora è `inline-block`,
      quindi il genitore le costruisce intorno una riga di testo e le lascia
      sotto lo spazio del discendente. Il contenitore del widget misurava
      55px per una stella da 48. Nessuno l'aveva messo lì: c'era e basta.
   2. Il riempimento verticale dell'header era 22px sopra e 16px sotto.
      L'asimmetria compensava, a occhio, proprio quei 7px fantasma.

   Tolto il fantasma, l'asimmetria non serve più. Lo spazio recuperato va
   alla stella, che il brief chiede più presente: 64 → 76px su desktop,
   48 → 56px su telefono. L'altezza complessiva dell'header non cresce.

     desktop  16 + 76 + 12 + 44 + 16 = 164 px   (prima 165)
     telefono 16 + 56 + 12 + 44 + 16 = 144 px   (prima 150)

   La sorgente della stella è larga 160px: a 76px resta nitida anche su
   schermo a densità doppia. Non si va oltre.
   ========================================================================== */

.loop-header__home {
	display: block;
	width: fit-content;
	margin-inline: auto;
	line-height: 0;
	text-decoration: none;
}
.loop-header__home .loop-header__star {
	width: 76px;
	height: 76px;
}
@media (max-width: 767px) {
	.loop-header__home .loop-header__star { width: 56px; height: 56px; }
}

/* Il riempimento dell'header lo decideva Elementor per elemento (22/16).
   Da qui in avanti lo decide il tema: simmetrico, e la distanza fra stella
   e navigazione dichiarata invece che ereditata. Va detto al proprietario -
   cambiare quei valori dentro Elementor da ora non avrà più effetto. */
.e-con.e-parent:has(> .elementor-widget .loop-header__home) {
	--padding-block-start: var(--loop-s-4);
	--padding-block-end:   var(--loop-s-4);
	--gap: var(--loop-s-3);
	row-gap: var(--loop-s-3);
}

/* ==========================================================================
   TASK 10 — Il footer

   Tre difetti, tutti misurati:

   1. Non si staccava dalla pagina. Il corpo del sito è #FAF9F9, il footer
      era #FFFFFF: **più chiaro** della pagina, separato solo da un filo
      grigio. Un footer più chiaro del contenuto non chiude niente.
   2. La riga di marca andava a capo nel punto sbagliato. `max-width: 22ch`
      su una frase di 31 caratteri la spezzava a «STOP THE LOOP, REACH» /
      «THE STARS.»: il punto peggiore possibile, perché rompe la seconda
      metà della frase invece di separare le due metà.
   3. Nessuna relazione con il resto: colori, pesi e distanze decisi voce
      per voce.

   Il footer prende il fondo della barra annuncio, #0A0A0A. Non è una scelta
   di gusto: la pagina si apre e si chiude con lo stesso inchiostro, e in
   mezzo resta chiara. La striscia di fiducia dentro al footer mantiene il
   suo fondo bianco - dichiara il proprio - quindi resta una fascia leggibile
   fra la pagina e il piede.

   Per tornare a un footer chiaro basta cambiare `background` qui sotto e
   togliere il blocco dei colori invertiti.
   ========================================================================== */

.loop-footer {
	background: var(--loop-black);
	border-top: 0;
	color: var(--loop-white);
}

/* La riga di marca: due metà che non si spezzano, quindi l'unico a capo
   possibile è dopo la virgola - e solo quando serve davvero. */
.loop-footer__line {
	max-width: none;
	color: var(--loop-white);
}
.loop-footer__line-part {
	display: inline-block;
	white-space: nowrap;
}

.loop-footer .loop-footer__nav .loop-footer__heading {
	color: rgba(255, 255, 255, 0.55);
}
.loop-footer .loop-footer__nav a {
	color: rgba(255, 255, 255, 0.86);
}
.loop-footer .loop-footer__nav a:hover,
.loop-footer .loop-footer__nav a:focus-visible {
	color: var(--loop-white);
	border-bottom-color: var(--loop-white);
}
.loop-footer .loop-footer__nav a:focus-visible {
	outline: 2px solid var(--loop-white);
	outline-offset: var(--loop-focus-offset);
}

.loop-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.loop-footer__legal p {
	color: rgba(255, 255, 255, 0.5);
}

/* La striscia di fiducia resta chiara: dichiara il proprio fondo, quindi
   non eredita il nero. Il filo sotto pero' sparisce, perche' sotto c'e' il
   nero e un grigio chiaro su nero e' una riga che non serve. */
.loop-footer .loop-trust {
	border-bottom: 0;
}

/* ==========================================================================
   TASK 11 — Le pagine legali

   Privacy e Resi correvano per 1311 pixel di larghezza: circa 164 caratteri
   per riga. Si legge comodamente fra i 45 e i 75 — a 164 l'occhio perde la
   riga ogni volta che torna a capo, e una pagina che nessuno riesce a
   leggere non e' una pagina legale, e' un adempimento.

   Il testo non e' stato toccato. Solo la forma.
   ========================================================================== */

.loop-legal-page .page-content {
	/* Non in `ch`: l'unita' si misura sullo zero del font *ereditato*, che
	   qui e' Archivio (piu' largo di Inter), e 68ch davano 686px cioe' ~82
	   caratteri. In rem il conto e' nostro: 34rem = 544px = circa 65
	   caratteri a 16px di Inter, dentro la fascia comoda 45-75. */
	max-width: 34rem;
}

.loop-legal-page .loop-legal__title {
	margin: 0 0 var(--loop-s-6);
	font-family: var(--loop-font-display);
	font-weight: 700;
	font-size: var(--loop-size-h1);
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}

/* I titoli di sezione: abbastanza distanti da segnare un capitolo, non
   tanto da sembrare pagine diverse. Sopra respirano il doppio di sotto,
   perche' appartengono al testo che introducono, non a quello che
   chiudono. */
.loop-legal-page .page-content h2 {
	margin: var(--loop-s-7) 0 var(--loop-s-3);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-black);
}
.loop-legal-page .page-content > h2:first-of-type { margin-top: 0; }

.loop-legal-page .page-content p,
.loop-legal-page .page-content li {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	line-height: 1.7;
	color: var(--loop-ink);
}
.loop-legal-page .page-content p { margin: 0 0 var(--loop-s-4); }
.loop-legal-page .page-content ul,
.loop-legal-page .page-content ol { margin: 0 0 var(--loop-s-4); padding-left: var(--loop-s-5); }
.loop-legal-page .page-content li { margin-bottom: var(--loop-s-2); }

/* Su schermo stretto la misura la decide gia' il guscio: 68ch non entra
   comunque, e forzare un massimo qui non aggiungerebbe niente. */

/* ==========================================================================
   TASK 13 — Le schede prodotto

   Misurato a 1423px: due colonne da 643,5px, immagine 644×644, scheda alta
   789px. Due quadrati monumentali per un catalogo di cinque pezzi. E sotto
   ogni prodotto un rettangolo pieno scuro da 170×47 che pesa più della
   fotografia.

   La regola «due schede per riga su tutti i dispositivi» è bloccata dal
   proprietario e resta. Quello che si può cambiare è **quanto è larga la
   colonna in cui stanno le due schede**: il guscio dell'archivio scende a
   1040px, le schede passano da 644 a ~508. Due per riga, ma di una misura
   che si guarda invece di subirla.

   E il pulsante smette di gridare. Su una scheda il vero pulsante è la
   scheda stessa: tutta l'area è già un collegamento alla pagina prodotto.
   Il controllo sotto serve a dire cosa succede dopo, non a farsi notare
   più del capo che sta vendendo.
   ========================================================================== */

body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag {
	--loop-shell: 1040px;
}

/* Nome e prezzo sono una cosa sola: il nome guida, il prezzo lo segue da
   vicino. Prima erano separati da 16px, cioe' la stessa distanza che li
   separava dal pulsante: tre elementi equidistanti non sono una gerarchia. */
/* Perche' `.woocommerce` e' ripetuto due volte, qui e sotto:
 *
 * Il kit di Elementor scrive le sue regole come
 * `.elementor-kit-1175.woocommerce ul.products li.product .price`, cioe'
 * due classi sul body. Fa specificita' (0,5,0) e batte la nostra (0,4,0).
 * Non si puo' vincere con `body` davanti: un tipo vale meno di una classe.
 *
 * Ripetere `.woocommerce` aggiunge una classe reale al conto e porta la
 * regola a (0,5,2). E' brutto da leggere e va spiegato, ma e' onesto:
 * non usa `!important` e non dipende dall'id del kit, che cambierebbe se
 * il kit venisse ricreato. */
.woocommerce.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-bottom: var(--loop-s-1);
}
.woocommerce.woocommerce ul.products li.product .price {
	font-size: var(--loop-size-small);
	font-weight: 400;
	color: var(--loop-ink);
	/* Nessun margine sotto: lo spazio verso il controllo lo fa gia' l'area
	   tocco da 44px del controllo stesso, che centra il testo al proprio
	   interno. Sommare i due dava un vuoto da 40px fra prezzo ed etichetta. */
	margin-bottom: 0;
}

/* Il controllo quieto. Nessun fondo, nessun bordo: una parola sottolineata
   che si accende al passaggio. L'area sensibile resta di 44px in altezza -
   il testo e' alto 18, ma il collegamento no. */
.woocommerce.woocommerce ul.products li.product .button,
.woocommerce.woocommerce ul.products li.product a.button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--loop-ink);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.34em;
	text-decoration-color: var(--loop-300);
	transition: text-decoration-color var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}
.woocommerce.woocommerce ul.products li.product .button:hover,
.woocommerce.woocommerce ul.products li.product a.button:hover,
.woocommerce.woocommerce ul.products li.product:hover a.button {
	background: none;
	color: var(--loop-black);
	text-decoration-color: var(--loop-black);
}
.woocommerce.woocommerce ul.products li.product a.button:focus-visible {
	outline: var(--loop-focus);
	outline-offset: var(--loop-focus-offset);
}

/* ==========================================================================
   TASK 14 — I fatti del prodotto smettono di essere una riga di database

   Prima:
     100% cotton / 360 GSM / French terry interior / Embroidered logos /
     Screen-printed stars inside the hood / Cold wash preferred / Sizing may
     vary by 3-4 cm

   Sette informazioni vere e utili, scritte come una query. Chi legge deve
   separarle da solo, e «Sizing may vary by 3-4 cm» — che e' la cosa piu'
   utile della riga per chi deve scegliere una taglia — si perde in fondo.

   Nessuna parola e' stata cambiata. Sono andate a capo.

   Su desktop due colonne: sette fatti in quattro righe invece di sette,
   cosi' il selettore taglia non scende sotto la piega. Su telefono una
   colonna sola, perche' due da 150px spezzerebbero le frasi lunghe.
   ========================================================================== */

.loop-specs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--loop-s-1) var(--loop-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.loop-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.loop-specs__item {
	position: relative;
	margin: 0;
	padding-left: var(--loop-s-4);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: 1.5;
	color: var(--loop-ink);
}

/* Il segno davanti al fatto e' la stella LOOP ridotta a un carattere, non
   un pallino di sistema: e' il posto giusto per un dettaglio di marca,
   perche' si ripete sette volte e non chiede niente a nessuno. */
.loop-specs__item::before {
	content: "\2726";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: var(--loop-accent);
	font-size: 0.72em;
	line-height: 1.9;
}

/* ==========================================================================
   TASK 15 — Il blocco d'acquisto

   Tre cose misurate sulla pagina vera:

   1. La riga d'acquisto non era una riga: quantita' alta 52px accanto a un
      pulsante alto 64. Due controlli affiancati che non condividono
      l'altezza si leggono come due decisioni prese in momenti diversi.
   2. Il pulsante disabilitato usava lo stile di WooCommerce - fondo quasi
      bianco e testo slavato - e si leggeva come una scatola vuota. Proprio
      nel momento in cui deve dire una cosa precisa: manca la taglia.
      La regola del tema per lo stato disabilitato non lo prendeva, perche'
      WooCommerce non mette l'attributo `disabled` sul pulsante delle
      varianti: mette solo la classe.
   3. «Clear» era alto 29px. Sotto i 44 non e' un bersaglio, e' una
      speranza.
   ========================================================================== */

/* 15.1 — Una sola altezza per la riga d'acquisto. */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	min-height: var(--loop-h-control);
	height: var(--loop-h-control);
	padding-block: 0;
}

/* 15.2 — Disabilitato: si vede che non e' pronto, si legge lo stesso.
   WooCommerce marca solo la classe, non l'attributo: serve entrambe le
   forme. Il testo resta a contrasto 5,9:1 su fondo chiaro - un pulsante
   spento deve comunque dire perche'. */
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .button.single_add_to_cart_button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.alt.disabled {
	background: var(--loop-100);
	border: 1px solid var(--loop-300);
	color: var(--loop-muted);
	opacity: 1;
	cursor: not-allowed;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled:hover,
.woocommerce button.button.alt.disabled:hover {
	background: var(--loop-100);
	color: var(--loop-muted);
}

/* 15.3 — «Clear» diventa un bersaglio vero senza diventare un pulsante. */
.woocommerce div.product form.cart .reset_variations,
a.reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: var(--loop-h-tap);
}

/* ==========================================================================
   TASK 16 — Il passaggio fra la scheda e «More from LOOP»

   Il filo che separa le due sezioni era incollato a quello che veniva
   prima: zero pixel sopra, 106 sotto su desktop, 47 su telefono. Tutta
   l'aria stava da una parte sola.

   Su telefono l'effetto era peggiore: l'ultima fisarmonica chiude con il
   suo filo e subito sotto ne comincia un altro, a un pixel di distanza.
   Due righe grigie appiccicate non separano niente, sembrano un errore di
   stampa.

   Una separazione di sezione ha aria da entrambe le parti. Il filo sta in
   mezzo allo spazio, non in fondo a quello che ha appena finito.
   ========================================================================== */

.loop-pdp__related {
	margin-block-start: var(--loop-section);
}

/* ==========================================================================
   TASK 17 — La galleria smette di essere un muro

   Misurato a 369px: immagine principale 327×327, poi **dieci miniature da
   82px** disposte su tre righe. La galleria e' alta 807px e il nome del
   prodotto comincia a y=1094. Su un telefono alto 780px significa che chi
   arriva scorre per **una schermata e mezza di sole fotografie** prima di
   leggere come si chiama la cosa che sta guardando, quanto costa e quali
   taglie ci sono.

   Le miniature non sono il problema: e' la disposizione. Undici miniature
   incolonnate su tre righe occupano 500px di pagina per dire una cosa che
   una riga sola dice meglio - «ce ne sono altre, scorri».

   Diventano una striscia orizzontale che scorre, con aggancio: alta 80px
   invece di 500, la prima e' visibile, le altre si intuiscono dal bordo
   tagliato.

   I selettori includono `div.images` perche' WooCommerce scrive
   `.woocommerce div.product div.images .flex-control-thumbs li`, che vale
   (0,4,3): senza quel pezzo la nostra regola si ferma a (0,3,2) e la
   larghezza del 25% resta al suo posto. Verificato: al primo giro
   `flex-wrap: nowrap` passava e `width` no, con undici miniature da 178px
   schiacciate su una riga sola.
   ========================================================================== */

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--loop-s-2);
	margin: var(--loop-s-3) 0 0;
	padding: 0 0 var(--loop-s-1);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; }

.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 auto;
	width: 68px;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

@media (min-width: 1024px) {
	.woocommerce div.product div.images .flex-control-thumbs li { width: 88px; }
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--loop-radius-media);
	background: var(--loop-surface);
	opacity: 0.62;
	cursor: pointer;
	transition: opacity var(--loop-dur) var(--loop-ease),
	            box-shadow var(--loop-dur) var(--loop-ease);
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 0.85; }

/* Quale si sta guardando: piena, con un filo di contorno. Non un bordo
   spesso - la miniatura e' gia' piccola, un bordo la mangerebbe. */
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--loop-accent);
}

/* ==========================================================================
   TASK 19 — Il carrello

   Misurato a 1423px, prima:

     miniatura prodotto        32 × 32 px
     nome prodotto             14px regolare, come il resto
     campo coupon              1089 px di larghezza
     «Update cart»             47 px di altezza
     «Apply coupon»            47 px
     campo coupon              52 px
     quantita'                 52 px
     «Proceed to checkout»     55 px
     titolo della pagina       assente

   Cinque altezze diverse in una pagina che fa quattro cose. E una miniatura
   da 32 pixel: nel carrello l'immagine e' come riconosci quello che hai
   messo dentro, non un'icona decorativa.

   Il campo per un codice sconto lungo otto caratteri era largo mille
   pixel. Un campo largo promette un testo lungo.
   ========================================================================== */

/* 19.1 — La miniatura torna a essere una fotografia. */
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce-page table.shop_table td.product-thumbnail img {
	width: 72px;
	height: 72px;
	/* `max-width: 100%` arriva dal tema su ogni immagine e la stringeva
	   alla larghezza vera della cella: 36px invece di 72, con l'altezza
	   giusta. Un ritaglio verticale di meta' capo. */
	max-width: none;
	object-fit: cover;
	border-radius: var(--loop-radius-media);
	background: var(--loop-surface);
}
.woocommerce table.shop_table td.product-thumbnail,
.woocommerce-page table.shop_table td.product-thumbnail {
	width: 72px;
	min-width: 72px;
}

/* Su telefono la tabella impila le celle e WooCommerce nasconde la
   miniatura. Ma e' proprio sul telefono che serve di piu': niente colonne,
   niente contesto, solo la riga. Torna, piu' piccola. */
@media (max-width: 767px) {
	.woocommerce table.shop_table_responsive tr td.product-thumbnail,
	.woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
		display: block;
		width: auto;
		text-align: left;
	}
	.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	.woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
		content: none;
	}
	.woocommerce table.shop_table td.product-thumbnail img,
	.woocommerce-page table.shop_table td.product-thumbnail img {
		width: 64px;
		height: 64px;
	}
}

/* ==========================================================================
   Fase 4.5A.2 — Task 10. Il carrello su telefono era alto sei schermi

   Misurato a 390px con due articoli: la pagina era **2992px** e il pulsante
   per andare alla cassa stava a **y 2218**, cioe' quasi sei schermate sotto
   il bordo. Un articolo da solo occupava 548px.

   Il motivo: WooCommerce impila le celle una sotto l'altra, quindi una
   riga di carrello diventava sei blocchi larghi tutta la pagina — la ×
   da sola su una riga, la miniatura da 64px da sola su un'altra, poi nome,
   prezzo, quantita', totale. Solo di riempimento erano 216px per articolo,
   e «Prezzo 130,00 €» seguito da «Subtotale 130,00 €» diceva due volte la
   stessa cifra.

   Qui la riga torna a essere una riga: miniatura a sinistra, nome e
   varianti accanto, × in alto a destra, e sotto quantita', prezzo unitario
   e totale di riga sulla stessa linea. Nessuna informazione tolta.

   Vale solo per la tabella del carrello (`woocommerce-cart-form__contents`):
   il riepilogo della cassa e lo storico ordini usano le stesse classi e
   non c'entrano.
   ========================================================================== */

@media (max-width: 767px) {

	.woocommerce table.woocommerce-cart-form__contents tr.cart_item,
	.woocommerce-page table.woocommerce-cart-form__contents tr.cart_item {
		display: grid;
		grid-template-columns: 72px auto 1fr auto;
		grid-template-areas:
			"foto nome  nome    togli"
			"foto quant prezzo  totale";
		column-gap: var(--loop-s-4);
		row-gap: var(--loop-s-3);
		align-items: start;
		padding: var(--loop-s-4) 0;
	}

	.woocommerce table.woocommerce-cart-form__contents tr.cart_item > td,
	.woocommerce-page table.woocommerce-cart-form__contents tr.cart_item > td {
		width: auto;
		max-width: none;
		padding: 0;
		border: 0;
		/* `!important` qui non e' una scorciatoia: nella vista impilata
		   WooCommerce allinea a destra con `text-align: right !important`
		   (woocommerce-smallscreen.css), e contro `!important` la
		   specificita' non serve a niente. Quel valore aveva senso quando
		   ogni cella era una riga larga tutta la pagina con l'etichetta a
		   sinistra; in una riga composta mandava il nome del prodotto a
		   destra, staccato dalle sue varianti. Come negli altri punti del
		   foglio, si usa solo per riprendersi una proprieta' che un foglio
		   di terze parti ha dichiarato con `!important`. */
		text-align: left !important;
	}

	/* Le etichette «Prodotto:», «Prezzo:», «Quantita':» servivano quando le
	   celle erano impilate e non si capiva cosa fosse cosa. In una riga
	   composta sono rumore: la miniatura dice qual e' il prodotto, lo
	   stepper dice che quello e' il numero di pezzi. */
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item > td::before,
	.woocommerce-page table.woocommerce-cart-form__contents tr.cart_item > td::before {
		content: none;
	}

	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-thumbnail { grid-area: foto; }
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-name      { grid-area: nome; }
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-remove    { grid-area: togli; justify-self: end; }
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-quantity  { grid-area: quant; align-self: center; }
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-price     { grid-area: prezzo; align-self: center; }
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-subtotal  { grid-area: totale; align-self: center; justify-self: end; }

	/* Il prezzo unitario resta, ma fa un passo indietro. */
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-price {
		font-size: var(--loop-size-micro);
		color: var(--loop-muted);
	}

	/* E quando la quantita' e' uno sparisce del tutto: ripeterebbe la
	   cifra che sta gia' due centimetri piu' a destra, e due volte lo
	   stesso numero sulla stessa riga si legge come un errore di conto.
	   Da due pezzi in su torna, perche' li' serve davvero a verificare
	   il totale di riga.

	   Il valore letto e' l'attributo scritto dal server, non lo stato del
	   campo: WooCommerce ricarica il carrello a ogni aggiornamento, quindi
	   l'attributo e' sempre allineato al numero mostrato. Se un browser non
	   conosce `:has()` la regola cade e il prezzo resta visibile — si perde
	   la rifinitura, non l'informazione. */
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item:has(input.qty[value="1"]) td.product-price {
		display: none;
	}
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-subtotal {
		font-weight: 600;
		white-space: nowrap;
	}

	/* Lo stepper non deve piu' allargarsi a tutta la pagina. */
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-quantity .quantity {
		width: auto;
		margin: 0;
	}

	/* La miniatura riempie la sua colonna: in una riga compatta e' il modo
	   in cui riconosci il capo, non un'icona. La colonna e' larga 72px
	   perche' e' il minimo che la cella si porta dietro dalla regola 19.1;
	   lasciarla a 64 significava rubare otto pixel allo spazio fra le
	   colonne. */
	.woocommerce table.woocommerce-cart-form__contents tr.cart_item td.product-thumbnail img {
		display: block;
		width: 72px;
		height: 72px;
	}
}

/* 19.2 — Il nome del prodotto guida la riga. */
.woocommerce table.shop_table td.product-name > a,
.woocommerce-page table.shop_table td.product-name > a {
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--loop-black);
	text-decoration: none;
}
.woocommerce table.shop_table td.product-name > a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 19.3 — Una scala di altezze, e ognuna dice il suo ruolo.
     campo e pulsante del coupon   52 px  (stanno insieme)
     «Update cart»                 46 px  (azione secondaria)
     «Proceed to checkout»         54 px  (l'azione della pagina) */
.woocommerce .cart .coupon .button,
.woocommerce-page .cart .coupon .button {
	min-height: var(--loop-h-control);
	height: var(--loop-h-control);
}
.woocommerce .cart .actions .button[name="update_cart"],
.woocommerce-page .cart .actions .button[name="update_cart"] {
	min-height: var(--loop-h-secondary);
	height: var(--loop-h-secondary);
	background: none;
	border: 1px solid var(--loop-800);
	color: var(--loop-ink);
}
.woocommerce .cart .actions .button[name="update_cart"]:hover {
	background: var(--loop-100);
	color: var(--loop-black);
}
.woocommerce .cart_totals .checkout-button,
.woocommerce-page .cart_totals .checkout-button {
	min-height: var(--loop-h-primary);
	height: var(--loop-h-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* 19.4 — Il campo del coupon largo quanto un coupon. */
@media (min-width: 768px) {
	.woocommerce .cart .coupon .input-text,
	.woocommerce-page .cart .coupon .input-text {
		flex: 0 1 16rem;
		max-width: 16rem;
	}
}

/* 19.5 — La stessa fascia grigia tolta dalla scheda prodotto: WooCommerce
   colora le celle di #FBFBFB. Nel carrello sono righe intere. */
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table td,
.woocommerce-page table.shop_table th {
	background: none;
}

/* Il titolo del carrello, stessa scala dei titoli di pagina. */
.loop-shop-title {
	margin: 0 0 var(--loop-s-6);
	font-family: var(--loop-font-display);
	font-weight: 700;
	font-size: var(--loop-size-h1);
	line-height: var(--loop-lh-heading);
	letter-spacing: var(--loop-track-display);
	text-transform: uppercase;
	color: var(--loop-black);
}

/* ==========================================================================
   TASK 20 — Il checkout

   Misurato sui campi realmente visibili:

     15 campi di testo            52 px
      2 select paese/stato        52 px   (nascosti sotto select2)
      4 controlli select2         62 px   ← quelli che si vedono
      1 area note                 58 px
        «Place order»             55 px

   I quattro controlli piu' visibili della pagina - paese e stato, in
   fatturazione e spedizione - sono dieci pixel piu' alti di tutti gli altri.
   In un modulo di ventun campi dieci pixel su quattro righe si notano: la
   colonna non e' piu' una colonna.

   Una nota: `wc-stripe-hidden-style-input` misura 53px ed e' rimasto com'e'.
   Non e' un campo: e' la sonda che Stripe legge per copiare lo stile del
   tema dentro il proprio iframe. Toccarla significherebbe cambiare l'aspetto
   del campo carta senza vederlo.
   ========================================================================== */

/* 20.1 — I controlli select2 alla stessa altezza degli altri campi. */
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--single {
	height: var(--loop-h-control);
	border: 1px solid var(--loop-300);
	border-radius: var(--loop-radius-control);
	background: var(--loop-white);
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	display: flex;
	align-items: center;
	height: var(--loop-h-control);
	padding-inline: var(--loop-s-4);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	line-height: 1;
	color: var(--loop-ink);
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: var(--loop-h-control);
	right: var(--loop-s-2);
}
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--loop-accent);
	outline: var(--loop-focus);
	outline-offset: var(--loop-focus-offset);
}

/* 20.2 — L'area note e' alta il doppio di un campo, non 58: cosi' si capisce
   che ci si puo' scrivere piu' di una riga, e la misura resta nel sistema. */
/* La specificita' serve: una regola precedente del tema porta tutti i
   controlli a `min-height: var(--loop-h-control)`, e per l'area note quel
   52 vinceva sul doppio. */
.woocommerce-checkout form .form-row textarea.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce form.checkout .form-row textarea.input-text {
	min-height: calc(var(--loop-h-control) * 2);
	padding-block: var(--loop-s-3);
	line-height: 1.5;
}

/* 20.3 — «Place order» prende l'altezza dell'azione principale, la stessa
   di «Proceed to checkout» nel carrello. Due pagine, un solo pulsante. */
.woocommerce-checkout #place_order,
.woocommerce #place_order {
	min-height: var(--loop-h-primary);
	height: var(--loop-h-primary);
}

/* ==========================================================================
   TASK 04 (completamento) — La testata del selettore taglia

     SIZE                              SIZE GUIDE
     [ S ] [ M ] [ L ]

   L'etichetta la scrive il tema, non WooCommerce: la guida taglie deve
   stare sulla stessa riga, a destra, e la cella originale della tabella
   non e' allineabile li' senza trucchi fragili.

   La cella originale si nasconde **solo** quando il JavaScript e' vivo
   (classe `loop-swatch-on` sulla radice). Senza JavaScript restano
   l'etichetta di WooCommerce e il menu a tendina, come prima.
   ========================================================================== */

html.loop-swatch-on .woocommerce div.product form.cart .variations th.label { display: none; }

.loop-swatch__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--loop-s-4);
	margin-bottom: var(--loop-s-2);
}

.loop-swatch__label {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

.loop-swatch .loop-swatch__guide,
.loop-swatch__guide {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: var(--loop-h-tap);
	margin-block: calc(var(--loop-h-tap) / -2 + 0.55em);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--loop-300);
	transition: text-decoration-color var(--loop-dur) var(--loop-ease),
	            color var(--loop-dur) var(--loop-ease);
}
.loop-swatch .loop-swatch__guide:hover,
.loop-swatch__guide:hover {
	color: var(--loop-black);
	text-decoration-color: var(--loop-black);
}
.loop-swatch__guide:focus-visible {
	outline: var(--loop-focus);
	outline-offset: var(--loop-focus-offset);
}

/* ==========================================================================
   TASK 12 (completamento) — I due gruppi dell'archivio

   THE PIECES / THE SETS. Titoli di gruppo, non titoli di pagina: piu'
   piccoli dell'h1, con la scala micro delle etichette, cosi' guidano senza
   competere con «SHOP».
   ========================================================================== */

/* Fase 4.5A.2 — Task 09. La classe e' ripetuta perche' il kit Elementor
   scrive `.elementor-kit-1175 h2` — una classe piu' un elemento, (0,1,1) —
   e una classe sola perdeva: i due titoli di gruppo uscivano a 50px neri
   accanto a un h1 di 56px, cioe' esattamente quello che questa regola
   diceva di voler evitare. Con la classe ripetuta si sta a (0,2,0) e la
   scala micro arriva davvero a destinazione. */
.loop-shop-group.loop-shop-group {
	margin: 0 0 var(--loop-s-4);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}
/* Fase 4.5A.2 — Task 09. Il titolo del secondo gruppo era disegnato con
   `content:` sopra la prima scheda-insieme: si vedeva ma non esisteva.
   Ora e' un elemento della griglia, largo tutta la riga, e la riga
   successiva riparte da sola dalla prima colonna. Non serve piu' ne'
   spostare la scheda, ne' pareggiare l'altezza di quella accanto: erano
   due correzioni al servizio di un titolo finto. */
.woocommerce ul.products li.loop-shop-group-item {
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: var(--loop-section) 0 0;
	list-style: none;
}
.woocommerce ul.products li.loop-shop-group-item .loop-shop-group.loop-shop-group {
	margin: 0;
}

/* ==========================================================================
   TASK 15 (completamento) — La quantita' fa un passo indietro

   L'acquisto normale e' uno. Il campo quantita' accanto al pulsante chiede
   una decisione che quasi nessuno deve prendere, e la chiede **prima**
   dell'unica decisione che conta.

   Non si toglie - WooCommerce ne ha bisogno e chi vuole due felpe deve
   poterle comprare. Si smette di trattarlo come un pari grado del pulsante:
   bordo piu' leggero, testo in grigio medio, nessun peso. Chi lo cerca lo
   trova, chi non lo cerca non lo vede.
   ========================================================================== */

.woocommerce div.product form.cart .quantity input.qty {
	border-color: var(--loop-300);
	color: var(--loop-muted);
	font-weight: 400;
}
.woocommerce div.product form.cart .quantity input.qty:hover,
.woocommerce div.product form.cart .quantity input.qty:focus {
	border-color: var(--loop-800);
	color: var(--loop-ink);
}

/* ==========================================================================
   TASK 14 (completamento) — Che cosa contiene, prima di com'e' fatto

   Sui due insiemi il primo fatto della descrizione elenca i componenti:
   «Stars Hoodie + Stars Pants + Bandit Tee». Non e' una specifica come le
   altre — e' che cosa si porta a casa — e in mezzo al peso del cotone si
   perdeva.

   Sale sopra l'elenco, con la sua etichetta. Nessuna parola inventata:
   e' la stessa riga che c'era, spostata dove conta.
   ========================================================================== */

.loop-specs__includes {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--loop-s-1) var(--loop-s-3);
	margin-bottom: var(--loop-s-3);
	padding-bottom: var(--loop-s-3);
	border-bottom: var(--loop-border);
}

.loop-specs__includes-label {
	flex: 0 0 auto;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

.loop-specs__includes-value {
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 500;
	line-height: 1.45;
	color: var(--loop-black);
}

/* ==========================================================================
   TASK 23 — I moduli SliceWP entrano nel sistema

   Le regole c'erano gia', ma erano legate a `.loop-page`: una classe che
   sta sulle pagine costruite da noi e **non** su `/affiliate-account/`.
   Risultato misurato: su Partners i campi erano a posto, sulla pagina
   affiliati le etichette tornavano 16px/400 di sistema.

   Qui la portata passa dal contenitore al componente: `.slicewp-form` e'
   gia' abbastanza specifico da non toccare altro, e vale ovunque il plugin
   stampi un modulo — incluse le pagine che nasceranno domani.

   Difetti misurati e chiusi:
     - `input[type=url]` alto 50px contro i 52 di tutti gli altri;
     - etichette fuori scala sulla pagina affiliati;
     - pulsante «Register» nero pieno `rgb(0,0,0)` invece dell'accento di
       marca #322A2D: nero puro non esiste nel sistema LOOP;
     - area di testo alta 132px, un numero che non appartiene a nessuna
       scala.
   ========================================================================== */

.slicewp-form .slicewp-form-field { margin-bottom: var(--loop-s-4); }

/* L'anello di messa a fuoco non si ridichiara qui. Il blocco TASK 03 lo
   descrive gia' per `.slicewp-form input|select|textarea` insieme ai campi
   del checkout e alla quantita': una regola sola, e i moduli affiliati si
   comportano come ogni altro modulo del sito. Riscriverlo qui produceva
   l'unica differenza rimasta — bordo trasparente invece del bordo accento
   di tutti gli altri campi. */

.slicewp-form.slicewp-form.slicewp-form label {
	display: block;
	margin-bottom: var(--loop-s-2);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-muted);
}

/* Perche' la classe e' ripetuta tre volte: il kit Elementor dichiara la
   tipografia dei campi su
   `.elementor-kit-1175 input:not([type="button"]):not([type="submit"])`,
   che vale (0,3,1) perche' ogni :not() porta con se' il peso del suo
   argomento. Scritto in modo normale, `.slicewp-form input[type="text"]`
   vale (0,2,1) e perde: misurato, i campi di testo uscivano a 18px mentre
   l'area di testo, il menu a tendina e ogni campo del checkout stavano a
   16px. Ripetere la classe porta a (0,4,1) e riprende la proprieta' senza
   !important e senza dipendere dall'ID del kit, che puo' cambiare. */
.slicewp-form.slicewp-form.slicewp-form input[type="text"],
.slicewp-form.slicewp-form.slicewp-form input[type="email"],
.slicewp-form.slicewp-form.slicewp-form input[type="url"],
.slicewp-form.slicewp-form.slicewp-form input[type="tel"],
.slicewp-form.slicewp-form.slicewp-form input[type="number"],
.slicewp-form.slicewp-form.slicewp-form input[type="password"],
.slicewp-form.slicewp-form.slicewp-form select {
	box-sizing: border-box;
	width: 100%;
	height: var(--loop-h-control);
	min-height: var(--loop-h-control);
	padding: 0 var(--loop-s-4);
	border: 1px solid var(--loop-300);
	border-radius: var(--loop-radius-control);
	background: var(--loop-white);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	color: var(--loop-ink);
}

/* Tre righe di altezza: «come pensi di generare vendite» non e' una
   domanda da una riga, e la scatola deve dirlo prima che si cominci a
   scrivere. Tre volte l'altezza di un campo, non centotrentadue pixel. */
.slicewp-form.slicewp-form.slicewp-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: calc(var(--loop-h-control) * 3);
	padding: var(--loop-s-3) var(--loop-s-4);
	border: 1px solid var(--loop-300);
	border-radius: var(--loop-radius-control);
	background: var(--loop-white);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-body);
	line-height: 1.6;
	color: var(--loop-ink);
}

.slicewp-form.slicewp-form.slicewp-form input[type="submit"],
.slicewp-form.slicewp-form.slicewp-form button[type="submit"] {
	min-height: var(--loop-h-primary);
	height: var(--loop-h-primary);
	padding-inline: var(--loop-s-6);
	border: 0;
	border-radius: var(--loop-radius-control);
	background: var(--loop-accent);
	color: var(--loop-accent-ink);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	cursor: pointer;
}
.slicewp-form.slicewp-form.slicewp-form input[type="submit"]:hover,
.slicewp-form.slicewp-form.slicewp-form button[type="submit"]:hover {
	background: var(--loop-black);
	color: var(--loop-white);
}

/* Messaggi del plugin: stessa famiglia del resto, niente riquadri di
   sistema. */
.slicewp-notice,
.slicewp-form .slicewp-notice {
	padding: var(--loop-s-4);
	border: 1px solid var(--loop-300);
	border-radius: var(--loop-radius-panel);
	background: var(--loop-100);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	line-height: 1.5;
	color: var(--loop-ink);
}
.slicewp-notice-error,
.slicewp-form .slicewp-notice-error {
	border-color: var(--loop-800);
	background: var(--loop-white);
	color: var(--loop-black);
}

/* ==========================================================================
   Fase 4.5A.2 — Task 11. Il pannello del carrello

   Scorre da destra, copre la pagina con un velo, e si chiude con la ×, con
   Esc o toccando fuori. Su telefono prende quasi tutta la larghezza perche'
   una colonna stretta accanto a un velo non serve a nessuno; da 480px in su
   si ferma a 420 e la pagina resta visibile dietro, cosi' si capisce che si
   sta guardando un pannello e non si e' cambiata pagina.
   ========================================================================== */

.loop-drawer {
	position: fixed;
	inset: 0;
	z-index: 9000;
}

/* Con la barra di amministrazione la pagina e' spinta in giu' ma un
   elemento fisso no: l'intestazione del pannello finiva sotto la barra.
   Riguarda solo chi e' connesso, cioe' il proprietario. */
body.admin-bar .loop-drawer { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .loop-drawer { top: 46px; }
}

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

.loop-drawer__veil {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.44);
	opacity: 0;
	transition: opacity var(--loop-dur) var(--loop-ease);
}

.loop-drawer.is-open .loop-drawer__veil { opacity: 1; }

.loop-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	height: 100%;
	background: var(--loop-white, #fff);
	box-shadow: -12px 0 40px rgba(10, 10, 10, 0.14);
	transform: translateX(100%);
	transition: transform var(--loop-dur) var(--loop-ease);
	overflow: hidden;
}

.loop-drawer.is-open .loop-drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.loop-drawer__veil,
	.loop-drawer__panel { transition: none; }
}

.loop-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--loop-s-4);
	padding: var(--loop-s-4) var(--loop-s-5);
	border-bottom: var(--loop-border);
}

.loop-drawer__title.loop-drawer__title {
	margin: 0;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-micro);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	color: var(--loop-ink);
}

/* Classe ripetuta: il tema genitore colora ogni `button` dentro
   `.woocommerce` con le sue variabili (--ehc-button-*), e con una classe
   sola la × usciva come un quadrato nero pieno. */
.loop-drawer__close.loop-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 calc(var(--loop-s-3) * -1) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: var(--loop-ink);
	cursor: pointer;
}

.loop-drawer__close.loop-drawer__close:hover { background: var(--loop-surface); }

.loop-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--loop-s-5);
}

.loop-drawer__loading,
.loop-drawer__error {
	margin: 0;
	font-size: var(--loop-size-small);
	color: var(--loop-muted);
}

/* --- Il contenuto che WooCommerce mette dentro -------------------------
 *
 * Attenzione: su questo sito il mini-carrello NON e' quello di serie.
 * Elementor Pro sostituisce il modello e stampa `elementor-menu-cart__*`
 * con dei `<div>` al posto della lista. Le regole qui sotto si agganciano
 * alle classi WooCommerce che Elementor conserva comunque
 * (`product-thumbnail`, `product-name`, `product-price`, `product-remove`)
 * e coprono anche il modello di serie, cosi' se un giorno Elementor
 * uscisse di scena il pannello continuerebbe a stare in piedi.
 * -------------------------------------------------------------------- */

.loop-drawer__body ul.woocommerce-mini-cart,
.loop-drawer__body .elementor-menu-cart__products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.loop-drawer__body li.woocommerce-mini-cart-item,
.loop-drawer__body .woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr 32px;
	grid-template-areas:
		"foto nome    togli"
		"foto prezzo  prezzo";
	column-gap: var(--loop-s-4);
	align-items: start;
	margin: 0;
	padding: var(--loop-s-4) 0;
	border-bottom: var(--loop-border);
	list-style: none;
}

.loop-drawer__body .product-thumbnail { grid-area: foto; }
.loop-drawer__body .product-name      { grid-area: nome; min-width: 0; }
.loop-drawer__body .product-price     { grid-area: prezzo; }
.loop-drawer__body .product-remove    { grid-area: togli; }

/* Nel modello di serie miniatura e nome stanno dentro lo stesso link,
   senza contenitori: `display: contents` li fa arrivare comunque nelle
   loro caselle. */
.loop-drawer__body li.woocommerce-mini-cart-item > a:not(.remove) {
	display: contents;
}

.loop-drawer__body .product-thumbnail img,
.loop-drawer__body li.woocommerce-mini-cart-item img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	margin: 0;
	object-fit: contain;
	border-radius: var(--loop-radius-media);
	background: var(--loop-surface);
}

.loop-drawer__body .product-name,
.loop-drawer__body .product-name a {
	font-size: var(--loop-size-small);
	font-weight: 500;
	color: var(--loop-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.loop-drawer__body .product-price,
.loop-drawer__body .woocommerce-mini-cart-item .quantity {
	margin: var(--loop-s-2) 0 0;
	font-size: var(--loop-size-small);
	color: var(--loop-muted);
}

.loop-drawer__body dl.variation {
	margin: var(--loop-s-2) 0 0;
	font-size: var(--loop-size-micro);
	line-height: 1.5;
	color: var(--loop-muted);
}

.loop-drawer__body dl.variation dt,
.loop-drawer__body dl.variation dd {
	display: inline;
	margin: 0;
}

.loop-drawer__body dl.variation dd + dt::before {
	content: "\A";
	white-space: pre;
}

.loop-drawer__body dl.variation p { display: inline; margin: 0; }

/* Le due × per articolo non sono un errore: Elementor stampa la sua e
   quella di WooCommerce. Se ne mostra una sola. */
.loop-drawer__body .product-remove a {
	display: none;
}

.loop-drawer__body .product-remove a:first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: var(--loop-muted);
	text-decoration: none;
}

.loop-drawer__body .product-remove a:first-child:hover {
	background: var(--loop-surface);
	color: var(--loop-ink);
}

/* Alcune × arrivano senza glifo dentro: senza questo restano invisibili. */
.loop-drawer__body .product-remove a:first-child:empty::before {
	content: "\00D7";
}

.loop-drawer__body p.woocommerce-mini-cart__total,
.loop-drawer__body .elementor-menu-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--loop-s-4);
	margin: var(--loop-s-5) 0 var(--loop-s-4);
	padding: 0;
	border: 0;
	font-size: var(--loop-size-body);
	font-weight: 500;
}

.loop-drawer__body p.woocommerce-mini-cart__buttons,
.loop-drawer__body .elementor-menu-cart__footer-buttons {
	display: grid;
	gap: var(--loop-s-3);
	margin: 0;
}

.loop-drawer__body p.woocommerce-mini-cart__buttons a,
.loop-drawer__body .elementor-menu-cart__footer-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--loop-h-control);
	box-sizing: border-box;
	margin: 0;
	padding: 0 var(--loop-s-4);
	border-radius: var(--loop-radius-control);
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 600;
	letter-spacing: var(--loop-track-micro);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	background: var(--loop-ink);
	color: var(--loop-white, #fff);
}

/* «View cart» e' l'uscita secondaria, «Checkout» l'azione del pannello. */
.loop-drawer__body p.woocommerce-mini-cart__buttons a:not(.checkout),
.loop-drawer__body .elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
	background: none;
	border: 1px solid var(--loop-800);
	color: var(--loop-ink);
}

/* E siccome e' l'azione principale, ha l'altezza delle azioni principali:
   54px, come «Proceed to checkout» nel carrello e «Place order» alla cassa.
   Nella prima stesura era 52, cioe' l'altezza dei controlli secondari:
   trovato al TASK 18 confrontando le altezze lungo tutto il percorso. */
.loop-drawer__body p.woocommerce-mini-cart__buttons a.checkout,
.loop-drawer__body .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
	min-height: var(--loop-h-primary);
}

.loop-drawer__body .woocommerce-mini-cart__empty-message,
.loop-drawer__body .elementor-menu-cart__empty-message,
.loop-drawer__body p.woocommerce-mini-cart__empty-message {
	margin: 0;
	font-size: var(--loop-size-small);
	color: var(--loop-muted);
}

/* La pagina dietro non deve scorrere mentre il pannello e' aperto. */
html.loop-drawer-open,
html.loop-drawer-open body { overflow: hidden; }

/* ==========================================================================
   Fase 4.5A.2 — Task 13. Il consenso si puo' ritirare

   «Cookies» in fondo alla colonna Help riapre il banner. E' un `<button>`
   perche' apre un pannello, non porta su un'altra pagina, ma nella lista
   deve leggersi come i suoi vicini: stessa scala, stesso colore, stessa
   sottolineatura al passaggio, stessa area di tocco da 44px.

   La classe e' ripetuta per la stessa ragione della × del pannello
   carrello: il tema genitore colora ogni `button` dentro `.woocommerce`.
   ========================================================================== */

.loop-footer .loop-footer__nav .loop-footer__link-btn.loop-footer__link-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: none;
	font-family: var(--loop-font-text);
	font-size: var(--loop-size-small);
	font-weight: 500;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: rgba(255, 255, 255, 0.86);
	cursor: pointer;
	transition: border-color var(--loop-dur) var(--loop-ease), color var(--loop-dur) var(--loop-ease);
}

.loop-footer .loop-footer__nav .loop-footer__link-btn.loop-footer__link-btn:hover,
.loop-footer .loop-footer__nav .loop-footer__link-btn.loop-footer__link-btn:focus-visible {
	color: var(--loop-white);
	border-bottom-color: var(--loop-white);
}

.loop-footer .loop-footer__nav .loop-footer__link-btn.loop-footer__link-btn:focus-visible {
	outline: 2px solid var(--loop-white);
	outline-offset: var(--loop-focus-offset);
}

/* Quando il banner torna, dice quale delle due scelte e' quella attiva:
   riaprirlo senza mostrare cosa si era scelto obbliga a indovinare. */
.loop-consent .loop-consent__btn[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--loop-white);
}

/* ==========================================================================
   Fase 4.5A.2 — Task 16. Il messaggio che spiega perche' lo sconto non e'
   entrato era il testo piu' piccolo della pagina

   Misurato: `.coupon-error-notice` usciva a **10,5px** — WooCommerce lo
   dichiara in `em` e il contenitore e' gia' piccolo, quindi si moltiplicano.
   Sotto c'e' scritto «Coupon "..." has expired» o «Please enter a valid
   email at checkout»: e' l'unica cosa che dice al cliente cosa fare, e
   arrivava a meta' della scala minima del sito.

   Portato alla scala micro (12px) con il rosso del sistema invece del
   rosso di serie di WooCommerce.
   ========================================================================== */

/* WooCommerce dichiara questa regola dietro un selettore con ID
   (`.woocommerce #content table.cart td.actions .coupon
   .coupon-error-notice`, specificita' 1-4-2): senza un ID nostro non la si
   raggiunge, e inseguire un ID altrui per due proprieta' e' peggio del
   rimedio. Stesso criterio usato altrove nel foglio: `!important` solo per
   riprendersi cio' che un foglio di terze parti si e' preso. */
.woocommerce .coupon-error-notice,
.woocommerce-page .coupon-error-notice,
.woocommerce form .coupon-error-notice {
	display: block;
	margin-top: var(--loop-s-2);
	font-size: var(--loop-size-micro) !important;
	line-height: 1.45;
	color: var(--loop-danger) !important;
}

/* ==========================================================================
   Fase 4.5A.2 — Task 16. Il campo coupon della cassa era largo 79 pixel

   Misurato a 390px: WooCommerce mette campo e pulsante su una riga con due
   colonne flottanti al 47%. Ma «Apply coupon» e' largo 190px di suo, si
   prende la sua meta' e pure quella dell'altro, e al campo restano **79
   pixel** — circa cinque caratteri visibili per un codice che ne ha undici.
   Sul carrello lo stesso campo e' largo tutta la riga; alla cassa, dove il
   codice si inserisce davvero, era inutilizzabile.

   Stessa soluzione gia' scelta per il carrello: sopra i 480px campo
   elastico e pulsante alla sua larghezza naturale, sotto i 480 uno sopra
   l'altro. Il campo non viene mai stretto.
   ========================================================================== */

.woocommerce form.checkout_coupon,
.woocommerce-page form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--loop-s-3);
	align-items: stretch;
}

.woocommerce form.checkout_coupon .form-row,
.woocommerce-page form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce form.checkout_coupon .form-row-first,
.woocommerce-page form.checkout_coupon .form-row-first {
	flex: 1 1 12rem;
	min-width: 0;
}

.woocommerce form.checkout_coupon .form-row-last,
.woocommerce-page form.checkout_coupon .form-row-last {
	flex: 0 1 auto;
}

.woocommerce form.checkout_coupon input[name="coupon_code"],
.woocommerce-page form.checkout_coupon input[name="coupon_code"] {
	width: 100%;
	margin: 0;
}

.woocommerce form.checkout_coupon .clear,
.woocommerce-page form.checkout_coupon .clear { display: none; }

@media (max-width: 480px) {
	.woocommerce form.checkout_coupon .form-row-first,
	.woocommerce form.checkout_coupon .form-row-last,
	.woocommerce-page form.checkout_coupon .form-row-first,
	.woocommerce-page form.checkout_coupon .form-row-last {
		flex: 1 1 100%;
	}
	.woocommerce form.checkout_coupon .button,
	.woocommerce-page form.checkout_coupon .button { width: 100%; }
}

/* ==========================================================================
   PHASE 4.5B — TASK 1
   The guest line at the top of checkout.

   Deliberately plain. TASK 2 rebuilds the whole utility area around it —
   spacing, the login box and the coupon position — so this rule does the
   minimum that makes the sentence readable and correctly ranked: it is
   information, not an alert, so it carries no panel and no border.
   ========================================================================== */

.loop-checkout-guest {
	margin: 0 0 16px;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--loop-ink);
}

/* ==========================================================================
   PHASE 4.5B — TASK 2
   The checkout utility area, and the heading ladder.

   Measured before, as a guest at 390 px: two alert-shaped panels, 182 px of
   them, between the customer and the first field. They are not alerts. The
   login one carried a pseudo-glyph from the "WooCommerce" icon font that this
   site never loads, so it printed an empty box.

   The theme is !important-free by choice. The parent theme reaches
   `.woocommerce-info` at (0,1,1) and Elementor per-widget rules reach (0,4,0),
   so every rule here repeats its class to climb above them without an ID and
   without !important.
   ========================================================================== */

/* --- 1. The two utility panels stop looking like alerts ------------------- */

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	color: var(--loop-muted);
}

/* The glyph came from an icon font the site does not load: an empty square. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
	display: none;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover {
	color: var(--loop-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 2. The guest line leads, the login line follows ---------------------- */

.loop-checkout-guest {
	margin: 0 0 8px;
}

.woocommerce-checkout .woocommerce-form-login-toggle {
	margin: 0 0 24px;
}

/* --- 3. The opened login form: compact, 52 px fields, 12-16 px gaps ------- */

.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid var(--loop-line);
	border-radius: var(--loop-radius);
	background: var(--loop-050);
}

.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login input.input-text {
	min-height: 52px;
}

.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login button {
	min-height: 52px;
}

.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce-checkout form.woocommerce-form-login.woocommerce-form-login .lost_password {
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 12px;
}

/* --- 4. The code block, in the order region ------------------------------- */

.loop-code {
	margin: 0 0 24px;
	padding: 0;
}

.loop-code__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--loop-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.loop-code__panel {
	margin-top: 12px;
}

.loop-code__label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--loop-font-text);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--loop-muted);
}

/* Stacked, never side by side. Measured in phase 4.5A.2: side by side at
   390 px the field falls to 119 px, which is not a field any more. */
.loop-code__row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.loop-code__input {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--loop-line);
	border-radius: var(--loop-radius);
	background: var(--loop-white);
	font-family: var(--loop-font-text);
	font-size: 16px;   /* under 16 px iOS zooms the page on focus */
	line-height: 22px;
	color: var(--loop-ink);
	text-transform: uppercase;
}

.loop-code__apply {
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid var(--loop-ink);
	border-radius: var(--loop-radius);
	background: var(--loop-white);
	font-family: var(--loop-font-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--loop-ink);
	cursor: pointer;
}

.loop-code__apply:hover { background: var(--loop-100); }
.loop-code__apply[disabled] { opacity: .6; cursor: default; }

.loop-code__feedback {
	margin: 8px 0 0;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	min-height: 0;
}

.loop-code__feedback:empty { display: none; }
.loop-code__feedback.is-ok      { color: var(--loop-success); }
.loop-code__feedback.is-error   { color: var(--loop-danger); }
.loop-code__feedback.is-working { color: var(--loop-muted); }

/* --- 5. The heading ladder ------------------------------------------------ */

.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout h3#order_review_heading {
	font-family: var(--loop-font-display);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--loop-ink);
	margin: 0 0 16px;
}

/* --- 6. Air between the major sections, not a box around each one --------- */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	margin: 0 0 28px;
}

.woocommerce-checkout #order_review_heading {
	margin-top: 32px;
}

@media (min-width: 782px) {

	.woocommerce-checkout .woocommerce h3,
	.woocommerce-checkout h3#order_review_heading {
		font-size: 22px;
		line-height: 30px;
	}

	/* Desktop has the room, so the code field and its button share a line. */
	.loop-code__row {
		flex-direction: row;
		align-items: stretch;
	}

	.loop-code__input { flex: 1 1 auto; }
	.loop-code__apply { flex: 0 0 auto; }
}

/* ==========================================================================
   PHASE 4.5B — TASK 3
   Optional fields behind a named control, and active targets you can hit.

   Measured before, as a guest at 390 px:

     #billing_address_2 row    height  58
     #order_comments   row    height 146
     every checkbox           18 x 18
     the Local pickup radio   13 x 18   - squashed by its own row

   WCAG 2.2 target size (minimum) is 24 x 24 CSS px. Three of these controls
   were under it, and one was under it in one direction only, which is the kind
   of thing that reads fine in a screenshot and misses under a thumb.
   ========================================================================== */

/* --- The control that opens an optional field ---------------------------- */

.loop-reveal {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--loop-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.loop-reveal:hover { color: var(--loop-700); }

/* --- Boxes and radios big enough to hit ---------------------------------- */

.woocommerce-checkout.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout.woocommerce-checkout input[type="radio"],
.woocommerce-cart.woocommerce-cart input[type="checkbox"],
.woocommerce-cart.woocommerce-cart input[type="radio"] {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	flex: 0 0 24px;   /* never let a flex row squash it, as Local pickup did */
	margin: 0 10px 0 0;
	vertical-align: middle;
	accent-color: var(--loop-ink);
}

/* The label is the real target: it carries the 44 px, the box sits inside it. */
.woocommerce-checkout.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: 0;
	cursor: pointer;
}

/* Keep the focus ring: it is the only thing a keyboard user has. */
.woocommerce-checkout.woocommerce-checkout input[type="checkbox"]:focus-visible,
.woocommerce-checkout.woocommerce-checkout input[type="radio"]:focus-visible {
	outline: 2px solid var(--loop-ink);
	outline-offset: 2px;
}

/* --- TASK 2 leftover: the Apply button lost to the parent theme ----------
   `.loop-code__apply` is (0,1,0); the parent theme reaches `button` inside
   `.woocommerce` at (0,1,1) and won. The class repeated makes it (0,2,0). */

.loop-code__apply.loop-code__apply {
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --- TASK 3, correzione: la riga collassata ------------------------------
   Il controllo vive DENTRO la riga del campo, non accanto. Collassata, la riga
   nasconde etichetta e campo e mostra solo il controllo; aperta, torna una
   riga normale e il controllo sparisce. Cosi' chi ri-ordina le righe - il
   gateway Stripe lo fa dopo il caricamento - sposta le due cose insieme. */

.woocommerce-checkout .form-row.loop-collapsed {
	margin: 0 0 8px;
	padding: 0;
}

.woocommerce-checkout .form-row.loop-collapsed > label,
.woocommerce-checkout .form-row.loop-collapsed > .woocommerce-input-wrapper,
.woocommerce-checkout .form-row.loop-collapsed > span.woocommerce-input-wrapper,
.woocommerce-checkout .form-row.loop-collapsed > input,
.woocommerce-checkout .form-row.loop-collapsed > textarea {
	display: none;
}

/* ==========================================================================
   PHASE 4.5B — TASK 4
   The order summary and the shipping choice, at phone width.

   Measured before, as a guest at 390 px:

     review row        product name and price share one table row
     #shipping_method li   width 191 px - half the screen, because the
                           shipping row of the totals table is a th/td pair
                           and the th eats the other half
     Local pickup helper copy   squeezed into those 191 px, 78 px tall

   A shipping method is a choice, so it gets a row you can hit, and its helper
   copy gets the full width to be read in.
   ========================================================================== */

/* --- 1. The size line of a bundle, on one line --------------------------- */

.woocommerce .variation,
.woocommerce-checkout .variation,
.woocommerce-cart .variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
	margin: 4px 0 0;
	font-family: var(--loop-font-text);
	font-size: 13px;
	line-height: 18px;
	color: var(--loop-muted);
}

.woocommerce .variation dt,
.woocommerce .variation dd {
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.woocommerce .variation dd p { margin: 0; display: inline; }

/* One middle dot between pairs, and none before the first. */
.woocommerce .variation dt:not(:first-of-type)::before {
	content: "·";
	margin-right: 4px;
	color: var(--loop-400);
}

/* --- 2. The review row at phone width ------------------------------------ */

@media (max-width: 781px) {

	.woocommerce-checkout-review-order-table tbody tr {
		display: block;
		padding: 12px 0;
	}

	/* Name, quantity and sizes get the whole reading width. */
	.woocommerce-checkout-review-order-table tbody td.product-name {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		text-align: left;
	}

	/* The price sits on its own line, hard against the right edge. */
	.woocommerce-checkout-review-order-table tbody td.product-total {
		display: block;
		width: 100%;
		padding: 6px 0 0;
		border: 0;
		text-align: right;
		font-weight: 600;
	}

	/* --- 3. Shipping: one full-width row per method ---------------------- */

	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
		display: block;
		width: 100%;
	}

	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
		display: block;
		width: 100%;
		padding: 0;
		text-align: left;
	}

	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
		padding-bottom: 8px;
	}
}

/* The shipping rows themselves, at every width. */

#shipping_method {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #shipping_method li,
#shipping_method li {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 10px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	align-items: center;
	border-bottom: 1px solid var(--loop-200);
}

#shipping_method li:last-child { border-bottom: 0; }

#shipping_method li input.shipping_method {
	grid-column: 1;
	grid-row: 1;
}

/* First line: method on the left, price on the right. */
.woocommerce-checkout #shipping_method li label,
#shipping_method li label {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 24px;
	margin: 0;
	padding: 0;
	font-family: var(--loop-font-text);
	font-size: 15px;
	line-height: 22px;
	color: var(--loop-ink);
	cursor: pointer;
}

/* Second line: the helper copy, full width, its own line. */
#shipping_method li .loop-ship__note {
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	margin: 4px 0 0;
	font-family: var(--loop-font-text);
	font-size: 13px;
	line-height: 18px;
	color: var(--loop-muted);
}

/* --- 4. Totals and VAT, readable at 360 px ------------------------------- */

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	font-family: var(--loop-font-text);
	font-size: 15px;
	line-height: 22px;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total small,
.woocommerce-checkout-review-order-table tfoot .includes_tax {
	display: block;
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: var(--loop-muted);
}

/* --- TASK 4, correzione: la tabella del riepilogo deve essere larga ------
   Misurato a 390 px sulla 0.9.150: la riga prodotto e la riga spedizione
   erano larghe **221 px** invece dei 350 disponibili. Causa: rendendo `tr` e
   `td` dei blocchi, l'elemento `table` resta `display: table` e si stringe sul
   contenuto. Finche' la tabella non diventa anch'essa un blocco a larghezza
   piena, ogni `width: 100%' dentro di essa si misura su 221 px. */

@media (max-width: 781px) {

	.woocommerce-checkout-review-order-table,
	.woocommerce-checkout-review-order-table tbody,
	.woocommerce-checkout-review-order-table tfoot {
		display: block;
		width: 100%;
	}

	/* Le righe dei totali: voce a sinistra, importo a destra, larghezza piena. */
	.woocommerce-checkout-review-order-table tfoot tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 8px 0;
	}

	.woocommerce-checkout-review-order-table tfoot tr th,
	.woocommerce-checkout-review-order-table tfoot tr td {
		display: block;
		width: auto;
		padding: 0;
		text-align: right;
	}

	.woocommerce-checkout-review-order-table tfoot tr th {
		text-align: left;
		white-space: nowrap;
	}

	/* La spedizione fa eccezione: le scelte vanno sotto la voce, a tutta riga. */
	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
		display: block;
	}

	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
		display: block;
		width: 100%;
		text-align: left;
	}
}

/* --- TASK 4, seconda correzione: vincere la regola della fase 4.5A.2 -----
   Interrogato il CSSOM con `el.matches(r.selectorText)` su tutte le
   `styleSheets`, come nelle fasi precedenti. La regola che vinceva e':

     .woocommerce ul#shipping_method li   ->  display: flex   (1,1,2)

   La mia valeva (1,1,1) e perdeva, quindi la riga restava flex e l'etichetta e
   la nota si spartivano 150 px invece di prendersi la larghezza intera.
   Classe ripetuta: (1,2,2). Nessun !important, nessun ID nuovo. */

.woocommerce.woocommerce ul#shipping_method li,
.woocommerce-checkout.woocommerce-checkout ul#shipping_method li {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 10px;
	row-gap: 0;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	align-items: center;
}

.woocommerce.woocommerce ul#shipping_method li > input.shipping_method,
.woocommerce-checkout.woocommerce-checkout ul#shipping_method li > input.shipping_method {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce.woocommerce ul#shipping_method li > label,
.woocommerce-checkout.woocommerce-checkout ul#shipping_method li > label {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 24px;
	margin: 0;
}

.woocommerce.woocommerce ul#shipping_method li > .loop-ship__note,
.woocommerce-checkout.woocommerce-checkout ul#shipping_method li > .loop-ship__note {
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	margin: 4px 0 0;
}

/* La lista intera, non solo le righe. */
.woocommerce.woocommerce ul#shipping_method,
.woocommerce-checkout.woocommerce-checkout ul#shipping_method {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   PHASE 4.5B — TASK 5
   The gap between the last size control and the CTA, on the Full Set only.

   Measured live as a guest at 390 px, on 0.9.152:

     last .loop-swatch__opt   bottom 1378
     a.reset_variations       top 1394  height 44   visibility: hidden
     table.variations         bottom 1438  margin-bottom 16
     .single_add_to_cart_button  top 1454

     gap = 1454 - 1378 = 76 px

   The 76 px is not padding anyone chose. It is WooCommerce's "Clear" link:
   until a variation is selected the link is `visibility: hidden`, which hides
   it but **keeps its 44 px in the flow**. Add the 8 px under the size row and
   the 16 px under the table and you have exactly 76.

   So the fix is not to shave margins - that would move the CTA up now and back
   down the moment the customer picks a size, which is worse. The link is taken
   out of the flow and pinned to the top right of the variation block, where it
   keeps its 44 px target and costs no vertical space in either state.

   Scope: only `form.variations_form`, so only variable products. The three
   individual products have one size group and are untouched.
   ========================================================================== */

.woocommerce div.product form.variations_form {
	position: relative;
}

.woocommerce div.product form.variations_form a.reset_variations {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 44px;
	margin: 0;
	padding: 0;
	font-family: var(--loop-font-text);
	font-size: 13px;
	line-height: 18px;
	color: var(--loop-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
}

.woocommerce div.product form.variations_form a.reset_variations:hover {
	color: var(--loop-ink);
}

/* ==========================================================================
   PHASE 4.5B — TASK 6
   The confirmation that appears after adding to the cart.

   Same shape as the cart panel of phase 4.5A.2 - veil, panel, focus trap -
   because a second visual language for the same moment would be one more thing
   to learn. It says what was added and offers the two ways forward. Nothing
   else: no cross-sell, no countdown, no "only 2 left".
   ========================================================================== */

.loop-added {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.loop-added[hidden] { display: none; }

.loop-added__veil {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, .55);
}

.loop-added__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 24px;
	background: var(--loop-white);
	border-radius: var(--loop-radius);
	box-shadow: 0 24px 60px rgba(10, 10, 10, .22);
}

.loop-added__title {
	margin: 0 0 12px;
	font-family: var(--loop-font-display);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--loop-ink);
}

.loop-added__product {
	margin: 0 0 4px;
	font-family: var(--loop-font-text);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--loop-ink);
}

.loop-added__sizes {
	margin: 0 0 4px;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	color: var(--loop-muted);
}

.loop-added__sizes:empty { display: none; }

.loop-added__price {
	margin: 0 0 20px;
	font-family: var(--loop-font-text);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--loop-ink);
}

.loop-added__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.loop-added__cart,
.loop-added__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;   /* l'altezza dell'azione principale, fase 4.5A.2 */
	padding: 0 20px;
	font-family: var(--loop-font-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-decoration: none;
}

.loop-added__cart {
	border: 1px solid var(--loop-ink);
	background: var(--loop-white);
	color: var(--loop-ink);
}

.loop-added__checkout {
	border: 1px solid var(--loop-ink);
	background: var(--loop-ink);
	color: var(--loop-white);
}

.loop-added__cart:hover     { background: var(--loop-100); }
.loop-added__checkout:hover { background: var(--loop-900); }

.loop-added__close {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--loop-font-text);
	font-size: 14px;
	line-height: 20px;
	color: var(--loop-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.loop-added__close:hover { color: var(--loop-ink); }

@media (min-width: 640px) {
	.loop-added__actions { flex-direction: row; }
	.loop-added__cart,
	.loop-added__checkout { flex: 1 1 50%; }
}

/* ==========================================================================
   PHASE 4.5B — TASK 7
   The heading ladder on the WooCommerce utility pages.

   Measured live as a guest at 390 px, on /my-account/:

     H1  "My account"   24,62 / 27,57   700
     H2  "Login"        24    / 26,4    600

   Six tenths of a pixel between the page title and a section heading is not a
   hierarchy. The brief asks for H1 about 27 and utility H2 22-24 on the phone,
   H1 36 and H2 at most 28 on the desktop.

   Scope, deliberately narrow: only the account, cart and checkout pages, and
   only headings inside the `.woocommerce` wrapper. The footer headings live
   outside it and are not touched - measured at 12 / 13,2 · 600 before and after.
   Product pages, the shop, the LOOP page and the legal pages carry other body
   classes and never match.
   ========================================================================== */

body.woocommerce-account.woocommerce-account h1,
body.woocommerce-cart.woocommerce-cart h1,
body.woocommerce-checkout.woocommerce-checkout h1 {
	font-family: var(--loop-font-display);
	font-size: 27px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: -.01em;
}

body.woocommerce-account.woocommerce-account .woocommerce h2,
body.woocommerce-cart.woocommerce-cart .woocommerce h2 {
	font-family: var(--loop-font-display);
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -.01em;
}

@media (min-width: 782px) {

	body.woocommerce-account.woocommerce-account h1,
	body.woocommerce-cart.woocommerce-cart h1,
	body.woocommerce-checkout.woocommerce-checkout h1 {
		font-size: 36px;
		line-height: 40px;
	}

	body.woocommerce-account.woocommerce-account .woocommerce h2,
	body.woocommerce-cart.woocommerce-cart .woocommerce h2 {
		font-size: 28px;
		line-height: 34px;
	}
}

/* --- TASK 7, correzione: l'H1 delle pagine di servizio non cambiava -------
   Misurato sulla 0.9.156 a 390 px: `/my-account/` mostrava ancora
   **24,62 px**. Interrogato il CSSOM, la regola che vinceva e' della fase 4.5A:

     .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title
                                          ->  font-size: var(--loop-size-h2)   (0,4,1)
     body.woocommerce-account.woocommerce-account h1
                                          ->  font-size: 27px                  (0,2,1)  <- la mia

   `--loop-size-h2` e' `clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem)`: a 390 px fa
   24,62, a 1280 px arriva al tetto di 36. Ecco perche' il desktop sembrava
   gia' a posto e il telefono no.

   Una classe in piu' porta la mia a (0,5,1). Resta senza `!important` e senza
   ID, e resta ristretta alle tre pagine di servizio. */

body.woocommerce-account .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
body.woocommerce-cart .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
body.woocommerce-checkout .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title {
	font-size: 27px;
	line-height: 32px;
	font-weight: 700;
}

@media (min-width: 782px) {

	body.woocommerce-account .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
	body.woocommerce-cart .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
	body.woocommerce-checkout .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title {
		font-size: 36px;
		line-height: 40px;
	}
}

/* --- TASK 7, seconda correzione: le pagine di servizio non hanno le classi
   di WooCommerce sul body ---------------------------------------------------
   Misurato sulla 0.9.157: `/cart/` mostrava ancora 24,62 px. Letto il body:

     wp-singular page-template page-template-elementor_header_footer page
     page-id-1200 wp-custom-logo wp-theme-hello-commerce

   **Nessuna classe `woocommerce-cart`.** Carrello e My Account usano un modello
   di pagina Elementor che non stampa le classi di WooCommerce sul body, quindi
   ogni selettore che comincia con `body.woocommerce-cart` non aggancia niente.
   Il checkout invece le ha - per quello le regole dei TASK 2, 3 e 4 hanno
   funzionato subito.

   Si aggancia allora l'identificativo della pagina, che c'e' sempre:
   carrello **1200**, My Account **1203**, cassa **1206**. */

body.page-id-1200 .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
body.page-id-1203 .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
body.page-id-1206 .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title {
	font-size: 27px;
	line-height: 32px;
	font-weight: 700;
}

body.page-id-1200 .woocommerce h2,
body.page-id-1203 .woocommerce h2 {
	font-family: var(--loop-font-display);
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -.01em;
}

@media (min-width: 782px) {

	body.page-id-1200 .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
	body.page-id-1203 .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title,
	body.page-id-1206 .loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title {
		font-size: 36px;
		line-height: 40px;
	}

	body.page-id-1200 .woocommerce h2,
	body.page-id-1203 .woocommerce h2 {
		font-size: 28px;
		line-height: 34px;
	}
}

/* --- TASK 7, terza correzione: `loop-utility-page` sta SUL body -----------
   Misurato sulla 0.9.158: l'H1 restava 24,62 px. Provato il selettore
   direttamente nella pagina:

     h1.matches('body.page-id-1200 .loop-utility-page… h1.elementor-heading-title')
       ->  false
     h1.matches('.loop-utility-page… h1.elementor-heading-title')
       ->  true

   La classe `loop-utility-page` e' **sul body**, non su un contenitore interno.
   `body.page-id-1200 .loop-utility-page` cerca quindi un discendente che non
   esiste, e non aggancia niente. Letto il body per intero:

     … page-id-1200 … woocommerce-cart woocommerce-page … loop-utility-page …

   Quindi la classe va ripetuta sul body stesso. Quattro volte fa (0,5,2) e
   batte la regola della 4.5A, che vale (0,4,1). Il perimetro resta lo stesso:
   solo le pagine che portano `loop-utility-page`, cioe' carrello, cassa e
   My Account. */

body.loop-utility-page.loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title {
	font-size: 27px;
	line-height: 32px;
	font-weight: 700;
}

@media (min-width: 782px) {
	body.loop-utility-page.loop-utility-page.loop-utility-page.loop-utility-page h1.elementor-heading-title {
		font-size: 36px;
		line-height: 40px;
	}
}

/* ==========================================================================
   PHASE 4.5B — REGRESSION A
   Active targets found under the WCAG 2.2 minimum during the mobile sweep.

   Measured at 360 px on all sixteen routes. These are the controls that came
   back under 24 x 24 CSS px:

     BUTTON.show-password-input      22 x 22   /my-account/
     A.slicewp-show-hide-password    22 x 22   /partners/, /affiliate-account/
     INPUT[type=checkbox]            18 x 18   /my-account/ ("Remember me")
     INPUT[type=checkbox]            22 x 22   home, GET LOCKED IN consent
     A.woocommerce-remove-coupon     63 x 17   /cart/, /checkout/

   The phase 4.5B rules of Task 3 had raised the boxes on the cart and checkout
   only. These are the same controls on the pages that were out of that scope.

   NOT a defect, checked and dismissed: `select.country_to_state` and
   `select.state_select` measure 1 x 52 on the checkout. They carry
   `select2-hidden-accessible` and `tabindex="-1"`: Select2 hides the native
   control and renders its own. They are not reachable and are not targets.

   Also NOT a defect: the inline text links measuring about 79 x 15. WCAG 2.2
   target size exempts a link inside a sentence of text.
   ========================================================================== */

/* --- Password visibility, everywhere it exists --------------------------- */

.woocommerce .show-password-input,
button.show-password-input,
a.slicewp-show-hide-password,
.slicewp-show-hide-password {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background-position: center;
}

/* --- Boxes and radios on the pages Task 3 did not cover ------------------ */

.woocommerce.woocommerce input[type="checkbox"],
.woocommerce.woocommerce input[type="radio"],
.loop-locked__consent input[type="checkbox"],
.loop-mystery input[type="checkbox"],
.slicewp-form input[type="checkbox"],
.slicewp-form input[type="radio"] {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	flex: 0 0 24px;
	accent-color: var(--loop-ink);
}

.loop-locked__consent {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

/* --- Removing a coupon is a control, not a word in a sentence ------------ */

.woocommerce a.woocommerce-remove-coupon,
a.woocommerce-remove-coupon {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 4px;
}