/* =========================================================================
   SUNQU — Carrito
   ========================================================================= */
.sq-cart {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 44px;
  align-items: start;
}
.sq-table {
  width: 100%;
  border-collapse: collapse;
}
.sq-table th {
  text-align: left;
  /* Cabecera de tabla en mayúsculas = etiqueta: Jost (§02 guía). */
  font-family: var(--sq-font-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sq-muted);
  padding: 0 12px 14px;
  border-bottom: 1px solid var(--sq-line);
  font-weight: 700;
}
.sq-table td {
  padding: 20px 12px;
  border-bottom: 1px solid var(--sq-line);
  vertical-align: middle;
}
.sq-table th:first-child,
.sq-table td:first-child {
  padding-left: 0;
}
.sq-table th:last-child,
.sq-table td:last-child {
  padding-right: 0;
  text-align: right;
}
.sq-line {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sq-line img {
  width: 78px;
  height: 94px;
  object-fit: cover;
  background: var(--sq-cream);
  flex: 0 0 auto;
}
.sq-line__name {
  font-family: var(--sq-font-title);
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 4px;
}
.sq-line__name a {
  color: var(--sq-ink);
  text-decoration: none;
}
.sq-line__name a:hover {
  color: var(--sq-gold-text);
}
.sq-line__variant {
  font-size: 13px;
  color: var(--sq-muted);
}
.sq-remove {
  border: 0;
  background: transparent;
  color: var(--sq-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sq-remove:hover {
  color: var(--sq-oxblood);
}
.sq-cart__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
}
.sq-coupon {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sq-coupon .sq-input {
  width: 190px;
}
/* Resumen */
.sq-summary {
  background: var(--sq-cream);
  border: 1px solid var(--sq-line);
  padding: 28px;
  position: sticky;
  top: 110px;
}
.sq-summary h3 {
  font-family: var(--sq-font-title);
  font-size: 20px;
  color: var(--sq-navy);
  margin: 0 0 20px;
}
.sq-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--sq-line);
  color: var(--sq-body);
}
.sq-summary__row span:last-child {
  font-weight: 600;
  color: var(--sq-navy);
  white-space: nowrap;
}
.sq-summary__row.is-total {
  border-bottom: 0;
  padding-top: 16px;
  font-family: var(--sq-font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--sq-navy);
}
.sq-summary__row.is-total span:last-child {
  color: var(--sq-gold-text);
  font-size: 22px;
}
.sq-summary__row.is-discount span:last-child {
  color: #4b8f5f;
}
/* -------------------------------------------------------------------------
   Tabla real de totales de WooCommerce dentro de .sq-summary
   (woocommerce/cart/cart-totals.php). Aquí las filas son <tr> de verdad y
   parte de ellas las genera WooCommerce (wc_cart_totals_shipping_html), así
   que NO se les puede aplicar el display:flex de .sq-summary__row: eso
   rompe la tabla y descuadra el resumen. El reparto etiqueta/valor se hace
   con th/td + text-align, que es lo que una tabla ya sabe hacer.
   ------------------------------------------------------------------------- */
.sq-summary .shop_table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto;
}
.sq-summary .shop_table th,
.sq-summary .shop_table td {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px dashed var(--sq-line);
  font-size: 15px;
  line-height: 1.5;
  vertical-align: top;
}
.sq-summary .shop_table th {
  width: 45%;
  text-align: left;
  font-family: var(--sq-font-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sq-body);
}
.sq-summary .shop_table td {
  text-align: right;
  font-weight: 600;
  color: var(--sq-navy);
}
/* Fila de envío: su <td> no lleva un importe suelto sino la lista real de
   métodos (radios + etiquetas) y el calculador de WooCommerce, así que se
   alinea a la izquierda y respira, en vez de comprimirse a la derecha. */
.sq-summary .shop_table tr.shipping td,
.sq-summary .shop_table tr.woocommerce-shipping-totals td {
  text-align: left;
  font-weight: 500;
  color: var(--sq-body);
  white-space: normal;
}
.sq-summary .woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sq-summary .woocommerce-shipping-methods li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
}
.sq-summary .woocommerce-shipping-methods li:last-child {
  margin-bottom: 0;
}
.sq-summary .woocommerce-shipping-methods input[type="radio"] {
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--sq-gold);
}
.sq-summary .woocommerce-shipping-methods label {
  cursor: pointer;
  color: var(--sq-body);
}
.sq-summary .woocommerce-shipping-methods .amount {
  font-weight: 600;
  color: var(--sq-navy);
}
.sq-summary .woocommerce-shipping-destination {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sq-muted);
}
/* Calculador de envío de WooCommerce: viene plegado tras el enlace
   «Cambiar dirección» y trae un formulario completo (país, región, ciudad,
   código postal). En una columna de 350px hay que apilarlo y encoger los
   campos, o se sale de la caja del resumen. */
.sq-summary .shipping-calculator-button {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--sq-gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sq-summary .shipping-calculator-button:hover {
  color: var(--sq-gold);
}
.sq-summary .shipping-calculator-form {
  margin-top: 14px;
}
.sq-summary .shipping-calculator-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 12px;
  padding: 0;
  width: 100%;
}
.sq-summary .shipping-calculator-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sq-navy);
}
.sq-summary .shipping-calculator-form input[type="text"],
.sq-summary .shipping-calculator-form select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--sq-line);
  border-radius: 0;
  background: var(--sq-white);
  font-family: var(--sq-font-text);
  font-size: 14px;
  color: var(--sq-ink);
}
.sq-summary .shipping-calculator-form input[type="text"]:focus,
.sq-summary .shipping-calculator-form select:focus {
  outline: none;
  border-color: var(--sq-gold);
}
/* El select2 de WooCommerce reemplaza el <select> de país por su propio
   marcado; sin acotarlo se desborda de la columna. */
.sq-summary .select2-container {
  width: 100% !important;
  max-width: 100%;
}
.sq-summary .shipping-calculator-form .button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: var(--sq-gold);
  color: var(--sq-white);
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.25s;
}
.sq-summary .shipping-calculator-form .button:hover {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
}
/* Total: sin línea de puntos, tipografía de títulos y el importe en dorado. */
.sq-summary .shop_table tr.order-total th,
.sq-summary .shop_table tr.order-total td {
  padding-top: 16px;
  padding-bottom: 0;
  border-bottom: 0;
}
.sq-summary .shop_table tr.order-total th {
  font-family: var(--sq-font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--sq-navy);
}
.sq-summary .shop_table tr.order-total td {
  font-family: var(--sq-font-title);
  font-size: 22px;
  font-weight: 700;
  color: var(--sq-gold-text);
  white-space: nowrap;
}
.sq-summary .shop_table tr.sq-discount-row td,
.sq-summary .shop_table tr.cart-discount td {
  color: #4b8f5f;
}
/* El enlace "[Quitar]" que WooCommerce añade tras el cupón aplicado. */
.sq-summary .shop_table .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sq-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sq-summary .shop_table .woocommerce-remove-coupon:hover {
  color: var(--sq-oxblood);
}
.sq-summary .sq-btn {
  margin-top: 20px;
}
.sq-summary__note {
  font-size: 12.5px;
  color: var(--sq-muted);
  margin-top: 14px;
  line-height: 1.5;
}
.sq-progress {
  margin: 4px 0 18px;
}
.sq-progress__bar {
  height: 5px;
  background: #e6ded2;
  overflow: hidden;
}
.sq-progress__bar i {
  display: block;
  height: 100%;
  background: var(--sq-gold);
  transition: width 0.5s;
}
.sq-progress p {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--sq-muted);
}
/* Estado vacío */
.sq-empty {
  text-align: center;
  padding: 60px 20px 70px;
  border: 1px dashed var(--sq-line);
  background: var(--sq-cream);
}
.sq-empty h3 {
  font-family: var(--sq-font-title);
  color: var(--sq-navy);
  font-size: 24px;
  margin: 0 0 10px;
}
.sq-empty p {
  color: var(--sq-muted);
  margin: 0 0 24px;
}
@media (max-width: 1024px) {
  .sq-cart {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sq-summary {
    position: static;
  }
}
@media (max-width: 768px) {
  .sq-table thead {
    display: none;
  }
  .sq-table,
  .sq-table tbody,
  .sq-table tr,
  .sq-table td {
    display: block;
    width: 100%;
  }
  .sq-table tr {
    border-bottom: 1px solid var(--sq-line);
    padding: 16px 0;
  }
  .sq-table td {
    border: 0;
    padding: 4px 0;
    text-align: left !important;
  }
  .sq-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sq-muted);
    margin-bottom: 3px;
  }
  .sq-table td.sq-td-line::before {
    display: none;
  }
  .sq-cart__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .sq-coupon .sq-input {
    width: auto;
    flex: 1;
  }
}
@media (max-width: 480px) {
  .sq-summary {
    padding: 22px 20px;
  }
}
/* =========================================================================
   Carrito real de WooCommerce ([woocommerce_cart], shortcode clásico)
   Las clases sq-* de arriba ya cubren el markup propio de cart.php/
   cart-totals.php (woocommerce/cart/*.php) — aquí solo van los elementos
   que WooCommerce genera con SU PROPIA clase, sin que el theme la controle:
   el botón real "Proceder al pago" (woocommerce_proceed_to_checkout,
   clase .checkout-button) y el aviso nativo de carrito vacío/errores.
   ========================================================================= */
/* Selector de cantidad de cada línea (cart.php envuelve el <input> nativo de
   WooCommerce en <div class="sq-qty">, con los botones +/- de
   inc/woocommerce.php inyectados justo antes/después vía
   woocommerce_before|after_quantity_input_field). Mismo lenguaje visual que
   el stepper de la ficha de producto (06-product.less, .sq-qty) — se repite
   aquí porque cada .less de este proyecto compila a un .css independiente,
   sin @import entre archivos. */
.sq-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sq-line);
}
/* WooCommerce envuelve su campo en un <div class="quantity"> propio, que
   queda intercalado entre .sq-qty y los botones/el input. Sin volverlo
   también una fila flex, los tres elementos dejan de alinearse y el
   selector se ve descuadrado. */
.sq-qty > .quantity {
  display: flex;
  align-items: center;
  margin: 0;
}
.sq-qty__step {
  width: 36px;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--sq-navy);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.sq-qty__step:hover {
  color: var(--sq-gold-text);
}
.sq-qty__input {
  width: 46px;
  height: 38px;
  border: 0;
  border-left: 1px solid var(--sq-line);
  border-right: 1px solid var(--sq-line);
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  color: var(--sq-ink);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.sq-qty__input::-webkit-outer-spin-button,
.sq-qty__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 14px 30px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: var(--sq-gold);
  color: var(--sq-white);
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s;
}
.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
  color: var(--sq-white);
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--sq-cream);
  border-left: 3px solid var(--sq-gold);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--sq-navy-soft);
  margin: 0 0 22px;
  line-height: 1.55;
  list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: var(--sq-oxblood);
}
/* .sq-btn vive en 03-buttons.less, compilado como archivo LESS
   independiente (sin @import entre archivos en este proyecto) — no se
   puede invocar como mixin aquí, así que se repiten los valores reales. */
.woocommerce-notices-wrapper .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: var(--sq-gold);
  color: var(--sq-white);
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s;
  line-height: 1.2;
}
.woocommerce-notices-wrapper .button:hover {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
  color: var(--sq-white);
}
/* =========================================================================
   Panel lateral del carrito («mini-cart»)
   Marcado en footer.php + woocommerce/cart/mini-cart.php.
   Medidas reales del diseño: .wd-side-hidden / .cart-widget-side /
   .wd-heading (base.css, header-el-cart-side.css, woo-widget-shopping-cart.css).
   ========================================================================= */
.sq-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.sq-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sq-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  left: auto;
  z-index: 500;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* --wd-side-hidden-w real del diseño */
  width: min(340px, 100vw);
  background: var(--sq-white);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.sq-drawer.is-open {
  transform: none;
}
/* Bloquea el scroll del fondo mientras el panel está abierto. */
body.sq-drawer-abierto {
  overflow: hidden;
}
/* Cabecera: .wd-heading real — flex, gap 10px, padding 20px 15px y una
   línea inferior. El título va en dorado, como en el diseño. */
.sq-drawer__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 20px 15px;
  border-bottom: 1px solid var(--sq-line);
}
.sq-drawer__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--sq-font-title);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sq-gold);
}
.sq-drawer__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sq-ink);
  cursor: pointer;
  transition: color var(--sq-transition);
}
.sq-drawer__close:hover {
  color: var(--sq-gold-text);
}
.sq-drawer__close .sq-icon {
  width: 16px;
  height: 16px;
}
/* .widget_shopping_cart_content es el div que WooCommerce sustituye entero
   al refrescar por AJAX, así que la cadena flex tiene que pasar por él
   (mismo papel que en el diseño original). */
.sq-drawer .widget_shopping_cart_content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.sq-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
}
.sq-mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Línea del mini carrito: imagen 15px a la izquierda, datos a la derecha
   con hueco para la X, y 15px de aire alrededor. */
.sq-mini-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 15px;
  transition: background-color 0.3s ease;
}
.sq-mini-item:hover {
  background-color: var(--sq-cream);
}
.sq-mini-item__media {
  flex: 0 0 auto;
  display: block;
  width: 70px;
  margin-inline-end: 15px;
  line-height: 0;
}
.sq-mini-item__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sq-radius);
}
.sq-mini-item__info {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-end: 20px;
}
.sq-mini-item__name {
  display: block;
  font-family: var(--sq-font-title);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sq-ink);
  text-decoration: none;
}
.sq-mini-item__name:hover {
  color: var(--sq-gold-text);
}
.sq-mini-item__meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sq-muted);
}
.sq-mini-item__qty {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--sq-muted);
}
/* La X real es un círculo de 20px anclado arriba a la derecha (top 13px /
   right 10px en el panel lateral), que se resalta al pasar el ratón. */
.sq-mini-item__remove {
  position: absolute;
  top: 13px;
  inset-inline-end: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--sq-muted);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: var(--sq-transition-fast);
}
.sq-mini-item__remove:hover {
  background: var(--sq-white);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  color: var(--sq-oxblood);
}
/* Pie: total y botones, siempre visibles bajo la lista. */
.sq-drawer__foot {
  flex: 0 0 auto;
  padding-bottom: 15px;
  border-top: 1px solid var(--sq-line);
}
.sq-drawer__foot > * {
  padding-inline: 15px;
}
.sq-mini-total {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding-block: 15px;
  font-family: var(--sq-font-title);
  font-size: 18px;
  color: var(--sq-navy);
}
.sq-mini-total strong {
  font-weight: 700;
}
.sq-mini-total .woocommerce-Price-amount {
  flex-grow: 1;
  text-align: end;
  font-weight: 700;
  color: var(--sq-gold-text);
}
.sq-mini-buttons {
  display: block;
  margin: 0;
  text-align: center;
}
/* Los dos botones los imprime WooCommerce (woocommerce_widget_shopping_cart_buttons)
   con sus clases .button / .checkout; se les da el aspecto de .sq-btn —
   "Ver carrito" en versión fantasma y "Finalizar compra" en dorado sólido.
   Los valores se repiten porque cada .less compila por separado (sin
   @import entre archivos en este proyecto). */
.sq-mini-buttons .button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 22px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: transparent;
  color: var(--sq-ink);
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s;
}
.sq-mini-buttons .button:last-child {
  margin-bottom: 0;
}
.sq-mini-buttons .button:hover {
  background: var(--sq-gold);
  color: var(--sq-white);
}
.sq-mini-buttons .checkout {
  background: var(--sq-gold);
  color: var(--sq-white);
  font-family: var(--sq-font-text);
}
.sq-mini-buttons .checkout:hover {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
  color: var(--sq-white);
}
.sq-mini-empty {
  margin-top: 20px;
  padding: 10px 15px;
  text-align: center;
}
.sq-mini-empty p {
  margin: 0 0 18px;
  color: var(--sq-muted);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .sq-drawer {
    width: min(300px, 80vw);
  }
}
/* =========================================================================
   Red de seguridad para elementos nativos de WooCommerce
   Desde que se desactivan las hojas por defecto de WooCommerce
   (woocommerce_enqueue_styles, ver inc/woocommerce.php), cualquier botón
   suyo que este tema no haya vestido de forma explícita se quedaría con el
   aspecto crudo del navegador. Esta regla le da el aspecto de marca.

   Va dentro de :where() a propósito: así aporta especificidad 0 y NUNCA
   pisa a las reglas concretas de más arriba (.sq-mini-buttons .button,
   .woocommerce-notices-wrapper .button, #place_order, etc.), sin importar
   el orden en el que se compilen.
   ========================================================================= */
.woocommerce :where(.button),
.woocommerce-page :where(.button) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: var(--sq-gold);
  color: var(--sq-white);
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s;
}
.woocommerce :where(.button:hover),
.woocommerce-page :where(.button:hover) {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
  color: var(--sq-white);
}
/* Grupo de errores de validación del checkout: es un <ul> y sin reset
   aparecería con viñetas y sangría del navegador. */
.woocommerce-NoticeGroup ul,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
}