/* ====== MIGA XXS: cuadro y header ultra-compactos ====== */ :root{ --miga-box-max: 320px; /* si quieres aún menos: 320px o 300px */ --miga-header-h: 48px; /* altura del header */ --miga-logo-h: 26px; /* alto máx. del logo */ --miga-search-h: 36px; /* alto del buscador */ --miga-cart-icon: 15px; --miga-cart-badge: 13px; } /* Header y título del sitio más chico */ header#masthead, .site-header, .main-header{ height: var(--miga-header-h); min-height: var(--miga-header-h); display:flex; align-items:center; } .site-branding img, .custom-logo{ max-height: var(--miga-logo-h) !important; height:auto !important; width:auto !important; } /* Título de texto “Maquinaria Miga” (si no usas logo imagen) */ .site-title, h1.site-title, .site-title a, .ast-site-title a, .site-branding .site-title a{ font-size: clamp(13px, 1vw, 16px) !important; line-height: 1.05 !important; margin: 0 !important; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Buscador más delgado y corto */ .header-search, .site-search{ flex: 1 1 300px; max-width: 420px; min-width: 240px; } form[role="search"], .search-form, .woocommerce-product-search{ display:flex; gap:6px; align-items:center; width:100%; } form[role="search"] input[type="search"], .search-form input[type="search"], .woocommerce-product-search input.search-field{ height: var(--miga-search-h); line-height: var(--miga-search-h); font-size: 13.5px; padding: 0 12px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.10); } form[role="search"] button, .search-form button, .woocommerce-product-search button{ height: var(--miga-search-h); padding: 0 10px; font-size: 12px; border-radius: 10px; font-weight: 800; } /* Carrito mini */ .elementor-menu-cart__toggle .elementor-button, .site-header-cart .cart-contents, .woocommerce a.cart-contents{ min-width: calc(var(--miga-cart-icon) + 12px); height: calc(var(--miga-cart-icon) + 12px); padding: 0 6px; border-radius: 999px; line-height: 1; } .elementor-menu-cart__toggle .elementor-button-icon svg, .site-header-cart .cart-contents svg, .woocommerce a.cart-contents svg{ width: var(--miga-cart-icon) !important; height: var(--miga-cart-icon) !important; } .site-header-cart .cart-contents .count, .woocommerce a.cart-contents .count{ min-width: var(--miga-cart-badge); height: var(--miga-cart-badge); font-size: 10px; line-height: var(--miga-cart-badge); } /* ===== Cuadro de contacto (más corto y estrecho) ===== */ .miga-box{ flex: 0 0 auto; width: min(var(--miga-box-max), 86vw); max-width: var(--miga-box-max); display: inline-block; /* evita ocupar todo el ancho */ padding: 4px 8px; /* más bajo */ margin: 2px 6px; border-radius: 9px; } .miga-box h3{ font-size: clamp(12px, .95vw, 15px) !important; line-height: 1.1; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miga-actions{ gap: 4px; margin-top: 3px; flex-wrap: wrap; } .miga-btn{ height: 24px; padding: 0 7px; font-size: 10.8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; } .miga-icon{ width: 11px; height: 11px; } .miga-note{ font-size: 8.5px; margin-top: 2px; } /* Si vive en el header, recórtalo aún más */ .site-header .miga-box, .header .miga-box, #masthead .miga-box{ max-width: 320px; } /* ===== Breakpoints laptop (aún más chico) ===== */ @media (max-width: 1366px){ :root{ --miga-box-max: 320px; --miga-header-h: 46px; --miga-logo-h: 24px; --miga-search-h: 34px; } .site-header .miga-box{ max-width: 300px; } .site-title, h1.site-title, .site-title a, .ast-site-title a{ font-size: clamp(12px, .9vw, 14px) !important; } .miga-btn{ height: 22px; font-size: 10.4px; padding: 0 6px; } } @media (max-width: 1280px){ :root{ --miga-box-max: 300px; --miga-header-h: 44px; --miga-logo-h: 22px; --miga-search-h: 32px; } .site-header .miga-box{ max-width: 280px; } }