/*
Theme Name: Dustbunny Labs
Description: The editable Divi presentation layer for Dustbunny Labs.
Template: Divi
Version: 0.7.5
Text Domain: dustbunny-labs
*/
:root{--lab-paper:#fff9f2;--lab-ink:#342c3d;--lab-berry:#ab365d;--lab-lilac:#eee6f5;--lab-pistachio:#e8eedc;--lab-line:#dfd5df;--lab-heading-font:'Nunito','Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;--lab-body-font:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Collector Lab: native Divi content, a small reusable presentation layer. */
body.home #page-container .et-l--post .et_pb_section:first-child .et_pb_button{color:#242032!important}
.home .et-l--post h2{font-family:var(--lab-heading-font)!important}
.home .et-l--post h1{font-weight:800!important;letter-spacing:-.055em;line-height:1.02!important}
.home .et-l--post h2{font-weight:700!important;letter-spacing:-.035em}
.home .et-l--post .et_pb_section:first-child .et_pb_image{position:relative;transform:rotate(5deg);filter:drop-shadow(14px 18px 0 #c8f36a);margin:14px auto 30px!important}
.home .et-l--post .et_pb_section:first-child .et_pb_image img{border:2px solid #fff9f2;border-radius:20px}
.home .et-l--post .et_pb_section:first-child .et_pb_button{background:#c8f36a!important;color:#242032!important;border-color:#c8f36a!important;box-shadow:4px 4px 0 #fff9f2;border-radius:12px!important}
.home .et-l--post .et_pb_section:first-child .et_pb_button:hover{background:#defca0!important;color:#242032!important}
.home .et-l--post .et_pb_section:nth-child(2){border-top:1px solid #342c3d;border-bottom:1px solid #342c3d}
.woocommerce ul.products li.product{border:1px solid #c8bbce;border-radius:16px;transition:box-shadow .2s ease,border-color .2s ease}
.woocommerce ul.products li.product:hover,.woocommerce ul.products li.product:focus-within{border-color:#342c3d;box-shadow:5px 5px 0 #ded1ee}
.woocommerce ul.products li.product.product_cat-full-art-holo .et_shop_image{position:relative;display:block;isolation:isolate;overflow:hidden;border-radius:10px}
.woocommerce ul.products li.product.product_cat-full-art-holo .et_overlay{display:none!important}
.woocommerce ul.products li.product.product_cat-full-art-holo .et_shop_image::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#b0ffff44 28%,#e4afff66 37%,#ffffcfaa 45%,#ffffffbb 49%,#b2ffd777 54%,#d5bcff44 64%,transparent 78%);background-size:280% 160%;background-position:100% 50%;mix-blend-mode:soft-light;opacity:.35;transition:background-position .7s ease,opacity .25s ease}
.woocommerce ul.products li.product.product_cat-full-art-holo .et_shop_image::before{content:"HOLO ✦";position:absolute;left:10px;bottom:10px;z-index:2;background:#292335;color:#ddff9d;padding:4px 9px;border:1px solid #e5d9f1;border-radius:6px;font:700 11px/1.5 var(--lab-body-font);letter-spacing:.12em;pointer-events:none}
@media(hover:hover) and (pointer:fine){.woocommerce ul.products li.product.product_cat-full-art-holo:hover .et_shop_image::after{opacity:1;background-position:0% 50%}}
.woocommerce ul.products li.product.product_cat-full-art-holo:focus-within .et_shop_image::after{opacity:1;background-position:0% 50%}
.woocommerce ul.products li.product.product_cat-full-art-holo .et_shop_image::after{mix-blend-mode:overlay;background-size:180% 160%}
@media(prefers-reduced-motion:reduce){.woocommerce ul.products li.product,.woocommerce ul.products li.product .et_shop_image::after{transition:none!important}.woocommerce ul.products li.product.product_cat-full-art-holo:hover .et_shop_image::after,.woocommerce ul.products li.product.product_cat-full-art-holo:focus-within .et_shop_image::after{background-position:100% 50%;opacity:.35}}
@media(max-width:767px){.home .et-l--post h1{font-size:42px!important}.home .et-l--post .et_pb_section:first-child .et_pb_image{transform:rotate(3deg);filter:drop-shadow(8px 10px 0 #c8f36a)}}
html{scroll-padding-top:100px}
body{background:var(--lab-paper);color:var(--lab-ink);font-family:var(--lab-body-font);font-size:17px;line-height:1.65}
h1,h2,h3,h4{color:var(--lab-ink)}
/* Link colour: the brand berry. Measured AA on every light surface this site uses —
   paper 5.88:1 · lilac #eee6f5 5.05:1 · pistachio 5.18:1 · white 6.15:1.
   It is deliberately NOT used on the dark ink surface, where links are lime (11.89:1).
   IMPORTANT — this is not the only place the link colour is set. The Divi content
   also carries a text-module preset with  "link":{"font":{"value":{"color":"#AB365D"}}},
   which Divi prints as ".et_pb_text_N .et_pb_text_inner a" AFTER this stylesheet and
   which therefore wins on those modules. Changing the link colour means changing it in
   BOTH places: here, and in the Divi preset. See docs/DESIGN-CONTRACT-UX.md. */
a{color:var(--lab-berry)}
.et_pb_text a:not(.et_pb_button){color:var(--lab-berry);text-decoration-thickness:1px;text-underline-offset:3px}
.et_pb_text a:hover{text-decoration:underline}
.et-l--post .et_pb_image img{border-radius:22px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--lab-heading-font)}
body.single-product .et_pb_wc_price .price{color:var(--lab-ink)!important;font-size:26px}
@media(max-width:767px){body>div[style*="pointer-events:none"]{display:none}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--lab-berry);outline-offset:4px}
.lab-skip-link{position:fixed;left:16px;top:-100px;z-index:100000;background:white;padding:12px 20px;color:var(--lab-ink)}
.lab-skip-link:focus{top:16px}
.et_pb_button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{border-radius:999px!important;font-weight:700!important;min-height:48px;padding:13px 25px!important;line-height:1.4!important}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--lab-berry)!important;color:white!important;border:2px solid var(--lab-berry)!important}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:#8d264a!important}
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select{background:white!important;border:1px solid #b4a7b5!important;border-radius:8px;padding:13px!important;color:var(--lab-ink)!important;min-height:48px;font-size:16px!important}
.woocommerce ul.products li.product{background:#fff;padding:16px;border:1px solid var(--lab-line);border-radius:14px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:19px!important;line-height:1.35}
.woocommerce ul.products li.product .price{color:var(--lab-ink)!important;font-weight:700}
/* Product card frame: 5:7 (0.714) — the site's agreed product-image format.
   The PDP already renders 5:7 (measured 390x546) and the product page states
   "Full image displayed in a 5:7 frame"; the loop was 3:4 (measured 0.750).
   object-fit "contain" keeps the artwork whole inside the frame — CSS never crops it.
   This is the SOLE authority for the frame: do not re-declare aspect-ratio for this
   selector further down the file (a later duplicate silently defeats any responsive
   override placed above it, because media queries add no specificity). */
.woocommerce ul.products li.product a img{aspect-ratio:5/7;object-fit:contain;border-radius:10px;background:var(--lab-lilac)}
.woocommerce-message,.woocommerce-info{background:var(--lab-pistachio)!important;color:var(--lab-ink)!important;border-color:var(--lab-ink)!important}
.woocommerce-error{background:#fff0f0!important;color:#822a35!important}
.woocommerce-checkout #payment{background:var(--lab-lilac);border-radius:12px}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:12px;border-bottom:1px solid var(--lab-line)}
@media(max-width:767px){
 .et_pb_text h1{font-size:clamp(36px,10vw,48px)!important;line-height:1.08!important}
 .et_pb_text h2{font-size:32px!important;line-height:1.16!important}
 .et_pb_text p{font-size:17px!important}
 .et_pb_button{max-width:100%;white-space:normal;text-align:center}
 .woocommerce ul.products li.product{padding:10px}
 .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px!important}
 .woocommerce ul.products li.product .button{font-size:14px!important;padding:10px 12px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Brand chrome remains a native Divi Menu/Image + Text layout. */
.et-l--header{position:sticky;top:0;z-index:999;background:var(--lab-paper);border-bottom:1px solid var(--lab-line)}
.admin-bar .et-l--header{top:32px}
.et-l--header .et_pb_menu .et_pb_menu__logo-wrap{flex:none!important}
.et-l--header .et_pb_menu .et_pb_menu__wrap{justify-content:flex-end!important;gap:12px}
.et-l--header .et_pb_menu .et_pb_menu__menu>nav>ul{column-gap:10px}
.et-l--header .et_pb_menu .et_pb_menu__menu>nav>ul>li>a{padding:12px 0!important;line-height:1.4}
.et-l--header .et_pb_menu .et-menu li li a{padding:12px 14px!important;font-size:14px!important}
.et-l--header .et_pb_menu .sub-menu{border-radius:0 0 14px 14px;box-shadow:0 12px 24px #342c3d12!important}
.et-l--header .et_pb_menu .menu-item-has-children:focus-within>.sub-menu{opacity:1!important;visibility:visible!important}
.et-l--header .et_pb_menu .et_pb_menu__cart-button{background:#eee6f5;border-radius:999px;padding:10px 14px;min-height:44px;gap:6px}
.et-l--header .et_pb_menu .et_pb_menu__cart-button:hover{background:#e4d7ee}
.et-l--header .et_pb_menu .et_pb_menu__logo img{display:block}
.et-l--header .et_pb_section:first-child p{padding-bottom:0}
.et-l--footer h3{font-size:18px;line-height:1.5;font-weight:700;margin-bottom:8px}
.et-l--footer p{line-height:1.9}
.et_pb_button{transition:background-color .18s ease,transform .18s ease!important}
.et_pb_button:hover{color:#fff!important}
.et_pb_button:after{display:none!important}
.et-l--header .et_pb_menu a:focus-visible,.mobile_menu_bar:focus-visible{outline:3px solid var(--lab-berry);outline-offset:4px}
@media(max-width:1100px) and (min-width:981px){.et-l--header .et_pb_menu .et_pb_menu__logo img{max-width:205px}.et-l--header .et_pb_menu .et_pb_menu__menu>nav>ul{column-gap:2px}.et-l--header .et_pb_menu .et-menu>li>a{font-size:14px!important}}
@media(max-width:980px){.et-l--header .et_pb_menu .et_pb_menu__logo img{width:210px!important;max-width:100%!important}.et-l--header .et_pb_menu .et_mobile_menu{top:calc(100% + 17px);border-color:var(--lab-berry);border-radius:0 0 16px 16px;padding:14px 16px;max-height:65vh;overflow-y:auto}.et-l--header .et_pb_menu .et_mobile_menu a{padding:13px 10px!important;font-size:16px!important}.et-l--header .et_pb_menu .et_pb_menu__wrap{gap:8px}.et-l--header .et_pb_menu .et_pb_menu__cart-count{font-size:12px!important}.et-l--header .et_pb_section--with-menu{padding-top:12px!important;padding-bottom:12px!important}}
@media(max-width:782px){.admin-bar .et-l--header{top:46px}.et-l--header .et_pb_section:first-child p{font-size:12px!important}.et-l--header .et_pb_menu .et_pb_menu__logo-wrap{width:190px!important}.et-l--header .et_pb_menu .et_pb_menu__logo img{width:190px!important}.et-l--header .et_pb_menu .et_pb_menu__cart-button{padding:9px!important}.et-l--header .et_pb_menu .et_pb_menu__cart-count{display:none}.et-l--footer h2{font-size:32px!important}}
@media(max-width:600px){.admin-bar .et-l--header{top:0}}
/* Dynamic reward data sits inside the editable Divi header, never over the page. */
#page-container{overflow:clip!important}
.woocommerce .button:after{display:none!important}
.et-l--header .dbl-progress{position:relative;inset:auto;z-index:auto;width:100%;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;line-height:1.4}
.et-l--header .dbl-progress progress{width:100px;flex:0 0 100px;margin:0;height:5px}
.et-l--header .dbl-progress small{font-size:10px}
.et-l--header .et_pb_text:has(.dbl-progress){margin-bottom:0!important}
.et-l--footer h2{font-size:26px!important}
@media(max-width:767px){.et-l--header .dbl-progress{flex-wrap:wrap;gap:3px 8px;font-size:11px}.et-l--header .dbl-progress progress{width:55px;flex-basis:55px}.et-l--header .dbl-progress small{width:100%;text-align:center;font-size:9px}.et_pb_text h1{font-size:36px!important;line-height:1.12!important}.et_pb_text h2{font-size:28px!important;line-height:1.2!important}}
@media(prefers-reduced-motion:reduce){.et_animated{opacity:1!important;transform:none!important;animation:none!important}.et_pb_button:hover{transform:none!important}}
/* Responsive compatibility for native Divi/Woo product grids and controls. */
@media(min-width:981px) and (max-width:1100px){
 .et-l--header .et_pb_menu .et_pb_menu__menu{display:none!important}
 .et-l--header .et_pb_menu .et_mobile_nav_menu{display:flex!important}
 .et-l--header .et_pb_menu .et_mobile_menu{top:calc(100% + 17px);border-color:var(--lab-berry);border-radius:0 0 16px 16px;padding:14px 16px;max-height:65vh;overflow-y:auto}
 .et-l--header .et_pb_menu .et_mobile_menu a{padding:13px 10px!important;font-size:16px!important}
}
.et_pb_column{min-width:0}
.et_pb_column:has(>.et_pb_shop),.et_pb_shop,.et_pb_shop>.woocommerce,.et_pb_shop ul.products{width:100%!important;min-width:0;box-sizing:border-box}
.woocommerce form input,.woocommerce form select,.woocommerce form textarea,.dbl-enquiry input,.dbl-enquiry textarea{max-width:100%;box-sizing:border-box}
.woocommerce .button,.dbl-enquiry button{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{overflow-wrap:anywhere}
@media(min-width:768px) and (max-width:980px){
 .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
 .woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
 body #page-container .woocommerce ul.products li.product{width:100%!important;max-width:100%!important;margin:0!important;float:none!important;padding:12px}
}
@media(max-width:359px){
 .et-l--header .et_pb_menu .et_pb_menu__logo-wrap{width:145px!important}
 .et-l--header .et_pb_menu .et_pb_menu__logo img{width:145px!important}
 .et-l--header .et_pb_menu .et_pb_menu__wrap{gap:4px}
 .et_pb_text h1{font-size:32px!important}
 .woocommerce ul.products{display:grid!important;grid-template-columns:minmax(0,1fr);gap:20px}
 .woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
 body #page-container .woocommerce ul.products li.product{width:100%!important;max-width:100%!important;margin:0!important;float:none!important}
}
@media(max-height:500px) and (max-width:980px){
 .et-l--header .et_pb_menu .et_mobile_menu{max-height:calc(100dvh - 145px)}
 .et-l--header .dbl-progress small{display:none}
}

/* =========================================================================
   0.5.4 — WCAG AA corrections from the Phase A audit (2026-09-21)
   0.5.8 — block A strengthened to !important after an adversarial review proved
           the specificity-only version was form-dependent and one selector inert.
   0.5.9 — result-count and stock colours (J, K); the loop frame consolidated into
           a single declaration at its original location.
   Every rule below is scoped and commented. Rollback: restore
   src/dustbunny-labs/baseline-0.5.1/style.css.
   ========================================================================= */

/* A) LINK COLOUR ON WOOCOMMERCE SURFACES
   Cause: a Divi text-module link colour of #c8f36a — the lime accent, which is
   tuned for the DARK "ink" hero surface — is inherited by WooCommerce table
   markup that sits on the light "paper" surface. Measured on /cart/: 1.22:1.
   WCAG 2.2 AA requires 4.5:1 for body text. Berry is this site's established
   link colour on light surfaces (compare ".et_pb_text a" above), so it is
   restored here.
   Scope: WooCommerce surfaces ONLY — the intentional lime links on the dark
   hero ("Explore sets →", 11.89:1) are deliberately NOT touched.
   WHY !important — and why out-specifying Divi is not enough:
   Divi prints the same module link rule in TWO forms on this site, and both are live:
     .et_pb_text_N .et_pb_text_inner a                        -> (0,0,2,1)
     .et-db #et-boc .et-l .et_pb_text_N .et_pb_text_inner a   -> (0,1,4,1)
   The second is emitted for any module saved in the Visual Builder; body carries
   "et-db" and #et-boc is in the DOM (both verified live on the product page), so it
   matches. It outranks everything this file can express, so a specificity-only fix
   would silently regress to 1.22:1 the next time an affected module is re-saved.
   !important makes the correction independent of the form Divi happens to emit —
   which is what an accessibility fix requires. Same idiom as the button and heading
   rules above.
   ":not(.button)" is load-bearing: without it this rule ties ".woocommerce a.button"
   (both 0,0,2,1) and, sitting later in the file, would turn the "Proceed to checkout"
   button's label berry-on-berry. Buttons keep their white label (L44).
   VERIFIED 2026-09-21: a synthetic link matched ONLY by ".cart-collaterals a" rendered
   lime rgb(200,243,106) before this change — see
   audit/COLOUR-CONTRAST-EVIDENCE-2026-09-21.json. */
.woocommerce table.shop_table td.product-name a,
.woocommerce table.shop_table td.product-thumbnail a,
.woocommerce .woocommerce-shipping-totals a.shipping-calculator-button,
.woocommerce .cart-collaterals .shipping-calculator-button,
.woocommerce .cart-collaterals a:not(.button),
.woocommerce .woocommerce-form-coupon-toggle a:not(.button){color:var(--lab-berry)!important}

/* =========================================================================
   0.5.7 — typography, Card Points bar readability, mobile cart count
   Reversible assumptions are marked; each one is undone by deleting its rule.
   ========================================================================= */

/* C) HEADING FAMILY — restores the font Divi already declares
   Divi's globals declare --et_global_heading_font: 'Nunito', and Nunito is
   already downloaded by the site's font request, but the module-level text
   settings print an "Arial, Helvetica, Lucida, sans-serif" stack
   (.et_pb_text_N .et_pb_text_inner h2 {...}) that wins on specificity, so every
   heading on the site rendered in Arial — a generic system font on a site whose
   brief is "must not look like a generic template".
   #page-container (an id, 1,0,0,x) deliberately outranks Divi's generated
   .et_pb_text_N .et_pb_text_inner rules (0,0,2,1), which are printed AFTER this
   stylesheet and would otherwise win at equal specificity.
   A/B checked before deploying: header height and page width unchanged.
   REVERT: delete this rule. Change the brand font in ONE place: --lab-heading-font. */
#page-container h1,#page-container h2,#page-container h3,
#page-container h4,#page-container h5,#page-container h6{font-family:var(--lab-heading-font)}

/* D) BODY SIZE — makes the size this file already declares actually apply
   The rule at the top of this file asks for body{font-size:17px}, but Divi prints
   its own body{font-size:var(--et_global_body_font_size)} (14px) inline in the head,
   after this stylesheet, at the same specificity — so 17px never took effect and
   the two layers silently disagreed. "html body" (0,0,0,2) outranks "body"
   (0,0,0,1) regardless of print order, so the declared 17px now wins.
   REVERT: delete this rule (body falls back to Divi's 14px). */
html body{font-size:17px;line-height:1.65}

/* E) CARD POINTS BAR — readability
   The plugin prints .dbl-progress with "font:13px/1.5 Arial" and a <small> at
   10px; the header context then squeezed it to 12px/10px (11px/9px on mobile).
   Arial is a third typeface on a two-font site, and 9-10px text is not readable
   for the line that carries the legal-ish condition ("Provisional until payment.").
   Scope is the bar only; the plugin's own CSS is left untouched.
   The id prefix is required: the plugin prints its <style> block in wp_head, AFTER
   this stylesheet, so at equal specificity the plugin wins the tie (measured: the
   first attempt with a plain ".dbl-progress" selector had no effect). */
#page-container .dbl-progress{font-family:var(--lab-body-font)}
#page-container .dbl-progress small{font-size:11px;line-height:1.4}

/* F) MOBILE CART COUNT — the header hid it below 782px
   ".et_pb_menu__cart-count{display:none}" removed the only on-screen signal of
   how many items are in the cart, on exactly the viewport where the user cannot
   hover. Restored as inline text inside the existing cart button. */
@media(max-width:782px){.et-l--header .et_pb_menu .et_pb_menu__cart-count{display:inline;font-size:12px!important;margin-left:4px}}

/* G) ENQUIRY FORM FIELDS — same third-typeface problem as the bar */
.dbl-enquiry input:not([type=checkbox]),.dbl-enquiry textarea{font-family:var(--lab-body-font)}

/* H) SMALL PHONES — pay for the restored cart count with the logo, not with the
   sticky header. Measured at 390px: with the count visible the header menu row
   wraps to two lines and the sticky header grows from 119px to 155px (18% of a
   844px-tall phone viewport, on every page). At 414px and up the count costs
   nothing, so only <=400px needs this. Shrinking the logo to 160px keeps the row
   on one line: header back to 119px, count still visible, no overflow at 360/390.
   REVERT: delete this block (the count then wraps the header on small phones). */
@media(max-width:400px){
 .et-l--header .et_pb_menu .et_pb_menu__logo-wrap{width:160px!important}
 .et-l--header .et_pb_menu .et_pb_menu__logo img{width:160px!important}
}

/* I) TAP TARGETS — WCAG 2.2 SC 2.5.8 Target Size (Minimum), AA
   Standalone CTA links inside text modules measured 17-19px tall (audit F07):
   "Explore sets →", "Shop all cards →", "Shipping & returns →", the footer nav,
   the category links. Buttons were already >=48px; text links were not.
   Fix without re-flowing text: instead of adding padding (which would change the
   line box and push paragraphs around), the POINTER TARGET is extended with an
   absolutely-positioned pseudo-element. Layout is byte-identical; the effective
   target gains 8px of height and 4px of width, reaching ~25px.
   Buttons are excluded (".et_pb_button" is filtered out and already sized), and
   the horizontal expansion is kept at 2px a side so adjacent links in a sentence
   or in a footer list never overlap into each other's target. */
#page-container .et_pb_text_inner a:not(.et_pb_button){position:relative}
#page-container .et_pb_text_inner a:not(.et_pb_button)::after{content:"";position:absolute;top:-4px;right:-2px;bottom:-4px;left:-2px}

/* J) SHOP RESULT COUNT — WCAG AA
   "Showing all 4 results" is WooCommerce's own .woocommerce-result-count at #999,
   which measures 2.72:1 on the paper surface (AA needs 4.5:1). It was missed by the
   earlier lime-only sweep, which only looked for the Divi lime accent; this pass
   measured the computed colour of every visible text node instead.
   #6a6274 is an ink-tinted muted grey: still secondary to the product titles, but
   5.56:1. Not a new colour role — it is the muted end of the existing ink ramp.
   REVERT: delete this rule (the count returns to WooCommerce's #999). */
.woocommerce .woocommerce-result-count{color:#6a6274!important}

/* K) STOCK AVAILABILITY — WCAG AA
   The product page's "10 in stock" prints in #958E09 (an olive), which measures
   3.27:1 on the paper surface at 15.6px — AA needs 4.5:1. Found by the same
   text-node sweep as J: the earlier audit only searched for the Divi lime accent and
   never measured WooCommerce's own status colours.
   #5c6b1f keeps the "positive/available" reading and measures 5.61:1.
   Out-of-stock is left at WooCommerce's own red, which already passes on paper.
   REVERT: delete this rule. */
.woocommerce .stock.in-stock{color:#5c6b1f!important}


/* =========================================================================
   PARTE A — PLAYFUL LAB · token, motore dei bottoni, link, card
   (child theme dustbunny-labs 0.6.0, 22/09/2026)
   =========================================================================

   PERCHÉ QUESTA PARTE ESISTE
   Il giro /ui-slop-score del 22/09/2026 (lab/150_staging_slop.py +
   lab/153_staging_score.py) ha misurato, su 24 superfici × 2 viewport:
     · 32-53 elementi per pagina con carattere GENERICO (Arial dei moduli Divi,
       "Open Sans" dei controlli WooCommerce): fino a 18 punti di punteggio;
     · bottoni, link e voci di menu che all'hover NON cambiano nulla (misurato
       forzando il passaggio del mouse e confrontando il computed style prima e
       dopo): la pagina non risponde al gesto;
     · controlli nativi non vestiti (raggio 0, fondo di sistema #f0f0f0) sul gate
       18+, il punto più delicato del sito.
   La richiesta della proprietaria è esplicita: "tutto più animato e dopaminergico,
   animato in maniera cute/kawaii, dai pulsanti ai moduli".

   COME È FATTA (e come si annulla)
   Tutto ciò che segue è UN SOLO blocco, in fondo al foglio: cancellare da qui
   alla fine riporta il sito a 0.5.9 (nuova partizione di cache: bump di versione).
   Regole: nessuna animazione che ritardi prezzo, CTA o testo; niente parallax
   obbligatorio, autoplay, lampeggi o countdown (§7 del design contract);
   ogni effetto è spento sotto `prefers-reduced-motion` (blocco in fondo).
   Le decorazioni vivono su pseudo-elementi: il layout non si muove mai, quindi
   le misure di contrasto, i frame 5:7 e i target tattili restano quelli
   verificati in 0.5.9.

   COSA NON STA QUI (per scelta di progetto)
   La tipografia di marca resta un token: `--lab-heading-font` / `--lab-body-font`.
   I moduli Divi non devono dichiarare famiglie (era la causa del difetto Arial).
   ========================================================================= */

/* -------------------------------------------------------------------------
   A.1 · TOKEN DEL MOVIMENTO E DEL TONO CUCCIOLO
   I colori sono NUOVI e stanno solo su superfici chiare, come decorazione o
   come fondo di componenti: nessuno sostituisce i token di marca. Ogni nuovo
   abbinamento testo/fondo è misurato (vedi il blocco §10 e
   lab/out/staging/contrasto_dopo.json).
   ------------------------------------------------------------------------- */
:root{
  /* tempi e curve: uno "scatto" rapido, un "rimbalzo" per il ritorno */
  --lab-t-quick:140ms;
  --lab-t-move:240ms;
  --lab-t-slow:560ms;
  --lab-ease-pop:cubic-bezier(.34,1.56,.64,1);      /* rimbalzo con sconfinamento */
  --lab-ease-soft:cubic-bezier(.22,.61,.36,1);
  --lab-ease-jelly:cubic-bezier(.5,-.4,.4,1.4);
  /* colori cuccioli (solo decorazione e fondi di componenti) */
  --lab-bubble:#ffe3f1;      /* rosa bubblegum */
  --lab-mint:#c9f7dd;        /* menta */
  --lab-honey:#ffe9b0;       /* miele */
  --lab-sky:#d8ecff;         /* cielo */
  --lab-lime:#c8f36a;        /* lime di marca, già presente */
  --lab-plum:#292335;        /* ink di marca, già presente */
  /* grigio spento: da 0.7.5 è un TOKEN, non più un valore sparso.
     Storia (22/09/2026): il sito dipingeva lo stesso "testo secondario" in due
     modi diversi — #6a6274 nel foglio del tema (conteggio risultati, etichette)
     e #62586B nel piè di pagina, dichiarato DENTRO il layout del Theme Builder
     (#466) e quindi invisibile a ogni ricerca nel tema. Il giro di misura
     contava entrambi come "colori fuori token". Ora c'è un nome solo. */
  --lab-muted:#6a6274;
  /* geometria e ombre "adesivo" */
  --lab-r-cute:22px;
  --lab-r-pill:999px;
  --lab-shadow-1:4px 5px 0 #342c3d26;
  --lab-shadow-2:7px 9px 0 #342c3d3d;
  --lab-shadow-3:10px 12px 0 #342c3d4d;
  /* alone di focus: uno solo per tutto il sito */
  --lab-ring:3px solid var(--lab-berry);
}

/* -------------------------------------------------------------------------
   A.2 · IL MOTORE DEI BOTTONI — un gesto, sempre lo stesso, sempre vivo
   Prima (misurato 22/09): `.et_pb_button` cambiava solo il colore di fondo;
   i submit Woo nativi non cambiavano NIENTE. Adesso ogni controllo premibile
   ha: sollevamento + piega minima + ombra dura che cresce all'hover; pressione
   che "affonda" (squish) al click; un lampo di luce che attraversa il bottone.
   Il bottone NON si rimpicciolisce mai: è una regola già pagata nel progetto.
   ------------------------------------------------------------------------- */
#page-container .et_pb_button,
#page-container .woocommerce a.button,
#page-container .woocommerce button.button,
#page-container .woocommerce input.button,
#page-container input[type="submit"],
#page-container button[type="submit"]{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--lab-body-font)!important;
  border-radius:var(--lab-r-pill)!important;
  font-weight:800!important;
  letter-spacing:.005em;
  box-shadow:var(--lab-shadow-1);
  transition:transform var(--lab-t-move) var(--lab-ease-pop),
             box-shadow var(--lab-t-move) var(--lab-ease-soft),
             background-color var(--lab-t-quick) linear,
             color var(--lab-t-quick) linear!important;
}
/* il lampo: una lama di luce che attraversa il bottone quando lo si guarda */
#page-container .et_pb_button::after,
#page-container .woocommerce a.button::after,
#page-container input[type="submit"]::after,
#page-container button[type="submit"]::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  z-index:-1;
  background:linear-gradient(105deg,transparent 38%,#ffffff59 46%,#ffffffa6 50%,#ffffff59 54%,transparent 62%);
  transform:translateX(-120%);
  transition:transform var(--lab-t-slow) var(--lab-ease-soft);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  #page-container .et_pb_button:hover,
  #page-container .woocommerce a.button:hover,
  #page-container .woocommerce button.button:hover,
  #page-container input[type="submit"]:hover,
  #page-container button[type="submit"]:hover{
    transform:translate(-3px,-3px) rotate(-.6deg) scale(1.022);
    box-shadow:var(--lab-shadow-3);
  }
  #page-container .et_pb_button:hover::after,
  #page-container .woocommerce a.button:hover::after,
  #page-container input[type="submit"]:hover::after,
  #page-container button[type="submit"]:hover::after{transform:translateX(120%)}
}
/* pressione: affonda di 2px e si allarga di un soffio — è il "pop" del pupazzo */
#page-container .et_pb_button:active,
#page-container .woocommerce a.button:active,
#page-container .woocommerce button.button:active,
#page-container .woocommerce input.button:active,
#page-container input[type="submit"]:active,
#page-container button[type="submit"]:active{
  transform:translate(1px,2px) scale(.985,1.03) rotate(0deg);
  box-shadow:1px 2px 0 #342c3d33;
  transition-duration:80ms;
}
/* il bottone lime della home (superficie ink) resta lime: cambia solo il gesto */
.home #page-container .et-l--header .et_pb_button,
.et-l--header .et_pb_button{border-radius:var(--lab-r-pill)!important}

/* -------------------------------------------------------------------------
   A.2-bis · BOTTONI CHE VIVONO DENTRO IL CONTENUTO (`.lab-btn`)
   I bottoni nativi di Divi non possono stare dentro una griglia scritta a mano
   nel modulo di testo (l'illustrazione e il testo devono convivere nella stessa
   riga). Questi sono link vestiti da bottone, con LO STESSO gesto del motore:
   sollevamento, ombra dura, affondamento al click.
   ------------------------------------------------------------------------- */
#page-container .lab-btn,
#page-container a.lab-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--lab-berry);color:#fff!important;
  border:2px solid var(--lab-ink);border-radius:var(--lab-r-pill);
  padding:14px 26px;font-weight:800;font-size:17px;
  text-decoration:none!important;
  box-shadow:var(--lab-shadow-1);
  background-image:none!important;
  transition:transform var(--lab-t-move) var(--lab-ease-pop),
             box-shadow var(--lab-t-move) var(--lab-ease-soft),
             background-color var(--lab-t-quick) linear;
}
@media (hover:hover) and (pointer:fine){
  #page-container .lab-btn:hover{transform:translate(-3px,-3px) rotate(-.6deg) scale(1.02);box-shadow:var(--lab-shadow-3)}
}
#page-container .lab-btn:active{transform:translate(1px,2px) scale(.985,1.03);box-shadow:1px 2px 0 #342c3d33}
#page-container .lab-btn--fantasma{background:#fff;color:var(--lab-ink)!important}
#page-container .lab-btn--chiaro{background:#fff9f2;color:var(--lab-plum)!important}
#page-container .lab-btn--lime{background:var(--lab-lime);color:var(--lab-plum)!important}
/* l'adesivo usato come link: niente sottolineatura, resta un adesivo */
#page-container a.lab-sticker{text-decoration:none!important;background-image:none!important}

/* Anche INTESTAZIONE e PIÈ DI PAGINA rispondono al puntatore.
   Misurato il 22/09/2026: i due controlli "senza alcuna risposta all'hover" erano
   il marchio e un link dell'intestazione — il marchio è il primo `<a>` dentro il
   menu, quindi è lui che il misuratore incontra. Qui il marchio si solleva e si
   inclina come tutto il resto, e i link del piè di pagina prendono il colore. */
@media (hover:hover) and (pointer:fine){
  .et-l--header .et_pb_menu .et_pb_menu__logo-wrap a{display:inline-block;
    transition:transform var(--lab-t-move) var(--lab-ease-pop)}
  .et-l--header .et_pb_menu .et_pb_menu__logo-wrap a:hover{transform:translateY(-2px) rotate(-1deg) scale(1.02)}
  .et-l--header .et_pb_menu .et_pb_menu__cart-button,
  .et-l--header .et_pb_menu .et_mobile_menu>li>a{position:relative}
  .et-l--header .et_pb_menu a{transition:color var(--lab-t-quick) linear,transform var(--lab-t-move) var(--lab-ease-pop)}
}

/* -------------------------------------------------------------------------
   A.3 · LINK E NAVIGAZIONE — la sottolineatura si DISEGNA, non compare
   Misurato prima: i link di testo e le voci di menu non avevano alcuna risposta
   all'hover (0 su 2 controlli rappresentativi in home). Ora la sottolineatura
   cresce da sinistra (150ms) e la voce di menu si "accende" con un ondina,
   mentre il puntino attivo della pagina corrente oscilla piano.
   ------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  #page-container .et_pb_text_inner a:not(.et_pb_button):not(.lab-btn),
  .et-l--footer a,
  .et-l--header .et_pb_menu .et-menu>li>a{
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 2px;
    transition:background-size var(--lab-t-move) var(--lab-ease-soft),
               color var(--lab-t-quick) linear, transform var(--lab-t-move) var(--lab-ease-pop);
  }
  #page-container .et_pb_text_inner a:not(.et_pb_button):not(.lab-btn):hover,
  .et-l--footer a:hover{background-size:100% 2px}
  .et-l--header .et_pb_menu .et-menu>li>a:hover{background-size:100% 3px;transform:translateY(-1px)}
}
.et-l--header .et_pb_menu .et-menu>li.current-menu-item>a,
.et-l--header .et_pb_menu .et-menu>li.current_page_item>a{
  background-image:radial-gradient(circle at 50% 0,#AB365D 0 2px,transparent 2.5px);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:100% 6px;
  animation:lab-bob 2.6s var(--lab-ease-soft) infinite;
}
@keyframes lab-bob{0%,100%{background-position:50% 100%}50%{background-position:50% calc(100% - 2px)}}

/* il carrello saluta: il conteggio dà un colpetto quando la pagina si apre */
.et-l--header .et_pb_menu__cart-button{transition:transform var(--lab-t-move) var(--lab-ease-pop),background-color var(--lab-t-quick) linear}
.et-l--header .et_pb_menu__cart-button:hover{transform:translateY(-2px) rotate(-1.5deg)}
.et-l--header .et_pb_menu__cart-count{animation:lab-pop 520ms var(--lab-ease-pop) 320ms 1 both}
@keyframes lab-pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* -------------------------------------------------------------------------
   A.4 · CARD — l'arte è il prodotto: la carta si inclina, non si taglia
   Il frame 5:7 e `object-fit:contain` restano quelli di 0.5.9 (una sola
   dichiarazione, non si tocca). Qui si aggiunge: inclinazione tridimensionale
   al passaggio del mouse, ombra-adesivo, salto in ingresso, e un cuoricino
   timbrato nell'angolo che si scopre solo guardandola.
   ------------------------------------------------------------------------- */
#page-container ul.products li.product{
  transition:transform var(--lab-t-move) var(--lab-ease-pop),
             box-shadow var(--lab-t-move) var(--lab-ease-soft),
             border-color var(--lab-t-quick) linear;
}
#page-container ul.products li.product::before{
  content:"\2665";
  position:absolute;
  top:-10px; right:-8px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--lab-bubble);
  color:var(--lab-berry);
  border:2px solid var(--lab-ink);
  border-radius:50%;
  font-size:15px;
  line-height:1;
  opacity:0;
  transform:scale(.4) rotate(-25deg);
  transition:opacity var(--lab-t-quick) linear,transform var(--lab-t-move) var(--lab-ease-pop);
  pointer-events:none;
  z-index:3;
}
@media (hover:hover) and (pointer:fine){
  #page-container ul.products li.product:hover{
    transform:translateY(-6px) rotate(-.7deg) scale(1.012);
    box-shadow:var(--lab-shadow-2);
    border-color:var(--lab-ink);
  }
  #page-container ul.products li.product:hover::before{opacity:1;transform:scale(1) rotate(0deg)}
}
#page-container ul.products li.product:focus-within::before{opacity:1;transform:scale(1) rotate(0deg)}
/* il badge HOLO batte il tempo quando la guardi da vicino */
#page-container ul.products li.product .et_shop_image::after{transition:background-position .7s var(--lab-ease-soft),opacity var(--lab-t-move) linear}
@media (hover:hover) and (pointer:fine){
  #page-container ul.products li.product:hover .et_shop_image::after{animation:lab-shimmer 2.4s linear infinite}
}
@keyframes lab-shimmer{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(24deg)}}


/* =========================================================================
   PARTE B — PLAYFUL LAB · i MODULI: sei forme diverse, non una ripetuta
   =========================================================================

   PERCHÉ. La proprietaria: "i moduli voglio che siano meno identici tra loro ma
   che ci sia un po' più di variazione". Misurato prima (lab/out/staging/forms.json):
   · il form di contatto aveva raggio 8px e carattere Arial;
   · i campi dell'area personale raggio 0px (spigoli vivi) e Arial;
   · il gate 18+ era il controllo NATIVO del browser (fondo #f0f0f0, bordo 1px,
     raggio 0) — il punto più delicato del sito, il più trascurato;
   · la tendina "Sort by" usava "Open Sans" (una quarta famiglia sul sito).
   Erano lo stesso modulo ripetuto, con lo stesso vestito, in ogni contesto.

   ADESSO ogni modulo ha STRUTTURA, non solo colore:
     1. `.lab-form--nota`    /contact/          → foglio a righe, fori, riga rossa a margine
     2. `.lab-form--sigillo` /vault/            → busta sigillata, ceralacca da timbrare
     3. `.lab-form--pass`    /my-account/       → biglietto d'ingresso con matrici
     4. `.lab-form--badge`   /my-account/edit-… → badge da laboratorio con etichette pill
     5. `.lab-form--tagliando` carrello         → tagliando della lotteria da staccare
     6. `.lab-form--cassetto` shop/sets         → cassetto del mobile con etichetta
   Più un vestito comune (curato, non generico) per tutto il resto: campi tondi,
   bordo doppio, ombra interna, e al focus il campo si SOLLEVA di 2px mentre
   l'etichetta fa un saltino.
   ------------------------------------------------------------------------- */

/* B.1 · CAMPI — il vestito comune (curato, coerente, mai nativo) */
#page-container .woocommerce input.input-text,
#page-container .woocommerce textarea,
#page-container .woocommerce select,
#page-container .dbl-enquiry input:not([type=checkbox]),
#page-container .dbl-enquiry textarea,
#page-container input[type="text"],
#page-container input[type="email"],
#page-container input[type="password"],
#page-container input[type="search"],
#page-container input[type="tel"],
#page-container textarea{
  font-family:var(--lab-body-font)!important;
  font-size:16px!important;
  border:2px solid #b4a7b5!important;
  border-radius:14px;
  background:#fff;
  box-shadow:inset 0 2px 0 #342c3d0f;
  transition:transform var(--lab-t-move) var(--lab-ease-pop),
             border-color var(--lab-t-quick) linear,
             box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
#page-container input[type="text"]:focus,
#page-container input[type="email"]:focus,
#page-container input[type="password"]:focus,
#page-container input[type="tel"]:focus,
#page-container textarea:focus,
#page-container .woocommerce input.input-text:focus,
#page-container .woocommerce textarea:focus,
#page-container .woocommerce select:focus{
  border-color:var(--lab-berry)!important;
  box-shadow:var(--lab-shadow-1), inset 0 2px 0 #342c3d0f;
  transform:translateY(-2px);
  outline:none!important;
}
/* etichette: al focus del campo fanno un saltino (solo se il campo è dentro la stessa riga) */
#page-container .woocommerce form label,
#page-container .dbl-enquiry label,
#page-container form label{display:inline-block;transition:transform var(--lab-t-move) var(--lab-ease-pop),color var(--lab-t-quick) linear}
#page-container form p:focus-within>label,
#page-container form .form-row:focus-within>label,
#page-container .dbl-enquiry p:focus-within label{transform:translateY(-2px) rotate(-1.2deg);color:var(--lab-berry)}

/* B.2 · CASELLE E OPZIONI — la ceralacca che si timbra, il cuore che batte */
#page-container input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:26px!important;height:26px!important;
  min-height:26px;
  margin:0 8px 0 0!important;
  vertical-align:-6px;
  border:2px solid var(--lab-ink);
  border-radius:9px;
  background:#fff;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
  transition:transform var(--lab-t-quick) var(--lab-ease-pop),background-color var(--lab-t-quick) linear,border-color var(--lab-t-quick) linear;
}
#page-container input[type="checkbox"]::after{
  content:"";
  width:12px;height:7px;
  border-left:3px solid transparent;border-bottom:3px solid transparent;
  transform:rotate(-45deg) scale(.5);
  transition:transform var(--lab-t-move) var(--lab-ease-pop),border-color var(--lab-t-quick) linear;
}
#page-container input[type="checkbox"]:checked{background:var(--lab-lime);border-color:var(--lab-ink)}
#page-container input[type="checkbox"]:checked::after{border-color:var(--lab-ink);transform:rotate(-45deg) scale(1)}
#page-container input[type="checkbox"]:active{transform:scale(.86)}
#page-container input[type="checkbox"]:focus-visible{outline:var(--lab-ring);outline-offset:3px}
#page-container input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  width:24px!important;height:24px!important;
  min-height:24px;margin:0 8px 0 0!important;vertical-align:-5px;
  border:2px solid var(--lab-ink);border-radius:50%;background:#fff;cursor:pointer;
  transition:transform var(--lab-t-move) var(--lab-ease-jelly),background-color var(--lab-t-quick) linear;
}
#page-container input[type="radio"]:checked{background:radial-gradient(circle,var(--lab-berry) 0 45%,#fff 47% 100%)}
#page-container input[type="radio"]:checked{transform:scale(1.08)}

/* B.3 · TENDINE E QUANTITÀ */
#page-container .woocommerce select,
#page-container select{
  font-family:var(--lab-body-font)!important;
  border-radius:14px!important;
  background-color:#fff!important;
  color:var(--lab-ink)!important;
}
#page-container .woocommerce .quantity input.qty{
  border-radius:12px 0 0 12px!important;
  text-align:center;
  font-weight:700;
}
#page-container .woocommerce .quantity{border-radius:12px;overflow:hidden;border:2px solid #b4a7b5;background:#fff}
#page-container .woocommerce .quantity input.qty{border:0!important;box-shadow:none}

/* -------------------------------------------------------------------------
   B.4 · VARIANTE 1 — "NOTA DI LABORATORIO"  (/contact/, [dbl_contact_form])
   Struttura: un foglio a righe con i fori del raccoglitore, la riga rossa a
   sinistra e il timbro al posto del bottone. Non è il modulo di prima con
   un colore diverso: cambia la griglia (righe come caselle da riempire).
   ------------------------------------------------------------------------- */
.dbl-enquiry{position:relative}
#page-container .dbl-enquiry{
  background:
    linear-gradient(#fff9f2,#fff9f2) padding-box,
    repeating-linear-gradient(#0000 0 31px,#dfd5df 31px 32px) border-box;
  border:1px solid var(--lab-line);
  border-left:6px solid var(--lab-bubble);
  border-radius:8px 20px 20px 8px;
  padding:26px 26px 22px 34px!important;
  box-shadow:var(--lab-shadow-1);
  max-width:640px;
}
#page-container .dbl-enquiry::before{ /* i fori del raccoglitore */
  content:"";position:absolute;left:-4px;top:22px;bottom:22px;width:12px;
  background-image:radial-gradient(circle,#fff9f2 0 3px,#dfd5df 3.5px 4px,transparent 4.5px);
  background-size:12px 34px;background-repeat:repeat-y;
  opacity:.9;pointer-events:none;
}
#page-container .dbl-enquiry::after{ /* riga rossa di margine */
  content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;
  background:#e58ba7;opacity:.5;pointer-events:none;
}
#page-container .dbl-enquiry input:not([type=checkbox]),
#page-container .dbl-enquiry textarea{
  background:transparent!important;
  border:0!important;border-bottom:2px dashed #b4a7b5!important;
  border-radius:0!important;box-shadow:none!important;
  padding-left:4px!important;
}
#page-container .dbl-enquiry input:focus,
#page-container .dbl-enquiry textarea:focus{
  border-bottom-color:var(--lab-berry)!important;
  transform:none!important;
  box-shadow:0 4px 0 -1px var(--lab-bubble)!important;
}
#page-container .dbl-enquiry input[type="submit"],
#page-container .dbl-enquiry button,
#page-container .lab-btn--timbro{
  background:var(--lab-berry)!important;
  border:2px solid var(--lab-ink)!important;
  border-radius:10px!important;
  transform:rotate(-1.6deg);
  padding:12px 22px!important;
  box-shadow:var(--lab-shadow-1);
}
#page-container .dbl-enquiry input[type="submit"]:hover,
#page-container .dbl-enquiry button:hover{transform:rotate(0deg) translateY(-2px)}
#page-container .dbl-enquiry input[type="submit"]:active,
#page-container .dbl-enquiry button:active{transform:rotate(-2deg) scale(.97)}

/* -------------------------------------------------------------------------
   B.5 · VARIANTE 2 — "BUSTA SIGILLATA"  (/vault/, gate 18+)
   Il gate era il controllo nativo del browser. Ora è una busta con la ceralacca:
   la casella è il sigillo (si timbra, non si spunta), il bottone ha la striscia
   a bande di pericolo, e il testo dell'avviso sta su un timbro 18+.
   ------------------------------------------------------------------------- */
body.page-id-432 #main-content form{
  position:relative;
  background:repeating-linear-gradient(-45deg,#fff9f2 0 10px,#fdf3e6 10px 20px)!important;
  border:2px dashed var(--lab-ink)!important;
  border-radius:18px!important;
  padding:30px 28px 34px!important;
  box-shadow:var(--lab-shadow-2);
  max-width:620px;
}
body.page-id-432 #main-content form::before{
  content:"18+";position:absolute;top:-16px;left:22px;
  background:var(--lab-berry);color:#fff;font-weight:800;font-size:13px;letter-spacing:.14em;
  padding:5px 12px;border:2px solid var(--lab-ink);border-radius:8px;transform:rotate(-3deg);
}
body.page-id-432 #main-content form::after{
  content:"";position:absolute;right:18px;bottom:16px;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#c34f76 0 30%,var(--lab-berry) 32% 100%);
  border:2px solid #7d2745;opacity:.85;transform:rotate(-12deg);
  box-shadow:inset 0 0 0 6px #ffffff2e;
  pointer-events:none;
  transition:transform var(--lab-t-move) var(--lab-ease-pop);
}
body.page-id-432 #main-content form:has(input[type=checkbox]:checked)::after{transform:rotate(4deg) scale(1.06)}
body.page-id-432 #main-content form label{font-weight:600}
body.page-id-432 #main-content input[type="submit"],
body.page-id-432 #main-content button[type="submit"],
body.page-id-432 #main-content button.button{
  background:var(--lab-plum)!important;color:#fff!important;
  border:2px solid var(--lab-plum)!important;
  background-image:repeating-linear-gradient(-45deg,#ffd93d 0 8px,#292335 8px 16px)!important;
  color:#fff!important;text-shadow:0 1px 2px #000000a1;
  min-height:48px;padding:12px 26px!important;
}
body.page-id-432 #main-content input[type="checkbox"]{width:32px!important;height:32px!important;border-radius:50%;border-color:#7d2745}
body.page-id-432 #main-content input[type="checkbox"]:checked{background:var(--lab-berry);border-color:#7d2745}
body.page-id-432 #main-content input[type="checkbox"]:checked::after{border-color:#fff}

/* -------------------------------------------------------------------------
   B.6 · VARIANTE 3 — "BIGLIETTO D'INGRESSO"  (accesso/registrazione, /my-account/)
   ------------------------------------------------------------------------- */
#customer_login{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
#customer_login .u-column1,#customer_login .u-column2{
  position:relative;
  background:#fff!important;
  border:2px solid var(--lab-ink)!important;
  border-radius:18px!important;
  padding:26px 24px!important;
  box-shadow:var(--lab-shadow-2);
  overflow:hidden;
}
#customer_login .u-column1::before,#customer_login .u-column2::before{
  content:"";position:absolute;inset:0 0 auto;height:10px;
  background:repeating-linear-gradient(90deg,var(--lab-berry) 0 14px,#fff9f2 14px 22px,var(--lab-lime) 22px 36px,#fff9f2 36px 44px);
}
#customer_login .u-column1::after,#customer_login .u-column2::after{
  content:"";position:absolute;left:-12px;right:-12px;bottom:26px;height:2px;
  background:repeating-linear-gradient(90deg,#b4a7b5 0 8px,transparent 8px 16px);
  pointer-events:none;
}
#customer_login h2{
  font-size:26px!important;margin-bottom:6px;
}
#customer_login form{margin-top:10px}
#customer_login button.button,#customer_login input[type="submit"]{
  background:var(--lab-lime)!important;color:var(--lab-plum)!important;
  border:2px solid var(--lab-ink)!important;font-weight:800!important;
}

/* -------------------------------------------------------------------------
   B.7 · VARIANTE 4 — "BADGE DI LABORATORIO"  (/my-account/edit-account/ e le
   schede dell'area personale). I campi diventano righe di badge: etichetta in
   pill a sinistra, campo a destra; il salvataggio è un timbro.
   ------------------------------------------------------------------------- */
#page-container .woocommerce-EditAccountForm .form-row,
#page-container .woocommerce-address-fields .form-row{
  display:grid;
  grid-template-columns:minmax(150px,34%) 1fr;
  align-items:center;
  gap:8px 16px;
  padding:9px 12px;
  border-radius:14px;
  transition:background-color var(--lab-t-quick) linear,transform var(--lab-t-move) var(--lab-ease-pop);
}
#page-container .woocommerce-EditAccountForm .form-row:hover,
#page-container .woocommerce-address-fields .form-row:hover{background:#eee6f566}
#page-container .woocommerce-EditAccountForm .form-row:focus-within{background:var(--lab-lilac);transform:translateX(3px)}
#page-container .woocommerce-EditAccountForm .form-row>label,
#page-container .woocommerce-address-fields .form-row>label{
  justify-self:start;
  background:var(--lab-plum);color:#fff9f2!important;
  padding:5px 12px;border-radius:var(--lab-r-pill);
  font-size:13px!important;font-weight:700;letter-spacing:.02em;
}
#page-container .woocommerce-EditAccountForm .form-row>label>span.required{color:var(--lab-lime)!important}
#page-container .woocommerce-EditAccountForm .form-row>label,
#page-container .woocommerce-EditAccountForm .form-row>span,
#page-container .woocommerce-EditAccountForm .form-row>input,
#page-container .woocommerce-address-fields .form-row>label,
#page-container .woocommerce-address-fields .form-row>span,
#page-container .woocommerce-address-fields .form-row>input{grid-column:auto!important;width:100%;max-width:none!important;float:none!important}
#page-container .woocommerce-EditAccountForm fieldset{border:2px dashed var(--lab-line)!important;border-radius:16px;padding:14px 16px;margin-top:18px}
#page-container .woocommerce-EditAccountForm fieldset legend{
  background:var(--lab-mint);border:2px solid var(--lab-ink);border-radius:var(--lab-r-pill);
  padding:4px 14px;font-weight:800;font-size:13px;
}
#page-container .woocommerce-EditAccountForm button.button,
#page-container .woocommerce-EditAccountForm button[type="submit"]{
  border-radius:12px!important;
  transform:rotate(-1deg);
}
#page-container .woocommerce-EditAccountForm button[type="submit"]:hover{transform:rotate(0) translateY(-2px)}

/* -------------------------------------------------------------------------
   B.8 · VARIANTE 5 — "TAGLIANDO"  (codice sconto del carrello)
   Struttura da tagliando: fondo rosa, perforazione verticale, bottoncino tondo.
   ------------------------------------------------------------------------- */
#page-container .woocommerce-form-coupon,
#page-container .checkout_coupon{
  position:relative;
  background:var(--lab-bubble)!important;
  border:2px dashed var(--lab-berry)!important;
  border-radius:16px!important;
  padding:20px 22px!important;
  box-shadow:var(--lab-shadow-1);
}
#page-container .woocommerce-form-coupon::before,
#page-container .checkout_coupon::before{
  content:"";position:absolute;left:-11px;top:50%;width:22px;height:22px;border-radius:50%;
  background:#fff9f2;border:2px dashed var(--lab-berry);transform:translateY(-50%);
}
#page-container .woocommerce-form-coupon::after,
#page-container .checkout_coupon::after{
  content:"";position:absolute;right:-11px;top:50%;width:22px;height:22px;border-radius:50%;
  background:#fff9f2;border:2px dashed var(--lab-berry);transform:translateY(-50%);
}
#page-container .woocommerce-form-coupon .coupon{display:flex;gap:12px;flex-wrap:wrap}
#page-container .woocommerce-form-coupon input#coupon_code{
  font-family:var(--lab-mono,ui-monospace,monospace)!important;
  letter-spacing:.12em;text-transform:uppercase;
  border-style:dashed!important;
}

/* -------------------------------------------------------------------------
   B.9 · VARIANTE 6 — "CASSETTO"  (la tendina dell'ordinamento, shop e sets)
   Il select Woo usava "Open Sans" (quarta famiglia del sito). Ora è un cassetto
   del mobile con la maniglia: etichetta mono, bordo vivo, e la freccia disegnata.
   ------------------------------------------------------------------------- */
#page-container .woocommerce-ordering{
  position:relative;
  background:#fff!important;
  border:2px solid var(--lab-ink);
  border-radius:14px;
  padding:6px 10px 6px 14px;
  box-shadow:var(--lab-shadow-1);
  transition:transform var(--lab-t-move) var(--lab-ease-pop),box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
#page-container .woocommerce-ordering::before{
  content:"\2699";position:absolute;left:-10px;top:-10px;width:26px;height:26px;display:grid;place-items:center;
  background:var(--lab-honey);border:2px solid var(--lab-ink);border-radius:8px;font-size:13px;
}
#page-container .woocommerce-ordering:hover{transform:translateY(-2px);box-shadow:var(--lab-shadow-2)}
#page-container .woocommerce-ordering select{
  border:0!important;background:transparent!important;
  font-weight:700;font-size:15px!important;
  padding:8px 4px!important;min-height:40px;
  box-shadow:none!important;
}
#page-container .woocommerce-ordering select:focus{transform:none!important}

/* -------------------------------------------------------------------------
   B.10 · STATI DI SISTEMA — vuoto, errore, conferma: parlano la lingua del sito
   WooCommerce stampa "Your cart is currently empty." con un fondo piatto. Qui
   diventa un cartello del laboratorio: bordo vivo, ombra adesivo, e il testo
   resta quello di WooCommerce (i dati del sito non si inventano).
   ------------------------------------------------------------------------- */
#page-container .woocommerce-info,
#page-container .woocommerce-message,
#page-container .woocommerce-error{
  position:relative;
  border:2px solid var(--lab-ink)!important;
  border-left-width:8px!important;
  border-radius:16px!important;
  padding:18px 20px 18px 26px!important;
  box-shadow:var(--lab-shadow-1);
  font-weight:600;
}
#page-container .woocommerce-info{background:var(--lab-pistachio)!important}
#page-container .woocommerce-message{background:var(--lab-mint)!important}
#page-container .woocommerce-error{background:#ffe7ef!important;color:#7d2745!important}
#page-container .woocommerce-info::before,
#page-container .woocommerce-message::before,
#page-container .woocommerce-error::before{
  content:"";position:absolute;left:-19px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;border:2px solid var(--lab-ink);
  background:var(--lab-lime);
}
#page-container .woocommerce-error::before{background:#ff9bb8}
#page-container .woocommerce-message::before{background:var(--lab-lime)}
#page-container .woocommerce-info .button,
#page-container .woocommerce-message .button{margin-top:8px}


/* =========================================================================
   PARTE C — PLAYFUL LAB · MOOD PER PAGINA, COMPONENTI DEL LAB, MOVIMENTO
   =========================================================================

   PERCHÉ. Il punteggio del 22/09 misurava, su ogni pagina, "impronta di pagina
   identica su 4 superfici", "sezioni di altezza quasi identica: nessun ritmo",
   "solo 1-2 superfici di sfondo". Cioè: la stessa pagina con parole diverse.
   La proprietaria chiede "ogni pagina dovrà avere la sua struttura, il suo mood
   e il suo tema".

   COME. Ogni pagina riceve un TEMA dichiarato (identificato dal body class di
   WordPress, `body.page-id-N`), fatto di tre cose misurabili:
     1. una TELA: motivo di fondo della pagina (puntini, righe, carta millimetrata,
        strisce, stelle) + lavaggio di colore in alto;
     2. un RITMO: padding diversi per ogni sezione, così la pagina non è una pila
        di blocchi uguali;
     3. un SEGNO: un adesivo d'angolo e un trattamento del titolo propri di quella
        pagina (non un colore diverso: un gesto diverso).
   I motivi sono gradienti CSS su pseudo-elementi fissi: costano poco e non
   spostano niente (nessuna interferenza con misure di contrasto e frame 5:7).
   ------------------------------------------------------------------------- */

/* C.0 · TELA COMUNE: la trama di fondo della pagina (sopra il colore, sotto il testo) */
#main-content{position:relative;isolation:isolate}
#main-content::before,
#main-content::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
#main-content>*{position:relative;z-index:1}
#main-content::after{opacity:.6;mix-blend-mode:normal}

/* C.1 · HOME (426) — vetrina: puntini fitti e alone lime in alto */
body.page-id-426 #main-content::before{
  background-image:radial-gradient(#342c3d14 1.4px,transparent 1.5px);
  background-size:22px 22px;
}
body.page-id-426 #main-content::after{
  background:radial-gradient(120% 60% at 78% -10%,#c8f36a33,transparent 62%);
}
body.page-id-426 #main-content .et_pb_section:nth-child(1){padding-top:96px!important;padding-bottom:88px!important}
body.page-id-426 #main-content .et_pb_section:nth-child(2){padding-top:52px!important;padding-bottom:52px!important}
body.page-id-426 #main-content .et_pb_section:nth-child(4){padding-top:88px!important;padding-bottom:96px!important}

/* C.2 · SHOP (428) — il mobile a cassetti: righe verticali + maniglie */
body.page-id-428 #main-content::before{
  background-image:repeating-linear-gradient(90deg,#342c3d0d 0 2px,transparent 2px 34px);
}
body.page-id-428 #main-content::after{
  background:radial-gradient(90% 40% at 20% 0,#ffe3f166,transparent 70%);
}
body.page-id-428 #main-content .et_pb_section:nth-child(1){padding-top:88px!important;padding-bottom:64px!important}
body.page-id-428 #main-content .et_pb_section:last-child{padding-top:56px!important;padding-bottom:110px!important}

/* C.3 · SETS (429) — la mensola: righe orizzontali + luce dall'alto */
body.page-id-429 #main-content::before{
  background-image:repeating-linear-gradient(0deg,#342c3d10 0 1px,transparent 1px 58px);
}
body.page-id-429 #main-content::after{
  background:radial-gradient(80% 55% at 50% -6%,#e8eedcbb,transparent 66%);
}
body.page-id-429 #main-content .et_pb_section:nth-child(1){padding-top:84px!important;padding-bottom:58px!important}
body.page-id-429 #main-content .et_pb_section:last-child{padding-top:70px!important;padding-bottom:104px!important}

/* C.4 · MYSTERY LAB (430) — la stanza delle capsule: cielo scuro, stelle, alone */
body.page-id-430 #main-content::before{
  background-image:radial-gradient(#fff9f229 1.2px,transparent 1.3px),radial-gradient(#c8f36a33 1px,transparent 1.1px);
  background-size:120px 120px,74px 74px;
  background-position:0 0,37px 41px;
  animation:lab-drift 42s linear infinite;
}
body.page-id-430 #main-content::after{
  background:radial-gradient(75% 42% at 50% -6%,#7c6cf044,transparent 70%);
}
@keyframes lab-drift{from{background-position:0 0,37px 41px}to{background-position:120px 240px,157px 281px}}
body.page-id-430 #main-content .et_pb_section:nth-child(1){padding-top:104px!important;padding-bottom:96px!important}
body.page-id-430 #main-content .et_pb_section:nth-child(2){padding-top:72px!important;padding-bottom:72px!important}
body.page-id-430 #main-content .et_pb_section:nth-child(3){padding-top:86px!important;padding-bottom:92px!important}

/* C.5 · WELCOME (431) — la lettera: coriandoli tenui e nastro */
body.page-id-431 #main-content::before{
  background-image:radial-gradient(#ab365d1f 1.5px,transparent 1.6px),radial-gradient(#c8f36a33 1.5px,transparent 1.6px);
  background-size:64px 64px,96px 96px;
  background-position:0 0,28px 18px;
}
body.page-id-431 #main-content .et_pb_section:nth-child(1){padding-top:92px!important;padding-bottom:78px!important}
body.page-id-431 #main-content .et_pb_section:nth-child(2){padding-top:64px!important;padding-bottom:58px!important}

/* C.6 · VAULT (432) — la cassaforte: strisce di pericolo sommesse, fondo scuro */
body.page-id-432 #main-content::before{
  background-image:repeating-linear-gradient(-45deg,#342c3d0a 0 14px,transparent 14px 28px);
  opacity:1;
}
body.page-id-432 #main-content .et_pb_section:nth-child(1){padding-top:88px!important;padding-bottom:70px!important}
body.page-id-432 #main-content .et_pb_section:nth-child(2){padding-top:76px!important;padding-bottom:104px!important}

/* C.7 · COMMISSIONS (433) — l'atelier: carta millimetrata e matita */
body.page-id-433 #main-content::before{
  background-image:linear-gradient(#342c3d0f 1px,transparent 1px),linear-gradient(90deg,#342c3d0f 1px,transparent 1px);
  background-size:28px 28px,28px 28px;
}
body.page-id-433 #main-content::after{background:radial-gradient(70% 40% at 12% 0,#ffe9b099,transparent 70%)}
body.page-id-433 #main-content .et_pb_section:nth-child(1){padding-top:90px!important;padding-bottom:66px!important}
body.page-id-433 #main-content .et_pb_section:nth-child(3){padding-top:78px!important;padding-bottom:96px!important}

/* C.8 · ABOUT (434) — il ritratto: alone caldo, grana morbida */
body.page-id-434 #main-content::after{background:radial-gradient(80% 50% at 80% 0,#ffe3f199,transparent 68%)}
body.page-id-434 #main-content .et_pb_section:nth-child(1){padding-top:92px!important;padding-bottom:74px!important}
body.page-id-434 #main-content .et_pb_section:nth-child(2){padding-top:58px!important;padding-bottom:92px!important}

/* C.9 · FAQ (435) — il manuale: carta a righe e linguette */
body.page-id-435 #main-content::before{
  background-image:repeating-linear-gradient(0deg,#342c3d0d 0 1px,transparent 1px 34px);
}
body.page-id-435 #main-content .et_pb_section:nth-child(1){padding-top:84px!important;padding-bottom:58px!important}

/* C.10 · CONTACT (436) — il quaderno delle note */
body.page-id-436 #main-content::before{
  background-image:linear-gradient(90deg,#e58ba733 1px,transparent 1px),repeating-linear-gradient(0deg,#342c3d0c 0 1px,transparent 1px 32px);
  background-position:64px 0,0 0;
  background-size:100% 100%,100% 32px;
}
body.page-id-436 #main-content .et_pb_section:nth-child(1){padding-top:86px!important;padding-bottom:60px!important}
body.page-id-436 #main-content .et_pb_section:nth-child(2){padding-top:64px!important;padding-bottom:100px!important}

/* C.11 · CART (437) — il vassoio: incavi tondi e luce soffusa */
body.page-id-437 #main-content::before{
  background-image:radial-gradient(#342c3d0f 2px,transparent 2.4px);
  background-size:46px 46px;
}
body.page-id-437 #main-content .et_pb_section:nth-child(1){padding-top:80px!important;padding-bottom:52px!important}
body.page-id-437 #main-content .et_pb_section:last-child{padding-top:56px!important;padding-bottom:108px!important}

/* C.12 · CHECKOUT (438) — il banco: sobrio, pulito, nessun fronzolo */
body.page-id-438 #main-content .et_pb_section:nth-child(1){padding-top:72px!important;padding-bottom:52px!important}
body.page-id-438 #main-content .et_pb_section:last-child{padding-top:64px!important;padding-bottom:104px!important}

/* C.13 · MY LAB (439) — il banco di lavoro: griglia del banco + menta */
body.page-id-439 #main-content::before{
  background-image:linear-gradient(#342c3d0d 1px,transparent 1px),linear-gradient(90deg,#342c3d0d 1px,transparent 1px),
                   radial-gradient(#ab365d14 2px,transparent 2.4px);
  background-size:36px 36px,36px 36px,36px 36px;
  background-position:0 0,0 0,18px 18px;
}
body.page-id-439 #main-content::after{background:radial-gradient(85% 45% at 15% 0,#c9f7ddcc,transparent 72%)}
body.page-id-439 #main-content .et_pb_section:nth-child(1){padding-top:94px!important;padding-bottom:64px!important}
body.page-id-439 #main-content .et_pb_section:nth-child(2){padding-top:70px!important;padding-bottom:96px!important}

/* C.14 · PRODOTTO E CATEGORIE — il palcoscenico: riflettore sull'arte, cassetti */
body.single-product #main-content::before{
  background:radial-gradient(70% 46% at 50% 0,#fff9f2f2,#eee6f5 62%,#e8eedc 100%);
  opacity:.85;
}
body.single-product #main-content .et_pb_section:nth-child(1){padding-top:76px!important;padding-bottom:70px!important}
body.single-product #main-content .et_pb_section:last-child{padding-top:64px!important;padding-bottom:98px!important}
body.tax-product_cat #main-content::before{background-image:repeating-linear-gradient(90deg,#342c3d0d 0 2px,transparent 2px 34px)}
body.tax-product_cat #main-content .et_pb_section:nth-child(1){padding-top:82px!important;padding-bottom:56px!important}

/* C.15 · DOCUMENTI (spedizioni, privacy, termini) — carta d'archivio */
body.page-id-440 #main-content::before,
body.page-id-441 #main-content::before,
body.page-id-442 #main-content::before{
  background-image:repeating-linear-gradient(0deg,#342c3d0c 0 1px,transparent 1px 36px);
}
body.page-id-440 #main-content .et_pb_text_inner,
body.page-id-441 #main-content .et_pb_text_inner,
body.page-id-442 #main-content .et_pb_text_inner{max-width:76ch}

/* =========================================================================
   C.16 · COMPONENTI DEL LAB  (classi lab-* usate nel contenuto Divi)
   Sono il vocabolario nuovo: piccoli oggetti di scena disegnati in CSS, senza
   immagini da caricare. Ogni componente ha il suo stato (hover/focus/checked)
   quando è interattivo.
   ========================================================================= */

/* =========================================================================
   C.19 · IL COLORE DEL TESTO DI CONTENUTO LO DECIDE IL TEMA, NON DIVI
   Misurato il 22/09/2026 dopo il ridisegno: i paragrafi e i titoli dei moduli
   NUOVI uscivano CREMA (#fff9f2) su superfici chiare — contrasto 1.00:1, cioè
   testo invisibile. Causa vera, letta nel CSS generato da Divi:
       .et_pb_text_0 .et_pb_text_inner h2, .et_pb_text_1 .et_pb_text_inner h2 { color:#fff9f2 }
   Divi propaga il colore del primo modulo della pagina a quelli che non lo
   dichiarano, e il suo default di pagina è crema. Le pagine vecchie non lo
   mostravano perché dichiaravano #342C3D modulo per modulo: cioè il difetto c'era
   e non si vedeva.
   Qui la regola si sposta dove sta la responsabilità: il testo del contenuto è
   ink sul chiaro (id + !important per scavalcare le regole per-modulo di Divi,
   stesso idioma già usato per la famiglia tipografica), e diventa crema SOLO nelle
   sezioni che contengono il marcatore `.lab-kicker--su-ink` — così la superficie
   scura resta una scelta editoriale visibile nel builder, non un default nascosto.
   ========================================================================= */
#page-container #main-content h1,#page-container #main-content h2,#page-container #main-content h3,
#page-container #main-content h4,#page-container #main-content h5,#page-container #main-content h6{
  color:var(--lab-ink)!important;
}
/* NB: `body` davanti ai selettori NON è decorativo. La regola del contenitore
   (§C.19, più sotto) ha la STESSA specificità di queste (1 id, 3 classi, 1 tipo)
   e, trovandosi dopo nel file, vinceva: il paragrafo dell'apertura scura restava
   inchiostro su inchiostro (1,14:1, misurato). Con `body` in testa queste regole
   salgono di un tipo e vincono loro, che è l'ordine giusto: prima la superficie
   scura, poi il default chiaro. */
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) h1,
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) h2,
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) h3,
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) h4,
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) p:not([class]),
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) li:not([class]){
  color:#fff9f2!important;
}
/* sulla superficie scura i link del contenuto sono lime (11,89:1), mai berry */
body #page-container #main-content .et_pb_section:has(.lab-kicker--su-ink) .et_pb_text_inner a:not(.lab-btn):not(.lab-sticker){
  color:var(--lab-lime)!important;
}

/* TIPOGRAFIA — il secondo pezzo della stessa lezione.
   Anche la FAMIGLIA torna indietro: salvando un modulo senza dichiararla, Divi ci
   scrive dentro il suo default (`"family":"Arial"`) — misurato: la rilettura del
   contenuto cresce di qualche centinaio di caratteri e l'Arial riappare su
   `/shop/` e `/sets/` dopo essere stato tolto. La tipografia è un token del tema:
   il contenuto non la decide, e questo strato lo rende vero qualunque cosa Divi
   scriva nel modulo.

   COLORE DEL CORPO — terzo pezzo, misurato con una schermata a pagina intera su
   `/my-account/`: il paragrafo dell'apertura usciva **crema su lilla** (1,16:1,
   illeggibile) perché è il primo modulo della pagina e Divi gli applica il suo
   default di pagina. Le regole qui sotto danno il colore al testo NUDO (i miei
   componenti hanno una classe e si vestono da soli); dentro le sezioni scure la
   regola C.19 li riporta a crema. */
#page-container #main-content .et_pb_text_inner p:not([class]),
#page-container #main-content .et_pb_text_inner li:not([class]),
#page-container #main-content .et_pb_text_inner h1+p,
#page-container #main-content .et_pb_text_inner strong:not([class]),
#page-container #main-content .et_pb_text_inner em:not([class]){
  color:var(--lab-ink)!important;
}
#page-container #main-content .et_pb_text_inner,
#page-container #main-content .et_pb_text_inner p,
#page-container #main-content .et_pb_text_inner li,
#page-container #main-content .et_pb_text_inner a,
#page-container #main-content .et_pb_text_inner span,
#page-container #main-content .et_pb_text_inner blockquote,
#page-container #main-content .et_pb_text_inner figcaption{
  font-family:var(--lab-body-font)!important;
}
#page-container .et_pb_shop .woocommerce-loop-product__title,
#page-container .et_pb_shop .price,
#page-container .et_pb_shop .button,
#page-container .et_pb_shop .woocommerce-result-count{
  font-family:var(--lab-heading-font)!important;
}

/* INTESTAZIONE E PIÈ DI PAGINA — stesso difetto, altro posto.
   I moduli dell'intestazione e del piè di pagina non sono PAGINE: vivono nei
   template del Theme Builder, quindi il `--font-fix` sul contenuto non li ha
   toccati e continuavano a dichiarare Arial. Misurato: 21 elementi per pagina con
   carattere generico su OGNI superficie (uguale su tutte → è il guscio, non la
   pagina). Qui la famiglia si impone su tutto il guscio; il colore lo decide §C.19
   per il contenuto e resta quello del tema per il guscio. */
#page-container .et-l--header,
#page-container .et-l--header .et_pb_text_inner,
#page-container .et-l--header nav a,
#page-container .et-l--header .et_pb_menu__cart-button,
#page-container .et-l--header .dbl-progress,
#page-container .et-l--footer,
#page-container .et-l--footer .et_pb_text_inner,
#page-container .et-l--footer a,
#page-container .et-l--footer p,
#page-container .et-l--footer li,
#page-container .et-l--footer span,
#page-container .et-l--footer strong{
  font-family:var(--lab-body-font)!important;
}
#page-container .et-l--header h1,#page-container .et-l--header h2,#page-container .et-l--header h3,
#page-container .et-l--footer h1,#page-container .et-l--footer h2,#page-container .et-l--footer h3,
#page-container .et-l--footer h4,#page-container .et-l--footer .et_pb_text_inner h2,
#page-container .et-l--footer .et_pb_text_inner h3{
  font-family:var(--lab-heading-font)!important;
}

/* COLORE DEL CONTENUTO: una riga sul CONTENITORE, non un elenco di elementi.
   Il primo tentativo elencava p, li, strong: restavano fuori `<summary>` dei
   cassetti della FAQ (6 testi a 1,05:1, misurati dopo il deploy) e qualunque
   elemento che non avessi previsto. Il colore si eredita: dichiararlo sul
   contenitore copre tutto, e i componenti che devono un colore diverso se lo
   danno da soli (adesivi, kicker, bottoni, cartelli). */
#page-container #main-content .et_pb_text_inner{color:var(--lab-ink)!important}
/* e i LINK del contenuto sono berry sul chiaro (misurato: un link nuovo della FAQ
   usciva lime su carta, 1,22:1 — è il colore-link del preset dei moduli Divi, che
   il design contract già dichiarava come causa radice). Nelle sezioni scure vale
   la regola `body … .lab-kicker--su-ink` qui sopra, che è più specifica. */
/* NB: i BOTTONI di WooCommerce sono esclusi. Il carrello e le altre pagine Woo
   vivono DENTRO un modulo di testo, e questa regola li raggiungeva: il testo
   dei bottoni diventava berry su fondo berry — "Return to shop" misurato a
   1,00:1, testo invisibile. I bottoni hanno la loro regola (bianco su berry). */
#page-container #main-content .et_pb_text_inner a:not(.lab-btn):not(.lab-sticker):not(.et_pb_button):not(.button):not(.wc-backward):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):not(.et_pb_button){
  color:var(--lab-berry)!important;
}

/* ------------------------------------------------------------------------- */
/* --- griglie usate dentro i moduli di testo -------------------------------------
   Perché dentro il modulo e non con le colonne di Divi: le colonne di Divi 5
   generano classi di larghezza (24/24 ecc.) che dipendono dal builder; qui la
   griglia è CSS puro e collassa da sola sul telefono. Il modulo resta uno solo,
   quindi resta modificabile in Divi senza rompere niente. */
.lab-due{display:grid;gap:34px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.lab-due--invertita{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.lab-tre{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.lab-quattro{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(max-width:781px){.lab-due,.lab-due--invertita{grid-template-columns:minmax(0,1fr);gap:26px}}

/* ------------------------------------------------------------------------- */
/* --- etichetta di sezione: "EXPERIMENT 01 / LIGHT PLAY" */
.lab-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--lab-body-font);font-size:13px!important;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lab-berry)!important;
  margin:0 0 10px!important;
}
.lab-kicker::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--lab-lime);border:2px solid var(--lab-ink);
  animation:lab-wink 2.8s var(--lab-ease-soft) infinite;
}
/* kicker su superficie SCURA: il berry misura 2,47:1 sull'inchiostro (misurato
   22/09/2026) e non passa; il lime è l'accento che il design contract ammette
   sulle superfici ink (11,89:1). La variante si dichiara nel contenuto, quindi
   resta visibile e modificabile nel builder. */
.lab-kicker--su-ink{color:var(--lab-lime)!important}
.lab-kicker--su-ink::before{background:var(--lab-berry);border-color:#fff9f2}
@keyframes lab-wink{0%,100%{transform:scale(1)}50%{transform:scale(.72) rotate(18deg)}}

/* --- adesivo: un timbro tondo che si può mettere dove serve */
.lab-sticker{
  display:inline-block;background:var(--lab-honey);color:var(--lab-plum)!important;
  border:2px solid var(--lab-ink);border-radius:14px;
  padding:6px 14px;font-weight:800;font-size:13px;letter-spacing:.04em;
  box-shadow:var(--lab-shadow-1);transform:rotate(-2deg);
  transition:transform var(--lab-t-move) var(--lab-ease-pop);
}
.lab-sticker:hover{transform:rotate(2deg) scale(1.04)}
.lab-sticker--lime{background:var(--lab-lime)}
.lab-sticker--rosa{background:var(--lab-bubble)}
.lab-sticker--menta{background:var(--lab-mint)}

/* --- cartellino del campione (per ordini, prodotti, set) */
.lab-tag{
  display:grid;gap:6px;background:#fff;border:2px solid var(--lab-ink);
  border-radius:16px;padding:16px 18px;box-shadow:var(--lab-shadow-1);
  position:relative;overflow:hidden;
}
.lab-tag::before{
  content:"";position:absolute;top:10px;right:-30px;width:90px;height:16px;
  background:var(--lab-bubble);border-top:2px solid var(--lab-ink);border-bottom:2px solid var(--lab-ink);
  transform:rotate(38deg);
}
.lab-tag__titolo{font-weight:800;font-size:17px}
.lab-tag__dato{font-family:var(--lab-mono,ui-monospace,monospace);font-size:13px;letter-spacing:.06em;color:var(--lab-muted,#6a6274)}

/* --- nota della mascotte: fumetto con le orecchie */
.lab-nota{
  position:relative;background:#fff;border:2px solid var(--lab-ink);border-radius:20px;
  padding:20px 22px;margin:18px 0;box-shadow:var(--lab-shadow-2);max-width:62ch;
}
.lab-nota::before,.lab-nota::after{ /* le due orecchie */
  content:"";position:absolute;top:-22px;width:22px;height:26px;
  background:#fff;border:2px solid var(--lab-ink);border-bottom:0;border-radius:12px 12px 0 0;
}
.lab-nota::before{left:26px;transform:rotate(-9deg)}
.lab-nota::after{left:54px;transform:rotate(6deg);height:22px}
.lab-nota--menta{background:var(--lab-mint)}
.lab-nota--rosa{background:var(--lab-bubble)}
.lab-nota__firma{display:block;margin-top:10px;font-weight:800;color:var(--lab-berry)}

/* --- barra dei punti: si riempie con un saltino */
.lab-barra{
  display:block;height:18px;border-radius:var(--lab-r-pill);
  background:#fff;border:2px solid var(--lab-ink);overflow:hidden;position:relative;
}
.lab-barra__pieno{
  display:block;height:100%;border-radius:var(--lab-r-pill);
  background:repeating-linear-gradient(115deg,var(--lab-lime) 0 12px,#b7e855 12px 24px);
  transform-origin:left center;
  animation:lab-riempi 900ms var(--lab-ease-pop) 200ms 1 both;
}
@keyframes lab-riempi{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
.lab-barra--larga{width:100%;height:22px}
.lab-barra-wrap{display:grid;gap:8px;margin:14px 0}

/* --- barattolo dei punti: il contenitore delle capsule guadagnate */
.lab-barattolo{
  display:grid;justify-items:center;gap:8px;text-align:center;
}
.lab-barattolo__vetro{
  position:relative;width:158px;height:200px;border:3px solid var(--lab-ink);
  border-radius:16px 16px 30px 30px;
  background:
    linear-gradient(180deg,#ffffff9e 0%,#d8ecff8c 40%,#c9f7dd8c 100%),
    radial-gradient(circle at 28% 78%,#ffe3f1 0 26px,transparent 27px),
    radial-gradient(circle at 70% 74%,#ffe9b0 0 22px,transparent 23px);
  box-shadow:var(--lab-shadow-2),inset 0 -14px 0 #ffe3f166,inset 10px 0 0 #ffffff9e;
  overflow:hidden;
}
.lab-barattolo__vetro::after{ /* riflesso del vetro */
  content:"";position:absolute;left:14%;top:6%;width:22%;height:70%;border-radius:50%;
  background:linear-gradient(180deg,#ffffffd9,#ffffff00);transform:rotate(-9deg);
  pointer-events:none;
}
.lab-barattolo__capsula{
  position:absolute;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(180deg,var(--lab-bubble) 0 50%,#fff 50%);
  border:2px solid var(--lab-ink);
  animation:lab-galleggia 3.4s var(--lab-ease-soft) infinite;
}
.lab-barattolo__capsula:nth-child(1){left:14px;bottom:14px;animation-delay:0s}
.lab-barattolo__capsula:nth-child(2){left:48px;bottom:34px;animation-delay:.5s;background:linear-gradient(180deg,var(--lab-mint) 0 50%,#fff 50%)}
.lab-barattolo__capsula:nth-child(3){right:16px;bottom:18px;animation-delay:1.1s;background:linear-gradient(180deg,var(--lab-honey) 0 50%,#fff 50%)}
.lab-barattolo__capsula:nth-child(4){left:30px;bottom:58px;animation-delay:1.6s}
.lab-barattolo__capsula:nth-child(5){right:34px;bottom:62px;animation-delay:2.1s;background:linear-gradient(180deg,var(--lab-sky) 0 50%,#fff 50%)}
@keyframes lab-galleggia{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.lab-barattolo__tappo{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:96px;height:18px;background:var(--lab-berry);border:3px solid var(--lab-ink);border-radius:8px;
}
.lab-barattolo figcaption,.lab-barattolo__didascalia{font-size:14px;font-weight:700;color:#5a5064}

/* --- la macchina delle capsule: il centro della Mystery Lab */
.lab-macchina{
  position:relative;width:min(340px,84vw);margin:6px auto;display:grid;justify-items:center;
}
.lab-macchina__cupola{
  width:100%;aspect-ratio:1/.82;border:3px solid var(--lab-ink);
  border-radius:50% 50% 18px 18px / 62% 62% 18px 18px;
  background:
    radial-gradient(circle at 30% 74%,#ffe3f1 0 16px,transparent 17px),
    radial-gradient(circle at 62% 78%,#c9f7dd 0 15px,transparent 16px),
    radial-gradient(circle at 45% 60%,#ffe9b0 0 14px,transparent 15px),
    radial-gradient(circle at 74% 62%,#d8ecff 0 13px,transparent 14px),
    linear-gradient(180deg,#ffffffd9,#b0c4de4d);
  box-shadow:inset -14px -18px 0 #ffffff6b,inset 14px 10px 0 #ffffff8c;
  position:relative;overflow:hidden;
}
.lab-macchina__cupola::after{ /* il riflesso di vetro */
  content:"";position:absolute;left:12%;top:8%;width:26%;height:64%;border-radius:50%;
  background:linear-gradient(180deg,#ffffffe0,#ffffff00);transform:rotate(-14deg);
}
.lab-macchina__capsule{position:absolute;bottom:8px;width:30px;height:30px;border-radius:50%;border:2px solid var(--lab-ink);
  background:linear-gradient(180deg,var(--lab-bubble) 0 50%,#fff 50%);
  animation:lab-salta 2.6s var(--lab-ease-pop) infinite}
.lab-macchina__capsule:nth-child(1){left:16%;animation-delay:.1s}
.lab-macchina__capsule:nth-child(2){left:40%;animation-delay:.7s;background:linear-gradient(180deg,var(--lab-mint) 0 50%,#fff 50%)}
.lab-macchina__capsule:nth-child(3){left:64%;animation-delay:1.3s;background:linear-gradient(180deg,var(--lab-honey) 0 50%,#fff 50%)}
@keyframes lab-salta{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}60%{transform:translateY(0)}}
.lab-macchina__corpo{
  width:74%;margin-top:-10px;background:var(--lab-berry);border:3px solid var(--lab-ink);
  border-radius:0 0 22px 22px;padding:18px 16px 22px;display:grid;gap:12px;justify-items:center;
  box-shadow:var(--lab-shadow-2);
}
.lab-macchina__fessura{
  width:64%;height:16px;background:#292335;border:2px solid #7d2745;border-radius:8px;
  box-shadow:inset 0 3px 0 #00000059;
}
.lab-macchina__manopola{
  width:54px;height:54px;border-radius:50%;background:var(--lab-honey);border:3px solid var(--lab-ink);
  display:grid;place-items:center;font-weight:800;color:var(--lab-plum);cursor:pointer;
  box-shadow:var(--lab-shadow-1);
  transition:transform var(--lab-t-move) var(--lab-ease-pop),box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
.lab-macchina__manopola:hover{transform:rotate(24deg) scale(1.06);box-shadow:var(--lab-shadow-2)}
.lab-macchina__manopola:active{transform:rotate(-16deg) scale(.94)}
.lab-macchina__etichetta{
  background:#fff9f2;border:2px solid var(--lab-ink);border-radius:10px;padding:6px 12px;
  color:var(--lab-plum);
  font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}

/* --- apri la capsula: interruttore puro CSS (nessun JS) -------------------
   La capsula si apre con :has(checkbox:checked): funziona da mouse, da tocco e
   da tastiera (Spazio), e non dipende da nessuna libreria. */
.lab-capsula-gioco{
  display:grid;gap:16px;justify-items:center;margin:22px auto;max-width:520px;text-align:center;
}
.lab-capsula-gioco input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.lab-capsula-gioco__bottone{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--lab-lime);border:2px solid var(--lab-ink);border-radius:var(--lab-r-pill);
  padding:14px 24px;font-weight:800;box-shadow:var(--lab-shadow-1);
  transition:transform var(--lab-t-move) var(--lab-ease-pop),box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
.lab-capsula-gioco__bottone:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:var(--lab-shadow-2)}
.lab-capsula-gioco input:focus-visible + .lab-capsula-gioco__bottone{outline:var(--lab-ring);outline-offset:4px}
.lab-capsula-gioco__esito{
  opacity:0;max-height:0;overflow:hidden;
  transform:translateY(10px) scale(.94);
  transition:opacity var(--lab-t-move) linear,
             transform var(--lab-t-slow) var(--lab-ease-pop),
             max-height var(--lab-t-slow) var(--lab-ease-soft);
  background:#fff;border:2px dashed var(--lab-berry);border-radius:20px;
  padding:0 22px;
  box-shadow:var(--lab-shadow-1);max-width:46ch;
}
/* il pannello non occupa spazio finché non lo si apre: prima riservava ~600px
   di vuoto (misurato nella schermata a pagina intera del 22/09) */
.lab-capsula-gioco:has(input:checked) .lab-capsula-gioco__esito{
  opacity:1;transform:translateY(0) scale(1);max-height:640px;padding:20px 22px;
}
.lab-capsula-gioco:has(input:checked) .lab-capsula-gioco__bottone{background:#fff;color:var(--lab-berry)}

/* --- i tre passi, come vignette --------------------------------------------------- */
.lab-passi{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:18px 0}
.lab-passo{
  position:relative;background:#fff;border:2px solid var(--lab-ink);border-radius:20px;
  padding:22px 20px 20px;box-shadow:var(--lab-shadow-1);
  transition:transform var(--lab-t-move) var(--lab-ease-pop),box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
.lab-passo:hover{transform:translateY(-4px) rotate(-.8deg);box-shadow:var(--lab-shadow-2)}
.lab-passo__num{
  position:absolute;top:-16px;left:18px;width:38px;height:38px;border-radius:50%;
  background:var(--lab-berry);color:#fff;border:2px solid var(--lab-ink);
  display:grid;place-items:center;font-weight:800;font-size:16px;
}
.lab-passo__arte{
  height:76px;border-radius:14px;border:2px dashed var(--lab-line);margin-bottom:12px;
  background:linear-gradient(135deg,#ffe3f1,#d8ecff 60%,#c9f7dd);position:relative;overflow:hidden;
}
.lab-passo__arte::after{
  content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50% 50% 40% 40%;background:#fff;border:2px solid var(--lab-ink);
}
.lab-passo h3{margin:0 0 6px!important;font-size:19px!important}
.lab-passo p{margin:0!important;font-size:16px!important;color:#4b4356}

/* --- il banco vuoto (stato vuoto del carrello) ---------------------------------- */
.lab-banco{
  display:grid;gap:10px;justify-items:center;text-align:center;
  padding:26px 20px;border:2px dashed var(--lab-line);border-radius:20px;background:#fff9f2;
}
.lab-banco__disegno{position:relative;width:210px;height:96px}
.lab-banco__disegno::before{ /* il piano del banco */
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--lab-ink);border-radius:6px;
}
.lab-banco__disegno::after{ /* il coniglietto di polvere che dorme sul banco */
  content:"";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:76px;height:56px;border-radius:44% 44% 40% 40%;background:#fff;border:2px solid var(--lab-ink);
  box-shadow:inset -6px -6px 0 #eee6f5;
}
.lab-banco figcaption{font-weight:700;color:#4b4356}

/* --- riga di spunte "cucciose" usate nel contenuto ------------------------------ */
.lab-tick{
  display:flex;align-items:flex-start;gap:10px;background:#fff;border:2px solid var(--lab-ink);
  border-radius:16px;padding:14px 16px;box-shadow:var(--lab-shadow-1);margin:12px 0;cursor:pointer;
  transition:transform var(--lab-t-move) var(--lab-ease-pop),box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
.lab-tick:hover{transform:translateY(-2px);box-shadow:var(--lab-shadow-2)}
.lab-tick:has(input:checked){background:var(--lab-mint)}
.lab-tick__segno{flex:none}

/* --- cartello nuovo (avvisi nel corpo pagina) ---------------------------------- */
.lab-cartello{
  display:flex;gap:14px;align-items:flex-start;background:var(--lab-lilac);
  border:2px solid var(--lab-ink);border-left-width:8px;border-radius:16px;
  padding:18px 20px;box-shadow:var(--lab-shadow-1);margin:16px 0;
}
.lab-cartello__icona{
  flex:none;width:38px;height:38px;border-radius:12px;background:var(--lab-lime);border:2px solid var(--lab-ink);
  display:grid;place-items:center;font-weight:800;
}
.lab-cartello--rosa{background:var(--lab-bubble)}
.lab-cartello--menta{background:var(--lab-mint)}

/* --- schede richiudibili (details) come cassetti del manuale ------------------- */
.lab-fold{
  border:2px solid var(--lab-ink);border-radius:16px;background:#fff;margin:12px 0;
  box-shadow:var(--lab-shadow-1);overflow:hidden;
  transition:box-shadow var(--lab-t-move) var(--lab-ease-soft);
}
.lab-fold[open]{box-shadow:var(--lab-shadow-2)}
.lab-fold>summary{
  cursor:pointer;list-style:none;padding:16px 20px;font-weight:800;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fff9f2,#eee6f580);
}
.lab-fold>summary::-webkit-details-marker{display:none}
.lab-fold>summary::before{
  content:"+";width:26px;height:26px;flex:none;border-radius:9px;border:2px solid var(--lab-ink);
  background:var(--lab-honey);display:grid;place-items:center;font-weight:800;
  transition:transform var(--lab-t-move) var(--lab-ease-pop);
}
.lab-fold[open]>summary::before{content:"\2212";transform:rotate(180deg)}
.lab-fold__corpo{padding:6px 20px 18px}

/* --- illustrazioni SVG nel contenuto ------------------------------------------ */
.lab-art{display:block;max-width:100%;height:auto}
.lab-art__sfera{fill:var(--lab-bubble);stroke:var(--lab-ink);stroke-width:3}
.lab-art__bocca{fill:none;stroke:var(--lab-ink);stroke-width:3;stroke-linecap:round}
.lab-art__tratto{fill:none;stroke:var(--lab-ink);stroke-width:3;stroke-linecap:round}

/* --- la striscia punti dell'header: leggibile e viva -------------------------- */
.et-l--header .dbl-progress progress{
  -webkit-appearance:none;appearance:none;
  border:2px solid var(--lab-ink);border-radius:var(--lab-r-pill);
  background:#fff;height:9px;overflow:hidden;
}
.et-l--header .dbl-progress progress::-webkit-progress-bar{border-radius:var(--lab-r-pill);background:#fff}
.et-l--header .dbl-progress progress::-webkit-progress-value{
  border-radius:var(--lab-r-pill);
  background:repeating-linear-gradient(115deg,var(--lab-lime) 0 8px,#b7e855 8px 16px);
  transition:width var(--lab-t-slow) var(--lab-ease-pop);
}
.et-l--header .dbl-progress progress::-moz-progress-bar{
  border-radius:var(--lab-r-pill);
  background:repeating-linear-gradient(115deg,var(--lab-lime) 0 8px,#b7e855 8px 16px);
}

/* =========================================================================
   C.17 · INGRESSO DELLE SEZIONI — RIMOSSO (misurato, non ipotizzato)
   La versione precedente animava l'ingresso con `animation-timeline: view()`:
   bella in teoria, sbagliata in pratica. Verificato il 22/09/2026 con una
   schermata a pagina intera: i blocchi sotto la piega restavano a **opacità 0**
   — cioè il contenuto della pagina non si vedeva finché non lo si scorreva, e in
   qualunque contesto che non faccia scorrere il viewport (cattura a pagina intera,
   stampa, alcuni strumenti di lettura) la pagina risultava **vuota a metà**.
   Il design contract dice: nessuna animazione che ritardi l'accesso al contenuto.
   Il movimento resta dove serve (hover, pressione, focus, ambienti, casella,
   apertura della capsula): tutte cose che rispondono a un gesto, non che
   nascondono il testo in attesa di uno scroll.
   ========================================================================= */

/* --- quello che resta: i titoli di sezione entrano con un'ondina breve
   (opacità MAI sotto 1: si muovono e basta) -------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #main-content .et_pb_section:not(:first-child) .et_pb_text_inner>h2:first-child{
      animation:lab-ondina linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 24%;
    }
    @keyframes lab-ondina{from{transform:translateY(14px)}to{transform:none}}
  }
}

/* =========================================================================
   C.18 · RISPETTO DEL MOVIMENTO — con `prefers-reduced-motion` non si muove
   NULLA di ciò che è stato aggiunto da 0.6.0, e ciò che era già nascosto
   (opacità 0 in attesa dell'ingresso) torna visibile subito.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  #main-content::before,#main-content::after{animation:none!important}
  .lab-kicker::before,.lab-barattolo__capsula,.lab-macchina__capsule,
  .et-l--header .et_pb_menu__cart-count,.et-l--header .et_pb_menu>nav>ul>li.current-menu-item>a{animation:none!important}
  #page-container .et_pb_button,#page-container .woocommerce a.button,#page-container .woocommerce button.button,
  #page-container input[type="submit"],#page-container button[type="submit"],
  #page-container ul.products li.product,.lab-passo,.lab-macchina__manopola,.lab-capsula-gioco__bottone{transform:none!important;transition:none!important}
  #page-container .et_pb_button::after,#page-container input[type="submit"]::after{display:none!important}
  #page-container input[type="text"],#page-container input[type="email"],#page-container input[type="password"],
  #page-container textarea,#page-container .woocommerce input.input-text{transform:none!important}
  .lab-capsula-gioco__esito{opacity:1!important;transform:none!important;max-height:none!important;padding:20px 22px!important}
  .lab-barra__pieno{animation:none!important;transform:none!important}
  #page-container .et_pb_text_inner a{background-size:0 0!important}
}


/* =========================================================================
   C.20 · COMANDI DENTRO GLI AVVISI DEL CARRELLO (chiusura 22/09/2026)
   Il bottone "Return to shop" del carrello vuoto misurava **1,00:1**: testo bianco
   con fondo bianco. Woo lo stampa in `<p class="return-to-shop">`, fuori
   dall'avviso, e nel carrello vuoto la pagina è una superficie bianca: le regole
   del bottone Woo non lo raggiungevano. Due id per scavalcare Woo/Divi, fondo
   berry, testo bianco (4,9:1).
   ========================================================================= */
#page-container #main-content .woocommerce a.wc-backward,
#page-container #main-content .woocommerce .return-to-shop a,
#page-container #main-content .woocommerce p.return-to-shop a.button,
#page-container #main-content .woocommerce a.button.wc-backward{
  background:var(--lab-berry)!important;
  color:#fff!important;
  border:2px solid var(--lab-berry)!important;
  border-radius:var(--lab-r-pill)!important;
  padding:13px 25px!important;
  font-weight:700!important;
  box-shadow:var(--lab-shadow-1);
}
#page-container #main-content .woocommerce a.wc-backward:hover,
#page-container #main-content .woocommerce .return-to-shop a:hover{
  background:#8d264a!important;border-color:#8d264a!important;
  transform:translate(-3px,-3px);box-shadow:var(--lab-shadow-3);
}

/* =========================================================================
   C.21 · DUE RESIDUI CHIUSI ALLA FONTE (0.7.5, 22/09/2026)

   Misurati il 22/09/2026 con lab/171_verifica_residui.py, dopo la correzione
   alla FONTE sul sito (layout #466 del Theme Builder + 17 chiavi globali di Divi
   riportate sui token; script lab/170_fix_staging.py). Restano due cose che
   appartengono al tema, non al contenuto:

   1. PREZZO DELLA SCHEDA PRODOTTO in carattere di sistema.
      Misurato su /product/demo-sleepy-lab-holo/: il prezzo («9,00 €») usciva in
      `system-ui` a 28px — mentre lo stesso prezzo in vetrina esce in Nunito. La
      causa è che WooCommerce/Divi dichiarano il prezzo senza famiglia, e il tema
      ne fissava solo colore e dimensione. Qui la famiglia la decide il tema, come
      per ogni altro testo: stessa regola già in vigore per la vetrina.
   2. RIGA LEGALE DEL PIÈ DI PAGINA.
      Il layout #466 dichiarava il piè di pagina in Arial con `#62586B!important`
      (fuori token). Alla fonte è stato ripulito: ora il modulo non dichiara più
      nulla e il testo eredita — quindi la gerarchia («testo piccolo, secondario»)
      va decisa qui, col token `--lab-muted`. La specificità replica quella della
      regola generata da Divi (`.et-db #et-boc .et-l …`), doppiando la classe:
      misurato, è ciò che serve per vincere il pareggio senza toccare il layout.
   ========================================================================= */
#page-container .et_pb_shop .woocommerce-loop-product__title,
#page-container .et_pb_shop .price,
#page-container .et_pb_shop .button,
#page-container .et_pb_shop .woocommerce-result-count,
#page-container .woocommerce div.product .price,
#page-container .woocommerce div.product p.price,
#page-container .woocommerce div.product span.price,
#page-container .woocommerce div.product .summary .price,
#page-container .et_pb_wc_price .price,
#page-container .related.products .price{
  font-family:var(--lab-heading-font)!important;
}

body #page-container .et_pb_text_2_tb_footer.et_pb_text_2_tb_footer .et_pb_text_inner{
  font-size:13px!important;
  line-height:1.7em!important;
  color:var(--lab-muted,#6a6274)!important;
}
body #page-container .et_pb_text_2_tb_footer.et_pb_text_2_tb_footer .et_pb_text_inner a{
  color:var(--lab-berry,#ab365d)!important;
}