/*
Theme Name:  Miss Flores
Theme URI:   https://miss-flores.com
Author:      ASHIC S.R.L.
Description: El tema propio de Miss Flores. Cabecera, pie, colores y tipografía en archivos que van a git; todo lo que vende lo hace el plugin Miss Flores y WooCommerce.
Version:     1.2.6
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License:     Propietario
Text Domain: miss-flores
*/

/* ------------------------------------------------------------------ */
/*  Por qué este archivo es chico                                      */
/*                                                                     */
/*  Los colores, las tipografías y los espaciados viven en theme.json: */
/*  WordPress los convierte en variables (--wp--preset--color--marca)  */
/*  y las usa el editor y la página por igual. Acá va solo lo que      */
/*  theme.json no sabe expresar: componentes y detalles.               */
/* ------------------------------------------------------------------ */

/* El plugin Miss Flores pinta sus pantallas con --mf-*. Acá se le dan los
   colores del tema para que vaya a juego sin configurar nada. Si la pestaña
   Marca del plugin está activa, lo que diga ella gana: se imprime después. */
:root{
  --mf-marca:       var(--wp--preset--color--marca);
  --mf-marca-oscuro:var(--wp--preset--color--marca-oscuro);
  --mf-sobre-marca: #FFFFFF;
  --mf-tinta:       var(--wp--preset--color--tinta);
  --mf-gris:        var(--wp--preset--color--gris);
  --mf-suave:       var(--wp--preset--color--rubor);
  --mf-rubor:       var(--wp--preset--color--rubor);
  --mf-fondo:       var(--wp--preset--color--fondo);
  --mf-borde:       var(--wp--preset--color--borde);
}

html{ -webkit-text-size-adjust:100%; }
body{ margin:0; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--wp--preset--color--marca); outline-offset:2px; }

/* ====================== cabecera ====================== */
/* Una sola barra magenta, como enviaflores: en escritorio logo · buscador ·
   cuenta · carrito con el menú en una fila blanca debajo; en el celular
   menú · logo · cuenta · carrito en una línea y el buscador debajo. */
/* La cabecera y el menú no se esconden al bajar (como Enviaflores). Lo que se fija es el
   <header> que WordPress pone alrededor de la parte de plantilla: si se fijara solo
   .site-header, no tendría por dónde moverse (su contenedor mide lo mismo que él). */
header.wp-block-template-part{ position:sticky; top:0; z-index:100; }
.site-header{ position:relative; z-index:20; overflow-x:clip; }
.admin-bar header.wp-block-template-part{ top:32px; }
@media(max-width:782px){ .admin-bar header.wp-block-template-part{ top:46px; } }
@media(max-width:600px){ .admin-bar header.wp-block-template-part{ top:0; } }
.mft-franja{ background:var(--wp--preset--color--tinta); color:#F3DCE6; font-size:.84rem; }
.mft-franja-in{ max-width:1180px; margin:0 auto; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; }
.mft-franja p{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mft-franja a{ color:#F3DCE6; font-weight:600; text-decoration:none; white-space:nowrap; }
.mft-franja a:hover{ text-decoration:underline; }
.mft-franja-login{ flex:0 0 auto; }

.mft-barra{ background:var(--wp--preset--color--marca); color:#fff; }
.mft-barra > .wp-block-group{ min-height:70px; align-items:center; gap:10px 22px; padding:0 16px; }
.mft-marca{ gap:12px; align-items:center; flex:0 0 auto; min-width:0; }
.mft-marca .wp-block-site-logo img{ max-height:46px; width:auto; display:block; }
.mft-marca .wp-block-site-title{ margin:0; }
.mft-marca .wp-block-site-title a{ color:#fff; text-decoration:none; font-family:var(--wp--preset--font-family--titulos);
  font-weight:700; font-size:1.55rem; letter-spacing:-.02em; white-space:nowrap; }
/* si hay logo, el nombre escrito sobra */
.mft-marca:has(.wp-block-site-logo img) .wp-block-site-title{ display:none; }

/* el buscador: una caja que se ve, no una lupa que hay que descubrir */
.mft-barra .wp-block-search{ flex:1 1 260px; min-width:0; margin:0; }
.mft-barra .wp-block-search__inside-wrapper{ background:#fff; border-radius:10px; border:0; padding:0 6px 0 12px; min-height:44px; }
.mft-barra .wp-block-search__input{ border:0; font:inherit; font-size:.95rem; color:var(--wp--preset--color--tinta); background:transparent; min-height:44px; padding:0; }
.mft-barra .wp-block-search__input:focus{ outline:none; }
.mft-barra .wp-block-search__button{ background:transparent; border:0; color:var(--wp--preset--color--marca-oscuro); padding:0 8px; cursor:pointer; min-height:44px; }

/* iconos de la barra: idioma, cuenta y carrito. Mismo alto (48px), mismo eje, blancos y de buen tamaño.
   Ojo con los nombres: el bloque de cuenta de WooCommerce se llama wp-block-woocommerce-customer-account
   y su enlace wc-block-customer-account__link (no «wc-block-customer-account»). */
.mft-iconos{ gap:8px; align-items:center; flex:0 0 auto; }
.mft-iconos > p:empty{ display:none; }                 /* WordPress deja un <p> vacío junto al idioma */
.mft-iconos > *{ margin:0; display:flex; align-items:center; }
.mft-iconos > style, .mft-iconos > script{ display:none; }   /* el plugin deja su CSS/JS junto al combo: que no se vea como texto */
.mft-iconos .mfi{ display:flex; }
.mft-iconos .mfi-btn{ min-height:48px; padding:0 10px; font-size:.95rem; gap:8px; }
.mft-iconos .mfi .bnd{ width:28px; height:19px; }
.mft-iconos .mfi .chv{ width:12px; height:12px; }
.mft-iconos .wp-block-woocommerce-customer-account,
.mft-iconos .wc-block-customer-account__link,
.mft-iconos .wc-block-customer-account__link svg,
.mft-iconos .wc-block-mini-cart,
.mft-iconos .wc-block-mini-cart__button,
.mft-iconos .wc-block-mini-cart__button svg{ color:#fff !important; opacity:1; }
.mft-iconos .wc-block-customer-account__link,
.mft-iconos .wc-block-mini-cart__button{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:48px; padding:0; background:none; border:0; border-radius:10px; text-decoration:none; position:relative; }
.mft-iconos .wc-block-customer-account__link:hover,
.mft-iconos .wc-block-mini-cart__button:hover{ background:rgba(255,255,255,.14); }
.mft-iconos .wc-block-customer-account__link svg,
.mft-iconos .wc-block-mini-cart__icon{ width:30px !important; height:30px !important; }
.mft-iconos .wc-block-customer-account__link svg path{ fill:#fff; }
.mft-iconos .wc-block-mini-cart__badge{ background:#fff; color:var(--wp--preset--color--marca); }

/* el menú: fila blanca de borde a borde, debajo de la barra.
   El fondo se estira a los lados con un pseudo-elemento (no con márgenes negativos: un margen
   negativo hace que el menú «quepa» en la primera fila y se quede junto al carrito), y no recorta
   el panel ancho que cuelga hacia abajo. La fila mide el ancho del contenido, alineada con el logo. */
.mft-nav{ flex:1 1 100%; order:10; margin:0; padding:0 !important; position:relative; z-index:40; }
.mft-nav::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); width:100vw;
  background:#fff; border-bottom:1px solid var(--wp--preset--color--borde); box-sizing:border-box; }
body{ overflow-x:clip; }
/* el menú lo dibuja el plugin ([mf_menu]); acá solo se le dice cómo alinearse */
.mft-nav .mfm{ max-width:none !important; margin:0 !important; padding:0; }
/* respaldo (plugin apagado): el menú de WordPress en una fila simple */
@media (min-width:782px){
  .mft-nav ul.mfm-lista{ display:flex; flex-wrap:wrap; gap:0 24px; list-style:none; margin:0; padding:0; }
  /* solo los enlaces de primer nivel: los de los desplegables los viste el plugin */
  .mft-nav ul.mfm-lista > li > a{ display:block; padding:13px 0; font-weight:600; font-size:.95rem; color:var(--wp--preset--color--tinta); text-decoration:none; }
}

/* ====================== portada: foto y tarjeta ====================== */
/* El carrusel del plugin ([mf_portada]) va de borde a borde; si no hay láminas
   configuradas no imprime nada y la franja rosa empieza arriba del todo. */
.mft-hero .mf-pt{ margin:0; border-radius:0; }
.mft-destino{ background:var(--wp--preset--color--rubor); padding:var(--wp--preset--spacing--50) 16px; }
.mft-destino h1{ margin:8px 0 10px; }
/* con foto arriba, la tarjeta se monta sobre ella como en enviaflores */
.mft-hero:has(.mf-pt) + .mft-destino{ background:transparent; padding-top:0; margin-top:-56px; }
.mft-hero:has(.mf-pt) + .mft-destino > p:first-child,
.mft-hero:has(.mf-pt) + .mft-destino > h1,
.mft-hero:has(.mf-pt) + .mft-destino > h1 + p{ display:none; }
.mft-hero:has(.mf-pt) + .mft-destino #mf-destino{ box-shadow:0 12px 40px rgba(43,27,34,.16); }

/* ====================== compromisos ====================== */
.mft-compromisos{ background:var(--wp--preset--color--fondo); border-radius:20px; }
.mft-compromisos h3{ margin:0 0 4px; font-size:1.05rem; }
.mft-compromisos p{ margin:0; color:#5E4A52; font-size:.93rem; line-height:1.55; }

/* ====================== WooCommerce (plantillas clásicas) ====================== */
.woocommerce ul.products li.product{ border:1px solid var(--wp--preset--color--borde); border-radius:16px; padding:0 0 14px; overflow:hidden; background:#fff; text-align:left; }
.woocommerce ul.products li.product a img{ border-radius:0; margin:0 0 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ padding:0 14px; font-family:var(--wp--preset--font-family--titulos); font-weight:600; font-size:1rem; line-height:1.3; color:var(--wp--preset--color--tinta); }
.woocommerce ul.products li.product .price{ display:block; padding:0 14px; color:var(--wp--preset--color--marca); font-weight:700; font-size:1.05rem; }
.woocommerce ul.products li.product .button{ display:inline-block; margin:8px 14px 0; }
.woocommerce ul.products li.product .onsale{ background:var(--wp--preset--color--marca); border-radius:20px; padding:4px 10px; min-height:0; min-width:0; line-height:1.4; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }

/* botones: el color de acción, y texto que se lea */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wp-block-button__link, .wc-block-components-button{
  background:var(--wp--preset--color--marca); color:#fff; border-radius:10px; font-weight:700; font-family:inherit;
  padding:12px 20px; line-height:1.2; min-height:44px; border:0; }
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.wp-block-button__link:hover{ background:var(--wp--preset--color--marca-oscuro); color:#fff; }

.woocommerce div.product .product_title{ font-family:var(--wp--preset--font-family--titulos); font-weight:700; letter-spacing:-.02em; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--wp--preset--color--marca); font-weight:700; font-size:1.6rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color:#fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-weight:600; color:var(--wp--preset--color--tinta); }
.woocommerce .woocommerce-breadcrumb{ font-size:.86rem; color:var(--wp--preset--color--gris); }
.woocommerce .woocommerce-breadcrumb a{ color:var(--wp--preset--color--marca-oscuro); }
.woocommerce .woocommerce-ordering select{ min-height:44px; border:1px solid var(--wp--preset--color--borde); border-radius:10px; padding:0 10px; font:inherit; }
.woocommerce nav.woocommerce-pagination ul{ border:0; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0 3px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ border-radius:9px; min-width:40px; min-height:40px; line-height:40px; padding:0 8px; }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--wp--preset--color--marca); color:#fff; }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--wp--preset--color--marca); }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--wp--preset--color--marca); }
.woocommerce .star-rating span::before{ color:var(--wp--preset--color--marca); }

/* ====================== pie ====================== */
.site-footer{ background:var(--wp--preset--color--fondo); border-top:1px solid var(--wp--preset--color--borde); }
.site-footer h2, .site-footer h3{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--gris); margin:0 0 12px; font-family:var(--wp--preset--font-family--texto); }
.site-footer p, .site-footer li{ font-size:.92rem; line-height:1.6; color:#5E4A52; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:0 0 7px; }
.site-footer a{ color:var(--wp--preset--color--marca-oscuro); text-decoration:none; font-weight:600; }
.site-footer a:hover{ text-decoration:underline; }
.mft-marca-pie{ font-family:var(--wp--preset--font-family--titulos); font-weight:700; font-size:1.3rem; color:var(--wp--preset--color--marca); margin:0 0 10px; }
.mft-pagos span{ display:inline-block; background:#fff; border:1px solid var(--wp--preset--color--borde); border-radius:7px; padding:5px 10px; font-size:.78rem; font-weight:600; margin:0 6px 6px 0; }
.mfp-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px 32px; }
.mfp-col > :last-child{ margin-bottom:0; }
.mft-sellos{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; border-top:1px solid var(--wp--preset--color--borde); margin-top:28px; padding-top:18px; }
.mft-sellos p{ margin:0; font-size:.86rem; }
.mft-sellos b{ color:var(--wp--preset--color--tinta); }
.mft-legal{ font-size:.8rem; color:var(--wp--preset--color--gris); margin:14px 0 0; }

/* ====================== celular ====================== */
@media (max-width:781px){
  .mft-franja{ font-size:.78rem; }
  .mft-franja-login{ display:none; }
  .mft-barra > .wp-block-group{ min-height:58px; gap:6px 10px; padding-top:6px; padding-bottom:10px; }
  /* la hamburguesa va primero, en la barra, blanca */
  .mft-nav{ flex:0 0 auto; order:-1; background:transparent; border:0; margin:0; padding:0 !important; }
  .mft-nav::before{ display:none; }
  .mft-nav{ --mfm-abrir:#fff; }
  .mft-nav .mfm{ margin:0; padding:0; }
  .mft-marca{ flex:1 1 auto; }
  .mft-marca .wp-block-site-logo img{ max-height:38px; }
  .mft-marca .wp-block-site-title a{ font-size:1.3rem; }
  .mft-iconos{ margin-left:auto; }
  /* el buscador baja a su propia fila, ancho completo */
  .mft-barra .wp-block-search{ flex:1 1 100%; order:5; }
  .mft-barra .wp-block-search__inside-wrapper{ min-height:40px; }
  .mft-barra .wp-block-search__input{ min-height:40px; }
  .woocommerce ul.products[class*="columns-"] li.product{ width:48%; margin-right:4%; }
  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n){ margin-right:0; }
}