/* ======================================================
   responsive.css — Mobile & Tablet overrides (non-destructive)
   Mobile: up to 767px | Tablet: 768px - 1023px | Desktop: 1024px+
   Se aplican solo media queries para no alterar el desktop existente.
   ======================================================
*/

/* Nota: las reglas sobre imágenes se aplican sólo en viewports <= 1023px más abajo. */

/* Utility wrapper for tables when needed in templates */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Por defecto ocultar el botón de filtros (se muestra solo en mobile via media query) */
.mobile-filters-bar { display: none; }
/* Cerrar filtros: oculto por defecto (solo se muestra en mobile) */
.mobile-filters-close { display: none; }

/* ---------------- Mobile (<= 767px) ---------------- */
@media (max-width: 767px) {

    

    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make main sections full-bleed on mobile (no lateral margins) */
    .main-content,
    .products-section,
    .categories-section,
    .latest-stock-section,
    .cart-section,
    .works-section,
    .products-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Allow a bit of lateral padding inside the footer on mobile */
    .footer-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ---- Header ---- */
    .header-main {
        height: auto !important;
        padding: 6px 0 0;
        padding-bottom: 70px; /* reserve space for absolute search on mobile */
    }

    /*
     * Row 1: [☰ order:1]  [logo flex:1 order:2]  [🛒 order:3]
     * Row 2: [search  —  full width  —  order:4]
     */
    .header-main-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        gap: 0 !important;
        justify-content: flex-start !important;
        padding: 0 0 6px;
        position: relative !important;
        min-height: 44px !important;
        padding-top: 10px !important;
    }

    /* ☰ hamburger */
    .mobile-menu-btn {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        font-size: 1.35rem;
        padding: 0 !important;
        width: 44px;
        height: 44px;
        order: 1;
        z-index: 1202;
    }

    /* Logo — takes remaining space between hamburger and cart */
    .logo {
        display: flex !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0;
        justify-content: center !important;
        align-items: center;
        order: 2;
    }

    .logo-link {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo-image {
        height: 44px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 44px !important;
    }

    /* Cart icon — fixed size, right of logo */
    .header-cart {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1200 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        order: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-cart a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 8px;
    }

    /* Search bar — absolute below the top row so menu/cart align with logo */
    .header-search {
        position: absolute !important;
        left: 0;
        right: 0;
        top: calc(100% + 6px) !important; /* place just below the first row */
        width: 100% !important;
        max-width: 100% !important;
        order: 4;
        margin-top: 0 !important;
        padding: 0 16px 6px; /* keep lateral space for search input on mobile */
        box-sizing: border-box;
    }

    .header-search form {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: none;
        border: 1px solid #eee;
    }

    .header-search input {
        padding: 10px 14px;
        font-size: 16px;
        flex: 1;
        border-radius: 10px;
    }

    .header-search button {
        padding: 10px 16px;
        min-width: 48px;
        border-radius: 0;
    }

    /* Hide desktop navbar on small screens (mobile drawer available) */
    .navbar, .nav-content {
        display: none !important;
    }

    /* Mobile drawer styles */
    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
        z-index: 1300;
    }

    .mobile-drawer-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        transform: translateX(-110%);
        transition: transform 220ms ease;
        background: #fff;
        z-index: 1301;
        box-shadow: 0 12px 32px rgba(0,0,0,0.3);
        box-sizing: border-box; /* incluir border en el ancho para evitar overflow */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer.open {
        transform: translateX(0);
    }

    /* En móvil: hacer la franja roja del panel 'Productos' completa (altura del detalle abierto) */
    .mdr-nav-details.active > .mdr-nav-summary::before,
    .mdr-nav-details[open] > .mdr-nav-summary::before {
        top: 0;
        bottom: 0;
        width: 6px;
        left: 0;
        border-radius: 0 4px 4px 0;
        background: #D62828;
    }

    .mobile-drawer .mobile-drawer-header {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-drawer-nav {
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-drawer-link {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        text-decoration: none;
        color: inherit;
        border-radius: 8px;
    }

    .mobile-drawer-link:hover {
        background: #f5f5f5;
    }

    /* Reduce hero padding to fit mobile screens */
    .hero {
        padding: 24px 10px;
    }

    .image-hero {
        min-height: auto;
        background-attachment: scroll;
    }

    .hero-banner-link {
        padding: 0;
    }

    .hero-banner-image {
        max-height: 60vh;
    }

    .image-hero .hero-content h1,
    .hero-content h1 {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .image-hero .hero-content p,
    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .image-hero .hero-content .btn,
    .hero-content .btn {
        padding: 10px 24px;
        font-size: 0.95rem;
    }

    .pagination{
        margin-block:4vw !important;
    }

    /* Grid responsiveness */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Feature cards compact on mobile */
    .feature-card { padding: 18px 12px; }
    .feature-card i { font-size: 1.8rem; margin-bottom: 8px; }
    .feature-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
    .feature-card p { font-size: 0.8rem; }

    /* Products page — remove sidebar gap, full-width main */
    .products-section { padding: 16px 12px; }
    .products-section h1 { font-size: 1.4rem; margin-bottom: 4px; padding-left: 2vw; }
    .products-container { grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 12px; }

    /* Mobile filters toggle: button visible on mobile, sidebar uses transform+opacity for smooth open/close */
    .mobile-filters-bar { display: block; padding: 12px 2vw 0; }
    .filters-toggle-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; padding: 10px 14px; border-radius: 8px; }
    .mobile-filters-close { display: none; }

    /* Hidden by default but kept in DOM so it can animate (no display:none) */
    .filters-sidebar {
        display: block !important;
        position: fixed;
        left: 50%;
        top: 64px;
        transform: translate(-50%, -10px) scale(0.995);
        width: 90%;
        max-width: 640px;
        z-index: 9999;
        background: #fff;
        padding: 16px;
        border-radius: 8px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.28);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.3,1), visibility 220ms;
    }

    /* Visible state */
    body.filters-open .filters-sidebar {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
        pointer-events: auto;
    }

    .filters-sidebar .mobile-filters-close { display: inline-block; float: right; font-size: 22px; line-height: 1; background: none; border: none; padding: 6px; margin-left: 8px; }
    body.filters-open .products-main { filter: blur(0.4px); pointer-events: none; touch-action: none; }

    .products-main { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
    .products-header { margin-bottom: 12px; padding-bottom: 10px; font-size: 0.88rem; padding-left: 2vw; }

    /* Buttons & touch targets */
    .btn { padding: 12px 14px; min-height: 44px; font-size: 1rem; border-radius: 8px; }

    /* Forms: inputs full width */
    label { display: block; margin-bottom: 6px; font-weight: 600; }
    input, textarea, select { width: 100% !important; box-sizing: border-box; padding: 10px 12px; font-size: 16px; }
    .form-group { margin-bottom: 12px; }

    /* Tables: allow horizontal scroll inside wrapper */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { width: 100%; max-width: 100%; border-collapse: collapse; }
    .cart-table { min-width: 700px; }
    /* mobile footer default hidden (shown only under mobile media query) */
    .cart-footer-mobile { display: none; }

    /* Mobile: reordenar ficha de cada producto para que quepa en el ancho */
    @media (max-width: 767px) {
        .cart-table { min-width: 0 !important; width: 100% !important; table-layout: fixed; border-spacing: 0 10px; }
        .cart-table thead { display: none !important; }

        .cart-section h1{
            margin-bottom: 12px;
            padding-top: 4px;
            margin-left:1vw;
        }

        /* cada fila se muestra como tarjeta flexible (row) y alineada al inicio */
        .cart-table tbody tr {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: flex-start;
            padding: 6px 0;
            background: transparent;
            position: relative; /* permite posicionar el botón eliminar */
        }

        .cart-table td {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            padding: 8px 10px;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(18,52,86,0.04);
            min-width: 0; /* importante para evitar overflow de texto */
            box-sizing: border-box;
        }

        /* Quitar hover que pinta la tarjeta en móvil (solo carrito) */
        .cart-table tbody tr:hover td {
            background: #fff !important;
            box-shadow: 0 2px 6px rgba(18,52,86,0.04) !important;
            transition: none !important;
        }

        /* Desactivar resaltado táctil / hover por defecto en móviles (cart) */
        .cart-table,
        .cart-table tbody tr,
        .cart-table td,
        .cart-table a,
        .cart-table button {
            -webkit-tap-highlight-color: transparent !important;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        /* Asegurar que no haya fondo ni sombra en estados hover/active/focus */
        .cart-table tbody tr:hover,
        .cart-table tbody tr:active,
        .cart-table tbody tr:focus,
        .cart-table tbody tr:hover td,
        .cart-table tbody tr:active td,
        .cart-table tbody tr:focus td {
            background: #fff !important;
            box-shadow: 0 2px 6px rgba(18,52,86,0.04) !important;
            outline: none !important;
            transition: none !important;
        }

        /* ocultar resumen de escritorio en móvil */
        .desktop-summary { display: none !important; }

        /* Producto (imagen + nombre) ocupa el mayor ancho */
        .cart-table td.product-cell { order: 1; flex: 1 1 55%; padding: 10px; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
        .cart-product-info { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
        .cart-product-info img { width: 72px; height: 72px; flex-shrink: 0; object-fit: contain; }
        .cart-product-info a { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.15; white-space: normal; overflow: hidden; text-overflow: ellipsis; color: #111827; text-transform: uppercase; }

        /* Botón eliminar se muestra como icon-only en la esquina superior derecha */
        .cart-table td:nth-child(5) { display: none; }
        .cart-table .remove-item { position: absolute; top: 8px; right: 8px; background: transparent !important; color: #6b7280 !important; border: none !important; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: none !important; }
        .cart-table .remove-item .fa-trash { color: inherit !important; }

        /* Precio unitario (gris/secundario) */
        .cart-table td:nth-child(2) { order: 2; align-self: center; flex: 0 0 110px; justify-content: flex-end; text-align: right; padding: 8px; font-size: 0.95rem; color: #6b7280; }

        /* Controles de cantidad: fila, mismo alto (min 44x44) */
        /* Poner el contador antes del subtotal para que queden en la misma línea */
        .cart-table td:nth-child(3) { order: 3; align-self: center; flex: 0 0 140px; padding: 8px; display:flex; align-items:center; justify-content:center; }
        .quantity-input { display: flex; gap: 8px; align-items: center; justify-content:center; flex-wrap: nowrap; }
        .cart-section .quantity-input { margin-left: 15vw; }
        .cart-table td:nth-child(3) .qty-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
        .cart-table td:nth-child(3) .qty-field { width: 56px !important; height: 44px; text-align: center; border-radius: 8px; padding: 0; border: 1px solid #eef4ff; background: #fff; font-size: 1rem; line-height: 44px; -moz-appearance: textfield; appearance: textfield; }
        .cart-table td:nth-child(3) .qty-field::-webkit-outer-spin-button, .cart-table td:nth-child(3) .qty-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

        /* Subtotal del ítem: etiqueta + monto (distinguible) */
        .cart-table td:nth-child(4), .cart-table td.item-total { order: 4; align-self: center; flex: 0 0 25vw; justify-content: flex-end; text-align: right; color: #111827; font-weight: 700; padding: 8px; white-space: nowrap;margin-left:30vw;margin-top: 2vw;; }
        .cart-table td.item-total::before { content: 'Subtotal: '; color: #6b7280; font-weight: 600; margin-right: 6px; font-size: 0.95rem; display: inline-block; }

        .cart-items { padding: 0px !important; }
        .cart-summary { margin-top: 12px; }
        .cart-section { padding-top: 0 !important; }

        /* Mostrar footer móvil con total y checkout */
        .cart-footer-mobile { display: block; margin-top: 12px; }
        .cart-footer-inner { padding: 12px 0; }
        .cart-footer-sep { border: none; border-top: 1px solid #eef4ff; margin: 6px 0 12px; }
        .cart-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .cart-footer-row .cart-footer-label { font-size: 1rem; color: #374151; }
        .cart-footer-row .cart-footer-amount { font-size: 1.125rem; font-weight: 800; color: #2b7cff; }
        .mobile-checkout { margin-top: 12px; }
    }

    /* Modals: adapt to viewport and allow internal scrolling */
    .modal-content,
    .modal-content-envio,
    .confirm-modal .modal-content,
    #mediaModal .modal-content,
    #galleryModal .modal-content {
        width: calc(100% - 32px);
        max-width: 720px;
        max-height: 90vh;
        margin: 0 auto;
        overflow-y: auto;
        border-radius: 10px;
    }

    .product-description{
        padding-top:0;
        margin-top:0;
    }

    #mediaModal .modal-media { min-height: 200px; }
    .modal-media img, .modal-media video, .gallery-image { max-height: 60vh; object-fit: contain; }

     /* Prevent some common overflow sources */
     .container img, .product-card img, .category-card img, .cart-product-info img { max-width: 100%; height: 100%; }

     /* Reduce product image and info padding to save vertical space.
         Use square aspect ratio on mobile so two-column cards keep consistent width/height. */
     .product-image { height: auto !important; aspect-ratio: 1 / 1 !important; max-height: 55vw !important; }

     /* Reduce horizontal padding in carousel on small screens so cards use more width */
     .carousel-wrapper { padding: 0 8px !important; }
     .carousel-window { padding: 8px 8px !important; }
    .product-info { padding: 8px 10px 12px; }
    .product-info h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; line-height: 1.25; }
    .product-category { font-size: 0.75rem; color: #6b7280; }
    .price-final { font-size: 1rem; }
    .product-actions { gap: 6px; margin-top: 8px; }
    .product-actions .btn { font-size: 0.85rem; padding: 9px 8px; }
    .price-final { font-size: 1.25rem; }

    /* Add bottom padding to main sections to avoid overlap with floating actions (WhatsApp) */
    .main-content,
    .products-section,
    .categories-section,
    .latest-stock-section,
    .cart-section,
    .works-section {
        padding-bottom: 2px;
    }

    /* Ensure floating WhatsApp is slightly inset and doesn't cover critical CTAs */
    .whatsapp-float { right: 12px; bottom: 14px; }

    /* Avoid full-viewport fixed widths causing horizontal scroll */
    [style*="width: 100vw"], [style*="width:100vw"] { width: 100% !important; }

    /* Carousel: ensure visible area is clipped and JS handles card sizes */
    .latest-stock-section .carousel-window {
        overflow: hidden;
        padding: 8px 10px;
    }

    /* Smaller nav buttons so they don't eat card space */
    .latest-stock-section .carousel-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .latest-stock-section .carousel-btn.prev { left: 2px; }
    .latest-stock-section .carousel-btn.next { right: 2px; }

    /* Compact card content inside carousel on mobile: keep square images but cap height */
    .latest-stock-section .product-image { aspect-ratio: 1 / 1; min-height: unset; max-height: 60vw; }
    .latest-stock-section .product-info { padding: 8px 8px 10px; }
    .latest-stock-section .product-info h3 { font-size: 0.82rem; margin-bottom: 4px; }
    .latest-stock-section .product-category { font-size: 0.72rem; }
    .latest-stock-section .price-final { font-size: 1rem; }
    .latest-stock-section .product-actions .btn { font-size: 0.8rem; padding: 7px 6px; }

    /* ---- Footer ---- */
    .footer-content { padding: 28px 0 12px; }

    /* 3 secciones en 2 columnas: info + contacto arriba, enlaces centrado abajo */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        justify-items: start;
        margin-bottom: 20px;
    }

    /* Última sección (enlaces rápidos) ocupa fila completa */
    .footer-grid .footer-section:last-child {
        grid-column: 1 / -1;
    }

    .footer-section h3 { font-size: 1rem; margin-bottom: 10px; }
    .footer-section p { font-size: 0.82rem; }
    .footer-section ul li { font-size: 0.82rem; margin-bottom: 7px; }

    /* Links rápidos en fila */
    .footer-grid .footer-section:last-child ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
    }
    .footer-grid .footer-section:last-child ul li { margin-bottom: 0; }

    /* Mapa más bajo en móvil */
    .footer-map iframe { height: 160px; }
    .footer-map { margin-bottom: 20px; }

    /* Copyright + métodos de pago apilados y centrados */
    .footer-bottom-content {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    /* Chips de pago en fila simple */
    .footer-bottom-content .payment-methods {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-bottom-content .payment-methods span {
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .confirm-purchase-section>.container>h1{
        margin-left: 2vw !important;
    }

    .confirm-purchase-form,.confirm-purchase-summary{
        padding-inline: 2vw;
    }

}

/* ---------------- Small phones (<400px) ---------------- */
@media (max-width: 399px) {

    /* Slightly more compact header */
    .header-main { padding: 5px 0; padding-bottom: 70px; }
    .logo-image { height: 38px !important; width: auto !important; max-width: none !important; }

    /* Even smaller hero and tighter spacing */
    .hero { padding: 20px 8px; }

    /* Catalog: 2 columns on small phones too */
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .category-card { padding: 12px; }

    /* Product visuals — compact for 2-col at ~170px card width */
    .product-image { height: 120px; }
    .product-info { padding: 8px 8px 10px; }
    .product-info h3 { font-size: 0.82rem; margin-bottom: 4px; }
    .product-category { font-size: 0.72rem; }
    .price-final { font-size: 1rem; }
    .product-actions .btn { font-size: 0.8rem; padding: 7px 6px; }

    /* Inputs and search tweaks */
    .header-search input { padding: 9px 10px; font-size: 15px; }

    /* Keep space for floating actions */
    .main-content, .products-section, .categories-section { padding-bottom: 2px; }
}

/* ---------------- Tablet (768px - 1023px) ---------------- */
@media (min-width: 768px) and (max-width: 1023px) {

    .container { padding-left: 18px; padding-right: 18px; }

    .logo-image { height: 64px; }

    /* Mejorar áreas táctiles en tablet */
    .nav-item { padding: 12px 16px; min-height: 44px; border-radius: 8px; }
    .header-cart a { padding: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    .navbar { display: flex; }
    .nav-content { gap: 12px; flex-wrap: wrap; overflow: auto; -webkit-overflow-scrolling: touch; }

    .header-search { max-width: 45vw; }

    .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

    .table-responsive { overflow-x: auto; }

    .modal-content, .modal-content-envio, .confirm-modal .modal-content {
        width: calc(100% - 64px);
        max-width: 900px;
        max-height: 90vh;
        overflow-y: auto;
    }

    input, textarea, select { font-size: 15px; padding: 10px; }

    .category-card, .product-card { padding: 16px; }

    

}

/* Safety: ensure no horizontal scrollbar on body at supported viewports */
@media (max-width: 1023px) {
    html, body { overflow-x: hidden; }
    /* Limitar medios a ancho del contenedor sólo en móviles/tablet */
    img, picture, video, svg { max-width: 100%; height: auto; }
    /* Exception: logo must keep its fixed height */
    .logo-image { height: 44px !important; width: auto !important; max-width: none !important; }

    /* Forzar scroll interno en tablas que puedan romper el layout */
    .main-content table,
    .admin-container table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .main-content table thead,
    .admin-container table thead { display: table-header-group; }
}

/* Keep .table-responsive available globally */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Ensure product images inside cards adapt to their container without distortion.
   Use `object-fit` on the <img> so aspect ratio is preserved. */
@media (max-width: 1023px) {
    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    /* For carousel / latest-stock, prefer cover to keep consistent card visuals */
    .latest-stock-section .product-image img {
        object-fit: cover;
    }
}

@media (max-width: 399px) {
    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
}

/* End responsive.css */