/**
 * Chasis de tienda — carrito, checkout y mi cuenta.
 *
 * Se encola SOLO en esas tres páginas (ver gf_tienda_assets en functions.php), al
 * final de la cascada y con todo bajo `body.gf-tienda`: así le gana en
 * especificidad a las reglas de Astra y del kit de Elementor sin tener que
 * recurrir a !important salvo donde el tema ya lo usa.
 *
 * Los tokens, el reset y las utilidades (.wrap, .btn, .eyebrow, .topbar, .foot)
 * están copiados de las páginas canvas de landing/ para que la marca sea la misma,
 * no una aproximación.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1 · TOKENS Y RESET
   ───────────────────────────────────────────────────────────────────────── */

/* 118% igual que las páginas canvas: así la topbar y el pie salen idénticos.
   La hoja solo carga en estas tres páginas, así que no afecta al resto. */
html { font-size: 118%; }

body.gf-tienda {
  --crema: #f5f0e8;
  --crema-2: #ece4d6;
  --dorado: #c8a96e;
  --dorado-claro: #dcc394;
  --oscuro: #171310;
  --oscuro-2: #221b15;
  --turquesa: #5fa8ad;
  --turquesa-claro: #8fc9cc;
  --tinta: #3d342b;
  --tinta-suave: #6b6055;
  --linea: rgba(61, 52, 43, .14);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

  margin: 0;
  background: var(--crema);
  font-family: var(--sans);
  color: var(--tinta);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.gf-tienda * { box-sizing: border-box; }
body.gf-tienda .gfb { background: var(--crema); }
body.gf-tienda a { color: inherit; text-decoration: none; }
body.gf-tienda h1,
body.gf-tienda h2,
body.gf-tienda h3,
body.gf-tienda h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .005em;
  color: inherit;
  margin: 0;
}
body.gf-tienda :focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }

body.gf-tienda .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

body.gf-tienda .eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: .7rem;
  color: var(--dorado);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2 · TOPBAR
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 34px);
  background: rgba(23, 19, 16, .95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(200, 169, 110, .18);
  transition: padding .35s, box-shadow .35s;
}
body.gf-tienda .topbar.show { padding: 11px clamp(16px, 4vw, 34px); box-shadow: 0 2px 18px rgba(23, 19, 16, .28); }
body.gf-tienda .topbar .brand { font-family: var(--serif); font-size: 1.15rem; color: var(--crema); letter-spacing: .02em; }
body.gf-tienda .topbar .brand b { color: var(--dorado); font-weight: 500; }
body.gf-tienda .tb-nav { display: flex; gap: 26px; font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--crema); }
body.gf-tienda .tb-nav a { opacity: .82; transition: .2s; }
body.gf-tienda .tb-nav a:hover { opacity: 1; color: var(--dorado-claro); }
body.gf-tienda .tb-right { display: flex; align-items: center; gap: 8px; }

body.gf-tienda .tb-cart,
body.gf-tienda .tb-cuenta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--crema); opacity: .86;
  transition: color .2s, opacity .2s;
}
body.gf-tienda .tb-cart:hover,
body.gf-tienda .tb-cuenta:hover,
body.gf-tienda .tb-cart.on { color: var(--dorado); opacity: 1; }
body.gf-tienda .tb-cart svg,
body.gf-tienda .tb-cuenta svg { width: 19px; height: 19px; display: block; }
body.gf-tienda .tb-cart .n {
  position: absolute; top: 0; right: -1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--dorado); color: #171310;
  font-family: var(--sans); font-size: .56rem; font-weight: 600;
  line-height: 16px; text-align: center; letter-spacing: 0;
}
body.gf-tienda .tb-cart .n[hidden] { display: none; }

@media (max-width: 940px) { body.gf-tienda .tb-nav { display: none; } }
@media (max-width: 380px) {
  body.gf-tienda .topbar { gap: 8px; padding: 12px 12px; }
  body.gf-tienda .topbar .brand { font-size: .95rem; }
  body.gf-tienda .tb-cart, body.gf-tienda .tb-cuenta { width: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3 · CABECERA DE PÁGINA Y PASOS
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .tienda-cabecera {
  background: var(--oscuro);
  color: var(--crema);
  padding: clamp(96px, 13vh, 132px) 0 clamp(30px, 5vw, 46px);
}
body.gf-tienda .tienda-cabecera h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.2rem);
  margin-top: 12px;
}

body.gf-tienda .pasos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(14px, 3vw, 30px);
  list-style: none; margin: clamp(22px, 3.5vw, 34px) 0 0; padding: 0;
}
body.gf-tienda .pasos .paso {
  display: flex; align-items: center; gap: 9px;
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: #8a8073;
}
/* La separación entre pasos es una línea, no un carácter: se puede ocultar
   en móvil sin dejar un «›» huérfano. */
body.gf-tienda .pasos .paso + .paso::before {
  content: ""; width: clamp(12px, 3vw, 34px); height: 1px;
  background: rgba(200, 169, 110, .3);
  margin-right: 1px;
}
body.gf-tienda .pasos .paso i {
  font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border: 1px solid rgba(138, 128, 115, .5); border-radius: 50%;
  font-family: var(--sans); font-size: .68rem; letter-spacing: 0;
}
body.gf-tienda .pasos .paso.activo { color: var(--crema); }
body.gf-tienda .pasos .paso.activo i { border-color: var(--dorado); background: var(--dorado); color: var(--oscuro); font-weight: 600; }
body.gf-tienda .pasos .paso.hecho { color: var(--dorado-claro); }
body.gf-tienda .pasos .paso.hecho i { border-color: var(--dorado-claro); color: var(--dorado-claro); }

@media (max-width: 560px) {
  body.gf-tienda .pasos .paso span { display: none; }
  body.gf-tienda .pasos .paso.activo span { display: inline; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4 · CUERPO Y PIE
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .tienda-main { padding: clamp(34px, 6vw, 62px) 0 clamp(56px, 9vw, 96px); min-height: 46vh; }

body.gf-tienda .foot {
  background: var(--oscuro); color: #8a8073; text-align: center;
  padding: 40px 20px; font-family: var(--sans); font-size: .76rem; letter-spacing: .08em;
}
body.gf-tienda .foot b { font-family: var(--serif); color: var(--dorado); font-size: 1.1rem; font-weight: 500; letter-spacing: .02em; }
body.gf-tienda .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-bottom: 28px; }
body.gf-tienda .foot-nav a { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #cbb98f; transition: color .2s; }
body.gf-tienda .foot-nav a:hover { color: var(--dorado-claro); }

/* ─────────────────────────────────────────────────────────────────────────────
   5 · BOTONES  (los de marca y los que emite WooCommerce)
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .btn,
body.gf-tienda .woocommerce .button,
body.gf-tienda .woocommerce a.button,
body.gf-tienda .woocommerce button.button,
body.gf-tienda .woocommerce input.button,
body.gf-tienda .woocommerce #respond input#submit,
body.gf-tienda button.button,
body.gf-tienda a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--sans); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; font-size: .74rem;
  line-height: 1.2;
  padding: 15px 32px;
  border: 1px solid var(--dorado);
  border-radius: 0;
  background: var(--dorado); color: var(--oscuro);
  transition: .28s; cursor: pointer;
  text-shadow: none;
}
body.gf-tienda .btn-solid,
body.gf-tienda .woocommerce .button:hover,
body.gf-tienda .woocommerce a.button:hover,
body.gf-tienda .woocommerce button.button:hover,
body.gf-tienda .woocommerce input.button:hover,
body.gf-tienda button.button:hover,
body.gf-tienda a.button:hover {
  background: var(--dorado-claro); border-color: var(--dorado-claro); color: var(--oscuro);
}

/* Botón de línea (secundario): «Seguir viendo talleres», «Volver al carrito». */
body.gf-tienda .btn-line,
body.gf-tienda .woocommerce a.button.gf-secundario,
body.gf-tienda .woocommerce button.button.gf-secundario {
  background: transparent; color: var(--tinta); border-color: rgba(61, 52, 43, .35);
}
body.gf-tienda .btn-line:hover,
body.gf-tienda .woocommerce a.button.gf-secundario:hover,
body.gf-tienda .woocommerce button.button.gf-secundario:hover {
  background: var(--tinta); color: var(--crema); border-color: var(--tinta);
}

body.gf-tienda .woocommerce .button:disabled,
body.gf-tienda .woocommerce button.button:disabled,
body.gf-tienda .woocommerce button.button[disabled] {
  opacity: .38; cursor: default;
}
body.gf-tienda .woocommerce .button:disabled:hover,
body.gf-tienda .woocommerce button.button:disabled:hover {
  background: var(--dorado); border-color: var(--dorado); transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6 · AVISOS DE WOOCOMMERCE
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .woocommerce-message,
body.gf-tienda .woocommerce-info,
body.gf-tienda .woocommerce-error {
  background: var(--crema-2);
  border: 0; border-top: 2px solid var(--dorado);
  color: var(--tinta);
  font-size: .88rem;
  padding: 18px 22px 18px 22px;
  margin: 0 0 clamp(22px, 3vw, 32px);
  border-radius: 0;
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
body.gf-tienda .woocommerce-message::before,
body.gf-tienda .woocommerce-info::before,
body.gf-tienda .woocommerce-error::before { display: none; }
body.gf-tienda .woocommerce-error { border-top-color: #b4553f; background: #f3e3dd; }
body.gf-tienda .woocommerce-message .button,
body.gf-tienda .woocommerce-info .button {
  margin-left: auto;
  padding: 10px 20px; font-size: .68rem;
  background: transparent; color: var(--tinta); border-color: rgba(61, 52, 43, .35);
}
body.gf-tienda .woocommerce-message .button:hover,
body.gf-tienda .woocommerce-info .button:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
body.gf-tienda .woocommerce-notices-wrapper:empty { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   7 · CARRITO
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .gf-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(26px, 3.4vw, 52px);
  align-items: start;
}
@media (max-width: 900px) { body.gf-tienda .gf-cart { grid-template-columns: 1fr; } }

body.gf-tienda .gf-cart__items { min-width: 0; }
body.gf-tienda .gf-cart__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--linea);
}
body.gf-tienda .gf-cart__cabeza h2 { font-size: 1.5rem; }
body.gf-tienda .gf-cart__cuenta { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--tinta-suave); }

/* Una línea del carrito. La foto manda: es el taller que la persona eligió. */
body.gf-tienda .gf-linea {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--linea);
}
body.gf-tienda .gf-linea__foto { display: block; overflow: hidden; background: var(--crema-2); aspect-ratio: 4 / 3; }
body.gf-tienda .gf-linea__foto img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; transition: transform 1s cubic-bezier(.2, .7, .3, 1); }
body.gf-tienda .gf-linea__foto:hover img { transform: scale(1.05); }
body.gf-tienda .gf-linea__sinfoto { display: flex; align-items: center; justify-content: center; color: var(--dorado); font-family: var(--serif); font-size: 1.6rem; }

body.gf-tienda .gf-linea__cuerpo { min-width: 0; }
body.gf-tienda .gf-linea__nombre { font-family: var(--serif); font-size: 1.28rem; line-height: 1.18; color: var(--tinta); }
body.gf-tienda .gf-linea__nombre a { transition: color .2s; }
body.gf-tienda .gf-linea__nombre a:hover { color: var(--turquesa); }

/* La descripción corta del producto lleva las fechas del taller en prosa; se
   recorta a dos líneas para que la tarjeta no crezca sin control. */
body.gf-tienda .gf-linea__nota {
  margin: 8px 0 0;
  font-size: .82rem; font-weight: 300; line-height: 1.55; color: var(--tinta-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.gf-tienda .gf-linea__datos { margin: 8px 0 0; font-size: .76rem; color: var(--tinta-suave); }
body.gf-tienda .gf-linea__datos dt { font-weight: 500; display: inline; }
body.gf-tienda .gf-linea__datos dd { display: inline; margin: 0 10px 0 4px; }
body.gf-tienda .gf-linea__datos p { margin: 0; display: inline; }

body.gf-tienda .gf-linea__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
body.gf-tienda .gf-linea__cant { display: flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
body.gf-tienda .gf-linea__cant .quantity input.qty {
  width: 62px; padding: 8px 6px; text-align: center;
  border: 1px solid rgba(61, 52, 43, .28); background: #fff; border-radius: 0;
  font-family: var(--sans); font-size: .85rem; color: var(--tinta);
}
/* Con sold_individually WooCommerce imprime solo el número, sin input. */
body.gf-tienda .gf-linea__cant .quantity { font-size: .85rem; color: var(--tinta); letter-spacing: 0; }

/* WooCommerce pinta `a.remove` como una × dentro de un círculo. Aquí el enlace
   dice «Quitar» con palabras, así que hay que deshacer ese botón redondo por
   completo o queda un círculo vacío pegado al texto. */
body.gf-tienda .woocommerce a.remove.gf-linea__quitar,
body.gf-tienda a.remove.gf-linea__quitar {
  display: inline; width: auto; height: auto; line-height: inherit;
  border-radius: 0; background: transparent; text-align: left;
  font-weight: 400; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
  border: 0; border-bottom: 1px solid rgba(61, 52, 43, .25);
  padding: 0 0 1px; margin: 0;
  transition: color .2s, border-color .2s;
}
body.gf-tienda .woocommerce a.remove.gf-linea__quitar:hover,
body.gf-tienda a.remove.gf-linea__quitar:hover {
  color: #b4553f; border-bottom-color: #b4553f; background: transparent;
}

body.gf-tienda .gf-linea__precio { text-align: right; white-space: nowrap; }
body.gf-tienda .gf-linea__precio .amount { font-family: var(--serif); font-size: 1.45rem; color: var(--tinta); }
body.gf-tienda .gf-linea__precio small { display: block; margin-top: 3px; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }

@media (max-width: 620px) {
  body.gf-tienda .gf-linea { grid-template-columns: 78px minmax(0, 1fr); }
  body.gf-tienda .gf-linea__precio { grid-column: 2; text-align: left; margin-top: 4px; }
  body.gf-tienda .gf-linea__precio .amount { font-size: 1.25rem; }
}

body.gf-tienda .gf-cart__acciones { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: clamp(22px, 3vw, 30px); }
body.gf-tienda .gf-cart__seguir { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid rgba(61, 52, 43, .25); padding-bottom: 2px; transition: .2s; }
body.gf-tienda .gf-cart__seguir:hover { color: var(--turquesa); border-color: var(--turquesa); }
/* «Actualizar carrito» es secundario: WooCommerce lo mantiene deshabilitado
   hasta que cambia una cantidad, así que nunca debe competir con el CTA. */
body.gf-tienda .gf-cart__actualizar {
  margin-left: auto;
  background: transparent; border-color: rgba(61, 52, 43, .3); color: var(--tinta-suave);
  padding: 11px 20px; font-size: .68rem;
}
body.gf-tienda .gf-cart__actualizar:hover:not(:disabled) { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* Panel de resumen */
body.gf-tienda .gf-resumen {
  background: var(--crema-2);
  border-top: 3px solid var(--dorado);
  padding: clamp(24px, 2.8vw, 32px);
  position: sticky; top: 92px;
}
@media (max-width: 900px) { body.gf-tienda .gf-resumen { position: static; } }
/* WooCommerce y Astra maquetan `.cart_totals` para la página vieja: float a la
   derecha y 48% de ancho. Dentro del panel eso desborda la rejilla y saca una
   barra horizontal en toda la página. Se devuelve a flujo normal. */
body.gf-tienda .gf-resumen .cart_totals,
body.gf-tienda .woocommerce .cart-collaterals .cart_totals {
  float: none; width: 100%; margin: 0; padding: 0; background: transparent;
}
body.gf-tienda .gf-resumen h2,
body.gf-tienda .woocommerce .cart_totals h2 {
  font-size: 1.35rem; margin: 0 0 18px; padding: 0;
  background: transparent; border: 0; text-align: left; color: var(--tinta);
}
body.gf-tienda .gf-resumen table { width: 100%; border-collapse: collapse; margin: 0; background: transparent; }
body.gf-tienda .gf-resumen th,
body.gf-tienda .gf-resumen td {
  padding: 11px 0; border: 0; border-bottom: 1px solid rgba(61, 52, 43, .12);
  font-size: .86rem; font-weight: 400; text-align: left; color: var(--tinta-suave);
  background: transparent;
}
body.gf-tienda .gf-resumen td { text-align: right; color: var(--tinta); }
body.gf-tienda .gf-resumen .order-total th,
body.gf-tienda .gf-resumen .order-total td { border-bottom: 0; padding-top: 16px; color: var(--tinta); }
body.gf-tienda .gf-resumen .order-total th { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; }
body.gf-tienda .gf-resumen .order-total td .amount,
body.gf-tienda .gf-resumen .order-total .amount { font-family: var(--serif); font-size: 1.7rem; color: var(--tinta); }
body.gf-tienda .gf-resumen .includes_tax,
body.gf-tienda .gf-resumen small { display: block; font-size: .68rem; color: var(--tinta-suave); letter-spacing: 0; text-transform: none; }

body.gf-tienda .gf-resumen .wc-proceed-to-checkout { margin-top: 22px; padding: 0; }
body.gf-tienda .gf-resumen .checkout-button,
body.gf-tienda .gf-resumen a.checkout-button,
body.gf-tienda .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex; width: 100%; float: none;
  margin: 0 0 12px; padding: 17px 22px; font-size: .78rem;
  text-align: center;
}
body.gf-tienda .gf-resumen__nota { margin: 16px 0 0; font-size: .74rem; line-height: 1.55; color: var(--tinta-suave); font-weight: 300; }
body.gf-tienda .gf-resumen__nota a { color: var(--turquesa); border-bottom: 1px solid rgba(95, 168, 173, .4); }

/* Carrito vacío */
/* El límite de medida va en el texto, no en el bloque: con 46ch en el contenedor
   los dos botones no caben en una línea y se apilan sin motivo. */
body.gf-tienda .gf-vacio { max-width: 680px; padding: clamp(20px, 4vw, 40px) 0; }
body.gf-tienda .gf-vacio h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); max-width: 18ch; }
body.gf-tienda .gf-vacio h2 em { font-style: italic; color: var(--turquesa); }
body.gf-tienda .gf-vacio p { margin: 18px 0 0; max-width: 52ch; color: var(--tinta-suave); font-weight: 300; }
body.gf-tienda .gf-vacio .acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ─────────────────────────────────────────────────────────────────────────────
   8 · FORMULARIOS  (checkout y mi cuenta)
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
body.gf-tienda .woocommerce form .form-row label,
body.gf-tienda .woocommerce-page form .form-row label {
  display: block; margin-bottom: 6px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 500;
}
body.gf-tienda .woocommerce form .form-row label.checkbox,
body.gf-tienda .woocommerce form .form-row .woocommerce-form__label-for-checkbox {
  display: flex; align-items: flex-start; gap: 9px;
  letter-spacing: 0; text-transform: none; font-size: .82rem; font-weight: 400; color: var(--tinta);
}
body.gf-tienda .required { color: #b4553f; text-decoration: none; }

body.gf-tienda .woocommerce form .form-row input.input-text,
body.gf-tienda .woocommerce form .form-row textarea,
body.gf-tienda .woocommerce form .form-row select,
body.gf-tienda .woocommerce input.input-text,
body.gf-tienda .woocommerce textarea,
body.gf-tienda .woocommerce select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(61, 52, 43, .24);
  border-radius: 0;
  background: #fff;
  font-family: var(--sans); font-size: .88rem; color: var(--tinta); line-height: 1.4;
  box-shadow: none;
  transition: border-color .2s;
}
body.gf-tienda .woocommerce form .form-row input.input-text:focus,
body.gf-tienda .woocommerce form .form-row textarea:focus,
body.gf-tienda .woocommerce form .form-row select:focus { border-color: var(--dorado); outline: none; }
body.gf-tienda .woocommerce form .form-row textarea { min-height: 110px; }
body.gf-tienda .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.gf-tienda .woocommerce form .form-row.woocommerce-invalid select { border-color: #b4553f; }

/* Botón «mostrar contraseña».
   WooCommerce lo inserta por JS dentro de un <span class="password-input"> y
   cuenta con que su hoja lo posicione en absoluto con un icono de ojo. En este
   sitio esos estilos no llegan (el span queda `display:inline` y el botón sin
   icono), así que Astra lo pinta como un botón negro suelto encima del campo.
   Se reconstruye aquí; sin esto aparece un bloque oscuro sin etiqueta. */
body.gf-tienda .woocommerce form .password-input,
body.gf-tienda .password-input { display: block; position: relative; }
body.gf-tienda .password-input input.input-text { padding-right: 44px; }
body.gf-tienda button.show-password-input,
body.gf-tienda .show-password-input {
  position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
  width: 24px; height: 24px; min-width: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
  cursor: pointer; opacity: .45; transition: opacity .2s;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6055' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.6 10-6.6S22 12 22 12s-3.6 6.6-10 6.6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
body.gf-tienda button.show-password-input:hover,
body.gf-tienda .show-password-input:hover,
body.gf-tienda .show-password-input.display-password { opacity: .9; background-color: transparent; }

/* select2 (país / estado) para que no cante junto a los inputs nativos. */
body.gf-tienda .select2-container .select2-selection--single {
  height: auto; padding: 11px 14px;
  border: 1px solid rgba(61, 52, 43, .24); border-radius: 0; background: #fff;
}
body.gf-tienda .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 1.4; font-family: var(--sans); font-size: .88rem; color: var(--tinta);
}
body.gf-tienda .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; }

body.gf-tienda .gf-col2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(26px, 3.4vw, 52px);
  align-items: start;
}
@media (max-width: 960px) { body.gf-tienda .gf-col2 { grid-template-columns: 1fr; } }
body.gf-tienda .gf-col2 > * { min-width: 0; }

body.gf-tienda .gf-bloque + .gf-bloque { margin-top: clamp(28px, 4vw, 42px); }
body.gf-tienda .gf-bloque > h2,
body.gf-tienda .gf-bloque > h3 {
  font-size: 1.4rem; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linea);
}
body.gf-tienda .woocommerce .col2-set { width: 100%; }
body.gf-tienda .woocommerce .col2-set .col-1,
body.gf-tienda .woocommerce .col2-set .col-2 { float: none; width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   9 · CHECKOUT
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .gf-checkout__resumen {
  background: var(--crema-2);
  border-top: 3px solid var(--dorado);
  padding: clamp(24px, 2.8vw, 30px);
  position: sticky; top: 92px;
}
@media (max-width: 960px) { body.gf-tienda .gf-checkout__resumen { position: static; } }

/* woocommerce-layout.css maqueta el checkout a dos columnas flotantes al 48%, y
   Astra le añade `padding: 0 2em` a #order_review. Dentro de la rejilla del
   chasis eso encoge el resumen y lo desborda.
   ⚠️ Aquí sí hace falta !important: la regla de Astra es
   `form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review)`,
   y ese :not() hereda la especificidad de su argumento — dos IDs. No hay forma
   razonable de ganarle por especificidad sin repetir el id en el selector. */
body.gf-tienda .woocommerce-checkout #customer_details,
body.gf-tienda .woocommerce-checkout #order_review,
body.gf-tienda .woocommerce-checkout #order_review_heading,
body.gf-tienda #customer_details,
body.gf-tienda #order_review,
body.gf-tienda #order_review_heading {
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  /* La misma regla de Astra encuadra #order_review en un marco gris de 2px
     que aquí dibuja una caja dentro de la caja. */
  border: 0 !important;
}
body.gf-tienda .gf-checkout__resumen > h2,
body.gf-tienda #order_review_heading {
  font-size: 1.35rem; margin: 0 0 4px; color: var(--tinta);
  background: transparent; border: 0; text-align: left;
}

/* La tabla del resumen sigue siendo una <table> (WooCommerce la reemplaza por
   AJAX buscándola por selector), pero se lee como una lista de tarjetas. */
body.gf-tienda table.woocommerce-checkout-review-order-table {
  width: 100%; border-collapse: collapse; margin: 18px 0 0; background: transparent; border: 0;
}
/* La cabecera «Producto / Subtotal» sobra en un panel que ya se titula
   «Tu pedido»: se oculta sin sacarla del DOM (lectores de pantalla la usan). */
body.gf-tienda table.woocommerce-checkout-review-order-table thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.gf-tienda table.woocommerce-checkout-review-order-table th,
body.gf-tienda table.woocommerce-checkout-review-order-table td {
  border: 0; border-bottom: 1px solid rgba(61, 52, 43, .12);
  padding: 14px 0; background: transparent;
  font-size: .86rem; font-weight: 400; text-align: left; color: var(--tinta-suave);
  vertical-align: top;
}
body.gf-tienda table.woocommerce-checkout-review-order-table td { text-align: right; color: var(--tinta); }
/* El nombre se queda con todo el ancho sobrante; el importe solo con el suyo.
   Sin esto la tabla reparte 50/50 y el título del taller sale en seis líneas. */
body.gf-tienda table.woocommerce-checkout-review-order-table tbody td.product-name { text-align: left; padding-right: 12px; width: 100%; }
body.gf-tienda table.woocommerce-checkout-review-order-table tbody td.product-total { white-space: nowrap; width: 1%; }
body.gf-tienda table.woocommerce-checkout-review-order-table tfoot th { width: 100%; }
body.gf-tienda table.woocommerce-checkout-review-order-table tfoot td { white-space: nowrap; width: 1%; }

body.gf-tienda .gf-pedido__item { display: flex; align-items: flex-start; gap: 12px; }
body.gf-tienda .gf-pedido__item .gf-pedido__foto {
  width: 56px; height: 56px; flex: 0 0 56px;
  object-fit: cover; display: block; margin: 2px 0 0; background: var(--crema); max-width: none;
}
body.gf-tienda .gf-pedido__texto { min-width: 0; }
body.gf-tienda .gf-pedido__nombre { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; color: var(--tinta); }
body.gf-tienda .gf-pedido__cant {
  display: block; margin-top: 3px; font-weight: 400;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
}
body.gf-tienda .gf-pedido__texto .variation,
body.gf-tienda .gf-pedido__texto dl { margin: 5px 0 0; font-size: .72rem; color: var(--tinta-suave); }
body.gf-tienda .gf-pedido__texto dt,
body.gf-tienda .gf-pedido__texto dd { display: inline; margin: 0 6px 0 0; }
body.gf-tienda .gf-pedido__texto dd p { display: inline; margin: 0; }

body.gf-tienda table.woocommerce-checkout-review-order-table tfoot th { color: var(--tinta-suave); }
body.gf-tienda table.woocommerce-checkout-review-order-table tfoot .order-total th,
body.gf-tienda table.woocommerce-checkout-review-order-table tfoot .order-total td { border-bottom: 0; padding-top: 15px; }
body.gf-tienda table.woocommerce-checkout-review-order-table tfoot .order-total th {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--tinta);
}
body.gf-tienda table.woocommerce-checkout-review-order-table tfoot .order-total .amount {
  font-family: var(--serif); font-size: 1.6rem; color: var(--tinta);
}
body.gf-tienda table.woocommerce-checkout-review-order-table small { display: block; font-size: .68rem; color: var(--tinta-suave); }

/* Pasarela: PayPal dibuja sus botones en un iframe propio, así que solo se
   trabaja la caja que los contiene. */
body.gf-tienda #payment,
body.gf-tienda .woocommerce-checkout #payment { background: transparent; border-radius: 0; margin-top: 22px; }
body.gf-tienda #payment ul.payment_methods {
  padding: 0; margin: 0 0 18px; border: 0; border-top: 1px solid var(--linea); list-style: none;
}
body.gf-tienda #payment ul.payment_methods li {
  padding: 16px 0 0; margin: 0; border-bottom: 1px solid var(--linea); padding-bottom: 16px;
  list-style: none; background: transparent;
}
body.gf-tienda #payment ul.payment_methods li label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--tinta); font-weight: 500;
  margin: 0;
}
body.gf-tienda #payment ul.payment_methods li img { max-height: 26px; width: auto; display: inline-block; margin: 0 0 0 4px; }
/* El gris de Astra viene de `.woocommerce-page.woocommerce-checkout #payment
   div.payment_box`; hay que igualar esa especificidad para poder pisarlo. */
body.gf-tienda #payment div.payment_box,
body.gf-tienda.woocommerce-checkout #payment div.payment_box,
body.gf-tienda.woocommerce-page #payment div.payment_box {
  background: var(--crema); color: var(--tinta-suave);
  font-size: .82rem; line-height: 1.55; border-radius: 0; margin: 12px 0 0; padding: 14px 16px;
}
body.gf-tienda #payment div.payment_box::before { display: none; }
body.gf-tienda #payment .form-row.place-order { padding: 0; margin: 0; }
body.gf-tienda #payment #place_order { width: 100%; padding: 17px 22px; font-size: .78rem; }
body.gf-tienda .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
body.gf-tienda .woocommerce-privacy-policy-text p { font-size: .76rem; color: var(--tinta-suave); font-weight: 300; }

/* «¿Ya tienes cuenta? Inicia sesión» */
body.gf-tienda .woocommerce-form-login-toggle .woocommerce-info,
body.gf-tienda .woocommerce-form-coupon-toggle .woocommerce-info { font-size: .84rem; }
body.gf-tienda form.woocommerce-form-login {
  border: 1px solid var(--linea); border-radius: 0; padding: clamp(20px, 3vw, 28px); margin: 0 0 26px;
}

/* Gracias / pedido recibido */
body.gf-tienda .woocommerce-order { max-width: 780px; }
body.gf-tienda .gf-gracias h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
body.gf-tienda .gf-gracias h2 em { font-style: italic; color: var(--turquesa); }
body.gf-tienda .gf-gracias > p { margin: 18px 0 0; color: var(--tinta-suave); font-weight: 300; }
body.gf-tienda ul.woocommerce-order-overview,
body.gf-tienda ul.order_details {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0;
  margin: clamp(26px, 4vw, 36px) 0; padding: 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
body.gf-tienda ul.order_details li {
  flex: 1 1 160px; margin: 0; padding: 18px 20px 18px 0; border: 0;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
}
body.gf-tienda ul.order_details li strong {
  display: block; margin-top: 6px;
  font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0; text-transform: none; color: var(--tinta);
}
body.gf-tienda .woocommerce-order .woocommerce-order-details,
body.gf-tienda .woocommerce-order .woocommerce-customer-details { margin-top: clamp(28px, 4vw, 40px); }

/* ─────────────────────────────────────────────────────────────────────────────
   10 · MI CUENTA
   ───────────────────────────────────────────────────────────────────────── */

body.gf-tienda .woocommerce-account .woocommerce { display: block; }
body.gf-tienda .woocommerce-MyAccount-navigation {
  float: none; width: 100%; margin: 0 0 clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--linea);
}
body.gf-tienda .woocommerce-MyAccount-navigation ul {
  display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 3vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
body.gf-tienda .woocommerce-MyAccount-navigation ul li { margin: 0; }
body.gf-tienda .woocommerce-MyAccount-navigation ul li a {
  display: block; padding: 0 0 12px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); border-bottom: 2px solid transparent; transition: .2s;
}
body.gf-tienda .woocommerce-MyAccount-navigation ul li a:hover { color: var(--tinta); }
body.gf-tienda .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--tinta); border-bottom-color: var(--dorado); }

body.gf-tienda .woocommerce-MyAccount-content { float: none; width: 100%; }
body.gf-tienda .woocommerce-MyAccount-content p { font-size: .92rem; }
body.gf-tienda .woocommerce-MyAccount-content mark,
body.gf-tienda .woocommerce mark { background: transparent; color: var(--turquesa); font-weight: 500; }

/* Acceso: dos columnas (entrar / crear cuenta). */
body.gf-tienda .gf-acceso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 52px); align-items: start; }
/* Si algún día se desactiva el registro, la caja sobrante no debe quedarse a
   media anchura contra un hueco vacío. */
body.gf-tienda .gf-acceso.solo-login { grid-template-columns: minmax(0, 520px); justify-content: center; }
@media (max-width: 820px) { body.gf-tienda .gf-acceso { grid-template-columns: 1fr; } }
/* WooCommerce y Astra flotan .col-1/.col-2 al 48% dentro de #customer_login. */
body.gf-tienda .gf-acceso .u-column1,
body.gf-tienda .gf-acceso .u-column2,
body.gf-tienda #customer_login .col-1,
body.gf-tienda #customer_login .col-2 { float: none; width: 100%; margin: 0; }
/* Las dos cajas pesan igual a propósito: `woocommerce_enable_guest_checkout`
   está en «no», así que crear cuenta no es una alternativa secundaria — es
   parte de comprar. */
body.gf-tienda .gf-acceso__caja { background: var(--crema-2); border-top: 3px solid var(--dorado); padding: clamp(24px, 3vw, 34px); }
body.gf-tienda .gf-acceso__caja h2 { font-size: 1.5rem; }
/* WooCommerce enmarca form.login/form.register con su propio borde: dentro de
   la caja quedaría un recuadro dentro de otro. */
body.gf-tienda .gf-acceso form.login,
body.gf-tienda .gf-acceso form.register,
body.gf-tienda .gf-acceso form.woocommerce-form { border: 0; padding: 0; margin: 0; background: transparent; }
body.gf-tienda .gf-acceso__caja > p { margin: 10px 0 22px; font-size: .88rem; color: var(--tinta-suave); font-weight: 300; }
body.gf-tienda .gf-acceso__caja .button { width: 100%; }
body.gf-tienda .gf-acceso .lost_password { margin-top: 14px; font-size: .78rem; }
body.gf-tienda .gf-acceso .lost_password a { color: var(--turquesa); border-bottom: 1px solid rgba(95, 168, 173, .4); }
body.gf-tienda .gf-acceso .woocommerce-form-login__rememberme { margin: 4px 0 18px; }

/* Tablas de pedidos y descargas: el marcado estándar de WooCommerce, vestido. */
body.gf-tienda .woocommerce table.shop_table {
  border: 0; border-collapse: collapse; border-radius: 0; width: 100%; margin: 0 0 24px;
}
body.gf-tienda .woocommerce table.shop_table th,
body.gf-tienda .woocommerce table.shop_table td {
  border: 0; border-bottom: 1px solid var(--linea); padding: 14px 12px 14px 0;
  font-size: .86rem; color: var(--tinta); background: transparent;
}
body.gf-tienda .woocommerce table.shop_table th {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 500;
}
body.gf-tienda .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 1px solid var(--linea); }
body.gf-tienda .woocommerce table.shop_table .button { padding: 9px 16px; font-size: .64rem; }
body.gf-tienda .woocommerce-Address { margin-bottom: 26px; }
body.gf-tienda .woocommerce-Address address { font-style: normal; font-size: .9rem; line-height: 1.7; color: var(--tinta-suave); }
body.gf-tienda .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
body.gf-tienda .woocommerce-Address-title h2,
body.gf-tienda .woocommerce-Address-title h3 { font-size: 1.2rem; }
body.gf-tienda .woocommerce-Address-title .edit { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--turquesa); }
body.gf-tienda fieldset { border: 0; border-top: 1px solid var(--linea); padding: 22px 0 0; margin: 26px 0 0; }
body.gf-tienda fieldset legend { font-family: var(--serif); font-size: 1.2rem; padding: 0 12px 0 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   11 · LIMPIEZA
   ───────────────────────────────────────────────────────────────────────── */

/* Restos de la maquetación flotante de WooCommerce que no aplican al chasis. */
body.gf-tienda .woocommerce::after,
body.gf-tienda .woocommerce::before,
body.gf-tienda .woocommerce .col2-set::after,
body.gf-tienda .woocommerce .col2-set::before { content: none; }
/* ⚠️ NO ocultar .cart-collaterals: el panel de resumen lleva esa clase a
   propósito, para que los complementos que la buscan sigan encontrándola. Lo
   que se oculta son las ventas cruzadas y la calculadora de envío. */
body.gf-tienda .woocommerce .cross-sells,
body.gf-tienda .cross-sells,
body.gf-tienda .shipping-calculator-form,
body.gf-tienda .woocommerce-shipping-calculator { display: none; }
body.gf-tienda .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }