.elementor-kit-8{--e-global-color-primary:#2C1810;--e-global-color-secondary:#FB7185;--e-global-color-text:#292524;--e-global-color-accent:#F43F5E;--e-global-color-crema:#FFFDF9;--e-global-color-chocclaro:#3D2418;--e-global-color-rosasuave:#FECDD3;--e-global-color-rosafondo:#FFF1F2;--e-global-color-textosuave:#78716C;--e-global-color-textotenue:#A8A29E;--e-global-color-linea:#E7E5E4;--e-global-color-blanco:#FFFFFF;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1em;--e-global-typography-primary-letter-spacing:-0.01em;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-size:10px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.45em;--e-global-typography-cita-font-family:"Cormorant Garamond";--e-global-typography-cita-font-size:36px;--e-global-typography-cita-font-weight:500;--e-global-typography-cita-line-height:1.2em;--e-global-typography-numero-font-family:"Cormorant Garamond";--e-global-typography-numero-font-size:48px;--e-global-typography-numero-font-weight:700;--e-global-typography-numero-line-height:1em;--e-global-typography-menu-font-family:"DM Sans";--e-global-typography-menu-font-size:14px;--e-global-typography-menu-font-weight:600;--e-global-typography-menu-text-transform:uppercase;--e-global-typography-menu-line-height:1.4em;--e-global-typography-menu-letter-spacing:0.1em;--e-global-typography-boton-font-family:"DM Sans";--e-global-typography-boton-font-size:12px;--e-global-typography-boton-font-weight:700;--e-global-typography-boton-text-transform:uppercase;--e-global-typography-boton-line-height:1.4em;--e-global-typography-boton-letter-spacing:0.15em;background-color:#FFFDF9;color:#292524;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.65em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#FB7185;font-family:"DM Sans", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:14px 32px 14px 32px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#F43F5E;color:#FFFFFF;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#F43F5E;}.elementor-kit-8 a:hover{color:#2C1810;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== Yummy Cakes · sistema de marca ===== */
:root{
  --yc-chocolate:#2C1810;
  --yc-choc-claro:#3D2418;
  --yc-rosa:#FB7185;
  --yc-rosa-fuerte:#F43F5E;
  --yc-rosa-suave:#FECDD3;
  --yc-rosa-fondo:#FFF1F2;
  --yc-crema:#FFFDF9;
  --yc-texto:#292524;
  --yc-texto-suave:#78716C;
  --yc-texto-tenue:#A8A29E;
  --yc-linea:#E7E5E4;
}

/* La micro etiqueta: la firma visual de la marca.
   Va con !important porque compite con la tipografia global de titulares:
   misma especificidad, gana el orden de carga, y sin esto sale en
   Cormorant 48px y desborda la pantalla. Comprobado en produccion. */
.yc-label .elementor-heading-title,
.yc-label{
  font-family:"DM Sans",sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.45em !important;
  color:var(--yc-rosa) !important;
  line-height:1.4 !important;
}
.yc-label-gris .elementor-heading-title{ color:var(--yc-texto-suave) !important; }
.yc-label-corto .elementor-heading-title{ letter-spacing:.35em !important; }

/* Titulo de pagina del tema: lo reemplazamos por contenido propio */
.page-header{ display:none !important; }

/* Boton del carrito: pildora, no el ladrillo por defecto.
   Medidas tomadas de v1 (px-4 py-2, icono 18px, texto 14px bold). */
.yc-carrito .elementor-menu-cart__toggle .elementor-button{
  border-radius:999px !important;
  padding:11px 20px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
}
.yc-carrito .elementor-button-icon{ font-size:20px !important; }
.yc-carrito .elementor-button-icon svg{ width:20px !important; height:20px !important; }
.yc-carrito .elementor-button-icon-qty{
  font-size:11px !important; min-width:19px; height:19px; line-height:19px !important;
}
@media (max-width:767px){
  .yc-carrito .elementor-menu-cart__toggle .elementor-button{ padding:9px 14px !important; font-size:13px !important; }
  .yc-carrito .elementor-button-icon svg{ width:18px !important; height:18px !important; }
}
/* ===== Panel lateral del carrito =====
   La tipografia real va en el widget (ver 12-header.php). Esto es el respaldo:
   el widget no trae tipografia propia y cae en la global "Titular" del kit,
   asi que el precio y los botones salian en Cormorant 60px y desbordaban
   el panel de 350px. Cualquier nodo del panel que quede suelto, aca se ataja. */
.elementor-menu-cart__main{
  font-family:"DM Sans",sans-serif;
  overflow-x:hidden !important;
}
.elementor-menu-cart__main a,
.elementor-menu-cart__main span,
.elementor-menu-cart__main div{ overflow-wrap:anywhere; }
/* Los iconos (cerrar, papelera) son una fuente, no texto: si heredan DM Sans
   el glifo se convierte en una letra suelta. Se les devuelve la suya. */
.elementor-menu-cart__main i,
.elementor-menu-cart__main [class*="eicon-"]{ font-family:eicons !important; }
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a{
  font-size:14px !important; font-weight:600 !important;
  line-height:1.35 !important; color:#292524 !important;
}
.elementor-menu-cart__product-price,
.elementor-menu-cart__product-price .woocommerce-Price-amount{
  font-family:"DM Sans",sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  line-height:1.4 !important; color:#292524 !important;
}
.elementor-menu-cart__subtotal,
.elementor-menu-cart__subtotal .woocommerce-Price-amount{
  font-family:"DM Sans",sans-serif !important;
  font-size:15px !important; font-weight:700 !important;
}
.elementor-menu-cart__footer-buttons .elementor-button{
  font-family:"DM Sans",sans-serif !important;
  font-size:12px !important; font-weight:700 !important;
  line-height:1.2 !important;
  text-transform:uppercase !important; letter-spacing:.15em !important;
  border-radius:999px !important;
}
.elementor-menu-cart__product-image img{ border-radius:12px; }
.elementor-menu-cart__product-remove{ color:#A8A29E !important; }
.elementor-menu-cart__product-remove:hover{ color:#FB7185 !important; }
/* En el telefono el panel de 350px dejaba una franja inutil de 40px al lado */
@media (max-width:767px){
  .elementor-menu-cart__container .elementor-menu-cart__main{
    width:100% !important; max-width:100% !important;
  }
}

/* ===== Ficha de producto: "Información adicional" =====
   Los tamaños y los rellenos venían en una sola línea apretada, separados
   por coma. Varios rellenos llevan coma adentro, así que no se entendía
   dónde terminaba uno. Cada valor va ahora en su propia pastilla. */
.woocommerce-product-attributes{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:8px 0 0; border:1px solid #E7E5E4; border-radius:16px; overflow:hidden;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td{
  padding:18px 22px !important;
  border:0 !important;
  border-bottom:1px solid #F5F5F4 !important;
  vertical-align:top;
  background:transparent !important;
}
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td{ border-bottom:0 !important; }
.woocommerce-product-attributes th{
  width:150px; white-space:nowrap;
  font-family:"DM Sans",sans-serif !important;
  font-size:10px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.16em !important;
  color:#A8A29E !important;
  padding-top:24px !important;
}
.woocommerce-product-attributes td p{ margin:0 !important; font-style:normal !important; }
.yc-valores{ display:flex; flex-wrap:wrap; gap:9px 10px; }
.yc-valor{
  display:inline-block;
  background:#FFF1F2; border:1px solid #FDE2E5; border-radius:999px;
  padding:7px 15px;
  font-family:"DM Sans",sans-serif;
  font-size:13px; line-height:1.35; color:#44403C;
  font-style:normal;
}
@media (max-width:767px){
  .woocommerce-product-attributes th,
  .woocommerce-product-attributes td{ padding:14px 16px !important; }
  /* En una columna la etiqueta y sus valores son dos celdas apiladas:
     sin esto queda una raya entre el título y sus propias pastillas. */
  .woocommerce-product-attributes th{
    width:auto;
    border-bottom:0 !important;
    padding-bottom:2px !important;
  }
  .woocommerce-product-attributes td{ padding-top:4px !important; }
  .yc-valor{ font-size:12px; padding:6px 12px; }
}

/* ===== Aire de las plantillas de WooCommerce =====
   El tema no le pone relleno al archivo de la tienda ni a la ficha, asi que
   el ultimo producto quedaba pegado al footer: 0px entre medio, y los nombres
   se veian cortados contra el chocolate. Se le da respiro arriba y abajo.
   Va por clase del body para no tocar el carrito ni el checkout, que ya
   traen el suyo propio. */
body.woocommerce-shop main.site-main,
body.tax-product_cat main.site-main,
body.tax-product_tag main.site-main,
body.post-type-archive-product main.site-main,
body.single-product main.site-main{
  padding-top:48px !important;
  padding-bottom:110px !important;
}
@media (max-width:767px){
  body.woocommerce-shop main.site-main,
  body.tax-product_cat main.site-main,
  body.tax-product_tag main.site-main,
  body.post-type-archive-product main.site-main,
  body.single-product main.site-main{
    padding-top:32px !important;
    padding-bottom:72px !important;
  }
}

/* ===== Pagina "Pedido recibido" =====
   No es un bloque: el endpoint order-received se pinta con la plantilla
   clasica de WooCommerce, asi que el CSS de .wp-block-woocommerce-checkout
   no la toca y quedaba pegada al header. */
body.woocommerce-order-received main.site-main{
  padding-top:56px !important;
  padding-bottom:96px !important;
}
body.woocommerce-order-received h2,
body.woocommerce-order-received h3{
  font-family:"Cormorant Garamond",serif !important;
  font-weight:700 !important;
  color:#292524 !important;
  letter-spacing:0 !important;
}
body.woocommerce-order-received h2{ font-size:30px !important; }
body.woocommerce-order-received h3{ font-size:22px !important; }
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title{ margin-bottom:16px !important; }
body.woocommerce-order-received .woocommerce-table td a,
body.woocommerce-order-received .woocommerce-table th a{
  color:#292524 !important; text-decoration:none !important; font-weight:600 !important;
}
body.woocommerce-order-received .woocommerce-table td a:hover{ color:#FB7185 !important; }
body.woocommerce-order-received .woocommerce-order-overview{
  border-color:#E7E5E4 !important;
}
@media (max-width:767px){
  body.woocommerce-order-received main.site-main{
    padding:32px 16px 64px !important;
  }
  body.woocommerce-order-received h2{ font-size:26px !important; }
}

/* ===== Paginas de carrito y checkout (bloques de WooCommerce) =====
   La interfaz es la NATIVA de WooCommerce, no se copia la del Next.js.
   Aca solo se le pone la marca encima. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  padding-top:56px; padding-bottom:80px;
}
/* Los bloques vienen con la clase .alignwide y el tema les mete
   margin-left:-80px y margin-right:-80px. En escritorio solo los ensancha,
   pero en 390px el bloque queda en x=-70: medio carrito fuera de pantalla.
   Se anula el tirón y el ancho lo manda el sitio, no el tema. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.alignfull,
.wp-block-woocommerce-checkout.alignfull{
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
  max-width:1180px !important;
}
/* El boton grande salia como enlace rosado subrayado sobre un gris azulado:
   WooCommerce le pone su propio fondo y el color de enlace global le gana. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:#292524 !important;
  color:#FFFFFF !important;
  text-decoration:none !important;
  border:0 !important; border-radius:999px !important;
  font-family:"DM Sans",sans-serif !important;
  font-size:12px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.15em !important;
  padding:17px 24px !important;
  transition:background .2s;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{ background:#44403C !important; }

.wc-block-components-product-name{
  color:#292524 !important; text-decoration:none !important;
  font-weight:600 !important;
}
.wc-block-components-product-name:hover{ color:#FB7185 !important; }

/* Encabezados de la tabla, con la misma micro etiqueta del resto del sitio */
.wc-block-cart-items__header th,
.wc-block-cart-items__header{
  font-family:"DM Sans",sans-serif !important;
  font-size:10px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.16em !important;
  color:#A8A29E !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:"DM Sans",sans-serif !important;
  font-size:20px !important; font-weight:700 !important; color:#292524 !important;
}
.wc-block-cart-item__remove-link{ color:#A8A29E !important; }
.wc-block-cart-item__remove-link:hover{ color:#FB7185 !important; }
.wc-block-cart .wc-block-cart-items,
.wc-block-components-sidebar .wc-block-components-totals-wrapper{ border-color:#E7E5E4 !important; }
@media (max-width:767px){
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout{
    padding:36px 16px 56px !important;
  }
  /* En una sola columna: la foto chica y el resumen debajo, sin tabla */
  .wc-block-cart-items__header{ display:none !important; }
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button{ width:100% !important; }
}

/* Ingresar: mismo peso visual que el carrito, sin fondo */
.yc-ingresar .elementor-button{ font-size:13px !important; }

/* Titulares a dos lineas, muy pegados */
.yc-titular .elementor-heading-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  line-height:1;
  color:var(--yc-texto);
}
.yc-sobre-oscuro .elementor-heading-title{ color:#fff; }

/* Divisor corto rosado bajo los titulares */
.yc-raya{ width:40px; height:1px; background:var(--yc-rosa); }

/* ===== Header ===== */
.yc-header{ background:#fff; border-bottom:1px solid #F5F5F4; }
/* El logo manda por altura, no por ancho: el PNG es 560x220 (apaisado)
   y con 36px quedaba perdido dentro de una fila de 80px. */
.yc-header .yc-logo img{ height:52px !important; width:auto !important; max-width:none !important; }

/* Menu: mayusculas espaciadas, hover rosado */
.yc-menu .elementor-item{
  font-family:"DM Sans",sans-serif;
  font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  color:#57534E;
}
.yc-menu .elementor-item:hover,
.yc-menu .elementor-item.elementor-item-active{ color:var(--yc-rosa-fuerte); }

/* Visibilidad por ancho.
   PLAYBOOK §3.3: el control hide_mobile de Elementor oculta en TODOS los anchos.
   Se hace con media queries o no se hace. */
.yc-solo-movil{ display:none !important; }
@media (max-width:767px){
  .yc-solo-movil{ display:flex !important; }
  .yc-solo-escritorio{ display:none !important; }
}

/* Header movil estilo app: hamburguesa izquierda, logo centrado.
   Patron del PLAYBOOK-TECNICO §4. El Next.js original no tenia esto:
   sus 5 items en mayusculas se desbordaban sin ningun boton que los reemplazara. */
@media (max-width:767px){
  .yc-header-top,
  .yc-header-top > .e-con-inner{
    flex-wrap:nowrap !important;
    gap:10px !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  /* los tres bloques: hamburguesa y acciones crecen igual, el logo queda al medio */
  .yc-header-top .yc-burger{ flex:1 1 0 !important; }
  .yc-header-top .yc-logo{ flex:0 0 auto !important; }
  .yc-header-top .yc-header-acciones{ flex:1 1 0 !important; }
  .yc-header-top .elementor-menu-toggle{
    margin:0 !important; width:fit-content; justify-content:flex-start !important;
  }
  .yc-header .yc-logo img{ height:38px !important; }
  .yc-header-top{ min-height:64px !important; }
}

/* El panel desplegable cuelga del borde inferior del header, nunca encima del logo.
   El truco: header relative, widget static, panel absolute con top:100%. */
@media (max-width:767px){
  .yc-header{ position:relative; overflow:visible; }
  .yc-header .yc-burger{ position:static; }
  .yc-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:absolute !important;
    top:100% !important; left:0 !important; right:0 !important; width:100% !important;
    margin-top:0 !important;
    background:#fff !important;
    border-top:1px solid var(--yc-linea);
    box-shadow:0 18px 40px rgba(44,24,16,.18);
    z-index:100;
  }
  .yc-header .elementor-nav-menu--dropdown a{
    font-size:15px !important; padding:12px 20px !important;
    letter-spacing:.04em !important; color:#57534E !important;
  }
  .yc-header .elementor-nav-menu--dropdown a:hover{
    background:var(--yc-rosa-fondo) !important; color:var(--yc-rosa-fuerte) !important;
  }
}

/* ===== Tarjeta de producto =====
   Marcado del plugin yummy-tarjeta: .yc-thumb envuelve la foto para poder
   recortar el zoom y apoyar encima la pastilla de precio y la franja Favorito.
   WooCommerce por si solo no da ese envoltorio. */
/* WooCommerce mete un clearfix con ::before y ::after. Con display:grid
   esos pseudo-elementos se vuelven CELDAS FANTASMA y corren toda la grilla:
   la primera queda vacia y los productos se desplazan. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; display:none !important; }
.woocommerce ul.products{
  display:grid !important; margin:0 !important; padding:0 !important;
  gap:40px 24px; list-style:none;
}
.woocommerce ul.products.columns-4{ grid-template-columns:repeat(4,1fr); }
.woocommerce ul.products.columns-3{ grid-template-columns:repeat(3,1fr); }
.woocommerce ul.products.columns-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1024px){
  .woocommerce ul.products.columns-4{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-3{ grid-template-columns:repeat(2,1fr); }
  .woocommerce ul.products{ gap:28px 16px; }
}
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  text-align:left; position:relative;
}
.woocommerce ul.products li.product > a{ display:block; text-decoration:none; }

.yc-thumb{
  position:relative; overflow:hidden;
  aspect-ratio:3/4; background:#F5F5F4;
  margin-bottom:14px;
}
.yc-thumb img{
  width:100% !important; height:100% !important;
  object-fit:cover; display:block; margin:0 !important;
  transition:transform .7s ease;
}
li.product:hover .yc-thumb img{ transform:scale(1.05); }

/* Capa oscura con la pastilla "Ver producto" */
.yc-capa{
  position:absolute; inset:0;
  background:rgba(44,24,16,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
li.product:hover .yc-capa{ opacity:1; }
.yc-capa-texto{
  background:#fff; color:var(--yc-chocolate);
  font-family:"DM Sans",sans-serif;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  padding:10px 24px;
  transform:translateY(12px); transition:transform .3s;
}
li.product:hover .yc-capa-texto{ transform:translateY(0); }

/* Pastilla de precio abajo a la derecha */
.yc-precio{
  position:absolute; right:12px; bottom:12px; z-index:2;
  background:rgba(255,255,255,.95); backdrop-filter:blur(4px);
  color:var(--yc-texto);
  font-family:"DM Sans",sans-serif; font-size:11px; font-weight:700;
  padding:6px 11px; line-height:1.3; white-space:nowrap;
}
.yc-precio .woocommerce-Price-amount{ font-size:11px; font-weight:700; color:var(--yc-texto); }
.yc-precio del{ display:none; }
.yc-precio ins{ text-decoration:none; }

/* Franja Favorito, pegada al borde izquierdo */
.yc-favorito{
  position:absolute; top:16px; left:0; z-index:2;
  background:var(--yc-rosa); color:#fff;
  font-family:"DM Sans",sans-serif;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  padding:5px 12px;
}

/* Micro etiqueta de categoria y nombre */
.yc-cat{
  display:block;
  font-family:"DM Sans",sans-serif;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.3em;
  color:var(--yc-rosa); margin-bottom:6px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Cormorant Garamond",serif !important;
  font-size:21px !important; font-weight:500 !important;
  line-height:1.15 !important; color:var(--yc-texto) !important;
  padding:0 !important; margin:0 !important;
  transition:color .2s;
}
li.product:hover .woocommerce-loop-product__title{ color:var(--yc-rosa-fuerte) !important; }

/* Sobre chocolate el texto se invierte.
   PLAYBOOK §3.10: la regla clara de arriba tiene mas especificidad
   (.woocommerce ul.products li.product .titulo) y le gana a una corta
   aunque las dos lleven !important. Hay que igualar o superar la cadena,
   o los nombres quedan chocolate sobre chocolate: invisibles. */
.yc-grilla-oscura .woocommerce ul.products li.product .woocommerce-loop-product__title{ color:#fff !important; }
.yc-grilla-oscura .woocommerce ul.products li.product:hover .woocommerce-loop-product__title{ color:var(--yc-rosa-suave) !important; }
.yc-grilla-oscura .yc-cat{ color:var(--yc-rosa-suave); }

/* Fuera los restos del tema */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating{ display:none !important; }
.woocommerce ul.products li.product .yc-precio{ display:block !important; }

/* ===== Footer ===== */
.yc-footer{ background:var(--yc-chocolate); color:#A8A29E; }
.yc-footer .elementor-heading-title{ color:#fff; }
.yc-footer a{ color:#A8A29E; transition:color .2s; }
.yc-footer a:hover{ color:var(--yc-rosa-suave); }
.yc-footer .yc-label .elementor-heading-title{ color:var(--yc-texto-suave); letter-spacing:.35em; }

/* Iconos sociales: cuadrados con borde, NO redondos */
.yc-social .elementor-social-icon{
  background:transparent !important;
  border:1px solid #44403C;
  border-radius:0 !important;
  width:36px; height:36px;
  color:#A8A29E !important;
  transition:border-color .2s,color .2s;
}
.yc-social .elementor-social-icon:hover{ border-color:var(--yc-rosa); color:var(--yc-rosa-suave) !important; }
.yc-social .elementor-social-icon-whatsapp:hover{ border-color:#4ADE80; color:#86EFAC !important; }

.yc-footer-barra{ border-top:1px solid rgba(120,113,108,.35); }
.yc-footer-barra p{ font-size:12px; color:#57534E; }

/* ===== FAQ editorial, numerado =====
   Vive en el kit y no en la pagina: lo usan la home y Retiro y delivery,
   y con dos copias del CSS terminaban distintos (leccion de glop.cl).
   Elementor le pone recuadro y fondo propios al nested-accordion con
   .elementor-widget-n-accordion .e-n-accordion-item. Para ganarle hay que
   igualar esa cadena: el widget lleva las dos clases a la vez. */
.yc-faq.elementor-widget-n-accordion .e-n-accordion,
.yc-faq.elementor-widget-n-accordion .e-n-accordion-item,
.yc-faq.elementor-widget-n-accordion .e-n-accordion-item-title,
.yc-faq.elementor-widget-n-accordion .e-n-accordion-item > .e-con{
  border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
}
/* y encima se vuelven a poner SOLO las lineas horizontales */
.yc-faq.elementor-widget-n-accordion .e-n-accordion-item{ border-top:1px solid #E7E5E4 !important; }
.yc-faq.elementor-widget-n-accordion .e-n-accordion-item:last-child{ border-bottom:1px solid #E7E5E4 !important; }
.yc-faq{ counter-reset:ycfaq; }
.yc-faq .e-n-accordion-item{
  counter-increment:ycfaq;
  border-top:1px solid #E7E5E4;
}
.yc-faq .e-n-accordion-item:last-child{ border-bottom:1px solid #E7E5E4; }
.yc-faq .e-n-accordion-item-title{
  padding:26px 0 !important;
  display:flex !important; align-items:flex-start !important; gap:22px !important;
  background:transparent !important;
}
/* El numero grande a la izquierda */
.yc-faq .e-n-accordion-item-title::before{
  content:counter(ycfaq, decimal-leading-zero);
  font-family:"Cormorant Garamond",serif;
  font-size:44px; font-weight:700; line-height:1;
  color:#E7E5E4; min-width:58px; text-align:right;
  transition:color .3s;
}
.yc-faq details[open] .e-n-accordion-item-title::before{ color:#FECDD3; }
.yc-faq .e-n-accordion-item-title-text{
  font-family:"Cormorant Garamond",serif !important;
  font-size:22px !important; font-weight:500 !important;
  line-height:1.25 !important; color:#292524 !important;
  flex:1 1 auto; padding-top:6px;
}
.yc-faq details[open] .e-n-accordion-item-title-text{ color:#E11D48 !important; }
/* El signo + que gira 45 grados, hecho con CSS y no con Font Awesome:
   asi se ve igual aunque no cargue la libreria de iconos */
.yc-faq .e-n-accordion-item-title-icon{ display:none !important; }
.yc-faq .e-n-accordion-item-title::after{
  content:"+";
  font-family:"DM Sans",sans-serif;
  font-size:30px; font-weight:300; line-height:1; color:#A8A29E;
  transition:transform .3s, color .3s;
  margin-left:auto; padding-top:4px;
}
.yc-faq details[open] .e-n-accordion-item-title::after{
  transform:rotate(45deg); color:#FB7185;
}
.yc-faq .e-n-accordion-item > .e-con{ padding-left:80px !important; }
.yc-faq-respuesta p{ margin:0; }
.yc-faq-bajada p{ margin:0; }
@media (max-width:767px){
  .yc-faq .e-n-accordion-item-title::before{ font-size:32px; min-width:40px; }
  .yc-faq .e-n-accordion-item-title-text{ font-size:18px !important; }
  .yc-faq .e-n-accordion-item > .e-con{ padding-left:62px !important; }
  .yc-faq-bajada{ text-align:left !important; }
}/* End custom CSS */