/* ==========================================================================
   Fruscio — Shop & product
   Enqueued on WooCommerce pages only. Implements the parts of the `shop.html`
   and `evento.html` canvases that are WooCommerce-specific: the product grid,
   the product layout and buy box, the tabs, and the event route embed.

   Everything those pages share with the inner pages — page hero, breadcrumb,
   filter bar, feature grid, info grid, split panels, checklist, CTA band and
   timeline — lives in components.css, which loads on every request.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRODUCT GRID
   The loop keeps WooCommerce's <ul class="products"> so its scripts and the
   fruscio-custom loop modules keep working; only the visual grid is ours.
   -------------------------------------------------------------------------- */
.woocommerce ul.products.fr-prods,
ul.products.fr-prods {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track never shrinks below its
     min-content, so one card image at its intrinsic width widened every column
     and pushed the row past the viewport. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fr-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Both selectors, on both breakpoints: the base rule above is matched through
   `.woocommerce ul.products.fr-prods` on every WooCommerce page, and a
   media-query override written with fewer classes loses to it regardless of
   order — which is why the grid stayed at two columns at every width. */
@media (min-width: 760px) {
  .woocommerce ul.products.fr-prods,
  ul.products.fr-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .woocommerce ul.products.fr-prods,
  ul.products.fr-prods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* WooCommerce clears its float grid with ::before/::after on the list. In a
   grid container those pseudo-elements become grid items and take the first
   cell, which left the opening card sitting in column two behind an empty
   box. */
.woocommerce ul.products.fr-prods::before,
.woocommerce ul.products.fr-prods::after,
ul.products.fr-prods::before,
ul.products.fr-prods::after {
  content: none;
  display: none;
}

/* Neutralise WooCommerce's float/percentage grid.
   woocommerce-smallscreen.css re-floats every second card through
   `[class*="columns-"] li.product:nth-child(2n)`, which outranks a plain class
   reset, so the reset has to match that shape to win. */
.woocommerce ul.products.fr-prods li.product,
.woocommerce ul.products.fr-prods[class*="columns-"] li.product,
.woocommerce ul.products.fr-prods[class*="columns-"] li.product:nth-child(2n),
ul.products.fr-prods li.product {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}

.fr-prod {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
  transition: var(--fr-t);
}

.fr-prod:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .fr-prod:hover { transform: none; }
}

.fr-prod__ph {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--fr-cream);
}

/* `.woocommerce ul.products li.product a img` sets height:auto with three
   classes, so a one-class rule here never won: the square catalogue thumbnail
   kept its own ratio inside the 4/5 frame and left a band of empty cream under
   every card image. */
.fr-prod__ph img,
.woocommerce ul.products li.product .fr-prod__ph img,
.woocommerce ul.products li.product a.fr-prod__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.fr-prod__ph .fr-prod__empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-family: var(--fr-label);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.fr-prod__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-navy);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-white);
}

.fr-prod__tag--lime { background: var(--fr-lime); color: var(--fr-navy); }
.fr-prod__tag--sold { background: var(--fr-ink); color: var(--fr-paper); }

/* WooCommerce pins its sale flash to the top-right of the card. A card is 167px
   wide on a phone, so the flash and the theme's own badge could not both fit on
   that line and printed on top of each other. They are stacked instead. */
.woocommerce ul.products li.product .fr-prod__ph .onsale,
.fr-prod__ph .onsale {
  position: absolute;
  top: 44px;
  right: auto;
  bottom: auto;
  left: 12px;
  z-index: 2;
  min-height: 0;
  margin: 0;
  padding: 5px 10px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-navy);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-white);
}

.fr-prod__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

/* Two cards side by side on a phone leave each one 167px wide, where a 20px
   padding on both sides spent a quarter of the card on empty margin and pushed
   every title onto a second line. */
@media (max-width: 599px) {
  .fr-prod__body { padding: 14px; }
}

.fr-prod__cat {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-green-deep);
}

.fr-prod__body h2,
.fr-prod__body h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin-top: 8px;
  padding: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fr-navy);
}

.fr-prod__date {
  margin-top: 6px;
  font-family: var(--fr-label);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fr-green-deep);
}

.fr-prod__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The price slot can hold a wide badge instead of an amount — the concluded
     event one is 114px — which on a phone pushed the "Scopri" link out through
     the right edge of the card. Wrapping keeps the row inside it. */
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}
.fr-prod__foot > * { min-width: 0; }

/* The concluded-event badge comes from modules/eventi-badge-live-concluso, which
   prints a maroon 16px slab in wp_head — after this stylesheet, so a one-class
   rule cannot reach it. It is restyled here, in the theme, to the same pill
   language as the other card badges; the module itself is untouched. */
.woocommerce ul.products li.product .badge-concluso,
.woocommerce div.product .badge-concluso,
.fr-prod__foot .badge-concluso,
.fr-buy .badge-concluso {
  padding: 5px 10px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-ink);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-paper);
}

.woocommerce ul.products li.product .fr-prod__foot .price,
.fr-prod__foot .price {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--fr-navy);
}

.fr-prod__foot .price del { font-size: 14px; font-weight: 500; color: var(--fr-gray-700); }
.fr-prod__foot .price ins { text-decoration: none; }

/* The round add button is WooCommerce's loop add-to-cart link, restyled. */
.woocommerce ul.products li.product .fr-prod__foot a.button,
.fr-prod__foot a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-size: 0;
  line-height: 1;
}

.fr-prod__foot a.button::after {
  content: "+";
  font-size: 20px;
  font-weight: 700;
}

.fr-prod__foot a.button.loading::after,
.fr-prod__foot a.button.added::after { content: ""; }

.fr-prod__foot a.button:hover { background: var(--fr-navy); color: var(--fr-white); }

/* A product that cannot be bought shows a plain link instead of a plus. */
.fr-prod__foot .fr-prod__go {
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-navy);
  white-space: nowrap;
}

.fr-prod__stock {
  margin-top: 10px;
  font-size: 12px;
  color: var(--fr-gray-700);
}


/* --------------------------------------------------------------------------
   2. PRODUCT LAYOUT: gallery + buy box
   -------------------------------------------------------------------------- */
.fr-product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
  align-items: start;
}

@media (min-width: 900px) { .fr-product { grid-template-columns: 1.05fr .95fr; } }

.fr-product__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--fr-r);
  background: var(--fr-cream);
}

/* woocommerce-layout.css floats the gallery and the summary at 48% inside the
   two containers this theme lays out with grid, and its selectors carry more
   classes than ours, so loading later is not enough — the reset has to match
   their shape. Without this the photograph filled half its column and the
   description sat in a 217px ribbon that lined up with nothing above it. */
.woocommerce div.product .fr-product__media div.images,
.woocommerce-page div.product .fr-product__media div.images,
.woocommerce #content div.product .fr-product__media div.images {
  float: none;
  width: 100%;
}

.woocommerce div.product div.summary.fr-buy,
.woocommerce-page div.product div.summary.fr-buy,
.woocommerce #content div.product div.summary.fr-buy {
  float: none;
  width: auto;
}

.fr-product__media .woocommerce-product-gallery { margin: 0; }
.fr-product__media img { width: 100%; height: auto; }

.fr-product__media .woocommerce-product-gallery__wrapper { margin: 0; }

.fr-product__media .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.fr-product__media .flex-control-thumbs li { margin: 0; }
.fr-product__media .flex-control-thumbs img { border-radius: 10px; cursor: pointer; }

.fr-product__media .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  margin: 0;
}

/* Buy box */
.fr-buy {
  padding: 32px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
}

@media (min-width: 900px) {
  .fr-buy { position: sticky; top: 100px; }
}

.fr-buy .price,
.woocommerce div.product .fr-buy p.price {
  margin: 0 0 6px;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--fr-navy);
}

.fr-buy .price del { font-size: 20px; font-weight: 500; color: var(--fr-gray-700); }
.fr-buy .price ins { text-decoration: none; }

.fr-buy__excerpt {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-gray-700);
}

.fr-buy__excerpt p + p { margin-top: 10px; }

.fr-buy form.cart {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.fr-buy form.cart::before,
.fr-buy form.cart::after { content: none; }

.fr-buy .quantity { display: flex; }

.fr-buy .quantity input.qty {
  width: 84px;
  height: 52px;
  padding: 0 12px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: var(--fr-white);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--fr-ink);
}

.woocommerce div.product .fr-buy form.cart button.button,
.woocommerce div.product .fr-buy form.cart button.button.alt,
.fr-buy form.cart button.button {
  flex: 1 1 auto;
  min-height: 52px;
  justify-content: center;
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-size: 15px;
}

.woocommerce div.product .fr-buy form.cart button.button:hover {
  background: var(--fr-navy);
  color: var(--fr-white);
}

/* Variations, jersey add-on and booking slots all render inside form.cart. */
.fr-buy form.cart .variations,
.fr-buy .fb-slots,
.fr-buy .mam-addon {
  flex: 1 1 100%;
  margin: 0;
}

.fr-buy form.cart .variations { border-collapse: collapse; }
.fr-buy form.cart .variations th,
.fr-buy form.cart .variations td { padding: 0 0 12px; text-align: left; vertical-align: top; }

.fr-buy form.cart .variations label {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-gray-700);
}

.fr-buy form.cart select,
.fr-buy .fb-slots select,
.fr-buy .mam-addon select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
  font-size: 15px;
}

.fr-buy .woocommerce-variation-price .price { font-size: 26px; }

.fr-buy__meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--fr-line);
  font-size: 13px;
  color: var(--fr-gray-700);
}

.fr-buy__meta .sku_wrapper,
.fr-buy__meta .posted_in,
.fr-buy__meta .tagged_as { display: block; margin-bottom: 4px; }

.fr-buy .stock { font-size: 14px; font-weight: 700; color: var(--fr-green-deep); }
.fr-buy .stock.out-of-stock { color: #C0392B; }

/* Grouped products list every child as a row. */
.fr-buy form.cart.grouped_form { display: block; }

.fr-buy table.woocommerce-grouped-product-list {
  width: 100%;
  border-collapse: collapse;
}

.fr-buy table.woocommerce-grouped-product-list td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--fr-line);
  vertical-align: middle;
}

.fr-buy table.woocommerce-grouped-product-list label { font-weight: 700; color: var(--fr-navy); }


/* WooCommerce tabs, kept for additional information and custom tabs. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: transparent;
}

.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 {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-gray-700);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--fr-navy);
  border-color: var(--fr-navy);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fr-white); }

.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 760px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fr-gray-700);
}

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

.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  border-collapse: separate;
  overflow: hidden;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--fr-line);
  font-style: normal;
}


/* Related products reuse the grid. */
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
  margin-bottom: 22px;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--fr-navy);
}

/* Result count and ordering sit outside the sticky bar. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 18px; font-size: 13px; color: var(--fr-gray-700); }

.woocommerce .woocommerce-ordering select {
  padding: 10px 14px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: var(--fr-white);
  font-size: 13px;
  font-weight: 600;
}

/* WooCommerce's own classes mapped onto the buy box design. */
.fr-buy .woocommerce-product-details__short-description {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-gray-700);
}

.fr-buy .woocommerce-product-details__short-description p + p { margin-top: 10px; }

.woocommerce div.product .fr-buy .product_meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--fr-line);
  font-size: 13px;
  color: var(--fr-gray-700);
}

.woocommerce div.product .fr-buy .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .fr-buy .woocommerce-product-rating { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   3. WOOCOMMERCE TABS, ROUTE EMBED AND BUY-BOX DETAILS
   -------------------------------------------------------------------------- */


/* Route: Komoot embed and elevation placeholder. */
.fr-route__embed {
  position: relative;
  min-height: 340px;
  border-radius: var(--fr-r);
  overflow: hidden;
  background: var(--fr-cream);
}

.fr-route__embed iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

/* ── the start lines on offer ─────────────────────────────────────────────── */

/* One card per route, read before the selector that sells them: a rider
   decides which start line, then buys it. Auto-fit rather than a fixed column
   count, because an event sells two routes or eight and neither should be a
   special case. */

.fr-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fr-routes__i {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-card);
}

.fr-routes__t {
  margin: 0;
  font-size: 21px;
  line-height: 1.15;
}

.fr-routes__t a {
  color: var(--fr-ink);
  text-decoration: none;
}

.fr-routes__t a:hover,
.fr-routes__t a:focus-visible { text-decoration: underline; }

/* The figures are the reason the card exists, so they are the one thing on it
   that is not prose. */
.fr-routes__fig {
  margin: 0;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--fr-green-deep);
}

.fr-routes__d,
.fr-routes__c {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fr-gray-700);
}

/* Places left carry a word as well as a colour: a rider who cannot tell the
   two greens apart still reads "Ultimi 7 posti". */
.fr-routes__p {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-gray-700);
}

.fr-routes__i--last .fr-routes__p { color: #9a5b00; }
.fr-routes__i--full .fr-routes__p { color: #8a2020; }


.fr-routes__links {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 14px;
  font-weight: 700;
}

.fr-routes__links a { color: var(--fr-navy); }

/* An empty price is a booking product whose price depends on the variant. */
.fr-buy .price:empty { display: none; }

/* Some products use the short description as a full editorial block: keep its
   headings in proportion inside the narrow buy box. */
.fr-buy .woocommerce-product-details__short-description h2,
.fr-buy .woocommerce-product-details__short-description h3,
.fr-buy .woocommerce-product-details__short-description h4 {
  margin-top: 18px;
  font-size: 17px;
  color: var(--fr-navy);
}

.fr-buy .woocommerce-product-details__short-description ol,
.fr-buy .woocommerce-product-details__short-description ul {
  margin-top: 10px;
  padding-left: 20px;
}

.fr-buy .woocommerce-product-details__short-description li + li { margin-top: 4px; }

/* L'Antoniana's short description is a programme by day (classes .ant-*, in
   the product's own markup): each day is a card whose body folds under its
   header. Snippet originale ID WPCode: 9214, which painted it in the old
   site's orange; here it takes the theme's colours. Days fold only under
   .fr-js, so without JS the whole programme stays readable. */
.fr-buy .ant-intro b {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  color: var(--fr-navy);
}

.fr-buy .ant-day {
  margin-top: 12px;
  border: 1px solid var(--fr-line);
  border-radius: 8px;
  overflow: hidden;
}

.fr-buy .ant-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fr-paper);
}

.fr-buy .ant-day-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fr-navy);
}

.fr-js .fr-buy .ant-day-header { cursor: pointer; }

.fr-js .fr-buy .ant-day-header::after {
  content: "+";
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--fr-green-deep);
}

.fr-js .fr-buy .ant-day.is-open .ant-day-header::after { content: "\2212"; }

.fr-buy .ant-day-header:focus-visible {
  outline: 2px solid var(--fr-green);
  outline-offset: -2px;
}

.fr-js .fr-buy .ant-day-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

.fr-js .fr-buy .ant-day.is-open .ant-day-body { max-height: 2000px; }

@media (prefers-reduced-motion: reduce) {
  .fr-js .fr-buy .ant-day-body { transition: none; }
}

.fr-buy .ant-day-content { padding: 16px; }

.fr-buy .ant-day-content b {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--fr-navy);
}

.fr-buy .ant-schedule {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 14px;
}

.fr-buy .ant-schedule td {
  padding: 6px 0;
  border-bottom: 1px solid var(--fr-line);
  vertical-align: top;
}

.fr-buy .ant-schedule td:first-child {
  width: 64px;
  padding-right: 12px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--fr-green-deep);
}

.fr-buy .ant-cta {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--fr-green);
  border-radius: 0 8px 8px 0;
  background: rgba(102, 153, 51, .08);
  color: var(--fr-navy);
}

/* --------------------------------------------------------------------------
   Cart
   --------------------------------------------------------------------------
   /carrello/ is page #7 rendered by page.php: the [woocommerce_cart] shortcode
   lands in .fr-entry, which is the editorial measure. Everything below takes
   the cart out of that measure and restyles WooCommerce's own markup — there is
   no cart template override, so every rule here has to outrank the plugin's.
   The 768px breakpoints match woocommerce-smallscreen.css, which is enqueued
   with media="only screen and (max-width: 768px)" and is what stacks the table
   into labelled rows; splitting the cart's own breakpoints anywhere else would
   leave a band of widths where the two layouts fight.
   -------------------------------------------------------------------------- */

/* A cart is a transaction, not prose: the 720px measure left the table and the
   totals stacked in the middle of a 1320px wrap with an empty half either side. */
.woocommerce-cart .fr-entry { max-width: none; }

/* WooCommerce gives its notices a 2em bottom margin, which on this page stacks
   on top of the layout's own gap. */
.woocommerce-cart .fr-entry .woocommerce-notices-wrapper > :last-child { margin-bottom: 0; }

/* Items on the left, totals on the right, once there is room for both. The
   :has() guard keeps the grid off the empty-cart state, where the only children
   are a message and a "back to shop" button that must not be split into
   columns; a browser without :has() drops the block and keeps WooCommerce's own
   float layout, which still works. */
@media (min-width: 1024px) {
  .woocommerce-cart .fr-entry .woocommerce:has(.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: 32px;
  }

  .woocommerce-cart .fr-entry .woocommerce:has(.woocommerce-cart-form) > * { min-width: 0; }
  .woocommerce-cart .fr-entry .woocommerce:has(.woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

  /* fruscio-attendees prints its roster panel as a sibling of the cart form,
     before it. Left to auto-placement it took the wide column and pushed the
     items table into the 380px one, where a six-column table overflowed the
     page and the totals ended up under the roster. It is a banner over both
     columns, like the notices above it. */
  .woocommerce-cart .fr-entry .woocommerce:has(.woocommerce-cart-form) > .fa-roster { grid-column: 1 / -1; }
  .woocommerce-cart .fr-entry .woocommerce:has(.woocommerce-cart-form) > .woocommerce-cart-form { margin: 0; }
  .woocommerce-cart .fr-entry .woocommerce:has(.woocommerce-cart-form) > .cart-collaterals { margin-top: 0; }
}

/* ── the items table ──────────────────────────────────────────────────────── */

/* `.woocommerce table.shop_table` sets a 5px radius and `margin: 0 -1px 24px 0`,
   so it needs three classes and an element to beat. */
.woocommerce-cart .fr-entry table.shop_table {
  margin: 0;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--fr-white);
}

.woocommerce-cart .fr-entry table.shop_table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--fr-line);
  background: var(--fr-paper);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.woocommerce-cart .fr-entry table.shop_table td {
  padding: 18px 16px;
  border-top: 1px solid var(--fr-line);
  vertical-align: middle;
  font-size: 15px;
  color: var(--fr-gray-700);
}

.woocommerce-cart .fr-entry table.shop_table tbody tr:first-child td { border-top: 0; }

/* `.fr-entry a` underlines every link in editorial copy; a product row is a
   table cell, not a paragraph. */
.woocommerce-cart .fr-entry td.product-name a {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-navy);
  text-decoration: none;
}

.woocommerce-cart .fr-entry td.product-name a:hover { color: var(--fr-green-deep); }

.woocommerce-cart .fr-entry td.product-price,
.woocommerce-cart .fr-entry td.product-subtotal {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fr-ink);
}

/* WooCommerce ships the cart thumbnail at 32px, which reads as a favicon next
   to a 16px product title. */
.woocommerce-cart .fr-entry table.cart td.product-thumbnail { width: 96px; }

.woocommerce-cart .fr-entry table.cart td.product-thumbnail img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--fr-r-sm);
  object-fit: cover;
  background: var(--fr-paper);
}

/* The remove control is a bare red glyph in WooCommerce, and its colour is set
   with !important — which is the only reason this rule carries one too. */
.woocommerce-cart .fr-entry table.cart td.product-remove { width: 56px; }

.woocommerce-cart .fr-entry a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-paper);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: var(--fr-gray-500) !important;
  transition: var(--fr-t);
}

.woocommerce-cart .fr-entry a.remove:hover {
  background: #C0392B;
  color: var(--fr-white) !important;
}

.woocommerce-cart .fr-entry td.product-quantity .quantity { display: flex; }

.woocommerce-cart .fr-entry td.product-quantity .quantity input.qty {
  width: 76px;
  height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: var(--fr-white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--fr-ink);
}

/* ── the coupon / update row ──────────────────────────────────────────────── */

/* The cell itself stays a table-cell: `display: flex` on a <td> takes it out of
   the table, so the browser wraps it in an anonymous shrink-to-fit cell and the
   row collapsed to 387px inside an 842px table. The two controls are laid out
   with the floats WooCommerce already applies; what was actually broken was
   their size, a 34px input beside a 49px pill on two different baselines. */
.woocommerce-cart .fr-entry table.cart td.actions {
  padding: 18px 16px;
  background: var(--fr-paper);
}

.woocommerce-cart .fr-entry table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

/* The clearfix pseudo-elements WooCommerce puts on .coupon below 768px would
   otherwise become flex items. */
.woocommerce-cart .fr-entry table.cart td.actions .coupon::before,
.woocommerce-cart .fr-entry table.cart td.actions .coupon::after { content: none; }

/* Two plugin rules pin this input: `td.actions .input-text { width: 80px }` in
   woocommerce-layout.css — which is why a coupon code was unreadable — and
   `.coupon .input-text { width: 48% }` in the small-screen sheet. */
.woocommerce-cart .fr-entry table.cart td.actions .coupon .input-text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: var(--fr-white);
  font-family: inherit;
  font-size: 15px;
  color: var(--fr-ink);
  float: none;
}

.woocommerce-cart .fr-entry table.cart td.actions .coupon .input-text::placeholder { color: var(--fr-gray-500); }

/* "Aggiorna carrello" is a correction, not the action the page is asking for,
   so it does not get the lime CTA. */
.woocommerce-cart .fr-entry table.cart td.actions button[name="update_cart"] {
  background: transparent;
  border-color: var(--fr-navy);
  color: var(--fr-navy);
}

.woocommerce-cart .fr-entry table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
  background: var(--fr-navy);
  color: var(--fr-white);
}

@media (min-width: 769px) {
  .woocommerce-cart .fr-entry table.cart td.actions .coupon {
    float: left;
    width: 62%;
  }

  .woocommerce-cart .fr-entry table.cart td.actions .coupon .button,
  .woocommerce-cart .fr-entry table.cart td.actions button[name="update_cart"] {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 22px;
    vertical-align: middle;
  }
}

/* ── the totals panel ─────────────────────────────────────────────────────── */

.woocommerce-cart .fr-entry .cart-collaterals {
  width: 100%;
  margin-top: 28px;
}

.woocommerce-cart .fr-entry .cart-collaterals::before,
.woocommerce-cart .fr-entry .cart-collaterals::after { content: none; }

/* `.woocommerce .cart-collaterals .cart_totals` floats this right at 48% with
   right-aligned text. */
.woocommerce-cart .fr-entry .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
  text-align: left;
}

/* `.fr-entry h2` is the editorial 38px heading with a 48px top margin. */
.woocommerce-cart .fr-entry .cart_totals h2 {
  margin: 0 0 18px;
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.woocommerce-cart .fr-entry .cart_totals table.shop_table {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

/* WooCommerce fixes the label column at 35% and draws a #e9e6ed rule on every
   row, both with three classes. */
.woocommerce-cart .fr-entry .cart_totals table.shop_table tr th,
.woocommerce-cart .fr-entry .cart_totals table.shop_table tr td {
  width: auto;
  padding: 13px 0;
  border-top: 1px solid var(--fr-line);
  vertical-align: middle;
  font-size: 15px;
}

.woocommerce-cart .fr-entry .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .fr-entry .cart_totals table.shop_table tr:first-child td {
  padding-top: 0;
  border-top: 0;
}

.woocommerce-cart .fr-entry .cart_totals table.shop_table th {
  font-family: var(--fr-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-gray-700);
}

.woocommerce-cart .fr-entry .cart_totals table.shop_table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fr-ink);
}

.woocommerce-cart .fr-entry .cart_totals tr.order-total th,
.woocommerce-cart .fr-entry .cart_totals tr.order-total td {
  padding-bottom: 0;
  color: var(--fr-navy);
}

.woocommerce-cart .fr-entry .cart_totals tr.order-total td strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.woocommerce-cart .fr-entry .wc-proceed-to-checkout { padding: 20px 0 0; }

.woocommerce-cart .fr-entry .wc-proceed-to-checkout::before,
.woocommerce-cart .fr-entry .wc-proceed-to-checkout::after { content: none; }

/* The theme makes every WooCommerce button an inline-flex pill, so the primary
   action of the page came out 196px wide inside a 346px panel. */
.woocommerce-cart .fr-entry .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin: 0;
  font-size: 15px;
}

/* ── the empty cart ───────────────────────────────────────────────────────── */

.woocommerce-cart .fr-entry .cart-empty { margin-bottom: 24px; }
.woocommerce-cart .fr-entry .return-to-shop { margin: 0; }

/* ── phones and small tablets ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .woocommerce-cart .fr-entry table.shop_table td { padding: 14px; }

  .woocommerce-cart .fr-entry table.cart td.actions { padding: 14px; }

  /* The small-screen sheet splits the coupon input and its button 48/48, which
     put "Applica codice promozionale" on two lines in a 156px box. Each control
     takes a row of its own instead. */
  .woocommerce-cart .fr-entry table.cart td.actions .coupon {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .woocommerce-cart .fr-entry table.cart td.actions .coupon .input-text,
  .woocommerce-cart .fr-entry table.cart td.actions .coupon .button,
  .woocommerce-cart .fr-entry table.cart td.actions > .button {
    flex: 1 1 100%;
    width: 100%;
    min-height: 46px;
    float: none;
  }

  .woocommerce-cart .fr-entry table.cart td.actions .coupon .button,
  .woocommerce-cart .fr-entry table.cart td.actions > .button {
    display: flex;
    justify-content: center;
    padding: 0 22px;
  }

  .woocommerce-cart .fr-entry table.cart td.actions > .button { margin-top: 12px; }

  /* WooCommerce hides the thumbnail outright below 768px, which leaves a cart
     row with no picture of what is in it. It comes back as the first line of
     the stacked row, with the remove control floated to its right — the float
     is shorter than the image, so nothing below it is affected. */
  .woocommerce-cart .fr-entry table.cart td.product-thumbnail {
    display: block;
    width: auto;
    padding: 14px 14px 0;
    border-top: 0;
  }

  /* Every stacked cell prints `attr(data-title) ": "` as a left float. This one
     has no data-title, so it was printing a bare ": " beside the image. */
  .woocommerce-cart .fr-entry table.cart td.product-thumbnail::before { display: none; }

  .woocommerce-cart .fr-entry table.cart td.product-remove {
    float: right;
    width: auto;
    padding: 14px 14px 0 0;
    border-top: 0;
  }

  .woocommerce-cart .fr-entry .cart-collaterals .cart_totals { padding: 20px; }
}

/* --------------------------------------------------------------------------
   Account
   --------------------------------------------------------------------------
   /mio-account/ is page #9 rendered by page.php, so like the cart it lands in
   the 720px editorial measure. WooCommerce then floats its navigation at 30%
   and the content at 68% of that, which left the registrations, documents and
   orders tables about 490px to live in. Signed out the page is a single login
   form and keeps the measure; signed in it widens and becomes a grid.
   -------------------------------------------------------------------------- */
/* Signed in, the area spans the wrap like the hero above it, so the
   navigation starts on the same edge as the page title. */
.woocommerce-account.logged-in .fr-entry { max-width: none; }

/* The content is a tool, not an article: the editorial heading scale
   (.fr-entry h2 / h3, up to 38px with a 48px lead-in) is far too loud for
   "Indirizzo di fatturazione" or a form title. */
.woocommerce-account .fr-entry .woocommerce-MyAccount-content h2,
.woocommerce-account .fr-entry .woocommerce-MyAccount-content h3 {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.woocommerce-account .fr-entry .woocommerce-MyAccount-content > * + * { margin-top: 24px; }

/* Signed out with registration open, WooCommerce prints the login and the
   sign-up forms side by side at 48% each. Give them room and the same
   tool-sized headings as the signed-in area. */
.woocommerce-account:not(.logged-in) .fr-entry:has(#customer_login) { max-width: 1040px; }

.woocommerce-account .fr-entry #customer_login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.woocommerce-account .fr-entry #customer_login::before,
.woocommerce-account .fr-entry #customer_login::after { content: none; }

.woocommerce-account .fr-entry #customer_login > .col-1,
.woocommerce-account .fr-entry #customer_login > .col-2 {
  float: none;
  width: auto;
  padding: 28px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
}

.woocommerce-account .fr-entry #customer_login h2 {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.woocommerce-account .fr-entry #customer_login form.login,
.woocommerce-account .fr-entry #customer_login form.register {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 820px) {
  .woocommerce-account .fr-entry #customer_login { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── addresses ─────────────────────────────────────────────────────────── */
.woocommerce-account .fr-entry .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.woocommerce-account .fr-entry .woocommerce-Addresses::before,
.woocommerce-account .fr-entry .woocommerce-Addresses::after { content: none; }

.woocommerce-account .fr-entry .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
}

.woocommerce-account .fr-entry .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 14px;
}

.woocommerce-account .fr-entry .woocommerce-Address-title::before,
.woocommerce-account .fr-entry .woocommerce-Address-title::after { content: none; }

.woocommerce-account .fr-entry .woocommerce-Address-title h2 {
  float: none;
  font-size: 18px;
}

.woocommerce-account .fr-entry .woocommerce-Address-title .edit {
  float: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-green-deep);
}

.woocommerce-account .fr-entry .woocommerce-Address address {
  font-style: normal;
  line-height: 1.6;
  color: var(--fr-gray-700);
}

.woocommerce-account .fr-entry .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .fr-entry .woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-account .fr-entry .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--fr-r-pill);
  border: 1px solid var(--fr-line);
  background: var(--fr-white);
  color: var(--fr-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.woocommerce-account .fr-entry .woocommerce-MyAccount-navigation a:hover { background: var(--fr-cream); }

.woocommerce-account .fr-entry .woocommerce-MyAccount-navigation .is-active a {
  background: var(--fr-navy);
  border-color: var(--fr-navy);
  color: var(--fr-white);
}

/* Below the grid the navigation is a row of pills above the content. */
.woocommerce-account .fr-entry .woocommerce-MyAccount-navigation,
.woocommerce-account .fr-entry .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.woocommerce-account .fr-entry .woocommerce-MyAccount-content { margin-top: 28px; }

/* The :has() guard keeps the grid off the signed-out login form. */
@media (min-width: 900px) {
  .woocommerce-account .fr-entry .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 48px;
  }

  /* WooCommerce clears its floats with ::before/::after; in a grid they would
     become items and take the first cells. */
  .woocommerce-account .fr-entry .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
  .woocommerce-account .fr-entry .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { content: none; }

  .woocommerce-account .fr-entry .woocommerce:has(> .woocommerce-MyAccount-navigation) > * { min-width: 0; }

  .woocommerce-account .fr-entry .woocommerce-MyAccount-navigation {
    position: sticky;
    top: calc(var(--fr-header-h) + 24px);
  }

  /* Pills hang 16px into the gutter so their labels line up with the
     page title and the breadcrumb, not the pill edge. */
  .woocommerce-account .fr-entry .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    gap: 4px;
    margin-inline-start: -16px;
  }

  .woocommerce-account .fr-entry .woocommerce-MyAccount-navigation a {
    border-color: transparent;
    background: transparent;
    border-radius: var(--fr-r-sm);
    padding: 11px 16px;
    font-size: 15px;
  }

  .woocommerce-account .fr-entry .woocommerce-MyAccount-navigation a:hover { background: var(--fr-cream); }

  .woocommerce-account .fr-entry .woocommerce-MyAccount-navigation .is-active a {
    background: var(--fr-navy);
    color: var(--fr-white);
  }

  .woocommerce-account .fr-entry .woocommerce-MyAccount-content { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Checkout
   --------------------------------------------------------------------------
   /pagamento/ is page #8 rendered by page.php: the [woocommerce_checkout]
   shortcode lands in .fr-entry, the editorial measure, so the whole form was
   720px wide with WooCommerce's 48% float columns inside it — a 346px column of
   fields next to an empty one, and the order summary stacked underneath at full
   width. Everything below takes the checkout out of that measure, splits it into
   fields and summary, and restyles WooCommerce's own markup; there is no
   checkout template override, so every rule here has to outrank the plugin's.

   The body carries .woocommerce-checkout on the order-received endpoint too, so
   each rule also names something only the form has — form.checkout, #payment,
   #order_review — and the measure is released through :has(form.checkout).
   -------------------------------------------------------------------------- */

.woocommerce-checkout .fr-entry:has(form.checkout) { max-width: none; }

.woocommerce-checkout .fr-entry .woocommerce-form-coupon-toggle { margin-bottom: 16px; }
.woocommerce-checkout .fr-entry .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 0; }

/* ── the coupon form ──────────────────────────────────────────────────────── */

/* Hidden until the toggle is clicked. jQuery's slideToggle clears the inline
   display rather than writing `block` over it, so the flex row survives being
   opened and closed — measured open, closed and open again.

   The form is a sibling of form.checkout, not one of its children, so it is not
   in the two-column grid and took the whole released measure: a 958px box for a
   ten-character coupon code. It is capped instead, which is also what tells the
   eye it is one optional control rather than the start of the form. */
.woocommerce-checkout .fr-entry form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 0 24px;
  padding: 18px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-card);
}

.woocommerce-checkout .fr-entry form.checkout_coupon::before,
.woocommerce-checkout .fr-entry form.checkout_coupon::after { content: none; }

/* `form .form-row-first/-last { width: 47% }` in woocommerce-layout.css. */
.woocommerce-checkout .fr-entry form.checkout_coupon .form-row {
  flex: 1 1 220px;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}

.woocommerce-checkout .fr-entry form.checkout_coupon .form-row-last { flex: 0 0 auto; }
.woocommerce-checkout .fr-entry form.checkout_coupon .input-text { width: 100%; }

.woocommerce-checkout .fr-entry form.checkout_coupon .button {
  min-height: 48px;
  padding: 0 22px;
}

/* ── fields on the left, the order on the right ───────────────────────────── */

@media (min-width: 1024px) {
  .woocommerce-checkout .fr-entry form.checkout {
    display: grid;
    /* The fields track is capped rather than fluid: 788px of it made a 16-digit
       Codice Fiscale and a 5-digit C.A.P. the same width as the address, and a
       field that wide stops telling you how much to type. The slack goes into
       the gap, which reads as two zones. */
    grid-template-columns: minmax(0, 640px) 460px;
    justify-content: space-between;
    align-items: start;
    column-gap: 48px;
  }

  /* Anything the gateways or a validation pass put in the form — a notice
     group, an inline error — keeps the full width and its place in the flow. */
  .woocommerce-checkout .fr-entry form.checkout > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .woocommerce-checkout .fr-entry form.checkout > #customer_details {
    grid-column: 1;
    grid-row: span 2;
  }

  .woocommerce-checkout .fr-entry form.checkout > #order_review_heading,
  .woocommerce-checkout .fr-entry form.checkout > #order_review { grid-column: 2; }
}

/* WooCommerce floats .col-1 and .col-2 at 48% each. Inside the left column that
   is 340px per field group, and this checkout has nothing in the second column
   at all: billing and shipping read better one under the other. */
.woocommerce-checkout .fr-entry form.checkout .col2-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.woocommerce-checkout .fr-entry form.checkout .col2-set::before,
.woocommerce-checkout .fr-entry form.checkout .col2-set::after { content: none; }

.woocommerce-checkout .fr-entry form.checkout .col2-set .col-1,
.woocommerce-checkout .fr-entry form.checkout .col2-set .col-2 {
  float: none;
  width: auto;
}

/* The shortcode prints both containers whether or not there is anything to put
   in them, and an empty one still takes a grid row. */
.woocommerce-checkout .fr-entry .woocommerce-shipping-fields:not(:has(h3, .form-row)),
.woocommerce-checkout .fr-entry .woocommerce-additional-fields:not(:has(h3, .form-row)) { display: none; }

.woocommerce-checkout .fr-entry form.checkout h3,
.woocommerce-checkout .fr-entry #order_review_heading {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fr-navy);
}

/* ── the fields ───────────────────────────────────────────────────────────── */

.woocommerce-checkout .fr-entry form.checkout #customer_details .form-row {
  margin: 0 0 16px;
  padding: 0;
}

.woocommerce-checkout .fr-entry form.checkout #customer_details .form-row label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--fr-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-gray-700);
}

.woocommerce-checkout .fr-entry form.checkout .form-row-first,
.woocommerce-checkout .fr-entry form.checkout .form-row-last { width: calc(50% - 8px); }

/* Two fields to a row where two fields belong together, one where they do not.
   WooCommerce only knows three widths — first, last and wide — so the pairing is
   named field by field; anything it does not name keeps the full row, which is
   also what a field another plugin adds gets. */
@media (min-width: 700px) {
  .woocommerce-checkout .fr-entry form.checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .fr-entry form.checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .woocommerce-checkout .fr-entry form.checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-checkout .fr-entry form.checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
    grid-column: span 2;
    float: none;
    width: auto;
  }

  .woocommerce-checkout .fr-entry form.checkout #billing_fcode_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_fcode_asd_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_first_name_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_last_name_field,
  .woocommerce-checkout .fr-entry form.checkout #second_partecipant_first_name_field,
  .woocommerce-checkout .fr-entry form.checkout #second_partecipant_last_name_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_postcode_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_city_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_state_field,
  .woocommerce-checkout .fr-entry form.checkout #billing_phone_field,
  .woocommerce-checkout .fr-entry form.checkout #shipping_first_name_field,
  .woocommerce-checkout .fr-entry form.checkout #shipping_last_name_field,
  .woocommerce-checkout .fr-entry form.checkout #shipping_postcode_field,
  .woocommerce-checkout .fr-entry form.checkout #shipping_city_field,
  .woocommerce-checkout .fr-entry form.checkout #shipping_state_field { grid-column: span 1; }

  /* Fiscal code and date of birth are the same question asked twice — who you
     are on paper — and both are short, so they share a row. Auto-placement is
     what makes this necessary: the fiscal code is a half-width field followed
     by a full-width one, and a full-width item cannot sit beside it, so the
     fiscal code was left alone with a hole next to it.

     Except when the ASD membership is in the cart: a second fiscal code field
     appears between them, takes the other half, and the date of birth is
     better off on a row of its own than paired with somebody's first name. */
  .woocommerce-checkout .fr-entry form.checkout .woocommerce-billing-fields__field-wrapper:not(:has(#billing_fcode_asd_field)) > #billing_age_field {
    grid-column: span 1;
  }

  /* A date and a postcode are short whatever the row is doing around them. */
  .woocommerce-checkout .fr-entry form.checkout #billing_age_field input.input-text { max-width: 220px; }
}


.woocommerce-checkout .fr-entry form.checkout .woocommerce-input-wrapper { display: block; }

.woocommerce-checkout .fr-entry form.checkout .form-row input.input-text,
.woocommerce-checkout .fr-entry form.checkout .form-row textarea { width: 100%; }

/* The province field is a select2, so the <select> the theme styles is the
   hidden one and the 28px default of select2.css is what shows. */
.woocommerce-checkout .fr-entry .select2-container .select2-selection--single {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
}

.woocommerce-checkout .fr-entry .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 46px;
  font-size: 15px;
  color: var(--fr-ink);
}

.woocommerce-checkout .fr-entry .select2-container .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 10px;
}

/* ── the order summary ────────────────────────────────────────────────────── */

.woocommerce-checkout .fr-entry #order_review {
  padding: 24px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
}

.woocommerce-checkout .fr-entry #order_review table.shop_table {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.woocommerce-checkout .fr-entry #order_review table.shop_table th,
.woocommerce-checkout .fr-entry #order_review table.shop_table td {
  padding: 13px 0;
  border-top: 1px solid var(--fr-line);
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
}

.woocommerce-checkout .fr-entry #order_review table.shop_table thead th {
  padding: 0 0 11px;
  border-top: 0;
  border-bottom: 1px solid var(--fr-line);
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.woocommerce-checkout .fr-entry #order_review table.shop_table td.product-name { color: var(--fr-ink); }

.woocommerce-checkout .fr-entry #order_review table.shop_table .product-quantity {
  color: var(--fr-gray-500);
  font-weight: 600;
}

.woocommerce-checkout .fr-entry #order_review table.shop_table th:last-child,
.woocommerce-checkout .fr-entry #order_review table.shop_table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.woocommerce-checkout .fr-entry #order_review table.shop_table tfoot th {
  font-family: var(--fr-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-gray-700);
}

.woocommerce-checkout .fr-entry #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout .fr-entry #order_review table.shop_table tfoot tr.order-total td {
  padding-bottom: 0;
  color: var(--fr-navy);
}

.woocommerce-checkout .fr-entry #order_review table.shop_table tfoot tr.order-total td strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── how to pay ───────────────────────────────────────────────────────────── */

/* WooCommerce gives #payment a lilac ground, a 5px radius and a rule under the
   method list; the panel above is the card now, so the methods sit on it. */
.woocommerce-checkout .fr-entry form.checkout #payment {
  margin-top: 24px;
  border-radius: 0;
  background: transparent;
}

.woocommerce-checkout .fr-entry form.checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
}

.woocommerce-checkout .fr-entry form.checkout #payment ul.payment_methods > li.wc_payment_method {
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
  line-height: 1.5;
}

.woocommerce-checkout .fr-entry form.checkout #payment ul.payment_methods > li.wc_payment_method:has(input:checked) { border-color: var(--fr-navy); }

.woocommerce-checkout .fr-entry form.checkout #payment ul.payment_methods > li.wc_payment_method > label {
  font-weight: 700;
  color: var(--fr-navy);
  cursor: pointer;
}

.woocommerce-checkout .fr-entry form.checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"] {
  margin: 0 12px 0 0;
  accent-color: var(--fr-green);
}

/* The default box is a #dcd7e2 slab with a CSS triangle pointing at the radio. */
.woocommerce-checkout .fr-entry form.checkout #payment div.payment_box {
  margin: 12px 0 0;
  padding: 16px;
  border-radius: var(--fr-r-sm);
  background: var(--fr-paper);
  font-size: 14px;
  color: var(--fr-gray-700);
  /* An IBAN is one 27-character word. */
  overflow-wrap: anywhere;
}

.woocommerce-checkout .fr-entry form.checkout #payment div.payment_box::before { content: none; }

.woocommerce-checkout .fr-entry form.checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout .fr-entry form.checkout #payment div.form-row.place-order {
  margin: 0;
  padding: 20px 0 0;
}

.woocommerce-checkout .fr-entry .woocommerce-privacy-policy-text p,
.woocommerce-checkout .fr-entry .woocommerce-terms-and-conditions-wrapper .form-row {
  font-size: 14px;
  color: var(--fr-gray-700);
}

.woocommerce-checkout .fr-entry .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 0 18px; }

/* The label holds the checkbox, the sentence and the required asterisk. Laying
   it out as a flex row made the asterisk a third item, so it sat alone against
   the right edge of the panel; the checkbox is taken out of the flow instead and
   the asterisk stays where the sentence ends. */
.woocommerce-checkout .fr-entry form.checkout .woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 400;
  color: var(--fr-gray-700);
  cursor: pointer;
}

.woocommerce-checkout .fr-entry form.checkout .woocommerce-terms-and-conditions-wrapper label.checkbox input {
  position: absolute;
  top: 4px;
  left: 0;
  margin: 0;
  accent-color: var(--fr-green);
}

/* The scrollable copy, shown by the "termini e condizioni" link. */
.woocommerce-checkout .fr-entry .woocommerce-terms-and-conditions {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
  box-shadow: none;
  font-size: 14px;
}

/* `#payment #place_order { float: right }` in woocommerce-layout.css, plus the
   theme's own inline-flex pill, left the one action of the page 152px wide. */
.woocommerce-checkout .fr-entry #payment #place_order {
  display: flex;
  justify-content: center;
  float: none;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 15px 26px;
  font-size: 15px;
}

/* ── tablets and phones ───────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .woocommerce-checkout .fr-entry #order_review_heading { margin-top: 36px; }
}

@media (max-width: 768px) {
  .woocommerce-checkout .fr-entry #order_review { padding: 20px; }

  .woocommerce-checkout .fr-entry form.checkout #payment ul.payment_methods > li.wc_payment_method { padding: 12px 14px; }
}

/* Two 47% columns of a 350px page is 165px, which is not a field. */
@media (max-width: 560px) {
  .woocommerce-checkout .fr-entry form.checkout .form-row-first,
  .woocommerce-checkout .fr-entry form.checkout .form-row-last {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout .fr-entry form.checkout_coupon .form-row,
  .woocommerce-checkout .fr-entry form.checkout_coupon .form-row-last { flex: 1 1 100%; }

  .woocommerce-checkout .fr-entry form.checkout_coupon .button {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}