/*
Theme Name: FundedVerse Shop
Description: Guscio dello shop identico a fundedverse.com: header, footer, font e CSS sono quelli del sito statico. Il checkout WooCommerce vive dentro quel guscio.
Version: 0.1.0
*/

/* ---- contenitore delle pagine shop, stesse misure delle sezioni del sito ---- */
.fv-shop__main {
  padding: clamp(110px, 12vw, 160px) 0 clamp(60px, 8vw, 110px);
  background: var(--fv-bg, #02060f);
}

.fv-shop__inner {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.fv-shop__title,
.fv-shop .entry-title,
.fv-shop .woocommerce-products-header__title {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fv-text, #f4f7f5);
}

/* il checkout e' una colonna sola: niente sidebar del tema */
.fv-shop .woocommerce-sidebar,
.fv-shop .woocommerce-breadcrumb { display: none; }

/* Stile dello shop allineato a fundedverse.com.
   Prima passata: colori, tipografia e pulsanti del sito applicati al
   checkout (sia blocchi che classico). Non sostituisce un tema. */

:root {
  --fv-bg: #02060f;
  --fv-panel: #070d18;
  --fv-line: rgba(244, 247, 245, 0.12);
  --fv-text: #f4f7f5;
  --fv-muted: rgba(244, 247, 245, 0.62);
  --fv-accent: #45c8b4;
  --fv-accent-dark: #0b2129;
}

body.woocommerce,
body.woocommerce-page,
body.woocommerce-checkout,
body.woocommerce-cart {
  background: var(--fv-bg);
  color: var(--fv-text);
}

.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.wc-block-components-title {
  color: var(--fv-text) !important;
  letter-spacing: -0.01em;
}

/* pannelli: carrello, riepilogo ordine, blocchi checkout */
.woocommerce-checkout-review-order,
.woocommerce-cart-form,
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.woocommerce-order,
.woocommerce-MyAccount-content {
  background: var(--fv-panel);
  border: 1px solid var(--fv-line);
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 26px);
}

.woocommerce table.shop_table,
.wc-block-components-totals-item {
  color: var(--fv-text);
  border-color: var(--fv-line);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--fv-line);
}

/* campi */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--fv-line) !important;
  border-radius: 10px !important;
  color: var(--fv-text) !important;
  padding: 12px 14px !important;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
  color: var(--fv-muted) !important;
}

/* Pulsanti: copia esatta di .fv-pr__buy, il "Buy Challenge" della home
   (gradiente, raggio 13px, ombra interna e alone verde). Prima erano
   pillole piatte e si vedeva che venivano da un altro sito. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce .checkout-button,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-block;
  padding: 13px 22px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%) !important;
  color: #032723 !important;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(69, 200, 180, 0.22);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce button.button.alt:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 12px 26px rgba(69, 200, 180, 0.32);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce #payment #place_order:active,
.woocommerce .checkout-button:active { transform: translateY(1px); }

/* il secondario (Update cart, Apply coupon) non deve competere con la
   call to action principale */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"] {
  background: transparent !important;
  border: 1px solid rgba(244, 247, 245, 0.18) !important;
  color: #f4f7f5 !important;
  box-shadow: none !important;
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover {
  border-color: #45c8b4 !important;
  box-shadow: none !important;
}

.woocommerce button[name="update_cart"][disabled] { opacity: 0.4; }

/* add-on nella pagina prodotto */
.fv-addons {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--fv-line);
  border-radius: 14px;
  background: rgba(69, 200, 180, 0.05);
}

.fv-addons legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fv-muted);
}

.fv-addons__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
}

.fv-addons__item em {
  margin-left: auto;
  font-style: normal;
  font-weight: 700;
  color: var(--fv-accent);
}

/* il prezzo e' l'elemento che si guarda per primo */
.woocommerce .price,
.wc-block-components-product-price,
.wc-block-components-totals-item__value {
  color: var(--fv-text);
  font-weight: 700;
}

.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--fv-accent);
  background: rgba(69, 200, 180, 0.08);
  color: var(--fv-text);
}

/* add-on dentro il riepilogo del checkout */
.fv-checkout-addons td { padding-top: 14px !important; }

.fv-checkout-addons__title {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fv-muted);
}

.fv-checkout-addons__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--fv-line);
  border-radius: 12px;
  color: var(--fv-text) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.fv-checkout-addons__row:hover { border-color: var(--fv-accent); }

.fv-checkout-addons__row.is-on {
  border-color: var(--fv-accent);
  background: rgba(69, 200, 180, 0.09);
}

.fv-checkout-addons__box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--fv-line);
  border-radius: 5px;
  font-size: 11px;
  color: var(--fv-accent-dark);
}

.fv-checkout-addons__row.is-on .fv-checkout-addons__box {
  background: var(--fv-accent);
  border-color: var(--fv-accent);
}

.fv-checkout-addons__price { margin-left: auto; font-weight: 700; color: var(--fv-accent); }

/* =======================================================
   Checkout classico: componenti reali di WooCommerce
   portati sul linguaggio visivo del sito.
   ======================================================= */

.woocommerce-checkout:not(.woocommerce-order-received) .fv-shop__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(20px, 2.6vw, 40px);
}

.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce { display: contents; }
.woocommerce-checkout:not(.woocommerce-order-received) form.checkout { display: contents; }

.woocommerce-checkout:not(.woocommerce-order-received) #customer_details { grid-column: 1; }
.woocommerce-checkout:not(.woocommerce-order-received) #order_review_heading { display: none; }
.woocommerce-checkout:not(.woocommerce-order-received) #order_review { grid-column: 2; position: sticky; top: 96px; }

@media (max-width: 900px) {
  .woocommerce-checkout:not(.woocommerce-order-received) .fv-shop__inner { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout:not(.woocommerce-order-received) #customer_details,
  .woocommerce-checkout:not(.woocommerce-order-received) #order_review { grid-column: 1; position: static; }
}

/* pannelli */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-order,
.woocommerce-MyAccount-content {
  padding: clamp(18px, 2.4vw, 30px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 247, 245, 0.1);
  border-radius: 18px;
}

.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-checkout #order_review .shop_table thead th {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.55) !important;
}

/* campi: stessa forma dei controlli del sito */
.woocommerce form .form-row { padding: 0 0 14px; }

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: rgba(244, 247, 245, 0.6);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  width: 100%;
  height: auto !important;
  padding: 13px 15px !important;
  background: rgba(2, 6, 15, 0.6) !important;
  border: 1px solid rgba(244, 247, 245, 0.14) !important;
  border-radius: 12px !important;
  color: #f4f7f5 !important;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  outline: 0;
  border-color: #45c8b4 !important;
  box-shadow: 0 0 0 3px rgba(69, 200, 180, 0.16);
}

.woocommerce form .form-row input.input-text::placeholder { color: rgba(244, 247, 245, 0.32); }

.select2-container--default .select2-selection--single .select2-selection__rendered { color: #f4f7f5 !important; line-height: 1.4 !important; }
.select2-dropdown { background: #070d18; border-color: rgba(244, 247, 245, 0.14); color: #f4f7f5; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #45c8b4; color: #0b2129; }

/* riepilogo ordine */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-cart .shop_table {
  background: transparent;
  border: 0;
  border-collapse: collapse;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td,
.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td {
  padding: 12px 0 !important;
  border: 0;
  border-bottom: 1px solid rgba(244, 247, 245, 0.08);
  color: #f4f7f5;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  padding-top: 16px !important;
  border-bottom: 0;
  font-size: 20px;
}

.woocommerce .variation,
.woocommerce dl.variation dt,
.woocommerce dl.variation dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(244, 247, 245, 0.55);
}

.woocommerce dl.variation dt { font-weight: 500; }
.woocommerce dl.variation p { margin: 0; }

/* coupon: in evidenza serve al programma affiliati, ma senza urlare */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  padding: 14px 18px;
  background: rgba(69, 200, 180, 0.07) !important;
  border: 1px solid rgba(69, 200, 180, 0.28);
  border-radius: 12px;
  color: #f4f7f5 !important;
  font-size: 14px;
}

.woocommerce-error { background: rgba(255, 94, 94, 0.08) !important; border-color: rgba(255, 94, 94, 0.35); }
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { color: #45c8b4; }
.woocommerce-info a, .woocommerce-message a { color: #45c8b4 !important; }

.woocommerce form.checkout_coupon {
  margin-bottom: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 247, 245, 0.1);
  border-radius: 14px;
}

/* pagamento */
.woocommerce-checkout #payment {
  margin-top: 18px;
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 1px solid rgba(244, 247, 245, 0.08);
}

.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none;
  padding: 10px 0;
  color: #f4f7f5;
}

.woocommerce-checkout #payment div.payment_box {
  background: rgba(2, 6, 15, 0.55) !important;
  border: 1px solid rgba(244, 247, 245, 0.1);
  border-radius: 12px;
  color: rgba(244, 247, 245, 0.7);
  font-size: 14px;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #payment .place-order { padding: 18px 0 0; }

.woocommerce #payment #place_order,
.woocommerce .checkout-button,
.woocommerce button.button.alt {
  width: 100%;
  font-size: 16px !important;
}

.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper {
  font-size: 13px;
  color: rgba(244, 247, 245, 0.5);
}

.woocommerce-terms-and-conditions-wrapper a { color: #45c8b4; }

/* tabella carrello */
.woocommerce-cart .product-remove a.remove { color: #45c8b4 !important; }
.woocommerce-cart td.product-name a { color: #f4f7f5; text-decoration: none; }
.woocommerce a { color: #45c8b4; }

/* ordine ricevuto */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: #f4f7f5;
}

/* l'icona che WooCommerce piazza in absolute finiva sopra il testo
   dopo aver cambiato i padding del riquadro */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none; }

.woocommerce-info, .woocommerce-message, .woocommerce-error { padding-left: 18px !important; }
.woocommerce-error li { list-style: none; }

/* dettagli della variante: etichetta e valore su una griglia, altrimenti
   WooCommerce li manda a capo in modo disordinato */
.woocommerce dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  margin: 6px 0 0;
}

.woocommerce dl.variation dt {
  grid-column: 1;
  margin: 0;
  font-weight: 500;
  color: rgba(244, 247, 245, 0.45);
}

.woocommerce dl.variation dd {
  grid-column: 2;
  margin: 0;
  color: rgba(244, 247, 245, 0.75);
}

.woocommerce dl.variation dd p { margin: 0; }

/* conferma d'ordine */
.woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 26px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 247, 245, 0.1);
  border-radius: 16px;
}

.woocommerce ul.order_details li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.5);
}

.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: #f4f7f5;
}

.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce h2 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: #f4f7f5;
}

.woocommerce .woocommerce-customer-details address {
  padding: 16px 18px;
  border: 1px solid rgba(244, 247, 245, 0.1);
  border-radius: 14px;
  color: rgba(244, 247, 245, 0.75);
  font-style: normal;
}

/* carrello: le challenge non hanno immagine, la colonna mostrava solo
   il segnaposto bianco di WooCommerce */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail { display: none; }

.woocommerce-cart table.cart img { display: none; }

/* il campo coupon usciva largo una parola */
.woocommerce-cart .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce-cart .coupon #coupon_code { width: min(240px, 60vw) !important; }

.woocommerce-cart .cart-collaterals { width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals { width: min(420px, 100%); margin-left: auto; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; }

/* la home riprodotta dal sito statico porta il suo layout: qui si
   annulla solo il contenitore usato dalle pagine dello shop */
.fv-shop--home .fv-shop__main { padding: 0; background: transparent; }

/* =======================================================
   Correzioni di coerenza
   ======================================================= */

/* PRODUCT / SUBTOTAL: WooCommerce mette uno sfondo alle celle, che
   dentro un pannello con padding si vedeva come una fascia grigia
   tagliata ai lati. Via lo sfondo, resta una riga di intestazione. */
.woocommerce table.shop_table thead,
.woocommerce table.shop_table thead tr,
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table thead th,
.woocommerce-cart table.cart thead th {
  background: transparent !important;
  border-radius: 0 !important;
}

.woocommerce table.shop_table thead th {
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(244, 247, 245, 0.12) !important;
}

/* stessa cosa per le righe zebrate e le celle "totali" */
.woocommerce table.shop_table tbody tr,
.woocommerce table.shop_table tbody td,
.woocommerce table.shop_table .cart-subtotal td,
.woocommerce table.shop_table .order-total td,
.woocommerce-cart table.cart tbody tr:nth-child(2n) td {
  background: transparent !important;
}

.woocommerce table.shop_table { border-radius: 0 !important; }

/* ---- spaziature ---- */

/* il pannello aveva padding diversi da quelli delle card del sito */
.woocommerce-checkout:not(.woocommerce-order-received) #customer_details,
.woocommerce-checkout:not(.woocommerce-order-received) #order_review {
  padding: clamp(20px, 2.4vw, 28px) !important;
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review .shop_table thead th:first-child {
  margin: 0 0 16px;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { width: 100%; float: none; }

.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 7px); }

.woocommerce form .form-row { margin: 0; }

/* riga prodotto del riepilogo: il nome e il prezzo erano incollati */
.woocommerce-checkout #order_review .shop_table .cart_item td { padding: 16px 0 !important; }
.woocommerce-checkout #order_review .shop_table .cart_item td.product-name { padding-right: 16px !important; }
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review .cart-subtotal th { padding: 14px 0 !important; }

/* il blocco add-on aveva il titolo appiccicato alla riga sopra */
.fv-checkout-addons td { padding: 18px 0 8px !important; border-bottom: 0 !important; }

/* ---- menu a tendina ---- */

/* Le tendine native si aprivano squadrate e con fasce bianche: il
   sistema le disegna chiare finche' non sa che la pagina e' scura.
   color-scheme lo dichiara, cosi' anche la lista aperta e' scura. */
:root,
.fv-shop,
.woocommerce form .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea { color-scheme: dark; }

.woocommerce form .form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345c8b4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
}

.woocommerce form .form-row select option {
  background: #070d18;
  color: #f4f7f5;
}

/* select2 (il selettore paese di WooCommerce) */
.select2-container--default .select2-selection--single {
  height: auto !important;
  padding: 13px 15px !important;
  border-radius: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); right: 10px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #45c8b4 transparent transparent !important; }

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: #070d18 !important;
  border: 1px solid rgba(244, 247, 245, 0.14) !important;
  border-radius: 12px !important;
  color: #f4f7f5 !important;
}

.select2-container--default .select2-results__option {
  background: transparent !important;
  color: rgba(244, 247, 245, 0.85) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(69, 200, 180, 0.16) !important;
  color: #f4f7f5 !important;
}

.select2-results__options { padding: 6px; }

/* select2 v4 usa classi diverse per la voce sotto il cursore: senza
   queste restava la banda grigia chiara di default */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected,
li.select2-results__option[data-selected="true"] {
  background: rgba(69, 200, 180, 0.18) !important;
  color: #f4f7f5 !important;
}

.select2-container--default .select2-results__option { border-radius: 8px; padding: 8px 10px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 10px 12px !important;
  margin-bottom: 4px;
}

.select2-container--open .select2-dropdown { padding: 6px; }
.select2-results__options { padding: 0; }

/* =======================================================
   Order received
   Il contenitore .woocommerce-order era gia' un pannello e
   dentro ci finivano altri riquadri bordati: scatole dentro
   scatole, tutto stretto. Il pannello si sposta sulle singole
   sezioni e la tabella torna a essere un elenco.
   ======================================================= */

.woocommerce-order {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.woocommerce-order .woocommerce-thankyou-order-received {
  margin: 0 0 22px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #f4f7f5;
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  margin: 0 0 22px;
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(244, 247, 245, 0.1);
  border-radius: 18px;
}

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
  margin: 0 0 16px;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.55) !important;
}

/* la tabella dentro il pannello non deve avere un bordo suo */
.woocommerce-order table.shop_table,
.woocommerce-order table.shop_table tbody,
.woocommerce-order table.shop_table tfoot {
  border: 0 !important;
  border-radius: 0 !important;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 247, 245, 0.08) !important;
  color: #f4f7f5;
  vertical-align: top;
}

.woocommerce-order table.shop_table thead th {
  padding: 0 0 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.45) !important;
}

.woocommerce-order table.shop_table td:last-child,
.woocommerce-order table.shop_table th:last-child { text-align: right; }

.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
  padding-top: 16px !important;
  border-bottom: 0 !important;
  font-size: 19px;
  font-weight: 700;
}

.woocommerce-order table.shop_table .woocommerce-table__product-name a {
  color: #f4f7f5 !important;
  font-weight: 600;
  text-decoration: none;
}

/* riepilogo in alto: le quattro voci come nel resto del sito */
.woocommerce-order .order_details {
  margin: 0 0 26px;
  padding: 18px 22px;
  list-style: none;
}

/* i dati di fatturazione vanno affiancati al resto, non in colonna
   stretta come li mette WooCommerce di default */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns,
.woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0;
}

.woocommerce-order .woocommerce-columns .col-1,
.woocommerce-order .woocommerce-columns .col-2 {
  width: 100%;
  float: none;
  padding: 0;
}

.woocommerce-order .woocommerce-customer-details address {
  margin: 0;
  line-height: 1.7;
}

/* dettagli della riga nella conferma d'ordine: WooCommerce li rende
   come lista, e in colonna stretta etichetta e valore andavano a capo
   in mezzo alla frase. Ogni voce e' una riga con etichetta e valore
   affiancati; su schermo stretto il valore va sotto. */
.woocommerce .wc-item-meta {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.woocommerce .wc-item-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 3px;
}

.woocommerce .wc-item-meta strong {
  flex: 0 0 auto;
  font-weight: 500;
  color: rgba(244, 247, 245, 0.45);
}

.woocommerce .wc-item-meta p {
  flex: 1 1 auto;
  margin: 0;
  color: rgba(244, 247, 245, 0.75);
}

/* Larghezze imposte: con il layout automatico la colonna del totale si
   prendeva 190px su 309 e il nome prodotto andava a capo ogni parola. */
.woocommerce-order table.shop_table {
  width: 100%;
  table-layout: fixed;
}

.woocommerce-order table.shop_table th:first-child,
.woocommerce-order table.shop_table td:first-child { width: 66%; }

.woocommerce-order table.shop_table th:last-child,
.woocommerce-order table.shop_table td:last-child { width: 34%; white-space: normal; }

@media (max-width: 600px) {
  .woocommerce-order table.shop_table th,
  .woocommerce-order table.shop_table td { padding: 12px 0 !important; font-size: 14px; }
  .woocommerce-order table.shop_table td:first-child { padding-right: 14px !important; }

  .woocommerce-order .order_details { padding: 16px 18px; gap: 12px 20px; }
}

/* Il checkout e' una griglia a due colonne e form.checkout usa
   display:contents, quindi TUTTI i fratelli diventano celle: il form
   del coupon, appena aperto, finiva nella colonna di destra accanto
   alla barra "Have a coupon?". Questi blocchi devono occupare l'intera
   larghezza e stare sopra le due colonne. */
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-notices-wrapper,
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-form-coupon-toggle,
.woocommerce-checkout:not(.woocommerce-order-received) form.checkout_coupon,
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-form-login-toggle,
.woocommerce-checkout:not(.woocommerce-order-received) form.woocommerce-form-login {
  grid-column: 1 / -1;
}

/* il form aperto: campo e pulsante su una riga, larghezza piena */
.woocommerce form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}

.woocommerce form.checkout_coupon .form-row {
  width: auto;
  padding: 0;
  margin: 0;
}

.woocommerce form.checkout_coupon .form-row-first { flex: 1 1 260px; }
.woocommerce form.checkout_coupon .form-row-last { flex: 0 0 auto; }

.woocommerce form.checkout_coupon .form-row label { display: none; }

.woocommerce form.checkout_coupon #coupon_code {
  width: 100% !important;
  min-width: 0;
}

/* il testo introduttivo, non il campo: in questo markup il primo <p>
   e' la riga dell'input, e con :first-child gli finiva addosso un
   flex-basis del 100% che mandava il pulsante a capo */
.woocommerce form.checkout_coupon > p:not(.form-row) {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  color: rgba(244, 247, 245, 0.55);
}