/*
Theme Name: ZeroMiglia
Theme URI: https://zeromiglia.errediweb.com/
Author: ZeroMiglia
Author URI: https://zeromiglia.errediweb.com/
Description: Tema vintage "Album di Famiglia" per WooCommerce. Snapshot del design Next.js (palette sepia/marine/rust/gold, font Italiana + Cormorant + Pinyon, paper grain globale, primitive .frame-polaroid / .frame-oval / .frame-arch). Pensato per uso locale e potenziale hosting Aruba.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.7
License: Proprietary
License URI: -
Text Domain: zeromiglia
Tags: woocommerce, vintage, italian, custom
*/

/* =========================================================================
   1. Font self-host (no Google Fonts CDN — GDPR-safe)
   ========================================================================= */

@font-face {
  font-family: "Italiana";
  src: url("assets/fonts/italiana-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pinyon Script";
  src: url("assets/fonts/pinyon-script-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   2. Design tokens — Album di Famiglia palette (mirrors src/styles/globals.css)
   ========================================================================= */

:root {
  --color-sepia-bg: #f2e8d5;
  --color-sepia-warm: #e8dab8;
  --color-sepia-paper: #fdf9eb;
  --color-sepia-deep: #3c2e1f;
  --color-sepia-medium: #6d5840;
  --color-marine-faded: #6a8ca0;
  --color-marine-deep: #2e4e63;
  --color-rust: #9e4f37; /* darkened from #a4533a: hits 4.77:1 on --color-sepia-bg (AA at <24px); The Contrast-Floor Rule */
  --color-gold: #b89556;
  --color-gold-deep: #6b5118;

  --font-italiana: "Italiana", Georgia, serif;
  --font-cormorant: "Cormorant Garamond", Georgia, serif;
  --font-pinyon: "Pinyon Script", "Brush Script MT", cursive;

  /* Fluid heading ramp (Italiana display) — one step per role */
  --text-hero: clamp(3.5rem, 10vw, 8rem);      /* display: one per page */
  --text-section: clamp(2.5rem, 6vw, 4.5rem);  /* section headline */
  --text-display: clamp(2rem, 4.5vw, 3.25rem); /* large heading */
  --text-heading: clamp(1.75rem, 3.5vw, 2.5rem); /* heading */
  --text-product: clamp(1.5rem, 3vw, 2.25rem); /* title / product */
  --text-script: clamp(2rem, 5vw, 4rem);       /* Pinyon script accent */

  /* Fixed role scale (body & below) */
  --fs-h3: 1.75rem;
  --fs-h4: 1.5rem;
  --fs-subhead: 1.375rem;
  --fs-lead: 1.25rem;
  --fs-body-lg: 1.125rem;   /* DESIGN.md body */
  --fs-body: 1rem;
  --fs-note: 0.875rem;
  --fs-sm: 0.8125rem;
  --fs-caption: 0.75rem;
  --fs-label: 0.6875rem;    /* DESIGN.md label / spaced caps */
  --text-micro: var(--fs-caption); /* legacy alias */

  /* WooCommerce 10 form tokens. `woocommerce.css` styles its inputs through
     `.woocommerce form .form-row .input-text` (specificity 0,3,1), which
     out-ranks any sensible theme selector — so every account, cart and
     checkout field was silently rendering as stock WooCommerce: pure #fff,
     4px radius, near-black border. Setting the variables it reads themes all
     of them at once, with no !important and no specificity race.
     `#fff` and rounded corners both break DESIGN.md outright. */
  --wc-form-color-background: rgba(253, 249, 235, 0.6);
  --wc-form-border-color: rgba(60, 46, 31, 0.2);
  --wc-form-border-width: 1px;
  --wc-form-border-radius: 0;

  color-scheme: light;
}

/* =========================================================================
   3. Reset + base
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--color-sepia-bg);
  color: var(--color-sepia-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  position: relative;
  min-height: 100dvh;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.85rem 1.5rem;
  background: var(--color-sepia-deep);
  color: var(--color-sepia-paper);
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-sepia-paper);
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

#primary {
  scroll-margin-top: 8rem;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease;
}

a:hover {
  color: var(--color-rust);
}

*:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-italiana);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-sepia-deep);
  margin: 0 0 0.5em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--text-section);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
h3 {
  font-size: var(--text-product);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* =========================================================================
   4. Paper grain + light leaks — site-wide, hidden in wp-admin
   ========================================================================= */

body:not(.wp-admin)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

body:not(.wp-admin)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at top left, rgba(184, 149, 86, 0.18), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(158, 79, 55, 0.12), transparent 40%);
}

body:not(.wp-admin) > *:not(.skip-link):not(.zm-consent) {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .frame-polaroid,
  .diario-card,
  .bottega-card,
  .bottega-card-thumb img,
  .product-card,
  .product-card-thumb img {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================================
   5. Layout helpers
   ========================================================================= */

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 4rem 0;
}

.container.section {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.section-tight {
  padding: 2rem 0;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   6. Typography utilities (Tailwind 4 analogues)
   ========================================================================= */

.font-display {
  font-family: var(--font-italiana);
}
.font-body {
  font-family: var(--font-cormorant);
}
.font-script {
  font-family: var(--font-pinyon);
}

.text-hero {
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.text-section {
  font-size: var(--text-section);
  line-height: 1.05;
}
.text-product {
  font-size: var(--text-product);
  line-height: 1.15;
}
.text-script {
  font-size: var(--text-script);
  line-height: 1;
}
.text-micro {
  font-size: var(--text-micro);
  line-height: 1.4;
  letter-spacing: 0.32em;
}

.text-marine-deep {
  color: var(--color-marine-deep);
}
.text-marine-faded {
  color: var(--color-marine-faded);
}
.text-rust {
  color: var(--color-rust);
}

/* Link "vedi tutto": CTA d'archivio in ruggine, non manoscritto — la Pinyon
   resta un accento emotivo, mai un'etichetta cliccabile (The Handwriting-Is-Emotion Rule). */
.more-link {
  display: inline-block;
  font-family: var(--font-italiana);
  font-size: var(--fs-body-lg);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-rust);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15em;
  transition: border-color 200ms ease;
}
.more-link:hover,
.more-link:focus-visible {
  border-bottom-color: var(--color-rust);
}
.text-gold {
  color: var(--color-gold);
}
.text-gold-deep {
  color: var(--color-gold-deep);
}
.text-sepia-medium {
  color: var(--color-sepia-medium);
}

.bg-sepia-bg {
  background-color: var(--color-sepia-bg);
}
.bg-sepia-warm {
  background-color: var(--color-sepia-warm);
}
.bg-sepia-paper {
  background-color: var(--color-sepia-paper);
}

/* =========================================================================
   7. Vintage primitives — ported from src/styles/globals.css
   ========================================================================= */

.label-vintage {
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-sepia-medium);
}

.sepia-photo {
  filter: sepia(0.55) contrast(0.92) saturate(0.85) brightness(1.02);
}

.frame-polaroid {
  position: relative;
  background: var(--color-sepia-paper);
  padding: 0.875rem 0.875rem 3.75rem 0.875rem;
  box-shadow:
    0 4px 12px -2px rgba(60, 46, 31, 0.25),
    0 1px 3px rgba(60, 46, 31, 0.15);
  display: block;
  text-decoration: none !important;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
}

a.frame-polaroid:hover {
  transform: translateY(-3px) rotate(0) !important;
  box-shadow:
    0 10px 24px -4px rgba(60, 46, 31, 0.35),
    0 2px 6px rgba(60, 46, 31, 0.2);
}

.frame-polaroid img {
  display: block;
  width: 100%;
  height: auto;
}

.frame-polaroid .frame-polaroid-caption {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-italiana);
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
  letter-spacing: 0.04em;
}

.frame-oval {
  border-radius: 50%;
  border: 8px solid var(--color-sepia-paper);
  box-shadow:
    inset 0 0 0 1px var(--color-gold),
    0 4px 18px -2px rgba(60, 46, 31, 0.3);
  overflow: hidden;
}

.frame-arch {
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border: 6px solid var(--color-sepia-paper);
  box-shadow: 0 4px 16px -2px rgba(60, 46, 31, 0.25);
  overflow: hidden;
}

.rotate-l1 {
  transform: rotate(-1.5deg);
}
.rotate-l2 {
  transform: rotate(-3deg);
}
.rotate-r1 {
  transform: rotate(1.5deg);
}
.rotate-r2 {
  transform: rotate(2.5deg);
}

.ornament::before,
.ornament::after {
  content: "✦";
  padding: 0 1rem;
  font-size: 0.8em;
  opacity: 0.8;
  color: var(--color-gold);
}

.vintage-divider {
  text-align: center;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 3rem 0;
}

.vintage-divider::before,
.vintage-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
}

.vintage-label {
  border: 1px solid var(--color-sepia-deep);
  padding: 0.75rem 1.5rem;
  text-align: center;
  background: rgba(253, 249, 235, 0.5);
  position: relative;
  display: inline-block;
  font-family: var(--font-italiana);
  letter-spacing: 0.1em;
}

.vintage-label::before,
.vintage-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-sepia-deep);
  border-radius: 50%;
  transform: translateY(-50%);
}

.vintage-label::before {
  left: -0.25rem;
}
.vintage-label::after {
  right: -0.25rem;
}

.chapter-heading {
  text-align: center;
  margin: 3em 0 1.5em;
}

.chapter-heading-number {
  font-family: var(--font-italiana);
  font-size: var(--fs-caption);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  display: block;
  margin-bottom: 0.4em;
}

.chapter-heading-title {
  font-family: var(--font-italiana);
  font-size: var(--text-section);
  color: var(--color-sepia-deep);
  line-height: 1.2;
}

/* =========================================================================
   8. Header / Navigation
   ========================================================================= */

.site-header {
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(60, 46, 31, 0.12);
  background: rgba(253, 249, 235, 0.55);
  backdrop-filter: blur(2px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 900px) {
  .site-header .site-header-inner {
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
  }
  /* Explicit placement so the top bar stays identical open or closed:
     brand left, toggle + cart pinned right, nav panel on its own row. */
  .site-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .site-header .nav-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
  }
  .site-cart-link {
    grid-column: 3;
    grid-row: 1;
  }
  /* Collapse the nav into an in-flow full-row panel. Kept in normal flow
     (grid-column:1/-1, second row) rather than absolutely positioned: an
     abspos child of a grid container is trapped in its single grid cell by
     the grid-area containing-block rule. In-flow the panel pushes the page
     down when open — robust, no z-index/stacking hacks. */
  .site-header .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    display: none;
    border-top: 1px solid rgba(60, 46, 31, 0.12);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  .site-header .site-nav.is-open {
    display: block;
  }
  .site-header .site-nav ul {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .site-header .site-nav a {
    display: block;
    text-align: center;
    padding: 0.9rem 1.5rem;
  }
  /* Underline animation reads odd on stacked links; drop it here. */
  .site-header .site-nav a::after {
    display: none;
  }
}

.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-sepia-deep);
  line-height: 1;
  min-height: 44px;
}

.site-brand-logo {
  display: block;
  width: 140px;
  height: auto;
  transition: opacity 200ms;
}

.site-brand:hover .site-brand-logo {
  opacity: 0.75;
}

@media (max-width: 600px) {
  .site-brand-logo {
    width: 110px;
  }
}

.site-nav {
  justify-self: center;
}

/* Hamburger toggle — hidden on desktop, revealed before the nav wraps. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-sepia-deep);
  cursor: pointer;
}

.nav-toggle:hover {
  color: var(--color-rust);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before {
  position: absolute;
  top: -7px;
}

.nav-toggle-bars::after {
  position: absolute;
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.site-nav a {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--color-sepia-deep);
  padding: 0.5rem 0;
  position: relative;
  transition: color 200ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--color-rust);
  transition:
    left 200ms ease,
    right 200ms ease;
}

.site-nav a:hover {
  color: var(--color-rust);
}

.site-nav a:hover::after {
  left: 0;
  right: 0;
}

/* Pagina corrente: filetto persistente + ruggine (wp_nav_menu marca il <li>). */
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav [aria-current="page"] {
  color: var(--color-rust);
}
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after,
.site-nav [aria-current="page"]::after {
  left: 0;
  right: 0;
}

.site-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-sepia-deep);
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  transition:
    color 200ms,
    border-color 200ms;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

.site-cart-link:hover {
  color: var(--color-rust);
  border-color: rgba(158, 79, 55, 0.25);
}

.site-cart-link .icon-cart {
  flex-shrink: 0;
}

.site-cart-count {
  font-family: var(--font-italiana);
  font-size: var(--fs-note);
  letter-spacing: 0.04em;
  color: var(--color-rust);
}

/* =========================================================================
   9. Footer
   ========================================================================= */

/* =========================================================================
   Footer — editorial layout (centered, diary-feeling, low density)
   ========================================================================= */

.site-footer {
  padding: 3rem 0 1.5rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(60, 46, 31, 0.12);
  color: var(--color-sepia-medium);
  background: linear-gradient(to bottom, transparent, rgba(232, 218, 184, 0.35));
}

/* — Brand mark — */
.site-footer-mark {
  margin-bottom: 1.5rem;
}

.site-footer-mark .label-vintage {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-sepia-medium);
}

.site-footer-brand {
  font-family: var(--font-italiana);
  font-size: var(--text-section);
  line-height: 1;
  color: var(--color-sepia-deep);
  margin: 0;
  letter-spacing: 0.02em;
}

.site-footer-script {
  font-family: var(--font-pinyon);
  color: var(--color-rust);
  font-size: var(--text-product);
  margin: 0.25rem 0 0;
}

/* — Contact essentials — */
.site-footer-contact {
  max-width: 36rem;
  margin: 0 auto 1.5rem;
}

.site-footer-address {
  font-family: var(--font-cormorant);
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-sepia-deep);
  margin: 0 0 1.5rem;
}

.site-footer-address strong {
  font-weight: 600;
  color: var(--color-sepia-deep);
}

.site-footer-channels {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  margin: 0 0 1rem;
  color: var(--color-sepia-deep);
}

.site-footer-channels a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-sepia-deep);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition:
    border-color 200ms,
    color 200ms;
}

.site-footer-channels a:hover {
  color: var(--color-rust);
  border-bottom-color: var(--color-rust);
}

.site-footer-channels .sep {
  color: var(--color-gold);
  margin: 0 0.6rem;
}

.site-footer-hours {
  font-size: var(--fs-label) !important;
  color: var(--color-sepia-medium);
  margin: 0 0 1.5rem !important;
}

.site-footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.85rem;
  justify-content: center;
}

.site-footer-social li {
  margin: 0;
}

.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(60, 46, 31, 0.15);
  color: var(--color-sepia-deep);
  text-decoration: none;
  transition: all 200ms;
  border-radius: 50%;
}

.site-footer-social a:hover {
  color: var(--color-sepia-paper);
  border-color: var(--color-rust);
  background: var(--color-rust);
}

/* — Nav row inline — */
.site-footer-nav-row {
  margin-bottom: 1.5rem;
}

.site-footer-nav-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 48rem;
  margin: 0 auto;
}

.site-footer-nav-groups .label-vintage {
  margin: 0 0 0.5rem;
}

.site-footer-nav-row .site-footer-nav-groups ul {
  column-gap: 1.5rem;
  row-gap: 0;
}

.site-footer-nav-row ul,
.site-footer-nav-inline {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer-nav-row li,
.site-footer-nav-inline li {
  margin: 0 !important;
}

.site-footer-nav-row a,
.site-footer-nav-inline a {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-caption);
  color: var(--color-sepia-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition:
    color 200ms,
    border-color 200ms;
}

.site-footer-nav-row a:hover,
.site-footer-nav-inline a:hover {
  color: var(--color-rust);
  border-bottom-color: var(--color-rust);
}

/* — Legal bar (discreet bottom strip) — */
.site-footer-legal-bar {
  background: rgba(60, 46, 31, 0.05);
  border-top: 1px solid rgba(60, 46, 31, 0.08);
  border-bottom: 1px solid rgba(60, 46, 31, 0.08);
  padding: 1.25rem 0;
}

.site-footer-legal-bar p {
  font-family: var(--font-cormorant);
  font-size: var(--fs-sm);
  color: var(--color-sepia-medium);
  margin: 0;
  line-height: 1.6;
}

.site-footer-legal-bar strong {
  font-family: var(--font-italiana);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-label);
  color: var(--color-sepia-medium);
  margin-right: 0.35rem;
}

.site-footer-legal-bar .sep {
  color: var(--color-gold);
  margin: 0 0.75rem;
  opacity: 0.6;
}

.site-footer-legal-bar a {
  color: var(--color-sepia-medium);
  text-decoration: none;
  border-bottom: 1px dotted rgba(109, 88, 64, 0.4);
}

.site-footer-legal-bar a:hover {
  color: var(--color-rust);
}

/* — Bottom copyright — */
.site-footer-bottom {
  padding-top: 1.5rem;
}

.site-footer-bottom .copyright {
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-sepia-medium);
  margin: 0;
}

.site-footer-cookie-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 768px) {
  .site-footer-brand {
    font-size: var(--text-display);
    overflow-wrap: anywhere;
  }

  .site-footer-legal-bar p span {
    display: inline-block;
    margin: 0.15rem 0.3rem;
  }
  .site-footer-legal-bar .sep {
    display: none;
  }
}

/* =========================================================================
   10. Buttons
   ========================================================================= */

.btn,
button.btn,
.button {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: 1px solid var(--color-sepia-deep);
  background: transparent;
  color: var(--color-sepia-deep);
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 200ms,
    color 200ms,
    transform 120ms ease,
    box-shadow 200ms ease;
}

.btn:hover,
button.btn:hover,
.button:hover {
  background: var(--color-sepia-deep);
  color: var(--color-sepia-paper);
}

.btn:active,
button.btn:active,
.button:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 1px 2px rgba(60, 46, 31, 0.25);
}

.btn-rust {
  border-color: var(--color-rust);
  color: var(--color-rust);
}

.btn-rust:hover {
  background: var(--color-rust);
  color: var(--color-sepia-paper);
}

/* =========================================================================
   11. WooCommerce overrides
   ========================================================================= */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-italiana);
  font-size: var(--text-product);
  color: var(--color-sepia-deep);
  padding: 1rem 0 0.5rem;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-italiana);
  color: var(--color-rust);
  font-size: var(--fs-body-lg);
  letter-spacing: 0.04em;
}

.woocommerce ul.products li.product img {
  margin: 0 auto;
}

.woocommerce-product-gallery img {
  filter: sepia(0.25) contrast(0.96) saturate(0.9);
}

.woocommerce div.product .product_title {
  font-family: var(--font-italiana);
  font-size: var(--text-section);
  color: var(--color-sepia-deep);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-italiana);
  color: var(--color-rust);
  font-size: var(--fs-h4);
}

/* Tre registri, non uno. Prima erano tutti e tre bordo oro su carta: un
   "Indirizzo salvato" e un "Errore: password non corretta" avevano lo stesso
   aspetto, e il cliente non distingueva riuscito da fallito. La palette ha già
   i tre toni — oro per la conferma, marino per l'informazione, ruggine per
   l'errore — e resta tutto su carta invecchiata.
   Il colore non è mai l'unico segnale: WooCommerce scrive sempre il testo
   ("Errore:", "Il tuo ordine…") e ogni tipo porta il proprio glifo. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--color-sepia-paper) !important;
  color: var(--color-sepia-deep) !important;
  position: relative;
}

.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: absolute;
  top: 0.5rem;
  right: 0.85rem;
}

/* Le icone di WooCommerce arrivano nei suoi colori: verde lime #8fae1b sul
   successo, azzurro #1e85be sull'informazione. Sono maschere SVG che seguono
   `color`, quindi basta riportarle sul tono del rispettivo registro. */
.woocommerce-message {
  border-top-color: var(--color-gold) !important;
}

.woocommerce-message::before {
  color: var(--color-gold-deep) !important;
}

.woocommerce-message::after {
  content: "✦ fatto";
  color: var(--color-gold-deep);
}

.woocommerce-info {
  border-top-color: var(--color-marine-faded) !important;
}

.woocommerce-info::before {
  color: var(--color-marine-deep) !important;
}

.woocommerce-info::after {
  content: "nota";
  color: var(--color-marine-deep);
}

.woocommerce-error {
  border-top-color: var(--color-rust) !important;
}

.woocommerce-error::before {
  color: var(--color-rust) !important;
}

.woocommerce-error::after {
  content: "attenzione";
  color: var(--color-rust);
}

.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive {
  background: var(--color-sepia-paper);
  border-color: rgba(60, 46, 31, 0.15);
}

.woocommerce-checkout #payment {
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(60, 46, 31, 0.15);
}

/* Buttons override */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--color-rust) !important;
  color: var(--color-sepia-paper) !important;
  border-radius: 0 !important;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-sm);
  padding: 0.85rem 1.75rem;
}

/* Empty-cart state: the cart page `.woocommerce` is a 2-col grid (table +
   totals), which drops the notice into the right column and the return
   button into the left. Span both across the full grid and center them
   into one calm stack. */
.wc-empty-cart-message,
.woocommerce .return-to-shop {
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
}
.wc-empty-cart-message {
  max-width: 32rem;
  margin: 3rem auto 0;
}
.woocommerce .cart-empty.woocommerce-info {
  width: auto;
  margin: 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
}
.woocommerce .cart-empty.woocommerce-info::before {
  display: none;
}
.woocommerce .return-to-shop {
  margin-top: 1.5rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-sepia-deep) !important;
}

/* =========================================================================
   12. Product card (loop) — vintage card without polaroid distortion
   ========================================================================= */

.product-card {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.08);
  padding: 1.5rem;
  position: relative;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px -8px rgba(60, 46, 31, 0.25),
    0 2px 4px rgba(60, 46, 31, 0.1);
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.25);
  pointer-events: none;
}

.product-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card-thumb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--color-sepia-bg);
}

.product-card-thumb img,
.product-card-thumb .attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: 100% !important;
  max-width: 78% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0.5rem;
  transition: transform 350ms ease;
}

.product-card:hover .product-card-thumb img {
  transform: scale(1.04);
}

.product-card-body {
  text-align: center;
}

.product-card-body .woocommerce-loop-product__title {
  font-family: var(--font-italiana) !important;
  font-size: var(--fs-subhead) !important;
  color: var(--color-sepia-deep) !important;
  line-height: 1.2 !important;
  padding: 0 0 0.5rem !important;
  margin: 0 !important;
  /* Normalize legacy CAPS titles (CONFEZIONI REGALO → Confezioni regalo). */
  text-transform: lowercase;
}

.product-card-body .woocommerce-loop-product__title::first-letter {
  text-transform: uppercase;
}

.product-card-body .price {
  font-family: var(--font-italiana) !important;
  color: var(--color-rust) !important;
  font-size: var(--fs-body-lg) !important;
  letter-spacing: 0.04em !important;
}

/* Disponibilità (.stock di WooCommerce) — vale sia in scheda prodotto sia
   nella card della griglia. Gold per le scorte basse, rust per l'esaurito:
   il verde/rosso di default WooCommerce è fuori palette. !important perché
   WC qualifica con `.woocommerce div.product .stock`. */
.stock {
  font-family: var(--font-italiana) !important;
  font-size: var(--fs-label) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0.5rem 0 0 !important;
}

.stock.in-stock,
.stock.available-on-backorder {
  color: var(--color-gold-deep) !important;
}

.stock.out-of-stock {
  color: var(--color-rust) !important;
}

/* Nella card la spaziatura la dà già il `gap` del body. */
.product-card-body .stock {
  margin: 0 !important;
  line-height: var(--stock-line);
}

/* Il badge compare solo su alcune card, ma `.product-card-body` ancora i figli
   in basso (justify-content: flex-end): senza riservare la riga, i titoli delle
   card affiancate si disallineerebbero. Lo spacer sparisce dove il badge c'è. */
.product-card-body {
  --stock-line: 1.17rem;
}

.product-card-body::after {
  content: "";
  display: block;
  height: var(--stock-line);
}

.product-card-body:has(.stock)::after {
  content: none;
}

.product-card .button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 1rem;
  text-align: center;
}

/* =========================================================================
   13. Single product layout
   ========================================================================= */

.product-single {
  max-width: 72rem;
  margin: 0 auto;
  gap: 3rem;
  align-items: start;
}

.product-single .product-gallery-wrap {
  background: var(--color-sepia-paper);
  padding: 1.5rem;
  border: 1px solid rgba(60, 46, 31, 0.08);
  position: relative;
}

.product-single .product-gallery-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.3);
  pointer-events: none;
}

.product-single .product-gallery-wrap img {
  filter: sepia(0.3) contrast(0.95) saturate(0.9);
}

.product-single .summary {
  width: 100% !important;
  float: none !important;
  padding: 1rem 0;
}

.product-single .product_title {
  font-family: var(--font-italiana) !important;
  font-size: var(--text-display) !important;
  line-height: 1.05 !important;
  color: var(--color-sepia-deep) !important;
  margin-bottom: 1rem !important;
  text-transform: lowercase;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.product-single .product_title::first-letter {
  text-transform: uppercase;
}

.product-single .related > h2,
.product-single .upsells > h2,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: var(--font-italiana);
  font-size: var(--text-heading);
  color: var(--color-sepia-deep);
  text-align: center;
  line-height: 1.15;
  margin: 4rem 0 2rem;
  position: relative;
  text-wrap: balance;
}

.product-single .related > h2::before,
.product-single .upsells > h2::before,
.woocommerce .related > h2::before,
.woocommerce .upsells > h2::before {
  content: "Dalla bottega";
  display: block;
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--color-gold-deep);
  margin-bottom: 0.65rem;
  font-weight: normal;
}

.product-single .related > h2::after,
.product-single .upsells > h2::after,
.woocommerce .related > h2::after,
.woocommerce .upsells > h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
}

.product-single .price {
  font-family: var(--font-italiana) !important;
  font-size: var(--fs-h3) !important;
  color: var(--color-rust) !important;
  margin-bottom: 1.5rem;
  display: inline-block;
}

.product-single .woocommerce-product-details__short-description {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--color-sepia-medium);
  margin-bottom: 1.5rem;
}

.product-single .product_meta {
  font-family: var(--font-italiana);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-sepia-medium);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(60, 46, 31, 0.1);
}

.product-single .product_meta > span {
  display: block;
  margin-bottom: 0.5rem;
}

.zm-purchase-assurances {
  display: grid;
  gap: 0.65rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid rgba(60, 46, 31, 0.12);
  border-bottom: 1px solid rgba(60, 46, 31, 0.12);
}

.zm-purchase-assurances > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.zm-purchase-assurances dt {
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.zm-purchase-assurances dd {
  margin: 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
}

.zm-purchase-assurances a {
  color: var(--color-rust);
  text-underline-offset: 0.2em;
}

@media (max-width: 768px) {
  .product-single {
    gap: 1.5rem;
  }

  .product-single .product-gallery-wrap {
    padding: 0.75rem;
  }

  .product-single .product-gallery-wrap .woocommerce-product-gallery {
    max-width: 18rem;
    margin-right: auto;
    margin-left: auto;
  }

  .product-single .summary {
    padding: 0;
  }
}

/* Tabs Woo (Description / Reviews) */
.woocommerce-tabs {
  margin-top: 4rem;
  border-top: 1px solid rgba(60, 46, 31, 0.15);
  padding-top: 2rem;
  clear: both;
}

.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs,
ul.wc-tabs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem !important;
  display: flex !important;
  gap: 2.5rem !important;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(60, 46, 31, 0.15);
}

.woocommerce-tabs ul.tabs li,
ul.wc-tabs li {
  list-style: none !important;
  list-style-type: none !important;
}

.woocommerce-tabs ul.tabs li::before,
ul.wc-tabs li::before {
  display: none !important;
  content: none !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
  display: none !important;
}

.woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-italiana);
  font-size: var(--fs-note);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.woocommerce-tabs ul.tabs li a {
  color: var(--color-sepia-medium) !important;
  text-decoration: none !important;
  padding: 0.75rem 0 !important;
  display: inline-block;
  border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-sepia-deep) !important;
  border-bottom-color: var(--color-gold) !important;
}

.woocommerce-tabs .panel h2 {
  display: none;
}

.woocommerce-tabs .panel {
  font-family: var(--font-cormorant);
  line-height: 1.7;
  color: var(--color-sepia-deep);
}

/* =========================================================================
   14. Cart / Checkout vintage touches
   ========================================================================= */

.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.15);
  border-collapse: collapse;
}

.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-caption);
  color: var(--color-sepia-medium);
  border-bottom: 1px solid rgba(184, 149, 86, 0.4);
}

/* =========================================================================
   15. Grain opacity bump (was barely visible at 0.12)
   ========================================================================= */

body:not(.wp-admin)::before {
  opacity: 0.18 !important;
}

/* =========================================================================
   16. Front-page hero trio
   ========================================================================= */

.hero-chapter {
  padding: 4rem 0 6rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-center {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 600px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-polaroid {
    max-width: 12rem;
    margin: 0 auto;
  }
}

.hero-polaroid {
  max-width: 14rem;
  width: 100%;
}

.hero-polaroid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

.hero-polaroid-left {
  justify-self: end;
  margin-top: -1rem;
}

.hero-polaroid-right {
  justify-self: start;
  margin-top: 2rem;
}

.hero-center {
  padding: 0 1rem;
}

.hero-script {
  margin-top: -0.5rem;
  margin-bottom: 2rem;
}

.hero-photo-center {
  max-width: 16rem;
  width: 100%;
  margin: 2rem auto 0;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-sepia-paper);
  box-shadow:
    0 8px 24px -4px rgba(60, 46, 31, 0.35),
    inset 0 0 0 1px var(--color-gold);
  aspect-ratio: 1 / 1;
}

.hero-photo-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-quote-block {
  max-width: 36rem;
  margin: 0 auto;
}

.hero-quote {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--color-marine-deep);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: var(--fs-body);
}

/* =========================================================================
   17. Home — fishing photograph, product selection and diary
   ========================================================================= */

.home-hero {
  position: relative;
  min-height: 38rem;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: var(--color-sepia-paper);
  overflow: hidden;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 16, 0.62);
  pointer-events: none;
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 48rem;
}

.home-hero-promise {
  max-width: 34rem;
  margin: 0 auto 1.5rem;
  font-family: var(--font-italiana);
  font-size: var(--fs-sm);
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-sepia-paper);
  text-shadow: 0 2px 8px rgba(36, 26, 16, 0.7);
}

.home-hero-headline {
  font-family: var(--font-italiana);
  font-size: var(--text-display);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--color-sepia-paper);
  letter-spacing: -0.005em;
  text-shadow: 0 2px 12px rgba(36, 26, 16, 0.55);
  text-wrap: balance;
}

.home-hero-script {
  font-size: var(--text-heading);
  color: var(--color-sepia-paper);
  margin: 0 0 1rem;
  text-shadow: 0 2px 8px rgba(36, 26, 16, 0.55);
}

.home-hero-description {
  margin: 0 0 2rem;
  font-size: var(--fs-body-lg);
  color: var(--color-sepia-paper);
}

.home-hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.btn-light {
  background: var(--color-sepia-paper);
  color: var(--color-sepia-deep);
  border-color: var(--color-sepia-paper);
}

.btn-light:hover {
  background: var(--color-gold);
  color: var(--color-sepia-deep);
  border-color: var(--color-gold);
}

.btn-light.btn-outline {
  background: transparent;
  color: var(--color-sepia-paper);
  border-color: var(--color-sepia-paper);
}

.btn-light.btn-outline:hover {
  background: var(--color-sepia-paper);
  color: var(--color-sepia-deep);
}

.home-hero-badge {
  display: block;
  margin: 0 auto;
  width: 88px;
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(36, 26, 16, 0.55));
}

@media (max-width: 600px) {
  .home-hero {
    min-height: 0;
    background-position: 65% center;
  }
  .home-hero-inner {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .home-hero-promise {
    margin-bottom: 1rem;
  }
  .home-hero-script {
    margin-bottom: 0.75rem;
  }
  .home-hero-actions {
    margin-bottom: 1.5rem;
  }
}

.home-intro {
  padding-top: 5rem;
  padding-bottom: 3rem;
}

.home-intro-title {
  font-size: var(--text-display);
  color: var(--color-sepia-deep);
  margin: 0 0 0.5rem;
}

.home-intro-body {
  max-width: 70ch;
  margin: 2rem auto 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: var(--color-sepia-medium);
}

.home-bottega .chapter-heading,
.home-diario .chapter-heading {
  margin: 0 0 2rem;
}

.home-bottega .chapter-heading .text-script {
  margin-bottom: 0;
}

.home-range-note,
.home-shipping-note {
  max-width: 55ch;
  margin: 1.5rem auto 0;
  color: var(--color-sepia-medium);
  font-size: var(--fs-body);
}

/* Keep the diary preview compact after the product selection. */
.diario-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 901px) {
  .diario-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .diario-grid {
    grid-template-columns: 1fr 1fr;
  }
  .diario-grid > .diario-card:nth-child(1) {
    grid-column: 1 / -1;
  }
  .diario-grid > .diario-card:nth-child(1) .diario-card-thumb {
    aspect-ratio: 21 / 9;
  }
}

@media (max-width: 600px) {
  .diario-grid {
    grid-template-columns: 1fr;
  }
  .home-diario .diario-card-link {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
  }
  .home-diario .diario-card-thumb {
    position: relative;
    aspect-ratio: auto;
  }
  .home-diario .diario-card-thumb img {
    position: absolute;
    inset: 0;
  }
  .home-diario .diario-card-title {
    font-size: var(--fs-lead);
  }
  .home-diario .diario-card-excerpt {
    display: none;
  }
}

.diario-card {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.1);
  overflow: hidden;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
  position: relative;
}

.diario-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.25);
  pointer-events: none;
  z-index: 1;
}

.diario-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(60, 46, 31, 0.28);
}

/* The link's outer focus ring is clipped by the card's overflow. */
.diario-card:focus-within {
  outline: 2px solid var(--color-rust);
  outline-offset: 3px;
}

.diario-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.diario-card-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-sepia-warm);
}

.diario-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.25) contrast(0.95) saturate(0.92);
}

.diario-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.diario-card-body .label-vintage {
  margin: 0 0 0.5rem;
}

.diario-card-title {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--color-sepia-deep);
  margin: 0 0 0.75rem;
}

.diario-card-excerpt {
  max-width: 70ch;
  color: var(--color-sepia-medium);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.home-empty-state {
  grid-column: 1 / -1;
  max-width: 40rem;
  margin: 0 auto;
  color: var(--color-sepia-medium);
  font-size: var(--fs-body-lg);
  text-align: center;
}

.diario-card-cta {
  display: inline-block;
  margin-top: auto;
  font-family: var(--font-italiana);
  color: var(--color-rust);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-caption);
}

/* Bottega */
.home-bottega {
  padding-top: 4rem;
}

.bottega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .bottega-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
}

@media (max-width: 600px) {
  .bottega-grid {
    grid-template-columns: 1fr;
  }
}

.bottega-card {
  position: relative;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.1);
  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
}

.bottega-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.25);
  pointer-events: none;
  z-index: 1;
}

.bottega-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(60, 46, 31, 0.28);
}

.bottega-card-link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.bottega-card-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-sepia-warm);
}

.bottega-card-thumb img {
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  object-fit: contain;
  transition: transform 400ms ease;
}

.bottega-card:hover .bottega-card-thumb img {
  transform: scale(1.04);
}

.bottega-card-body {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bottega-card-title {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--color-sepia-deep);
  margin: 0;
  text-wrap: balance;
}

.bottega-card-description {
  color: var(--color-sepia-medium);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0;
}

.bottega-card-price {
  font-family: var(--font-italiana);
  font-size: var(--fs-lead);
  color: var(--color-rust);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.bottega-card-price del {
  color: var(--color-sepia-medium);
  font-size: 0.85em;
  margin-right: 0.4rem;
}

.bottega-card-cta {
  display: inline-block;
  margin-top: auto;
  font-family: var(--font-italiana);
  color: var(--color-rust);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-caption);
  padding-top: 0.5rem;
}

@media (max-width: 600px) {
  .home-bottega {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .home-range-note,
  .home-shipping-note {
    margin-top: 0.75rem;
  }

  .bottega-card-thumb {
    aspect-ratio: 3 / 2;
  }

  .bottega-card-thumb img {
    padding: 0.75rem;
  }
}

/* =========================================================================
   18. Diario archive (magazine layout)
   ========================================================================= */

.diario-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

@media (max-width: 900px) {
  .diario-archive-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .diario-archive-grid {
    grid-template-columns: 1fr;
  }
}

/* Featured card spans full width on top */
.diario-archive-card.is-featured {
  grid-column: 1 / -1;
}

.diario-archive-card {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.1);
  overflow: hidden;
  position: relative;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
}

.diario-archive-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.25);
  pointer-events: none;
  z-index: 1;
}

.diario-archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(60, 46, 31, 0.28);
}

.diario-archive-link {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.diario-archive-card.is-featured .diario-archive-link {
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
}

@media (max-width: 768px) {
  .diario-archive-card.is-featured .diario-archive-link {
    grid-template-columns: 1fr;
  }
}

.diario-archive-thumb {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  filter: sepia(0.25) contrast(0.95) saturate(0.92);
}

.diario-archive-card.is-featured .diario-archive-thumb {
  aspect-ratio: 4 / 3;
  min-height: 22rem;
}

.diario-archive-body {
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.diario-archive-title {
  font-size: var(--text-product);
  color: var(--color-sepia-deep);
  line-height: 1.15;
  margin: 0.5rem 0 1rem;
}

.diario-archive-card.is-featured .diario-archive-title {
  font-size: var(--text-display);
}

.diario-archive-excerpt {
  color: var(--color-sepia-medium);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.diario-pagination {
  margin-top: 4rem;
  text-align: center;
}

.diario-pagination .nav-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-italiana);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--fs-note);
}

.diario-pagination .page-numbers {
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(60, 46, 31, 0.15);
  color: var(--color-sepia-deep);
  text-decoration: none;
}

.diario-pagination .page-numbers.current {
  border-color: var(--color-rust);
  color: var(--color-rust);
}

/* =========================================================================
   19. Single story (editorial)
   ========================================================================= */

.story-cover {
  height: 60vh;
  min-height: 22rem;
  background-size: cover;
  background-position: center;
  position: relative;
}

.story-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(60, 46, 31, 0.25) 0%,
    rgba(60, 46, 31, 0) 50%,
    var(--color-sepia-bg) 100%
  );
}

.story-article {
  padding: 3rem 0 5rem;
  margin-top: -3rem;
  position: relative;
  z-index: 2;
}

.story-header {
  margin-bottom: 3rem;
}

.story-header .label-vintage a {
  color: var(--color-sepia-medium);
  text-decoration: none;
}

.story-header .label-vintage a:hover {
  color: var(--color-rust);
}

.story-title {
  font-size: var(--text-section);
  line-height: 1.05;
  margin: 1rem 0;
}

.story-deck {
  font-size: var(--text-product);
  margin: 0 0 2rem;
}

.story-content {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--color-sepia-deep);
}

.story-content > p:first-of-type::first-letter {
  font-family: var(--font-italiana);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 0.05em 0.1em 0 0;
  color: var(--color-rust);
}

.story-content img {
  max-width: 100%;
  height: auto;
  margin: 2.5rem auto;
  display: block;
}

.story-content figure {
  margin: 3rem auto;
}

.story-content figure img {
  margin: 0 auto;
}

.story-content figcaption {
  font-family: var(--font-italiana);
  font-size: var(--fs-note);
  letter-spacing: 0.08em;
  color: var(--color-sepia-medium);
  text-align: center;
  margin-top: 0.75rem;
}

.story-footer {
  margin-top: 4rem;
}

.story-related {
  background: linear-gradient(to bottom, transparent, rgba(232, 218, 184, 0.25));
  padding-top: 5rem;
}

/* =========================================================================
   20. Shop archive — filter pills + sort dropdown vintage + uniform cards
   ========================================================================= */

.shop-filters {
  margin: 0 auto 2rem;
  text-align: center;
}

.shop-filter-pills {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.shop-filter-pills li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.shop-filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-caption);
  padding: 0.65rem 1.25rem;
  border: 1px solid rgba(60, 46, 31, 0.15);
  color: var(--color-sepia-deep);
  text-decoration: none;
  transition: all 200ms ease;
  background: rgba(253, 249, 235, 0.4);
}

.shop-filter-pill:hover {
  border-color: var(--color-rust);
  color: var(--color-rust);
}

.shop-filter-pill.is-active {
  background: var(--color-sepia-deep);
  color: var(--color-sepia-paper);
  border-color: var(--color-sepia-deep);
}

/* Sort dropdown — vintage style override. Kill default WC float:right that
   pushes the dropdown into the grid and clips the first row to 2 columns. */
.woocommerce-ordering {
  margin: 1rem 0 2rem !important;
  text-align: center;
  float: none !important;
  clear: both !important;
  display: block !important;
}

/* Kill WC default ::before/::after clearfix pseudo-elements that become
   grid items in our 3-col layout and shift the first row by one slot. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  min-height: 44px;
  max-width: 100%;
  font-family: var(--font-italiana) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-caption) !important;
  padding: 0.65rem 2.5rem 0.65rem 1.25rem !important;
  border: 1px solid rgba(60, 46, 31, 0.2) !important;
  background: rgba(253, 249, 235, 0.4) !important;
  color: var(--color-sepia-deep) !important;
  border-radius: 0 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236d5840' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
}

.woocommerce-result-count {
  font-family: var(--font-italiana);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-sepia-medium);
  text-align: center !important;
  float: none !important;
  margin-bottom: 1.5rem !important;
}

/* Uniform card heights via flex layout */
.woocommerce ul.products li.product.product-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.product-card-link {
  flex: 1;
  display: flex !important;
  flex-direction: column;
}

.product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 5rem;
}

/* Sale badge vintage style */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--color-rust) !important;
  color: var(--color-sepia-paper) !important;
  font-family: var(--font-italiana) !important;
  font-size: var(--fs-label) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  min-height: auto !important;
  padding: 0.4rem 0.85rem !important;
  min-width: auto !important;
  line-height: 1 !important;
  top: 1rem !important;
  right: 1rem !important;
  left: auto !important;
  font-weight: normal !important;
  box-shadow: 0 2px 6px rgba(60, 46, 31, 0.25);
}

/* Shop diario bridge */
.shop-diario-bridge {
  margin-top: 5rem;
  padding-top: 1rem;
}

.shop-diario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .shop-diario-grid {
    grid-template-columns: 1fr;
  }
}

.shop-diario-grid .diario-card-thumb {
  aspect-ratio: 16 / 10;
}

/* =========================================================================
   21. Static pages (contatti/faq/privacy/spedizioni/storia/termini)
   ========================================================================= */

.page-static {
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.page-static-header {
  margin-bottom: 3rem;
}

.page-static-title {
  font-size: var(--text-section);
  line-height: 1.05;
  color: var(--color-sepia-deep);
  margin: 0.5rem 0 0;
}

.page-static-content {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--color-sepia-deep);
}

.page-static-content > *:first-child {
  margin-top: 0;
}

/* Drop cap (used on storia) */
.page-static-content .drop-cap {
  font-family: var(--font-italiana);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  color: var(--color-rust);
}

/* Photo grid inside story/static pages (from MDX polaroid groups) */
.page-static-content .zm-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

@media (min-width: 768px) {
  .page-static-content .zm-photo-grid:has(> figure:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-static-content .zm-photo-grid .frame-polaroid {
  margin: 0;
}

.page-static-content .zm-photo-grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* Accordion (used on faq) — vintage <details> */
.zm-accordion {
  margin: 2rem 0;
}

.zm-accordion-item {
  border-bottom: 1px solid rgba(60, 46, 31, 0.12);
  padding: 1.25rem 0;
}

.zm-accordion-item[open] {
  background: rgba(253, 249, 235, 0.4);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin: 0 -1.25rem;
}

.zm-accordion-item summary {
  font-family: var(--font-italiana);
  font-size: var(--fs-lead);
  color: var(--color-sepia-deep);
  cursor: pointer;
  padding-right: 2rem;
  position: relative;
  list-style: none;
  line-height: 1.3;
  transition: color 200ms;
}

.zm-accordion-item summary::-webkit-details-marker {
  display: none;
}

.zm-accordion-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  color: var(--color-rust);
  transition: transform 250ms;
  line-height: 1;
}

.zm-accordion-item[open] summary::after {
  content: "−";
}

.zm-accordion-item summary:hover {
  color: var(--color-rust);
}

.zm-accordion-answer {
  padding-top: 1rem;
  color: var(--color-sepia-deep);
  font-family: var(--font-cormorant);
  line-height: 1.7;
}

.zm-accordion-answer p:first-child {
  margin-top: 0;
}
.zm-accordion-answer p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   22. My Account (WooCommerce) — sidebar nav + content layout
   ========================================================================= */

/* Break out of .container-narrow on account pages — needs full width. */
body.woocommerce-account .container-narrow {
  max-width: 72rem !important;
}

body.woocommerce-account .page-static-header {
  max-width: 36rem;
  margin: 0 auto;
}

/* Logged-in dashboard layout — sidebar nav + content. Scoped via :has()
   so it only fires when the navigation actually exists; otherwise the
   logged-out two-column form layout below is used instead. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
  }
}

/* Logged-out login + register two-column. `minmax(0, 1fr)` rather than `1fr`:
   a bare `1fr` floors at the content's min-content width, so the longer of the
   two column labels silently widens its track and the two frames come out
   unequal. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .u-columns,
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .col2-set {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 2.5rem !important;
  /* `start`, not `stretch`: the register column has two more fields than the
     login one, so equal heights can only be bought with a hole — first 129px
     of it below the login form, then 200px in its middle once the submit was
     pushed down. Two paper cards of honest height read as pasted prints, which
     is the album's own logic. */
  align-items: start !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .u-columns,
  .woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .col2-set {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Il motivo per cui il visitatore vede un form al posto della pagina che ha
   chiesto (endpoint account aperti da sloggato). */
.zm-login-reason {
  max-width: 44ch;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-family: var(--font-cormorant);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--color-sepia-medium);
}

.zm-register-why {
  margin: 0 0 1.5rem;
  font-family: var(--font-cormorant);
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
  line-height: 1.6;
}

.zm-register-password-note {
  margin: 0.75rem 0 1.25rem !important;
}

.zm-required-legend {
  margin: 0 auto 1.5rem;
  text-align: center;
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
}

.zm-required-legend .required {
  font-style: normal;
  color: var(--color-rust);
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 2.25rem 2rem !important;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 16px 32px -16px rgba(60, 46, 31, 0.22),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.woocommerce-account .u-column1::before,
.woocommerce-account .u-column2::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.3);
  pointer-events: none;
}

.woocommerce-account .u-column1 > *,
.woocommerce-account .u-column2 > * {
  position: relative;
  z-index: 1;
}

.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
  font-family: var(--font-italiana);
  font-size: var(--text-heading);
  color: var(--color-sepia-deep);
  text-align: center;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.2);
  line-height: 1.15;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
}

.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
  margin: 0 0 1rem !important;
}

/* Selector has to out-rank the `.form-row { margin: 0 0 1rem !important }`
   above. No `margin-top: auto` here: the columns size to their content now
   (see `align-items: start`), so there is no card bottom to push against. */
.woocommerce-account .woocommerce-form-login .form-row.zm-form-row-submit,
.woocommerce-account .woocommerce-form-register .form-row.zm-form-row-submit {
  margin: 0 !important;
  padding-top: 0.75rem;
}

.woocommerce-account .woocommerce-form-login .form-row.zm-form-row-checkbox,
.woocommerce-account .woocommerce-form-register .form-row.zm-form-row-checkbox {
  margin: 0 0 0.5rem !important;
}

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-ResetPassword .button {
  align-self: flex-start;
  min-height: 44px;
  padding: 0.85rem 1.85rem !important;
  background: var(--color-rust) !important;
  color: var(--color-sepia-paper) !important;
  border: 1px solid var(--color-rust) !important;
  font-family: var(--font-italiana) !important;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm) !important;
  cursor: pointer;
  transition:
    background 200ms,
    color 200ms,
    transform 120ms ease;
}

/* One accent voice per screen: "Accedi" is the filled primary, "Crea il tuo
   account" is the outline secondary. Two identical rust buttons side by side
   made neither of them the answer. */
.woocommerce-account .woocommerce-form-register .button.btn-outline {
  background: transparent !important;
  color: var(--color-rust) !important;
}

.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover,
.woocommerce-account .woocommerce-ResetPassword .button:hover {
  background: var(--color-gold-deep) !important;
  border-color: var(--color-gold-deep) !important;
  color: var(--color-sepia-paper) !important;
}

.woocommerce-account .woocommerce-form-login .button:active,
.woocommerce-account .woocommerce-form-register .button:active,
.woocommerce-account .woocommerce-ResetPassword .button:active {
  transform: translateY(1px) scale(0.985);
}

.woocommerce-account .woocommerce-LostPassword {
  margin: 1rem 0 0 !important;
  text-align: left;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
}

.woocommerce-account .woocommerce-LostPassword a {
  color: var(--color-rust);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-medium);
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem !important;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--color-rust);
}

.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text {
  margin: 0 0 1.25rem !important;
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
  line-height: 1.55;
}

/* =========================================================================
   28. My Account dashboard — open cart + recent orders inline
   ========================================================================= */

.zm-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Allineato a sinistra, non centrato: l'h1 della pagina è centrato sul
   container pieno, il contenuto vive nella colonna a destra della sidebar.
   Due centri ottici diversi impilati facevano oscillare l'asse verticale. */
.zm-dashboard-greeting {
  text-align: left;
}

.zm-dashboard-greeting .label-vintage {
  margin: 0 0 0.5rem;
}

/* Un saluto, non un secondo titolo di pagina: sopra c'è già l'h1 "Il mio
   account". `--text-display` faceva sembrare il nome del cliente il titolo
   della pagina, e con un nome lungo o un'email sfondava la colonna. */
.zm-dashboard-name {
  font-family: var(--font-italiana);
  font-size: var(--fs-h3);
  color: var(--color-sepia-deep);
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.zm-dashboard-script {
  font-size: var(--fs-subhead);
  margin: 0.35rem 0 0;
  line-height: 1.2;
}

/* Carrello lasciato aperto — l'unica cosa che la bacheca sa e la sidebar no.
   Cornice del sistema (doppio filetto oro), non un bordo colorato spesso. */
.zm-dashboard-cart {
  padding: 1.75rem 2rem;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  position: relative;
}

.zm-dashboard-cart::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.28);
  pointer-events: none;
}

.zm-dashboard-cart > * {
  position: relative;
  z-index: 1;
}

.zm-dashboard-cart .label-vintage {
  margin: 0 0 0.5rem;
}

.zm-dashboard-cart-line {
  font-family: var(--font-cormorant);
  font-size: var(--fs-lead);
  color: var(--color-sepia-deep);
  margin: 0 0 0.25rem;
}

.zm-dashboard-cart-line strong {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.zm-dashboard-cart-total bdi {
  color: var(--color-rust);
  font-variant-numeric: tabular-nums;
}

.zm-dashboard-cart-shipping {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
  margin: 0 0 1.25rem;
}

.zm-dashboard-cart-shipping bdi {
  font-style: normal;
  color: var(--color-sepia-deep);
}

.zm-dashboard-reorder {
  margin: 1rem 0 0;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-label);
}

.zm-dashboard-reorder a {
  color: var(--color-rust);
  text-decoration: none;
}

.zm-dashboard-reorder a:hover {
  color: var(--color-gold-deep);
}

/* Rotte secondarie: le stesse voci sono nella sidebar, quindi qui sono testo
   e non tre card a piena taglia. */
.zm-dashboard-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(60, 46, 31, 0.1);
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  color: var(--color-sepia-medium);
}

.zm-dashboard-secondary a {
  color: var(--color-sepia-medium);
  text-decoration: none;
  padding: 0.35rem 0;
}

.zm-dashboard-secondary a:hover {
  color: var(--color-rust);
}

/* Recent orders block */
.zm-dashboard-orders-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.18);
  margin-bottom: 1rem;
}

.zm-dashboard-orders-header h3 {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  color: var(--color-sepia-deep);
  margin: 0;
  line-height: 1.2;
}

.zm-dashboard-orders-all {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-label);
  color: var(--color-rust);
  text-decoration: none;
}

.zm-dashboard-orders-all:hover {
  color: var(--color-gold-deep);
}

.zm-dashboard-orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zm-dashboard-order-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.08);
  color: var(--color-sepia-deep);
  text-decoration: none;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.zm-dashboard-order-link:hover {
  transform: translateY(-1px);
  border-color: var(--color-rust);
  box-shadow: 0 8px 18px -8px rgba(60, 46, 31, 0.22);
}

.zm-dashboard-order-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.zm-dashboard-order-number {
  font-family: var(--font-italiana);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.zm-dashboard-order-date {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
}

.zm-dashboard-order-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
}

.zm-dashboard-order-summary {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-medium);
}

.zm-dashboard-order-summary bdi {
  color: var(--color-sepia-deep);
  font-style: normal;
}

.zm-dashboard-order-status {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  background: rgba(184, 149, 86, 0.18);
  color: var(--color-gold-deep);
  border: 1px solid rgba(184, 149, 86, 0.35);
}

.zm-dashboard-order-status--processing,
.zm-dashboard-order-status--on-hold {
  background: rgba(110, 140, 160, 0.16);
  color: var(--color-marine-deep);
  border-color: rgba(110, 140, 160, 0.35);
}

.zm-dashboard-order-status--completed {
  /* Alpha 0.08, non 0.15: a 0.15 il fondo scuriva quanto basta a portare la
     ruggine su carta a 4.46:1, sotto il minimo AA di 4.5:1 per un testo da
     11px. Il bordo resta pieno e regge la definizione del badge. */
  background: rgba(158, 79, 55, 0.08);
  color: var(--color-rust);
  border-color: rgba(158, 79, 55, 0.4);
}

.zm-dashboard-order-status--cancelled,
.zm-dashboard-order-status--failed,
.zm-dashboard-order-status--refunded {
  background: rgba(60, 46, 31, 0.08);
  color: var(--color-sepia-medium);
  border-color: rgba(60, 46, 31, 0.18);
}

.zm-dashboard-orders-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--color-sepia-paper);
  border: 1px dashed rgba(60, 46, 31, 0.2);
}

.zm-dashboard-orders-empty p {
  margin: 0 0 0.5rem;
}

.zm-dashboard-orders-empty p.font-display {
  font-size: var(--fs-h4);
  color: var(--color-sepia-deep);
}

.zm-dashboard-empty-script {
  font-size: var(--text-product);
  margin-bottom: 1.5rem;
  line-height: 1;
}

/* =========================================================================
   29. Legal pages — /termini and /privacy — sticky TOC sidebar
   ========================================================================= */

body.is-legal-page .container-narrow {
  max-width: 76rem !important;
}

body.is-legal-page .page-static-content {
  font-size: var(--fs-body);
}

.zm-legal-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3.5rem;
  align-items: start;
  max-width: 72rem;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .zm-legal-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.zm-legal-toc-wrap {
  position: sticky;
  top: 7rem;
}

@media (max-width: 900px) {
  .zm-legal-toc-wrap {
    position: static;
  }
}

.zm-toc {
  padding: 1.5rem 1.25rem;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  position: relative;
  box-shadow:
    0 14px 28px -14px rgba(60, 46, 31, 0.22),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.zm-toc::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.22);
  pointer-events: none;
}

.zm-toc > * {
  position: relative;
  z-index: 1;
}

.zm-toc-label {
  margin: 0 0 0.85rem;
  text-align: center;
}

.zm-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: zm-toc;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: calc(100dvh - 14rem);
  overflow-y: auto;
}

.zm-toc-list li {
  counter-increment: zm-toc;
  list-style: none;
}

.zm-toc-list a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.5rem;
  padding: 0.55rem 0.4rem;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  text-decoration: none;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.12);
  transition:
    color 200ms ease,
    background 200ms ease;
}

.zm-toc-list li:last-child a {
  border-bottom: 0;
}

.zm-toc-list a::before {
  content: counter(zm-toc, decimal-leading-zero);
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--color-gold-deep);
  align-self: center;
}

.zm-toc-list a:hover {
  color: var(--color-rust);
  background: rgba(232, 218, 184, 0.4);
}

.zm-legal-content h2 {
  scroll-margin-top: 8rem;
}

.zm-legal-content > *:first-child {
  margin-top: 0;
}

/* Checkout — 2-col layout, customer details left, order review sticky right */
.zm-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr);
  gap: 3rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .zm-checkout-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.zm-checkout-customer {
  min-width: 0;
}

.zm-checkout-customer > .vintage-divider {
  margin: 1.5rem 0;
}

.zm-checkout-customer .col2-set {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.zm-checkout-customer .col-1,
.zm-checkout-customer .col-2 {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  position: static !important;
}

.zm-checkout-customer .col-1::before,
.zm-checkout-customer .col-2::before {
  display: none !important;
}

/* Billing fields: 2-col grid for short fields (CAP, città, provincia,
   telefono) but full-width for street + email. */
.zm-checkout-customer .col-1 .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

@media (max-width: 600px) {
  .zm-checkout-customer .col-1 .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

.zm-checkout-customer .col-1 .form-row.form-row-wide,
.zm-checkout-customer .col-1 .form-row-wide {
  grid-column: 1 / -1;
}

.zm-checkout-customer h3 {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  color: var(--color-sepia-deep);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.zm-checkout-customer .form-row {
  margin: 0 0 1rem;
}

.zm-checkout-customer .form-row label {
  display: block;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--color-sepia-medium);
  margin-bottom: 0.3rem;
}

.zm-checkout-customer .form-row input,
.zm-checkout-customer .form-row select,
.zm-checkout-customer .form-row textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(60, 46, 31, 0.2);
  background: rgba(253, 249, 235, 0.65);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
}

.zm-checkout-customer .form-row input::placeholder,
.zm-checkout-customer .form-row textarea::placeholder {
  color: var(--color-sepia-medium);
  opacity: 1;
}

.zm-checkout-customer .select2-container .select2-selection--single {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.zm-checkout-customer .form-row input[type="checkbox"] {
  width: auto;
  min-width: 20px;
  min-height: 20px;
}

.zm-checkout-customer .create-account label,
.zm-checkout-customer #ship-to-different-address label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.zm-checkout-customer .form-row input:focus,
.zm-checkout-customer .form-row select:focus,
.zm-checkout-customer .form-row textarea:focus {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
  border-color: var(--color-rust);
}

.zm-checkout-review {
  position: sticky;
  top: 7rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  position: sticky;
  box-shadow:
    0 18px 36px -18px rgba(60, 46, 31, 0.25),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.zm-checkout-review::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.3);
  pointer-events: none;
}

.zm-checkout-review > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .zm-checkout-review {
    position: static;
  }
}

.zm-checkout-review h2#order_review_heading {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  color: var(--color-sepia-deep);
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.2);
}

.zm-checkout-review table.shop_table {
  width: 100%;
  border: 0;
  background: transparent;
  border-collapse: collapse;
}

.zm-checkout-review table.shop_table th,
.zm-checkout-review table.shop_table td {
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.15);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  vertical-align: top;
}

.zm-checkout-review table.shop_table thead th {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-label);
  color: var(--color-gold-deep);
  font-weight: normal;
  text-align: left;
}

.zm-checkout-review table.shop_table tfoot th,
.zm-checkout-review table.shop_table tfoot td {
  font-family: var(--font-italiana);
  letter-spacing: 0.01em;
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
}

.zm-checkout-review .order-total td .amount {
  font-family: var(--font-italiana);
  font-size: var(--fs-lead);
  color: var(--color-rust);
}

.zm-checkout-review .product-name {
  text-transform: lowercase;
}

.zm-checkout-review .product-name::first-letter {
  text-transform: uppercase;
}

.zm-checkout-review #payment {
  margin-top: 1.25rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(60, 46, 31, 0.1);
  background: transparent !important;
}

.zm-checkout-review #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  background: transparent;
}

.zm-checkout-review #payment ul.payment_methods li {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(60, 46, 31, 0.12);
  background: rgba(232, 218, 184, 0.25);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
}

.zm-checkout-review #payment ul.payment_methods li label {
  font-family: var(--font-italiana);
  letter-spacing: 0.02em;
  color: var(--color-sepia-deep);
}

.zm-checkout-review #payment .payment_box {
  font-family: var(--font-cormorant);
  font-size: var(--fs-note);
  font-style: italic;
  color: var(--color-sepia-medium);
  padding: 0.65rem 0 0;
  margin: 0.5rem 0 0 1.8rem;
  border-top: 1px dotted rgba(60, 46, 31, 0.12);
  background: transparent;
}

.zm-checkout-review #payment .payment_box::before {
  display: none;
}

.zm-checkout-review #place_order {
  width: 100% !important;
  margin-top: 1rem !important;
  padding: 1rem 1.5rem !important;
  background: var(--color-rust) !important;
  color: var(--color-sepia-paper) !important;
  border: 1px solid var(--color-rust) !important;
  font-family: var(--font-italiana) !important;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm) !important;
  cursor: pointer;
  transition:
    background 200ms,
    border-color 200ms,
    transform 120ms ease;
}

.zm-checkout-review #place_order:hover {
  background: var(--color-gold-deep) !important;
  border-color: var(--color-gold-deep) !important;
}

.zm-checkout-review #place_order:active {
  transform: translateY(1px) scale(0.985);
}

/* Privacy notice under place_order — italic muted */
.zm-checkout-review .woocommerce-privacy-policy-text {
  margin-top: 1rem;
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
  line-height: 1.5;
}

/* Checkout — gift-note hint under the order_comments textarea */
.zm-checkout-gift-hint {
  margin: 0.5rem 0 0;
  padding: 0.85rem 1rem;
  background: rgba(232, 218, 184, 0.45);
  border: 1px solid rgba(184, 149, 86, 0.35);
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-sepia-deep);
}

.zm-checkout-field-error {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-rust);
  font-family: var(--font-cormorant);
  font-size: var(--fs-note);
  line-height: 1.5;
}

/* Shipping table (rendered from MDX ShippingTable on /spedizioni) */
.zm-shipping-table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  box-shadow:
    0 14px 28px -14px rgba(60, 46, 31, 0.2),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.zm-shipping-table thead th {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-label);
  color: var(--color-gold-deep);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(60, 46, 31, 0.12);
  background: rgba(232, 218, 184, 0.4);
  font-weight: normal;
  text-align: left;
}

.zm-shipping-table tbody th,
.zm-shipping-table tbody td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.16);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  font-variant-numeric: tabular-nums;
}

.zm-shipping-table tbody tr:last-child th,
.zm-shipping-table tbody tr:last-child td {
  border-bottom: 0;
}

.zm-shipping-table tbody th {
  font-weight: normal;
  text-align: left;
  color: var(--color-sepia-medium);
}

.zm-shipping-table tbody td {
  font-family: var(--font-italiana);
  text-align: right;
  color: var(--color-rust);
}

/* Cart + Checkout pages — the WC cart.php / form-checkout.php templates
   render their own chapter-heading ("Carrello · La tua spesa", etc.), so
   suppress the generic page-static-header to avoid a duplicate h1 stack. */
body.woocommerce-cart .page-static-header,
body.woocommerce-checkout .page-static-header {
  display: none;
}

body.woocommerce-cart .page-static,
body.woocommerce-checkout .page-static {
  padding-top: 2.5rem;
}

body.woocommerce-checkout .chapter-heading {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 600px) {
  body.woocommerce-cart .page-static,
  body.woocommerce-checkout .page-static {
    padding-top: 1.25rem;
  }

  .zm-checkout-customer .form-row.form-row-first,
  .zm-checkout-customer .form-row.form-row-last {
    float: none;
    width: 100% !important;
  }

  body.woocommerce-cart .chapter-heading,
  body.woocommerce-checkout .chapter-heading {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  body.woocommerce-checkout .chapter-heading .font-script {
    font-size: var(--text-script);
  }

  .zm-checkout-customer > .vintage-divider {
    margin: 0.75rem 0 1.25rem;
  }
}

/* Cart + checkout need a wider container than the default 48rem
   narrow used for editorial pages — table + sidebar totals don't fit. */
body.woocommerce-cart .container-narrow,
body.woocommerce-checkout .container-narrow {
  max-width: 76rem !important;
}

/* /cart — two-column layout: table (form) on the left, totals sticky on
   the right. The cart shortcode renders form + .cart-collaterals as two
   direct siblings inside .woocommerce; we promote .woocommerce to grid. */
body.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr);
  gap: 3rem;
  align-items: start;
}

body.woocommerce-cart .woocommerce > .chapter-heading {
  grid-column: 1 / -1;
}

body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-message .button {
  display: none;
}

/* L'aggiunta al carrello è già implicita nel checkout: il notice con CTA
   "Visualizza carrello" riporta indietro e occupa il primo schermo mobile. */
body.woocommerce-checkout .woocommerce-message:has(.button) {
  display: none;
}

body.woocommerce-checkout .woocommerce-message {
  margin-bottom: 1rem;
  padding-block: 0.85rem !important;
}

body.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
}

body.woocommerce-cart .woocommerce > .cart-collaterals {
  grid-column: 2;
  position: sticky;
  top: 7rem;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  padding: 1.75rem 1.5rem;
  position: relative;
  box-shadow:
    0 16px 32px -16px rgba(60, 46, 31, 0.22),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

body.woocommerce-cart .cart-collaterals .cart_totals::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.28);
  pointer-events: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals > * {
  position: relative;
  z-index: 1;
}

body.woocommerce-cart .zm-cart-shipping-note {
  margin: 0 0 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.18);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--color-sepia-deep);
}

body.woocommerce-cart .cart-collaterals h2 {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  color: var(--color-sepia-deep);
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.2);
}

body.woocommerce-cart .shop_table.cart {
  border: 1px solid rgba(60, 46, 31, 0.12);
  background: var(--color-sepia-paper);
  width: 100%;
}

body.woocommerce-cart .shop_table.cart thead th {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  color: var(--color-sepia-medium);
  padding: 1rem 0.85rem;
  border-bottom: 1px solid rgba(60, 46, 31, 0.1);
  text-align: left;
}

body.woocommerce-cart .shop_table.cart td {
  padding: 1.1rem 0.85rem;
  vertical-align: middle;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.12);
}

body.woocommerce-cart .shop_table.cart .product-thumbnail img {
  width: 64px !important;
  height: auto;
  border: 1px solid rgba(60, 46, 31, 0.1);
  filter: sepia(0.25) contrast(0.95) saturate(0.92);
}

body.woocommerce-cart .shop_table.cart td.product-name a {
  font-family: var(--font-italiana);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  text-decoration: none;
  text-transform: lowercase;
}

body.woocommerce-cart .shop_table.cart td.product-name a::first-letter {
  text-transform: uppercase;
}

body.woocommerce-cart .shop_table.cart td.product-name a:hover {
  color: var(--color-rust);
}

body.woocommerce-cart .shop_table.cart td.product-price,
body.woocommerce-cart .shop_table.cart td.product-subtotal {
  font-family: var(--font-italiana);
  color: var(--color-sepia-deep);
  font-variant-numeric: tabular-nums;
}

body.woocommerce-cart .shop_table.cart .product-quantity input.qty {
  width: 4.5rem;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid rgba(60, 46, 31, 0.18);
  background: rgba(253, 249, 235, 0.6);
  font-family: var(--font-cormorant);
  font-variant-numeric: tabular-nums;
}

body.woocommerce-cart .shop_table.cart .remove {
  color: var(--color-sepia-medium) !important;
  text-decoration: none;
  font-family: var(--font-italiana);
}

body.woocommerce-cart .shop_table.cart .remove:hover {
  color: var(--color-rust) !important;
}

/* Actions row — coupon input wider, btns aligned */
body.woocommerce-cart .shop_table.cart td.actions {
  background: rgba(232, 218, 184, 0.18);
  padding: 1.25rem !important;
  border-bottom: 0;
}

body.woocommerce-cart .coupon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

body.woocommerce-cart .coupon input#coupon_code {
  min-width: 14rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(60, 46, 31, 0.2);
  background: rgba(253, 249, 235, 0.7);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
}

body.woocommerce-cart .coupon input#coupon_code::placeholder {
  color: var(--color-sepia-medium);
  font-style: italic;
  letter-spacing: normal;
}

body.woocommerce-cart .coupon .button {
  padding: 0.65rem 1.5rem !important;
}

body.woocommerce-cart [name="update_cart"] {
  float: right;
}

/* Cart totals table inside the right column */
body.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  width: 100%;
  background: transparent;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  padding: 0.55rem 0;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.18);
  font-family: var(--font-cormorant);
  color: var(--color-sepia-deep);
}

body.woocommerce-cart .cart_totals table th {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  color: var(--color-gold-deep);
  font-weight: normal;
  text-align: left;
}

body.woocommerce-cart .cart_totals .order-total td .amount {
  font-family: var(--font-italiana);
  font-size: var(--fs-subhead);
  color: var(--color-rust);
}

body.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  margin-top: 1.25rem;
  padding: 0;
}

body.woocommerce-cart .cart_totals .checkout-button {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 1rem 1.5rem !important;
  background: var(--color-rust) !important;
  color: var(--color-sepia-paper) !important;
  border: 1px solid var(--color-rust) !important;
  font-family: var(--font-italiana) !important;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm) !important;
}

body.woocommerce-cart .cart_totals .checkout-button:hover {
  background: var(--color-gold-deep) !important;
  border-color: var(--color-gold-deep) !important;
}

@media (max-width: 900px) {
  body.woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
  }
  body.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 1;
    position: static;
  }
}

/* /mio-account/orders/ — empty state + pagination + status chips */
.zm-orders-empty {
  text-align: center;
  padding: 3.5rem 2rem;
  background: var(--color-sepia-paper);
  border: 1px dashed rgba(60, 46, 31, 0.25);
  position: relative;
}

.zm-orders-empty::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.22);
  pointer-events: none;
}

.zm-orders-empty > * {
  position: relative;
  z-index: 1;
}

.zm-orders-empty .label-vintage {
  margin: 0 0 0.5rem;
}

.zm-orders-empty-title {
  font-family: var(--font-italiana);
  font-size: var(--text-display);
  color: var(--color-sepia-deep);
  margin: 0 0 0.25rem;
  line-height: 1.1;
}

.zm-orders-empty-script {
  font-size: var(--text-heading);
  margin: 0 0 1.5rem;
  line-height: 1;
}

.zm-orders-empty-body {
  font-family: var(--font-cormorant);
  color: var(--color-sepia-medium);
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}

.zm-orders-empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

.zm-orders-empty-link {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-caption);
  color: var(--color-rust);
  text-decoration: none;
}

.zm-orders-empty-link:hover {
  color: var(--color-gold-deep);
}

.zm-orders-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

.zm-orders-pagination-link {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-caption);
  color: var(--color-rust);
  text-decoration: none;
}

.zm-orders-pagination-link:hover {
  color: var(--color-gold-deep);
}

/* Status chip on the orders table */
.zm-order-status {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  background: rgba(184, 149, 86, 0.18);
  color: var(--color-gold-deep);
  border: 1px solid rgba(184, 149, 86, 0.35);
}

.zm-order-status--processing,
.zm-order-status--on-hold {
  background: rgba(110, 140, 160, 0.16);
  color: var(--color-marine-deep);
  border-color: rgba(110, 140, 160, 0.35);
}

.zm-order-status--completed {
  /* Alpha 0.08, non 0.15: a 0.15 il fondo scuriva quanto basta a portare la
     ruggine su carta a 4.46:1, sotto il minimo AA di 4.5:1 per un testo da
     11px. Il bordo resta pieno e regge la definizione del badge. */
  background: rgba(158, 79, 55, 0.08);
  color: var(--color-rust);
  border-color: rgba(158, 79, 55, 0.4);
}

.zm-order-status--cancelled,
.zm-order-status--failed,
.zm-order-status--refunded {
  background: rgba(60, 46, 31, 0.08);
  color: var(--color-sepia-medium);
  border-color: rgba(60, 46, 31, 0.18);
}

.woocommerce-MyAccount-navigation {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.1);
  padding: 1.25rem;
  position: relative;
}

.woocommerce-MyAccount-navigation::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.25);
  pointer-events: none;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

.woocommerce-MyAccount-navigation li {
  list-style: none !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(60, 46, 31, 0.06);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

/* Il filetto è sempre presente e trasparente a riposo: così l'hover cambia
   solo colore e non sposta il testo di 0.85rem sotto il puntatore. */
.woocommerce-MyAccount-navigation a {
  display: block;
  min-height: 44px;
  padding: 0.85rem 0.5rem 0.85rem 0.85rem;
  border-left: 2px solid transparent;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-caption);
  color: var(--color-sepia-deep);
  text-decoration: none;
  transition:
    color 200ms,
    border-color 200ms;
}

.woocommerce-MyAccount-navigation a:hover {
  color: var(--color-rust);
  border-left-color: rgba(158, 79, 55, 0.35);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  color: var(--color-rust);
  border-left-color: var(--color-rust);
}

.woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

/* Same rule as the address columns: WooCommerce floats nav and content, so the
   sidebar split needs explicit placement — but only while there are two tracks
   to place into. Below the breakpoint the grid is single-column and the pins
   would resurrect a phantom second column. */
@media (min-width: 769px) {
  .woocommerce-MyAccount-navigation {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .woocommerce-MyAccount-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* Coppie di colonne indirizzo: la lista su /edit-address/ e la coppia
   fatturazione + spedizione in fondo a view-order.
   Elencate per nome invece di agganciare `col2-set`: quella classe la porta
   anche il gate login da sloggato, che ha già la sua griglia nella sezione 22,
   e due dichiarazioni di griglia sullo stesso elemento con breakpoint diversi
   sono l'origine del collasso mobile rotto. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-Addresses,
  .woocommerce-account .woocommerce-columns--addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le colonne di view-order non hanno le classi .col-1/.col-2, quindi vanno
   nominate a parte per la stessa cornice di carta. */
.woocommerce-account .woocommerce-column--billing-address,
.woocommerce-account .woocommerce-column--shipping-address {
  min-width: 0;
}

.woocommerce-account .woocommerce-columns--addresses h2,
.woocommerce-account .woocommerce-columns--addresses h3 {
  font-size: var(--fs-h4) !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.2);
}

.woocommerce-account .col-1,
.woocommerce-account .col-2,
.woocommerce-account .woocommerce-Address {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 1.5rem !important;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.1);
  position: relative;
}

/* WooCommerce floats these columns, which under grid inverts their order —
   hence the explicit placement. It MUST stay inside the two-column state:
   a `grid-column: 2` that survives the collapse creates an implicit second
   track, and the single-column layout never happens (the card is then sized
   to a fraction of the viewport and the page scrolls sideways). */
@media (min-width: 769px) {
  .woocommerce-account .col-1 {
    grid-column: 1 !important;
  }
  .woocommerce-account .col-2 {
    grid-column: 2 !important;
  }
}

.woocommerce-account .woocommerce-Address::before,
.woocommerce-account .col-1::before,
.woocommerce-account .col-2::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.25);
  pointer-events: none;
}

.woocommerce-account .woocommerce-Address > *,
.woocommerce-account .col-1 > *,
.woocommerce-account .col-2 > * {
  position: relative;
  z-index: 1;
}

.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .col-1 h3,
.woocommerce-account .col-2 h3 {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  color: var(--color-sepia-deep);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.woocommerce-account .woocommerce-Address-title .edit {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--color-rust);
  text-decoration: none;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.woocommerce-account address {
  font-family: var(--font-cormorant);
  font-style: normal;
  line-height: 1.6;
  color: var(--color-sepia-deep);
  margin: 0;
}

/* Account headings (page heading "Bacheca", "Indirizzi", etc.) */
.woocommerce-account .page-static-title {
  margin-bottom: 1rem;
}

/* Account forms */
.woocommerce-account form.edit-account,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.woocommerce-address-fields {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.1);
  padding: 2rem;
}

.woocommerce-account .form-row label {
  display: block;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--color-sepia-medium);
  margin-bottom: 0.4rem;
}

/* `:not([type=checkbox])` matters: the bare rule stretched the "Ricordami"
   checkbox to the full row width (99×13px) and shoved its label onto the
   next line. */
.woocommerce-account .form-row input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(60, 46, 31, 0.2);
  background: rgba(253, 249, 235, 0.6);
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
}

.woocommerce-account .form-row input:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
  border-color: var(--color-rust);
}

/* WooCommerce marks required fields with `#a00`, the one pure red in the whole
   page. Ruggine is the system's only accent voice. Four classes deep because
   `woocommerce.css` claims `.woocommerce form .form-row .required`. */
.woocommerce-account .woocommerce-form .form-row .required,
.woocommerce-account .woocommerce-ResetPassword .form-row .required,
.woocommerce-account .woocommerce-address-fields .form-row .required,
.woocommerce-account .woocommerce-EditAccountForm .form-row .required {
  color: var(--color-rust);
  text-decoration: none;
}

/* Qualsiasi h2/h3 dentro il contenuto account. La base `h2 { --text-section }`
   arriva a 4.5rem = 72px, che è la taglia di un titolo di sezione della home:
   su `view-order` produceva "Dettagli ordine" e "Indirizzo di fatturazione" più
   grandi dell'h1 della pagina, sopra dati in corpo 18px. Il contenuto account è
   una scheda, non una copertina. */
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}

.woocommerce-account .woocommerce-MyAccount-content h2:first-child {
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 2rem 0 0.85rem;
}

/* Titolo delle card indirizzo. In `my-address.php` l'h2 vive dentro
   <header class="woocommerce-Address-title">, quindi il selettore `> h2` della
   sezione 22 non lo raggiungeva e vinceva la base `h2 { --text-section }`: 72px
   di titolo sopra un'azione da 11px. */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--color-sepia-deep);
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.2);
}

/* L'unica azione della pagina indirizzi: era un link di testo da 11px sotto il
   titolo. Ora è il bottone che il resto del tema usa. Colonna, non riga: il
   filetto appartiene al titolo, non alla coppia titolo+azione. */
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.25rem;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  width: 100%;
  text-align: center;
}

.woocommerce-account .woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-rust);
  color: var(--color-rust);
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-label);
  text-decoration: none;
  transition:
    background 200ms,
    color 200ms;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
  background: var(--color-rust);
  color: var(--color-sepia-paper);
}

/* Note al cliente su view-order. WooCommerce le rende come <ol> con i numeri
   decimali e 40px di rientro: una numerazione che nel tema non esiste, e che
   di più mente — le note arrivano dalla più recente, quindi «1.» era l'ultima
   cosa avvenuta. Diventano una sequenza di annotazioni sul margine, come le
   voci del quaderno. */
.woocommerce-account .woocommerce-OrderUpdates {
  list-style: none !important;
  margin: 0 0 2.5rem;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.woocommerce-account .woocommerce-OrderUpdate {
  list-style: none !important;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(184, 149, 86, 0.45);
}

.woocommerce-account .woocommerce-OrderUpdate-meta {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  font-weight: 400 !important;
  color: var(--color-sepia-medium);
  margin: 0 0 0.35rem;
}

.woocommerce-account .woocommerce-OrderUpdate-description p:last-child {
  margin-bottom: 0;
}

/* Il link di paginazione era alto 21px: sotto la soglia di 44px per il tocco. */
.zm-orders-pagination-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Riga data + badge di stato in testa a view-order. */
.woocommerce-account .zm-order-meta {
  font-family: var(--font-cormorant);
  font-size: var(--fs-lead);
  color: var(--color-sepia-medium);
  margin-right: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child:has(.zm-order-status) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.18);
}

/* Select2 (paese/provincia) alto 42px accanto a input da 44px: due controlli
   della stessa colonna che non stavano sulla stessa linea di base. */
.woocommerce-account .select2-container .select2-selection--single {
  min-height: 44px;
}

.woocommerce-account .select2-container .select2-selection__rendered {
  line-height: 42px;
}

/* Submit dei form account («Salva le modifiche», «Salva indirizzo»): 40px,
   appena sotto la soglia di 44. Sono <button type="submit">, quindi restano
   pieni — l'outline è riservato ai link-azione (a.button). */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
  min-height: 44px;
  padding: 0.85rem 1.85rem;
  background: var(--color-rust);
  color: var(--color-sepia-paper);
  border: 1px solid var(--color-rust);
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    background 200ms,
    border-color 200ms;
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
}

/* Il toggle «Mostra password» di WooCommerce è un'icona 22x22: l'area di tocco
   sale a 44px senza ingrandire il glifo. */
.woocommerce-account .show-password-input {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hint sotto un campo: dove finiscono le parentetiche che WooCommerce infila
   nelle label. In corpo minuscolo, non in maiuscoletto spaziato. */
.woocommerce-account .zm-field-hint {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--color-sepia-medium);
}

.woocommerce-account .zm-password-fieldset {
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  border: 0;
  border-top: 1px dotted rgba(60, 46, 31, 0.2);
}

.woocommerce-account .zm-password-fieldset legend {
  padding: 0;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: var(--fs-label);
  color: var(--color-sepia-medium);
}

.woocommerce-account .zm-fieldset-hint {
  margin: 0.5rem 0 1.5rem;
}

.woocommerce-account .woocommerce form .form-row.woocommerce-invalid .input-text {
  border-color: var(--color-rust);
}

.woocommerce-account .woocommerce form .form-row.woocommerce-invalid label {
  color: var(--color-rust);
}

.woocommerce-account .zm-field-error {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-rust);
  font-size: var(--fs-note);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Tabelle account (lista ordini, dettaglio ordine, totali)
   ------------------------------------------------------------------------- */

/* Le intestazioni arrivavano in Cormorant minuscolo: il tema ha già una
   grammatica per le etichette (maiuscoletto Italiana spaziato) e le
   intestazioni di colonna sono etichette. */
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table thead td {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--color-sepia-medium);
  text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content table td {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
}

/* Il numero d'ordine è l'ancora della riga: maiuscoletto ruggine con cifre
   tabulari, non un link sottolineato di default. */
.woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-italiana);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-rust);
  text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Tre "Visualizza" in ruggine pieno incolonnati erano ruggine usato come
   colore d'area: la One Voice Rule vuole l'accento raro. Outline discreto —
   l'azione resta chiara, l'accento torna a essere una voce.
   Il gancio è l'elemento, non la classe: WooCommerce marca questi link con la
   sola `class="button"` (niente `woocommerce-button`, niente `order-again`),
   mentre i submit dei form sono <button type="submit"> e restano pieni. */
.woocommerce-account .woocommerce-MyAccount-content a.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem !important;
  background: transparent !important;
  border: 1px solid rgba(60, 46, 31, 0.3) !important;
  color: var(--color-sepia-deep) !important;
  font-family: var(--font-italiana) !important;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-label) !important;
  text-decoration: none;
  transition:
    background 200ms,
    border-color 200ms,
    color 200ms;
}

.woocommerce-account .woocommerce-MyAccount-content a.button:hover {
  background: var(--color-sepia-deep) !important;
  border-color: var(--color-sepia-deep) !important;
  color: var(--color-sepia-paper) !important;
}

/* "Ordina di nuovo" è l'azione principale di view-order, quindi tiene la voce
   ruggine. Agganciato al parametro di query — che è quello che WooCommerce
   stesso costruisce in `woocommerce_order_again_button()` — e non a una classe
   cosmetica che potrebbe non esserci. */
.woocommerce-account .woocommerce-MyAccount-content a.button[href*="order_again"] {
  border-color: var(--color-rust) !important;
  color: var(--color-rust) !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.button[href*="order_again"]:hover {
  background: var(--color-rust) !important;
  border-color: var(--color-rust) !important;
  color: var(--color-sepia-paper) !important;
}

/* I nomi prodotto nel dettaglio ordine: sottolineati di default, come il
   numero d'ordine prima. */
.woocommerce-account .woocommerce-table--order-details td a,
.woocommerce-account .woocommerce-table--order-details th a {
  color: var(--color-sepia-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 46, 31, 0.25);
}

.woocommerce-account .woocommerce-table--order-details td a:hover {
  color: var(--color-rust);
  border-bottom-color: var(--color-rust);
}

/* Vista mobile della `shop_table_responsive`: WooCommerce impila le celle con
   `data-title`, ma senza separazione le righe di due ordini diversi diventano
   un flusso continuo e non si vede dove finisce l'uno e comincia l'altro. */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-orders-table tbody tr {
    display: block;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(60, 46, 31, 0.15);
    background: var(--color-sepia-paper);
  }

  .woocommerce-account .woocommerce-orders-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .woocommerce-account .woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-orders-table tbody th {
    border-bottom: 1px dotted rgba(60, 46, 31, 0.12);
  }

  .woocommerce-account .woocommerce-orders-table tbody tr > *:last-child {
    border-bottom: 0;
  }
}

/* Lost password: in core il form galleggia nudo su tutta la larghezza del
   container, unico nell'area account a non avere una cornice. */
.zm-password-card {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.25rem 2rem;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  position: relative;
  box-shadow:
    0 16px 32px -16px rgba(60, 46, 31, 0.22),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.zm-password-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.3);
  pointer-events: none;
}

.zm-password-card > * {
  position: relative;
  z-index: 1;
}

.zm-password-card .woocommerce-ResetPassword {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.zm-password-intro {
  margin: 0 0 1.5rem;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  color: var(--color-sepia-medium);
  line-height: 1.6;
}

.zm-password-back {
  margin: 1.25rem 0 0 !important;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-label);
}

.zm-password-back a {
  color: var(--color-sepia-medium);
  text-decoration: none;
}

.zm-password-back a:hover {
  color: var(--color-rust);
}

/* =========================================================================
   23. Tweaks: hide breadcrumbs default WC where they clash
   ========================================================================= */

.woocommerce-breadcrumb {
  font-family: var(--font-italiana);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-sepia-medium);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(60, 46, 31, 0.08);
}

.woocommerce-breadcrumb a {
  color: var(--color-sepia-medium);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--color-rust);
}

/* =========================================================================
   24. 404 alternative paths
   ========================================================================= */

.error-404-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 60rem;
  padding: 0 1.5rem 2rem;
}

@media (max-width: 768px) {
  .error-404-paths {
    grid-template-columns: 1fr;
  }
}

.error-404-path {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.12);
  color: var(--color-sepia-deep);
  text-decoration: none;
  text-align: left;
  position: relative;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.error-404-path::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(184, 149, 86, 0.2);
  pointer-events: none;
}

.error-404-path:hover {
  transform: translateY(-2px);
  border-color: var(--color-rust);
  box-shadow: 0 10px 22px -6px rgba(60, 46, 31, 0.22);
}

.error-404-path .label-vintage {
  margin: 0;
}

.error-404-path-title {
  font-family: var(--font-italiana);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--color-sepia-deep);
}

.error-404-path-cta {
  margin-top: 0.5rem;
  font-family: var(--font-italiana);
  color: var(--color-rust);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-caption);
}

/* =========================================================================
   25. Cookie consent banner (GDPR — gates GA4)
   ========================================================================= */

/* Barra a piena larghezza nel flusso, non card sovrapposta. Vive prima
   dell'header tramite `wp_body_open`, quindi resta subito visibile senza
   coprire azioni o contenuti. */
.zm-consent {
  position: relative;
  z-index: 60;
  background: var(--color-sepia-paper);
  border: 0;
  border-top: 1px solid rgba(60, 46, 31, 0.18);
  box-shadow: 0 -12px 32px -12px rgba(60, 46, 31, 0.28);
  padding: 1rem clamp(1.5rem, 4vw, 3rem);
  width: 100%;
  margin: 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  transition:
    transform 250ms ease,
    opacity 250ms ease;
}

/* Filetto oro: la firma del sistema, qui sul solo bordo che si vede. */
.zm-consent::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(184, 149, 86, 0.3);
  pointer-events: none;
}

.zm-consent-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.zm-consent-text {
  display: block;
  max-width: 62ch;
}

.zm-consent[hidden] {
  display: none;
}

.zm-consent[data-state="leaving"] {
  transform: translateY(120%);
  opacity: 0;
}

.zm-consent-text strong {
  font-family: var(--font-italiana);
  font-weight: 400;
  font-size: var(--fs-body);
  display: block;
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}

.zm-consent-text a {
  color: var(--color-rust);
}

.zm-consent-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.zm-consent-btn {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-caption);
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-sepia-deep);
  background: transparent;
  color: var(--color-sepia-deep);
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease,
    transform 120ms ease;
}

.zm-consent-btn:hover {
  background: var(--color-sepia-deep);
  color: var(--color-sepia-paper);
}

.zm-consent-btn:active {
  transform: translateY(1px) scale(0.985);
}

.zm-consent-btn--primary {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: var(--color-sepia-paper);
}

.zm-consent-btn--primary:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: var(--color-sepia-paper);
}

@media (max-width: 768px) {
  .zm-consent-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .zm-consent-actions {
    justify-content: stretch;
  }
  .zm-consent-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 600px) {
  .zm-consent {
    padding: 0.9rem 1.1rem;
    font-size: var(--fs-note);
  }
  .zm-consent-text strong {
    margin-bottom: 0.1rem;
  }
}

/* =========================================================================
   26. Contatti page — vintage business card + sede + map + form
   ========================================================================= */

.contatti-page .chapter-heading {
  margin-top: 0;
}

.contatti-intro {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--color-sepia-medium);
  max-width: 36rem;
  margin: 2rem auto 0;
  text-wrap: pretty;
}

.contatti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .contatti-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.contatti-grid > .contatti-card {
  display: flex;
  flex-direction: column;
}

/* Vintage business card */
.contatti-card {
  position: relative;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.14);
  padding: 2.5rem 2.25rem;
  box-shadow:
    0 18px 36px -16px rgba(60, 46, 31, 0.25),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.contatti-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.32);
  pointer-events: none;
}

.contatti-card-header {
  text-align: center;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(60, 46, 31, 0.08);
}

.contatti-card-header .label-vintage {
  margin-bottom: 0.5rem;
}

.contatti-card-title {
  font-family: var(--font-italiana);
  font-size: var(--text-product);
  color: var(--color-sepia-deep);
  line-height: 1.2;
  margin: 0 0 0.25rem;
  letter-spacing: 0.005em;
}

.contatti-card-owner {
  font-size: var(--text-product);
  color: var(--color-rust);
  margin: 0;
  line-height: 1;
}

.contatti-card-list {
  margin: 0;
  display: grid;
  gap: 1rem;
}

.contatti-card-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.18);
}

.contatti-card-row:last-of-type {
  border-bottom: 0;
}

.contatti-card-row dt {
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-gold-deep);
  margin: 0;
}

.contatti-card-row dd {
  margin: 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  word-break: break-word;
}

.contatti-card-row dd a {
  color: var(--color-sepia-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(158, 79, 55, 0.45);
}

.contatti-card-row dd a:hover {
  color: var(--color-rust);
  text-decoration-color: var(--color-rust);
}

.contatti-card-social {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(60, 46, 31, 0.08);
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.contatti-card-social a {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(60, 46, 31, 0.2);
  color: var(--color-sepia-deep);
  transition:
    color 200ms,
    border-color 200ms;
}

.contatti-card-social a:hover {
  color: var(--color-rust);
  border-color: var(--color-rust);
}

/* Sede card variant — same frame as recapiti, address + hours + map inside */
.contatti-card--sede .contatti-card-list {
  margin-top: 0;
}

.contatti-sede-address {
  font-style: normal;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--color-sepia-deep);
  text-align: center;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.2);
}

.contatti-card-row-hours {
  font-family: var(--font-italiana);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.contatti-map {
  position: relative;
  margin-top: auto;
  border: 1px solid rgba(60, 46, 31, 0.18);
  box-shadow: inset 0 0 0 1px rgba(184, 149, 86, 0.22);
}

.contatti-card--sede .contatti-map {
  margin-top: 1.5rem;
}

.contatti-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  filter: sepia(0.45) contrast(0.92) saturate(0.85) hue-rotate(-8deg);
}

.contatti-map-link {
  display: block;
  text-align: right;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-label);
  color: var(--color-rust);
  text-decoration: none;
  background: var(--color-sepia-paper);
  border-top: 1px solid rgba(60, 46, 31, 0.08);
}

.contatti-map-link:hover {
  color: var(--color-gold-deep);
}

/* Form section */
.contatti-form-section {
  padding-top: 3rem;
}

.contatti-meta-chip {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0 auto 2rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(184, 149, 86, 0.4);
  background: rgba(253, 249, 235, 0.55);
  font-family: var(--font-italiana);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-sepia-medium);
}

.contatti-form-section .contatti-meta-chip {
  display: table;
  margin: -1rem auto 2.5rem;
}

.contatti-form-wrap {
  margin-top: 1.5rem;
}

/* CF7 form styling — vintage editorial */
.contatti-form-wrap .wpcf7 {
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.14);
  padding: 2.5rem 2rem;
  position: relative;
  box-shadow:
    0 18px 36px -18px rgba(60, 46, 31, 0.22),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.contatti-form-wrap .wpcf7::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.32);
  pointer-events: none;
}

.contatti-form-wrap .wpcf7 form > p,
.contatti-form-wrap .wpcf7 form > div {
  position: relative;
  z-index: 1;
  margin: 0 0 1.5rem;
}

.contatti-form-wrap .wpcf7 label {
  display: block;
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-gold-deep);
  margin-bottom: 0.5rem;
}

.contatti-form-wrap .wpcf7 input[type="text"],
.contatti-form-wrap .wpcf7 input[type="email"],
.contatti-form-wrap .wpcf7 input[type="tel"],
.contatti-form-wrap .wpcf7 input[type="url"],
.contatti-form-wrap .wpcf7 textarea,
.contatti-form-wrap .wpcf7 select {
  width: 100%;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: 1px solid rgba(60, 46, 31, 0.32);
  background: transparent;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  transition: border-color 200ms ease;
}

.contatti-form-wrap .wpcf7 textarea {
  min-height: 8rem;
  resize: vertical;
}

.contatti-form-wrap .wpcf7 input:focus,
.contatti-form-wrap .wpcf7 textarea:focus,
.contatti-form-wrap .wpcf7 select:focus {
  outline: 0;
  border-bottom-color: var(--color-rust);
}

.contatti-form-wrap .wpcf7 input[type="submit"] {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.9rem 2.25rem;
  background: var(--color-rust);
  color: var(--color-sepia-paper);
  border: 1px solid var(--color-rust);
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    background 200ms,
    color 200ms,
    transform 120ms ease,
    box-shadow 200ms ease;
}

.contatti-form-wrap .wpcf7 input[type="submit"]:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
}

.contatti-form-wrap .wpcf7 input[type="submit"]:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 1px 2px rgba(60, 46, 31, 0.25);
}

.contatti-form-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-cormorant);
  font-style: italic;
  color: var(--color-rust);
  font-size: var(--fs-body);
}

.contatti-form-wrap .wpcf7-response-output {
  margin: 1.5rem 0 0 !important;
  padding: 1rem 1.25rem !important;
  background: rgba(232, 218, 184, 0.5) !important;
  border: 1px solid rgba(184, 149, 86, 0.5) !important;
  font-family: var(--font-cormorant) !important;
  color: var(--color-sepia-deep) !important;
}

.contatti-form-fallback {
  font-family: var(--font-cormorant);
  font-style: italic;
  color: var(--color-sepia-medium);
  text-align: center;
  padding: 2rem 1rem;
}

/* =========================================================================
   27. Storia page — cinematic cover, internal h2 chapters, press closer
   ========================================================================= */

/* Cover hero */
.storia-hero {
  position: relative;
  min-height: 60dvh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: var(--color-sepia-paper);
  overflow: hidden;
}

.storia-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(46, 78, 99, 0.3), rgba(36, 26, 16, 0.78) 80%),
    linear-gradient(to bottom, rgba(36, 26, 16, 0.4), rgba(36, 26, 16, 0.75));
  pointer-events: none;
}

.storia-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 5rem 1.5rem;
}

.storia-hero-label {
  color: var(--color-gold);
  margin-bottom: 1rem;
  letter-spacing: 0.4em;
}

.storia-hero-title {
  font-family: var(--font-italiana);
  font-size: var(--text-section);
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--color-sepia-paper);
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(36, 26, 16, 0.5);
}

.storia-hero-script {
  font-family: var(--font-pinyon);
  font-size: var(--text-heading);
  color: var(--color-gold);
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 8px rgba(36, 26, 16, 0.55);
}

.storia-hero-meta {
  font-family: var(--font-italiana);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: var(--fs-caption);
  color: rgba(253, 249, 235, 0.8);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 600px) {
  .storia-hero-meta {
    font-size: var(--fs-label);
    letter-spacing: 0.2em;
  }
}

/* Article body */
.storia-article {
  counter-reset: storia-chapter;
}

.storia-content {
  max-width: 72ch;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

/* Hide inline chapter-heading-number from legacy MDX ChapterHeading
   component — the CSS counter ::before below already labels each h2
   as "Episodio I/II/...", and the legacy span would duplicate it. */
.storia-content .chapter-heading > .chapter-heading-number {
  display: none;
}

.storia-content .chapter-heading {
  text-align: center;
  margin: 4rem 0 1.5rem;
}

/* Style internal h2 sections as chapter-heading style, with auto-numbering
   and a vintage divider before each one (except the first). */
.storia-content h2 {
  counter-increment: storia-chapter;
  position: relative;
  text-align: center;
  font-family: var(--font-italiana);
  font-size: var(--text-display);
  color: var(--color-sepia-deep);
  line-height: 1.15;
  margin: 4rem 0 1.5rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.storia-content h2::before {
  content: "Episodio " counter(storia-chapter, upper-roman);
  display: block;
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--color-gold-deep);
  margin-bottom: 0.65rem;
  font-weight: 400;
}

.storia-content h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
}

/* Vintage divider between sections (before each h2 except the first) */
.storia-content h2 + p,
.storia-content h2 ~ * {
  /* spacing handled by h2 margin */
}

.storia-content h2:not(:first-of-type) {
  padding-top: 3rem;
  position: relative;
}

.storia-content h2:not(:first-of-type)::before {
  /* keep the chapter label generated above */
}

/* Polaroid caption — keep on one short line, allow break for longer captions */
.storia-content .frame-polaroid-caption,
.frame-polaroid-caption {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: var(--fs-note);
  color: var(--color-sepia-medium);
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.35;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Polaroid grid centering for groups of 2 and 3 */
.storia-content .zm-photo-grid {
  margin: 3rem auto;
  justify-content: center;
}

.storia-content .zm-photo-grid:has(> figure:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 18rem));
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .storia-content .zm-photo-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Press closer block */
.storia-press {
  padding: 2rem 0;
}

.storia-press-body {
  font-family: var(--font-cormorant);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--color-sepia-medium);
  text-align: center;
  max-width: 36rem;
  margin: 1.5rem auto 2.5rem;
  text-wrap: pretty;
}

.storia-press-card {
  position: relative;
  background: var(--color-sepia-paper);
  border: 1px solid rgba(60, 46, 31, 0.14);
  padding: 2rem 2.25rem;
  margin: 0 auto 2rem;
  max-width: 32rem;
  box-shadow:
    0 16px 32px -16px rgba(60, 46, 31, 0.22),
    inset 0 0 0 1px rgba(184, 149, 86, 0.18);
}

.storia-press-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 149, 86, 0.3);
  pointer-events: none;
}

.storia-press-card dl {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.storia-press-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(60, 46, 31, 0.18);
}

.storia-press-row:last-of-type {
  border-bottom: 0;
}

.storia-press-row dt {
  font-family: var(--font-italiana);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-gold-deep);
  margin: 0;
}

.storia-press-row dd {
  margin: 0;
  font-family: var(--font-cormorant);
  font-size: var(--fs-body);
  color: var(--color-sepia-deep);
  word-break: break-word;
}

.storia-press-row dd a {
  color: var(--color-sepia-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(158, 79, 55, 0.45);
}

.storia-press-row dd a:hover {
  color: var(--color-rust);
  text-decoration-color: var(--color-rust);
}

.storia-press-cta {
  margin: 0;
}

.storia-coda {
  font-size: var(--text-display);
  margin: 0 0 5rem;
  line-height: 1;
}