/* =============================================================
   CHILEREMATES.CL — CSS DE IMPRESIÓN · Ficha de Producto
   Incluir con: <link rel="stylesheet" media="print" href="print-product.css">
   O dentro de <style>: @media print { ... }
   ============================================================= */

@media print {
    /* Eliminar hoja en blanco inicial */
    html, body {
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Ocultar header, navbar, footer, chat, botones */
    header,
    nav,
    footer,
    .navbar,
    .topbar,
    .menu-mobile,
    .whatsapp-btn,
    .cart-btn,
    .breadcrumb,
    .sidebar,
    [class*="header"],
    [class*="nav"],
    [class*="footer"],
    [class*="cookie"],
    [class*="chat"],
    [class*="banner"] {
      display: none !important;
    }

    /* El primer elemento visible no debe tener margin-top */
    body > *:first-child,
    .container:first-of-type,
    .page-wrapper,
    main,
    #main,
    #content {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
  /* ── 1. CONFIGURACIÓN DE PÁGINA ── */
  @page {
    size: letter portrait;
    margin: 15mm 18mm 18mm 18mm;
  }

  @page :first {
    margin-top: 10mm;
  }

  /* ── 2. RESET GLOBAL DE IMPRESIÓN ── */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  body {
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: #111 !important;
    background: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* ── 3. OCULTAR ELEMENTOS NO RELEVANTES ── */

  /* Topbar, header principal, navegación */
  .topbar,
  header,
  .site-header,
  nav,
  .navbar,
  .main-nav,
  .mobile-menu,
  .side-menu,
  .menu-overlay,
  .hamburger,
  .search-bar,
  .search-form,
  .header-search,

  /* Breadcrumb (opcional, se rehace abajo) */
  /* .breadcrumb, */ /* lo dejamos para contexto */

  /* Sidebar y widgets */
  aside,
  .sidebar,
  .widget,
  .widget-area,

  /* Carro de compras, botones de acción */
  .cart-link,
  .btn-cart,
  .add-to-cart,
  .product-actions,
  .product-form,
  .quantity-selector,
  select[name="quantity"],
  .qty-select,
  button,
  .btn,
  .cta-buttons,
  .action-buttons,

  /* WhatsApp y contacto flotante */
  .float-wa,
  .whatsapp-float,
  .whatsapp-btn,
  .chat-bubble,
  [href*="wa.me"],
  .btn-whatsapp,

  /* Opciones de despacho expandidas (resumen impreso más abajo) */
  .shipping-options,
  .despacho-tabs,
  .tabs-nav,
  .tab-content,

  /* Favoritos, compartir */
  .btn-favorites,
  .btn-share,
  .social-share,
  .product-extra-actions,

  /* Reviews / Opiniones */
  .reviews-section,
  .product-reviews,
  .review-list,
  .review-item,
  .rating-bars,
  #reviews,
  [id*="review"],
  [class*="review"],

  /* Productos relacionados */
  .related-products,
  .also-like,
  .upsell,
  .cross-sell,
  [class*="related"],
  [class*="similar"],

  /* Newsletter, popups */
  .newsletter,
  .popup,
  .modal,
  .overlay,

  /* Footer */
  footer,
  .site-footer,
  .footer,

  /* Sticky bar inferior */
  .sticky-bar,
  .sticky-add-to-cart,
  .bottom-bar,

  /* Imágenes en miniatura (galería thumbnails) */
  .product-thumbnails,
  .thumb-list,
  .gallery-thumbs,

  /* Zoom overlay */
  .zoom-overlay,
  .image-zoom,
  .fancybox-container {
    display: none !important;
  }

  /* ── 4. CABECERA DE IMPRESIÓN ── */
  body::before {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 2.5pt solid #e02020;
    padding-bottom: 8pt;
    margin-bottom: 10pt;
  }

  /* Logo impreso como texto de marca (fallback si la imagen no carga) */
  .print-header {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12pt;
    padding-bottom: 8pt;
    border-bottom: 1.5pt solid #e5e5e5;
  }

  /* Si el sitio no tiene .print-header, inyectarlo via JS o agregar en la plantilla */

  /* ── 5. LAYOUT DE LA PÁGINA DEL PRODUCTO ── */

  /* Contenedor principal: ancho completo */
  .product-page,
  .product-container,
  .product-detail,
  .product-wrapper,
  main,
  .main-content,
  .container,
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
  }

  /* Grid del producto: imagen + info lado a lado */
  .product-layout,
  .product-top,
  .product-main,
  .product-columns {
    display: grid !important;
    grid-template-columns: 210pt 1fr !important;
    gap: 18pt !important;
    margin-bottom: 14pt !important;
    page-break-inside: avoid;
  }

  /* ── 6. IMAGEN PRINCIPAL ── */
  .product-image,
  .product-gallery,
  .product-photo,
  .main-image,
  .product-image-wrapper {
    width: 210pt !important;
    max-width: 210pt !important;
    flex-shrink: 0;
    page-break-inside: avoid;
  }

  .product-image img,
  .product-gallery img,
  .product-photo img,
  .main-image img,
  .product-image-wrapper img {
    width: 100% !important;
    max-width: 210pt !important;
    height: auto !important;
    max-height: 210pt !important;
    object-fit: contain !important;
    border: 0.75pt solid #ddd !important;
    border-radius: 4pt !important;
    display: block !important;
  }

  /* ── 7. INFORMACIÓN DEL PRODUCTO ── */
  .product-info,
  .product-details,
  .product-right,
  .product-content {
    flex: 1 !important;
    padding: 0 !important;
  }

  /* Categoría / breadcrumb */
  .product-category,
  .product-breadcrumb,
  .breadcrumb {
    font-size: 7.5pt !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4pt !important;
  }

  .breadcrumb a,
  .product-breadcrumb a {
    color: #888 !important;
    text-decoration: none !important;
  }

  /* Título del producto */
  .product-title,
  .product-name,
  h1.product-title,
  h1 {
    font-size: 16pt !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.25 !important;
    margin: 0 0 5pt !important;
    page-break-after: avoid;
  }

  /* SKU */
  .product-sku,
  .sku {
    font-size: 8pt !important;
    color: #999 !important;
    margin-bottom: 6pt !important;
  }

  .product-sku::before { content: 'SKU: '; }

  /* Rating */
  .product-rating,
  .star-rating,
  .rating {
    font-size: 9pt !important;
    color: #f5a623 !important;
    margin-bottom: 8pt !important;
  }

  /* Badge en stock */
  .stock-status,
  .in-stock,
  .stock-badge {
    display: inline-block !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    color: #1b7c3e !important;
    background: #e8f7ee !important;
    border: 0.5pt solid #b2dfca !important;
    padding: 2pt 7pt !important;
    border-radius: 20pt !important;
    margin-bottom: 10pt !important;
  }

  /* ── 8. PRECIOS ── */
  .product-price,
  .price-wrapper,
  .precio-wrapper {
    margin-bottom: 10pt !important;
    padding: 8pt 10pt !important;
    background: #f8f8f8 !important;
    border-left: 3pt solid #e02020 !important;
    border-radius: 0 4pt 4pt 0 !important;
    page-break-inside: avoid;
  }

  .price-label,
  .price-iva-label {
    font-size: 7.5pt !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin-bottom: 2pt !important;
  }

  .price-main,
  .product-price .price,
  .precio-con-iva,
  .precio-final {
    font-size: 22pt !important;
    font-weight: 900 !important;
    color: #e02020 !important;
    line-height: 1 !important;
    display: block !important;
  }

  .price-net,
  .precio-neto,
  .price-without-vat {
    font-size: 9pt !important;
    color: #777 !important;
    margin-top: 3pt !important;
    display: block !important;
  }

  .price-importer-tag {
    font-size: 8pt !important;
    color: #e02020 !important;
    margin-top: 4pt !important;
    display: block !important;
  }

  /* ── 9. DESCRIPCIÓN / FICHA TÉCNICA ── */
  .product-description,
  .product-desc,
  .description,
  .ficha-tecnica {
    margin-top: 12pt !important;
    padding-top: 10pt !important;
    border-top: 0.75pt solid #e5e5e5 !important;
    font-size: 9.5pt !important;
    color: #333 !important;
    line-height: 1.6 !important;
    page-break-inside: avoid;
  }

  .product-description h2,
  .product-description h3,
  .description h2,
  .description h3 {
    font-size: 11pt !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 8pt 0 4pt !important;
    page-break-after: avoid;
  }

  .product-description ul,
  .description ul {
    padding-left: 14pt !important;
    margin: 4pt 0 8pt !important;
  }

  .product-description li,
  .description li {
    margin-bottom: 3pt !important;
    font-size: 9.5pt !important;
  }

  .product-description strong,
  .description strong {
    color: #111 !important;
  }

  /* ── 10. DESPACHO (resumen compacto) ── */
  .shipping-summary,
  .despacho-summary {
    margin-top: 10pt !important;
    padding: 8pt 10pt !important;
    background: #f0f7ff !important;
    border: 0.75pt solid #c8dff5 !important;
    border-radius: 4pt !important;
    font-size: 9pt !important;
    page-break-inside: avoid;
  }

  .shipping-summary-title {
    font-size: 9pt !important;
    font-weight: 700 !important;
    color: #1a4a7a !important;
    margin-bottom: 5pt !important;
  }

  .shipping-summary ul {
    padding-left: 12pt !important;
    margin: 0 !important;
    color: #333 !important;
  }

  .shipping-summary li {
    margin-bottom: 3pt !important;
  }

  /* ── 11. BADGES DE CONFIANZA ── */
  .trust-badges,
  .product-trust,
  .garantias {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6pt !important;
    margin-top: 10pt !important;
    padding-top: 8pt !important;
    border-top: 0.75pt solid #e5e5e5 !important;
    page-break-inside: avoid;
  }

  .trust-item,
  .garantia-item {
    text-align: center !important;
    font-size: 7.5pt !important;
    color: #555 !important;
    padding: 4pt !important;
  }

  .trust-item .icon,
  .garantia-item .icon {
    font-size: 14pt !important;
    display: block !important;
    margin-bottom: 2pt !important;
  }

  .trust-item strong,
  .garantia-item strong {
    display: block !important;
    font-size: 8pt !important;
    color: #222 !important;
  }

  /* ── 12. PIE DE PÁGINA IMPRESO ── */
  body::after {
    content: '';
    display: block;
    margin-top: 16pt;
    padding-top: 8pt;
    border-top: 1.5pt solid #e5e5e5;
  }

  /* Pie de página con datos de contacto como tabla */
  .print-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10pt !important;
    font-size: 8pt !important;
    color: #555 !important;
    margin-top: 14pt !important;
    padding-top: 10pt !important;
    border-top: 1.5pt solid #e02020 !important;
    page-break-inside: avoid;
  }

  .print-footer-col { }

  .print-footer strong {
    display: block !important;
    font-size: 8.5pt !important;
    color: #111 !important;
    margin-bottom: 3pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .print-footer a {
    color: #555 !important;
    text-decoration: none !important;
  }

  /* URL de la página al pie (nativo del navegador) */
  /* Se controla con @page: los navegadores imprimen URL y título por defecto. */
  /* Para suprimirlos se puede usar: */
  /* @page { margin-bottom: 5mm; } y ocultar con body::after */

  /* ── 13. LINKS — mostrar URL entre paréntesis para refs importantes ── */
  /* Solo en descripción; los de navegación ya están ocultos */
  .product-description a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 7pt;
    color: #aaa;
    word-break: break-all;
  }

  /* Excepto links internos cortos */
  .product-description a[href^="#"]::after,
  .product-description a[href^="javascript"]::after {
    content: '' !important;
  }

  /* ── 14. SALTOS DE PÁGINA ── */
  .product-description,
  .product-specs,
  .ficha-tecnica {
    page-break-before: auto;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    page-break-inside: avoid;
    page-break-after: avoid;
  }

  table {
    page-break-inside: avoid;
  }

  /* ── 15. TABLA DE ESPECIFICACIONES (si existe) ── */
  .specs-table,
  .product-specs table,
  .ficha-tecnica table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9pt !important;
    margin-top: 8pt !important;
  }

  .specs-table th,
  .product-specs table th {
    background: #f0f0f0 !important;
    color: #111 !important;
    font-weight: 700 !important;
    padding: 5pt 8pt !important;
    text-align: left !important;
    border: 0.5pt solid #ddd !important;
    font-size: 8.5pt !important;
  }

  .specs-table td,
  .product-specs table td {
    padding: 5pt 8pt !important;
    border: 0.5pt solid #ddd !important;
    color: #333 !important;
    vertical-align: top !important;
  }

  .specs-table tr:nth-child(even) td,
  .product-specs table tr:nth-child(even) td {
    background: #fafafa !important;
  }

  /* ── 16. AJUSTES ESPECÍFICOS PARA CHILEREMATES ── */

  /* Topbar */
  .topbar { display: none !important; }

  /* Header con logo */
  header .logo img {
    /* Mostrar logo en cabecera */
    max-height: 32pt !important;
    width: auto !important;
  }

  /* Quitar el header del sitio pero conservar solo el logo */
  header .header-actions,
  header nav,
  header .search-bar,
  header .btn-wa-header,
  header .cart-link {
    display: none !important;
  }

  header {
    position: static !important;
    box-shadow: none !important;
    border-bottom: 1pt solid #e5e5e5 !important;
    padding: 6pt 0 8pt !important;
    margin-bottom: 10pt !important;
  }

  /* Breadcrumb del producto */
  .breadcrumb {
    display: block !important;
    font-size: 8pt !important;
    color: #999 !important;
    margin-bottom: 8pt !important;
  }

  /* Badge "Más Vendido" y "En Stock" */
  .badge-mas-vendido,
  .badge-stock,
  [class*="badge"] {
    border: 0.5pt solid currentColor !important;
    border-radius: 3pt !important;
    padding: 1pt 5pt !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin-bottom: 5pt !important;
  }

  /* Ocultar select de cantidad enorme */
  select { display: none !important; }

  /* Ocultar botón sticky inferior */
  .sticky-add-to-cart,
  .add-cart-sticky,
  .product-sticky-bar { display: none !important; }

  /* Ficha de producto: layout 2 columnas */
  .product-detail-inner,
  .product-detail-wrapper {
    display: grid !important;
    grid-template-columns: 45% 1fr !important;
    gap: 20pt !important;
    align-items: start !important;
  }

} /* fin @media print */


/* =============================================================
   BLOQUE DE CABECERA Y PIE VISIBLES SOLO AL IMPRIMIR
   Agregar este HTML en la plantilla del producto:

   <!-- SOLO VISIBLE AL IMPRIMIR -->
   <div class="print-only print-header-block">
     <img src="/assets/img/logo.png" alt="Chileremates" style="height:28pt">
     <div class="print-header-info">
       <strong>chileremates.cl</strong>
       Maquinaria y materiales a precios de importador directo
     </div>
     <div class="print-header-date">
       Ficha impresa: <span id="print-date"></span>
     </div>
   </div>

   <div class="print-only print-footer-block">
     <div>
       <strong>📍 Dirección</strong>
       Compañía 4270, Quinta Normal, Santiago
     </div>
     <div>
       <strong>📞 Teléfono / WhatsApp</strong>
       (56-2) 2773 2749 · +56 9 6226 2317
     </div>
     <div>
       <strong>✉️ Contacto</strong>
       contacto@chileremates.cl<br>
       chileremates.cl
     </div>
   </div>

   <script>
     document.getElementById('print-date').textContent =
       new Date().toLocaleDateString('es-CL', {day:'2-digit',month:'long',year:'numeric'});
   </script>
   ============================================================= */

@media print {

  /* Mostrar bloques solo de impresión */
  .print-only {
    display: block !important;
  }

  /* Ocultar bloques que NO deben verse al imprimir */
  .no-print,
  .screen-only {
    display: none !important;
  }

  /* Cabecera de impresión */
  .print-header-block {
    display: flex !important;
    align-items: center !important;
    gap: 14pt !important;
    margin-bottom: 12pt !important;
    padding-bottom: 8pt !important;
    border-bottom: 2pt solid #e02020 !important;
  }

  .print-header-block img {
    height: 28pt !important;
    width: auto !important;
  }

  .print-header-info {
    font-size: 8pt !important;
    color: #555 !important;
    line-height: 1.4 !important;
  }

  .print-header-info strong {
    display: block !important;
    font-size: 11pt !important;
    font-weight: 800 !important;
    color: #e02020 !important;
    font-family: Arial, sans-serif !important;
  }

  .print-header-date {
    margin-left: auto !important;
    font-size: 7.5pt !important;
    color: #aaa !important;
    white-space: nowrap !important;
    align-self: flex-end !important;
  }

  /* Pie de impresión */
  .print-footer-block {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10pt !important;
    margin-top: 16pt !important;
    padding-top: 10pt !important;
    border-top: 1.5pt solid #e02020 !important;
    font-size: 8pt !important;
    color: #444 !important;
  }

  .print-footer-block strong {
    display: block !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 3pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  #stickyBuy{
      display: none;
  }
  footer{
      display: none;
  }
  .breadcrumb{
      display: none!important;
  }
  .social-proof{
      display: none;
  }
  .product-actions-row{
      display: none;
  }
  .qty-row{
      display: none;
  }
  header{
      display: none!important;
  }
}

/* =============================================================
   En pantalla: ocultar los bloques solo de impresión
   ============================================================= */
@media screen {
  .print-only {
    display: none !important;
  }
}