/* ════════════════════════════════════════════════════════════════════
   LA TIENDA — lo propio de First Day Editions
   ════════════════════════════════════════════════════════════════════

   Se carga sólo en las páginas de WooCommerce (ver functions.php).

   🔴 ESTE ARCHIVO SE REESCRIBIÓ DE CERO. Tenía 90 líneas mías para Our
   Collection que quedaron muertas al portar la plantilla de FamilyCrests, y al
   sacarlas con un filtro por LÍNEAS quedaron cuerpos sin selector y llaves
   desbalanceadas. Un CSS con llaves de más no da ningún error: el navegador se
   come en silencio todo lo que viene después, y el síntoma aparece en otra
   página. Reescribirlo salió más barato que seguir buscando la llave.

   🔑 Para la próxima: el CSS no se corta por líneas, se corta por reglas
   contando llaves.

   Lo de Our Collection ahora vive en _portado-coleccion.css, extraído del
   style.css de FamilyCrests. Acá queda sólo lo nuestro.
   ⬜ La ficha de producto todavía usa marcado propio: cuando se porte la de
   ellos (functions.php L367–847), estas reglas también se van.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────── La ficha ───────────────── */

.woocommerce div.product .product_title { margin: 6px 0 14px; }

.woocommerce div.product p.price {
  font-family: var(--fde-font-heading);
  font-size: 26px;
  color: var(--fde-text);
  margin: 0 0 20px;
}

/* El tachado es el ancla permanente. Va apagado y más chico que el precio
   vivo: si pesan lo mismo, el ojo no sabe cuál se paga. */
.woocommerce div.product p.price del { opacity: .5; font-size: .85em; margin-right: .45em; }
.woocommerce div.product p.price ins { text-decoration: none; font-weight: 600; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 21px;
  line-height: 1.55;
  color: var(--fde-text-soft);
  margin-bottom: 28px;
}

/* La categoría arriba del título repite el breadcrumb que está dos renglones
   más arriba, y no hay más categorías que ésa.
   Va por CSS y no por remove_action porque Astra reemplaza el bloque entero de
   la ficha por closures anónimos: no hay callback que quitar. Está explicado
   en mu-plugins/firstdayeditions-producto.php. */
.woocommerce div.product .single-product-category,
.woocommerce div.product .product_meta { display: none; }

/* El globo «Sale!» de Astra: se saca por su opción en el mu-plugin, y esto es
   la red por si una actualización del tema le cambia el nombre a esa opción. */
.ast-onsale-card,
.woocommerce span.onsale { display: none !important; }

/* ── El formulario de personalización ──
   Es lo más importante de la página y tiene que parecerlo: bloque con fondo
   propio, pegado al botón, no perdido entre el texto. */
.fde-personaliza {
  background: rgba(var(--fde-navy-rgb), .04);
  border: 1px solid var(--fde-border-soft);
  padding: 22px 22px 6px;
  margin: 0 0 22px;
}

.fde-personaliza__t {
  font-family: var(--fde-font-ui);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 600;
  color: var(--fde-gold);
  margin: 0 0 16px;
}

.fde-campo { margin: 0 0 18px; }

.fde-campo label {
  display: block;
  font-family: var(--fde-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--fde-navy);
  margin-bottom: 6px;
}

.fde-campo input,
.fde-campo select {
  width: 100%;
  /* 🔴 16 px COMO MÍNIMO, Y NO ES ESTÉTICA. Safari en iPhone hace zoom
     automático sobre cualquier campo con letra menor: el visitante toca el
     campo, la página salta, y en un formulario de compra eso se siente roto.
     Van 18 porque además el público llega a los 70 años. */
  font-size: 18px;
  font-family: var(--fde-font-body);
  padding: 13px 14px;
  border: 1px solid rgba(var(--fde-navy-rgb), .3);
  border-radius: var(--fde-input-radius);
  background: var(--fde-white);
  color: var(--fde-text);
}

.fde-campo input:focus,
.fde-campo select:focus {
  outline: 2px solid var(--fde-gold);
  outline-offset: 1px;
  border-color: var(--fde-gold);
}

.fde-campo__ayuda {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fde-text-soft);
  margin-top: 6px;
}

.fde-campo abbr.required { border: none; text-decoration: none; color: var(--fde-gold); }

/* ── El acordeón y las FAQ ── */
.fde-ficha-extra {
  max-width: var(--fde-container-width);
  margin: 0 auto;
  padding: 0 var(--fde-container-padding) 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.fde-plegable__t {
  font-size: 27px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fde-border-soft);
}

.fde-plegable__fila { border-bottom: 1px solid var(--fde-border-soft); }

.fde-plegable__fila summary {
  cursor: pointer;
  padding: 16px 28px 16px 0;
  font-family: var(--fde-font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--fde-navy);
  position: relative;
  list-style: none;
}

.fde-plegable__fila summary::-webkit-details-marker { display: none; }

.fde-plegable__fila summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fde-font-ui);
  font-size: 22px;
  font-weight: 300;
  color: var(--fde-gold);
}

.fde-plegable__fila[open] summary::after { content: '–'; }

.fde-plegable__cuerpo {
  padding: 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fde-text-soft);
}

.fde-plegable__cuerpo p { margin: 0 0 12px; }

@media (max-width: 860px) {
  .fde-ficha-extra { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
}

/* ───────────────── El cajón del carrito ───────────────── */

/* La fila de «Complete the set», que en FamilyCrests es un panel aparte de 463
   líneas que se abre ANTES del cajón. Acá va adentro, por pedido del owner. */
.fde-cart-sug {
  border-top: 1px solid var(--fde-border-soft);
  padding: 16px 20px 4px;
}

.fde-cart-sug__t {
  font-family: var(--fde-font-ui);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 12px;
  font-weight: 600;
  color: var(--fde-gold);
  margin: 0 0 12px;
}

.fde-cart-sug__lista { list-style: none; margin: 0; padding: 0; }
.fde-cart-sug__item { margin-bottom: 12px; }

.fde-cart-sug__item a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fde-text);
}

.fde-cart-sug__img {
  width: 44px;
  height: 62px;
  object-fit: contain;
  background: var(--fde-cream);
  border: 1px solid var(--fde-border-soft);
}

.fde-cart-sug__nombre { font-size: 15px; line-height: 1.3; color: var(--fde-navy); }
.fde-cart-sug__precio { font-size: 14px; white-space: nowrap; }
.fde-cart-sug__precio del { opacity: .5; font-size: .82em; margin-right: .3em; }
.fde-cart-sug__precio ins { text-decoration: none; font-weight: 600; }

/* El aviso cuando una escritura falla. FamilyCrests no tiene ninguno: cuando
   algo falla, falla en silencio y la pantalla queda mintiendo. */
.fde-cart-drawer__aviso {
  margin: 0 0 12px;
  padding: 11px 14px;
  background: rgba(201, 168, 76, .14);
  border-left: 3px solid var(--fde-gold);
  font-size: 15px;
  line-height: 1.45;
  color: var(--fde-text);
}

.fde-cart-drawer__aviso[hidden] { display: none; }

/* ───────────────── Carrito y checkout ───────────────── */

/* Lo que el cliente escribió viaja a la vista en todo el camino: carrito,
   checkout y orden. Es el dato que define lo que se imprime, y verlo escrito
   antes de pagar es lo que evita el reclamo de «me lo mandaron con el apellido
   mal». */
.woocommerce td.product-name dl.variation,
.woocommerce .wc-item-meta {
  font-size: 16px;
  color: var(--fde-text-soft);
  margin: 6px 0 0;
}

.woocommerce td.product-name dl.variation dt,
.woocommerce .wc-item-meta dt { font-weight: 600; color: var(--fde-navy); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  font-size: 18px;   /* otra vez: por debajo de 16 px, Safari en iPhone hace zoom */
  padding: 13px 14px;
  border: 1px solid rgba(var(--fde-navy-rgb), .3);
  border-radius: var(--fde-input-radius);
  background: var(--fde-white);
}

/* ── El botón de compra ──
   🔴 Medido en un teléfono de 390 px: salía 123×35. El mínimo táctil
   recomendado es 44 px de alto, y éste es EL control de la página: el que
   decide si hay venta. A 35 px de alto y 123 de ancho, un pulgar lo falla.

   Va ancho completo porque al lado no hay nada que compita, y la cantidad se
   sube arriba: casi nadie compra dos del mismo pack, y un selector de
   cantidad al lado del botón le come la mitad del ancho.

   ⚠️ Esto desaparece cuando entre la columna de compra de FamilyCrests, que
   trae su propio botón. Hasta entonces, la ficha usa el formulario estándar de
   WooCommerce y necesita que ese botón se pueda tocar. */
.woocommerce div.product form.cart { display: block; }

.woocommerce div.product form.cart div.quantity {
  margin: 0 0 12px;
  float: none;
}

.woocommerce div.product form.cart div.quantity input {
  width: 84px;
  padding: 12px;
  font-size: 18px;   /* por debajo de 16 px Safari en iPhone hace zoom */
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"],
.woocommerce div.product form.cart .single_add_to_cart_button {
  display: block;
  width: 100%;
  min-height: 52px;
  font-family: var(--fde-font-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 16px 28px;
  background: var(--fde-navy);
  color: var(--fde-white);
  border: none;
  border-radius: var(--fde-button-radius);
  transition: background .18s;
}

.woocommerce div.product form.cart .button:hover { background: #0c1f2d; }
.woocommerce div.product form.cart .button:active { transform: scale(.985); }

/* ── 🔴 EL ACORDEÓN SE METÍA COMO TERCERA COLUMNA ──
   Medido: la galería, la columna de compra y el acordeón arrancaban los tres
   en el mismo top, y el acordeón quedaba de 50 px de ancho aplastado contra
   el borde, con su texto encima del de la ficha.

   La causa es de libro: WooCommerce maqueta la ficha con floats —galería a la
   izquierda, resumen a la derecha— y lo que se cuelga de
   `woocommerce_after_single_product_summary` cae adentro de ese contexto. Sin
   limpiar los floats, se acomoda al lado en vez de abajo.

   Y el contenedor tampoco los contenía: `div.product` medía 691 px de alto
   con una galería de 877 adentro. `display: flow-root` lo arregla sin el
   clearfix de dos pseudo-elementos. */
.woocommerce div.product { display: flow-root; }

.fde-ficha-extra {
  clear: both;
  width: 100%;
  margin-top: 56px;
}

/* ── El titular del producto ──
   🔴 Salía en 20 px, igual que el cuerpo: el nombre del producto no se leía
   como titular. Medido en el navegador.

   Las medidas son las que FamilyCrests le da al suyo en
   `.fde-home-featured__title`: 30 px en teléfono y 40 en escritorio, peso 400,
   interlínea 1,15. No las elegí yo — las copié de su sistema, que es lo que
   corresponde mientras la ficha use el formulario estándar y no su columna de
   compra.

   ⚠️ Va `body.woocommerce` PEGADO, sin espacio. La clase `woocommerce` la
   lleva el <body> mismo y no hay ningún div envolvente con ella: con espacio,
   el selector pide que `.woocommerce` sea descendiente del body y NUNCA
   matchea. Un espacio de más y la regla entera es letra muerta, sin error y
   sin aviso — el titular siguió saliendo en 20 px.
   El `body` va igual para ganarle por especificidad a la hoja inline de
   Astra, que se imprime después de ésta. */
body.woocommerce div.product .product_title {
  /* ⚠️ SIN font-family A PROPÓSITO, y no es un olvido. FamilyCrests tiene una
     regla que fuerza Montserrat sobre TODO lo que hay adentro de la ficha
     —`body.single-product .ast-article-single *:not(svg)…`— con !important.
     Cualquier font-family que escriba acá pierde contra ella y queda como una
     declaración que miente sobre lo que pasa.
     Esa regla entró con el CSS de reseñas (su :not() menciona .rating y
     .rv-stars) y SE QUEDA: la ficha de ellos es Montserrat de punta a punta y
     el encargo es duplicarla. */
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--fde-text);
  margin: 0 0 15px;
}

@media (min-width: 750px) {
  body.woocommerce div.product .product_title { font-size: 40px; }
}