body.woocommerce, body.woocommerce-page {
  font-family: var(--myc-font-sans);
  background: var(--myc-paper);
  color: var(--myc-ink);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button {
  background: var(--myc-ink);
  /* Navy, not paper: paper-on-brass contrast is ~1.56:1 (fails WCAG AA); navy-on-brass is
     ~6:1. */
  color: var(--myc-ink);
  font-weight: 700;
  border-radius: 0;
  border: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--myc-ink);
  opacity: 0.9;
}

.woocommerce ul.products li.product,
.woocommerce div.product {
  font-family: var(--myc-font-sans);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--myc-ink);
  font-weight: 700;
}

.woocommerce ul.products li.product {
  background: var(--myc-white);
  border-radius: 0;
  padding: 16px;
  box-shadow: none;
}

.woocommerce table.shop_table {
  border-color: var(--myc-line);
}

/* WooCommerce core ships a bare "th { background: rgba(0,0,0,.025) }" site-wide -- shows up as a
   light gray blotch behind every th cell on any page with a .shop_table, not just the cart totals
   table already reset for this in cart.css (that fix is scoped to .myc-cart-totals-table, which
   only exists on the cart page). Confirmed live on staging on both the checkout order-review table
   (table.woocommerce-checkout-review-order-table, computed th background rgb(248,248,248) instead
   of transparent) and would equally hit the my-account order-history/order-view tables, since none
   of them carry a theme-specific class to scope a narrower reset to. Reset for both th/td (not just
   th) since it's simplest to guarantee neither ever carries a background here, same reasoning as
   the cart totals table's own th/td reset. */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  background: none;
}

/* Matches the actual "Alert & notifiche" component documented in Design System.dc.html (the
   original handoff), not an improvised shared-neutral-card guess: three genuinely distinct
   states, each a translucent color wash + matching border + matching darker text, not one shared
   paper-2 card differentiated only by a border accent. "Info" uses the CURRENT paper-2/
   border-hairline tokens rather than the doc's literal old #F4EFE8/#E8E1D6 -- those were
   superseded sitewide by the 2026-07 palette refresh (tokens.css); success/error were never
   implemented anywhere before this, so their doc values (Verde #7A8B69, Errore #C25B4E) are used
   as-is via the --myc-success-* and --myc-error-* tokens (tokens.css).
   .woocommerce-error is a <ul><li> list in WooCommerce core, not a plain div like the other two,
   but core's own CSS already resets its list styling -- only color/background/border/radius need
   overriding here.
   !important throughout: confirmed live on staging (DevTools) that Storefront's own
   ".woocommerce-message, .woocommerce-info, .woocommerce-error, ..." rule (background-color:
   #0f834d green, color:#fff, border-radius:2px) was winning over this one at equal specificity --
   its stylesheet is being enqueued a second time and landing after ours in the cascade (the same
   "Storefront duplicate enqueue" issue already fought with a specificity bump on .col-full
   elsewhere in this file/repo). !important is immune to whatever order that duplicate loads in.
   Also confirmed live: the "Annullare?" (undo) link inside .woocommerce-message was unreadable --
   WooCommerce core's own link color there is a light shade meant to sit on its original solid dark
   green background, and became near-invisible once the background turned into a light wash. Every
   state's own `a` color is set explicitly below instead of left to inherit.
   The selector repeats each class (.woocommerce-message.woocommerce-message, etc.) purely to raise
   specificity above a plain single-class match -- confirmed live that WC/Storefront's own
   duplicate-enqueued rule (see above) also carries a thick border-left AND own padding, still
   winning over a same-specificity !important some of the time depending on which copy of the
   duplicated stylesheet loads last; doubling the class is the same specificity-bump trick already
   used elsewhere in this theme (.myc-btn.myc-btn--primary, .myc-cart-totals.myc-cart-totals) and
   makes the outcome deterministic instead of load-order-dependent. Padding/margin match the doc's
   alertBase spec (padding:14px 16px) exactly, and WC's own decorative ::before icon (a filled
   circle+glyph badge, not a plain character -- the doc's mock has no icon at all, just inline ✓/⚠
   text baked into the message string) is removed entirely rather than recolored, since keeping it
   would mean keeping its reserved ~3.5em left padding too, which is what made the box wider/more
   uneven than the doc's plain, evenly-padded card in the first place. */
.woocommerce-message.woocommerce-message,
.woocommerce-info.woocommerce-info,
.woocommerce-error.woocommerce-error {
  border-radius: 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--myc-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  margin: 5px 0 !important;
}

/* Design System.dc.html's alert mock bakes ✓/⚠ as literal characters into the message TEXT itself
   for success/error, and has no icon at all for info -- can't replicate that exactly since
   WooCommerce generates these strings dynamically server-side, but a ::before glyph placed inline
   right before the text (no circle badge -- unlike WC core's own removed icon) reproduces the same
   visual result without needing to filter WC's notice text in PHP.
   position/left/top reset: confirmed live that WC core's own ::before rule absolutely-positions its
   icon (position:absolute; left:24px; top:...), meant to sit inside its own wide left padding --
   without resetting that, this glyph rendered stacked on top of the message text instead of inline
   before it, since `display:inline` alone doesn't override an inherited `position:absolute`.
   font-family reset: confirmed live that WC core's own ::before rule sets font-family to an icon
   font ("Font Awesome 5 Free" -- it normally shows a Dashicon/FontAwesome glyph here, not a plain
   text character), which this theme never overrode, so the ✓ character rendered using that icon
   font's glyph shapes/metrics instead of Poppins -- visually a different size/weight than the ⚠
   below despite both being font-size:0.875rem, since they were two different fonts' interpretations of
   a similar-looking character. Both icons now explicitly render in the theme's own font. */
.woocommerce-message.woocommerce-message::before {
  content: '✓';
  display: inline;
  position: static !important;
  margin-right: 8px;
  font-family: var(--myc-font-sans) !important;
  font-weight: 700;
  color: var(--myc-success-text) !important;
}

.woocommerce-info.woocommerce-info::before {
  display: none !important;
}

/* Unlike .woocommerce-message/-info (plain divs), .woocommerce-error is a <ul><li> in WooCommerce
   core -- confirmed live: a ::before on the <ul> itself renders before the <li>, which is
   block-level (display:list-item), forcing a line break between the icon and the message text
   instead of sitting inline with it. The icon goes on the <li> itself instead, inline with its own
   text content. */
.woocommerce-error.woocommerce-error li::before {
  content: '⚠';
  display: inline;
  position: static !important;
  margin-right: 8px;
  font-family: var(--myc-font-sans) !important;
  font-weight: 700;
  color: var(--myc-error-text) !important;
}

.woocommerce-message.woocommerce-message {
  background: var(--myc-success-bg) !important;
  border-color: var(--myc-success-border) !important;
  color: var(--myc-success-text) !important;
}
.woocommerce-message.woocommerce-message a { color: var(--myc-success-text) !important; text-decoration: underline !important; }

/* "Continua con gli acquisti"/"Visualizza il carrello" -- WooCommerce core prints these as
   <a class="button wc-forward"> (includes/wc-cart-functions.php), so the rule above only ever
   reset their color/underline: they still picked up background/padding/border-radius/font-weight
   from the generic ".woocommerce a.button" rule above, rendering as a second solid brass button
   competing with the notice it sits inside. Resets the box model back to plain inline text, same
   font-size/weight as the notice's own copy (.woocommerce-message.woocommerce-message's own
   font-size:0.875rem/font-weight:600) -- color/underline/the arrow WooCommerce appends stay exactly as
   they already were, only background/padding/radius/weight are touched here. */
.woocommerce-message.woocommerce-message a.button.wc-forward {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  /* The v3 ink button below (white text, ink border, uppercase) otherwise wins: white on the pale notice. */
  color: var(--myc-success-text) !important;
  border: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.woocommerce-info.woocommerce-info {
  background: var(--myc-white) !important;
  border-color: var(--myc-line) !important;
  color: var(--myc-ink) !important;
}
.woocommerce-info.woocommerce-info a { color: var(--myc-ink) !important; text-decoration: underline !important; }

.woocommerce-error.woocommerce-error {
  background: var(--myc-error-bg) !important;
  border-color: var(--myc-error-border) !important;
  color: var(--myc-error-text) !important;
}
.woocommerce-error.woocommerce-error a { color: var(--myc-error-text) !important; text-decoration: underline !important; }

/* Notices as toasts (assets/js/wc-toasts.js): fixed stack, each one leaves after 5 seconds. */
.myc-toasts { position: fixed; z-index: 10000; top: 96px; right: 16px; width: min(420px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.myc-toast { position: relative; pointer-events: auto; background: var(--myc-white); /* the notices' own backgrounds are translucent washes */ box-shadow: 0 8px 24px rgb(20 24 33 / .14); animation: myc-toast-in .3s ease both; transition: opacity .3s ease, transform .3s ease; }
.myc-toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.myc-toast > :first-child { margin: 0 !important; padding-right: 40px !important; }
.myc-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: var(--myc-ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
@keyframes myc-toast-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 767px) { .myc-toasts { top: auto; bottom: 88px; } }
@media (prefers-reduced-motion: reduce) { .myc-toast { animation: none; transition: none; } }

/* Full field styling (not just radius/border-color as before) -- background/color/font-size/
   padding values match both the checkout mocks and the already-live tokens.css palette (see
   docs/superpowers/specs/2026-07-27-checkout-page-redesign-design.md's color note). Global, not
   checkout-scoped: account login/register/edit-address forms use the exact same .form-row markup
   and benefit from the same consistent field look. select was missing from the original
   selector -- checkout's country/state dropdowns need the same treatment as text inputs. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border-radius: 0;
  border: 1.5px solid var(--myc-line);
  background: var(--myc-white);
  color: var(--myc-ink);
  font-size: 0.875rem;
  padding: 13px 14px;
}

/* Country/state ("Paese/regione"/"Provincia") are enhanced by the Select2 library -- the rule
   above still styles the real <select> per spec, but Select2 hides it (select2-hidden-accessible)
   and renders its own <span class="select2-selection"> in its place, with its own default look
   (white bg, 1px #aaa border, 4px radius, fixed 28px height) untouched by that rule. Confirmed live
   via document.styleSheets/computed style. height:auto (not Select2's fixed 28px) lets padding
   drive the box height the same way a real input's does, matching its size instead of looking
   visibly shorter next to it. */
.woocommerce form .form-row .select2-container--default .select2-selection--single {
  height: auto;
  border-radius: 0;
  border: 1.5px solid var(--myc-line);
  background: var(--myc-white);
}

.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--myc-ink);
  font-family: var(--myc-font-sans);
  font-size: 0.875rem;
  line-height: normal;
  padding: 13px 32px 13px 14px;
}

/* height:100% re-centers Select2's own arrow glyph (already positioned via top:50% internally)
   now that the container's height comes from padding instead of a fixed 28px. */
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
}

/* Loyalty-points plugin (WLR) notices -- e.g. "Complete your order and earn N punti..." and the
   redeem-your-points banner. Used on both the cart and checkout pages (moved here from cart.css,
   not duplicated, once checkout needed it too). A genuine third-party plugin (not in any local
   repo, unlike the myc plugin's volume-discount banner), so there's no getBannerState()-equivalent
   to hook and rebuild this from scratch -- reskinning WLR's own box in place is the correct move,
   especially since the redeem-points banner's "Clicca qui" link depends on WLR's own
   reward-catalog logic this theme has no visibility into. Confirmed live on staging: WLR sets its
   box's colors via style="" attributes (background-color, border, color), so beating them needs
   !important. */
.wlr-message-info {
  background: var(--myc-white) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--myc-ink) !important;
  font: 600 0.875rem var(--myc-font-sans) !important;
  padding: 12px 16px !important;
  margin: 5px 0 !important;
}
.wlr-message-info p { margin: 0 !important; color: inherit !important; }
.wlr-message-info a { color: var(--myc-ink) !important; font-weight: 700 !important; text-decoration: underline !important; }
.wlr-message-info i.wlr { color: var(--myc-ink) !important; font-size: 1.375rem !important; margin: 0 16px 0 0 !important; }

/*
 * My Account has no dedicated page template in this theme (still generic WooCommerce shortcode
 * output via page.php) and previously relied on .myc-content's own max-width, removed sitewide in
 * favor of per-page containers -- give it one here, same convention as checkout.css/blog.css
 * (1100px + the same 1023px/767px padding steps as checkout.css, since account's order
 * tables/address forms are closer in shape to checkout's content than blog's card grid).
 */
body.woocommerce-account .myc-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 48px 60px;
}

@media (max-width: 1023px) {
  body.woocommerce-account .myc-content {
    padding: 26px 28px 40px;
  }
}

@media (max-width: 767px) {
  body.woocommerce-account .myc-content {
    padding: 18px 16px 24px;
  }
}

/* ---------- v3 (formerly v3-reskin.css): WooCommerce type, controls, squared corners ---------- */
.woocommerce-products-header__title, .product_title {
  font-family: var(--myc-font-serif) !important; font-weight: 400 !important; letter-spacing: 0; line-height: 1.1; font-size: var(--myc-text-h2) !important;
}
.woocommerce-loop-product__title { font: 400 var(--myc-text-title) var(--myc-font-serif) !important; }
.woocommerce * { border-radius: 0 !important; box-shadow: none !important; }
/* Buttons: uppercase tracked, ink */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .wc-block-components-button, .single_add_to_cart_button, .checkout-button, .wc-proceed-to-checkout a {
  font: 500 0.78125rem/1 var(--myc-font-sans) !important; letter-spacing: var(--myc-ls-button) !important; text-transform: uppercase !important;
  padding: 16px 30px !important; background: var(--myc-ink) !important; color: #fff !important; border: 1px solid var(--myc-ink) !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .single_add_to_cart_button:hover { background: var(--myc-ink-2) !important; opacity: 1 !important; }
.woocommerce .button.alt, .woocommerce a.button.alt { background: var(--myc-ink) !important; }
/* v2 put navy text on the brass review submit; tokens.css maps both to ink. */
.woocommerce #respond input#submit { color: #fff !important; }
.woocommerce .button--outline { background: transparent !important; color: var(--myc-ink) !important; }
.woocommerce input.input-text, .woocommerce select, .woocommerce textarea {
  border: 1px solid var(--myc-line) !important; background: #fff !important; font: 400 1rem var(--myc-font-sans) !important; padding: 12px 14px !important; color: var(--myc-ink);
}
.woocommerce-breadcrumb, .woocommerce-result-count { font-size: 0.75rem !important; letter-spacing: var(--myc-ls-nav); text-transform: uppercase; color: var(--myc-grey-2); }
.woocommerce-breadcrumb a { color: var(--myc-grey-2); }
.woocommerce ul.products li.product { border: 0 !important; background: transparent !important; }
.woocommerce ul.products li.product img { aspect-ratio: 4/5; object-fit: cover; }
.star-rating { color: var(--myc-gold) !important; }
.woocommerce-product-details__short-description { font-weight: 400; line-height: 1.6; }
/* WC show-password eye is 22px: WCAG 2.5.8 wants a 24px target. */
.woocommerce form .show-password-input { min-width: 24px; min-height: 24px; }

/* Bottoni social di Nextend (nsl/woocommerce/*.php: accesso, registrazione, checkout): bianchi e uguali, il colore solo nel logo, qualunque skin sia scelta in Nextend */
.auth-social { margin-top: 8px; }
.auth-or { display: flex; align-items: center; gap: 16px; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--myc-grey-2); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: 1px solid var(--myc-line); }
.auth-social div.nsl-container { display: block; margin-top: 16px; }
/* .nsl-container-block in più: Nextend stampa il suo CSS dopo il tema, e con la sua stessa specificità ("inline-grid") i bottoni si stringevano sul testo */
.auth-social div.nsl-container.nsl-container-block .nsl-container-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; padding: 0; }
.auth-social div.nsl-container .nsl-container-buttons a { margin: 0; width: 100%; max-width: none; text-decoration: none; }
.auth-social div.nsl-container .nsl-button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid #CFCAC1; border-radius: 0; box-shadow: none; background: #FFFFFF !important; color: var(--myc-ink); transition: border-color 0.2s; }
.auth-social div.nsl-container a:hover .nsl-button, .auth-social div.nsl-container a:focus-visible .nsl-button { border-color: var(--myc-ink); }
.auth-social div.nsl-container .nsl-button-svg-container { position: absolute; left: 16px; top: 0; bottom: 0; padding: 0; }
.auth-social div.nsl-container .nsl-button svg { width: 22px; height: 22px; }
.auth-social div.nsl-container .nsl-button-apple svg { width: auto; height: 34px; }
.auth-social div.nsl-container .nsl-button-apple svg rect { fill: transparent; }
.auth-social div.nsl-container .nsl-button-apple svg path { fill: #000000; }
.auth-social div.nsl-container .nsl-button-facebook svg path:first-child { fill: #1877F2; }
.auth-social div.nsl-container .nsl-button div.nsl-button-label-container { margin: 0; padding: 0 48px; font-family: var(--myc-font-sans); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: var(--myc-ink); }
.auth-social div.nsl-container .nsl-button-label-container b { font-weight: 500; }
/* Checkout: affiancati come Apple Pay / Google Pay, a capo quando non ci stanno (196px = logo + "Continua con Facebook" a 0.875rem) */
.auth-social--before { margin: 0 0 28px; }
.auth-social--before div.nsl-container { margin: 0 0 16px; }
.auth-social--before div.nsl-container.nsl-container-block .nsl-container-buttons { display: flex; flex-wrap: wrap; }
.auth-social--before div.nsl-container .nsl-container-buttons a { flex: 1 1 196px; width: auto; }
.auth-social--before div.nsl-container .nsl-button { gap: 10px; padding: 0 12px; }
.auth-social--before div.nsl-container .nsl-button-svg-container { position: static; }
.auth-social--before div.nsl-container .nsl-button div.nsl-button-label-container { flex: 0 1 auto; padding: 0; font-size: 0.875rem; }
/* Dati e password (nsl/woocommerce/edit-account-before.php): the whole first row of the form grid, a line under it. */
.f-grid > .auth-social--account { grid-column: 1 / -1; margin: 0 0 6px; padding-bottom: 20px; border-bottom: 1px solid var(--myc-line); }
.auth-social--account div.nsl-container { margin: 12px 0 0; }

/* Smart Coupons' "available coupons" accordion (cart, checkout): the plugin's own navy/red ticket
   colours (--sc-color1..3, its settings) and Tailwind-ish look, redrawn with the theme's tokens. */
#coupons_list { --sc-color1: var(--myc-paper); --sc-color2: var(--myc-ink); --sc-color3: var(--myc-ink); margin: 20px 0 24px !important; border: 1px solid var(--myc-line) !important; border-radius: 0; background: var(--myc-white); }
#coupons_list .sc-accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border: 0 !important; background: transparent !important; cursor: pointer; }
#coupons_list .sc-accordion-title { font: 500 0.75rem var(--myc-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--myc-ink); }
#coupons_list .sc-arrow-icon { width: 16px; height: 16px; color: var(--myc-grey-2); }
#coupons_list .sc-accordion-content { border: 0 !important; background: transparent !important; }
#coupons_list .sc-accordion-content.open { padding: 0 20px 18px; }
#coupons_list #sc-cc, #coupons_list .sc-coupons-list { margin: 0; padding: 0; }
#coupons_list .sc-coupons-list { display: flex; flex-wrap: wrap; gap: 12px; }
#coupons_list .sc-coupon { --sc-color1: var(--myc-paper); --sc-color2: var(--myc-ink); --sc-color3: var(--myc-ink); margin: 0; padding: 12px 18px 12px 14px; border: 1px dashed var(--myc-grey-3) !important; border-radius: 0; background: var(--myc-paper) !important; color: var(--myc-ink) !important; font-family: var(--myc-font-sans); cursor: pointer; transform: none !important; transition: border-color .15s, background-color .15s; }
#coupons_list .sc-coupon:hover { border-color: var(--myc-ink) !important; background: var(--myc-white) !important; }
#coupons_list .sc-coupon svg { width: 22px; height: 22px; color: var(--myc-blue) !important; }
#coupons_list .sc-coupon .uppercase:not(.font-mono) { font: 500 0.9375rem/1.2 var(--myc-font-sans); letter-spacing: 0; text-transform: none; color: var(--myc-ink) !important; }
#coupons_list .sc-coupon .uppercase:not(.font-mono) * { color: inherit !important; font: inherit; }
#coupons_list .sc-coupon .font-mono { margin-top: 5px; font: 400 0.75rem/1 var(--myc-font-sans); letter-spacing: .1em; color: var(--myc-grey-2) !important; }
#coupons_list .sc-coupon .font-mono + * { margin-top: 4px; font: 400 0.75rem/1.2 var(--myc-font-sans); color: var(--myc-grey-2) !important; }
/* In the cart summary: no box, one coupon per row with an "Applica" cue (--myc-apply, cart-totals.php). */
.myc-cart-totals-coupons:empty { display: none; }
.myc-cart-totals-coupons #coupons_list { margin: 18px 0 0 !important; padding: 16px 0 0; border: 0 !important; border-top: 1px solid var(--myc-line) !important; background: transparent; }
.myc-cart-totals-coupons #coupons_list .sc-accordion-header { padding: 0 0 12px; }
.myc-cart-totals-coupons #coupons_list .sc-accordion-content.open { max-height: none !important; overflow: visible !important; margin: 0 0 20px; padding: 0 !important; }
.myc-cart-totals-coupons #coupons_list #sc-cc, .myc-cart-totals-coupons #coupons_list .sc-coupons-list { max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
.myc-cart-totals-coupons #coupons_list .sc-coupons-list { flex-direction: column; align-items: stretch !important; gap: 8px; }
.myc-cart-totals-coupons #coupons_list .sc-coupon { position: relative; width: auto !important; max-width: none !important; padding: 12px 92px 12px 14px; background: var(--myc-white) !important; }
.myc-cart-totals-coupons #coupons_list .sc-coupon:hover { background: var(--myc-paper) !important; }
.myc-cart-totals-coupons #coupons_list .sc-coupon::after { content: var(--myc-apply); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 0.6875rem var(--myc-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--myc-ink); text-decoration: underline; text-underline-offset: 3px; }