@media (max-width: 768px) { .cky-consent-bar { padding: 10px 14px !important; } .cky-title { font-size: 13px !important; margin-bottom: 4px !important; } .cky-notice-des { margin-bottom: 8px !important; } .cky-notice-des p { font-size: 11px !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; } .cky-notice-btn-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; } .cky-notice-btn-wrapper .cky-btn { flex: 1 1 0 !important; padding: 8px 4px !important; font-size: 11px !important; white-space: nowrap !important; margin: 0 !important; } }
.mp-reviews .mp-container { overflow: visible !important; height: auto !important; }
.elementor-element-05d031b { overflow: visible !important; }
.pc-view-btn[href="/no-target/"] { display: none !important; }

/* Mobile menu: keep the header (and its close button) above the open nav overlay.
   #mpMobileNav is fixed at z-index 1050; #mpHeader was 1000, so the overlay covered
   the X and the menu could not be closed. The nav's inner padding-top:84px already
   reserves room for the 72px header, so this restores the intended layout. */
#mpHeader { z-index: 1100 !important; }
#mpHamburger { position: relative !important; z-index: 2 !important; }

/* Product page on mobile: the price sat at ~614px on a 640px-tall viewport, so the
   fixed cookie banner covered it on first visit (a direct conversion blocker).
   Reclaims ~130px of dead whitespace above the price. Verified live at 360x640:
   price moved 614 -> 444, leaving 53px of clearance above the banner. */
@media (max-width: 768px) {
  .single-product .elementor-widget-woocommerce-product-images .elementor-widget-container,
  .single-product .elementor-widget-woocommerce-breadcrumb .elementor-widget-container,
  .single-product .elementor-widget-woocommerce-product-title .elementor-widget-container,
  .single-product .elementor-widget-woocommerce-product-price .elementor-widget-container { margin-top: 6px !important; margin-bottom: 6px !important; }
  .single-product .woocommerce-product-gallery { margin-bottom: 8px !important; }
  .single-product .woocommerce-product-gallery__wrapper img { max-width: 200px !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; }
  .single-product .woocommerce-breadcrumb { margin-bottom: 6px !important; font-size: 12px !important; line-height: 1.4 !important; }
  .single-product .product_title { margin-bottom: 4px !important; }
}
/* Short phones only (where the overlap actually happens). */
@media (max-width: 768px) and (max-height: 720px) {
  .single-product .woocommerce-product-gallery__wrapper img { max-width: 150px !important; }
}
/* Compact the consent bar further on short viewports. All three consent buttons
   (Personalizar / Rechazar todo / Aceptar todo) stay visible - verified. */
@media (max-height: 720px) {
  .cky-notice-des p { -webkit-line-clamp: 1 !important; }
  .cky-consent-bar { padding: 8px 12px !important; }
}

/* Real Google reviews, rendered server-side (snippet "MP - Real Google reviews").
   This REPLACED the Elfsight carousel, which rendered client-side only and was
   invisible to search engines and AI answer engines. It is injected inside the
   existing <section class="mp-reviews"> / .mp-container, which already supplies
   the heading and the horizontal padding - so no max-width/padding here.
   Avatars are generated initial-in-a-circle (Google's own fallback style for
   reviewers without a profile photo), not a real photo. */
.mp-real-reviews { margin: 0 auto; }
.mp-real-reviews h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 8px; }
.mp-rr-sub { margin: 0 0 24px; opacity: .8; font-size: 15px; }
.mp-rr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mp-rr-item { border: 1px solid rgba(128,128,128,.25); border-radius: 12px; padding: 18px; }
.mp-rr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mp-rr-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; line-height: 1; }
.mp-rr-id { min-width: 0; }
.mp-rr-author { display: block; font-style: normal; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-rr-stars { color: #fbbc04; letter-spacing: 2px; font-size: 13px; line-height: 1.3; }
.mp-rr-text { margin: 0 0 10px; padding: 0; border: 0; font-size: 15px; line-height: 1.5; font-style: normal; }
.mp-rr-text::before, .mp-rr-text::after { content: none; }
.mp-rr-date { display: block; font-size: 12.5px; opacity: .65; }
.mp-rr-more { margin: 22px 0 0; font-size: 15px; }
@media (max-width: 768px) { .mp-rr-list { grid-template-columns: 1fr; } }

/* Floating cart drawer (#mpCartFab / #mpCartPanel): item thumbnail, quantity
   stepper and remove button. Added when the cart was rewired to read/write the
   real WooCommerce Store API cart instead of a disconnected localStorage copy. */
.mp-cart-item-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgb(255 255 255 / .05); }
.mp-cart-qty-ctrl { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mp-qty-btn { width: 22px; height: 22px; border-radius: 6px; background: rgb(255 255 255 / .06); border: 1px solid var(--mp-border); color: var(--mp-text); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s; }
.mp-qty-btn:hover { background: rgb(255 255 255 / .12); }
.mp-cart-item-remove { width: 28px; height: 28px; border-radius: 8px; background: transparent; border: none; color: var(--mp-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color .15s, background .15s; }
.mp-cart-item-remove svg { width: 16px; height: 16px; }
.mp-cart-item-remove:hover { color: var(--mp-red); background: rgb(239 68 68 / .1); }

/* === correcciones auditoria 2026-08-26 === */
/* el titulo de tarjeta renderizado en servidor es un h3; la clase .pc-name ya
   define tamano y peso, solo hay que neutralizar el margen por defecto */
#shopContent h3.pc-name{margin:0}
/* aviso de alcance del precio y SKU en la ficha de producto */
.mp-scope-notice{font-size:13px;line-height:1.5;color:#9aa0a6;margin:8px 0 4px;max-width:46em}
.mp-sku{font-size:12px;color:#8a8f98;margin:0 0 12px;letter-spacing:.02em}
.mp-sku span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#b8bec7}
/* boton flotante de WhatsApp, solo en movil; abajo a la IZQUIERDA para no
   chocar con el boton flotante del carrito de las paginas de tienda */
.mp-wa-fab{display:none}
@media (max-width:768px){
  .mp-wa-fab{display:flex;align-items:center;justify-content:center;
    position:fixed;left:16px;bottom:16px;z-index:998;
    width:52px;height:52px;border-radius:50%;
    background:#25D366;color:#fff;text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    -webkit-tap-highlight-color:transparent}
  .mp-wa-fab:hover,.mp-wa-fab:focus{background:#1ebe5a;color:#fff}
}
@media (prefers-reduced-motion:no-preference){.mp-wa-fab{transition:background .2s ease,transform .2s ease}.mp-wa-fab:active{transform:scale(.94)}}