/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ===================================================================
   UNIVERSO MAGICO — design tokens
   Source of truth: dev-docs/DESIGN_SYSTEM.md + dev-docs/ui_component_navy.html
   Navy core sampled from dev-docs/packaging_color.jpeg (§19.1); surfaces,
   platinum and text carried over unchanged from the violet system.
   Global colours live in the Woodmart theme options; these tokens exist
   for the homepage sections the builder cannot express natively.

   The --ar-violet-* names below are ALIASES, kept so the 119 existing
   var() call sites keep working untouched (§19.3) — including §18's
   component-scoped single-product buy buttons. New work uses --ar-navy-*.
   Revert: git checkout this file.
   =================================================================== */
:root {
	--ar-navy-950: #0e1325;
	--ar-navy-900: #13192f;
	/* Heading ink. The violet original (#342263) was measured from the hero
	   H1 glyph interiors; this keeps that stop's lightness (26%) and moves
	   only the hue, so its 11.97:1 on --ar-surface is unchanged. */
	--ar-navy-850: #28325d;
	--ar-navy-800: #272f4f;
	--ar-navy-700: #323f71;
	--ar-navy-600: #434e7a;
	--ar-navy-500: #4f5b8c;
	/* Darkened one step beyond the hue swap (L 57→48) to close a
	   pre-existing contrast miss: white on this was 3.96:1, now 5.00:1.
	   See DESIGN_SYSTEM.md §19.2. */
	--ar-navy-400: #656e92;
	--ar-navy-300: #8991b3;
	--ar-navy-200: #c4c6cf;
	--ar-navy-100: #eaedf5;
	--ar-navy-050: #f8f9fc;

	/* --- Aliases: retired names, live values. Do not use in new rules. --- */
	--ar-violet-950: var(--ar-navy-950);
	--ar-violet-900: var(--ar-navy-900);
	--ar-violet-850: var(--ar-navy-850);
	--ar-violet-800: var(--ar-navy-800);
	--ar-violet-700: var(--ar-navy-700);
	--ar-violet-600: var(--ar-navy-600);
	--ar-violet-500: var(--ar-navy-500);
	--ar-violet-400: var(--ar-navy-400);
	--ar-violet-300: var(--ar-navy-300);
	--ar-violet-200: var(--ar-navy-200);
	--ar-violet-100: var(--ar-navy-100);
	--ar-violet-050: var(--ar-navy-050);

	--ar-platinum-100: #f1eff1;
	--ar-platinum-300: #e8e7eb;
	/* 500 and 700 joined 2026-09-29 with the horoscope section (§22): rules
	   and glyph rings on navy, and the engraved tone of the small divider. */
	--ar-platinum-500: #c9c7ce;
	--ar-platinum-700: #8e8c97;
	--ar-surface: #fffbf8;
	--ar-wash: #f6ebef;
	--ar-white: #ffffff;
	--ar-line: #f0ece9;
	--ar-line-strong: #e4dfea;
	--ar-text: #2d2832;
	--ar-text-muted: #6c6774;

	--ar-r-sm: 4px;
	--ar-r-md: 8px;
	--ar-r-lg: 16px;
	--ar-section-y: 96px;

	/* Elevation, ui_component.html. Used sparingly: --ar-e-card on cards,
	   --ar-e-panel on the panels that float over the page (the trust panel
	   and, from 2026-09-08, the header dropdowns). */
	--ar-e-card: 0 1px 2px rgba(14, 19, 37, .04);
	--ar-e-panel: 0 4px 24px rgba(14, 19, 37, .06);

	/* One number for every price on the site. Before this token the card
	   said 24px, the single product page 155% of 15px (~23px) and the
	   mobile card 19px — three sizes for one role, none of them agreeing
	   with the other. See section 0.2. */
	--ar-price-size: 21px;
	/* ...and one face. The card was measured as Cinzel off the mockup
	   (DESIGN_SYSTEM.md 13.1); the single product page was whatever the
	   body font happened to be. Both now read this token. */
	--ar-price-font: "Cinzel", "Times New Roman", Georgia, serif;

	/* The cart mark inside the product card's add-to-cart disc. Font
	   Awesome carries no matching outline cart, and the disc paints it
	   as a mask so the glyph inherits the button colour. */
	--ar-cart-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.1l2.6 11.4h10.3l2.3-7.9H6.1'/%3E%3Ccircle cx='9.5' cy='19.3' r='1.5'/%3E%3Ccircle cx='17.5' cy='19.3' r='1.5'/%3E%3C/svg%3E");
}

/* ===================================================================
   0. Token bridge — --ar-* onto Woodmart's own custom properties
   ===================================================================

   HOW THE DESIGN SYSTEM REACHES THE WHOLE SITE

   Woodmart, WooCommerce and the plugin integrations paint almost
   nothing directly. Their rules read custom properties:

       div.wpcf7 input[type=submit] {
           background-color: var(--btn-accented-bgcolor);
           border-radius:    var(--btn-accented-brd-radius); ... }

   So the way to restyle an element is NOT to outrank that rule — it is
   to set the property the rule already reads. Four layers, in order of
   preference; only drop to the next when the one above cannot express
   the change:

     1. Theme options       — anything Woodmart has a field for.
     2. This bridge         — options cannot express it, but a variable
                              exists (below).
     3. Component scope     — the component needs a different ROLE, so it
                              re-declares the variable on its own
                              container (see the newsletter, section 6).
     4. A real CSS rule     — no variable exists at all. Those still need
                              the "one class heavier" discipline of
                              section 9's preamble.

   WHY THE SELECTOR IS :root:root AND NOT :root

   Woodmart compiles the theme options to an inline <style> block that
   WordPress prints in <head> AFTER this stylesheet — measured on the
   rendered page, child-style at byte 55393, the compiled block at 61092.
   A plain :root here (0,1,0) would therefore lose to the theme's :root
   (0,1,0) on source order, silently, for every property both declare.
   :root:root is (0,2,0) and wins on specificity regardless of order.

   Do not simplify it back to :root. Nothing will look broken in the
   editor; the whole block will just stop applying on the front end. */

:root:root {
	/* --- 0.1 Radius ------------------------------------------------
	   DESIGN_SYSTEM.md section 6: 4px on anything you click or type
	   into. rounding_size is already 4, which gives --wd-brd-radius,
	   but buttons and form fields take their radius from their *style*
	   option, and Woodmart hardcodes "semi-rounded" to 5px with no way
	   to reach 4 — see class-themesettingscss.php lines 507, 545, 570.
	   This is the only route to the measured value. */
	--btn-default-brd-radius: var(--ar-r-sm);
	--btn-accented-brd-radius: var(--ar-r-sm);
	--wd-form-brd-radius: var(--ar-r-sm);

	/* --- 0.2 Button type scale -------------------------------------
	   ui_component.html .btn — Inter 600 / 13px / +0.1em caps /
	   13px 26px. The theme leaves all of these unset, so every button
	   on the site falls back to its built-in 13px / 5px 20px.

	   These are the *fallback* tier: the theme reads
	   var(--btn-accented-padding, var(--btn-padding, 5px 20px)), so a
	   component that sets --btn-accented-padding still wins locally.
	   That is the designed override point and is used deliberately by
	   the newsletter in section 6. */
	--btn-font-size: 13px;
	--btn-padding: 13px 26px;
	--btn-font-weight: 600;
	--btn-transform: uppercase;
	--btn-font-family: var(--wd-text-font);

	/* --- 0.3 The neutral ramp --------------------------------------
	   base.css ships a grey scale that paints most of the borders,
	   secondary text and light panels on the site. NONE of it is
	   reachable from the theme options, so under a violet system every
	   divider and every muted label was still neutral grey:
	   --brdcolor-gray-300 alone is read by 368 rules, --color-gray-800
	   by 252 and --bgcolor-white by 202.

	   Mapped by ROLE, not by lightness — DESIGN_SYSTEM.md section 4.
	   This is layer 2: the theme's own rules keep working and simply
	   resolve to a design-system colour, so there is no !important and
	   nothing to re-fight after a theme update.

	   Verified 2026-09-08 by injecting this block on a live product
	   page and diffing every element's computed paint: 92 elements
	   changed across 9 transitions, every one of them intended, and
	   ZERO white-on-dark elements were touched (nav links on violet and
	   the social icons take their white from --wd-text-invert and the
	   colour schemes, not from here). Both lightboxes paint their dark
	   ground from a hardcoded #000 / rgba(0,0,0,.7) and read none of
	   these, so --bgcolor-white is safe to move off pure white. */

	/* Borders and dividers -> section 4 "Lines" */
	--brdcolor-gray-200: var(--ar-line);
	--brdcolor-gray-300: var(--ar-line-strong);
	--brdcolor-gray-400: var(--ar-violet-200);
	--brdcolor-gray-500: var(--ar-violet-200);

	/* Text -> section 4 "Text". 900 and 800 are two steps in the theme
	   (active breadcrumb vs body) but one role in this system, so they
	   deliberately collapse onto a single ink. */
	--color-gray-900: var(--ar-text);
	--color-gray-800: var(--ar-text);
	--color-gray-700: var(--ar-text-muted);
	--color-gray-600: var(--ar-text-muted);
	--color-gray-500: var(--ar-text-muted);
	--color-gray-400: var(--ar-violet-200);
	--color-gray-300: var(--ar-violet-200);

	/* Surfaces -> section 4 "Surfaces". --bgcolor-white also feeds
	   --wd-dropdown-bg-color, so this is what lifts every dropdown
	   panel off pure white, not just the ones styled in section 12. */
	--color-white: var(--ar-surface);
	--bgcolor-white: var(--ar-surface);
	--bgcolor-gray-100: var(--ar-violet-050);
	--bgcolor-gray-200: var(--ar-violet-050);
	--bgcolor-gray-300: var(--ar-violet-100);

	/* Page ground and nav ink. --wd-navigation-color is consumed inside
	   rgba(), so it must stay an R,G,B triple — a hex here silently
	   breaks every rule that reads it. 45,40,50 is --ar-text. */
	--wd-main-bgcolor: var(--ar-surface);
	--wd-navigation-color: 45, 40, 50;

	/* ui_component.html, .field input::placeholder */
	--wd-form-placeholder-color: #5b5f71;
}

/* Letter-spacing has no Woodmart variable, so it is layer 4: a real rule.

   The two exclusions are not defensive guesses, they were measured:
   .plus/.minus are the quantity stepper, where +0.1em on a single "+"
   glyph pushes it off-centre in its 25px box; .adminbar-button is the
   WordPress admin bar's search submit, which is WP chrome and not ours
   to restyle. Tracking belongs to text buttons only. */
.btn:not(.plus):not(.minus),
button.button,
input[type="submit"]:not(.adminbar-button),
.wd-buy-now-btn,
.woocommerce a.button,
.woocommerce button.button {
	letter-spacing: .1em;
}

/* -------------------------------------------------------------------
   1. Hero
   Copy sits in the left 38% of the plate, where the measured contrast
   for ink on the wash is 15.4:1 at worst. Do not widen the text column
   past 50% or it runs onto the candle and the ratio collapses.
   ------------------------------------------------------------------- */
.ar-hero {
	/*background-color: var(--ar-wash);*/
	/* Root-relative so the plate survives a domain or scheme change. */
	/*background-image: url("/wp-content/uploads/2026/09/hero_asset.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	min-height: 520px;*/
	display: flex;
	align-items: center;
}

.ar-hero .ar-hero-copy {
	padding-top: 64px;
	padding-bottom: 64px;
}

.ar-hero .woodmart-title-container {
	margin-bottom: 20px;
}

.ar-hero .title {
	color: var(--ar-violet-850);
	line-height: 1.08;
}

.ar-hero .ar-hero-lede,
.ar-hero .ar-hero-lede p,
.ar-hero .ar-hero-lede h1 {
	color: var(--ar-text);
	font-size: 17px;
	line-height: 1.55;
	max-width: 24ch;
	margin-bottom: 0;
}

.ar-hero .ar-hero-lede {
	margin-bottom: 32px;
}

/* The lede is the home page's H1 (SEO), shown as the plain text it was. */
.ar-hero .ar-hero-lede h1 {
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

/* Hero button: violet fill, platinum spark to its right. */
.ar-hero .btn {
	padding-inline: 30px;
	letter-spacing: .1em;
}

.ar-hero .btn img,
.ar-btn-spark img {
	width: 13px;
	height: 13px;
	margin-left: 4px;
}

@media (max-width: 1024px) {
	.ar-hero {
		/*min-height: 420px;
		background-position: 72% center;*/
	}

	.ar-hero .ar-hero-lede {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.ar-hero {
	/*	min-height: 0;
		background-position: center bottom;
		background-size: 140% auto;
		padding-bottom: 220px;*/
	}

	/* At phone width the copy column covers the crystal and the pendulum,
	   and the lede drops to ~4:1 on the busiest part of the plate. A
	   surface veil over the left of the plate (painted on the slide's own
	   background layer, so the copy stays above it) brings the ink back
	   to the hero's measured contrast while the still life stays visible
	   on the right. */
	.ar-hero .wd-slide-bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg,
			rgba(255, 251, 248, .94) 0%,
			rgba(255, 251, 248, .86) 55%,
			rgba(255, 251, 248, .35) 80%,
			rgba(255, 251, 248, 0) 100%);
		pointer-events: none;
	}
}

/* -------------------------------------------------------------------
   2. Trust panel
   One floating panel that overlaps the hero by 40px, per the mockup.
   ------------------------------------------------------------------- */
.ar-trust {
	background: var(--ar-surface);
	border-radius: var(--ar-r-lg);
	box-shadow: 0 4px 24px rgba(14, 19, 37, .06);
	margin-top: -40px;
	position: relative;
	z-index: 2;
	padding: 24px 16px 0;
}

.ar-trust .info-box-wrapper {
	margin-bottom: 0;
}

.ar-trust .info-box-title {
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ar-violet-850);
	margin-bottom: 4px;
}

.ar-trust .info-box-inner {
	font-size: 12px;
	line-height: 1.45;
	color: var(--ar-text-muted);
}

.ar-trust img {
	width: 26px;
	height: 26px;
}

@media (max-width: 1024px) {
	.ar-trust {
		margin-top: 24px;
	}
}

/* -------------------------------------------------------------------
   2b. Section title + star divider
   The divider is a background on the title wrapper's ::after, so every
   section heading gets it from one class with no extra markup.
   ------------------------------------------------------------------- */
.ar-sec-title {
	text-align: center;
	margin-bottom: 40px;
}

.ar-sec-title .title {
	font-size: 27px;
	line-height: 1.2;
	letter-spacing: .13em;
	color: var(--ar-violet-850);
	margin-bottom: 0;
}

.ar-sec-title::after {
	content: "";
	display: block;
	width: 240px;
	height: 34px;
	margin: 10px auto 0;
	background: url("/wp-content/uploads/2026/09/subtitle_spark.png") center / contain no-repeat;
}

/* Hero uses the same ornament, left-aligned and tighter. The display size
   has to be restated here: .ar-sec-title .title would otherwise drop the
   H1 to section-heading size. */
.ar-hero .ar-sec-title,
.ar-hero .title-wrapper {
	text-align: left;
	margin-bottom: 0;
}

.ar-hero .ar-sec-title .title {
	font-size: 46px;
	letter-spacing: .01em;
	line-height: 1.08;
}

@media (max-width: 1024px) {
	.ar-hero .ar-sec-title .title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.ar-hero .ar-sec-title .title {
		font-size: 28px;
	}
}

.ar-hero .ar-sec-title::after {
	margin: 14px 0 20px;
	width: 210px;
	height: 26px;
	background-position: left center;
}

@media (max-width: 767px) {
	.ar-sec-title .title {
		font-size: 21px;
	}

	.ar-sec-title {
		margin-bottom: 28px;
	}
}

/* -------------------------------------------------------------------
   3. Ritual band
   Photographic plate; the gradient stays as the fallback beneath it so
   the copy never lands on bare white if the image fails.
   ------------------------------------------------------------------- */
.ar-band {
	background-color: var(--ar-violet-600);
	background-image: url("/wp-content/uploads/2026/09/band_background.jpeg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 25px;
}

.ar-band .wpb_text_column,
.ar-band p {
	color: var(--ar-surface);
	margin-bottom: 0;
}

.ar-band p {
	font-family: "Cinzel", "Times New Roman", Georgia, serif;
	font-size: 13.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.7;
	text-align: center;
}

@media (max-width: 767px) {
	.ar-band {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.ar-band p {
		margin-bottom: 18px;
	}
}

/* -------------------------------------------------------------------
   4. Category tile
   One card per category: portrait image flush to the top edge, then the
   name, then a Scopri button. Woodmart's markup is
     .wd-cat > .wd-cat-inner > .wd-cat-thumb  (image)
                             > .wd-cat-content (h3 + count)
                             > a.wd-fill      (overlay link)
   The overlay anchor already covers the whole card, so the button is a
   pseudo-element affordance rather than a second link — one tile, one
   link, and the accessible name stays the category title.

   Design must be "alt", not "default". cat-design-default absolutely
   positions .wd-cat-content over the image and slides it up on hover
   (with padding:0 !important), so the title and button sit on the photo
   and clip. cat-design-alt leaves the content in normal flow, which is
   what the mockup shows. Set globally in the theme options too.
   ------------------------------------------------------------------- */
.ar-categories .wd-cat .wd-cat-inner {
	background: var(--ar-white);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	box-shadow: 0 1px 2px rgba(14, 19, 37, .04);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.ar-categories .wd-cat:hover .wd-cat-inner {
	border-color: var(--ar-line-strong);
	box-shadow: 0 8px 28px rgba(50, 63, 113, .14);
	transform: translateY(-2px);
}

/* Portrait plate, flush to the card's top edge. 9:10 measured off the
   mockup; object-fit keeps it regardless of the source image's ratio.
   The .category-grid-item in these selectors is not decoration: Woodmart
   rounds .wd-cat-thumb itself at the same radius as the card, which
   notches the top corners once the card clips too. Its rule is
   .category-grid-item .wd-cat-thumb and loads after this file, so the
   reset has to match that weight to win. */
.ar-categories .category-grid-item .wd-cat-thumb {
	margin: 0;
	border-radius: 0;
	background: var(--ar-violet-100);
	/* cat-design-alt narrows the thumb to --wd-cat-img-width and puts a
	   shadow on it; the plate is full-bleed here and the card carries the
	   shadow instead. */
	max-width: none;
	box-shadow: none;
}

.ar-categories .category-grid-item .wd-cat-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 10;
	object-fit: cover;
	border-radius: 0;
}

.ar-categories .wd-cat-content {
	/* Mockup, scaled to this card width: 20px image→title, 8px button→edge. */
	padding: 14px 10px 13px;
	text-align: center;
	background: var(--ar-surface-alt);
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.ar-categories .wd-cat-content .wd-entities-title {
	font-family: "Cinzel", "Times New Roman", Georgia, serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--ar-violet-850);
	margin: 0 0 10px;
}

/* The product count is hidden globally, but belt and braces: the mockup
   has no count in this tile. */
.ar-categories .wd-cat-count {
	display: none;
}

/* Scopri button */
.ar-categories .wd-cat-content::after {
	content: "Scopri";
	display: inline-block;
	margin-top: auto;
	padding: 7px 17px;
	background: var(--ar-violet-700);
	color: var(--ar-surface);
	border-radius: var(--ar-r-sm);
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	transition: background-color .2s ease;
}

.ar-categories .wd-cat:hover .wd-cat-content::after {
	background: var(--ar-violet-950);
}

/* Woodmart already gives the overlay anchor z-index:5, which puts it above
   the button pseudo-element so the whole card stays one click target.
   Don't lower it. */

@media (max-width: 767px) {
	.ar-categories .wd-cat-content {
		padding: 12px 8px 16px;
	}

	.ar-categories .wd-cat-content .wd-entities-title {
		font-size: 11px;
		margin-bottom: 10px;
	}
}

/* -------------------------------------------------------------------
   5. Section rhythm
   ------------------------------------------------------------------- */
.ar-section {
	padding-top: var(--ar-section-y);
	padding-bottom: var(--ar-section-y);
}

/* The trust panel already lifts itself 40px into the hero and carries its
   own 24px of padding, so the next section starts from a much smaller gap
   than a standalone section would. */
.ar-trust + .ar-section {
	padding-top: 48px;
}

.ar-section-tight {
	padding-top: 56px;
	padding-bottom: 56px;
}

@media (max-width: 767px) {
	.ar-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.ar-trust + .ar-section {
		padding-top: 36px;
	}
}

/* -------------------------------------------------------------------
   6. Newsletter prefooter
   Replaces the old "Hai una domanda?" block. Field and button read as one
   joined control, per the mockup.
   ------------------------------------------------------------------- */
.ar-newsletter {
	background-color: var(--ar-violet-100);
	background-image: url("/wp-content/uploads/2026/09/crystal_sprite.png");
	background-position: 50px bottom;
	background-size: contain;
	background-repeat: no-repeat;
	padding-top: 36px;
	padding-bottom: 0;
}

.ar-newsletter .ar-sec-title {
	text-align: left;
	margin-bottom: 8px;
}

.ar-newsletter .ar-sec-title .title {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: .04em;
}

.ar-newsletter .ar-sec-title::after {
	display: none;
}

.ar-newsletter .ar-newsletter-lede p {
	color: var(--ar-text-muted);
	font-size: 15px;
	max-width: 40ch;
	margin-bottom: 0;
}

.ar-newsletter .wpcf7-form {
	display: flex;
	max-width: 440px;
	margin-left: auto;
}

.ar-newsletter .ar-newsletter-form {
	text-align: right;
}

.ar-newsletter .wpcf7-response-output {
	margin: 12px 0 0;
	border-color: var(--ar-violet-400);
	font-size: 13px;
	text-align: left;
}

.ar-newsletter .wpcf7-form p {
	margin: 0;
	display: contents;
}

.ar-newsletter input[type="email"] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 1px solid var(--ar-violet-400);
	border-right: 0;
	border-radius: var(--ar-r-sm) 0 0 var(--ar-r-sm);
	padding: 13px 16px;
	color: var(--ar-text);
}

/* The submit button — layer 3, a role swap.
   Woodmart classifies every Contact Form 7 submit as an *accented*
   (shop) button, so it renders btns_shop_bg #8878A9 at 5px. In this
   design system the newsletter call to action is a *primary* button:
   violet-700 at 4px, deepening to violet-950 on hover.

   The rule that paints it, div.wpcf7 input[type=submit] in the theme's
   int-wpcf7.css, is (0,2,2) and prints in the <body>, so it beats
   anything scoped to .ar-newsletter on both specificity and order.
   Fighting it needs !important and breaks on the next theme update.

   Instead the role itself is swapped: the variables that rule already
   reads are re-declared on the form. The theme's own rule then paints
   the button correctly, and this survives a theme update untouched. */
.ar-newsletter .wpcf7-form {
	--btn-accented-bgcolor: var(--ar-violet-700);
	--btn-accented-bgcolor-hover: var(--ar-violet-950);
	--btn-accented-color: var(--ar-surface);
	--btn-accented-color-hover: var(--ar-surface);
	/* Joined to the email field on its left, so only the right corners
	   round. A custom property holds a token stream, not just a value,
	   so the four-value shorthand is legal here. */
	--btn-accented-brd-radius: 0 var(--ar-r-sm) var(--ar-r-sm) 0;
	/* Extra inline-end padding is the gap the spark sits in. */
	--btn-accented-padding: 13px 42px 13px 26px;
}

/* The spark, matching the hero's "Scopri di più".
   The hero is a woodmart_button and carries the asset as a real <img>
   (attachment 11011, icon_type="image"). An <input> cannot hold a
   child element, so the same file is painted as a background image at
   the same rendered 13px. It is background-IMAGE against the theme's
   background-COLOR, so the two rules do not collide and no specificity
   escalation is needed. spark-light.svg has fill="#FFFBF8" baked in —
   --ar-surface, the correct ink for type on violet. */
.ar-newsletter input[type="submit"] {
	background-image: url("/wp-content/uploads/2026/09/spark-light.svg");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 13px 13px;
	border: 0;
	cursor: pointer;
}

.ar-newsletter .wpcf7-spinner {
	display: none;
}

/* The crystal is decoration and must never sit under the copy. The copy
   starts at the container edge (1222px wide), so the sprite only clears
   it when there is ~210px of gutter: from 1640px it is anchored just
   left of the container. Below that it would land on the heading and
   the lede, so it stays in place under a veil of the band's own ground
   (navy-100, 234,237,245) and reads as a faint watermark; on phones it
   is dropped. Height is fixed so the sprite does not grow when the band
   stacks and gets taller. */
.ar-newsletter {
	background-image:
		linear-gradient(rgba(234, 237, 245, .9), rgba(234, 237, 245, .9)),
		url("/wp-content/uploads/2026/09/crystal_sprite.png");
	background-position: 0 0, 50px bottom;
	background-size: auto, auto 150px;
}

@media (min-width: 1640px) {
	.ar-newsletter {
		background-image: url("/wp-content/uploads/2026/09/crystal_sprite.png");
		background-position: calc(50% - 830px) bottom;
		background-size: auto 150px;
	}
}

@media (max-width: 767px) {
	.ar-newsletter {
		background-image: none;
	}

	.ar-newsletter .wpcf7-form {
		max-width: none;
	}
}


.wd-prefooter {
	padding-bottom: 0!important;
}

/* -------------------------------------------------------------------
   7. Header
   Top bar (announcement + socials) over the main row: menu left,
   logo centred, search/account/cart right. Row heights, grounds and
   the violet come from the header builder; everything here is the
   detail the builder has no field for.
   ------------------------------------------------------------------- */

/* --- 7.1 Top bar --------------------------------------------------- */
.whb-top-bar .wd-header-text {
	font-size: 12.5px;
	letter-spacing: .01em;
}

/* The left column is empty, so flex alone will not put the announcement on
   the page's centre line -- it centres it in the space that is left over. */
.whb-top-bar .whb-col-center {
	justify-content: center;
	text-align: center;
}

.ar-topbar-msg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

.ar-topbar-msg svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.whb-top-bar .ar-topbar-socials {
	text-align: right;
}

/* One icon set for the header and the footer. Woodmart's own social
   element is a WPBakery-mapped shortcode that does not resolve inside a
   header element or a widget-rendered block, so these are inline SVG. */
.ar-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: opacity .18s ease, color .18s ease;
}

.ar-soc svg {
	width: 18px;
	height: 18px;
	display: block;
}

.ar-topbar-social {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}

.ar-topbar-social .ar-soc {
	color: var(--ar-surface);
}

.ar-topbar-social .ar-soc:hover {
	opacity: .7;
}

/* --- 7.2 Main row -------------------------------------------------- */
/* Navigation is Cinzel in the mockup, not Inter. The face is set in the
   theme options (navigation-font); the tracking has no option field. */
.whb-general-header .wd-nav-main > li > a {
	letter-spacing: .06em;
}

.whb-general-header .wd-nav-main > li > a .nav-link-text {
	color: var(--ar-text);
}

.whb-general-header .wd-nav-main > li:hover > a .nav-link-text,
.whb-general-header .wd-nav-main > li.current-menu-item > a .nav-link-text {
	color: var(--ar-violet-700);
}

/* The logo is the AR lockup: script mark over a letterspaced wordmark.
   It needs its full height or the wordmark closes up and turns to mud. */
.whb-general-header .site-logo img {
	max-height: 96px;
	width: auto;
}

/* Sticky swaps the full lockup for the bare AR monogram (Woodmart's own
   wd-main-logo / wd-sticky-logo pair). The cap has to come back down with it:
   the rule above replaces the max-height the row would otherwise pass down,
   so without this the mark overflows the 60px sticky bar. Padding is inside
   the box, so 50px of cap leaves a 40px mark -- 69px wide at its 1.74 ratio. */
:is(.whb-sticked, .whb-clone) .whb-general-header .site-logo img {
	max-height: 50px;
}

.whb-general-header .wd-tools-element .wd-tools-icon {
	color: var(--ar-violet-850);
}

.whb-general-header .wd-tools-element:hover .wd-tools-icon {
	color: var(--ar-violet-700);
}

/* Cart count: violet disc, as in the mockup. */
.whb-general-header .wd-tools-element .wd-tools-count {
	background-color: var(--ar-violet-700);
	color: var(--ar-surface);
}

@media (max-width: 1024px) {
	/* The message is the point of the bar on a phone; the icons are not. */
	.whb-top-bar .ar-topbar-socials {
		display: none;
	}

	.whb-top-bar .wd-header-text {
		font-size: 11.5px;
	}

	.ar-topbar-msg {
		gap: 8px;
	}

	.ar-topbar-msg svg {
		width: 15px;
		height: 15px;
	}

	.whb-general-header .site-logo img {
		max-height: 52px;
	}

	:is(.whb-sticked, .whb-clone) .whb-general-header .site-logo img {
		max-height: 44px;
	}
}


/* -------------------------------------------------------------------
   8. Footer
   Five columns on the lavender ground: brand, three link lists, then
   payments and socials. The copyright bar sits on the same ground with
   a hairline above it, not on the old dark violet slab.
   ------------------------------------------------------------------- */
.wd-footer {
	border-top: 1px solid var(--ar-violet-500);
}

.wd-footer .main-footer {
	padding-top: 52px;
	padding-bottom: 32px;
}

/* Woodmart's layout 13 splits 3/3/2/2/2. The mockup gives the brand and
   the payments columns more room and squeezes the middle three. */
@media (min-width: 1025px) {
	/* Column 1 has to hold the tagline's longest line on two lines, and
	   column 5 the four payment badges on one row (4x39 + 3x6 = 174px). */
	/* Woodmart spans a 12-column grid via --wd-col-lg, which must stay a whole
	   number, and 3/3/2/2/2 leaves the brand column too narrow for the tagline
	   and the payments column too narrow for four badges. Drive the template
	   directly instead: the columns then take the mockup's exact proportions. */
	.wd-footer .footer-sidebar {
		grid-template-columns: 3.2fr 2.2fr 2.3fr 1.8fr 2.5fr;
	}

	.wd-footer .footer-column {
		grid-column: auto / span 1 !important;
	}
}

.wd-footer .footer-widget .widget-title,
.wd-footer .ar-footer-head .title {
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ar-violet-850);
	margin-bottom: 16px;
}

.wd-footer .ar-footer-head {
	margin-bottom: 0;
}

.wd-footer .ar-footer-head::after {
	display: none;
}

.wd-footer .ar-footer-head-alt .title {
	margin-top: 28px;
}

.wd-footer .footer-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wd-footer .footer-widget li {
	margin: 0 0 9px;
}

.wd-footer .footer-widget li:last-child {
	margin-bottom: 0;
}

.wd-footer .footer-widget li a {
	color: var(--ar-text-muted);
	font-size: 13px;
	line-height: 1.5;
}

.wd-footer .footer-widget li a:hover {
	color: var(--ar-violet-700);
}

/* --- 8.1 Brand column ---------------------------------------------- */
/* Cap with max-width, not width: Woodmart's own image rule sets width:100%
   at mobile widths and would otherwise blow the lockup up to full bleed. */
.wd-footer .ar-footer-logo img {
	width: auto;
	max-width: 190px;
	height: auto;
}

.wd-footer .ar-footer-tagline p {
	color: var(--ar-text-muted);
	font-size: 12.5px;
	line-height: 1.65;
	margin: 18px 0 0;
}

/* --- 8.2 Payments and socials -------------------------------------- */
.ar-pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ar-pay-list img {
	width: 39px;
	height: 25px;
	display: block;
}

.ar-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.ar-footer-social .ar-soc {
	color: var(--ar-violet-850);
}

.ar-footer-social .ar-soc:hover {
	color: var(--ar-violet-700);
}

/* --- 8.3 Copyright bar --------------------------------------------- */
.wd-footer .wd-copyrights {
	border-top: 1px solid var(--ar-line-strong);
	padding-top: 18px;
	padding-bottom: 18px;
}

.wd-footer .wd-copyrights p {
	color: var(--ar-text-muted);
	font-size: 12px;
	margin: 0;
}

@media (max-width: 1024px) {
	.wd-footer .main-footer {
		padding-top: 36px;
		padding-bottom: 28px;
	}

	.wd-footer .ar-footer-logo img {
		max-width: 150px;
	}
}


/* -------------------------------------------------------------------
   9. Product card
   Measured off dev-docs/new_homepage.jpeg, "Prodotti in evidenza" row:
   card 170x219 in the 1024px mockup, five across, which is 234px wide
   in the 1222px container (scale 1.376). Every colour below landed on
   an existing token: border #F1EDEA -> --ar-line, disc fill (42,34,81)
   -> --ar-violet-800, subtitle ink (107,102,106) -> --ar-text-muted,
   arrow chevron (140,130,175) -> --ar-violet-400.

   Global on purpose: the homepage carousel and tabs, shop, category,
   related, upsells and search all render the same .wd-product card.
   The modules set products_bordered_grid="0", so the card shell has to
   come from here rather than from Woodmart's bordered-grid option.

   The .wrapp-buttons hover overlay is deliberately left alone.

   ON THE SELECTORS. Woodmart prints its per-element CSS parts inline in
   the BODY, so woo-product-loop.css and woo-loop-prod-predefined.css
   both land after this stylesheet no matter what enqueue priority the
   child theme uses. At equal specificity the theme therefore wins:
   .wd-product .wd-entities-title{font-size:inherit} silently ate the
   14px, .wd-loop-builder-off .wd-product-wrapper{padding:var(...)} ate
   the card's bottom padding, and the theme's
   :is(.wd-product-wrapper,.product-element-bottom)>*:not(:is(...))
   {margin-block:0} ate the price row's margin-top:auto, which is what
   bottom-aligns the price across a row of cards. Every rule below is
   deliberately at least one class heavier than the theme's, which is
   why the wrapper is matched as .wd-product-wrapper.product-wrapper
   and descendants carry that pair in the chain. Do not "simplify"
   these selectors: the card silently loses its layout if you do.
   ------------------------------------------------------------------- */

/* The grid cell and the carousel slide both stretch to the tallest card
   in the row, but .wd-product is a plain block, so a percentage height
   on the wrapper has nothing to resolve against. Flexing the cell too is
   what lets the price row's margin-top:auto reach the bottom edge. */
/* Both the grid and the carousel track set align-items:flex-start, so a
   card is content-height by default and a row of cards ends ragged. The
   mockup's row is uniform, so each card claims the row height itself.
   Safe here because products_masonry and products_different_sizes, the
   two layouts that want ragged cards, are both off. */
.wd-product {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.wd-product .wd-product-wrapper.product-wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	background-color: var(--ar-surface);
	box-shadow: 0 1px 2px rgba(14, 19, 37, .04);
	padding: 0 0 16px;
	text-align: center;
}

/* The photo runs flush to the rounded top edge; its own white ground is
   the inset the mockup shows. Everything under it takes card padding. */
.wd-product .wd-product-wrapper.product-wrapper > *:not(.wd-product-thumb) {
	padding-inline: 16px;
}

.wd-product .wd-product-wrapper.product-wrapper .wd-product-thumb {
	margin-bottom: 16px;
}

/* With stretch_product_* on (the shop and category loops) Woodmart wraps
   everything under the image in .product-element-bottom; without it (the
   homepage carousel and tabs) the card body is a flat list of siblings.
   Making the wrapper a flex column keeps the price row bottom-aligned in
   both shapes, so cards in a row line up whatever the title wraps to. */
.wd-product .wd-product-wrapper.product-wrapper > .product-element-bottom {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* The overlay sat 10px off the thumb edge; nudged so it clears the
   rounded corner without moving off the image. */
.wd-product.wd-hover-icons .wd-product-wrapper.product-wrapper .wrapp-buttons {
	bottom: 14px;
}

/* --- 9.1 Title, subtitle, price ------------------------------------ */
.wd-product .wd-product-wrapper.product-wrapper .wd-entities-title {
	margin-block: 0 4px;
	font-family: "Cinzel", "Times New Roman", Georgia, serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-violet-850);
}

.wd-product .wd-product-wrapper.product-wrapper .wd-entities-title a {
	color: inherit;
}

/* The mockup's descriptor line ("Mazzo di 54 carte"). On the live loop
   this slot holds the product's category. */
.wd-product .wd-product-wrapper.product-wrapper .wd-product-cats {
	margin-block: 0 12px;
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ar-text-muted);
}

.wd-product .wd-product-wrapper.product-wrapper .wd-product-cats a {
	color: inherit;
}

/* No star rating anywhere in the mockup. show_empty_star_rating is off
   in the theme options; this also covers products that carry a score. */
.wd-product .wd-product-wrapper.product-wrapper .star-rating {
	display: none;
}

/* Price sits centred in the space left of the disc, not centred in the
   card: measured price box 76-183, disc 184-207 in a 55-225 card. */
.wd-product .wd-product-wrapper.product-wrapper .ar-buy-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-row .price {
	flex: 1;
	margin: 0;
	font-family: var(--ar-price-font);
	font-weight: 600;
	font-size: var(--ar-price-size);
	line-height: 1.2;
	color: var(--ar-violet-850);
	font-variant-numeric: tabular-nums;
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-row .price del {
	font-size: 16px;
	color: var(--ar-text-muted);
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-row .price ins {
	text-decoration: none;
}

/* --- 9.2 Add-to-cart disc ------------------------------------------ */
/* Emitted by ar_loop_buy_row_close() in functions.php. It is the native
   WooCommerce loop button, so ajax add-to-cart keeps working; the label
   is swapped for the cart mark by mask rather than by rewriting markup. */
.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn {
	flex: none;
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a {
	display: block;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--ar-violet-800);
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	transition: background-color .18s ease;
}

/* Woodmart filters its own icon span and label into the loop button;
   both are dropped so only the mask below paints. */
.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a > * {
	display: none;
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ar-surface);
	-webkit-mask: var(--ar-cart-mark) no-repeat center / 16px 16px;
	mask: var(--ar-cart-mark) no-repeat center / 16px 16px;
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a:hover,
.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a:focus-visible {
	background-color: var(--ar-violet-700);
}

.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a.loading::before,
.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a.added::before {
	opacity: .55;
}

/* Woodmart appends a "View cart" link after a successful ajax add. */
.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn .added_to_cart {
	display: none;
}

/* --- 9.3 Carousel arrows ------------------------------------------- */
/* Bare chevron, no disc and no border: measured 8x14 at (140,130,175). */
.wd-products-element .wd-nav-arrows,
.wd-carousel-container .wd-nav-arrows {
	--wd-arrow-bg: transparent;
	--wd-arrow-bg-hover: transparent;
	--wd-arrow-bg-dis: transparent;
	--wd-arrow-brd: 0;
	--wd-arrow-brd-color: transparent;
	--wd-arrow-brd-color-hover: transparent;
	--wd-arrow-shadow: none;
	--wd-arrow-color: var(--ar-violet-400);
	--wd-arrow-color-hover: var(--ar-violet-700);
	--wd-arrow-color-dis: var(--ar-violet-200);
	--wd-arrow-size: 34px;
	--wd-arrow-icon-size: 20px;
}

/* --- 9.4 Small screens --------------------------------------------- */
@media (max-width: 768.98px) {
	.wd-product .wd-product-wrapper.product-wrapper {
		padding-bottom: 12px;
	}

	.wd-product .wd-product-wrapper.product-wrapper > *:not(.wd-product-thumb) {
		padding-inline: 12px;
	}

	.wd-product .wd-product-wrapper.product-wrapper .wd-entities-title {
		font-size: 13px;
	}

	.wd-product .wd-product-wrapper.product-wrapper .ar-buy-row {
		gap: 8px;
	}

	.wd-product .wd-product-wrapper.product-wrapper .ar-buy-row .price {
		font-size: 18px;
	}

	.wd-product .wd-product-wrapper.product-wrapper .ar-buy-btn > a {
		width: 30px;
		height: 30px;
	}
}

/* -------------------------------------------------------------------
   10. Price outside the product card
   The card price (section 9.1) is only one of three places a price is
   set. The theme sizes the single product and quick-view price
   relatively — .summary-inner>.price and .wd-single-price .price are
   both font-size:155%, which on the 15px body lands at ~23px. That was
   never a decision, it is the Woodmart default, and it left the same
   product showing 24px in the grid and 23px on its own page.

   Both are pinned to --ar-price-size so the role has one number.

   Specificity note, per the section 9 preamble: the theme's rules are
   (0,2,0) and print in the <body>, after this stylesheet, so an equal
   selector here would lose on source order. Each is therefore one class
   heavier via the page or popup wrapper.
   ------------------------------------------------------------------- */
.single-product .summary-inner > .price,
.single-product .wd-single-price .price,
.wd-popup-quick-view-wrap .summary-inner > .price,
.wd-popup-quick-view-wrap .wd-single-price .price {
	font-size: var(--ar-price-size);
	line-height: 1.2;
	/* The theme's .price{color:var(--wd-primary-color)} paints this
	   violet-700, the *link* colour. DESIGN_SYSTEM.md section 5 gives the
	   price role the heading ink, which is what the card already uses. */
	color: var(--ar-violet-850);
	/* Face matched to the card, closing open item J. The card's Cinzel is
	   the measured value; there was never a reason for the single product
	   page to differ, it simply inherited the body font. */
	font-family: var(--ar-price-font);
	font-weight: 600;
}

/* -------------------------------------------------------------------
   11. Plugin front-ends
   Two plugins paint their own accent on the front end: the booking form
   uses cyan (#22C4FF, #45C0E4) and the product add-ons use WordPress
   admin blue (#2271B1, #2196F3). Both read as a different product
   bolted onto a violet site.

   Corrected here rather than in the plugin stylesheets, which a plugin
   update would overwrite.

   Every selector below was EXTRACTED from the plugin stylesheets, not
   guessed — an earlier draft of this section invented a wrapper class
   (.mwb_bookings_wrapper) that does not exist anywhere in the plugin,
   and matched nothing at all. If you add to this block, read the rule
   out of the plugin's CSS first.

   The `body` prefix is not decoration: it lifts each selector one step
   above the plugin's own (e.g. 0,2,1 against 0,2,0) so the override
   wins regardless of which stylesheet the browser sees last.

   Caveat worth keeping: these are verified to target the plugin's real
   declarations, but NOT visually confirmed on a rendered widget —
   neither the booking form nor an EPOFW slider is configured on this
   site, so there is nothing to look at yet. Re-check on first use.
   ------------------------------------------------------------------- */

/* --- 11.1 Booking form ---------------------------------------------
   The plugin sets these with !important, so the override needs it too;
   !important beats specificity, and no selector can win without it. */
body .flatpickr-day.selected,
body .custom-selected {
	background-color: var(--ar-violet-700) !important;
	border-color: var(--ar-violet-700) !important;
}

/* A timeslot is one choice among many, which is the shop-button role
   in this system, not the primary. */
body button.wps_timeslot_button {
	background-color: var(--ar-violet-400) !important;
}

/* --- 11.2 Product add-ons (EPOFW) ----------------------------------
   Range sliders and one toggle switch. No !important in the plugin,
   so the body prefix alone carries these. */
body .epofw-slider-control .ui-slider-range,
body .epofw_fields_table tr td .epofw-slider-control .ui-slider-range,
body .epofw_addon_str_div .epofw-slider-wrapper .epofw-slider-container .epofw-slider-control .ui-slider-range,
body .epofw-switch-checkbox:checked + .epofw-switch-slider {
	background: var(--ar-violet-700);
	background-color: var(--ar-violet-700);
}

body .epofw-slider-control .ui-slider-handle,
body .epofw_fields_table tr td .epofw-slider-control .ui-slider-handle,
body .epofw_addon_str_div .epofw-slider-wrapper .epofw-slider-container .epofw-slider-control .ui-slider-handle {
	background: var(--ar-violet-700);
	border-color: var(--ar-violet-700);
}

body input[type="range"].epofw-field-slider::-webkit-slider-thumb {
	border-color: var(--ar-violet-700);
}

body input[type="range"].epofw-field-slider::-moz-range-thumb {
	border-color: var(--ar-violet-700);
}

/* --- 11.3 Addon totals recap ----------------------------------------
   Approved 2026-09-14. The live "recap" table EPOFW inserts under the
   addon fields (id="addon_total", class epofw_addon_totals) as soon as
   a shopper picks any paid option — not asked for on the product page,
   so it is hidden outright rather than restyled.

   The wrapper carries no !important in the plugin's own CSS (only its
   .addon_total_hd child row does), so per the section 11 preamble this
   needs no !important either — just the same one-step-heavier `body`
   prefix used in 11.2, since .epofw_addon_totals alone would tie the
   plugin's own (0,1,0) rule on specificity and depend on enqueue order. */
body .epofw_addon_totals {
	display: none;
}

/* -------------------------------------------------------------------
   12. Form focus
   Approved 2026-09-08 (proposal items 2A / 2B).

   ui_component.html, the Form field stage:
       .field input:focus { outline: none;
                            border-color: var(--ar-violet-700);
                            background: var(--ar-surface); }

   The BORDER half is layer 1 and lives in the theme options: the
   form_brd_color_focus key was empty, so --wd-form-brd-color-focus fell
   back to base.css's rgba(0,0,0,.15) and every field on the site focused
   to grey. That key is now rgb(69,42,121) and base.css's own :focus rule
   paints it. Nothing here duplicates that.

   The BACKGROUND half has no Woodmart variable at all — base.css sets
   only border-color on :focus — so it is layer 4, below.

   MEASUREMENT NOTE: base.css puts transition:border-color .5s on inputs
   and .4s on :focus. Reading getComputedStyle() straight after .focus()
   returns the PRE-transition value, so a working focus state measures as
   a dead one. Wait ~900ms before asserting anything here.
   ------------------------------------------------------------------- */
:is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	input[type="password"],
	textarea,
	select
):focus {
	background-color: var(--ar-surface);
}

/* The quantity stepper is excluded for the same reason section 0.2
   excludes it from letter-spacing: it is a numeric control sitting
   between two buttons, and lifting only the middle third of that group
   breaks the joined shape. The admin bar is WordPress chrome. */
div.quantity input:focus,
#wpadminbar input:focus {
	background-color: var(--wd-form-bg);
}

/* The newsletter field sits on the violet-100 ground and is transparent
   at rest, so "lift to the surface" IS the whole visible change here.
   Its resting border stays --ar-violet-400 (approved, item 2B) because
   it reads as one joined control with the button on its right; only the
   focus border moves to the primary.

   Both declarations are restated rather than inherited: the static rule
   in section 6 is (0,2,1) and would otherwise win the tie on source
   order against base.css's own :focus rule. */
.ar-newsletter input[type="email"]:focus {
	background-color: var(--ar-surface);
	border-color: var(--ar-violet-700);
}

/* -------------------------------------------------------------------
   13. Page shell
   Approved 2026-09-08 (proposal item 1A).

   base.css sets .wd-content-layout { padding-block: 40px } on the <main>
   wrapper of every page, and no theme option reaches it.

   It is removed ONLY on the homepage, which owns its own vertical rhythm:
   .ar-section is --ar-section-y (96px) and .ar-hero .ar-hero-copy is 64px,
   so the 40px was spacing on top of spacing against a mockup where the
   header is "a full-width bar that the page starts beneath" (section 12.1).

   It is deliberately LEFT IN PLACE everywhere else. Measured 2026-09-08:
   the homepage is the ONLY template whose .wd-content-layout is
   :first-child — on shop, category and any ordinary page (/contatti/
   included) a .wd-page-title banner sits immediately before it, and on the
   single product page the 40px is the only gap under the header. Removing
   it globally, or even for .page-template-default, would butt the content
   straight against the violet banner. /contatti/ is page-template-default
   AND has a banner, which is exactly why that selector is not used here.

   base.css loads BEFORE this stylesheet (both in <head>, byte 23244 vs
   46537), so one class is enough — this does not need the "one class
   heavier" escalation that section 9 needs against the body-printed parts.
   ------------------------------------------------------------------- */
.home .wd-content-layout {
	padding-block: 0;
}

/* -------------------------------------------------------------------
   14. Header dropdown panels
   Approved 2026-09-08 (proposal item 3A, option A).

   The Shop item was a Woodmart "aside" mega menu whose right-hand panel
   was still the theme's demo block (351: four demo screenshots behind
   four "Menu title" links pointing at #). It is now a plain dropdown;
   block 351 is unlinked, not deleted.

   What is left to do here is make the panel look like the rest of the
   system. The ground itself comes free from section 0.3 — Woodmart reads
   --wd-dropdown-bg-color: var(--bgcolor-white), which is now --ar-surface
   — so these rules only carry the shape and the type.
   ------------------------------------------------------------------- */
.wd-dropdown-menu.wd-design-default,
.wd-dropdown-menu.wd-design-default .wd-sub-menu-wrapp {
	border-radius: var(--ar-r-md);
	box-shadow: var(--ar-e-panel);
	background-color: var(--ar-surface);
}

.wd-dropdown-menu.wd-design-default {
	border: 1px solid var(--ar-line-strong);
	/* Compacted 2026-09-22 (client: rows "too wide"). The theme's own
	   20px inline padding plus 24px on the link put the text 44px in and
	   wrapped "Smudge, Salvia & Palo Santo"; rows were 37px tall. Now
	   8px + 14px inset and 29px rows, with the hover fill inset as a
	   rounded pill. */
	padding: 8px;
	--wd-dropdown-width: 288px;
}

/* The sub-menu carried its own violet fill from the aside design. The
   panel is a light surface in this system, so the fill is cleared and
   the ink comes back to --ar-text. */
.wd-dropdown-menu.wd-design-default .wd-sub-menu,
.wd-dropdown-menu.wd-design-default .wd-sub-menu > li {
	background-color: transparent;
}

/* DESIGN_SYSTEM.md section 5, the Navigation role: Cinzel 500 / 13px /
   +0.06em / caps. The dropdown was measured at Inter 600 / 16px /
   sentence case / white, which disagreed with the menu directly above it
   in all five parameters. */
.wd-dropdown-menu.wd-design-default .wd-sub-menu > li > a {
	font-family: var(--wd-title-font, "Cinzel", Georgia, serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-text);
	padding: 6px 14px;
	border-radius: var(--ar-r-sm);
	transition: background-color .18s ease, color .18s ease;
}

.wd-dropdown-menu.wd-design-default .wd-sub-menu > li > a:hover,
.wd-dropdown-menu.wd-design-default .wd-sub-menu > li.current-menu-item > a {
	background-color: var(--ar-violet-050);
	color: var(--ar-violet-700);
}

/* "Tutti i prodotti" (menu item 11176) reads as the panel's action, so it
   takes the primary ink and a hairline above it. Targeted by id since
   2026-09-22: as ":last-child" it also caught the last sector of the new
   Consulenze dropdown (Numerologia). The Shop panel is §18's sized design
   now, so this only applies if Shop goes back to a plain dropdown. */
.wd-dropdown-menu.wd-design-default .wd-sub-menu > li.menu-item-11176 > a {
	color: var(--ar-violet-700);
}

.wd-dropdown-menu.wd-design-default .wd-sub-menu > li.menu-item-11176 {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ar-line-strong);
}

/* Third level (added 2026-09-16 with the catalogue tree: "Shop per
   Intenzione" opens its six intentions). Woodmart prints it as
   ul.sub-sub-menu.wd-dropdown, outside the .wd-sub-menu > li > a rules
   above, so it rendered in Inter / sentence case / grey. Same panel and
   Navigation role as level 2; the flyout starts level with its parent row
   (panel padding 8px + 1px border). */
.wd-dropdown-menu.wd-design-default .sub-sub-menu {
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	box-shadow: var(--ar-e-panel);
	background-color: var(--ar-surface);
	padding: 8px;
	margin-top: -9px;
	--wd-dropdown-width: 288px;
}

.wd-dropdown-menu.wd-design-default .wd-sub-menu > li.menu-item-has-children {
	position: relative;
}

.wd-dropdown-menu.wd-design-default .sub-sub-menu > li > a {
	font-family: var(--wd-title-font, "Cinzel", Georgia, serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-text);
	padding: 6px 14px;
	border-radius: var(--ar-r-sm);
	transition: background-color .18s ease, color .18s ease;
}

.wd-dropdown-menu.wd-design-default .sub-sub-menu > li > a:hover,
.wd-dropdown-menu.wd-design-default .sub-sub-menu > li.current-menu-item > a {
	background-color: var(--ar-violet-050);
	color: var(--ar-violet-700);
}

/* Mobile side menu: Woodmart gives levels 2 and 3 the same 20px inset, so
   the six intentions read as siblings of the categories above them. One
   step of indent (20px) shows they belong to "Shop per Intenzione". */
.wd-nav-mobile .item-level-2 > a {
	padding-inline-start: 40px;
}

/* -------------------------------------------------------------------
   15. Shop archive banner
   Approved 2026-09-13.

   The category row under the "SHOP" title used the theme's own icon
   slot (get_term_meta($id,'category_icon')) to show a gold star
   (#B99130, retired sitewide per section 3) on six of the eight
   categories — decorative only, since the icon never varied by
   category. Removed at the source: the term meta is cleared, so
   Woodmart's own walker (class-woodmart-walker-category.php) never
   prints the <img> — no selector here suppresses it.

   The photo was the sitewide `title-background` option's fallback,
   which is really the "Genese e pentasfere" category's own image
   (section 15.4 in DESIGN_SYSTEM.md documents the same bug for three
   category pages; the shop archive itself was never covered). Fixed as
   a layer-1 change: the `shop-background` option now points at its own
   image, scoped to the shop archive only. The scrim below is layer 4 —
   Woodmart has no variable for a background tint, only for the image
   itself — and exists so any future background photo keeps the banner
   text readable without relying on the photo being dark enough already.
   ------------------------------------------------------------------- */
/* .wd-page-title-bg already carries Woodmart's own .wd-fill utility
   (position: absolute; inset: 0), which is what lets it overlay the
   title text instead of pushing it down — do not re-declare `position`
   here, or the element drops out of that overlay and back into normal
   flow, stacking above the text instead of behind it. */
body.woocommerce-shop .wd-page-title-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 19, 37, .35) 0%, rgba(14, 19, 37, .62) 55%, rgba(19, 25, 47, .88) 100%);
	pointer-events: none;
}

/* The row was a centered flex-wrap, which reads fine only when the
   category count happens to divide evenly into the available width —
   at eight it stranded the last item alone on its own line. A grid
   with a fixed track count is deterministic instead: --ar-shop-cat-cols
   is the one number to change (e.g. to 6) to reflow the whole row when
   more categories are added, no other rule needs to move.

   Scoped to body.woocommerce-shop, body.tax-product_cat rather than to
   .wd-nav-product-cat alone: the widget is the same component on the
   main shop archive and on every product-category archive (e.g.
   /categoria-prodotto/servizi-astrologici/), and both templates need the
   same fix — .wd-nav-product-cat has no other use on the site to protect
   against by scoping tighter. */
body.woocommerce-shop .wd-nav-product-cat,
body.tax-product_cat .wd-nav-product-cat {
	--ar-shop-cat-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--ar-shop-cat-cols), 1fr);
	gap: 28px 24px;
}

body.woocommerce-shop .wd-nav-product-cat .cat-item,
body.tax-product_cat .wd-nav-product-cat .cat-item {
	margin: 0;
}

/* Scoped to a direct child of the grid, not just any .category-nav-link
   inside it — a category with children (Gioiellli) nests its own flyout
   <ul class="wd-sub-menu"> right inside the <li>, and its links reuse the
   same .category-nav-link class. A plain descendant selector here would
   give the flyout's rows this tile's hairline and 14px bottom padding too. */
body.woocommerce-shop .wd-nav-product-cat > .cat-item > .category-nav-link,
body.tax-product_cat .wd-nav-product-cat > .cat-item > .category-nav-link {
	display: block;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(232, 231, 235, .22);
}

/* The flyout itself: Woodmart's category walker (class-woodmart-walker-
   category.php) prints .wd-dropdown-menu.wd-design-default and .wd-sub-menu
   on the SAME <ul> — unlike the header's own Shop menu (§14 above), which
   wraps a nested .wd-sub-menu inside a separate .wd-dropdown-menu.wd-design-
   default <div>. §14's ink/type rule is a descendant selector
   (".wd-design-default .wd-sub-menu > li > a"), which can't match an
   element being its own ancestor, so it never reaches this flyout — only
   the compound (same-element) rules do, which is why the panel already
   gets §14's shape (surface, radius, shadow, border) but not its colour.
   Left with only Woodmart's own white .category-nav-link, the rows render
   white-on-#fffbf8: invisible. Re-declared self-referencing so the flyout
   reads the same Navigation role as the dropdown above it. */
body.woocommerce-shop .wd-nav-product-cat .wd-sub-menu.wd-dropdown-menu > .cat-item > .category-nav-link,
body.tax-product_cat .wd-nav-product-cat .wd-sub-menu.wd-dropdown-menu > .cat-item > .category-nav-link {
	font-family: var(--wd-title-font, "Cinzel", Georgia, serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-text);
	padding: 10px 24px;
	transition: background-color .18s ease, color .18s ease;
}

body.woocommerce-shop .wd-nav-product-cat .wd-sub-menu.wd-dropdown-menu > .cat-item > .category-nav-link:hover,
body.tax-product_cat .wd-nav-product-cat .wd-sub-menu.wd-dropdown-menu > .cat-item > .category-nav-link:hover {
	background-color: var(--ar-violet-050);
	color: var(--ar-violet-700);
}

@media (max-width: 860px) {
	body.woocommerce-shop .wd-nav-product-cat,
	body.tax-product_cat .wd-nav-product-cat {
		--ar-shop-cat-cols: 2;
		gap: 18px 16px;
	}
}

/* -------------------------------------------------------------------
   16. Single product buy buttons
   Approved 2026-09-14, after an attempt to recolour the shared
   btns_shop_bg / btns_shop_bg_hover theme options (DESIGN_SYSTEM.md
   §17) was tried, applied, and reverted the same day — the owner didn't
   like the result. This is a different mechanism, not another guess at
   the same one: a component-scoped override (layer 3 of the section 0
   preamble), same pattern as the product-card add-to-cart disc in
   section 9.2, which already uses this exact pair —
   --ar-violet-800 idle, --ar-violet-700 on hover.

   Deliberately NOT the shared --btn-accented-bgcolor option: that
   variable also paints the "Scopri" shop-button role on category tiles
   (section 9's ui_component.html .btn-shop), which nobody asked to
   change. Scoping to .single-product .summary-inner touches only the
   single product page's Add to cart / Buy Now, same wrapper class
   already used by section 10's price override for the identical reason
   — the loop/card buttons and the category "Scopri" button are
   untouched.

   Specificity note, per the section 9 preamble: .single_add_to_cart_button
   and .wd-buy-now-btn are each (0,1,0) in the theme's own stylesheet,
   which prints in the body after this one — so a plain re-declaration
   here would lose on source order every time it did not win on it. The
   selectors below add two class steps to reach (0,3,0), which beats
   (0,1,0) outright, order irrelevant. No !important needed. */
.single-product .summary-inner .single_add_to_cart_button,
.single-product .summary-inner .wd-buy-now-btn {
	background-color: var(--ar-violet-800);
}

.single-product .summary-inner .single_add_to_cart_button:hover,
.single-product .summary-inner .single_add_to_cart_button:focus-visible,
.single-product .summary-inner .wd-buy-now-btn:hover,
.single-product .summary-inner .wd-buy-now-btn:focus-visible {
	background-color: var(--ar-violet-700);
}

/* -------------------------------------------------------------------
   17. Category pages by sector
   Approved 2026-09-22 (dev-docs/mockups/shop-a-settori). Markup from
   ar_sector_loop() in functions.php: one .ar-sector per subcategory,
   its cards are the theme's own [products] grid.
   ------------------------------------------------------------------- */
.ar-sectors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 44px;
}

/* Grid items default to min-width:auto, so on phones the sideways-scrolling
   row below widened its whole section past the screen (600px of 360). */
.ar-sector {
	min-width: 0;
}

.ar-sector-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--ar-line-strong);
}

.ar-sector-title {
	font-size: 21px;
	letter-spacing: .08em;
	color: var(--ar-navy-850);
	margin: 0;
}

.ar-sector-desc {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ar-text-muted);
	max-width: 62ch;
}

.ar-sector-all {
	flex: none;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ar-navy-700);
	white-space: nowrap;
}

.ar-sector-all:hover {
	color: var(--ar-navy-950);
}

/* A sector page is not a sortable grid: "Show 9/12/18/24", the grid/list
   switch and the sort dropdown act on a loop that is not printed here.
   The breadcrumb stays. Sorting or filtering (?orderby=…) brings the
   normal grid back (ar_is_sector_page()). */
body.ar-sector-page .shop-loop-head .wd-shop-tools:last-child,
body.ar-sector-page .shop-loop-head .woocommerce-result-count {
	display: none;
}

/* The line's Collection is the first card of its sector: lifted with the
   primary border, the same object as the rest otherwise. */
.ar-sector .wd-product:has(.ar-collection-count) .wd-product-wrapper {
	border-color: var(--ar-navy-700);
}

/* Collection price: "47,40 €" on the price line, the piece count as a
   small plain line under it (it inherited the price's Cinzel caps and
   wrapped). Applies wherever the card appears, not only in sectors. */
.ar-collection-count {
	display: block;
	font-family: var(--wd-text-font, "Inter", sans-serif);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--ar-text-muted);
}

.wd-product:has(.ar-collection-count) .wd-product-thumb::before {
	content: "Collezione";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: var(--ar-r-sm);
	background: var(--ar-navy-900);
	color: var(--ar-surface);
	font-family: var(--wd-text-font, "Inter", sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Phones: each sector is one row that scrolls sideways, two and a bit
   cards visible so the scroll is discoverable. */
@media (max-width: 767px) {
	.ar-sectors {
		gap: 32px;
	}

	.ar-sector-head {
		flex-wrap: wrap;
		align-items: baseline;
	}

	.ar-sector-title {
		font-size: 17px;
	}

	.ar-sector-desc {
		display: none;
	}

	.ar-sector .wd-products {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		margin-inline-end: -15px;
		padding-inline-end: 15px;
		scrollbar-width: none;
	}

	.ar-sector .wd-products > .wd-product {
		flex: 0 0 44%;
		max-width: none;
		scroll-snap-align: start;
		padding: 0;
	}
}

/* Title strip on category pages: since 2026-09-22 it lists the current
   category's subcategories (or its siblings on a leaf), so 2–7 items.
   §15's four-column grid stranded the fifth; the main Shop page keeps it.

   2026-09-23, option B of dev-docs/mockups/sottonav-categoria/: the first
   version (transparent pills, count at 70 % on a second line, Woodmart's
   15px sans) sat straight on the brightest part of the photo and was
   barely readable. The strip is now a tab bar resting on the bottom edge
   of the banner: a full-width navy plinth with a platinum hairline, items
   in the Navigation role (Cinzel 500 13px caps, DESIGN_SYSTEM §5) split by
   platinum rules, count inline, and Woodmart's own underline
   (wd-style-underline, .nav-link-text::after) recoloured platinum for the
   active/hovered item.

   The plinth is full-bleed although the list lives inside .container: the
   fill is a border-image with a 100vmax side outset. That paints to the
   viewport edges without widening any box, so there is no horizontal
   scroll and no need for overflow: hidden on the banner (which would clip
   a sibling's flyout). */
body.tax-product_cat:not(.ar-cat-top-leaf) .wd-page-title {
	padding-bottom: 0;
}

body.tax-product_cat:not(.ar-cat-top-leaf) .wd-page-title-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 19, 37, .15) 0%, rgba(14, 19, 37, .35) 60%, rgba(14, 19, 37, .55) 100%);
	pointer-events: none;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	margin: 34px 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	overflow-x: auto;
	scrollbar-width: none;
	border-image: linear-gradient(rgba(201, 199, 206, .25) 0 1px, rgba(11, 15, 30, .62) 1px) fill 0 / 0 / 0 100vmax;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat::-webkit-scrollbar {
	display: none;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item {
	flex: none;
	margin: 0;
}

/* auto margins centre the row while it fits and let it scroll from the
   first item when it does not (justify-content: center would cut the
   start off on a phone) */
body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item:first-child {
	margin-inline-start: auto;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item:last-child {
	margin-inline-end: auto;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item + .cat-item {
	border-inline-start: 1px solid rgba(201, 199, 206, .25);
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item > .category-nav-link {
	display: block;
	padding: 17px 30px 16px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ar-platinum-300);
	font-family: var(--wd-title-font, "Cinzel", Georgia, serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .18s ease;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat .nav-link-summary {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat .nav-link-text::after {
	height: 1px;
	margin-top: 5px;
	background-color: var(--ar-platinum-300);
}

/* "3 prodotti" stays whole (the walker prints number and word in one
   span): small, muted, on the same line as the name */
body.tax-product_cat .wd-page-title .wd-nav-product-cat .nav-link-count {
	display: inline;
	margin: 0;
	opacity: 1;
	font-family: var(--wd-text-font, "Inter", sans-serif);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ar-platinum-700);
	transition: color .18s ease;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item.wd-active > .category-nav-link,
body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item > .category-nav-link:hover {
	color: #fff;
}

body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item.wd-active .nav-link-count,
body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item > .category-nav-link:hover .nav-link-count {
	color: var(--ar-platinum-500);
}

/* The strip is always open, so Woodmart's mobile "Categories" toggle
   (untranslated, and it toggled a list that was already showing) goes. */
body.tax-product_cat .wd-page-title .wd-btn-show-cat {
	display: none;
}

@media (max-width: 1024px) {
	body.tax-product_cat .wd-page-title .wd-nav-product-cat {
		margin-top: 22px;
	}

	body.tax-product_cat .wd-page-title .wd-nav-product-cat > .cat-item > .category-nav-link {
		padding: 15px 18px 14px;
		font-size: 12px;
	}
}

/* Technical categories never belong in the strip: "booking" (84, the
   bookings plugin's own) and "Senza categoria" (128, WooCommerce default).
   Woodmart's exclude option is skipped on the neighbours branch. */
.wd-nav-product-cat .cat-item-84,
.wd-nav-product-cat .cat-item-128 {
	display: none;
}

/* Top-level category without subcategories: its neighbours are the whole
   catalogue (see ar_top_level_leaf_body_class()), so no strip at all. */
body.ar-cat-top-leaf .wd-page-title .wd-nav-product-cat {
	display: none;
}

/* Without the strip the title band shrank to ~200px and the 3:1 photo
   was cropped to a thin middle slice (the book disappeared). Its height
   now follows the width, close to the photo's own ratio, so the subject
   on the left third stays whole. */
body.ar-cat-top-leaf .wd-page-title {
	min-height: clamp(240px, 24vw, 440px);
	display: flex;
	align-items: center;
}

body.ar-cat-top-leaf .wd-page-title > .container {
	width: 100%;
}

/* -------------------------------------------------------------------
   18. Shop mega menu by area (2026-09-22)
   The Shop dropdown is now Woodmart's "sized" design (menu item 10443,
   960px): one column per area — Rituali e purificazione, Cristalli ed
   energia, Carte e libri, Shop per intenzione — each a level-1 item over
   its categories. §14 styles the "default" design only; this gives the
   sized panel the same surface and the Navigation role, with the area
   names as Cinzel column titles.
   ------------------------------------------------------------------- */
.wd-dropdown-menu.wd-design-sized {
	background-color: var(--ar-surface);
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	box-shadow: var(--ar-e-panel);
	padding-block: 26px 30px;
}

.wd-dropdown-menu.wd-design-sized .item-level-1 > .woodmart-nav-link {
	font-family: var(--wd-title-font, "Cinzel", Georgia, serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--ar-line-strong);
}

.wd-dropdown-menu.wd-design-sized .sub-sub-menu .woodmart-nav-link {
	font-size: 13.5px;
	color: var(--ar-text);
	padding-block: 5px;
	transition: color .18s ease;
}

.wd-dropdown-menu.wd-design-sized .sub-sub-menu .woodmart-nav-link:hover,
.wd-dropdown-menu.wd-design-sized .item-level-1 > .woodmart-nav-link:hover {
	color: var(--ar-navy-700);
}

/* "Tutti i prodotti" closes the Carte e libri column: the panel's action. */
.wd-dropdown-menu.wd-design-sized .sub-sub-menu .menu-item-11176 > .woodmart-nav-link {
	color: var(--ar-navy-700);
	font-weight: 600;
	margin-top: 6px;
}

/* -------------------------------------------------------------------
   19. Shop page by area (2026-09-22)
   ar_shop_areas() in functions.php: four .ar-area blocks of the
   homepage category tiles (§4), then the full product grid. The title
   strip's 13-category grid (§15) would repeat the areas, so it is
   hidden on this page; sorted or filtered views keep it.
   ------------------------------------------------------------------- */
.ar-areas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	margin-bottom: 40px;
}

.ar-area {
	min-width: 0;
	scroll-margin-top: 110px;   /* clear of the sticky header when reached from the menu */
}

.ar-area .ar-sector-title,
.ar-all-products {
	padding-bottom: 10px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--ar-line-strong);
}

.ar-all-products {
	margin: 8px 0 0;
}

body.ar-shop-areas .wd-page-title .wd-nav-product-cat {
	display: none;
}

/* Libri: its banner is the book on its own pale studio backdrop (client,
   2026-09-23), so the title cannot stay white. The page title carries
   Woodmart's color-scheme-light, which paints text and the back arrow
   through --color-gray-800/900: the two variables are given the heading
   ink back on this category only, so the scheme's own rules keep working.
   Category images live in the media library, so this is keyed to the term
   slug rather than to the image. The h1 itself reads --wd-title-color (the
   scheme sets it to #FFF too): without it only the back arrow turned navy
   and the title stayed white on the pale backdrop (fixed 2026-09-23). */
body.term-libri .wd-page-title {
	--wd-title-color: var(--ar-navy-850);
	--wd-text-color: var(--ar-text);
	--color-gray-800: var(--ar-navy-850);
	--color-gray-900: var(--ar-navy-850);
	--color-gray-700: var(--ar-text);
	--color-gray-600: var(--ar-text-muted);
}

/* -------------------------------------------------------------------
   20. Consultation price lists (2026-09-23)
   inc/listino.php + js/listino.js; mockup dev-docs/mockups/consulenze-listino.
   Cartomanzia, Astrologia, Numerologia print the client's price list:
   sections (icon, title, "Che cos'è" always visible) of price cards, and
   for Cartomanzia a configurator with the price tables under it. The same
   step cards replace the variation dropdown on the products' own pages.

   Room for more artwork: a page or a section given `art` in
   listino_map.py gets `.has-art` and `--ar-art`; the image is painted as
   a faded layer behind the content (never under the text at full
   strength). Change opacity/position in 20.7 only.
   Every motion here stops under prefers-reduced-motion (20.8).
   ------------------------------------------------------------------- */

/* --- 20.1 Page and lead ------------------------------------------- */
.ar-listino,
.ar-steps {
	--ar-gold: #b8975a;
	--ar-gold-soft: #efe6d4;
	--ar-ease: cubic-bezier(.2, .7, .2, 1);
	--ar-title: "Cinzel", "Times New Roman", Georgia, serif;
}

/* these boxes set display: grid, which would beat the browser's own [hidden] */
.ar-config[hidden],
.ar-step[hidden],
.ar-steps[hidden] {
	display: none;
}

.ar-listino {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 44px;
	margin-bottom: 40px;
}

/* the category description would repeat the price list's own intro above the breadcrumb */
body.ar-listino-page .term-description {
	display: none;
}

/* no "5 prodotti" in the title strip of the consultation categories (inc/listino.php, ar_is_consulenze_area) */
body.tax-product_cat.ar-consulenze-area .wd-page-title .wd-nav-product-cat .nav-link-count {
	display: none;
}

body.ar-listino-page .shop-loop-head .wd-shop-tools:last-child,
body.ar-listino-page .shop-loop-head .woocommerce-result-count {
	display: none;
}

.ar-i-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ar-i {
	width: 22px;
	height: 22px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ar-listino-lead {
	display: grid;
	justify-items: center;
	gap: 16px;
	text-align: center;
}

.ar-listino-lead p {
	margin: 0;
	max-width: 62ch;
	color: var(--ar-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.ar-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(320px, 100%);
	color: var(--ar-gold);
}

.ar-divider::before,
.ar-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ar-navy-200));
}

.ar-divider::after {
	transform: scaleX(-1);
}

.ar-i-star {
	width: 14px;
	height: 14px;
	fill: currentColor;
	stroke: none;
}

.ar-jump {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ar-jump a {
	display: grid;
	justify-items: center;
	gap: 6px;
	min-width: 128px;
	padding: 14px 12px 12px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	color: var(--ar-navy-850);
	font: 600 12px/1.2 var(--ar-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: transform .25s var(--ar-ease), border-color .25s, box-shadow .25s;
}

.ar-jump a small {
	font: 400 12px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ar-text-muted);
}

.ar-jump a .ar-i {
	width: 28px;
	height: 28px;
	color: var(--ar-navy-700);
}

.ar-jump a:hover,
.ar-jump a:focus-visible {
	border-color: var(--ar-navy-700);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(50, 63, 113, .12);
}

.ar-listino-note {
	margin: -24px 0 0;
	font-size: 12.5px;
	color: var(--ar-text-muted);
}

/* --- 20.2 Section head and "Che cos'è" ----------------------------- */
.ar-listino-section {
	position: relative;
	display: grid;
	gap: 18px;
	min-width: 0;
	scroll-margin-top: 110px;
}

.ar-listino-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 14px;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ar-line-strong);
}

.ar-listino-ico {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, var(--ar-navy-700), var(--ar-navy-900) 70%);
	color: var(--ar-surface);
	box-shadow: 0 0 0 4px var(--ar-surface), 0 0 0 5px var(--ar-navy-200);
}

.ar-listino-title {
	margin: 0;
	font: 600 21px/1.25 var(--ar-title);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ar-listino-head p {
	margin: 0;
	font-size: 14px;
	color: var(--ar-text-muted);
}

.ar-what {
	position: relative;
	max-width: 90ch;
	padding: 14px 16px 14px 44px;
	border-radius: var(--ar-r-sm);
	background: var(--ar-navy-050);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ar-text);
}

.ar-what::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 17px;
	width: 14px;
	height: 14px;
	background: var(--ar-gold);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.ar-what b {
	display: block;
	margin-bottom: 4px;
	font: 600 12px var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-700);
}

/* "Tempi": how soon the PDF arrives, centred under the lead like the intro */
.ar-what.ar-timing {
	justify-self: center;
	width: 100%;
	max-width: 62ch;
}

/* --- 20.3 Price cards ---------------------------------------------- */
.ar-tiers {
	display: grid;
	grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	gap: 16px;
	padding-top: 10px;   /* room for the badges that sit on the top edge */
}

.ar-tier {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 14px;
	padding: 20px 16px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	transition: transform .3s var(--ar-ease), box-shadow .3s, border-color .3s;
}

.ar-tier:hover {
	transform: translateY(-3px);
	border-color: var(--ar-navy-400);
	box-shadow: 0 10px 26px rgba(50, 63, 113, .14);
}

.ar-tier.is-hot {
	border-color: var(--ar-navy-700);
	box-shadow: 0 6px 22px rgba(50, 63, 113, .14);
}

.ar-tier-body {
	display: grid;
	align-content: start;
	gap: 8px;
}

.ar-tier-price {
	font: 700 34px/1 var(--ar-title);
	color: var(--ar-navy-900);
	font-variant-numeric: tabular-nums;
}

.ar-tier-title {
	margin: 0;
	font: 600 15px/1.3 var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ar-text);
}

.ar-tier ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ar-text-muted);
}

.ar-tier li {
	position: relative;
	margin: 0;
	padding-left: 16px;
}

.ar-tier li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ar-navy-200);
}

.ar-tier li.is-plus::before {
	background: var(--ar-gold);
}

.ar-tier-save {
	margin: 0;
	font-size: 12px;
	color: var(--ar-navy-700);
}

.ar-tier-save s {
	color: var(--ar-text-muted);
	white-space: nowrap;
}

.ar-tier-cta,
.ar-config-cta {
	display: block;
	padding: 11px 14px;
	border: 1px solid var(--ar-navy-700);
	border-radius: var(--ar-r-sm);
	background: transparent;
	color: var(--ar-navy-700);
	font: 600 11px/1.2 var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	transition: background .2s, color .2s;
}

.ar-tier.is-hot .ar-tier-cta,
.ar-tier-cta:hover,
.ar-tier-cta:focus-visible {
	background: var(--ar-navy-700);
	color: var(--ar-surface);
}

/* one card only (Rivoluzione solare): a wide row, not a lone card in a grid */
.ar-tiers.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.ar-tiers.is-single .ar-tier {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto;
	align-items: center;
	gap: 8px 28px;
}

.ar-tiers.is-single .ar-tier-cta {
	min-width: 180px;
}

.ar-badge {
	position: absolute;
	top: -10px;
	left: 14px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: linear-gradient(100deg, var(--ar-navy-700) 40%, #5b6aa6 50%, var(--ar-navy-700) 60%) 0 0 / 250% 100%;
	color: var(--ar-surface);
	font: 600 10px/1.4 var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	animation: ar-shimmer 4s linear infinite;
}

.ar-badge.is-soft {
	border: 1px solid var(--ar-navy-700);
	background: var(--ar-white);
	color: var(--ar-navy-700);
	animation: none;
}

@keyframes ar-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -150% 0; }
}

/* --- 20.4 Step cards (configurator and product page) --------------- */
.ar-step {
	display: grid;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ar-step.is-reveal {
	animation: ar-reveal .45s var(--ar-ease);
}

@keyframes ar-reveal {
	from { opacity: .2; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ar-step legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	font: 600 11px/1.3 var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ar-text-muted);
}

.ar-step-n {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ar-navy-900);
	color: var(--ar-surface);
	font: 600 11px var(--ar-title, "Cinzel", serif);
	letter-spacing: 0;
}

.ar-choices {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
	gap: 10px;
	padding-top: 8px;   /* room for the badges */
}

.ar-choice {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	cursor: pointer;
	transition: border-color .25s, box-shadow .25s, transform .25s var(--ar-ease, ease), background .25s;
}

.ar-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ar-choice:hover {
	border-color: var(--ar-navy-400);
	transform: translateY(-2px);
}

.ar-choice:has(input:focus-visible) {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 2px;
}

.ar-choice:has(input:checked) {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-050);
	box-shadow: inset 0 0 0 1px var(--ar-navy-700), 0 8px 20px rgba(50, 63, 113, .12);
}

.ar-choice.is-off {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.ar-tick {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--ar-navy-200);
	border-radius: 50%;
	transition: background .25s, border-color .25s;
}

.ar-i-check {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--ar-surface);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	transition: stroke-dashoffset .35s var(--ar-ease, ease) .05s;
}

.ar-choice:has(input:checked) .ar-tick {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
}

.ar-choice:has(input:checked) .ar-i-check {
	stroke-dashoffset: 0;
}

.ar-choice-t {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--ar-text);
}

.ar-choice-d {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ar-text-muted);
}

.ar-choice-p {
	font: 700 20px/1 var(--ar-title, "Cinzel", serif);
	color: var(--ar-navy-900);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ar-choice-p.is-add {
	font: 600 15px var(--wd-text-font, "Inter", sans-serif);
	color: var(--ar-gold, #b8975a);
}

.ar-choice-p.is-inc {
	font: 500 12px var(--wd-text-font, "Inter", sans-serif);
	color: var(--ar-text-muted);
}

.ar-choice .ar-badge {
	top: -9px;
	left: 12px;
}

/* mode cards: large, centred, icon on top */
.ar-choice-mode {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 6px;
	padding: 20px 12px 16px;
	text-align: center;
}

.ar-choice-mode .ar-tick {
	position: absolute;
	top: 10px;
	right: 10px;
}

.ar-choice-ic {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--ar-navy-050);
	color: var(--ar-navy-700);
	transition: background .3s, color .3s, transform .4s var(--ar-ease, ease);
}

.ar-choice-ic .ar-i {
	width: 26px;
	height: 26px;
}

.ar-choice-mode:has(input:checked) .ar-choice-ic {
	background: var(--ar-navy-900);
	color: var(--ar-surface);
	transform: rotate(-8deg) scale(1.06);
}

.ar-choice-mode .ar-choice-t {
	font: 600 14px/1.3 var(--ar-title, "Cinzel", serif);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ar-choice-mode .ar-choice-d {
	margin-top: 4px;
	font-family: var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: 0;
	text-transform: none;
}

.ar-choice-from {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ar-navy-700);
}

/* --- 20.5 Configurator ---------------------------------------------- */
.ar-config {
	position: relative;
	display: grid;
	gap: 24px;
	padding: 24px 24px 0;
	border: 1px solid var(--ar-line-strong);
	border-radius: 12px;
	background: var(--ar-white);
	overflow: clip;   /* clip, not hidden: hidden would make the summary's sticky scroll inside the form */
}

/* zodiac ring watermark in the corner, slowly turning */
.ar-config::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -90px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	opacity: .55;
	pointer-events: none;
	background: repeating-conic-gradient(from 0deg, var(--ar-line-strong) 0 .6deg, transparent .6deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
	mask: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
	animation: ar-spin 90s linear infinite;
}

@keyframes ar-spin {
	to { transform: rotate(360deg); }
}

.ar-config > header {
	position: relative;
}

.ar-config-title {
	margin: 0;
	font: 600 20px/1.25 var(--ar-title);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ar-config > header p {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--ar-text-muted);
}

/* the summary stays in view at the bottom of the screen while the steps scroll by */
.ar-config-summary {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-inline: -24px;
	padding: 16px 24px;
	background: var(--ar-navy-900);
	color: var(--ar-surface);
}

.ar-config-what {
	display: grid;
	flex: 1 1 240px;
	gap: 2px;
	min-width: 0;
}

.ar-config-what small {
	font: 600 10px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ar-navy-200);
}

.ar-config-label {
	font: 600 15px/1.35 var(--ar-title);
	letter-spacing: .04em;
}

.ar-config-total {
	font: 700 32px/1 var(--ar-title);
	font-variant-numeric: tabular-nums;
}

.ar-config-total.is-bump {
	animation: ar-bump .4s var(--ar-ease);
}

@keyframes ar-bump {
	40% { transform: scale(1.12); color: var(--ar-gold-soft, #efe6d4); }
}

.ar-config-cta,
.ar-config-cta:hover {
	border-color: var(--ar-surface);
	background: var(--ar-surface);
	color: var(--ar-navy-900);
	padding: 12px 20px;
}

.ar-config-cta:hover {
	background: var(--ar-gold-soft);
}

.ar-config-next {
	flex-basis: 100%;
	margin-top: -4px;
	font-size: 12px;
	color: var(--ar-navy-200);
}

/* --- 20.6 Price tables ---------------------------------------------- */
.ar-price-tables {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ar-price-table h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font: 600 13px var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ar-price-table h3 .ar-i {
	width: 18px;
	height: 18px;
	color: var(--ar-navy-700);
}

.ar-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
}

.ar-price-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ar-price-table th,
.ar-price-table td {
	padding: 9px 10px;
	border: 0;
	border-bottom: 1px solid var(--ar-line);
	text-align: center;
	vertical-align: middle;
}

.ar-price-table tr:last-child th,
.ar-price-table tr:last-child td {
	border-bottom: 0;
}

.ar-price-table thead th {
	background: var(--ar-navy-050);
	font: 600 11px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-text-muted);
}

.ar-price-table tbody th {
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	color: var(--ar-text);
}

.ar-price-table td a {
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: var(--ar-r-sm);
	font: 700 16px var(--ar-title);
	color: var(--ar-navy-900);
	white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s;
}

.ar-price-table td a:hover {
	border-color: var(--ar-navy-400);
}

.ar-price-table td a.is-on {
	background: var(--ar-navy-700);
	color: var(--ar-surface);
}

/* --- 20.7 Legal, optional artwork ----------------------------------- */
.ar-listino-legal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	padding: 16px 18px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ar-text-muted);
}

.ar-listino-legal b {
	display: block;
	margin-bottom: 4px;
	font: 600 12px var(--ar-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

/* "Domande frequenti": on the price list after the sections, on the product page under the order form */
.ar-faq {
	display: grid;
	gap: 10px;
	max-width: 90ch;
}

.ar-faq-item {
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	transition: border-color .25s;
}

.ar-faq-item[open] {
	border-color: var(--ar-navy-200);
}

.ar-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	list-style: none;
	cursor: pointer;
	font: 600 15px/1.35 var(--ar-title);
	color: var(--ar-navy-850);
}

.ar-faq-item summary::-webkit-details-marker {
	display: none;
}

.ar-faq-item summary:focus-visible {
	outline: 2px solid var(--ar-navy-700);
	outline-offset: 2px;
	border-radius: var(--ar-r-md);
}

.ar-faq-toggle {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--ar-navy-700);
	transform: rotate(90deg);
	transition: transform .25s var(--ar-ease);
}

.ar-faq-item[open] .ar-faq-toggle {
	transform: rotate(-90deg);
}

.ar-faq-a {
	padding: 0 16px 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ar-text);
}

.ar-faq-a p {
	margin: 0 0 8px;
}

.ar-faq-a p:last-child {
	margin-bottom: 0;
}

.ar-faq-box {
	display: grid;
	gap: 12px;
}

.ar-faq-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 600 13px var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-700);
}

.ar-faq-title .ar-i {
	width: 20px;
	height: 20px;
}

.ar-listino.has-art::before,
.ar-listino-section.has-art::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: var(--ar-art) no-repeat center / contain;
	opacity: .12;
}

.ar-listino.has-art::before {
	inset: -40px 0 auto;
	height: 420px;
	-webkit-mask: linear-gradient(#000, transparent);
	mask: linear-gradient(#000, transparent);
}

.ar-listino-section.has-art::before {
	top: -20px;
	right: -20px;
	width: min(320px, 45%);
	aspect-ratio: 1;
}

/* --- 20.8 Product page, tablets and phones, reduced motion ---------- */
.ar-steps {
	display: grid;
	gap: 18px;
	margin-bottom: 18px;
}

/* product page: two options side by side, three or more as a list (a third card would sit alone) */
.ar-steps .ar-choices {
	--n: 2 !important;
}

.ar-steps .ar-choices:has(> :nth-child(3)) {
	--n: 1 !important;
}

.ar-steps-live {
	margin: 0;
	font-size: 13px;
	color: var(--ar-text-muted);
}

.ar-steps-live a {
	color: var(--ar-navy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* the cards drive the dropdown, which stays in the form (hidden) for WooCommerce */
form.variations_form.ar-steps-on table.variations {
	display: none;
}

/* "25,00 € – 70,00 €" under the title: the cards carry the prices, the chosen one shows by the button */
body.ar-listino-product .summary-inner > .price,
body.ar-listino-product .summary-inner > p.price {
	display: none;
}

@media (max-width: 1024px) {
	.ar-tiers {
		grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ar-listino {
		gap: 36px;
	}

	.ar-jump {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.ar-jump a {
		min-width: 0;
	}

	.ar-listino-title {
		font-size: 17px;
	}

	.ar-listino-ico {
		width: 40px;
		height: 40px;
	}

	.ar-what {
		padding: 12px 14px 12px 38px;
		font-size: 13.5px;
	}

	.ar-what::before {
		left: 14px;
		top: 15px;
		width: 12px;
		height: 12px;
	}

	.ar-tiers,
	.ar-choices,
	.ar-steps .ar-choices,
	.ar-price-tables,
	.ar-listino-legal {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ar-tiers {
		gap: 18px;
	}

	.ar-tier {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto;
		align-items: end;
		gap: 10px 16px;
		padding: 18px 14px 14px;
	}

	.ar-tier-price {
		font-size: 28px;
	}

	.ar-tier-cta {
		align-self: end;
		padding-inline: 16px;
	}

	.ar-tiers.is-single .ar-tier-cta {
		min-width: 0;
	}

	.ar-config {
		gap: 20px;
		padding: 18px 14px 0;
	}

	.ar-config::before {
		top: -120px;
		right: -120px;
	}

	/* modes in a column: icon, text, "da" price on one row */
	.ar-choice-mode {
		grid-template-columns: auto minmax(0, 1fr) auto;
		justify-items: start;
		gap: 12px;
		padding: 12px 40px 12px 12px;
		text-align: left;
	}

	.ar-choice-mode .ar-tick {
		top: 50%;
		right: 12px;
		margin-top: -10px;
	}

	.ar-choice-ic {
		width: 44px;
		height: 44px;
	}

	.ar-config-summary {
		margin-inline: -14px;
		padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
		gap: 6px 14px;
	}

	.ar-config-what {
		flex-basis: 100%;
	}

	.ar-config-label {
		font-size: 13px;
	}

	.ar-config-total {
		font-size: 26px;
	}

	.ar-config-cta {
		flex: 1;
	}

	.ar-config-next {
		display: none;
	}
}

/* Woodmart's bottom toolbar (tablets and phones, body.sticky-toolbar-on, 55px) would cover the summary */
@media (max-width: 1024px) {
	body.sticky-toolbar-on .ar-config-summary {
		bottom: 55px;
	}

	/* "back to top" sat on "Continua": above the pinned summary while the configurator is in view (listino.js) */
	body.ar-config-in-view .scrollToTop {
		bottom: 187px; /* 67px (Woodmart, over the toolbar) + the summary, 118px on a phone */
	}
}

@media (prefers-reduced-motion: reduce) {
	.ar-listino *,
	.ar-listino *::before,
	.ar-listino::before,
	.ar-steps *,
	.ar-faq-box * {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------
   21. Consultation path (2026-09-24)
   inc/guida.php, inc/prenotazione.php, js/prenotazione.js (+ the test in
   js/listino.js); mockup dev-docs/mockups/consulenze-percorso.
   21.1 Consulenze as a guide: doors, needs, the test, how it works
   21.2 Homepage box [ar_guida_consulenze]
   21.3 Booking page of a consultation (body.ar-booking)
   21.4 Shop clutter off around consultations
   21.5 Phones and reduced motion
   ------------------------------------------------------------------- */

.ar-guide,
.ar-g-home,
.ar-g-areas-home,
body.ar-booking {
	--ar-gold: #b8975a;
	--ar-gold-soft: #efe6d4;
	--ar-ease: cubic-bezier(.2, .7, .2, 1);
	--ar-title: "Cinzel", "Times New Roman", Georgia, serif;
	--ar-platinum-500: #c9c7ce;
	--ar-platinum-700: #8e8c97;
}

/* --- 21.1 Consulenze as a guide ------------------------------------ */
.ar-guide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 56px;
	margin-bottom: 48px;
}

.ar-g-sec {
	display: grid;
	gap: 22px;
	justify-items: stretch;
}

.ar-g-sec > .ar-divider,
.ar-g-quiz > .ar-divider {
	justify-self: center;
	margin-top: -10px;
}

.ar-g-head {
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
}

.ar-g-eyebrow {
	font: 600 11px/1.3 var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ar-navy-400);
}

.ar-g-head .ar-g-title {
	margin: 0;
	font: 600 25px/1.2 var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
	text-wrap: balance;
}

.ar-g-head p {
	margin: 0;
	max-width: 62ch;
	color: var(--ar-text-muted);
}

/* doors */
.ar-g-doors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

a.ar-g-door {
	display: grid;
	grid-template-rows: 170px auto;
	overflow: hidden;
	border-radius: var(--ar-r-md, 8px);
	background: var(--ar-navy-900);
	color: var(--ar-surface);
	text-decoration: none;
	box-shadow: var(--ar-e-card);
	transition: transform .35s var(--ar-ease), box-shadow .35s;
}

a.ar-g-door:hover,
a.ar-g-door:focus-visible {
	color: var(--ar-surface);
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(50, 63, 113, .25);
}

.ar-g-door-art {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(201, 199, 206, .3);
	background: radial-gradient(90% 120% at 30% 10%, var(--ar-navy-600), var(--ar-navy-900) 65%);
}

/* the product photo, dimmed under navy, behind the icon and the zodiac ring */
.ar-g-door-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(19, 25, 47, .35), rgba(19, 25, 47, .85)), var(--ar-door-img, none) center / cover no-repeat;
	transition: transform .8s var(--ar-ease);
}

a.ar-g-door:hover .ar-g-door-art::before {
	transform: scale(1.05);
}

.ar-g-door-art::after {
	content: "";
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	opacity: .55;
	background: repeating-conic-gradient(from 0deg, rgba(232, 231, 235, .55) 0 .7deg, transparent .7deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 72%, transparent 73%);
	mask: radial-gradient(circle, transparent 60%, #000 61%, #000 72%, transparent 73%);
	animation: ar-spin 120s linear infinite;
}

a.ar-g-door:hover .ar-g-door-art::after {
	animation-duration: 30s;
}

@keyframes ar-spin {
	to { transform: rotate(360deg); }
}

.ar-g-door-art .ar-i {
	position: relative;
	z-index: 1;
	width: 58px;
	height: 58px;
	stroke-width: 1.1;
	color: var(--ar-platinum-300);
}

.ar-g-door-body {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 18px;
}

.ar-g-door-t {
	font: 600 20px/1.2 var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ar-g-door-t small {
	display: block;
	margin-top: 2px;
	font: 500 11px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	color: var(--ar-platinum-500);
}

.ar-g-door-p {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 251, 248, .82);
}

.ar-g-door ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.ar-g-door li {
	margin: 0;
	padding: 3px 9px;
	border: 1px solid rgba(201, 199, 206, .35);
	border-radius: 999px;
	font-size: 12px;
	color: var(--ar-platinum-300);
}

.ar-g-door-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid rgba(201, 199, 206, .22);
}

.ar-g-door-from {
	font: 600 13px var(--wd-text-font, "Inter", sans-serif);
	color: var(--ar-platinum-500);
}

.ar-g-door-from b {
	font: 700 22px var(--ar-title);
	color: var(--ar-surface);
}

.ar-g-door-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 11px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ar-g-door-go .ar-i {
	width: 16px;
	height: 16px;
	transition: transform .3s var(--ar-ease);
}

a.ar-g-door:hover .ar-g-door-go .ar-i {
	transform: translateX(4px);
}

/* needs (page and homepage box) */
.ar-g-needs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

a.ar-g-need {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 4px 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md, 8px);
	background: var(--ar-white, #fff);
	color: var(--ar-text);
	text-decoration: none;
	transition: border-color .25s, transform .25s var(--ar-ease), box-shadow .25s;
}

a.ar-g-need:hover,
a.ar-g-need:focus-visible {
	border-color: var(--ar-navy-400);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(50, 63, 113, .1);
	color: var(--ar-text);
}

.ar-g-need-ic {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ar-navy-050);
	color: var(--ar-navy-700);
}

a.ar-g-need q {
	quotes: none;
	font: 600 15px/1.35 var(--wd-text-font, "Inter", sans-serif);
	color: var(--ar-navy-850);
}

a.ar-g-need q::before,
a.ar-g-need q::after {
	content: none;
}

.ar-g-need-go {
	grid-row: span 2;
	color: var(--ar-navy-400);
}

.ar-g-need-go .ar-i {
	width: 18px;
	height: 18px;
}

.ar-g-need-to {
	font-size: 13px;
	color: var(--ar-text-muted);
}

.ar-g-need-to b {
	font-weight: 600;
	color: var(--ar-navy-700);
}

/* the test */
.ar-g-quiz {
	position: relative;
	display: grid;
	gap: 22px;
	overflow: hidden;
	padding: 34px 30px;
	border-radius: 12px;
	background: linear-gradient(115deg, var(--ar-navy-600) 0%, var(--ar-navy-850) 45%, var(--ar-navy-900) 100%);
	color: var(--ar-surface);
	scroll-margin-top: 120px;
}

/* a faint starfield */
.ar-g-quiz::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .55;
	background-image: radial-gradient(1px 1px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 28% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 41% 22%, #fff, transparent), radial-gradient(1px 1px at 63% 64%, #fff, transparent), radial-gradient(1.5px 1.5px at 77% 28%, #fff, transparent), radial-gradient(1px 1px at 88% 58%, #fff, transparent), radial-gradient(1px 1px at 54% 40%, #fff, transparent);
	animation: ar-twinkle 6s ease-in-out infinite alternate;
}

@keyframes ar-twinkle {
	from { opacity: .35; }
	to { opacity: .75; }
}

.ar-g-quiz > * {
	position: relative;
}

.ar-g-quiz .ar-g-title {
	color: var(--ar-surface);
}

.ar-g-quiz .ar-g-head p {
	color: rgba(255, 251, 248, .8);
}

.ar-g-quiz .ar-g-eyebrow {
	color: var(--ar-platinum-500);
}

.ar-g-q {
	display: grid;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ar-g-q legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 0;
	font: 600 11px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ar-platinum-500);
}

.ar-g-q .ar-step-n {
	background: var(--ar-surface);
	color: var(--ar-navy-900);
}

.ar-g-opts {
	display: grid;
	grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
	gap: 10px;
}

label.ar-g-opt {
	position: relative;
	display: grid;
	align-content: start;
	gap: 4px;
	margin: 0;
	padding: 12px;
	border: 1px solid rgba(201, 199, 206, .35);
	border-radius: var(--ar-r-md, 8px);
	background: rgba(255, 255, 255, .04);
	color: var(--ar-surface);
	cursor: pointer;
	transition: background .25s, border-color .25s, transform .25s var(--ar-ease);
}

label.ar-g-opt:hover {
	border-color: var(--ar-platinum-500);
	transform: translateY(-2px);
}

label.ar-g-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

label.ar-g-opt:has(input:focus-visible) {
	outline: 2px solid var(--ar-platinum-300);
	outline-offset: 2px;
}

label.ar-g-opt:has(input:checked) {
	border-color: var(--ar-surface);
	background: var(--ar-surface);
	color: var(--ar-navy-900);
}

label.ar-g-opt b {
	font-size: 14px;
	font-weight: 600;
}

label.ar-g-opt small {
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 251, 248, .72);
}

label.ar-g-opt:has(input:checked) small {
	color: var(--ar-text-muted);
}

.ar-g-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 22px;
	align-items: center;
	padding: 18px;
	border-radius: 10px;
	background: var(--ar-surface);
	color: var(--ar-text);
}

.ar-g-result.is-new {
	animation: ar-reveal .45s var(--ar-ease);
}

@keyframes ar-reveal {
	from { opacity: .2; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ar-g-result small {
	font: 600 10.5px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ar-navy-400);
}

.ar-g-result h3 {
	margin: 2px 0 4px;
	font: 600 20px/1.25 var(--ar-title);
	letter-spacing: .05em;
	color: var(--ar-navy-850);
}

.ar-g-result p {
	margin: 0;
	max-width: 64ch;
	font-size: 14px;
	color: var(--ar-text-muted);
}

.ar-g-result p.ar-g-result-alt {
	margin-top: 8px;
	font-size: 13px;
}

.ar-g-result-alt a {
	font-weight: 600;
	color: var(--ar-navy-700);
}

.ar-g-result-buy {
	display: grid;
	justify-items: end;
	gap: 8px;
}

.ar-g-result-p {
	font: 700 30px/1 var(--ar-price-font, var(--ar-title));
	font-variant-numeric: tabular-nums;
	color: var(--ar-navy-900);
}

a.ar-g-result-cta,
a.ar-g-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--ar-navy-700);
	border-radius: var(--ar-r-sm, 4px);
	background: var(--ar-navy-700);
	color: var(--ar-surface);
	font: 600 12px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
}

a.ar-g-result-cta:hover {
	background: var(--ar-navy-950);
	color: var(--ar-surface);
}

.ar-g-help {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	font-size: 14px;
	color: rgba(255, 251, 248, .85);
}

.ar-g-help a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid rgba(201, 199, 206, .5);
	border-radius: 999px;
	color: var(--ar-surface);
	font-weight: 600;
	text-decoration: none;
}

.ar-g-help a:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--ar-surface);
}

.ar-g-help .ar-i {
	width: 18px;
	height: 18px;
}

/* how it works: the steps really are a sequence */
ol.ar-g-how {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ar-how;
}

ol.ar-g-how li {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--ar-line-strong);
	counter-increment: ar-how;
}

ol.ar-g-how li::before {
	content: counter(ar-how);
	display: block;
	margin-bottom: 6px;
	font: 700 30px/1 var(--ar-title);
	color: var(--ar-gold);
}

ol.ar-g-how b {
	display: block;
	margin-bottom: 4px;
	font: 600 14px var(--ar-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

ol.ar-g-how p {
	margin: 0;
	font-size: 14px;
	color: var(--ar-text-muted);
}

/* --- 21.2 Homepage: the doors, then the box ------------------------- */
.ar-g-areas-home {
	margin-bottom: 56px;
}


.ar-g-home {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	overflow: hidden;
	border: 1px solid var(--ar-line-strong);
	border-radius: 12px;
	background: var(--ar-white, #fff);
	text-align: left;
}

.ar-g-home-l {
	position: relative;
	display: grid;
	align-content: center;
	gap: 14px;
	overflow: hidden;
	padding: 32px 28px;
	background: linear-gradient(160deg, var(--ar-navy-700), var(--ar-navy-900) 70%);
	color: var(--ar-surface);
}

.ar-g-home-l::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	opacity: .5;
	pointer-events: none;
	background: repeating-conic-gradient(from 0deg, rgba(232, 231, 235, .5) 0 .6deg, transparent .6deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
	mask: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
	animation: ar-spin 90s linear infinite;
}

.ar-g-home-l .ar-g-eyebrow {
	color: var(--ar-platinum-500);
}

.ar-g-home-l h2 {
	margin: 0;
	font: 600 26px/1.2 var(--ar-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-surface);
	text-wrap: balance;
}

.ar-g-home-l p {
	margin: 0;
	max-width: 40ch;
	font-size: 14.5px;
	color: rgba(255, 251, 248, .82);
}

.ar-g-home-ctas {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

a.ar-g-btn.is-light {
	border-color: var(--ar-surface);
	background: var(--ar-surface);
	color: var(--ar-navy-900);
}

a.ar-g-btn.is-light:hover {
	background: var(--ar-navy-100);
	color: var(--ar-navy-900);
}

a.ar-g-btn.is-ghost {
	border-color: rgba(201, 199, 206, .6);
	background: transparent;
	color: var(--ar-surface);
}

a.ar-g-btn.is-ghost:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--ar-surface);
}

.ar-g-home-r {
	display: grid;
	align-content: center;
	gap: 10px;
	padding: 22px;
}

.ar-g-areas-mini {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ar-text-muted);
}

.ar-g-areas-mini a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--ar-line-strong);
	border-radius: 999px;
	color: var(--ar-navy-700);
	font: 600 12px var(--ar-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.ar-g-areas-mini a:hover {
	border-color: var(--ar-navy-700);
}

.ar-g-areas-mini .ar-i {
	width: 16px;
	height: 16px;
}

/* --- 21.3 Booking page --------------------------------------------- */
/* no gallery: the photo is small, in the summary. !important beats the column widths Woodmart prints inline. */
body.ar-booking .product-image-summary-inner > .product-images {
	display: none;
}

body.ar-booking .product-image-summary-inner > .summary {
	--wd-col-lg: 12 !important;
	--wd-col-md: 12 !important;
}

body.ar-booking .summary-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	column-gap: 44px;
	align-items: start;
}

body.ar-booking .summary-inner > * {
	grid-column: 1;
	min-width: 0;
}

body.ar-booking .summary-inner > .ar-bk-recap {
	grid-column: 2;
	grid-row: 1 / span 30;
	align-self: start;
	position: sticky;
	top: 100px;
}

body.ar-booking .summary-inner > .ar-bk-bar {
	grid-column: 1 / -1;
}

/* clutter: brand, prev/next, "Buy now", quantity, wishlist, meta, share, the variation's own price */
body.ar-booking .wd-product-brands,
body.ar-booking .wd-products-nav,
body.ar-booking .wd-buy-now-btn,
body.ar-booking form.cart .quantity,
body.ar-booking .summary-inner > .wd-wishlist-btn,
body.ar-booking .summary-inner .wd-compare-btn,
body.ar-booking .product_meta,
body.ar-booking .summary-inner > .wd-social-icons,
body.ar-booking .single_variation .woocommerce-variation-price,
body.ar-booking .single_variation .woocommerce-variation-description,
body.ar-booking .epofw_addon_totals {
	display: none !important;
}

body.ar-booking .product_title {
	margin-bottom: 8px;
	font-size: 30px;
}

body.ar-booking .woocommerce-product-details__short-description {
	max-width: 62ch;
	color: var(--ar-text-muted);
}

/* "Risposta in tempi brevi" under the short description (written and PDF consultations) */
body.ar-booking .ar-bk-timing {
	display: inline-flex;
	justify-self: start; /* the summary is a grid: without it the pill takes the whole column */
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--ar-gold-soft, #efe6d4);
	border-radius: 999px;
	background: var(--ar-navy-050);
	font-size: 13px;
	font-weight: 600;
	color: var(--ar-navy-850);
}

body.ar-booking .ar-bk-timing .ar-i {
	width: 16px;
	height: 16px;
	color: var(--ar-gold, #b8975a);
}

/* steps: every part of the form in a numbered card */
body.ar-booking form.cart.ar-bk-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* Woodmart's justify-content: start would shrink the column to its content */
	gap: 14px;
	margin-top: 18px;
}

body.ar-booking form.ar-bk-form .single_variation_wrap,
body.ar-booking form.ar-bk-form .variations_button {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.ar-bk-card {
	display: grid;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--ar-line-strong);
	border-radius: 10px;
	background: var(--ar-white, #fff);
	animation: ar-reveal .35s var(--ar-ease);
}

.ar-bk-card[hidden] {
	display: none;
}

.ar-bk-h {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.ar-bk-n {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ar-navy-900);
	color: var(--ar-surface);
	font: 600 12px var(--ar-title);
}

.ar-bk-h h2 {
	flex: 1;
	margin: 0;
	font: 600 14px/1.3 var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ar-bk-picked {
	font-weight: 600;
	color: var(--ar-text);
}

.ar-bk-edit {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ar-navy-700);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.ar-bk-edit[hidden] {
	display: none;
}

.ar-bk-edit:hover {
	background: none;
	color: var(--ar-navy-950);
}

/* chosen before arriving: the formula card closes to one line */
.ar-bk-card.is-done {
	background: var(--ar-navy-050);
}

.ar-bk-card.is-done .ar-bk-n {
	background: var(--ar-navy-700);
}

.ar-bk-card.is-done .ar-bk-h h2 {
	flex: 0 0 auto;
}

.ar-bk-card.is-done .ar-bk-picked {
	flex: 1;
}

.ar-bk-card.is-done > :not(.ar-bk-h) {
	display: none !important;
}

/* the cards inside a card need no second frame */
.ar-bk-card .ar-steps,
.ar-bk-card .cm-booking,
.ar-bk-card .cm-booking-contact,
.ar-bk-card .epofw_addon_html {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ar-bk-card .ar-steps > .ar-step > legend {
	display: none;
}

.ar-bk-card-formula table.variations {
	margin: 0;
}

/* the real button stays at the end of the steps, full width */
body.ar-booking form.ar-bk-form .single_add_to_cart_button {
	width: 100%;
	padding-block: 16px;
}

/* summary */
.ar-bk-recap {
	overflow: hidden;
	border: 1px solid var(--ar-line-strong);
	border-radius: 12px;
	background: var(--ar-white, #fff);
	box-shadow: var(--ar-e-panel);
}

.ar-bk-recap-img {
	height: 120px;
	background: radial-gradient(90% 120% at 25% 15%, var(--ar-navy-600), var(--ar-navy-900) 65%) center / cover no-repeat;
}

.ar-bk-recap-b {
	display: grid;
	gap: 10px;
	padding: 16px 18px 18px;
}

.ar-bk-recap-b > small {
	font: 600 10.5px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ar-navy-400);
}

.ar-bk-recap-t {
	margin: 0;
	font: 600 17px/1.3 var(--ar-title);
	letter-spacing: .05em;
	color: var(--ar-navy-850);
}

.ar-bk-rows {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 12px;
	margin: 0;
	font-size: 13px;
}

.ar-bk-rows dt {
	color: var(--ar-text-muted);
	font-weight: 400;
}

.ar-bk-rows dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.ar-bk-rows dd.is-todo {
	font-weight: 500;
	color: var(--ar-alert, #8e3b52);
}

.ar-bk-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 12px;
	border-top: 1px solid var(--ar-line-strong);
}

.ar-bk-total span {
	font-size: 13px;
	color: var(--ar-text-muted);
}

.ar-bk-total b {
	font: 700 30px/1 var(--ar-price-font, var(--ar-title));
	font-variant-numeric: tabular-nums;
	color: var(--ar-navy-900);
}

button.ar-bk-go {
	width: 100%;
	padding: 14px;
	border: 1px solid var(--ar-navy-700);
	border-radius: var(--ar-r-sm, 4px);
	background: var(--ar-navy-700);
	color: var(--ar-surface);
	font: 600 12px var(--wd-text-font, "Inter", sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, opacity .2s;
}

button.ar-bk-go:hover {
	background: var(--ar-navy-950);
	color: var(--ar-surface);
}

/* still clickable: the click leads to what is missing */
button.ar-bk-go.is-waiting {
	opacity: .6;
}

.ar-bk-miss {
	margin: 0;
	font-size: 12.5px;
	color: var(--ar-text-muted);
}

.ar-bk-miss.is-ok {
	color: var(--ar-navy-700);
}

ul.ar-bk-trust {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--ar-text-muted);
}

ul.ar-bk-trust li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

ul.ar-bk-trust li[hidden] {
	display: none;
}

ul.ar-bk-trust .ar-i {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--ar-navy-700);
}

.ar-bk-bar,
.ar-bk-bar[hidden] {
	display: none;
}

/* description in its accordion: "Cosa ricevi e come funziona" */
body.ar-booking .woocommerce-tabs {
	margin-top: 24px;
}

/* "Altre consulenze di …" */
.ar-bk-others {
	display: grid;
	gap: 14px;
	margin-block: 10px 48px;
}

.ar-bk-others h2 {
	margin: 0;
	font: 600 16px var(--ar-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ar-bk-others > div {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.ar-bk-others > div a {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md, 8px);
	background: var(--ar-white, #fff);
	color: var(--ar-navy-850);
	text-decoration: none;
	transition: border-color .2s;
}

.ar-bk-others > div a:hover {
	border-color: var(--ar-navy-400);
}

.ar-bk-others span {
	font: 600 13px var(--ar-title);
	letter-spacing: .05em;
}

.ar-bk-others small {
	color: var(--ar-text-muted);
}

a.ar-bk-others-all {
	justify-self: start;
	font-size: 13px;
	font-weight: 600;
	color: var(--ar-navy-700);
}

/* --- 21.4 Shop clutter off around consultations -------------------- */
/* consultation cards anywhere (homepage, search, related): no quick view, no wishlist */
.wd-product.product_cat-consulenze .wd-quick-view-btn,
.wd-product.product_cat-consulenze .wd-wishlist-btn {
	display: none !important;
}

/* phone toolbar: no "Filters" and "Wishlist" on the consultation pages */
body.ar-consulenze-area .wd-toolbar .wd-header-wishlist,
body.ar-consulenze-area .wd-toolbar .wd-toolbar-shop-filters,
body.ar-consulenze-area .wd-toolbar .wd-toolbar-sidebar,
body.ar-booking .wd-toolbar .wd-header-wishlist {
	display: none !important;
}

/* --- 21.5 Phones and reduced motion -------------------------------- */
@media (max-width: 1024px) {
	.ar-g-doors {
		grid-template-columns: minmax(0, 1fr);
	}

	a.ar-g-door {
		grid-template-rows: 120px auto;
	}

	.ar-g-opts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	ol.ar-g-how {
		grid-template-columns: minmax(0, 1fr);
	}

	.ar-g-home {
		grid-template-columns: minmax(0, 1fr);
	}

	/* booking: one column, the summary is the bar at the bottom */
	body.ar-booking .summary-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ar-booking .summary-inner > .ar-bk-recap {
		display: none;
	}

	.ar-bk-bar:not([hidden]) {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0 !important; /* .wd-set-mb gives every summary child 20px below */
		z-index: 360;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--ar-navy-900);
		color: var(--ar-surface);
		box-shadow: 0 -6px 20px rgba(11, 15, 30, .18);
	}

	body.sticky-toolbar-on .ar-bk-bar:not([hidden]) {
		bottom: 55px;
	}

	.ar-bk-bar > div {
		flex: 1;
		display: grid;
	}

	.ar-bk-bar small {
		font-size: 11px;
		color: var(--ar-platinum-500);
	}

	.ar-bk-bar b {
		font: 700 24px/1 var(--ar-price-font, var(--ar-title));
		color: var(--ar-surface);
	}

	.ar-bk-bar button.ar-bk-go {
		width: auto;
		flex: 1.4;
		border-color: var(--ar-surface);
		background: var(--ar-surface);
		color: var(--ar-navy-900);
	}

	/* room for the bar, and "back to top" above it */
	body.ar-booking .main-page-wrapper {
		padding-bottom: 80px;
	}

	body.ar-booking .scrollToTop {
		bottom: 150px;
	}
}

@media (max-width: 600px) {
	.ar-g-needs {
		grid-template-columns: minmax(0, 1fr);
	}

	.ar-g-opts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ar-g-quiz {
		padding: 24px 16px;
	}

	.ar-g-result {
		grid-template-columns: minmax(0, 1fr);
	}

	.ar-g-result-buy {
		justify-items: start;
	}

	.ar-g-home-l {
		padding: 24px 18px;
	}

	.ar-g-home-r {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ar-guide *,
	.ar-guide *::before,
	.ar-guide *::after,
	.ar-g-home *,
	.ar-g-home *::after,
	.ar-bk-card {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------
   22. Horoscope section (2026-09-29)
   Plugin ar-oroscopo (markup in includes/render.php and templates/);
   mockup dev-docs/mockups/oroscopo, approved 2026-09-29. Navy and
   platinum only — the client mockup's gold is retired here as everywhere
   (DESIGN_SYSTEM.md §3).
   22.1 Page shell and the full-bleed bands
   22.2 Hero, period switch, buttons
   22.3 Video card (poster, player, consent)
   22.4 Section heads, the twelve signs, archive, channel box
   22.5 Sign page: text, aside, previous / next, strip
   22.6 "Disponibile da dicembre" and the menu label
   22.7 Tablets, phones, reduced motion
   22.8 The path to the offer (mockup oroscopo-percorso, 2026-09-30)
   ------------------------------------------------------------------- */

/* 22.1 ---------------------------------------------------------------- */
.aro-page {
	--aro-title: "Cinzel", "Times New Roman", Georgia, serif;
	--aro-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--aro-ease: cubic-bezier(.2, .7, .2, 1);
	--aro-inner: min(100%, var(--wd-container-w, 1222px));
	--aro-pad: 15px;
}

/* The crumbs bar sits straight under the header, like the mockup; §13 keeps
   the 40 px everywhere else. */
.aro-page .wd-content-layout {
	padding-block: 0;
}

/* Bands run edge to edge from inside the 1222 px container — the same
   arithmetic Woodmart's own stretched rows use, scrollbar excluded. */
.aro-bleed {
	width: calc(100vw - var(--wd-scroll-w, 0px));
	margin-inline: calc(50% - (100vw - var(--wd-scroll-w, 0px)) / 2);
}

.aro-page .wd-page-content {
	overflow-x: clip;
}

.aro-page .site-content {
	color: var(--ar-text);
	font-family: var(--aro-body);
}

.aro-crumbs {
	background: var(--ar-navy-050);
	border-bottom: 1px solid var(--ar-line);
	font-size: 12.5px;
	color: var(--ar-text-muted);
}

.aro-crumbs-in {
	max-width: var(--aro-inner);
	margin-inline: auto;
	padding: 14px var(--aro-pad);
}

.aro-crumbs a {
	color: var(--ar-text-muted);
	text-decoration: none;
}

.aro-crumbs a:hover {
	color: var(--ar-navy-700);
}

.aro-crumbs [aria-current] {
	color: var(--ar-text);
	font-weight: 600;
}

.aro-crumbs-sep {
	margin-inline: 4px;
	color: var(--ar-navy-200);
}

/* 22.2 ---------------------------------------------------------------- */
.aro-hero {
	position: relative;
	overflow: hidden;
	color: var(--ar-surface);
	background: radial-gradient(120% 140% at 15% 10%, var(--ar-navy-700) 0%, var(--ar-navy-900) 55%, var(--ar-navy-950) 100%);
}

.aro-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .55;
	background-image:
		radial-gradient(1px 1px at 12% 30%, #fff, transparent),
		radial-gradient(1px 1px at 28% 70%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 41% 22%, #fff, transparent),
		radial-gradient(1px 1px at 63% 64%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 77% 28%, #fff, transparent),
		radial-gradient(1px 1px at 88% 58%, #fff, transparent),
		radial-gradient(1px 1px at 54% 40%, #fff, transparent),
		radial-gradient(1px 1px at 6% 82%, #fff, transparent),
		radial-gradient(1px 1px at 94% 12%, #fff, transparent);
	animation: aro-twinkle 6s ease-in-out infinite alternate;
}

@keyframes aro-twinkle {
	from { opacity: .35; }
	to { opacity: .75; }
}

.aro-hero-in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: center;
	max-width: var(--aro-inner);
	margin-inline: auto;
	padding: 64px var(--aro-pad) 56px;
}

.aro-hero--solo .aro-hero-in {
	grid-template-columns: minmax(0, 1fr);
}

.aro-eyebrow {
	margin: 0;
	font: 600 11px/1.5 var(--aro-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ar-navy-400);
}

.aro-hero .aro-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	color: var(--ar-platinum-500);
}

.aro-eyebrow i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.aro-page .aro-hero h1 {
	margin: 14px 0;
	font: 600 40px/1.12 var(--aro-title);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--ar-surface);
}

.aro-hero-text {
	max-width: 54ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 251, 248, .84);
}

.aro-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.aro-cta,
.aro-page button.aro-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	padding: 13px 22px;
	border: 1px solid var(--ar-navy-700);
	border-radius: var(--ar-r-sm);
	background: var(--ar-navy-700);
	box-shadow: none;
	color: var(--ar-surface);
	font: 600 12px/1.3 var(--aro-body);
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.aro-cta:hover,
.aro-cta:focus-visible {
	background: var(--ar-navy-950);
	border-color: var(--ar-navy-950);
	color: var(--ar-surface);
}

.aro-cta .aro-svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.aro-cta--light,
.aro-page button.aro-cta--light {
	background: var(--ar-surface);
	border-color: var(--ar-surface);
	color: var(--ar-navy-900);
}

.aro-cta--light:hover,
.aro-cta--light:focus-visible {
	background: var(--ar-platinum-300);
	border-color: var(--ar-platinum-300);
	color: var(--ar-navy-900);
}

.aro-cta--ghost {
	background: transparent;
	color: var(--ar-navy-700);
}

.aro-cta--ghost:hover,
.aro-cta--ghost:focus-visible {
	background: var(--ar-navy-700);
	border-color: var(--ar-navy-700);
	color: var(--ar-surface);
}

.aro-cta--ghost-light {
	background: transparent;
	border-color: rgba(201, 199, 206, .6);
	color: var(--ar-surface);
}

.aro-cta--ghost-light:hover,
.aro-cta--ghost-light:focus-visible {
	background: rgba(255, 255, 255, .08);
	border-color: var(--ar-platinum-300);
	color: var(--ar-surface);
}

.aro-page .site-content a:focus-visible,
.aro-page .site-content button:focus-visible {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 2px;
}

.aro-hero .aro-cta:focus-visible,
.aro-hero a:focus-visible {
	outline-color: var(--ar-platinum-300);
}

/* Settimanale / Mensile / Annuale */
.aro-periods {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 32px;
	padding: 13px 16px 11px;
	overflow-x: auto;
	background: var(--ar-navy-900);
	border-top: 1px solid rgba(201, 199, 206, .3);
	scrollbar-width: none;
}

.aro-periods a {
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	color: rgba(255, 251, 248, .72);
	font: 500 13px var(--aro-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.aro-periods a:hover {
	color: var(--ar-surface);
}

.aro-periods a[aria-current] {
	color: var(--ar-surface);
	border-color: var(--ar-platinum-500);
}

.aro-periods a.is-soon:not([aria-current]) {
	color: rgba(201, 199, 206, .55);
}

.aro-periods small {
	margin-left: 2px;
	font: 500 11px var(--aro-body);
	letter-spacing: .04em;
	text-transform: none;
}

/* 22.3 ---------------------------------------------------------------- */
.aro-vid {
	overflow: hidden;
	border-radius: var(--ar-r-lg);
	background: var(--ar-surface);
	color: var(--ar-text);
	box-shadow: 0 4px 24px rgba(14, 19, 37, .25);
}

.aro-page .aro-vid-poster,
.aro-vid-frame,
.aro-vid-consent {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: radial-gradient(80% 110% at 50% 30%, var(--ar-navy-600), var(--ar-navy-900) 70%);
	box-shadow: none;
	color: var(--ar-platinum-300);
	cursor: pointer;
	overflow: hidden;
}

/* The drawn poster: a slow ring of ticks, the sign glyph if there is one. */
.aro-vid-poster:not(.has-thumb)::after {
	content: "";
	position: absolute;
	width: 58%;
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: .5;
	background: repeating-conic-gradient(from 0deg, rgba(232, 231, 235, .55) 0 .7deg, transparent .7deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 72%, transparent 73%);
	mask: radial-gradient(circle, transparent 62%, #000 63%, #000 72%, transparent 73%);
	animation: aro-spin 120s linear infinite;
}

@keyframes aro-spin {
	to { transform: rotate(360deg); }
}

.aro-vid-art .aro-svg {
	width: 72px;
	height: 72px;
	opacity: .35;
	stroke-width: 1.2;
}

.aro-vid-poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aro-vid-play {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 251, 248, .95);
	color: var(--ar-navy-900);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	transition: transform .3s var(--aro-ease);
}

.aro-vid-play .aro-svg {
	width: 22px;
	height: 22px;
	margin-left: 3px;
}

.aro-vid-poster:hover .aro-vid-play,
.aro-vid-poster:focus-visible .aro-vid-play {
	transform: scale(1.08);
}

.aro-vid-frame {
	cursor: auto;
	background: #000;
}

.aro-vid-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.aro-vid-consent {
	cursor: auto;
	align-content: center;
	gap: 0;
	padding: 20px 24px;
	text-align: center;
}

.aro-vid-consent p {
	max-width: 42ch;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ar-platinum-300);
}

.aro-vid-consent .aro-row {
	justify-content: center;
	margin-top: 14px;
}

.aro-vid-consent .aro-cta {
	padding: 10px 16px;
	font-size: 11px;
}

.aro-vid-cap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var(--ar-line);
}

.aro-vid-cap b {
	font: 600 12px/1.4 var(--aro-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-vid-cap a {
	flex: none;
	font: 600 12px var(--aro-body);
	color: var(--ar-navy-700);
	text-decoration: none;
}

.aro-vid-cap a:hover {
	text-decoration: underline;
}

/* 22.4 ---------------------------------------------------------------- */
.aro-sec {
	display: grid;
	gap: 32px;
	padding-block: 72px;
}

.aro-sec--alt {
	padding-inline: var(--aro-pad);
	background: var(--ar-navy-050);
	border-block: 1px solid var(--ar-line);
}

.aro-sec--tight {
	padding-block: 16px 72px;
}

.aro-sec--strip {
	padding-block: 32px 24px;
}

.aro-sec-head {
	display: grid;
	gap: 10px;
	justify-items: center;
	text-align: center;
}

.aro-page .aro-sec-head h2 {
	margin: 0;
	font: 600 27px/1.2 var(--aro-title);
	letter-spacing: .13em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--ar-navy-850);
}

.aro-page .aro-sec-head h2.aro-h-small {
	font-size: 19px;
}

.aro-sec-head p {
	max-width: 62ch;
	margin: 0;
	color: var(--ar-text-muted);
}

.aro-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(300px, 100%);
	color: var(--ar-platinum-700);
}

.aro-divider::before,
.aro-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ar-platinum-500));
}

.aro-divider::after {
	transform: scaleX(-1);
}

.aro-divider .aro-svg {
	width: 12px;
	height: 12px;
}

/* the twelve signs */
.aro-signs {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 22px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aro-signs li {
	margin: 0;
	list-style: none;
}

.aro-sign {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 4px 0;
	border-radius: var(--ar-r-md);
	color: var(--ar-text);
	text-align: center;
	text-decoration: none;
}

.aro-sign-disc {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 84px;
	aspect-ratio: 1;
	border: 1px solid var(--ar-platinum-500);
	border-radius: 50%;
	background: var(--ar-white);
	box-shadow: var(--ar-e-card);
	color: var(--ar-navy-700);
	transition: background-color .3s var(--aro-ease), color .3s, border-color .3s, transform .3s var(--aro-ease), box-shadow .3s;
}

.aro-sign-disc .aro-svg {
	width: 44%;
	height: 44%;
}

.aro-sign:hover,
.aro-sign:focus-visible {
	color: var(--ar-navy-850);
}

.aro-sign:hover .aro-sign-disc,
.aro-sign:focus-visible .aro-sign-disc {
	transform: translateY(-3px);
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
	box-shadow: 0 10px 24px rgba(50, 63, 113, .25);
	color: var(--ar-platinum-300);
}

.aro-page .site-content .aro-sign:focus-visible {
	outline: none;
}

.aro-sign:focus-visible .aro-sign-disc {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 3px;
}

.aro-sign b {
	font: 500 14px var(--aro-body);
}

.aro-sign small {
	margin-top: -6px;
	font-size: 11.5px;
	line-height: 1.35;
	white-space: nowrap;
	color: var(--ar-text-muted);
}

/* archive */
.aro-arch {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aro-arch li {
	margin: 0;
	list-style: none;
}

.aro-arch a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--ar-line-strong);
	border-radius: 999px;
	background: var(--ar-white);
	color: var(--ar-navy-700);
	font-size: 13px;
	text-decoration: none;
	transition: border-color .2s;
}

.aro-arch a:hover {
	border-color: var(--ar-navy-400);
}

/* channel box */
.aro-yt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px 32px;
	align-items: center;
	padding: 28px 32px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	box-shadow: var(--ar-e-card);
}

.aro-page .aro-yt h3 {
	margin: 0 0 6px;
	font: 600 19px/1.3 var(--aro-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-yt p {
	margin: 0;
	color: var(--ar-text-muted);
}

/* The index pages build the same box from native WPBakery elements: a row
   with el_class "aro-yt-row", a text column and a woodmart_button column. */
.aro-yt-row.vc_row {
	margin: 72px 0;
	padding: 28px 17px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	box-shadow: var(--ar-e-card);
	align-items: center;
}

.aro-yt-row .wpb_text_column,
.aro-yt-row .wd-button-wrapper {
	margin-bottom: 0;
}

.aro-page .aro-yt-row h3 {
	margin: 0 0 6px;
	font: 600 19px/1.3 var(--aro-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-yt-row p {
	margin: 0;
	color: var(--ar-text-muted);
}

.aro-yt-row .wd-button-wrapper {
	text-align: right;
}

/* 22.5 ---------------------------------------------------------------- */
.aro-hero--sign .aro-hero-in {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 36px;
	padding-block: 52px;
}

.aro-glyph {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 1px solid var(--ar-platinum-500);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ar-navy-600), var(--ar-navy-900) 75%);
	box-shadow: 0 0 0 8px rgba(201, 199, 206, .08);
	color: var(--ar-platinum-300);
}

.aro-glyph .aro-svg {
	width: 40px;
	height: 40px;
	stroke-width: 1.3;
}

.aro-glyph--lg {
	width: 132px;
	height: 132px;
}

.aro-glyph--lg .aro-svg {
	width: 56px;
	height: 56px;
}

/* The H1 carries the period in its eyebrow half: one heading, read whole. */
.aro-page .aro-hero--sign h1 {
	display: grid;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 46px;
}

.aro-hero--sign h1 .aro-eyebrow {
	font: 600 11px/1.5 var(--aro-body);
	letter-spacing: .14em;
}

.aro-meta {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 251, 248, .7);
}

.aro-hero--sign .aro-row {
	margin-top: 20px;
}

.aro-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 56px;
	align-items: start;
	padding: 56px 0 24px;
}

.aro-body--solo {
	grid-template-columns: minmax(0, 1fr);
}

.aro-text {
	max-width: 68ch;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--ar-text);
}

.aro-text > :first-child {
	margin-top: 0;
}

.aro-text p {
	margin: 0 0 18px;
}

/* The first paragraph is the summary: set larger, in heading ink. */
.aro-text > p:first-child {
	font-size: 18.5px;
	line-height: 1.65;
	color: var(--ar-navy-850);
}

.aro-page .aro-text h2,
.aro-page .aro-text h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 34px 0 10px;
	font: 600 19px/1.3 var(--aro-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-page .aro-text h3 {
	font-size: 16px;
}

.aro-text h2::before,
.aro-text h3::before {
	content: "";
	flex: none;
	width: 22px;
	height: 1px;
	background: var(--ar-platinum-700);
}

.aro-text strong {
	color: var(--ar-navy-850);
}

.aro-text blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--ar-platinum-500);
	color: var(--ar-navy-850);
	font-style: italic;
}

.aro-text ul,
.aro-text ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.aro-empty {
	color: var(--ar-text-muted);
}

.aro-aside {
	position: sticky;
	top: calc(var(--wd-admin-bar-h, 0px) + 80px);
	display: grid;
	gap: 14px;
}

.aro-aside .aro-vid {
	border: 1px solid var(--ar-line-strong);
	box-shadow: var(--ar-e-card);
}

.aro-aside .aro-cta {
	width: 100%;
}

.aro-note {
	margin: 0;
	font-size: 12.5px;
	text-align: center;
	color: var(--ar-text-muted);
}

/* previous / all / next */
.aro-pn {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	align-items: center;
	padding-top: 8px;
}

.aro-pn-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
	color: inherit;
	text-decoration: none;
	transition: border-color .25s, transform .25s var(--aro-ease), box-shadow .25s;
}

.aro-pn-link:hover {
	transform: translateY(-2px);
	border-color: var(--ar-navy-400);
	box-shadow: 0 8px 20px rgba(50, 63, 113, .1);
	color: inherit;
}

.aro-pn-next {
	justify-content: flex-end;
	text-align: right;
}

.aro-pn-mini {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ar-platinum-500);
	border-radius: 50%;
	color: var(--ar-navy-700);
}

.aro-pn-mini .aro-svg {
	width: 20px;
	height: 20px;
}

.aro-pn small {
	display: block;
	font: 600 10.5px var(--aro-body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ar-navy-400);
}

.aro-pn b {
	font: 600 16px var(--aro-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-pn-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ar-navy-700);
	font: 600 12px var(--aro-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.aro-pn-all .aro-svg {
	width: 16px;
	height: 16px;
}

/* the strip of twelve */
.aro-strip {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aro-strip li {
	margin: 0;
	list-style: none;
}

.aro-strip a {
	display: grid;
	justify-items: center;
	gap: 4px;
	color: var(--ar-text-muted);
	font-size: 11.5px;
	text-decoration: none;
}

.aro-strip span {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ar-line-strong);
	border-radius: 50%;
	background: var(--ar-white);
	color: var(--ar-navy-700);
	transition: border-color .2s, background-color .2s, color .2s;
}

.aro-strip .aro-svg {
	width: 20px;
	height: 20px;
}

.aro-strip a:hover span {
	border-color: var(--ar-navy-400);
}

.aro-strip a[aria-current] {
	color: var(--ar-navy-850);
	font-weight: 600;
}

.aro-strip a[aria-current] span {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
	color: var(--ar-platinum-300);
}

/* 22.6 ---------------------------------------------------------------- */
.aro-soon {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 72px 0;
	text-align: center;
}

.aro-page .aro-soon h1 {
	margin: 0;
	font: 600 27px/1.2 var(--aro-title);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-soon p {
	max-width: 52ch;
	margin: 0;
	color: var(--ar-text-muted);
}

.aro-soon .aro-row {
	justify-content: center;
	margin-top: 6px;
}

/* Site-wide (the menu is on every page), so no .aro-page variables here.
   Inter, not the menu's Cinzel: Cinzel has no lowercase to show. */
.aro-menu-soon {
	margin-left: 4px;
	font: 500 .85em "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--ar-text-muted);
}

.aro-menu-item-soon > a {
	color: var(--ar-text-muted);
}

/* 22.7 ---------------------------------------------------------------- */
@media (max-width: 1100px) {
	.aro-signs {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.aro-hero-in {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 40px 32px;
	}

	.aro-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-top: 36px;
	}

	.aro-aside {
		position: static;
		max-width: 560px;
	}

	.aro-sec {
		gap: 24px;
		padding-block: 48px;
	}

	.aro-sec--tight {
		padding-block: 8px 48px;
	}
}

@media (max-width: 768px) {
	.aro-page .aro-hero h1 {
		font-size: 30px;
	}

	.aro-hero--sign .aro-hero-in {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		justify-items: start;
	}

	.aro-glyph--lg {
		width: 84px;
		height: 84px;
	}

	.aro-glyph--lg .aro-svg {
		width: 38px;
		height: 38px;
	}

	.aro-page .aro-hero--sign h1 {
		font-size: 32px;
	}

	.aro-page .aro-sec-head h2 {
		font-size: 21px;
		letter-spacing: .08em;
	}

	.aro-yt,
	.aro-yt-row.vc_row {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px 18px;
	}

	.aro-yt-row .wd-button-wrapper {
		margin-top: 14px;
		text-align: left;
	}

	.aro-pn {
		grid-template-columns: 1fr 1fr;
	}

	.aro-pn-all {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}

	.aro-strip {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: 14px;
	}

	.aro-periods {
		justify-content: flex-start;
		gap: 22px;
	}
}

@media (max-width: 560px) {
	.aro-signs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px 8px;
	}

	.aro-sign b {
		font-size: 13px;
	}

	.aro-sign small {
		font-size: 10.5px;
	}

	.aro-text {
		font-size: 16px;
	}

	.aro-text > p:first-child {
		font-size: 17.5px;
	}
}

@media (max-width: 480px) {
	/* The period wraps under the type: a dot left at the end of the first
	   line reads as a stray mark, so the two stack instead. */
	.aro-hero .aro-eyebrow {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.aro-hero .aro-eyebrow i {
		display: none;
	}

	.aro-strip a {
		font-size: 10px;
	}

	.aro-pn-mini {
		display: none;
	}

	.aro-pn-link {
		padding: 12px;
	}

	.aro-pn b {
		font-size: 14px;
	}
}

/* Most phones: the content column is under 380 px, and three larger discs
   per row beat four cramped ones. */
@media (max-width: 420px) {
	.aro-signs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.aro-hero::before,
	.aro-vid-poster::after {
		animation: none;
	}

	.aro-page .site-content *,
	.aro-page .site-content *::before,
	.aro-page .site-content *::after {
		transition: none !important;
	}
}

/* 22.8 ---------------------------------------------------------------- */
/* Hero: the video plays on the page; YouTube stays one small link away. */
.aro-yt-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 6px;
	color: rgba(255, 251, 248, .78);
	font: 500 13px var(--aro-body);
	text-decoration: none;
}

.aro-yt-link:hover,
.aro-yt-link:focus-visible {
	color: var(--ar-surface);
	text-decoration: underline;
}

.aro-yt-link .aro-svg {
	width: 16px;
	height: 16px;
}

/* "Il tuo Ariete, anche nel tempo" and "Guarda più lontano" */
.aro-sec--path {
	gap: 40px;
	padding-block: 32px 56px;
}

.aro-path {
	display: grid;
	gap: 22px;
}

.aro-path-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 8px 24px;
}

.aro-page .aro-path-head h2 {
	margin: 6px 0 0;
	font: 600 22px/1.25 var(--aro-title);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-path-head p {
	max-width: 46ch;
	margin: 0;
	color: var(--ar-text-muted);
}

.aro-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aro-steps--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aro-steps li {
	margin: 0;
}

.aro-step {
	position: relative;
	display: grid;
	align-content: start;
	gap: 8px;
	height: 100%;
	padding: 18px 18px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: 10px;
	background: var(--ar-white);
	color: var(--ar-text);
	text-decoration: none;
	transition: border-color .25s, transform .25s var(--aro-ease), box-shadow .25s;
}

a.aro-step:hover,
a.aro-step:focus-visible {
	border-color: var(--ar-navy-400);
	color: var(--ar-text);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(50, 63, 113, .12);
}

.aro-step small {
	font: 600 10.5px/1.4 var(--aro-body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ar-navy-400);
}

.aro-step b {
	font: 600 16px/1.25 var(--aro-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.aro-step-q {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ar-text-muted);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.aro-step-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font: 600 12px var(--aro-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ar-navy-700);
}

.aro-step-go .aro-svg {
	width: 14px;
	height: 14px;
}

.aro-step.is-here {
	border-style: dashed;
	background: var(--ar-navy-050);
}

.aro-step.is-here .aro-step-go {
	color: var(--ar-text-muted);
}

.aro-step.is-soon {
	opacity: .6;
}

.aro-step.is-next {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
	box-shadow: 0 10px 28px rgba(50, 63, 113, .28);
}

a.aro-step.is-next:hover,
a.aro-step.is-next:focus-visible {
	border-color: var(--ar-navy-900);
	background: var(--ar-navy-900);
}

.aro-step.is-next small {
	color: var(--ar-platinum-500);
}

.aro-step.is-next b,
.aro-step.is-next .aro-step-go {
	color: var(--ar-surface);
}

.aro-step.is-next .aro-step-q {
	color: rgba(255, 251, 248, .8);
}

.aro-step.is-next::before {
	content: "Il prossimo passo";
	position: absolute;
	top: -10px;
	right: 14px;
	padding: 2px 9px;
	border: 1px solid var(--ar-navy-700);
	border-radius: 999px;
	background: var(--ar-surface);
	color: var(--ar-navy-700);
	font: 600 10px/1.5 var(--aro-body);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* "Vuoi scoprire veramente com'è la tua storia?" */
.aro-offer {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 28px 40px;
	align-items: center;
	overflow: hidden;
	padding: 36px 40px;
	border-radius: 14px;
	background: radial-gradient(120% 160% at 10% 0%, var(--ar-navy-700) 0%, var(--ar-navy-900) 60%, var(--ar-navy-950) 100%);
	color: var(--ar-surface);
}

.aro-offer .aro-eyebrow {
	color: var(--ar-platinum-500);
}

.aro-page .aro-offer h2 {
	margin: 8px 0 10px;
	font: 600 26px/1.2 var(--aro-title);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--ar-surface);
}

.aro-offer p {
	max-width: 56ch;
	margin: 0;
	color: rgba(255, 251, 248, .84);
}

.aro-offer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: rgba(255, 251, 248, .8);
}

.aro-offer li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.aro-offer li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ar-platinum-500);
}

.aro-offer-buy {
	display: grid;
	gap: 10px;
	justify-items: stretch;
	min-width: 250px;
	text-align: center;
}

.aro-offer .aro-offer-price {
	margin: 0;
	font: 600 13px var(--aro-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-platinum-300);
}

.aro-offer-price b {
	margin-left: 4px;
	font: 600 30px var(--aro-title);
	letter-spacing: .02em;
	color: var(--ar-surface);
}

.aro-offer .aro-offer-alt {
	max-width: none;
	font-size: 13px;
	color: rgba(255, 251, 248, .75);
}

.aro-offer-alt a {
	color: var(--ar-surface);
	text-decoration: underline;
}

.aro-offer-alt a:hover {
	color: var(--ar-platinum-300);
}

.aro-offer--band {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 24px 32px;
}

.aro-page .aro-offer--band h2 {
	margin: 4px 0 6px;
	font-size: 20px;
}

/* "Il tuo segno: Ariete" on the index heroes, for a returning visitor */
.aro-mine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	width: fit-content;
	max-width: 100%;
	margin-top: 22px;
	padding: 10px 14px 10px 10px;
	border: 1px solid rgba(201, 199, 206, .35);
	border-radius: 999px;
	background: rgba(255, 251, 248, .08);
}

.aro-mine[hidden] {
	display: none;
}

.aro-mine-disc {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ar-platinum-500);
	border-radius: 50%;
	color: var(--ar-platinum-300);
}

.aro-mine-disc .aro-svg {
	width: 18px;
	height: 18px;
}

.aro-mine > span {
	font-size: 14px;
	color: rgba(255, 251, 248, .85);
}

.aro-mine a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ar-surface);
	font: 600 12px var(--aro-body);
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
}

.aro-mine a .aro-svg {
	width: 14px;
	height: 14px;
}

.aro-page .aro-mine button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: rgba(255, 251, 248, .6);
	font: 400 12px var(--aro-body);
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

/* The phone's "Continua" bar */
.aro-nextbar {
	display: none;
}

@media (max-width: 1024px) {
	.aro-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aro-offer {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 28px 22px;
	}

	.aro-offer-glyph {
		display: none;
	}

	.aro-offer-buy {
		min-width: 0;
	}
}

@media (max-width: 768px) {
	.aro-steps,
	.aro-steps--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* One column: the card being read and the year not out yet only push the next step down. */
	.aro-steps li:has(.is-here),
	.aro-steps li:has(.is-soon) {
		display: none;
	}

	.aro-page .aro-offer h2 {
		font-size: 21px;
	}

	.aro-nextbar:not([hidden]) {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 390;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--ar-line-strong);
		background: var(--ar-white);
		box-shadow: 0 -6px 20px rgba(14, 19, 37, .08);
	}

	.aro-nextbar > span {
		font-size: 12.5px;
		line-height: 1.3;
		color: var(--ar-text-muted);
	}

	.aro-nextbar > span b {
		display: block;
		font: 600 13px var(--aro-title);
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--ar-navy-850);
	}

	.aro-nextbar .aro-cta {
		padding: 10px 14px;
	}

	/* Woodmart's bottom toolbar (body.sticky-toolbar-on, 55px) stays usable: the bar sits on top of it. */
	body.sticky-toolbar-on .aro-nextbar:not([hidden]) {
		bottom: 55px;
		padding-bottom: 10px;
	}

	/* "back to top" would sit on "Continua" */
	body.aro-nextbar-on .scrollToTop {
		bottom: 130px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aro-step {
		transition: none;
	}
}


/* -------------------------------------------------------------------
   23. Checkout: no card or PayPal → WhatsApp (2026-10-21)
   Markup in inc/checkout.php, under the payment block and the PayPal buttons.
   ------------------------------------------------------------------- */
.ar-co-wa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-navy-050);
}

.ar-co-wa p {
	flex: 1 1 220px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ar-text-muted);
}

.ar-co-wa p b {
	display: block;
	color: var(--ar-navy-850);
}

.ar-co-wa a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--ar-navy-700);
	border-radius: 999px;
	color: var(--ar-navy-700);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.ar-co-wa a:hover {
	background: var(--ar-navy-700);
	color: var(--ar-white);
}

.ar-co-wa .ar-i {
	width: 18px;
	height: 18px;
}


/* -------------------------------------------------------------------
   24. Recent sales and the €89 gift (2026-10-22)
   Plugin ar-incentivi (markup built by assets/incentivi.js); mockup
   dev-docs/mockups/prova-sociale-regalo, approved 2026-10-22.
   24.1 Section variables and placement (toolbar, pinned bars)
   24.2 Recent-sales card, bottom left
   24.3 Gift tab, ring, badge
   24.4 Drawer: milestones, status, the three gifts, claim
   24.5 Phones: one-line card, round tab, bottom sheet
   24.6 Reduced motion: everything fades in 200 ms
   Motion follows the proposal's table: arrive fast and settle (expo-out),
   leave faster than they came. The card leaves toward its own (left)
   edge; the proposal drew it bottom-right and leaving to the right.
   ------------------------------------------------------------------- */

/* 24.1 ---------------------------------------------------------------- */
.ari-card,
.ari-gift,
.ari-scrim {
	--ari-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ari-title: "Cinzel", "Times New Roman", Georgia, serif;
	--ari-out: cubic-bezier(.16, 1, .3, 1);
	--ari-drawer: cubic-bezier(.22, 1, .36, 1);
	--ari-in: cubic-bezier(.4, 0, 1, 1);
	--ari-success: #659e31;
	--ari-success-ink: #355a16;
	--ari-success-bg: #eef5e6;
	--ari-alert: #8e3b52;
	--ari-alert-bg: #f7e9ee;
	--ari-pw: 340px;
	--ari-edge: 20px;
	--ari-shadow: 0 18px 40px -18px rgba(19, 25, 47, .40), 0 2px 6px rgba(19, 25, 47, .06);
}

/* Woodmart's bottom toolbar (≤1024px, 55px) and the bars other sections pin
   above it: the card and the round tab sit on top of all of them. */
body {
	--ari-tb: 0px;
	--ari-lift: 0px;
}

@media (max-width: 1024px) {
	body.sticky-toolbar-on {
		--ari-tb: 55px;
	}

	body.ar-config-in-view {
		--ari-lift: 120px; /* the consultation summary, §20 */
	}
}

@media (max-width: 768px) {
	body.aro-nextbar-on {
		--ari-lift: 64px; /* the horoscope "Continua" bar, §22.8 */
	}
}

/* 24.2 ---------------------------------------------------------------- */
.ari-card {
	position: fixed;
	left: var(--ari-edge);
	bottom: calc(var(--ari-edge) + var(--ari-tb) + var(--ari-lift));
	z-index: 360;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
	width: 360px;
	max-width: calc(100vw - 2 * var(--ari-edge));
	padding: 12px 34px 14px 12px;
	overflow: hidden;
	border: 1px solid var(--ar-line-strong);
	border-radius: 10px;
	background: var(--ar-white);
	box-shadow: var(--ari-shadow);
	font: 400 13px/1.4 var(--ari-body);
	color: var(--ar-text);
	visibility: hidden;
}

.ari-card.is-in {
	visibility: visible;
	animation: ari-card-in .52s var(--ari-out) both;
}

.ari-card.is-out {
	visibility: visible;
	animation: ari-card-out .28s var(--ari-in) both;
}

@keyframes ari-card-in {
	from { opacity: 0; transform: translateY(calc(100% + 24px)); }
	to { opacity: 1; transform: none; }
}

@keyframes ari-card-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(-28px); }
}

.ari-card .ari-card-thumb {
	position: relative;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ar-surface-alt);
}

.ari-card .ari-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ari-card.is-in .ari-card-thumb img {
	animation: ari-thumb-in .5s .12s var(--ari-out) both;
}

@keyframes ari-thumb-in {
	from { opacity: 0; transform: scale(1.08); }
	to { opacity: 1; transform: none; }
}

.ari-card.is-ale .ari-card-thumb {
	display: grid;
	place-items: center;
	background: var(--ar-navy-800);
}

.ari-card.is-ale .ari-card-thumb img {
	width: 44px;
	height: auto;
	object-fit: contain;
}

.ari-card .ari-card-tx {
	display: grid;
	align-content: center;
	gap: 2px;
	min-width: 0;
}

.ari-card .ari-card-who {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--ar-text-muted);
}

.ari-card .ari-card-who b {
	font-weight: 600;
	color: var(--ar-navy-850);
}

.ari-card .ari-sp {
	display: inline-flex;
	flex: none;
	width: 11px;
	height: 11px;
	color: var(--ar-navy-400);
}

.ari-card .ari-sp svg {
	width: 100%;
	height: 100%;
}

.ari-card.is-in .ari-sp {
	animation: ari-twinkle .9s .35s var(--ari-out) both;
}

@keyframes ari-twinkle {
	0% { opacity: 0; transform: scale(0) rotate(-45deg); }
	55% { opacity: 1; transform: scale(1.35) rotate(10deg); }
	100% { opacity: 1; transform: none; }
}

.ari-card a.ari-card-prod {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font: 600 14px/1.3 var(--ari-body);
	color: var(--ar-navy-850);
	text-decoration: none;
}

.ari-card a.ari-card-prod:hover,
.ari-card a.ari-card-prod:focus-visible {
	text-decoration: underline;
}

.ari-card .ari-card-when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	font-size: 11.5px;
	color: var(--ar-text-muted);
}

.ari-card .ari-card-ver {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #3f6a1a;
}

.ari-card .ari-card-ver svg {
	width: 12px;
	height: 12px;
}

.ari-card button.ari-card-x {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ar-text-muted);
	cursor: pointer;
}

.ari-card button.ari-card-x:hover {
	background: var(--ar-navy-050);
	color: var(--ar-navy-800);
}

.ari-card button.ari-card-x:focus-visible,
.ari-card a.ari-card-prod:focus-visible {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 2px;
}

.ari-card button.ari-card-x svg {
	width: 11px;
	height: 11px;
}

/* 2 px platinum-to-navy hairline that drains while the card is shown; hover
   or focus pauses it (the timer in incentivi.js pauses with it). */
.ari-card .ari-card-life {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--ar-platinum-500), var(--ar-navy-300));
	transform-origin: left;
}

.ari-card.is-in .ari-card-life {
	animation: ari-life var(--ari-life, 8s) linear forwards;
}

.ari-card.is-paused .ari-card-life {
	animation-play-state: paused;
}

@keyframes ari-life {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* 24.3 ---------------------------------------------------------------- */
.ari-gift {
	position: fixed;
	top: max(120px, 18vh);
	right: 0;
	z-index: 391; /* over Woodmart's sticky social icons (390), under its side panels (400+) */
	display: flex;
	align-items: flex-start;
	transform: translateX(var(--ari-pw));
	transition: transform .48s var(--ari-drawer);
}

.ari-gift.is-open {
	transform: none;
}

.ari-gift .ari-tab-wrap {
	position: relative;
	flex: none;
}

.ari-gift button.ari-tab {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 56px;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 10px 0 0 10px;
	background: var(--ar-navy-700);
	box-shadow: -4px 6px 18px -8px rgba(19, 25, 47, .55);
	color: var(--ar-platinum-300);
	cursor: pointer;
	transition: background-color .2s;
}

.ari-gift button.ari-tab:hover {
	background: var(--ar-navy-800);
}

.ari-gift button.ari-tab:focus-visible {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 2px;
}

.ari-gift .ari-ring {
	position: absolute;
	width: 40px;
	height: 40px;
	transform: rotate(-90deg);
}

.ari-gift .ari-ring circle {
	fill: none;
	stroke-width: 2.5;
}

.ari-gift .ari-ring-bg {
	stroke: rgba(232, 231, 235, .18);
}

.ari-gift .ari-ring-fg {
	stroke: var(--ar-platinum-300);
	stroke-linecap: round;
	stroke-dasharray: 113.1;
	stroke-dashoffset: 113.1;
	transition: stroke-dashoffset .7s var(--ari-out);
}

.ari-gift .ari-tab-ic {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.ari-gift .ari-tab-ic svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ari-gift button.ari-tab::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(241, 239, 241, .55), transparent);
	opacity: 0;
	transform: skewX(-18deg);
}

.ari-gift button.ari-tab.is-gleam::after {
	animation: ari-gleam 1.1s var(--ari-out);
}

@keyframes ari-gleam {
	0% { left: -60%; opacity: 1; }
	100% { left: 130%; opacity: 1; }
}

.ari-gift button.ari-tab.is-nudge {
	animation: ari-nudge .7s var(--ari-out);
}

@keyframes ari-nudge {
	0%, 100% { transform: none; }
	25% { transform: translateX(-7px) rotate(-4deg); }
	50% { transform: rotate(3deg); }
	75% { transform: translateX(-3px) rotate(-1deg); }
}

.ari-gift .ari-badge {
	position: absolute;
	top: -7px;
	left: -7px;
	z-index: 2;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 99px;
	background: var(--ari-success);
	box-shadow: 0 0 0 2px var(--ar-surface);
	font: 700 11px/1 var(--ari-body);
	color: var(--ar-white);
	pointer-events: none;
	transform: scale(0);
	transition: transform .3s var(--ari-out);
}

.ari-gift .ari-badge.is-show {
	transform: scale(1);
}

.ari-gift .ari-badge.is-show.is-pop {
	animation: ari-pop .55s var(--ari-out);
}

.ari-gift .ari-badge.is-warn {
	background: var(--ari-alert);
}

@keyframes ari-pop {
	0% { transform: scale(.4); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* 24.4 ---------------------------------------------------------------- */
.ari-gift .ari-panel {
	position: relative;
	display: grid;
	gap: 14px;
	box-sizing: border-box;
	width: var(--ari-pw);
	max-height: calc(100vh - max(120px, 18vh) - 24px - var(--ari-tb));
	padding: 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--ar-line-strong);
	border-right: 0;
	border-radius: 0 0 0 12px;
	background: var(--ar-white);
	box-shadow: -10px 16px 40px -18px rgba(19, 25, 47, .35);
	font: 400 13px/1.45 var(--ari-body);
	color: var(--ar-text);
	visibility: hidden;
	transition: visibility 0s .48s;
}

.ari-gift.is-open .ari-panel {
	visibility: visible;
	transition-delay: 0s;
}

/* content staggers in at 60 ms steps */
.ari-gift .ari-panel > * {
	transition: opacity .3s, transform .4s var(--ari-out);
}

.ari-gift:not(.is-open) .ari-panel > * {
	opacity: 0;
	transform: translateX(12px);
}

.ari-gift.is-open .ari-panel > :nth-child(3) { transition-delay: .06s; }
.ari-gift.is-open .ari-panel > :nth-child(4) { transition-delay: .12s; }
.ari-gift.is-open .ari-panel > :nth-child(5) { transition-delay: .18s; }
.ari-gift.is-open .ari-panel > :nth-child(6) { transition-delay: .24s; }
.ari-gift.is-open .ari-panel > :nth-child(7) { transition-delay: .30s; }

.ari-gift .ari-grab {
	display: none;
}

.ari-gift .ari-p-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ari-gift .ari-p-head h3 {
	margin: 0;
	font: 600 15px/1.3 var(--ari-title);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-navy-850);
}

.ari-gift button.ari-close {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ar-text-muted);
	cursor: pointer;
}

.ari-gift button.ari-close:hover {
	background: var(--ar-navy-050);
}

.ari-gift button.ari-close svg {
	width: 11px;
	height: 11px;
}

.ari-gift .ari-miles {
	display: grid;
	gap: 8px;
}

.ari-gift .ari-bar {
	position: relative;
	height: 6px;
	margin-inline: 0 8px;
	border-radius: 6px;
	background: var(--ar-navy-100);
}

.ari-gift .ari-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--ar-navy-400), var(--ar-navy-700));
	transition: width .7s var(--ari-out);
}

.ari-gift .ari-stop {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--ar-navy-200);
	border-radius: 50%;
	background: var(--ar-white);
	transition: border-color .3s, background-color .3s, transform .4s var(--ari-out);
}

.ari-gift .ari-stop svg {
	width: 8px;
	height: 8px;
	color: var(--ar-white);
	opacity: 0;
	transition: opacity .2s;
}

.ari-gift .ari-stop.is-done {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
	transform: scale(1.12);
}

.ari-gift .ari-stop.is-done svg {
	opacity: 1;
}

.ari-gift .ari-labels {
	position: relative;
	height: 30px;
	margin-inline: 0 8px;
	font-size: 11px;
	color: var(--ar-text-muted);
}

.ari-gift .ari-labels span {
	position: absolute;
	padding-right: 2px;
	line-height: 1.25;
	text-align: right;
	white-space: nowrap;
	transform: translateX(-100%);
}

.ari-gift .ari-status {
	padding: 10px 12px;
	border-radius: var(--ar-r-md);
	background: var(--ar-navy-050);
	font-size: 13px;
	line-height: 1.45;
	color: var(--ar-navy-800);
}

.ari-gift .ari-status b {
	font-variant-numeric: tabular-nums;
}

.ari-gift .ari-status.is-ok {
	background: var(--ari-success-bg);
	color: var(--ari-success-ink);
}

.ari-gift .ari-status.is-warn {
	background: var(--ari-alert-bg);
	color: var(--ari-alert);
}

.ari-gift .ari-opts {
	display: grid;
	gap: 8px;
}

.ari-gift label.ari-opt {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	font-weight: 400;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, opacity .3s;
}

.ari-gift label.ari-opt:hover {
	border-color: var(--ar-navy-300);
}

/* Woodmart dims every disabled input and button to .6 with !important (parts/base.css): that would bring
   the hidden radio back and wash out the claim button. */
.ari-gift label.ari-opt input {
	position: absolute;
	opacity: 0 !important;
	pointer-events: none;
}

.ari-gift label.ari-opt:has(input:checked) {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-050);
}

.ari-gift label.ari-opt:has(input:focus-visible) {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 2px;
}

.ari-gift label.ari-opt img {
	width: 52px;
	height: 52px;
	max-width: none;
	border-radius: 6px;
	object-fit: cover;
}

.ari-gift .ari-opt-t {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	color: var(--ar-text);
}

.ari-gift .ari-opt-p {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 12px;
}

.ari-gift .ari-opt-p s {
	color: var(--ar-text-muted);
}

.ari-gift .ari-free {
	padding: 4px 7px;
	border-radius: 99px;
	background: var(--ar-navy-700);
	font: 600 10px/1 var(--ari-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ar-platinum-100);
}

.ari-gift .ari-dot {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ar-navy-200);
	border-radius: 50%;
}

.ari-gift label.ari-opt:has(input:checked) .ari-dot {
	border-color: var(--ar-navy-700);
}

.ari-gift label.ari-opt:has(input:checked) .ari-dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ar-navy-700);
}

.ari-gift .ari-opts.is-locked label.ari-opt {
	cursor: default;
	opacity: .62;
}

.ari-gift .ari-opts.is-locked .ari-dot {
	visibility: hidden;
}

.ari-gift button.ari-claim {
	position: relative;
	width: 100%;
	height: 42px;
	min-height: 0;
	padding: 0 12px;
	overflow: visible;
	border: 0;
	border-radius: var(--ar-r-sm);
	background: var(--ar-navy-700);
	box-shadow: none;
	font: 600 13px/1 var(--ari-body);
	letter-spacing: .04em;
	text-transform: none;
	color: var(--ar-text-invert, #fffbf8);
	cursor: pointer;
	transition: background-color .2s;
}

.ari-gift button.ari-claim:hover:not(:disabled) {
	background: var(--ar-navy-950);
}

.ari-gift button.ari-claim:focus-visible {
	outline: 2px solid var(--ar-navy-400);
	outline-offset: 2px;
}

.ari-gift button.ari-claim:disabled {
	background: var(--ar-navy-200);
	color: var(--ar-navy-800);
	cursor: not-allowed;
	opacity: 1 !important;
}

.ari-gift button.ari-claim.is-done,
.ari-gift button.ari-claim.is-done:disabled {
	background: var(--ari-success);
	color: var(--ar-white);
	cursor: default;
}

/* claimed: 8 brand sparks burst out of the button */
.ari-gift .ari-burst {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ari-gift .ari-burst i {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px;
	color: var(--ar-navy-400);
}

.ari-gift .ari-burst i svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ari-gift .ari-burst.is-go i {
	animation: ari-burst .8s var(--ari-out) forwards;
}

@keyframes ari-burst {
	0% { opacity: 1; transform: translate(0, 0) scale(0) rotate(0); }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(90deg); }
}

.ari-gift .ari-fine {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--ar-text-muted);
}

.ari-scrim {
	display: none;
}

/* 24.5 ---------------------------------------------------------------- */
@media (max-width: 768px) {
	.ari-card,
	.ari-gift,
	.ari-scrim {
		--ari-edge: 10px;
	}

	/* full width above the toolbar, the round gift button to its right */
	.ari-card {
		right: var(--ari-edge);
		width: auto;
		max-width: none;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 10px;
		padding: 10px 32px 12px 10px;
	}

	body.ari-has-gift .ari-card {
		right: 70px;
	}

	.ari-card .ari-card-thumb {
		width: 48px;
		height: 48px;
	}

	.ari-card.is-ale .ari-card-thumb img {
		width: 34px;
	}

	.ari-card a.ari-card-prod {
		-webkit-line-clamp: 1;
		font-size: 13px;
	}

	.ari-card .ari-card-when {
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
	}

	.ari-card .ari-card-when > span:first-child {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ari-card.is-out {
		animation-name: ari-card-out-down;
	}

	@keyframes ari-card-out-down {
		from { opacity: 1; transform: none; }
		to { opacity: 0; transform: translateY(20px); }
	}

	.ari-gift {
		top: auto;
		right: var(--ari-edge);
		bottom: calc(var(--ari-edge) + var(--ari-tb) + var(--ari-lift));
		transform: none;
		transition: none;
	}

	.ari-gift button.ari-tab {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		box-shadow: 0 6px 18px -6px rgba(19, 25, 47, .55);
	}

	/* .ari-gift is the stacking context of the sheet: it has to rise above the scrim (398), or the scrim
	   takes every tap on the sheet */
	.ari-gift.is-open {
		z-index: 399;
	}

	.ari-gift.is-open .ari-tab-wrap {
		visibility: hidden;
	}

	/* the drawer becomes a bottom sheet over a navy scrim */
	.ari-gift .ari-panel {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 399;
		width: auto;
		max-height: 78vh;
		padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
		gap: 12px;
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -16px 40px -16px rgba(19, 25, 47, .35);
		transform: translateY(105%);
		transition: transform .45s var(--ari-drawer), visibility 0s .45s;
	}

	.ari-gift.is-open .ari-panel {
		transform: none;
		transition: transform .45s var(--ari-drawer), visibility 0s 0s;
	}

	.ari-gift:not(.is-open) .ari-panel > * {
		transform: none;
	}

	.ari-gift .ari-grab {
		display: block;
		justify-self: center;
		width: 40px;
		height: 4px;
		border-radius: 4px;
		background: var(--ar-navy-200);
	}

	.ari-scrim {
		position: fixed;
		inset: 0;
		z-index: 398;
		display: block;
		background: rgba(19, 25, 47, .35);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
	}

	body.ari-sheet-on .ari-scrim {
		opacity: 1;
		pointer-events: auto;
	}

	/* Woodmart's "back to top" (right, 40px) goes above the round tab */
	body.ari-has-gift .scrollToTop,
	body.ari-has-gift.sticky-toolbar-on .scrollToTop {
		bottom: calc(var(--ari-tb) + var(--ari-lift) + 72px);
	}
}

/* 24.6 ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ari-card.is-in {
		animation: ari-fade-in .2s both;
	}

	.ari-card.is-out {
		animation: ari-fade-out .2s both;
	}

	.ari-card.is-in .ari-card-thumb img,
	.ari-card.is-in .ari-sp,
	.ari-gift button.ari-tab,
	.ari-gift button.ari-tab::after,
	.ari-gift .ari-burst i {
		animation: none !important;
	}

	/* the life line still tells the time left, by fading out instead of draining */
	.ari-card.is-in .ari-card-life {
		animation-name: ari-fade-out;
	}

	.ari-gift .ari-badge.is-show.is-pop {
		animation: ari-fade-in .2s both;
	}

	.ari-gift,
	.ari-gift .ari-panel,
	.ari-gift .ari-panel > *,
	.ari-gift .ari-ring-fg,
	.ari-gift .ari-fill,
	.ari-gift .ari-stop,
	.ari-gift .ari-badge {
		transition-duration: .01s !important;
		transition-delay: 0s !important;
	}

	.ari-gift:not(.is-open) .ari-panel > * {
		transform: none;
	}

	/* in place at once and fade in; to close, fade out first, then move away (the drawer slides on the
	   root, the phone sheet on the panel) */
	.ari-gift:not(.is-open) {
		transition: transform 0s .2s !important;
	}

	.ari-gift.is-open {
		transition: none !important;
	}

	.ari-gift:not(.is-open) .ari-panel {
		opacity: 0;
		transition: opacity .2s, visibility 0s .2s, transform 0s .2s !important;
	}

	.ari-gift.is-open .ari-panel {
		opacity: 1;
		transition: opacity .2s, visibility 0s 0s, transform 0s 0s !important;
	}
}

@keyframes ari-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ari-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}


/* -------------------------------------------------------------------
   25. Una domanda alle Sibille (2026-10-29)
   Plugin consultation-manager: includes/gift/class-cm-gift-frontend.php
   (server markup) and assets/gift/gift.js (the My Account page, built
   with DOM APIs). Proposal screens 1–6, artifact JAVenDad7UhFhspFcnXd27.
   25.1 Section variables, screen-reader text, shared type
   25.2 Buttons (4px, the shop's caps) and fields
   25.3 Gift box: dashboard card and the landing element; sign-up line
   25.4 Steps, topic chips, tips, checkbox, code field
   25.5 Verdicts: out of scope, distress, vague
   25.6 Cards: pile, slots, typographic faces, the flip
   25.7 Waiting: orb, progress list
   25.8 Answer: AI notice, reading, offers, earlier gifts
   25.9 Phones and reduced motion (the shuffle and flips become fades)
   ------------------------------------------------------------------- */

/* 25.1 ---------------------------------------------------------------- */
.cm-gift,
.cm-gift-cta,
.cm-gift-offers,
.cm-gift-signup {
	--cmg-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cmg-title: "Cinzel", "Times New Roman", Georgia, serif;
	--cmg-out: cubic-bezier(.2, .7, .2, 1);
	--cmg-ok: #2f7d55;
	--cmg-ok-bg: #e4f2ea;
	--cmg-crit: #a3372f;
	--cmg-crit-bg: #f8e4e1;
	font-family: var(--cmg-body);
}

.cm-gift {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 720px;
	color: var(--ar-text);
	font-size: 15px;
	line-height: 1.6;
}

.cm-gift__view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cm-gift__extra {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cm-gift__extra:empty {
	display: none;
}

.cm-gift p,
.cm-gift blockquote {
	margin: 0;
}

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

.cm-gift .cm-gift-title {
	margin: 0;
	font-family: var(--cmg-title);
	font-size: clamp(22px, 3.4vw, 28px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .01em;
	text-wrap: balance;
	color: var(--ar-navy-900);
}

/* The heading takes focus (tabindex -1) when the step changes, so screen
   readers start there; it is not a control, so it shows no focus ring. The
   scroll margin keeps it clear of Woodmart's sticky header. */
.cm-gift .cm-gift-title {
	scroll-margin-top: 110px;
}

.cm-gift .cm-gift-title:focus,
.cm-gift .cm-gift-title:focus-visible {
	outline: none;
}

.cm-gift-eyebrow,
.cm-gift-slot__role,
.cm-gift-offers__title,
.cm-gift-cta__eyebrow {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ar-navy-500);
}

.cm-gift-muted,
.cm-gift-hint,
.cm-gift-credits {
	font-size: 13.5px;
	color: var(--ar-text-muted);
}

.cm-gift-muted__label {
	font-weight: 600;
	color: var(--ar-navy-850);
}

.cm-gift-loading,
.cm-gift-message {
	color: var(--ar-text-muted);
}

.cm-gift-notice {
	padding: 10px 14px;
	border-radius: var(--ar-r-sm);
	background: var(--cmg-ok-bg);
	color: var(--cmg-ok);
	font-weight: 600;
}

.cm-gift-error {
	padding: 10px 14px;
	border-left: 3px solid var(--cmg-crit);
	border-radius: 0 var(--ar-r-sm) var(--ar-r-sm) 0;
	background: var(--cmg-crit-bg);
	color: var(--cmg-crit);
	font-size: 14px;
}

.cm-gift-error[hidden],
.cm-gift-code__msg[hidden] {
	display: none;
}

/* 25.2 ---------------------------------------------------------------- */
.cm-gift .cm-gift-btn,
.cm-gift-cta .cm-gift-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 24px;
	border: 1px solid var(--ar-navy-900);
	border-radius: var(--ar-r-sm);
	background: var(--ar-navy-900);
	color: var(--ar-white);
	font: 600 13px/1.2 var(--cmg-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s, border-color .2s, color .2s;
}

.cm-gift .cm-gift-btn:hover,
.cm-gift .cm-gift-btn:focus-visible {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
	color: var(--ar-white);
}

.cm-gift .cm-gift-btn--ghost {
	background: transparent;
	color: var(--ar-navy-900);
}

.cm-gift .cm-gift-btn--ghost:hover,
.cm-gift .cm-gift-btn--ghost:focus-visible {
	border-color: var(--ar-navy-900);
	background: var(--ar-navy-050);
	color: var(--ar-navy-900);
}

.cm-gift .cm-gift-btn:focus-visible,
.cm-gift-cta .cm-gift-btn:focus-visible,
.cm-gift a:focus-visible,
.cm-gift-offers a:focus-visible {
	outline: 2px solid var(--ar-navy-500);
	outline-offset: 2px;
}

.cm-gift .cm-gift-btn[disabled],
.cm-gift .cm-gift-btn[disabled]:hover {
	border-color: var(--ar-platinum-500);
	background: var(--ar-platinum-500);
	color: var(--ar-white);
	cursor: default;
}

.cm-gift .cm-gift-btn--ghost[disabled],
.cm-gift .cm-gift-btn--ghost[disabled]:hover {
	background: transparent;
	color: var(--ar-platinum-700);
}

.cm-gift .cm-gift-btn.is-busy,
.cm-gift .cm-gift-btn.is-busy:hover {
	border-color: var(--ar-navy-700);
	background: var(--ar-navy-700);
	color: var(--ar-white);
	text-transform: none;
	letter-spacing: .02em;
}

.cm-gift-form > .cm-gift-btn,
.cm-gift__view > .cm-gift-btn {
	align-self: flex-start;
}

.cm-gift-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cm-gift .cm-gift-label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ar-navy-900);
}

.cm-gift .cm-gift-input {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-sm);
	background: var(--ar-white);
	color: var(--ar-text);
	font: 400 15px/1.5 var(--cmg-body);
}

.cm-gift .cm-gift-input:focus {
	border-color: var(--ar-navy-700);
	background: var(--ar-surface);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--ar-navy-100);
}

.cm-gift .cm-gift-textarea {
	min-height: 112px;
	resize: vertical;
}

.cm-gift-count {
	align-self: flex-end;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--ar-text-muted);
}

.cm-gift-count.is-full {
	color: var(--cmg-crit);
}

.cm-gift-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* 25.3 ---------------------------------------------------------------- */
.cm-gift-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 28px;
	padding: 24px;
	overflow: hidden;
	border-radius: var(--ar-r-md);
	background: var(--ar-navy-900);
	color: var(--ar-platinum-100);
}

.cm-gift-cta::after {
	content: "";
	position: absolute;
	top: -34px;
	right: -34px;
	width: 128px;
	height: 128px;
	border: 1px solid rgba(201, 199, 206, .25);
	border-radius: 50%;
	box-shadow: 0 0 0 18px rgba(201, 199, 206, .06);
	pointer-events: none;
}

.cm-gift-cta p {
	margin: 0;
}

.cm-gift-cta .cm-gift-cta__eyebrow {
	color: var(--ar-platinum-500);
}

.cm-gift-cta .cm-gift-cta__title {
	margin: 0;
	font-family: var(--cmg-title);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-white);
}

.cm-gift-cta__text {
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.55;
}

.cm-gift-cta__action {
	margin-top: 6px !important;
}

.cm-gift-cta .cm-gift-btn--light,
.cm-gift-cta .cm-gift-btn--light:hover,
.cm-gift-cta .cm-gift-btn--light:focus-visible {
	border-color: var(--ar-platinum-100);
	background: var(--ar-platinum-100);
	color: var(--ar-navy-900);
}

.cm-gift-cta .cm-gift-btn--light:hover {
	border-color: var(--ar-white);
	background: var(--ar-white);
}

.cm-gift-cta .cm-gift-btn--light:focus-visible {
	outline-color: var(--ar-platinum-300);
}

.cm-gift-cta__note {
	font-size: 13px;
	color: var(--ar-platinum-500);
}

.cm-gift-cta--landing {
	max-width: 640px;
	margin: 0 auto 28px;
}

.cm-gift-signup {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--ar-navy-100);
	border-radius: var(--ar-r-md);
	background: var(--ar-navy-050);
	color: var(--ar-text);
	font-size: 14px;
	line-height: 1.5;
}

.cm-gift-signup strong {
	color: var(--ar-navy-900);
}

.cm-gift-signup__mark {
	color: var(--ar-navy-700);
}

/* 25.4 ---------------------------------------------------------------- */
.cm-gift-steps {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--ar-platinum-700);
}

.cm-gift-steps li {
	flex: 1;
	margin: 0;
	padding-top: 6px;
	border-top: 2px solid var(--ar-platinum-300);
}

.cm-gift-steps li.is-on {
	border-color: var(--ar-navy-700);
	color: var(--ar-navy-900);
	font-weight: 600;
}

.cm-gift-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cm-gift .cm-gift-topics {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cm-gift .cm-gift-topics legend {
	float: left;
	width: 100%;
	margin-bottom: 8px;
	font-family: var(--cmg-body);
	text-transform: none;
	letter-spacing: 0;
}

.cm-gift-chips {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cm-gift .cm-gift-chip {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.cm-gift .cm-gift-chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cm-gift-chip span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: 999px;
	background: var(--ar-white);
	color: var(--ar-text);
	font-size: 14px;
	transition: background-color .2s, border-color .2s;
}

.cm-gift-chip:hover span {
	border-color: var(--ar-navy-300);
}

.cm-gift-chip input:checked + span {
	border-color: var(--ar-navy-300);
	background: var(--ar-navy-100);
	color: var(--ar-navy-900);
	font-weight: 600;
}

.cm-gift-chip input:focus-visible + span {
	outline: 2px solid var(--ar-navy-500);
	outline-offset: 2px;
}

.cm-gift-tip {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--ar-navy-100);
	border-radius: var(--ar-r-md);
	background: var(--ar-navy-050);
	font-size: 14px;
}

.cm-gift-tip__title {
	font-weight: 600;
	color: var(--ar-navy-900);
}

.cm-gift-tip__yes .cm-gift-tip__mark {
	color: var(--cmg-ok);
}

.cm-gift-tip__no .cm-gift-tip__mark {
	color: var(--cmg-crit);
}

.cm-gift-tip__mark {
	display: inline-block;
	width: 1.3em;
	font-weight: 600;
}

.cm-gift .cm-gift-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ar-text-muted);
	cursor: pointer;
}

.cm-gift .cm-gift-check input {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--ar-navy-700);
}

.cm-gift-check input:focus-visible {
	outline: 2px solid var(--ar-navy-500);
	outline-offset: 2px;
}

.cm-gift-code {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 460px;
	padding-top: 18px;
	border-top: 1px solid var(--ar-line-strong);
}

.cm-gift__extra > .cm-gift-code {
	padding-top: 0;
	border-top: 0;
}

.cm-gift-code__row {
	display: flex;
	gap: 8px;
}

.cm-gift .cm-gift-code__row .cm-gift-input {
	flex: 1;
	min-width: 0;
	text-transform: uppercase;
}

.cm-gift .cm-gift-code__row .cm-gift-btn {
	flex: 0 0 auto;
}

.cm-gift-code__msg {
	font-size: 14px;
	color: var(--ar-text-muted);
}

.cm-gift-code__msg.is-ok {
	color: var(--cmg-ok);
	font-weight: 600;
}

.cm-gift-code__msg.is-error {
	color: var(--cmg-crit);
}

/* 25.5 ---------------------------------------------------------------- */
.cm-gift .cm-gift-decline {
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--ar-r-md);
	background: var(--cmg-crit-bg);
	color: var(--cmg-crit);
	font-size: 15px;
	font-style: normal;
}

.cm-gift-kept {
	display: flex;
	gap: 8px;
	align-items: center;
	align-self: flex-start;
	padding: 8px 14px;
	border-radius: var(--ar-r-sm);
	background: var(--cmg-ok-bg);
	color: var(--cmg-ok);
	font-size: 14px;
	font-weight: 600;
}

.cm-gift-distress {
	font-size: 16px;
}

.cm-gift .cm-gift-help {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-gift .cm-gift-help li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 16px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
}

.cm-gift-help__label {
	color: var(--ar-text);
}

.cm-gift .cm-gift-help__number {
	font-family: var(--cmg-title);
	font-size: 20px;
	font-weight: 700;
	color: var(--ar-navy-900);
	text-decoration: none;
	white-space: nowrap;
}

/* 25.6 ---------------------------------------------------------------- */
.cm-gift-pile {
	position: relative;
	width: 72px;
	height: 112px;
	margin: 4px auto 0;
	transition: opacity .4s, height .4s .2s, margin .4s .2s;
}

.cm-gift-pile span {
	position: absolute;
	inset: 0;
	border-radius: 6px;
}

.cm-gift-pile.is-shuffling span:nth-child(odd) {
	animation: cm-gift-cut-l .7s ease-in-out 2;
}

.cm-gift-pile.is-shuffling span:nth-child(even) {
	animation: cm-gift-cut-r .7s ease-in-out 2;
}

.cm-gift-pile.is-done {
	height: 0;
	margin: 0 auto;
	opacity: 0;
}

@keyframes cm-gift-cut-l {
	50% { transform: translateX(-30px) rotate(-6deg); }
}

@keyframes cm-gift-cut-r {
	50% { transform: translateX(30px) rotate(6deg); }
}

.cm-gift-back,
.cm-gift-card__back {
	border: 1px solid var(--ar-navy-700);
	background-color: var(--ar-navy-900);
	background-image:
		repeating-linear-gradient(45deg, rgba(201, 199, 206, .10) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(-45deg, rgba(201, 199, 206, .10) 0 2px, transparent 2px 7px);
	box-shadow: inset 0 0 0 3px var(--ar-navy-900), inset 0 0 0 4px rgba(201, 199, 206, .35);
}

.cm-gift .cm-gift-slots,
.cm-gift .cm-gift-mini {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.cm-gift .cm-gift-mini {
	max-width: 360px;
	gap: 10px;
}

.cm-gift-slot,
.cm-gift-mini__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.cm-gift-slot__role {
	font-size: 10.5px;
	letter-spacing: .14em;
}

.cm-gift-card {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 8;
	border-radius: 6px;
	perspective: 700px;
}

.cm-gift-card.is-empty {
	border: 1px dashed var(--ar-platinum-500);
	background: var(--ar-white);
}

.cm-gift-card.is-dealt {
	animation: cm-gift-deal .45s var(--cmg-out) both;
}

@keyframes cm-gift-deal {
	from { opacity: 0; transform: translateY(-24px) scale(.92); }
	to { opacity: 1; transform: none; }
}

.cm-gift-card__in {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform .6s var(--cmg-out);
}

.cm-gift-card.is-flipped .cm-gift-card__in {
	transform: rotateY(180deg);
}

.cm-gift-card__back,
.cm-gift-card .cm-gift-card__face {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cm-gift-card .cm-gift-card__face {
	transform: rotateY(180deg);
}

.cm-gift-face {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 6px;
	border: 1px solid var(--ar-platinum-500);
	border-radius: 6px;
	background: var(--ar-white);
	box-shadow: inset 0 0 0 3px var(--ar-white), inset 0 0 0 4px var(--ar-platinum-300);
	text-align: center;
}

.cm-gift-mini .cm-gift-face {
	width: 100%;
	aspect-ratio: 5 / 8;
}

.cm-gift-face__suit {
	font-size: 26px;
	line-height: 1;
	color: var(--ar-navy-900);
}

.cm-gift-face__suit.is-red {
	color: var(--cmg-crit);
}

.cm-gift-face__name {
	font-family: var(--cmg-title);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ar-navy-900);
	overflow-wrap: anywhere;
}

.cm-gift-face__rank {
	font-size: 11.5px;
	line-height: 1.2;
	color: var(--ar-text-muted);
}

.cm-gift-face__rev {
	margin-top: 2px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--ar-platinum-100);
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ar-navy-700);
}

.cm-gift-face.is-reversed .cm-gift-face__suit {
	transform: rotate(180deg);
}

.cm-gift-draw-status {
	min-height: 1.6em;
	font-size: 14px;
	text-align: center;
	color: var(--ar-text-muted);
}

/* 25.7 ---------------------------------------------------------------- */
.cm-gift-wait {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.cm-gift-orb {
	width: 56px;
	height: 56px;
	border: 2px solid var(--ar-platinum-300);
	border-top-color: var(--ar-navy-700);
	border-radius: 50%;
	animation: cm-gift-spin 1.4s linear infinite;
}

@keyframes cm-gift-spin {
	to { transform: rotate(360deg); }
}

.cm-gift-wait__message {
	text-align: center;
}

.cm-gift .cm-gift-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.cm-gift-progress li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
}

.cm-gift-progress i {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--ar-platinum-500);
	border-radius: 50%;
}

.cm-gift-progress .is-done i {
	border-color: var(--cmg-ok);
	background: var(--cmg-ok);
}

.cm-gift-progress .is-now i {
	border-color: var(--ar-navy-700);
	border-top-color: transparent;
	animation: cm-gift-spin 1s linear infinite;
}

.cm-gift-progress .is-now {
	font-weight: 600;
	color: var(--ar-navy-900);
}

.cm-gift-progress .is-todo {
	color: var(--ar-platinum-700);
}

/* 25.8 ---------------------------------------------------------------- */
.cm-gift-ai {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--ar-r-md);
	background: var(--ar-platinum-100);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ar-text-muted);
}

.cm-gift-ai__mark {
	color: var(--ar-navy-700);
}

.cm-gift-reading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
	line-height: 1.7;
}

.cm-gift .cm-gift-reading__title {
	margin: 10px 0 0;
	font-family: var(--cmg-title);
	font-size: 18px;
	font-weight: 600;
	color: var(--ar-navy-900);
}

.cm-gift-pdf {
	align-self: flex-start;
}

.cm-gift-offers {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto 24px;
	padding: 18px;
	border: 1px solid var(--ar-navy-300);
	border-radius: var(--ar-r-md);
	background: var(--ar-white);
}

.cm-gift .cm-gift-offers {
	width: 100%;
	max-width: none;
	margin: 0;
}

.cm-gift-offers p {
	margin: 0;
}

.cm-gift-offers .cm-gift-offers__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-gift-offers__list li {
	margin: 0;
}

.cm-gift-offers .cm-gift-offer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-r-sm);
	color: var(--ar-text);
	text-decoration: none;
	transition: border-color .2s, background-color .2s;
}

.cm-gift-offers .cm-gift-offer:hover {
	border-color: var(--ar-navy-300);
	background: var(--ar-navy-050);
}

.cm-gift-offer__label {
	font-weight: 500;
}

.cm-gift-offer__price {
	flex: 0 0 auto;
	font-family: var(--ar-price-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--ar-navy-900);
	white-space: nowrap;
}

.cm-gift-offers__more {
	max-width: 640px;
	margin: 0 auto 24px;
	font-size: 14px;
	text-align: center;
}

.cm-gift-again {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 14px 16px;
	border: 1px solid var(--ar-navy-100);
	border-radius: var(--ar-r-md);
	background: var(--ar-navy-050);
}

.cm-gift-earlier {
	padding-top: 18px;
	border-top: 1px solid var(--ar-line-strong);
}

.cm-gift .cm-gift-earlier__title {
	margin: 0 0 8px;
	font-family: var(--cmg-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ar-navy-900);
}

.cm-gift .cm-gift-earlier__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-gift-earlier__list li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.cm-gift-earlier__list a {
	color: var(--ar-navy-700);
	overflow-wrap: anywhere;
}

.cm-gift-earlier__meta {
	font-size: 12.5px;
	color: var(--ar-text-muted);
}

/* 25.9 ---------------------------------------------------------------- */
@media (max-width: 480px) {
	.cm-gift {
		gap: 22px;
	}

	.cm-gift-cta {
		padding: 20px 18px;
	}

	.cm-gift .cm-gift-slots,
	.cm-gift .cm-gift-mini {
		gap: 8px;
	}

	.cm-gift-face {
		padding: 6px 3px;
	}

	.cm-gift-face__suit {
		font-size: 20px;
	}

	.cm-gift-face__name {
		font-size: 12px;
	}

	.cm-gift-face__rank {
		font-size: 10px;
	}

	.cm-gift-face__rev {
		font-size: 9px;
		padding: 1px 4px;
	}

	.cm-gift-actions .cm-gift-btn,
	.cm-gift-form > .cm-gift-btn,
	.cm-gift__view > .cm-gift-btn {
		align-self: stretch;
		width: 100%;
	}

	.cm-gift-offers .cm-gift-offer {
		flex-direction: column;
		gap: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-gift-pile.is-shuffling span:nth-child(n) {
		animation: none;
	}

	.cm-gift-pile {
		transition: opacity .3s;
	}

	.cm-gift-card.is-dealt {
		animation: cm-gift-fade .3s both;
	}

	/* no turn: the back fades out and the face fades in, in place */
	.cm-gift-card__in,
	.cm-gift-card.is-flipped .cm-gift-card__in {
		transform: none;
		transition: none;
	}

	.cm-gift-card .cm-gift-card__face {
		transform: none;
		opacity: 0;
		transition: opacity .3s;
	}

	.cm-gift-card__back {
		transition: opacity .3s;
	}

	.cm-gift-card.is-flipped .cm-gift-card__face {
		opacity: 1;
	}

	.cm-gift-card.is-flipped .cm-gift-card__back {
		opacity: 0;
	}

	.cm-gift-face.is-reversed .cm-gift-face__suit {
		transform: rotate(180deg);
	}

	.cm-gift-orb,
	.cm-gift-progress .is-now i {
		animation: none;
	}

	.cm-gift .cm-gift-btn,
	.cm-gift-chip span,
	.cm-gift-offers .cm-gift-offer {
		transition: none;
	}
}

@keyframes cm-gift-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}