/* ==========================================================================
   WooCommerce — overrides para single product, carrito, checkout, mi-cuenta,
   notices, breadcrumbs y formularios. El estilo de la archive/Tienda y de las
   product-cards vive en 03-tienda.css; aquí cubrimos todo lo demás.

   Aproximación: aplicamos design tokens del tema (Aileron, marrón #8f5d46,
   radius 8, borders 2px) sin reescribir el HTML que inyecta WooCommerce —
   sólo apuntamos a sus selectores estándar.
   ========================================================================== */

/* ==========================================================================
   Wrapper genérico WC — main heredando el padding del tema cuando NO hay
   banner ni Elementor (singles de producto, etc.)
   ========================================================================== */
.woocommerce-main {
  padding-block: var(--section-padding-y);
}

/* Breadcrumb — Inter, color marrón, separadores discretos */
.woocommerce-breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text-light);
  margin: 0 0 2rem;
}

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

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   Notices (mensajes, errores, info) — banda marrón clara con borde brand
   ========================================================================== */
.woocommerce-notices-wrapper {
  margin-bottom: 1.5rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-no-products-found {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background-color: var(--color-primary-alpha-10);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius);
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text);
  list-style: none;
}

.woocommerce-message {
  border-left-color: var(--color-secondary);
  background-color: rgba(var(--color-secondary-rgb), 0.10);
}

/* woocommerce.css pone position:absolute en ::before — lo reseteamos para
   que no se solape con el texto dentro de nuestro flex container. */
.woocommerce-message::before,
.woocommerce-info::before {
  position: static;
  top: auto;
  left: auto;
}

.woocommerce-error {
  border-left-color: var(--color-accent);
  background-color: rgba(var(--color-accent-rgb), 0.08);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  margin-left: auto;
}

/* ==========================================================================
   Single product — frame Figma sin diseño explícito; replicamos el patrón
   "imagen 1/2 + summary 1/2" con tipografía Obrador y precios marrón.
   ========================================================================== */
.single-product div.product {
  display: grid;
  gap: 2rem;
}

.single-product div.product::before,
.single-product div.product::after {
  content: none;
  display: none;
}

.woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  border-radius: var(--border-radius-image);
  overflow: hidden;
  background-color: var(--color-primary-alpha-10);
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

.woocommerce-product-gallery__trigger {
  z-index: 2;
  top: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 18px;
  color: var(--color-primary);
}

.summary.entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.summary .product_title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-hero-size);
  line-height: var(--line-height-display);
  color: var(--color-primary);
  margin: 0 0 1rem;
}

.woocommerce div.product .summary p.price,
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price .amount {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-price-size);
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

/* Un importe es un valor atómico: nunca debe partirse en dos líneas. Contrarresta
   el `overflow-wrap: break-word` global (01-base.css) en celdas estrechas como las
   del carrito apilado en móvil, donde "26,40 €" se rompía tras "26". */
.woocommerce-Price-amount.amount {
  white-space: nowrap;
}

.summary .woocommerce-product-details__short-description {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.summary .product_meta {
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text-light);
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.summary .product_meta > span {
  display: block;
  margin-bottom: 0.25rem;
}

.summary .product_meta a {
  color: var(--color-primary);
  text-decoration: none;
}

.summary .product_meta a:hover,
.summary .product_meta a:focus {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .single-product div.product {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: start;
  }

  /* Tabs y productos relacionados: fila completa debajo del binomio imagen+summary */
  .single-product .woocommerce-tabs,
  .single-product .related.products,
  .single-product .upsells.products {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Quantity input — replica el aspecto de las inputs del tema
   ========================================================================== */
.quantity {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: var(--button-height);
}

.quantity input.qty {
  width: 64px;
  height: 100%;
  padding: 0 0.5rem;
  border: 0;
  background-color: transparent;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-ui-size);
  color: var(--color-primary);
  text-align: center;
  -moz-appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity input.qty:focus {
  outline: none;
}

/* ==========================================================================
   Tabs WooCommerce (Descripción, Información, Valoraciones)
   ========================================================================== */
.woocommerce-tabs {
  margin-top: 3rem;
}

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--color-primary-alpha-20);
}

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

.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-ui-size);
  color: var(--color-text-light);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 150ms ease, border-color 150ms ease;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:focus {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.woocommerce-tabs .panel {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.woocommerce-tabs .panel h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.6);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Productos relacionados / up-sells — reutiliza los estilos de product-card
   pero con su título de sección destacado
   ========================================================================== */
.related.products,
.upsells.products {
  margin-top: 3.5rem;
}

.related.products > h2,
.upsells.products > h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.7);
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Carrito — tabla de productos
   ========================================================================== */
.woocommerce-cart-form {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.shop_table,
.woocommerce-cart-form .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
}

/* table-layout: fixed evita que el algoritmo auto distribuya espacio extra
   a columnas con width porcentual — el ancho queda fijado por la primera fila. */
.woocommerce-cart-form .shop_table {
  table-layout: fixed;
}

.shop_table thead {
  background-color: var(--color-primary-alpha-10);
}

.shop_table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary-alpha-20);
}

.shop_table tbody td,
.shop_table tfoot td,
.shop_table tfoot th {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.shop_table .product-thumbnail img {
  width: 80px;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
}

/* woocommerce-layout.css impone width:32px con especificidad 0,2,2 — superamos. */
.woocommerce-cart .shop_table .product-thumbnail img,
.woocommerce-checkout .shop_table .product-thumbnail img {
  width: 80px;
  height: auto;
}

/* Columnas con ancho fijo para que table-layout:fixed las respete exactamente. */
.shop_table .product-remove   { width: 44px; }
.shop_table .product-thumbnail { width: 100px; }
.shop_table .product-price    { width: 90px; }
.shop_table .product-quantity { width: 130px; }
.shop_table .product-subtotal { width: 90px; }
/* product-name ocupa el resto (sin width → flexible) */

.shop_table .product-name a {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.shop_table .product-name a:hover,
.shop_table .product-name a:focus {
  text-decoration: underline;
}

.shop_table .product-price,
.shop_table .product-subtotal {
  font-weight: 700;
  color: var(--color-primary);
}

.shop_table .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--color-primary-alpha-10);
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.shop_table .product-remove a.remove:hover,
.shop_table .product-remove a.remove:focus {
  background-color: var(--color-accent);
  color: var(--color-text-on-dark);
}

/* Acciones del cart (cupón + actualizar) */
.woocommerce-cart-form .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 280px;
}

.coupon label {
  display: none;
}

.coupon #coupon_code {
  flex: 1;
  min-width: 160px;
  height: var(--button-height);
}

/* woocommerce-layout.css impone float:right; width:48% en .cart_totals — lo cancelamos. */
.woocommerce .cart_totals,
.woocommerce-page .cart_totals {
  float: none !important;
  width: 100% !important;
}

/* Cart totals + shipping calculator */
.cart-collaterals {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.cart_totals h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.6);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.cart_totals .shop_table {
  border: 2px solid var(--color-primary-alpha-20);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.cart_totals .shop_table th {
  background-color: var(--color-primary-alpha-10);
}

.wc-proceed-to-checkout {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}

/*
 * WooCommerce inyecta un selector muy específico para `.button.alt` con un
 * morado por defecto (`.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) ... .alt`).
 * Subimos especificidad (con `.woocommerce` prefijado) y forzamos el marrón
 * brand. Lo mismo para `#place_order` y `.single_add_to_cart_button`.
 */
.woocommerce a.checkout-button,
.woocommerce a.checkout-button.button.alt,
.woocommerce button.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce #place_order,
button.single_add_to_cart_button,
#place_order {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary);
}

.woocommerce a.checkout-button:hover,
.woocommerce a.checkout-button:focus,
.woocommerce a.checkout-button.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
button.single_add_to_cart_button:hover,
#place_order:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
}

@media (min-width: 1024px) {
  .cart-collaterals {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Totales siempre en la columna derecha; si hay cross-sells fluyen a col 1. */
  .cart_totals {
    grid-column: 2;
  }
}

/* ==========================================================================
   Checkout — formulario en 2 columnas en desktop (campos + review)
   ========================================================================== */
/*
 * Importante: WC pone `woocommerce-checkout` tanto en el <body> como en el
 * <form>. Si aplicamos `display: grid` al selector pelado, también afectaría
 * al body — colapsando el width de `.site` en navegadores que ponen el body
 * en grid auto-flow. Scopeamos al form (y a su contenedor directo).
 */
form.checkout.woocommerce-checkout,
form.woocommerce-checkout {
  display: grid;
  gap: 2rem;
}

form.woocommerce-checkout h3,
.woocommerce-checkout-review-order h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.6);
  color: var(--color-primary);
  margin: 0 0 1rem;
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  margin-bottom: 1.5rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-row label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-body-size-small);
  color: var(--color-primary);
}

.form-row .required {
  color: var(--color-accent);
}

.form-row input.input-text,
.form-row textarea,
.form-row select,
.woocommerce form .form-row .input-text,
.woocommerce-page form .form-row .input-text {
  width: 100%;
  min-height: var(--button-height);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary-alpha-20);
  border-radius: var(--border-radius);
}

.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.select2-container .select2-selection--single {
  height: var(--button-height) !important;
  border: 2px solid var(--color-primary-alpha-20) !important;
  border-radius: var(--border-radius) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  line-height: calc(var(--button-height) - 4px) !important;
  color: var(--color-text);
  font-family: var(--font-ui);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}

#order_review_heading,
#order_review {
  margin-top: 1rem;
}

#order_review .shop_table {
  border: 2px solid var(--color-primary-alpha-20);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.woocommerce-checkout-payment {
  background-color: var(--color-primary-alpha-10);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  margin-top: 1rem;
}

.woocommerce-checkout-payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout-payment ul.payment_methods li {
  margin-bottom: 0.75rem;
  background: transparent;
  border: 0;
}

.woocommerce-checkout-payment .payment_box {
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
  padding: 1rem;
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text);
}

form.woocommerce-checkout #payment .place-order {
  margin-top: 1rem;
}

#place_order {
  width: 100%;
}

@media (min-width: 1024px) {
  form.woocommerce-checkout {
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: start;
  }
  form.woocommerce-checkout #customer_details {
    grid-column: 1;
    display: block;
  }

  /* woocommerce-layout.css pone float:left; width:50% en .col-1 y .col-2 del
     checkout — los cancelamos para que billing y envío se apilen verticalmente. */
  form.woocommerce-checkout #customer_details .col-1,
  form.woocommerce-checkout #customer_details .col-2 {
    float: none !important;
    width: 100% !important;
  }
  form.woocommerce-checkout #order_review_heading,
  form.woocommerce-checkout #order_review {
    grid-column: 2;
  }
}

/* Form-row inline (city, postcode, state suelen ir en fila) */
@media (min-width: 600px) {
  .form-row-first,
  .form-row-last {
    display: inline-flex;
    width: calc(50% - 0.5rem);
  }
  .form-row-first { margin-right: 1rem; }
}

/* ==========================================================================
   Mi cuenta — sidebar de nav + contenido
   ========================================================================== */
.woocommerce-account .woocommerce {
  display: grid;
  gap: 2rem;
}

/* woocommerce-layout.css impone float:left/right; width:30%/68% — cancelamos
   para que nuestro grid tome el control. */
.woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-page .woocommerce-MyAccount-navigation,
.woocommerce .woocommerce-MyAccount-content,
.woocommerce-page .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}

/* woocommerce-layout.css pone float:left/right; width:48% en los hijos
   del col2-set — los cancelamos y fijamos columnas para que el grid funcione. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
}

/* La colocación explícita en columnas sólo tiene sentido cuando el `.col2-set`
   es de 2 columnas (>=768). En móvil el grid es de una sola columna implícita;
   si forzáramos `grid-column: 2` el navegador crearía una 2ª columna implícita y
   billing/envío quedarían lado a lado y diminutos (~78px) en el checkout. Sin la
   colocación, col-1 y col-2 se apilan a ancho completo en móvil. */
@media (min-width: 768px) {
  .woocommerce .col2-set .col-1,
  .woocommerce-page .col2-set .col-1 {
    grid-column: 1 !important;
  }

  .woocommerce .col2-set .col-2,
  .woocommerce-page .col2-set .col-2 {
    grid-column: 2 !important;
  }
}

.woocommerce-MyAccount-navigation {
  font-family: var(--font-ui);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.6rem 0.9rem;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus {
  background-color: var(--color-primary-alpha-10);
  border-color: var(--color-primary-alpha-20);
}

.woocommerce-MyAccount-content {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--color-primary);
}

.woocommerce-MyAccount-content h2 {
  font-size: calc(var(--font-display-size) * 0.6);
  margin-bottom: 1rem;
}

/* Sidebar (nav + content) solo cuando hay sesión iniciada.
   Sin logged-in la rejilla es una sola columna → login/registro ocupan todo el ancho. */
@media (min-width: 1024px) {
  body.logged-in.woocommerce-account .woocommerce {
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 3rem;
    align-items: start;
  }

  body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 1;
  }

  body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Login/registro */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  max-width: 480px;
  background-color: var(--color-primary-alpha-10);
  border-radius: var(--border-radius);
  padding: 1.5rem;
}

.woocommerce-form-login p,
.woocommerce-form-register p {
  margin-bottom: 0.75rem;
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
}

.woocommerce-LostPassword {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
}

/* Cuando el usuario NO está logueado, WC muestra las dos columnas
   (Acceder / Registrarse) lado a lado por defecto. */
.u-columns,
.col2-set {
  display: grid;
  gap: 2rem;
}

.u-columns::before,
.u-columns::after,
.col2-set::before,
.col2-set::after {
  content: none;
  display: none;
}

@media (min-width: 768px) {
  .u-columns,
  .col2-set {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Order received / Thank you page
   ========================================================================== */
.woocommerce-order {
  font-family: var(--font-body);
  color: var(--color-text);
}

.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.7);
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0 0 2rem;
  padding: 1.25rem;
  background-color: var(--color-primary-alpha-10);
  border-radius: var(--border-radius);
}

.woocommerce-order-overview li {
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text);
}

.woocommerce-order-overview li strong {
  display: block;
  color: var(--color-primary);
  font-weight: 700;
}