/*
 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-300: #e8e7eb;
	--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 {
	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;
}

/* 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;*/
	}
}

/* -------------------------------------------------------------------
   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;
}

@media (max-width: 767px) {
	.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);
	padding-block: 12px;
	--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: 10px 24px;
	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" is the last child and reads as the panel's action,
   so it takes the primary ink and a hairline above it. */
.wd-dropdown-menu.wd-design-default .wd-sub-menu > li:last-child > a {
	color: var(--ar-violet-700);
}

.wd-dropdown-menu.wd-design-default .wd-sub-menu > li:last-child {
	margin-top: 12px;
	padding-top: 12px;
	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 12px + 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-block: 12px;
	margin-top: -13px;
	--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: 10px 24px;
	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);
}