/* ==========================================================================
   Antico Frantoio Guido Giardino
   Rebuild of the Wix site as plain HTML/CSS/JS.

   Geometry note: the source is a "classic" (non-responsive) Wix site with a
   980px content column and a separate hand-tuned 320px mobile layout. Every
   measurement below is taken from the Wix document model, expressed here as
   flow layout + padding rather than Wix's absolute positioning, so the page
   holds together between breakpoints as well as at them.
   ========================================================================== */

/* --------------------------------------------------------------- fonts --
   THE FONT LAYER. Every font declaration lives in this block and nothing
   outside it names a file, so buying a licence for the real faces is a matter
   of editing only this section.

   The design uses five commercial Monotype/Linotype faces licensed to Wix for
   Wix-hosted sites: Brandon Grotesque, Didot, Avenir LT 35 Light, Futura LT
   Light and DIN Next Light. Self-hosting those elsewhere is outside that
   licence, so each is substituted.

   The family NAMES are deliberately kept as the original face names, because
   site.css and theme.json refer to "Brandon Grotesque" etc. throughout. Keeping
   them means the rest of the stylesheet is untouched and a licence purchase is
   a file swap, not a find-and-replace.

   Substitutions were CHOSEN BY MEASUREMENT, not by eye. Candidate faces were
   rendered alongside the originals at the design's own sizes and strings, and
   the closest by text width won; see docker/verify/calibrate.mjs and
   assets/fonts/README.md for the numbers. This overruled two of the guesses in
   wix-rebuild/README.md: Josefin Sans was the worst of eleven candidates for
   body copy (18.6% too wide) and Montserrat among the worst for the nav.

     Brandon Grotesque  ->  Didact Gothic           size-adjust 92%
     Didot (italic)     ->  Playfair Display Italic  (~5% narrow, left as-is)
     Avenir LT Light    ->  Lato                     (ratio 1.0025 — no adjust)
     Futura LT Light    ->  Jost                    size-adjust 97.6%
     DIN Next Light     ->  Barlow                   (--f-din is declared but
                                                      never used by the design)

   size-adjust corrects width in the font layer rather than by touching the
   component CSS, so the measured px values above stay exactly as the design
   specifies them.

   Weight 400 only, on purpose. The design has no bold face: every
   font-weight:700 in it is browser-synthesised. Shipping a real bold would
   change glyph widths and break the measured layout.

   Two unicode-range subsets per family, as the original was split: Basic Latin
   + Latin-1 (all Italian needs, accents included) and Latin Extended-A. Both
   must be declared or ordinary text silently falls back to a system font.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: "Brandon Grotesque";                 /* Didact Gothic */
  src: url("../fonts/didact-gothic-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 92%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Brandon Grotesque";                 /* Didact Gothic */
  src: url("../fonts/didact-gothic-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 92%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Didot";                 /* Playfair Display Italic */
  src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Didot";                 /* Playfair Display Italic */
  src: url("../fonts/playfair-display-italic-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Avenir LT Light";                 /* Lato */
  src: url("../fonts/lato-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Avenir LT Light";                 /* Lato */
  src: url("../fonts/lato-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Futura LT Light";                 /* Jost */
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 97.6%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Futura LT Light";                 /* Jost */
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 97.6%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DIN Next Light";                 /* Barlow */
  src: url("../fonts/barlow-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DIN Next Light";                 /* Barlow */
  src: url("../fonts/barlow-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- tokens -- */
:root {
  /* palette — Wix theme tokens that the site actually uses */
  --white:  #ffffff;   /* color_8 / color_11 / color_36 */
  --ink:    #242a35;   /* color_20 / color_41 — page ground, body copy */
  --moss:   #65665f;   /* nav bar, footer, "Acquista tutti i prodotti" */
  --olive:  #b7b63f;   /* testimonial band, "SCOPRI I NOSTRI OLI" */
  --gold:   #d6b86e;   /* color_27 / color_44 — active nav item */
  --slate:  #414b5f;   /* color_19 — button hover */
  --grey:   #7d7c7c;   /* color_14 — form labels, muted text */
  --line:   #414141;   /* color_15 — input borders, nav-bar frame */

  /* type */
  --f-sans:   "Brandon Grotesque", "Didact Gothic", "Century Gothic", sans-serif;
  --f-serif:  "Didot", "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
  --f-avenir: "Avenir LT Light", "Lato", "Avenir Next", Avenir, sans-serif;
  --f-futura: "Futura LT Light", "Jost", Futura, "Century Gothic", sans-serif;
  --f-din:    "DIN Next Light", "Barlow", "DIN Alternate", sans-serif;

  --site: 980px;        /* the Wix content column */
  --gutter: 20px;
  --header-h: 658px;    /* HeaderContainer height */
}

/* -------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.4;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; }

.container {
  width: min(var(--site), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------- page background --
   Wix renders the page background as a fixed, parallaxing photo behind
   everything, with a solid ground colour underneath. `background-attachment:
   fixed` is the plain-CSS equivalent; mobile uses scrollType "scroll", which
   is the normal scrolling behaviour, and also avoids the iOS fixed-bg bug.
   ----------------------------------------------------------------------- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------ header --
   Desktop: a 658px block. The nav bar, both hairline rules and the tint all
   bleed to the viewport edges; the logo, hero and copy stay in the 980 column.
   Measurements taken from the live render at a 1700px viewport.
   ----------------------------------------------------------------------- */
.site-header {
  position: relative;
  height: var(--header-h);
  color: var(--white);
}
/* full-bleed 60% ink tint over the page photo */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(36, 42, 53, .6);
  pointer-events: none;
}

/* --- top bar: 63px tall, #65665F fill inside a 2px #414141 frame --------- */
.navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 63px;
  border: 2px solid var(--line);
  background: var(--moss);
}
.nav-toggle { display: none; }

.nav-menu {
  display: flex;
  align-items: center;
  margin: 0 0 0 63px;            /* first item lands at x=65 incl. the border */
  padding: 0;
  list-style: none;
}
.nav-menu a {
  display: block;
  padding: 0 15px;               /* 10px label padding + 5px anchor padding */
  font-family: var(--f-avenir);
  font-size: 15px;               /* font_9 */
  line-height: 50px;
  color: var(--white);
  text-decoration: none;
  transition: color .18s ease;
}
.nav-menu a:hover { color: var(--olive); }
.nav-menu a[aria-current="page"] { color: var(--gold); }

/* cart lives in the bar at both breakpoints, so it is a bar child */
.cart {
  position: relative;
  margin-left: auto;
  margin-right: 18px;            /* right edge 20px from the viewport */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
}
.cart svg { width: 25px; height: 30px; display: block; }
.cart .cart-count {
  position: absolute;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  font-family: var(--f-sans);
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
}

/* --- the other bar icons -------------------------------------------------
   Desktop: pinned into the bar, ending 60px from the right (the cart takes
   the last 60px). Mobile: they leave the bar and stack under the logo.
   ------------------------------------------------------------------------ */
.nav-icons {
  position: absolute;
  top: 0; right: 60px;
  z-index: 4;
  display: flex;
  align-items: center;
  height: 63px;
}
.ic-group { display: inline-flex; align-items: center; }
.ic-search { margin-right: 6px; }
.ic-login { gap: 10px; margin-right: 47px; }
.ic-social { gap: 20px; }

.nav-icons a, .nav-icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .18s ease;
}
.nav-icons a:hover, .nav-icons button:hover { opacity: .75; }
.ic-search button { width: 40px; height: 40px; }
.ic-search svg { width: 26px; height: 26px; fill: currentColor; display: block; }
.ic-login svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.ic-login .avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--white);
}
.ic-login .avatar svg { width: 14px; height: 14px; }
.ic-social img { width: 24px; height: 24px; display: block; }

/* --- rules --------------------------------------------------------------- */
.rule { position: absolute; left: 0; right: 0; z-index: 2; }
.rule--single { top: 63px; height: 5px; border-top: 1px solid var(--white); }
.rule--double {
  top: 286px; height: 8px;
  border-top: 1px solid var(--white);
  border-bottom: 2px solid var(--white);
}

.brand {
  position: absolute;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  z-index: 2;
  width: 190px;
  height: 195px;
}
.brand img { width: 100%; height: 100%; object-fit: cover; }

.hero { position: relative; z-index: 2; }
.hero-title {
  position: absolute;
  left: 50%;
  top: 371px;
  transform: translateX(-50%);
  width: min(759px, 100% - var(--gutter) * 2);
  font-family: var(--f-sans);    /* span override: brandon-grot-w01-light */
  font-weight: 400;
  font-size: 48px;
  line-height: 1.3em;
  text-align: center;
  color: var(--white);
}
.hero-sub {
  position: absolute;
  left: 50%;
  top: 432px;
  transform: translateX(-50%);
  width: min(721px, 100% - var(--gutter) * 2);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;               /* font_5 */
  line-height: 1.4em;
  text-align: center;
  color: var(--white);
}
.hero-cta {
  position: absolute;
  left: 50%;
  top: 579px;
  transform: translateX(-50%);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 145px;
  height: 40px;
  padding: 0 18px;
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* hero button: transparent with a 1px white hairline */
.btn--ghost {
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.4em;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .26); }

/* solid buttons: font_8, square, no border */
.btn--solid {
  border: 0;
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.4em;
}
.btn--olive { background: var(--olive); min-width: 182px; }
.btn--moss  { background: var(--moss);  min-width: 178px; }
.btn--olive:hover, .btn--moss:hover { background: rgba(65, 75, 95, .65); }

/* --------------------------------------------------------------- bands -- */
/* A "band" is a full-bleed horizontal strip; its content stays in the 980
   column. White bands are the opaque columns Wix floats over the photo. */
.band { position: relative; }
.band--white { background: var(--white); }
.band--ink { background: var(--ink); color: var(--white); }
.band--olive { background: var(--olive); color: var(--white); }
.band--photo {
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  color: var(--white);
}
.band--clear { background: transparent; }

/* heading flanked by hairlines (Home + I nostri Oli) */
.rule-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}
.rule-heading::before, .rule-heading::after {
  content: "";
  height: 1px;
  background: var(--ink);
}
.rule-heading h2 {
  padding: 0 24px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;                /* font_5 */
  line-height: normal;
  text-align: center;
  color: var(--ink);
}

/* heading sitting on top of a full-width hairline, knocked out with white
   (Wix does this with a `backcolor_11` span) */
.rule-behind {
  position: relative;
  text-align: center;
}
.rule-behind::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--ink);
}
.rule-behind h2 {
  position: relative;
  display: inline-block;
  padding: 0 22px;
  background: var(--white);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
  color: var(--ink);
}

/* page titles that sit over the photo, above the white band */
.page-title {
  font-family: var(--f-futura);
  font-weight: 700;
  font-style: normal;
  font-size: 46px;                /* font_2 */
  line-height: 1.3em;
  text-align: center;
  color: var(--white);
}
.page-title--serif {              /* Contatti / Rivenditori keep the Didot */
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}

/* body copy */
.prose p {
  font-family: var(--f-sans);
  font-size: 17px;                /* font_8 */
  line-height: 1.5em;
}
.prose p + p { margin-top: 1em; }
.prose--center { text-align: center; }
.prose--tall p { line-height: 2em; }
.prose b, .prose strong { font-weight: 700; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 49px;               /* 512 - (19 + 444) */
}

/* --------------------------------------------------------- slideshow -- */
/* StripContainerSlideShow: horizontal slide, 4s interval, 1s transition,
   pauses on hover. Arrows and dots exist in the original but are set to
   zero opacity, so they are present here and invisible until focused. */
.slideshow {
  position: relative;
  overflow: hidden;
  background: var(--olive);   /* the quote strip is olive, not ink */
}
.slideshow-track {
  display: flex;
  transition: transform 1s ease;
}
.slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: 85px var(--gutter);
  min-height: 269px;
}
.slide blockquote {
  max-width: 637px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;                /* font_6 */
  line-height: 1.5em;
  text-align: center;
  color: var(--white);
}
.slide cite {
  display: block;
  margin-top: 18px;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 17px;
  color: var(--white);
}
.slideshow-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slideshow-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px; height: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  opacity: 0;                     /* alpha-arrowColor: 0 */
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .2s ease;
}
.slideshow-nav button:focus-visible { opacity: 1; outline: 2px solid var(--white); }
.slideshow-nav .prev { left: 100px; }
.slideshow-nav .next { right: 100px; }
.slideshow-dots {
  position: absolute;
  left: 0; right: 0; bottom: 50px;
  display: flex;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.slideshow-dots button {
  width: 6px; height: 6px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--white);
  opacity: 0;                     /* alpha-dotsColor: 0 */
  pointer-events: auto;
  cursor: pointer;
}
.slideshow-dots button:focus-visible { opacity: 1; }

/* ---------------------------------------------------------- products -- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
}
.product-card { text-align: center; text-decoration: none; color: inherit; display: block; }
.product-card .shot {
  display: block;            /* it's a <span>; inline boxes ignore aspect-ratio */
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  overflow: hidden;
}
.product-card .shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .shot img { transform: scale(1.04); }
.product-card h3 {
  margin-top: 14px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;                /* gallery titleFont */
  line-height: 1.3;
  color: var(--ink);
}
.product-card .price {
  margin-top: 6px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 17px;                /* gallery priceFont */
  color: var(--ink);
}

/* ------------------------------------------------------------- posts -- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink);
  text-decoration: none;
  color: inherit;
}
.post-card .cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px; }
.post-card h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ink);
}
.post-card p {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card .meta {
  display: block;
  margin-top: auto;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--grey);
}

/* -------------------------------------------------------------- form -- */
.contact-form { display: grid; gap: 20px; }          /* rowSpacing 20 */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--grey);
}
.field .req { color: var(--grey); }
.field input, .field textarea {
  width: 100%;
  padding: 12px;                  /* verticalPadding 12 */
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.form-submit {
  width: 100%;
  height: 46px;
  border: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.form-submit:hover { background: rgba(65, 75, 95, .65); }
.form-note {
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
}
.form-status[hidden] { display: none; }

/* contact side column */
.contact-cols {
  display: grid;
  grid-template-columns: 531px 1fr;
  column-gap: 115px;              /* 646 - 531 */
}
.contact-cols h2 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;                /* font_6 */
  line-height: 1.3em;
  color: var(--ink);
}
.contact-cols .prose p { line-height: 1.7em; }
.contact-cols a { text-decoration: underline; }
.hours-rule { width: 54px; height: 1px; background: var(--ink); margin: 28px 0; }
.hours h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;                /* font_7 */
  color: var(--ink);
  margin-bottom: 1em;
}
.map { width: 100%; height: 337px; border: 0; display: block; }

/* ------------------------------------------------------------ footer -- */
.site-footer {
  background: var(--moss);        /* #65665F, not ink */
  color: var(--white);
  padding: 119px 0 0;             /* first heading sits at y=119 */
}
.footer-cols {
  display: grid;
  grid-template-columns: 393px 245px 1fr;   /* headings at x = 8 / 401 / 764 */
  column-gap: 0;
}
.footer-cols h2 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;                /* font_7 */
  line-height: 1.3em;
  color: var(--white);
}
.footer-cols .col-rule {
  width: 192px; height: 1px;
  background: var(--white);
  margin: 40px 0 36px;            /* heading y=119(+26) -> rule y=185 -> list y=221 */
}
.footer-cols ul { margin: 0; padding: 0; list-style: none; }
.footer-cols li {
  font-family: var(--f-sans);
  font-size: 17px;                /* font_8 */
  line-height: 1.7em;
  font-weight: 700;
}
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-cols .u a, .footer-cols a.u { text-decoration: underline; }
.footer-contact {
  margin-top: 2.4em;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.7em;
}
.footer-contact h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 36px;                /* font_5 */
  line-height: 1.3em;
  margin-bottom: .3em;
}

.footer-bottom-rule {
  margin-top: 72px;
  height: 8px;
  border-top: 1px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 30px;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.7em;
  color: var(--ink);              /* the bottom strip is dark on the moss */
}
.footer-bottom a { text-decoration: underline; }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}
.to-top svg { width: 14px; height: 14px; fill: currentColor; transform: rotate(90deg); }

/* ===================================================== responsive ====== */

/* Between the 980 column and mobile: let the column shrink. */
@media (max-width: 1019px) {
  .nav-menu { margin-left: 0; }
  .contact-cols { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

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

/* ---- mobile ------------------------------------------------------------
   Wix keeps a separate hand-tuned 320px layout. Measured from the editor's
   mobile view: header 616px, controls stacked and centred under the logo,
   body copy drops to 16px and headings to 24px.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root { --header-h: auto; --gutter: 20px; }

  /* scrollType on mobile is "scroll", not parallax */
  .page-bg { position: absolute; height: 100%; }

  .site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding-bottom: 19px;
  }

  /* bar: no fill and no frame on mobile — cart left, hamburger right */
  .navbar {
    position: static;
    align-self: stretch;
    height: 63px;
    border: 0;
    background: none;
  }
  .cart { order: -1; align-self: flex-start; margin: 24px auto 0 20px; }
  .cart svg { width: 20px; height: 24px; }
  .nav-toggle {
    order: 9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    margin-right: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    cursor: pointer;
  }
  .nav-toggle svg { width: 24px; height: 24px; fill: currentColor; }

  .nav-menu {
    position: absolute;
    left: 0; right: 0; top: 63px;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 8px 0;
    background: rgba(36, 42, 53, .96);
  }
  .nav-menu[hidden] { display: none; }
  .nav-menu a { padding: 12px 20px; font-size: 16px; line-height: 1.4; }

  .brand {
    position: static;
    transform: none;
    display: block;
    width: 90px; height: 93px;
    margin-top: 3px;
  }

  /* search / login / socials leave the bar and stack under the logo */
  .nav-icons {
    position: static;
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-top: 10px;
  }
  .ic-search { margin: 0; height: 40px; }
  .ic-login { margin: 10px 0 0; height: 40px; }
  .ic-social { margin-top: 10px; gap: 15px; }
  .ic-social img { width: 22px; height: 22px; }

  .rule--single { display: none; }
  .rule--double {
    position: static;
    align-self: stretch;
    margin-top: 29px;
  }

  .hero { position: static; width: 100%; }
  .hero-title, .hero-sub, .hero-cta {
    position: static;
    transform: none;
    width: min(280px, 100% - var(--gutter) * 2);
    margin-inline: auto;
  }
  .hero-title { margin-top: 28px; font-size: 25px; }
  .hero-sub { margin-top: 10px; font-size: 22px; }
  .hero-cta { margin-top: 59px; display: flex; justify-content: center; }
  .hero-cta .btn { min-width: 180px; height: 45px; }

  /* type scale */
  body { font-size: 16px; }
  .prose p { font-size: 16px; }
  .rule-heading { grid-template-columns: 1fr; gap: 16px; }
  .rule-heading::before, .rule-heading::after { width: 100%; }
  .rule-heading h2 { padding: 0; font-size: 24px; }
  .rule-behind::before { display: none; }
  .rule-behind h2 { padding: 0; font-size: 24px; }
  .page-title { font-size: 24px; }
  .band--photo h2 { font-size: 24px !important; }

  .two-col { grid-template-columns: 1fr; row-gap: 1.4em; }
  .contact-cols { grid-template-columns: 1fr; row-gap: 44px; }
  .field-row { grid-template-columns: 1fr; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .product-card h3 { font-size: 18px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-card h3 { font-size: 22px; }

  .slide { padding: 40px var(--gutter); min-height: 238px; }
  .slide blockquote { font-size: 17px; }
  .slideshow-nav .prev { left: 8px; }
  .slideshow-nav .next { right: 8px; }

  .site-footer { padding-top: 42px; }
  .footer-cols { grid-template-columns: 1fr; row-gap: 40px; }
  .footer-cols h2 { font-size: 19px; }
  .footer-cols li { font-size: 16px; }
  .footer-cols .col-rule { margin: 16px 0 18px; }
  .footer-contact { margin-top: 1.6em; font-size: 16px; }
  .footer-contact h3 { font-size: 23px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; font-size: 16px; }
  .footer-bottom-rule { margin-top: 40px; }

  .map { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow-track { transition: none; }
  .product-card .shot img { transition: none; }
}

/* ================================================= background images ====
   Page backgrounds, from the Wix page-background model. WebP first with a
   JPEG fallback, and a lighter file below the desktop column width.
   ======================================================================== */
.bg-grove   { background-image: url("../opt/grove-2400.jpg"); }
.bg-harvest { background-image: url("../opt/harvest-2400.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .bg-grove   { background-image: image-set(url("../opt/grove-2400.webp") type("image/webp"),
                                            url("../opt/grove-2400.jpg")  type("image/jpeg")); }
  .bg-harvest { background-image: image-set(url("../opt/harvest-2400.webp") type("image/webp"),
                                            url("../opt/harvest-2400.jpg")  type("image/jpeg")); }
}
@media (max-width: 1000px) {
  .bg-grove   { background-image: url("../opt/grove-1200.jpg"); }
  .bg-harvest { background-image: url("../opt/harvest-1200.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .bg-grove   { background-image: image-set(url("../opt/grove-1200.webp") type("image/webp"),
                                              url("../opt/grove-1200.jpg")  type("image/jpeg")); }
    .bg-harvest { background-image: image-set(url("../opt/harvest-1200.webp") type("image/webp"),
                                              url("../opt/harvest-1200.jpg")  type("image/jpeg")); }
  }
}

/* Section backgrounds (ClassicSection design.background media) */
.bg-leaves { background-image: url("../opt/leaves-2400.jpg"); }
.bg-olives { background-image: url("../opt/olives-2400.jpg"); }
.bg-bottle { background-image: url("../opt/bottle-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .bg-leaves { background-image: image-set(url("../opt/leaves-2400.webp") type("image/webp"),
                                           url("../opt/leaves-2400.jpg")  type("image/jpeg")); }
  .bg-olives { background-image: image-set(url("../opt/olives-2400.webp") type("image/webp"),
                                           url("../opt/olives-2400.jpg")  type("image/jpeg")); }
  .bg-bottle { background-image: image-set(url("../opt/bottle-1200.webp") type("image/webp"),
                                           url("../opt/bottle-1200.jpg")  type("image/jpeg")); }
}

/* ======================================================== WordPress ======
   Appended for the WordPress port. Nothing above this line was rewritten
   except the font layer; where a rule here supersedes one above, the original
   is quoted so the two can be compared.
   ========================================================================= */

/* ---- the page background ------------------------------------------------
   The rebuild paints the background on a standalone layer:

     <div class="page-bg bg-grove">
     .page-bg { position: fixed; inset: 0; z-index: -1; background-color: var(--ink);
                background-position: center; background-size: cover;
                background-repeat: no-repeat; }

   A block theme cannot emit a first-child div ahead of the header template
   part, so inc/page-background.php puts the bg-* class on <body> instead and
   body carries the photograph directly. `background-attachment: fixed` is the
   same parallax the layer div produced. The .page-bg rules above are left in
   place, unused, so a future template part could still use the div form.
   ------------------------------------------------------------------------- */
body {
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 767px) {
  /* scrollType on mobile is "scroll", and iOS mishandles fixed backgrounds. */
  body { background-attachment: scroll; }
}

/* ---- block-editor scaffolding -------------------------------------------
   WordPress wraps template parts and group blocks in extra elements. These
   keep the design's full-bleed bands full-bleed and its 980 column at 980.
   ------------------------------------------------------------------------- */
.wp-site-blocks > * { margin-block: 0; }          /* no injected block gap */
.wp-site-blocks { overflow-x: clip; }             /* the design bleeds; never scroll sideways */

/* The rebuild's .container is expressed as a constrained-layout group in the
   templates. Match its width exactly rather than relying on theme.json alone,
   which measures from a different box when a band adds padding. */
.band > .wp-block-group.has-global-padding,
.band > .container {
  width: min(var(--site), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: 0;
}

/* Headings inside bands must not inherit the editor's default margins. */
.band :where(h1, h2, h3, h4, p, ul, ol) { margin-block: 0; }

/* Skip link: WordPress emits one and the design has nowhere for it. */
.skip-link.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
  width: auto; height: auto; clip-path: none;
  z-index: 100; top: 8px; left: 8px; padding: 10px 16px;
  background: var(--white); color: var(--ink);
}

/* ---- undoing WordPress layout resets -----------------------------------
   WordPress emits, for every group block:

     :where(.is-layout-flex) > *      { margin: 0 }
     :where(.is-layout-flow) > * + *  { margin-block-start: var(--wp--style--block-gap) }

   The first wipes the margins the design uses to position the nav and push the
   cart to the right; the second inserts a 24px gap between every sibling.
   blockGap is set to 0 in theme.json, and the margins are restored here with
   enough specificity to win.

   Original rules being restored (from the header section above):
     .nav-menu { margin: 0 0 0 63px; }   first item lands at x=65 incl. border
     .cart     { margin-left: auto; margin-right: 18px; }
   ------------------------------------------------------------------------ */
.navbar > .nav-menu,
.navbar .nav-menu { margin: 0 0 0 63px; padding: 0; }

.navbar > .cart,
.navbar .cart { margin-left: auto; margin-right: 18px; }

@media (max-width: 1019px) {
  .navbar > .nav-menu,
  .navbar .nav-menu { margin-left: 0; }
}

@media (max-width: 767px) {
  .navbar > .cart,
  .navbar .cart { margin: 24px auto 0 20px; }
}

/* The navbar is a flex group; WordPress would otherwise add its own gap. */
.navbar { gap: 0; }

/* ---- mobile menu layering ------------------------------------------------
   Defect carried over from the rebuild, found by driving the browser: with the
   mobile menu open, the header's search / account / social controls paint on
   top of the panel, so they sit unreadably over the menu items and are still
   clickable through it.

   .nav-menu already carries z-index:20, but on mobile .navbar drops to
   position:static, so the menu's z-index is resolved against .site-header —
   the same stacking context the icon row's inline content paints into, and
   painting order there does not reliably put the panel above it.

   Giving .navbar its own stacking context above the icon row settles it
   deterministically. position:relative adds no offset, so layout is unchanged.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar { position: relative; z-index: 30; }
  .nav-menu { z-index: 30; }
  .nav-icons { position: relative; z-index: 1; }
}

/* ---- WooCommerce: the catalogue -----------------------------------------
   Product Collection emits its own markup, so the design's card styling is
   re-anchored onto it rather than duplicated. The classNames on the inner
   blocks (`shot` on the image, `price` on the price) are set in the pattern, so
   the two vocabularies meet halfway.

   Original selectors being re-anchored (kept above, unused by the blocks):
     .product-grid   { display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px }
     .product-card   { text-align:center }
     .product-card .shot / h3 / .price
   ------------------------------------------------------------------------- */

/* .product-grid is applied to the Product Template <ul> — the element that
   actually holds the cards, which is what it meant in the static rebuild. So
   the original grid rule above applies unchanged and only the list reset and
   WooCommerce's own flex layout need neutralising here. */
ul.product-grid,
ul.wc-block-product-template {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* WooCommerce ships `is-flex-container columns-4` on this list; the design's
   grid supersedes it. */
ul.wc-block-product-template.is-flex-container { display: grid; gap: 30px 24px; }
.wp-block-woocommerce-product-collection { margin-bottom: 0; }   /* WooCommerce sets 30px */

li.wc-block-product {
  display: block;
  text-align: center;
  color: inherit;
}
/* WooCommerce sizes these list items for its own flex layout with
   `.wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li
    { width: calc(25% - .9375em) }`
   — note the class deliberately repeated to raise specificity. Under the
   design's grid that percentage resolves against the grid CELL rather than the
   row, giving 25% of 227px minus an em: 41px cards.
   The repetition is mirrored here to win the cascade. The design's grid owns
   the columns; each item just fills its cell. */
ul.wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product,
ul.product-grid.is-flex-container.is-flex-container > li.wc-block-product,
ul.product-grid > li.wc-block-product {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: initial;
  margin: 0;
}
li.wc-block-product .shot {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  overflow: hidden;
  margin: 0;
}
li.wc-block-product .shot a { display: block; height: 100%; }
li.wc-block-product .shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
li.wc-block-product:hover .shot img { transform: scale(1.04); }

li.wc-block-product h3,
li.wc-block-product .wp-block-post-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}
li.wc-block-product h3 a { text-decoration: none; color: inherit; }

li.wc-block-product .price,
li.wc-block-product .wc-block-components-product-price {
  margin-top: 6px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
li.wc-block-product .wc-block-components-product-price del { opacity: .5; font-weight: 400; }

/* ---- WooCommerce: the eight category sections ---------------------------- */
.cat-section + .cat-section { margin-top: 64px; }
.cat-section .cat-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
  color: var(--ink);
  text-align: center;
}
.cat-section .cat-rule {
  height: 2px;
  border: 0;
  margin: 14px 0 30px;
  opacity: 1;
}

/* ---- WooCommerce: the illustrated filter bar -----------------------------
   Desktop reveals the label on hover — behaviour that used to live in the
   site's Custom CSS post (#catselector:hover #catdescription). Mobile shows
   the labels inline, as it did there.
   ------------------------------------------------------------------------- */
.cat-filter { margin: 40px 0 49px; }
.cat-filter ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.cat-filter a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ink);
}
.cat-filter-icon svg { width: 60px; height: 60px; display: block; }
.cat-filter-label {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cat-filter a:hover .cat-filter-label,
.cat-filter a:focus-visible .cat-filter-label { opacity: 1; visibility: visible; }

/* ---- WooCommerce: per-product shipping policy --------------------------- */
.ship-prod-descr {
  padding-top: 2rem;
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.6;
}
.ship-prod-descr ul { list-style: none; padding: 0; margin: 0; }



@media (max-width: 767px) {
  li.wc-block-product h3,
  li.wc-block-product .wp-block-post-title { font-size: 18px; }

  .cat-section .cat-title { font-size: 24px; }
  .cat-filter ul { flex-wrap: wrap; justify-content: center; gap: 18px; }
  .cat-filter-icon svg { width: 44px; height: 44px; }
  .cat-filter-label { opacity: 1; visibility: visible; font-size: 13px; }
}

/* ---- the category illustrations ----------------------------------------
   The artwork carries `stroke-width="5"` but sets neither `fill` nor `stroke`,
   so SVG's defaults applied — fill black, stroke none — and every icon rendered
   as a flat black silhouette. Production does the same today; it was left
   faithful at first, but a black silhouette is not what the stroke-width
   implies and `cat-limone` in particular came out as a featureless circle,
   because its outer contour filled solid and swallowed the segment lines drawn
   inside it.

   Fixed by making the artwork take `currentColor`, and colouring each icon with
   its category's accent — the same value that draws the rule under that
   category's heading further down the page, so the filter bar and the catalogue
   agree.

   Fill or stroke is decided PER ICON, because one rule does not suit all nine.
   Rendered side by side at 60px (docker/verify/shots/icon-modes.png):

     fill   arancia, biologico, box-regalo, extravergine, lime, peperoncino,
            zenzero — all read clearly as filled marks, and lime keeps the white
            segment gaps that make it a slice rather than a disc
     stroke cat-limone only — filled it is a featureless circle; stroked it is
            recognisably a lemon slice
     fill   ui-filter — stroking it produces a solid square, since its shape is
            built from filled bars rather than outlines
   ------------------------------------------------------------------------- */
.cat-filter-icon svg,
.cat-filter-icon svg * {
  fill: currentColor;
  stroke: none;
}

/* The lemon is outline art: its contour must not be filled or it swallows the
   segments inside it. A heavier stroke keeps the pale yellow readable at 60px. */
.cat-filter-icon--cat-limone svg,
.cat-filter-icon--cat-limone svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The mobile filter glyph is UI, not produce, so it keeps the hairline colour
   rather than a category accent. */
.cat-filter .ui-filter svg,
.nav-toggle svg { fill: currentColor; }
/* ======================================================= the purchase ====
   THE DESIGN CONTAINS NO ADD-TO-CART CONTROL. Product cards in the rebuild
   link to `#`; there is no button, no quantity field, no variation form, no
   stock state anywhere in the six pages.

   So this section is new design work, and it is deliberately assembled only
   from primitives the design already establishes (Part 0.5 of the plan):

     buy button      .btn--solid .btn--olive   — olive is the design's "buy"
                     colour, used for "SCOPRI I NOSTRI OLI" and the testimonial
                     band; moss is used for the quieter "Acquista tutti i
                     prodotti"
     inputs          .field  — 1px var(--line) border, square, 12px padding
     labels          17px --f-sans in var(--grey), as the contact form
     notes           .form-note — 15px var(--grey)
     headings        .rule-behind / .rule-heading treatments
     column          the 980 container, .two-col's 49px gutter

   Nothing invented. Where a control needs a primitive the design has no
   vocabulary for, it is flagged in the plan rather than improvised.
   ========================================================================= */

/* ---- layout ------------------------------------------------------------- */
.product-detail { margin-top: 26px; }
.product-detail > .wp-block-column { min-width: 0; }

.product-breadcrumb,
.product-breadcrumb a {
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
}
.product-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.product-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;             /* the band heading size */
  line-height: normal;
  color: var(--ink);
}

.product-summary .product-price,
.product-summary .wc-block-components-product-price {
  margin-top: 14px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 22px;             /* one step up from the card price */
  color: var(--ink);
}
.product-summary .wc-block-components-product-price del { opacity: .5; font-weight: 400; }

.product-short-description {
  margin-top: 20px;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.5em;
  color: var(--ink);
}

/* ---- the gallery -------------------------------------------------------
   WooCommerce's gallery ships flex-basis on the thumbnails and a zoom trigger.
   Square the main image to match the catalogue's 1:1 .shot, and lay the
   thumbnails out on the same 24px gutter the product grid uses.
   ------------------------------------------------------------------------ */
.wp-block-woocommerce-product-image-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper { background: #f4f4f4; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: auto; margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%; height: auto; display: block;
  opacity: .6;
  transition: opacity .2s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
/* the zoom magnifier: square it and use the palette rather than Woo's blue */
.woocommerce-product-gallery__trigger {
  border-radius: 0;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* ---- variation form ----------------------------------------------------
   Eight products are variable "pick your bottle" gift boxes with per-product
   attributes. WooCommerce renders a <table class="variations">; the design has
   no table vocabulary, so it is re-laid out as the contact form's field rows.
   ------------------------------------------------------------------------ */
.variations {
  width: 100%;
  margin: 26px 0 0;
  border: 0;
  border-collapse: collapse;
  display: grid;
  gap: 20px;
}
.variations tbody, .variations tr { display: contents; }
.variations th, .variations td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}
.variations th.label label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--grey);
}
.variations td.value select,
.product-summary select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
  appearance: none;
  /* the design has no chevron asset; a CSS caret keeps it in the palette */
  background-image: linear-gradient(45deg, transparent 50%, var(--line) 50%),
                    linear-gradient(135deg, var(--line) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.product-summary select:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
  text-decoration: underline;
}
.woocommerce-variation-price {
  margin-top: 20px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
.woocommerce-variation-availability { margin-top: 8px; }

/* ---- quantity + add to cart --------------------------------------------- */
form.cart,
form.variations_form { margin-top: 26px; }
form.cart:not(.variations_form) { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.woocommerce-variation-add-to-cart { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 20px; }

.quantity { display: inline-flex; flex-direction: column; }
.quantity label,
.quantity .screen-reader-text:not(:focus) {
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--grey);
}
.quantity input.qty,
.quantity input[type="number"] {
  width: 88px;
  height: 46px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
  text-align: center;
}
.quantity input.qty:focus { outline: 2px solid var(--ink); outline-offset: -2px; }

/* The buy button. Olive, square, no radius — the design has no rounded
   corners anywhere. Sized to the .btn contract. */
.single_add_to_cart_button,
button.single_add_to_cart_button,
.wp-block-button__link.add_to_cart_button,
.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 182px;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--olive);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.4em;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.single_add_to_cart_button:hover,
.wp-block-button__link.add_to_cart_button:hover { background: rgba(65, 75, 95, .65); }
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.disabled { background: var(--grey); cursor: not-allowed; }

/* WooCommerce's "View cart" link after an AJAX add — the design has no place
   for a second button beside the first, so it becomes a quiet underlined link. */
.added_to_cart.wc-forward {
  min-width: 0; height: auto; padding: 0;
  background: none; color: var(--ink);
  font-size: 15px; text-decoration: underline;
}

/* ---- stock + meta ------------------------------------------------------- */
.stock, .wc-block-components-product-stock-indicator {
  margin-top: 12px;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
}
.stock.out-of-stock { color: var(--line); font-weight: 700; }

.wp-block-woocommerce-product-meta,
.product_meta {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
}
.product_meta a { color: var(--ink); text-decoration: underline; }

/* ---- description / additional-information tabs -------------------------
   WooCommerce ships these as a tab strip with rounded pills. The design has no
   tab vocabulary and no radii, so the strip becomes a hairline-separated row of
   plain labels — the same visual language as the footer column rules.
   ------------------------------------------------------------------------ */
.product-tabs { margin-top: 64px; }
.wc-tabs-wrapper .wc-tabs,
ul.tabs.wc-tabs {
  display: flex;
  gap: 32px;
  margin: 0 0 26px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
ul.tabs.wc-tabs::before,
ul.tabs.wc-tabs::after { display: none; }
ul.tabs.wc-tabs li {
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
}
ul.tabs.wc-tabs li::before,
ul.tabs.wc-tabs li::after { display: none; }
ul.tabs.wc-tabs li a {
  padding: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--grey);
  text-decoration: none;
}
ul.tabs.wc-tabs li.active a { color: var(--ink); font-weight: 700; }
.woocommerce-Tabs-panel h2 { display: none; }   /* the tab already names it */
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel td,
.woocommerce-Tabs-panel li {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.5em;
  color: var(--ink);
}
.shop_attributes { width: 100%; border-collapse: collapse; }
.shop_attributes th, .shop_attributes td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(65, 65, 65, .2);
  text-align: left;
  vertical-align: top;
}
.shop_attributes th { width: 30%; color: var(--grey); font-weight: 400; }

@media (max-width: 767px) {
  .product-detail { display: block; }
  .product-detail > .wp-block-column + .wp-block-column { margin-top: 40px; }
  .product-title { font-size: 24px; }
  form.cart:not(.variations_form),
  .woocommerce-variation-add-to-cart { flex-direction: column; align-items: stretch; }
  .single_add_to_cart_button { width: 100%; }
  ul.tabs.wc-tabs { gap: 20px; }
}

/* ---- WooCommerce specificity, third occurrence -------------------------
   A recurring pattern worth naming, because it will happen again with any
   block whose layout this design overrides:

   WooCommerce ships descendant chains like
     `.woocommerce div.product .woocommerce-tabs ul.tabs li`        (0,4,2)
     `.woocommerce div.product div.images .flex-control-thumbs li`  (0,4,2)
   which outrank a two-class theme selector. And where it sets a PERCENTAGE
   width on a child that this design has made a grid item, the percentage
   resolves against the grid AREA rather than the row — so `width: 25%` inside a
   4-column grid yields a quarter of a quarter. That produced 41px product cards
   and 27px gallery thumbnails.

   Both are fixed by matching its chain, not by reaching for !important.
   ------------------------------------------------------------------------ */

/* the tab strip: WooCommerce's grey pills with 4px radii become plain labels
   on a hairline, matching the footer column rules */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce #content div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 32px;
  margin: 0 0 26px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--grey);
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ink);
  font-weight: 700;
}

/* gallery thumbnails: fill the grid cell instead of taking 25% of it */
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  margin: 0;
}
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .6;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; }

/* ---- one control height ------------------------------------------------
   The three controls in the buy row must agree: WooCommerce's own input and
   select rules were producing 39px selects, 48px quantity fields and a 46px
   button on the same line. 46px is the .form-submit height from the design's
   contact form, so everything lines up on that.
   ------------------------------------------------------------------------ */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart select,
.product-summary select {
  height: 46px;
  min-height: 46px;
  line-height: normal;
  box-sizing: border-box;
}
.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty,
.quantity input.qty {
  width: 88px;
  height: 46px;
  min-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ========================================================== the funnel ====
   Cart, checkout, my-account and order confirmation. None of these exist in
   the design, so — as with the purchase controls — they are assembled from
   primitives it already establishes:

     tables      hairlines in var(--line) at 20% alpha, as .shop_attributes
     inputs      .field  (1px var(--line), square, 12px padding, 46px tall)
     labels      17px --f-sans in var(--grey)
     primary     .form-submit's ink ground for "place order"
     secondary   .btn--moss for quieter actions
     buy         .btn--olive stays reserved for add-to-cart, so the funnel does
                 not compete with it
     headings    .rule-heading (page title) and .rule-behind (section)
     two columns the design's 49px gutter

   The old theme's mobile cart used a data-title pseudo-element to label stacked
   cells. That trick is the right one and is reimplemented here, in the theme
   rather than in a Custom CSS post.
   ========================================================================== */

.funnel .rule-heading h1 {
  padding: 0 24px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
  text-align: center;
  color: var(--ink);
}

/* ---- tables ------------------------------------------------------------- */
.woocommerce table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--ink);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 18px 12px;
  border: 0;
  border-bottom: 1px solid rgba(65, 65, 65, .2);
  vertical-align: middle;
  text-align: left;
}
.woocommerce table.shop_table thead th {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grey);
}
.woocommerce table.shop_table td:first-child,
.woocommerce table.shop_table th:first-child { padding-left: 0; }
.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child { padding-right: 0; text-align: right; }

.woocommerce table.cart .product-thumbnail img { width: 84px; height: auto; display: block; }
.woocommerce table.cart .product-name a { color: var(--ink); text-decoration: none; }
.woocommerce table.cart .product-name a:hover { text-decoration: underline; }
.woocommerce table.cart .product-name .variation {
  margin-top: 4px;
  font-size: 15px;
  color: var(--grey);
}
.woocommerce table.cart .product-name .variation p { margin: 0; }
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 0;
  background: none;
  color: var(--grey) !important;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce a.remove:hover { background: none; color: var(--ink) !important; }

/* ---- cart actions: coupon + update ------------------------------------- */
.woocommerce table.cart td.actions {
  padding: 26px 0 0;
  border-bottom: 0;
  text-align: left;
}
.woocommerce table.cart td.actions .coupon {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  float: none;
}
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce #coupon_code,
.woocommerce table.cart td.actions input[type="text"] {
  width: 220px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
}

/* every button in the funnel, unless overridden below */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 178px;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--moss);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4em;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: rgba(65, 75, 95, .65); color: var(--white); }
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] { background: var(--grey); cursor: not-allowed; }

/* "update cart" is the quiet one: a link, not a second solid button */
.woocommerce table.cart td.actions button[name="update_cart"],
.woocommerce table.cart td.actions input[name="update_cart"] {
  min-width: 0;
  height: auto;
  padding: 0;
  margin-left: 20px;
  background: none;
  color: var(--grey);
  font-size: 15px;
  text-decoration: underline;
}
.woocommerce table.cart td.actions button[name="update_cart"]:hover { background: none; color: var(--ink); }

/* ---- cart totals ------------------------------------------------------- */
.cart-collaterals { margin-top: 49px; display: flex; justify-content: flex-end; }
.cart-collaterals .cart_totals { width: min(460px, 100%); float: none; }
.cart-collaterals .cart_totals > h2,
.woocommerce .cart_totals h2 {
  margin-bottom: 12px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.woocommerce .cart_totals table.shop_table th { text-transform: none; font-size: 17px; color: var(--grey); }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
.woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce ul#shipping_method li { margin: 0 0 6px; padding: 0; text-indent: 0; }
.woocommerce ul#shipping_method label { font-size: 17px; color: var(--ink); }
.woocommerce .shipping-calculator-button { font-size: 15px; color: var(--grey); text-decoration: underline; }

.wc-proceed-to-checkout { margin-top: 26px; padding: 0; }
.wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 46px;
  background: var(--ink);
  font-size: 17px;
}
.wc-proceed-to-checkout a.checkout-button:hover { background: rgba(65, 75, 95, .9); }

/* ---- checkout ----------------------------------------------------------
   Billing on the left, order review on the right, on the design's 49px gutter.

   Floats, not grid, deliberately. WooCommerce emits three flat siblings —
   #customer_details, h3#order_review_heading, #order_review — with no wrapper
   around the right-hand pair. Under grid, auto-placement puts the heading in
   row 1 and the review in row 2, and because row 1 is sized by the full-height
   billing form the review lands hundreds of pixels below its own heading.
   Spanning the form across both rows does not help: grid distributes a spanning
   item's height across the rows it spans, so row 1 stays tall.

   Floats group the way this markup expects: the heading floats right, the review
   floats right beneath it with `clear: right`. It is also what WooCommerce's own
   stylesheet assumes.
   ------------------------------------------------------------------------ */
.woocommerce form.checkout { display: block; }
.woocommerce form.checkout::after { content: ""; display: table; clear: both; }
.woocommerce form.checkout #customer_details {
  float: left;
  width: calc(50% - 24.5px);      /* half the 980 column less half the 49px gutter */
}
.woocommerce form.checkout h3#order_review_heading,
.woocommerce form.checkout #order_review {
  float: right;
  clear: right;
  width: calc(50% - 24.5px);
}
.woocommerce form.checkout .col2-set { width: 100%; }
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce form.checkout .col2-set .col-2 { margin-top: 40px; }

.woocommerce .checkout h3,
.woocommerce #order_review_heading {
  margin-bottom: 20px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.woocommerce form .form-row {
  margin: 0 0 20px;
  padding: 0;
}
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--grey);
}
.woocommerce form .form-row .required { color: var(--grey); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
  box-sizing: border-box;
}
.woocommerce form .form-row textarea { height: auto; min-height: 104px; padding: 12px; resize: vertical; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; color: var(--line); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

#order_review { padding: 0; }
.woocommerce-checkout #payment {
  margin-top: 26px;
  border-radius: 0;
  background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 1px solid rgba(65, 65, 65, .2);
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 10px; }
.woocommerce-checkout #payment ul.payment_methods label { font-size: 17px; color: var(--ink); }
.woocommerce-checkout #payment div.payment_box {
  margin-top: 10px;
  padding: 16px;
  border-radius: 0;
  background: #f4f4f4;
  color: var(--ink);
  font-size: 15px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row { padding: 20px 0 0; }
.woocommerce #place_order {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 46px;
  background: var(--ink);
  font-size: 17px;
}
.woocommerce #place_order:hover { background: rgba(65, 75, 95, .9); }

/* ---- my account -------------------------------------------------------- */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 245px 1fr;
  column-gap: 49px;
  align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation { width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(65, 65, 65, .2);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.4;
}
.woocommerce-MyAccount-navigation li a { color: var(--grey); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: var(--ink); font-weight: 700; }

/* login / register: the design's own form vocabulary */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }
.woocommerce form.login,
.woocommerce form.register {
  max-width: 531px;              /* the contact form's measured column */
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.woocommerce form.login .button,
.woocommerce form.register .button { width: 100%; background: var(--ink); }

/* ---- notices ----------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-top-width: 1px;
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--ink);
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { border-color: #fb0000; }
.woocommerce-message .button,
.woocommerce-info .button { min-width: 0; height: auto; padding: 0; margin-left: 12px; background: none; color: var(--ink); font-size: 15px; text-decoration: underline; }
.woocommerce-message .button:hover { background: none; }

/* ---- order confirmation ------------------------------------------------ */
.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 26px 0 40px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.woocommerce-order-overview li {
  border: 0 !important;
  padding: 0;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
  text-transform: none;
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

/* ---- mobile: stack the cart, label each cell --------------------------
   The old theme did this in the Custom CSS post with a data-title
   pseudo-element. Same technique, now in the theme.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive tbody tr { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .woocommerce table.shop_table_responsive tbody td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }
  .woocommerce table.shop_table_responsive tbody td::before {
    content: attr(data-title) " ";
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--grey);
    text-align: left;
  }
  .woocommerce table.shop_table_responsive tbody td.product-remove::before,
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail::before { content: none; }
  .woocommerce table.shop_table_responsive tbody td.actions { display: block; }
  .woocommerce table.cart td.actions .coupon { display: flex; width: 100%; }
  .woocommerce #coupon_code { flex: 1; width: auto; }
  .woocommerce table.cart td.actions button[name="update_cart"] { margin: 16px 0 0; }

  .cart-collaterals .cart_totals { width: 100%; }
  .woocommerce form.checkout #customer_details,
  .woocommerce form.checkout h3#order_review_heading,
  .woocommerce form.checkout #order_review { float: none; width: 100%; }
  .woocommerce form.checkout h3#order_review_heading { margin-top: 40px; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; row-gap: 32px; }
  .funnel .rule-heading h1 { font-size: 24px; padding: 0; }
}

/* ---- notice variants --------------------------------------------------
   The block notice banners carry a state class — .is-info, .is-success,
   .is-error, .is-warning — each setting its own background and border at a
   higher specificity than the base class, plus a coloured SVG icon. WooCommerce's
   blue (#007cba) is not in this design's palette.

   Info and success both read as "neutral, informational" here, so they use the
   design's own hairline. Only error keeps a colour, and it borrows the chilli
   red already used by the peperoncino category rule.
   ---------------------------------------------------------------------- */
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-warning {
  background-color: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
.wc-block-components-notice-banner.is-error {
  background-color: var(--white);
  border-color: #fb0000;
  color: var(--ink);
}
.wc-block-components-notice-banner > svg {
  fill: var(--grey);
  background: none;
}
.wc-block-components-notice-banner.is-error > svg { fill: #fb0000; }
.wc-block-components-notice-banner a { color: var(--ink); text-decoration: underline; }
.wc-block-components-notice-banner .wc-block-components-notice-banner__content { font-family: var(--f-sans); font-size: 17px; }

/* the notice icon: the blue sits on the <path>, not the <svg> */
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner > svg path {
  fill: var(--grey);
}
.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner.is-error > svg path { fill: #fb0000; }

/* ---- my-account: clearfix pseudo-elements become grid items ------------
   WooCommerce's stylesheet clearfixes its wrapper with
     .woocommerce::before { content: " "; display: table }
     .woocommerce::after  { content: " "; display: table }
   In a float layout those are invisible. In a GRID container they are grid
   items, so the four cells fill as:
     ::before -> col 1, nav -> col 2, content -> col 1 row 2, ::after -> col 2
   which put the navigation on the right and squeezed the orders table into a
   245px column, where the date and total wrapped onto three lines each.

   Hide them and place the two real children explicitly, so DOM order and any
   future extra sibling cannot reshuffle the layout again.
   ---------------------------------------------------------------------- */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; display: none; }

.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-content    { grid-column: 2; grid-row: 1; }

/* WooCommerce also sets percentage widths for its float layout; under grid
   those resolve against the cell, so they must be neutralised. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: auto; max-width: none; float: none; }

/* The orders table now has the full column; keep its columns from cramping. */
.woocommerce-orders-table td.order-actions { text-align: right; }
.woocommerce-orders-table td.order-actions .button { min-width: 0; padding: 0 18px; }
.woocommerce-orders-table td.order-date,
.woocommerce-orders-table td.order-number { white-space: nowrap; }

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
}

/* ---- footer bottom: the legal line crowds out "Torna su" ----------------
   The design's bottom strip carries a short copyright and a back-to-top link.
   The company registration line is far longer, so under
   `justify-content: space-between` it took 898 of 980px and squeezed the link
   to 62px, wrapping "Torna su" onto two lines with the arrow adrift.

   Give the link its intrinsic width and let the legal text wrap in the space
   that remains.
   ---------------------------------------------------------------------- */
.footer-bottom { align-items: flex-start; gap: 32px; }
.footer-bottom > p:first-child { flex: 1 1 auto; min-width: 0; }
.footer-bottom > p:last-child { flex: 0 0 auto; }
.to-top { white-space: nowrap; }

@media (max-width: 767px) {
  .footer-bottom { gap: 16px; }
}

/* ---- audit fixes -------------------------------------------------------
   Found by the full-site audit (docker/verify/audit.mjs) across 21 pages and
   8 viewports.
   ------------------------------------------------------------------------ */

/* The front page had no h1: the design's hero title is a <p>, faithfully, and
   the first heading after it was an h2. The band heading now carries the h1 and
   must look identical to the h2 form. */
.rule-heading h1,
.rule-behind h1 {
  padding: 0 24px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
  text-align: center;
  color: var(--ink);
}
@media (max-width: 767px) {
  .rule-heading h1, .rule-behind h1 { padding: 0; font-size: 24px; }
}

/* The core Search block was entirely unthemed: a #949494 input border and a
   #32373c button on #cccccc. Same vocabulary as the contact form. */
.wp-block-search__inside-wrapper { border: 0; }
.wp-block-search__input {
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
}
.wp-block-search__input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.wp-block-search__button {
  height: 46px;
  min-width: 120px;
  margin-left: 12px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
}
.wp-block-search__button:hover { background: rgba(65, 75, 95, .9); }

/* The gallery zoom affordance kept WooCommerce's 100% radius. The design has no
   rounded corners anywhere, so square it and match the hairline weight. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger {
  border-radius: 0;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}

/* One WooCommerce blue survived on the cart: a notice icon nested deeper than
   the direct-child selector used earlier. */
.woocommerce svg[class*="notice"],
.wc-block-components-notice-banner svg,
.wc-block-components-notice-banner svg * { fill: var(--grey); }
.wc-block-components-notice-banner.is-error svg,
.wc-block-components-notice-banner.is-error svg * { fill: #fb0000; }

/* ---- the consent banner ------------------------------------------------
   CookieYes is active on every page and is part of the composition whether the
   design accounts for it or not. Its default palette put an off-brand green
   (#62a329) on every single page of the site, and at 900px and below its two
   buttons overlapped each other.
   ------------------------------------------------------------------------ */
#cookie-law-info-bar {
  border-top: 1px solid var(--line) !important;
  background: var(--white) !important;
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
#cookie-law-info-bar .cli-bar-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  justify-content: center !important;
}
#cookie-law-info-bar .cli-bar-message { color: var(--ink) !important; }
a.cli_settings_button,
#cookie-law-info-bar a.cli_settings_button {
  color: var(--ink) !important;
  text-decoration: underline !important;
  white-space: nowrap;
}
#cookie_action_close_header,
a#cookie_action_close_header {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 40px;
  border-radius: 0 !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
  white-space: nowrap;
}

/* ---- the 768-1019px hole -----------------------------------------------
   The Wix original defined exactly two layouts: a fixed 980px desktop column
   and a hand-tuned 320px mobile view. Between the mobile breakpoint (767px) and
   the point where the 980 column stops shrinking (1019px) there is no design at
   all, and the port inherited the hole.

   It shows in the footer: .footer-cols is `393px 245px 1fr`, so 638px of fixed
   track. Inside a 728px container that leaves 90px for the third column, whose
   .col-rule is a fixed 192px — it overflowed to x=850 in a 768px viewport,
   clipped only by overflow-x on .wp-site-blocks.

   Fill the hole by letting the tracks become fractional before the mobile
   layout takes over.
   ------------------------------------------------------------------------ */
/* Bounded with min-width, NOT written as a bare max-width block: these rules
   are appended after the design's own `max-width: 767px` mobile section, so an
   unbounded `max-width: 1019px` would also match at 390px and — being later in
   the file — would beat the mobile layout. That is exactly what happened: the
   contact columns came out as two 155px tracks on a phone. */
@media (min-width: 768px) and (max-width: 1019px) {
  .footer-cols { grid-template-columns: 1.6fr 1fr 1fr; column-gap: 24px; }
  .footer-cols .col-rule { width: 100%; max-width: 192px; }
  .contact-cols { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .two-col { column-gap: 32px; }
}

@media (min-width: 768px) and (max-width: 900px) {
  /* the illustrated filter bar is 8 items wide; it needs to wrap before mobile */
  .cat-filter ul { flex-wrap: wrap; justify-content: center; gap: 20px 28px; }
  .cat-filter-label { opacity: 1; visibility: visible; }
}

/* ---- remaining WooCommerce defaults ------------------------------------ */

/* tab <li> carried WooCommerce's #515151; only the <a> was themed */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { color: var(--grey); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { color: var(--ink); }

/* cart table cells carried WooCommerce's #e9e6ed background */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th { background-color: transparent; }

/* Select2 powers the country and state dropdowns on checkout and was entirely
   unthemed: #444 placeholder text in a rounded control. */
.woocommerce .select2-container--default .select2-selection--single {
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--line);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 44px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.select2-dropdown {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--moss);
  color: var(--white);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line);
  border-radius: 0;
  height: 40px;
  padding: 0 10px;
}

/* the notice icon kept a 50% radius and WooCommerce blue on checkout */
.wc-block-components-notice-banner svg,
.woocommerce-info svg, .woocommerce-message svg, .woocommerce-error svg {
  border-radius: 0;
  fill: var(--grey);
}
.wc-block-components-notice-banner svg circle,
.wc-block-components-notice-banner svg path,
.wc-block-components-notice-banner svg rect { fill: var(--grey); }
.wc-block-components-notice-banner.is-error svg,
.wc-block-components-notice-banner.is-error svg * { fill: #fb0000; }

/* ---- contact hours list -------------------------------------------------
   The design lists the opening hours as day/time pairs. A <dl> is the right
   element; the rebuild used plain text, so this needs its own rule.
   ------------------------------------------------------------------------ */
.hours dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 4px;
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--ink);
}
.hours dt { color: var(--grey); }
.hours dd { margin: 0; }

/* The contact layout follows the page's own prose, which supplies no bottom
   margin of its own, so the form's first label sat directly under the last line
   of copy. The design puts 60px between the intro and the form. */
.contact-cols { margin-top: 60px; }
.contact-cols + .map,
.map { margin-top: 49px; }

/* ---- the last of WooCommerce's defaults --------------------------------
   Each of these was found by the audit as a specific painted colour rather
   than by reading CSS, which is why they survived earlier passes.
   ------------------------------------------------------------------------ */

/* Cart table cells carried #e9e6ed as their BORDER colour (not background, which
   is what the earlier fix neutralised). */
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: rgba(65, 65, 65, .2);
}
.woocommerce table.shop_table thead th { border-bottom-color: var(--line); }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { border-top-color: var(--line); }

/* The notice icon's blue was on its BACKGROUND, not its fill. */
.wc-block-components-notice-banner svg,
.woocommerce-info svg, .woocommerce-message svg, .woocommerce-error svg {
  background: none;
  background-color: transparent;
}

/* The order-notes textarea keeps a 4px radius and its own border colour from a
   selector more specific than the generic .form-row rule. */
#order_comments,
.woocommerce form .form-row textarea#order_comments,
.woocommerce-additional-fields textarea {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--line);
  padding: 12px;
}

/* Any input the theme has not explicitly styled — including the contact form's
   honeypot — should not fall back to the browser's default #767676 border. */
.contact-form input,
.contact-form textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="search"], textarea {
  border-color: var(--line);
  border-radius: 0;
}

/* ---- mobile header regressions ----------------------------------------
   Found by comparing the mobile header against the reference element by
   element. Three separate causes, all in the header's top block.

   1. The icon stack sat 60px left of centre. The desktop rule pins the row with
      `position: absolute; top: 0; right: 60px`, and the mobile layout releases
      it with `position: static` — which makes `right` inert. But the mobile
      menu z-index fix added `position: relative` to .nav-icons, and that
      RE-ACTIVATED the inherited `right: 60px`, offsetting the whole column.
      Neutralise the offsets wherever the element is made relative.

   2. The hamburger lost its `margin-right: 5px` to WordPress's flex-layout
      reset (`:where(.is-layout-flex) > * { margin: 0 }`), the same reset that
      had already displaced the nav and the cart. It sat flush to the edge.

   3. `.ic-search` is 40x40 in the design because the rule targets
      `.ic-search button`. This theme renders a link there — search is wired to
      WordPress rather than being the original's inert control — so the size has
      to apply to the anchor too.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nav-icons {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
  }
  .navbar > .nav-toggle,
  .navbar .nav-toggle { margin-right: 5px; margin-left: 0; }
}

.ic-search a,
.ic-search button {
  width: 40px;
  height: 40px;
}
.ic-search a svg { width: 26px; height: 26px; fill: currentColor; display: block; }

/* ======================================= add-to-cart confirmation panel ====
   Replaces WooCommerce's full-bleed notice bar, which rendered outside the 980
   column and floated over the header photograph.

   Built only from the design's own primitives: a white band, the 1px --line
   hairline, the olive "buy" accent, the serif italic heading, the ink primary
   button, and — for the scrim — the very same rgba(36,42,53,.6) tint the header
   lays over its photograph.
   ========================================================================== */
.af-cart-panel[hidden] { display: none; }
.af-cart-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.af-cart-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 42, 53, .6);   /* the header's own tint */
  border: 0;
  cursor: pointer;
}
.af-cart-panel__box {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - var(--gutter) * 2);
  overflow-y: auto;
  padding: 36px 40px 40px;
  border: 1px solid var(--line);
  background: var(--white);
  animation: af-panel-in .28s ease both;
}
@keyframes af-panel-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.af-cart-panel__close {
  position: absolute;
  top: 10px; right: 14px;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey);
  font-family: var(--f-sans);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.af-cart-panel__close:hover { color: var(--ink); }

.af-cart-panel__title {
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
}
/* The olive rule is the design's "buy" accent, the same colour as the button. */
.af-cart-panel__rule {
  height: 2px;
  margin: 14px 0 24px;
  background: var(--olive);
}

.af-cart-panel__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  column-gap: 20px;
  align-items: start;
}
.af-cart-panel__shot {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;      /* the catalogue's own image ground */
  overflow: hidden;
}
.af-cart-panel__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-cart-panel__meta { display: flex; flex-direction: column; gap: 6px; }
.af-cart-panel__name {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.af-cart-panel__name:hover { text-decoration: underline; }
.af-cart-panel__qty {
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
}

.af-cart-panel__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 8px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(65, 65, 65, .2);
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--ink);
}
.af-cart-panel__summary dt { color: var(--grey); }
.af-cart-panel__summary dd { margin: 0; text-align: right; }
.af-cart-panel__free { color: var(--olive); font-weight: 700; }
.af-cart-panel__muted { color: var(--grey); font-size: 15px; }

.af-cart-panel__nudge {
  margin: 14px 0 0;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey);
}

.af-cart-panel__total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.af-cart-panel__go {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 46px;
  margin-top: 26px;
  background: var(--ink);
  color: var(--white);
  font-size: 17px;
}
.af-cart-panel__go:hover { background: rgba(65, 75, 95, .9); }

.af-cart-panel__continue {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--grey);
  text-decoration: underline;
  cursor: pointer;
}
.af-cart-panel__continue:hover { color: var(--ink); }

@media (max-width: 767px) {
  .af-cart-panel { align-items: flex-end; padding: 0; }
  .af-cart-panel__box {
    width: 100%;
    max-height: 90vh;
    padding: 28px 20px 32px;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  @keyframes af-panel-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  .af-cart-panel__title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .af-cart-panel__box { animation: none; }
}

/* ---- flow coherence fixes ---------------------------------------------- */

/* The buy button had gone MOSS: the generic `.woocommerce .button` rule is
   later in this file and overrode the olive. Olive is the design's buy colour
   (SCOPRI I NOSTRI OLI, the testimonial band), and the primary purchase action
   must not look like every secondary button. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button,
button.single_add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.woocommerce .wp-block-button__link.add_to_cart_button {
  background: var(--olive);
  color: var(--white);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover { background: rgba(65, 75, 95, .65); }
.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .single_add_to_cart_button.disabled { background: var(--grey); }

/* Notice icons: the blue sits on the svg's BACKGROUND at a specificity the
   earlier rule could not reach, so a grey glyph sat on a blue square and read
   as a solid block. */
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-warning > svg,
.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner > svg {
  background: none !important;   /* WooCommerce sets this inline-equivalent */
  background-color: transparent !important;
  border-radius: 0;
  flex: 0 0 auto;
}
.wc-block-components-notice-banner.is-error > svg { fill: #fb0000; }

/* The cart's coupon row was right-aligned because td.actions is the row's last
   child and last-child cells are right-aligned in the totals table. */
.woocommerce table.cart td.actions,
.woocommerce table.shop_table td.actions:last-child { text-align: left; }
.woocommerce table.cart td.actions .coupon { justify-content: flex-start; }
.woocommerce #coupon_code,
.woocommerce table.cart td.actions input[type="text"] {
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
}

/* Checkout: "Spedire a un indirizzo diverso?" is a TOGGLE, not a section
   heading. WooCommerce marks it up as an <h3> wrapping a checkbox and label, so
   the section-heading style put a 22px serif italic next to a bare checkbox. */
.woocommerce-shipping-fields > h3,
.woocommerce-shipping-fields #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 20px;
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: var(--ink);
}
.woocommerce-shipping-fields #ship-to-different-address label { margin: 0; color: var(--ink); }

/* Checkboxes and radios: browser defaults, misaligned with their labels. */
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"],
.woocommerce-shipping-fields input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  accent-color: var(--olive);
  vertical-align: middle;
  flex: 0 0 auto;
}
.woocommerce form .form-row.woocommerce-validated label.checkbox,
.woocommerce-form__label-for-checkbox,
.woocommerce-terms-and-conditions-wrapper label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-sans);
  font-size: 17px;
  color: var(--ink);
}
/* The terms line is a consent control, so keep it legible rather than muted. */
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
  font-size: 15px;
  color: var(--grey);
}

/* Select2's rendered value sat low and indented against the native selects. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 12px;
  padding-right: 30px;
  line-height: 44px;
}

/* ---- the cart table was not a table -----------------------------------
   WooCommerce's cart-form stylesheet sets `display: inline-flex` on the
   <table> and `display: block` on the <tbody>, so the thead and the tbody
   became SIBLING FLEX ITEMS: the column headers stacked in a 418px column on
   the left and every row was crammed into the 561px beside them. That is why
   the headings looked detached from the rows and why the coupon row appeared to
   start two-thirds across the table.

   Restore real table semantics. The design's mobile layout still overrides this
   below 767px, where the rows deliberately become stacked blocks with
   data-title labels.
   ---------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table,
.woocommerce table.cart,
.woocommerce-page .woocommerce-cart-form table.cart {
  display: table;
  width: 100%;
  table-layout: auto;
}
.woocommerce table.shop_table thead { display: table-header-group; }
.woocommerce table.shop_table tbody { display: table-row-group; width: auto; }
.woocommerce table.shop_table tfoot { display: table-footer-group; }
.woocommerce table.shop_table tr { display: table-row; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { display: table-cell; }

/* The coupon control kept a 50px height from
   `.woocommerce-page .woocommerce-cart-form #coupon_code`, which outranks a
   two-class selector. Match its chain so every control in the row is 46px. */
/* Scoped to the coupon field only: WooCommerce's quantity input also carries
   `input-text`, so a broader selector stretched every qty box to 220px. */
.woocommerce-page .woocommerce-cart-form #coupon_code {
  width: 220px;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
}
.woocommerce-page .woocommerce-cart-form td.quantity input.qty,
.woocommerce-page .woocommerce-cart-form input.qty {
  width: 88px;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
}
.woocommerce-page .woocommerce-cart-form .coupon {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  float: none;
}

@media (max-width: 767px) {
  /* the design's stacked mobile cart, restated after the block above */
  .woocommerce table.shop_table_responsive,
  .woocommerce-page .woocommerce-cart-form table.cart { display: block; }
  .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive tbody { display: block; }
  .woocommerce table.shop_table_responsive tbody tr { display: block; }
  .woocommerce table.shop_table_responsive tbody td { display: flex; }
  .woocommerce-page .woocommerce-cart-form #coupon_code { width: auto; flex: 1; }
}

/* ============================================== the sticky navigation ====
   The design's own 63px bar scrolls away with the 658px header. This is the
   second bar that reappears once it has gone — the behaviour production had via
   the outgoing theme's #stickynav.

   It reuses .navbar, .nav-menu and .cart so it IS the same component visually:
   moss fill, the 2px --line frame, Lato 15px white items, gold for the current
   page. The only change is a slightly shorter bar, so it reads as secondary to
   the header it replaces.
   ======================================================================== */
.af-sticky[hidden] { display: none; }
.af-sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;                  /* under the add-to-cart panel (200) */
  transform: translateY(-100%);
  transition: transform .28s ease;
}
.af-sticky[data-af-visible] { transform: none; }

.af-sticky__bar {
  position: static;              /* .navbar is absolute in the header; not here */
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;                  /* a touch shorter than the design's 63px */
  padding: 0;                    /* the design's bar has none; offsets come from
                                    the menu margin and the cart margin below, so
                                    the items land on the header's own x offsets */
  border: 2px solid var(--line);
  border-top: 0;
  background: var(--moss);
}

.af-sticky__nav { display: contents; }
.af-sticky__menu {
  display: flex;
  align-items: center;
  margin: 0 0 0 63px;    /* matches .nav-menu, so the first item lands at x=65 */
  padding: 0;
  list-style: none;
}
.af-sticky__menu a {
  display: block;
  padding: 0 15px;
  font-family: var(--f-avenir);
  font-size: 15px;
  line-height: 52px;
  color: var(--white);
  text-decoration: none;
  transition: color .18s ease;
}
.af-sticky__menu a:hover { color: var(--olive); }
.af-sticky__menu a[aria-current="page"] { color: var(--gold); }

.af-sticky__cart {
  position: relative;
  margin-left: auto;
  margin-right: 18px;            /* right edge 20px from the viewport, as the design */
  display: inline-flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
}
.af-sticky__cart svg { width: 23px; height: 27px; display: block; }
.af-sticky__cart .cart-count {
  position: absolute;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  font-family: var(--f-sans);
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
}

.af-sticky__toggle { display: none; }

@media (max-width: 767px) {
  .af-sticky__bar { height: 56px; padding: 0 8px 0 12px; }
  .af-sticky__toggle {
    order: 9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    cursor: pointer;
  }
  .af-sticky__toggle svg { width: 22px; height: 22px; fill: currentColor; }
  .af-sticky__cart { margin-left: auto; margin-right: 6px; }

  /* the menu becomes a panel under the bar, matching the header's mobile menu */
  .af-sticky__nav { display: block; }
  .af-sticky__menu {
    position: absolute;
    left: 0; right: 0; top: 56px;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    background: rgba(36, 42, 53, .96);
  }
  .af-sticky__menu[hidden] { display: none; }
  .af-sticky__menu a { padding: 12px 20px; font-size: 16px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .af-sticky { transition: none; }
}

/* ---- the cart count -----------------------------------------------------
   The design places the number INSIDE the bag outline, in ink, at 11px, on the
   moss bar. Measured, that is 2.48:1 — 11px text needs 4.5:1 for AA — and it
   reads as a smudge inside the bag rather than as a number.

   It becomes a badge offset to the top-right of the bag instead. Gold is the
   only palette colour that clears BOTH relevant thresholds:

     gold ground + ink text   7.51:1   (text needs 4.5:1)
     gold against the moss bar 3.02:1  (a UI component boundary needs 3:1)

   Olive was the first instinct, since olive is this design's commerce colour,
   but at 2.70:1 against moss its edge would not meet the component threshold.
   Gold is also already the header's accent — it marks the current nav item — so
   it reads as attention rather than as a new idiom.

   The badge is circular. The design has no rounded corners anywhere, with one
   exception it makes itself: .ic-login .avatar is a circle in the same bar. A
   count badge is the same kind of object, so it follows that precedent.

   Empty carts render no badge at all: the PHP emits an empty string rather than
   "0", so :empty hides it. The original always showed a 0, which is noise in the
   state most visitors are in.
   ------------------------------------------------------------------------- */
.cart .cart-count,
.af-sticky__cart .cart-count {
  position: absolute;
  left: auto;
  top: -6px;
  right: -9px;          /* clear of the bag's handle, so the silhouette reads */
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  box-sizing: border-box;
}
.cart .cart-count:empty,
.af-sticky__cart .cart-count:empty { display: none; }

@media (max-width: 767px) {
  /* the bag is smaller on mobile, so the badge tucks in a little closer */
  .cart .cart-count { top: -4px; right: -6px; min-width: 16px; height: 16px; }
}

/* ---- Select2 on mobile -------------------------------------------------
   The country and state controls came out 73px tall and inset 13px against the
   350px text inputs beside them. Three boxes are involved and each was wrong in
   a different way:

     .select2-container            42px tall — Select2's own default
     .select2-selection--single    46px — set here, so 4px taller than its parent
     .select2-selection__rendered  73px — line-height 44px PLUS 14.4px of
                                   padding top and bottom, inherited from
                                   WooCommerce's small-screen input rules, which
                                   then overflowed the 46px box

   Pin all three to the same 46px contract the native inputs use, and take the
   padding off the rendered span so only its line-height sets the height.
   ---------------------------------------------------------------------- */
.woocommerce .select2-container,
.woocommerce-page .select2-container,
.woocommerce .select2-container .selection { height: 46px; display: block; }

.woocommerce .select2-container--default .select2-selection--single {
  height: 46px;
  box-sizing: border-box;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 44px;
  padding: 0 30px 0 12px;
  line-height: 44px;
  box-sizing: border-box;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
  right: 6px;
}

/* The winning padding was
     .woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__rendered
     { padding: .9rem 1.1rem }
   whose extra `form` element selector outranked the chain used above, so the
   value read 14.4px/17.6px: the text sat 5px low and 18px over-indented against
   the native inputs beside it. Matching the chain exactly settles it. */
.woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
  height: 44px;
  padding: 0 30px 0 12px;
  line-height: 44px;
  box-sizing: border-box;
}

/* The 12px inset belongs to the rendered span, not to the selection box. The
   selection is grouped with the text inputs further up so it picks up their
   width, height, border, background and font — but it inherited their
   `padding: 0 12px` too, which then stacked with the span's own 12px and put the
   select's text 25px from the edge against the inputs' 12px. */
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single { padding: 0; }

/* ============================================== the banner statement ====
   A deliberate departure from the design. See patterns/hero.php for why: the
   original states the brand name twice — once in the logo lockup, once again in
   48px text a hundred pixels below it — and puts a double hairline between them
   as though the logo and the name were separate ideas.

   The banner now says each thing once, and the NAME is carried by text rather
   than by the lockup, because the lockup's mid-grey wordmark is not readable
   over a photograph and no reversed asset exists. Built from primitives already
   in the design — the nav's face for the name line, the page-title size and the
   heading face for the product.

   The ported .hero-sub rules (lines ~333 and ~896) are left in place although no
   template emits the class any more: site.css is a verbatim port, the comparator
   still measures .hero-sub on the rebuild side, and the rules are inert here.
   ======================================================================== */

/* One hairline, not two. The rule sits directly under the logo and reads as its
   underline; a second line 8px below it divided the banner in half through the
   middle of the photograph and separated the logo from its own name. */
.rule--double {
  top: 286px;
  height: 5px;
  border-top: 1px solid var(--white);
  border-bottom: 0;
}

.hero-eyebrow {
  position: absolute;
  left: 50%;
  top: 380px;
  transform: translateX(-50%);
  width: min(760px, 100% - var(--gutter) * 2);
  font-family: var(--f-avenir);      /* the nav's face */
  font-weight: 400;
  font-size: 15px;                   /* the nav's size */
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* The display line now carries the product, at the size the design already uses
   for page titles, in the heading face rather than the body sans. */
.hero .hero-title {
  top: 418px;
  width: min(880px, 100% - var(--gutter) * 2);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .hero-eyebrow {
    position: static;
    transform: none;
    width: min(300px, 100% - var(--gutter) * 2);
    margin: 40px auto 0;   /* the hairline spans the full width here, so the
                              statement needs clear air under it */
    font-size: 12px;
    letter-spacing: .16em;
    line-height: 1.7;      /* the name wraps to two lines at this width */
  }
  .hero .hero-title {
    top: auto;
    width: min(300px, 100% - var(--gutter) * 2);
    margin-top: 10px;
    font-size: 26px;
  }
}

/* ---- the header tint ---------------------------------------------------
   The design lays a flat rgba(36,42,53,.6) over the header photograph, and the
   rebuild's README admits the white hero text is hard to read over it. Measured:
   on the brightest of the three header photos the worst pixel behind the 15px
   name line gives white 4.01:1, under the 4.5:1 that size needs.

   A vertical gradient in the SAME ink fixes it without introducing a colour or a
   panel, and it is shaped by where the text actually sits, not by taste:

     0%    .70   the moss bar meets the photograph here; a denser edge keeps that
                 seam clean
     30%   .56   LIGHTER than the design's flat .6 — this is the middle of the
                 frame, where the photograph should be seen
     100%  .86   the hero text occupies y 380-476, which is 58-72% down, and the
                 CTA sits at 88-94%; the ink is densest exactly there

   Worst-case white contrast on that same photograph goes 4.01 -> 5.14 for the
   name line and 4.01 -> 5.53 for the display line, while the mid-frame is less
   tinted than the original. Verified by sampling rendered pixels across all
   three header photographs, not by eye.

   Note what this does NOT fix: the logo lockup. Its wordmark is mid-grey, which
   is low-contrast against a dark ground and a light one alike (~3.5:1 on ink,
   ~4.0:1 on white), so no tint rescues it — only a reversed asset would. That is
   why the brand name is set in text; see the banner statement above.
   ---------------------------------------------------------------------- */
.site-header::before {
  background: linear-gradient(
    to bottom,
    rgba(36, 42, 53, .70) 0%,
    rgba(36, 42, 53, .56) 30%,
    rgba(36, 42, 53, .86) 100%
  );
}