/*
Theme Name: Flatsome Child — Fleurs Deuil Toulouse
Description: Child theme Flatsome pour fleursdeuiltoulouse.fr — boutique de fleurs de deuil livrées en 2-3h dans tous les funérariums et cimetières de Toulouse et la Haute-Garonne. Misma arquitectura que el child de Paris, paleta de marca morada #50008c.
Author: Flor10
Template: flatsome
Version: 1.11
*/

/* ============================================================
   FLEURS DEUIL PARIS — Estilos personalizados
   Prefijo de clases custom: fdt-

   Índice:
     1.  VARIABLES DE COLOR
     2.  TIPOGRAFÍA GLOBAL
     3.  ENLACES
     4.  BOTONES
     5.  HEADER Y NAVEGACIÓN
     6.  SECCIONES OSCURAS (banners hero)
     7.  SECCIONES CREMA
     8.  TARJETAS DE CATEGORÍA (Featured Boxes)
     9.  ACORDEÓN / FAQ
    10.  PÁGINA DE PRODUCTO
    11.  PÁGINA DE CATEGORÍA (cuadrícula de productos)
    12.  CARRITO Y CHECKOUT
    13.  PÁGINA 404
    14.  PÁGINA CARRITO VACÍO
    15.  BANNER DE COOKIES (GDPR)
    16.  FOOTER
    17.  UTILIDADES
    18.  RESPONSIVE — TABLET
    19.  RESPONSIVE — MÓVIL
   ============================================================ */


/* =============================================================
   1. VARIABLES DE COLOR
   Paleta principal del sitio. Se usan en todo el CSS para
   mantener coherencia visual con la web estática.
   - ink / ink-2: gris-azulado muy oscuro para texto principal,
     títulos y botones generales del tema.
   - shop / shop-dark: verde tienda (#03702f) reservado para
     los CTAs comerciales — botón "Commander" y "Valider".
   - terracotta: acento secundario para detalles decorativos
     (separadores, hovers de enlaces).
   - paper / paper-2: blanco puro y crema cálida para fondos.
   - rule / muted: bordes sutiles y texto secundario.
   ============================================================= */
:root {
    --fdt-ink:           #241133;
    --fdt-ink-2:         #3a1a52;
    --fdt-shop:          #50008c;
    --fdt-shop-dark:     #3a0066;
    --fdt-terracotta:    #50008c;
    --fdt-terracotta-dk: #3a0066;
    --fdt-paper:         #ffffff;
    --fdt-paper-2:       #f9f7f4;
    --fdt-text:          #333333;
    --fdt-text-light:    #666666;
    --fdt-muted:         #818590;
    --fdt-rule:          #e5e0d8;
}


/* =============================================================
   2. TIPOGRAFÍA GLOBAL
   Tamaño base 16px con interlineado amplio (1.7) para mejorar
   la legibilidad. Los encabezados usan el ink de la marca y
   peso 600 para mantener jerarquía sin recurrir a fuentes
   decorativas.
   ============================================================= */
body {
    color: var(--fdt-text);
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fdt-ink);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.6em; margin-bottom: 15px; }
h3 { font-size: 1.25em; }


/* =============================================================
   3. ENLACES
   Color terracotta con transición suave al hacer hover.
   Aporta calidez sin ser llamativo — acorde al tono sobrio
   y moderno del sector funerario premium.
   ============================================================= */
a {
    color: var(--fdt-terracotta);
    transition: color 0.3s ease;
}
a:hover {
    color: var(--fdt-terracotta-dk);
}


/* =============================================================
   4. BOTONES
   Cuatro variantes:
   - primary: fondo ink (gris-azulado oscuro), para CTAs
     generales del tema ("En savoir plus", "Voir tout").
   - shop: fondo verde tienda (#03702f), reservado para los
     CTAs comerciales del checkout y página de producto
     ("Commander", "Valider ma commande").
   - secondary: fondo terracotta, para CTAs decorativos
     que no llevan al checkout.
   - white: borde blanco transparente, para CTAs sobre
     fondos oscuros (banners hero).
   ============================================================= */
.button.primary,
button.primary,
input[type="submit"].button.primary {
    background-color: var(--fdt-ink) !important;
    border-color: var(--fdt-ink) !important;
    color: var(--fdt-paper) !important;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.button.primary:hover,
button.primary:hover,
input[type="submit"].button.primary:hover {
    background-color: var(--fdt-ink-2) !important;
    border-color: var(--fdt-ink-2) !important;
}

/* Variante "shop" — verde tienda para CTAs comerciales */
.button.shop,
.button.checkout,
.button.add-to-cart-button {
    background-color: var(--fdt-shop) !important;
    border-color: var(--fdt-shop) !important;
    color: var(--fdt-paper) !important;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.button.shop:hover,
.button.checkout:hover {
    background-color: var(--fdt-shop-dark) !important;
    border-color: var(--fdt-shop-dark) !important;
}

.button.secondary {
    background-color: var(--fdt-terracotta) !important;
    border-color: var(--fdt-terracotta) !important;
    color: var(--fdt-paper) !important;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}
.button.secondary:hover {
    background-color: var(--fdt-terracotta-dk) !important;
    border-color: var(--fdt-terracotta-dk) !important;
}

.button.white {
    background-color: transparent !important;
    border: 2px solid var(--fdt-paper) !important;
    color: var(--fdt-paper) !important;
    border-radius: 4px;
}
.button.white:hover {
    background-color: var(--fdt-paper) !important;
    color: var(--fdt-ink) !important;
}


/* =============================================================
   5. HEADER Y NAVEGACIÓN
   Fondo blanco limpio sin borde inferior visible (el border
   se queda en 0 para mantener el aspecto editorial del sitio
   estático). Los enlaces del menú sin mayúsculas forzadas
   (text-transform: none) para un aspecto más elegante.
   ============================================================= */
.header-main {
    background-color: var(--fdt-paper);
    border-bottom: 0 solid var(--fdt-rule);
}

.nav > li > a {
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}

/* Cursor "default" en los items del menú con submenú —
   evita que se vea como clicable cuando solo abre dropdown */
.nav li.menu-item-has-children a.nav-top-link {
    cursor: default !important;
}


/* =============================================================
   6. SECCIONES OSCURAS (banners hero)
   Fuerza texto blanco en encabezados y párrafos dentro
   de las secciones con clase "dark" de Flatsome
   (shortcode [section dark="true"]).
   ============================================================= */
.section.dark h1,
.section.dark h2,
.section.dark h3 {
    color: var(--fdt-paper);
}
.section.dark p {
    color: rgba(255, 255, 255, 0.9);
}


/* =============================================================
   7. SECCIONES CREMA
   Añade bordes sutiles arriba y abajo a las secciones con
   fondo crema (#f9f7f4) para separarlas visualmente del
   contenido blanco.
   ============================================================= */
.section[style*="f9f7f4"] {
    border-top: 1px solid var(--fdt-rule);
    border-bottom: 1px solid var(--fdt-rule);
}


/* =============================================================
   8. TARJETAS DE CATEGORÍA (Featured Boxes)
   Usadas en la homepage para mostrar las 6 categorías
   (Couronnes, Bouquets, Coussins, Dessus de Cercueil, Gerbes,
   Plantes). Efecto hover: sube 3px y añade sombra para dar
   sensación de profundidad.
   ============================================================= */
.featured-box {
    padding: 25px;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}


/* =============================================================
   9. ACORDEÓN / FAQ
   Estilo para los bloques [accordion faq_schema="true"]
   de Flatsome. Título con peso medio, interior con fondo
   crema para distinguir la respuesta.
   ============================================================= */
.accordion-title {
    font-weight: 500;
    font-size: 1.05em;
    padding: 15px 20px;
    border-color: var(--fdt-rule);
}
.accordion-inner {
    padding: 15px 20px;
    background-color: var(--fdt-paper-2);
}
.accordion .toggle {
    position: static !important;
}


/* =============================================================
   10. PÁGINA DE PRODUCTO
   Estilos para la ficha de producto individual: código
   SKU, variaciones, botón de compra, imágenes de
   confianza y etiquetas.
   ============================================================= */

/* Tamaño del código de producto (SKU) en la ficha */
.sku_wrapper {
    font-size: 23px;
}

/* Ocultar botón "Añadir al carrito" debajo de la imagen */
.add-to-cart-button {
    display: none !important;
}

/* Ocultar categorías y etiquetas en el SKU superior del
   single-product; mostrar solo en el SKU inferior (cerca
   del bloque de información adicional) */
div.product-gallery + div.product-summary .posted_in,
div.product-gallery + div.product-summary .tagged_as {
    display: none !important;
}
form.variations_form + div.product_meta .posted_in,
form.variations_form + div.product_meta .tagged_as,
form.cart + div.product_meta .posted_in,
form.cart + div.product_meta .tagged_as {
    display: block !important;
}

/* Juntar código de producto inferior con las pestañas
   de "información adicional" */
.product-main > .row {
    margin-bottom: -3% !important;
}
.product .product-footer {
    margin-top: 1% !important;
}

/* Ocultar botón "Limpiar" en las variaciones del producto */
.variations_form .reset_variations {
    visibility: hidden !important;
}


/* Precio del producto en la ficha (resumen y bloque de
   variación). Se usa la familia Spectral para alinearlo
   con el H1 del título y se eleva el tamaño para que el
   precio sea el segundo punto focal de la página, tras
   el nombre del producto. */
.product-page-price,
.woocommerce div.product p.price,
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--fdt-ink) !important;
    margin: 0.5rem 0 1rem !important;
}
.product-page-price .woocommerce-Price-amount,
.woocommerce div.product .single_variation_wrap .woocommerce-Price-amount {
    font-weight: 600 !important;
    color: var(--fdt-ink) !important;
}
.product-page-price .woocommerce-Price-currencySymbol,
.woocommerce div.product .single_variation_wrap .woocommerce-Price-currencySymbol {
    font-size: 0.78em;
    margin-left: 0.1em;
}
.woocommerce-price-suffix {
    display: inline-block;
    margin-left: 0.5rem;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--fdt-muted);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .product-page-price,
    .woocommerce div.product p.price,
    .woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
        font-size: 1.65rem !important;
    }
}

/* Botón principal "Commander" en la ficha de producto —
   usa el verde tienda (#03702f) para máxima legibilidad
   del CTA comercial. Altura amplia y tipografía mayúsculas
   para reforzar el call-to-action. */
.single_add_to_cart_button {
    width: 100%;
    height: 66px;
    background: var(--fdt-shop) !important;
    color: var(--fdt-paper) !important;
    border: 0;
    border-radius: 5px !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.3s ease;
}
.single_add_to_cart_button:hover {
    background: var(--fdt-shop-dark) !important;
}

/* Hacer más largo el botón "COMMANDER" en la página de
   producto cuando hay un wrapper de variación */
.custom-product-page .single_variation_wrap button.single_add_to_cart_button {
    width: 97% !important;
}

/* Hacer más grande el select de las variaciones (tamaño
   couronne/gerbe) en la página de producto */
.product .variations_form select {
    font-size: 16px;
    padding: 10px;
    width: 100%;
}

/* Fila de imágenes de confianza (livraison garantie,
   paiement sécurisé, commerce sûr) bajo el botón de compra */
.fdt-trust-badges {
    margin-bottom: 1.5em !important;
    margin-top: -0.5em !important;
    text-align: center !important;
}
.fdt-trust-badges img {
    max-width: 100%;
    height: auto;
}


/* =============================================================
   11. PÁGINA DE CATEGORÍA (cuadrícula de productos)
   Estilos para la cuadrícula de productos en las páginas
   de categoría WooCommerce. La tarjeta sigue este orden
   visual:
     [imagen]
     SKU: FDP-XXX-NNN   (terracotta, pequeño)
     CATEGORIA          (gris uppercase, muy pequeño)
     Nombre del producto (ink, grande, peso 600)
     145,00 €           (ink, peso 600)
   Cada bloque con su margen propio para evitar solapes.
   ============================================================= */

/* Tarjeta general */
.product-small .box-text {
    padding: 18px 15px 20px;
    text-align: center;
}

/* SKU: arriba del todo, terracotta, pequeño. El elemento
   se imprime desde fdp_custom_before_title() en functions.php */
.product-small .box-text .sku_wrapper {
    display: block;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--fdt-terracotta);
    letter-spacing: 0.5px;
    margin: 0 0 4px;
}
.product-small .box-text .sku_wrapper .sku {
    color: var(--fdt-terracotta);
}

/* Subtítulo de categoría — usamos .category-name nativo
   de Flatsome. Si Flatsome lo oculta por defecto, lo
   forzamos visible y le damos estilo discreto */
.product-small .box-text .category {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--fdt-muted);
    margin: 0 0 6px;
}

/* Título del producto — ink, prominente, sin descenders
   pegados al precio */
.product-small .title-wrapper {
    margin-bottom: 8px;
}
.product-small .title-wrapper .woocommerce-loop-product__title,
.product-small .title-wrapper .woocommerce-loop-product__title a,
.shop-container .product-small .title-wrapper .woocommerce-loop-product__title a {
    color: var(--fdt-ink);
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* Precio — ink, peso 600, sin negative margin (era el
   culpable del solape contra el título en la version
   anterior heredada del child theme PT) */
.product-small .price-wrapper {
    margin-top: 0;
}
.product-small .price-wrapper .price,
.product-small .price {
    color: var(--fdt-ink);
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    display: block;
}

/* Sufijo "TVA incluse" (price suffix) — más discreto
   y en línea con el precio en un tono atenuado */
.product-small .price .woocommerce-Price-suffix,
.product-small .price small {
    color: var(--fdt-muted);
    font-size: 0.7em;
    font-weight: 400;
    margin-left: 4px;
    text-decoration: none;
}

/* Botón "ajouter au panier" en el listado — usa el
   verde tienda para mantener coherencia con el CTA principal.
   Se separa del precio con un margen superior. */
.product-small .add_to_cart_button {
    margin-top: 10px;
    background-color: var(--fdt-shop) !important;
    color: var(--fdt-paper) !important;
    border-radius: 4px;
    font-weight: 500;
}
.product-small .add_to_cart_button:hover {
    background-color: var(--fdt-shop-dark) !important;
}

/* Ocultar metadatos redundantes dentro de la tarjeta:
   "Categoria:" y "Etiquetas:" que algunos temas pintan
   en el listado además del nombre de la categoría */
.product-small .box-text .posted_in,
.product-small .box-text .tagged_as {
    display: none !important;
}

/* Ocultar estrellas y review links (no usamos reseñas
   en el sector funerario — ver functions.php) */
.product-small .star-rating,
.product-small .woocommerce-review-link {
    display: none !important;
}


/* =============================================================
   12. CARRITO Y CHECKOUT
   Estilos para las páginas de carrito y checkout de
   WooCommerce: campos, términos y condiciones,
   resumen de pedido y botón final.
   ============================================================= */

/* Botón "Valider ma commande" — ancho completo y verde tienda */
#place_order,
.form-row #place_order {
    width: 100%;
    background-color: var(--fdt-shop) !important;
    border-color: var(--fdt-shop) !important;
    color: var(--fdt-paper) !important;
    border-radius: 5px !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.3s ease;
}
#place_order:hover {
    background-color: var(--fdt-shop-dark) !important;
    border-color: var(--fdt-shop-dark) !important;
}

/* Ocultar campo "Pays" en el formulario de checkout —
   el servicio se limita a Francia/Île-de-France y el campo
   solo añade fricción */
#billing_country_field,
#shipping_country_field {
    display: none;
}

/* Botón y texto "Retirer le produit" en el checkout */
div.removeProductContainer {
    display: inline-flex;
}
a.removeProductLink {
    margin-bottom: 0.5em;
}
span.removeProductText {
    margin-left: 0.5em;
    padding-top: 0.2em;
}

/* Nombre y precio del producto en el resumen de pedido */
.woocommerce-checkout-review-order .product-total .woocommerce-Price-amount {
    font-size: 1.5em;
}
.woocommerce-checkout-review-order .product-total .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    font-size: 1em !important;
}
.woocommerce-checkout-review-order .product-item-thumbnail {
    margin-bottom: 1em;
}
.woocommerce-checkout-review-order .productItemName {
    display: contents;
    font-weight: bold;
}

/* Caja "Conditions générales de vente" — borde verde
   para reforzar visualmente la aceptación obligatoria */
.woocommerce-terms-and-conditions-wrapper .validate-required {
    margin-bottom: 1.5em;
}
.woocommerce-terms-and-conditions-wrapper p label {
    border: 2px solid var(--fdt-shop) !important;
    font-size: 0.8em;
    padding-bottom: 2%;
}

/* Checkbox de términos — tamaño doble en desktop para
   evitar errores de selección en clientes mayores */
.woocommerce-terms-and-conditions-wrapper input[type=checkbox] {
    -ms-transform:     scale(2) !important;
    -moz-transform:    scale(2) !important;
    -webkit-transform: scale(2) !important;
    -o-transform:      scale(2) !important;
    margin-left: 3% !important;
    margin-top:  3% !important;
    padding:     10px !important;
}

/* Texto de los términos — tamaño mayor para legibilidad */
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 1.2em !important;
    margin-left: 3% !important;
}

/* Total de la compra en checkout — más grande y oscuro
   para que el cliente vea claramente el importe final */
.checkout #order_review .order-total th {
    font-size: 1.3em !important;
    width: 50%;
}
.checkout #order_review .order-total td strong .woocommerce-Price-amount {
    font-size: 1.5em;
    color: var(--fdt-ink);
}


/* =============================================================
   13. PÁGINA 404
   Estilos para la página de error 404.
   ============================================================= */
.error-404 {
    margin-top: -3% !important;
}
.error-404 #divLogo404 {
    font-size: 6em;
    font-weight: bold;
    opacity: .3;
}
.error-404 #divLogo404 img {
    height: 1em;
    margin-left: 15% !important;
}
.error-404 #divTexto404 {
    margin-top: 8% !important;
}
.error-404 #divContImgs404 {
    padding-top: 0 !important;
}
.error-404 #divContImgs404 > p {
    font-variant: small-caps;
    text-align: center;
}
.error-404 #divContImgs404 .boxImg404 {
    width: 372px;
}
.error-404 .textoBajoFoto404 a span {
    font-size: 120%;
}
.error-404 .nameProduct404 {
    font-size: 1.3em !important;
}

/* Imágenes de categorías en páginas 404 y carrito vacío */
.img404CartEmpty {
    width: 80% !important;
}


/* =============================================================
   14. PÁGINA CARRITO VACÍO
   Estilos para cuando el carrito está vacío.
   ============================================================= */
#divContImgsCartEmpty {
    margin-top: -0.5%;
    padding-top: 0;
}
#divContImgsCartEmpty > p {
    text-align: center;
    font-variant: small-caps;
}
#divContImgsCartEmpty .boxImgCartEmpty {
    width: 372px;
}
.textoBajoFotoCartEmpty a span {
    font-size: 120%;
}

/* Centrar título en la página de carrito */
.woocommerce-cart h1 {
    text-align: center;
}

/* Centrar textos en la página de carrito vacío */
.woocommerce-notices-wrapper .woocommerce-message .message-container,
.woocommerce-notices-wrapper .woocommerce-message .cart-empty,
.woocommerce-notices-wrapper .cart-empty,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .message-container {
    text-align: center !important;
}


/* =============================================================
   15. BANNER DE COOKIES (GDPR — Moove GDPR Plugin)
   Estilo completo para el banner de consentimiento de cookies
   con overlay oscuro. Lo deja centrado en la pantalla con un
   fondo oscurecido detrás, en lugar del banner fijo abajo.
   ============================================================= */

/* Banner centrado con overlay */
#moove_gdpr_cookie_info_bar {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 700px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9001 !important;
    background: var(--fdt-paper) !important;
    color: #000 !important;
    border-radius: 5px !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    pointer-events: all !important;
    height: 35% !important;
    min-height: 300px !important;
}

/* Mostrar banner cuando el overlay está visible */
body.overlay-visible #moove_gdpr_cookie_info_bar {
    display: flex !important;
}

/* Fondo oscuro del overlay */
body.overlay-visible::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 9000 !important;
}
body.banner-closed::before {
    display: none !important;
}

/* Texto del banner */
.moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p {
    color: #000 !important;
}
.moove-gdpr-info-bar-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 40px !important;
    text-align: center !important;
}

/* Botones del banner */
#moove_gdpr_cookie_info_bar .moove-gdpr-button-holder .mgbutton {
    opacity: 1 !important;
    font-weight: normal !important;
    filter: none !important;
    box-shadow: none !important;
}
.moove-gdpr-cookie-notice p {
    margin-bottom: 10px !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
    font-weight: normal !important;
    color: black !important;
}
.moove-gdpr-cookie-notice p strong {
    font-weight: normal !important;
    text-align: justify !important;
    font-size: 1em !important;
}
.moove-gdpr-button-holder {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin: 10px;
}

/* Ordenación y estilo de los botones GDPR — el "allow all"
   usa el verde tienda para coherencia visual con los CTAs
   comerciales del sitio */
.moove-gdpr-infobar-reject-btn {
    order: 1 !important;
    color: black !important;
    background-color: var(--fdt-paper) !important;
    border: 1px solid black !important;
}
.moove-gdpr-infobar-settings-btn {
    order: 2 !important;
    color: black !important;
    background-color: var(--fdt-paper) !important;
    border: 1px solid black !important;
}
.moove-gdpr-infobar-allow-all {
    order: 3 !important;
    background-color: var(--fdt-shop) !important;
    border: 1px solid var(--fdt-shop) !important;
}

/* Hover en los botones GDPR */
.moove-gdpr-infobar-reject-btn:hover,
.moove-gdpr-infobar-settings-btn:hover {
    color: var(--fdt-paper) !important;
    background-color: black !important;
    box-shadow: none !important;
}
.moove-gdpr-infobar-allow-all:hover {
    color: var(--fdt-shop) !important;
    background-color: var(--fdt-paper) !important;
    border: 1px solid var(--fdt-shop) !important;
}

/* Logo en el banner GDPR */
.imagen-logo {
    margin-top: -75px !important;
    height: 60px !important;
    width: auto !important;
    max-width: 90% !important;
}


/* =============================================================
   16. FOOTER
   Fondo ink oscuro que cierra visualmente la página.
   Texto y enlaces en blanco semitransparente (80%), con
   hover en terracotta para coherencia con la marca.
   ============================================================= */
.footer-wrapper {
    background-color: var(--fdt-ink);
}
.footer-wrapper,
.footer-wrapper p,
.footer-wrapper a {
    color: rgba(255, 255, 255, 0.8);
}
.footer-wrapper a:hover {
    color: var(--fdt-terracotta);
}


/* =============================================================
   17. UTILIDADES
   Clases auxiliares reutilizables.
   ============================================================= */

/* Separador decorativo terracotta (60px) */
.fdt-separator {
    width: 60px;
    height: 3px;
    background-color: var(--fdt-terracotta);
    margin: 20px auto;
}


/* =============================================================
   18. RESPONSIVE — TABLET (768px a 1024px)
   ============================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Botón "Commander" — tamaño de texto ajustado */
    .cart .quantity + button {
        font-size: 1.3rem !important;
    }
}


/* =============================================================
   19. RESPONSIVE — MÓVIL (< 768px)
   ============================================================= */
@media only screen and (max-width: 767px) {

    /* --- Tipografía global móvil --- */
    h1 { font-size: 1.7em; }
    h2 { font-size: 1.3em; }

    /* --- Secciones: padding lateral --- */
    .section {
        padding-left:  15px !important;
        padding-right: 15px !important;
    }

    /* --- Botones grandes --- */
    .button.is-large {
        font-size: 0.9em;
        padding: 10px 20px;
    }

    /* --- Checkout: checkbox términos (tamaño normal en móvil) --- */
    .woocommerce-terms-and-conditions-wrapper input[type=checkbox] {
        -ms-transform:     scale(1) !important;
        -moz-transform:    scale(1) !important;
        -webkit-transform: scale(1) !important;
        -o-transform:      scale(1) !important;
        padding: 0 !important;
    }
    .woocommerce-terms-and-conditions-wrapper .form-row .checkbox {
        line-height:  1.2 !important;
        padding-left: 3% !important;
    }
    .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
        font-size: 1em !important;
    }
    .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
        padding-bottom: 2% !important;
    }

    /* --- Producto: variaciones centradas en móvil --- */
    .variations_form {
        text-align: center !important;
    }
    .woocommerce-variation-price {
        font-size: 1.2em;
        margin-top:  3%;
        padding-top: 5%;
    }
    .variations td:first-child {
        text-align: center;
    }
    .variations ul {
        display: flex;
        justify-content: space-around;
    }

    /* --- Producto: juntar SKU con pestañas --- */
    .product-main > .row .product-info {
        padding-bottom: 0.1em !important;
    }
    .product .product-footer {
        margin-top: 0.1% !important;
    }

    /* --- Producto: botón "Commander" --- */
    .cart .quantity + button {
        font-size: 1.1rem !important;
    }

    /* --- Producto: variaciones (espacio reducido) --- */
    .single-product .row-small > .flickity-viewport > .flickity-slider > .col,
    .single-product .row-small > .col {
        margin-bottom: -1.5em !important;
    }

    /* --- Producto: imágenes de confianza --- */
    .fdt-trust-badges {
        margin-bottom: -1em !important;
    }
}


/* =============================================================
   RESPONSIVE — BANNER GDPR (breakpoints específicos)
   ============================================================= */
@media (max-width: 1380px) {
    #moove_gdpr_cookie_info_bar {
        min-height: 500px;
    }
    .moove-gdpr-cookie-notice p {
        font-size: 1em !important;
    }
}

@media (max-width: 950px) and (min-width: 767px) {
    #moove_gdpr_cookie_info_bar {
        width: 80% !important;
    }
    .moove-gdpr-cookie-notice p {
        font-size: 1em !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    .moove-gdpr-button-holder {
        width: 100% !important;
        justify-content: center !important;
    }
    .mgbutton {
        width:  auto !important;
        margin: 5px !important;
    }
}

@media (max-width: 767px) {
    #moove_gdpr_cookie_info_bar {
        width:  90% !important;
        bottom: 10px !important;
    }
    .mgbutton {
        font-size: 14px !important;
    }
    .imagen-logo {
        height: 60px !important;
    }
}

@media (max-width: 553px) {
    #moove_gdpr_cookie_info_bar {
        width:  90% !important;
        height: 40% !important;
        top:    40% !important;
    }
    .moove-gdpr-cookie-notice p {
        font-size:  0.95em !important;
        margin-top: -20px !important;
    }
    .imagen-logo {
        height: 55px !important;
    }
}

@media (max-width: 460px) {
    .moove-gdpr-modal-footer-content {
        height: 100px !important;
    }
    #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content:before {
        bottom: 100px !important;
    }
    #moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .main-modal-content {
        height: 425px !important;
    }
    #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
        height: 475px !important;
    }
}

@media (max-width: 415px) {
    #moove_gdpr_cookie_info_bar {
        height: 50% !important;
    }
    .moove-gdpr-button-holder {
        margin-top:    0    !important;
        margin-bottom: 10px !important;
    }
    .imagen-logo {
        height: 50px !important;
    }
}

@media (max-width: 375px) {
    #moove_gdpr_cookie_info_bar {
        height: 60% !important;
    }
    .moove-gdpr-button-holder {
        margin-top:    0    !important;
        margin-bottom: 10px !important;
    }
    .imagen-logo {
        height: 45px !important;
    }
}

/* =============================================================
   [FDT] Banner cookies GDPR — responsive móvil (CONSOLIDADO 2026-06-11).
   Modal centrado; en móvil/landscape: ancho seguro (cabe), alto por contenido
   (clave bottom:auto: si no, top:50%+bottom:10px lo estiraba y cortaba "Accepter"),
   botones en columna táctiles. Sustituye los parches iterativos previos.
   ============================================================= */
#moove_gdpr_cookie_info_bar {
    width: min(700px, calc(100vw - 32px)) !important;
}
@media (max-width: 767px), (max-height: 620px) {
    #moove_gdpr_cookie_info_bar {
        top: 50% !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 88dvh !important;
        overflow-y: auto !important;
        content-visibility: visible !important;
        padding: 14px 14px 18px !important;
    }
    #moove_gdpr_cookie_info_bar .imagen-logo { margin-top: 4px !important; height: 46px !important; }
    #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content { margin-top: 10px !important; }
    #moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p { margin-top: 6px !important; }
    #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder {
        flex-direction: column !important; align-items: center !important; gap: 8px !important; margin: 12px 0 0 !important;
    }
    #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder .mgbutton {
        width: 90% !important; min-height: 44px !important; margin: 0 !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
}

/* [FDT] Modal "Réglages" GDPR en móvil (CONSOLIDADO 2026-06-11) */
@media (max-width: 767px), (max-height: 620px) {
    #moove_gdpr_cookie_modal .moove-gdpr-modal-content {
        min-width: 0 !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        min-height: 0 !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
    }
}

/* =============================================================
   [FDT] CGV del checkout en MÓVIL — casilla y texto accesibles.
   (Autorizado por el dev del plugin F10, 2026-06-11. Fix en el child,
   update-safe; el plugin tenía la regla sin !important y el tema la pisaba.)
   ============================================================= */
@media (max-width: 767px) {
    .page-checkout #terms,
    .woocommerce-checkout #terms,
    .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        transform: none !important;
    }
    .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}

/* =============================================================
   [FDT] Header móvil compacto hasta 849px (revisión 2026-06-11).
   Flatsome solo compactaba el header a 70px por debajo de 550px; entre 550-849px
   (header móvil con hamburguesa) se quedaba en 127px → ocupaba ~1/3 en landscape/tablet.
   Extendemos el compacto al mismo rango del header móvil de Flatsome (≤849px).
   ============================================================= */
@media (max-width: 849px) {
    .header-main { height: 70px !important; }
    #logo img { max-height: 70px !important; }
}

/* [FDT] Modal cookies — boton de cerrar dentro de la esquina (movil) 2026-06-15 */
@media (max-width:767px),(max-height:620px){
  #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close{
    top:12px !important; right:12px !important; left:auto !important; bottom:auto !important;
  }
}