/*
Theme Name: Memora Tienda
Theme URI: https://memora.ink
Author: Memora
Author URI: https://memora.ink
Description: Tema de bloques para la tienda de fotolibros de Memora. Trae la paleta del manual de marca (crema, verde profundo y terracota), las tipografías Fraunces y Manrope autoalojadas, y el isologo. Pensado para WooCommerce y para el plugin «Memora · fotolibros para WooCommerce».
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: memora-tienda
Tags: e-commerce, block-patterns, full-site-editing, custom-colors, custom-logo, wide-blocks

Las tipografías Fraunces y Manrope se distribuyen bajo la SIL Open Font License
1.1; su texto está en assets/fonts/.
*/

/*
 * Un tema de bloques pone casi todo en theme.json. Aquí quedan solo los
 * retoques que theme.json no alcanza: cosas que WooCommerce pinta con sus
 * propias clases.
 */

/* El isologo del encabezado, que no debe crecer con el ancho del sitio. */
.wp-block-site-logo img {
  max-height: 46px;
  width: auto;
}

/* Fichas de producto: la foto manda y el texto va debajo, tranquilo. */
.wc-block-grid__product-title,
.woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 400;
}

/* El precio en verde y no en el gris del tema padre. */
.woocommerce .price,
.wc-block-components-product-price {
  color: var(--wp--preset--color--verde);
  font-weight: 600;
}

/*
 * Los avisos de WooCommerce llegan con su propio verde y su propio rojo. Se
 * repintan con los de la marca para que no aparezcan tres verdes distintos en
 * la misma página.
 */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
  border-color: var(--wp--preset--color--verde);
  background: var(--wp--preset--color--crema-hondo);
  color: var(--wp--preset--color--verde);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-color: #B3261E;
  background: #FCF2F1;
  color: #8E1D17;
}

/*
 * El formulario de «Diseña tu fotolibro» que pone el plugin en la ficha. Usa
 * las clases de WooCommerce para el botón (.single_add_to_cart_button), así
 * que hereda el color de la marca sin tocarlo; lo que falta es el aire y el
 * desplegable de tamaño.
 */
.memora-disenar {
  margin: 1.5em 0;
}

.memora-formatos {
  margin: 0 0 1em;
}

.memora-formatos label {
  font-size: 0.875rem;
}

.memora-formatos select {
  margin-top: 0.4em;
  padding: 0.6em 0.8em;
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--wp--preset--color--verde);
  font-family: inherit;
  font-size: 1rem;
}

/* La nota de debajo explica el salto al editor: va en voz baja. */
.memora-nota {
  margin: 0.9em 0 0;
  max-width: 44ch;
  color: var(--wp--preset--color--verde-suave);
  line-height: 1.5;
}

/*
 * El botón de WooCommerce fuera de los bloques (el del plugin, y el de las
 * fichas del catálogo clásico) no recibe los estilos de theme.json, que solo
 * alcanzan a los botones de bloque.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.memora-disenar .single_add_to_cart_button {
  padding: 0.85em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--terracota-honda);
  color: #FFFFFF;
  font-family: var(--wp--preset--font-family--texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.memora-disenar .single_add_to_cart_button:hover {
  background: var(--wp--preset--color--terracota-oscura);
  color: #FFFFFF;
}

/*
 * Foco visible en todo lo que se pueda recorrer con el teclado. WooCommerce y
 * el editor de bloques lo quitan en varios sitios.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--terracota-honda);
  outline-offset: 2px;
}