/* ============================================
 MOBILE SEARCH RESULTS - MATCHING SITE DESIGN
 Applies EXACT same design as category pages
 Desktop remains unchanged
 ============================================ */

@media (max-width: 768px){
 /* ===== CONTAINER FULL WIDTH ===== */
 .category-page-content,
 .products-new-section,
 main .container{
 padding-left: 0 !important;
 padding-right: 0 !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
 max-width: 100% !important;
 width: 100% !important;
}

 /* ===== SEARCH HEADER - HIDDEN ON MOBILE ===== */
 .search-results-header{
 display: none !important;
}

 /* ===== PAGE CONTROLS - COMPACT SINGLE ROW ===== */
 .page-controls{
 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 8px !important;
 padding: 12px !important;
 margin: 0 0 8px 0 !important;
 border-radius: 0 !important;
 background: white !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

 .page-controls > div:first-child{
 font-size: 13px !important;
 font-weight: 600 !important;
 color: #666 !important;
 white-space: nowrap !important;
 flex-shrink: 0 !important;
}

 .page-controls > div:last-child{
 display: flex !important;
 flex-direction: row !important;
 gap: 6px !important;
 flex: 1 !important;
 justify-content: flex-end !important;
}

 .page-controls select{
 padding: 8px 10px !important;
 font-size: 11px !important;
 border-radius: 6px !important;
 border: 1px solid #e0e0e0 !important;
 background: white !important;
 color: #333 !important;
 min-width: 0 !important;
 flex-shrink: 1 !important;
}

 .page-controls select:first-child{
 max-width: 90px !important;
}

 .page-controls select:last-child{
 flex: 1 !important;
 max-width: 150px !important;
}

 /* ===== MAIN CONTENT - SINGLE COLUMN ===== */
 .category-page-content{
 display: flex !important;
 flex-direction: column !important;
 gap: 0 !important;
}

 /* ===== FILTERS SIDEBAR ===== */
 /* Filters are now handled by mobile-filters-drawer.css and mobile-filters-drawer.js */
 /* which creates a slide-out drawer from the left side with a button */

 /* ===== PRODUCTS GRID - 2 COLUMNS LIKE REST OF SITE ===== */
 .products-grid,
 body .products-grid,
 .container .products-grid,
 #search-products-grid,
 body #search-products-grid,
 .container #search-products-grid,
 .products-new-section .products-grid{
 display: grid !important;
 grid-template-columns: repeat(2,1fr) !important;
 gap: 2px !important;
 padding: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 margin: 0 !important;
}

 /* ===== PRODUCT CARD - EXACT SAME AS CATEGORY PAGES ===== */
 body .product-card,
 .container .product-card,
 .products-grid .product-card,
 .products-new-section .product-card,
 #search-products-grid .product-card,
 .product-card{
 display: flex !important;
 flex-direction: column !important;
 background: white !important;
 border-radius: 12px !important;
 overflow: hidden !important;
 box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
 border: 1px solid #e5e5e5 !important;
 width: 100% !important;
 max-width: 100% !important;
 min-height: 360px !important;
 padding: 8px !important;
 transition: transform 0.2s ease !important;
 grid-column: span 1 !important;
 flex: 0 0 auto !important;
}

 .product-card:active{
 transform: scale(0.98) !important;
 box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

 /* ===== PRODUCT IMAGE - 200PX FOR BIGGER DISPLAY ===== */
 body .product-card .product-image,
 body .container .product-card .product-image,
 .container .product-card .product-image,
 .products-grid .product-card .product-image,
 .products-new-section .product-card .product-image,
 #search-products-grid .product-card .product-image,
 div.product-card div.product-image,
 .product-card .product-image,
 .product-card-image-container{
 position: relative !important;
 width: 100% !important;
 height: 200px !important;
 min-height: 200px !important;
 max-height: 200px !important;
 background: #f8f9fb !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 10px !important;
 border-radius: 12px !important;
 margin: 0 !important;
 flex-shrink: 0 !important;
}

 .product-card .product-image img{
 width: 100% !important;
 height: 100% !important;
 object-fit: contain !important;
}

 .product-card .product-image a{
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 100% !important;
 height: 100% !important;
}

 /* Hide quick actions */
 .product-card .quick-actions{
 display: none !important;
}

 /* ===== BADGES - SAME STYLE ===== */
 .product-card .discount-badge{
 display: none !important;/* Hidden per user request */
}

 .product-card .stock-badge{
 position: absolute !important;
 top: 8px !important;
 left: 8px !important;
 padding: 4px 10px !important;
 border-radius: 8px !important;
 font-size: 10px !important;
 font-weight: 600 !important;
 background: #10b981 !important;
 color: white !important;
 z-index: 10 !important;
 box-shadow: none !important;
 overflow: hidden !important;
 border: none !important;
}

 /* Prevent orange/red bar artifacts below stock badge */
 .product-card .stock-badge::before,
 .product-card .stock-badge::after{
 display: none !important;
 content: none !important;
}

 .product-card .stock-badge.supplier{
 background: #f59e0b !important;
}

 .product-card .stock-badge.out{
 background: #9ca3af !important;
}

 /* ===== PRODUCT INFO - SAME AS CATEGORY PAGES ===== */
 body .product-card .product-info,
 body .product-card .product-details,
 .container .product-card .product-info,
 .container .product-card .product-details{
 flex: 1 !important;
 display: flex !important;
 flex-direction: column !important;
 padding: 8px 5px 20px 5px !important;
 gap: 3px !important;
 background: white !important;
}

 .product-card .product-header{
 display: flex !important;
 flex-direction: column !important;
 gap: 1px !important;
 margin-bottom: 2px !important;
}

 /* Product name - show COMPLETE title like category pages */
 body .product-card .product-name,
 body .container .product-card .product-name,
 .container .product-card .product-name,
 .product-card .product-name,
 body .product-card .product-name a,
 .container .product-card .product-name a,
 .product-card .product-name a{
 font-size: 12px !important;
 line-height: 1.3 !important;
 min-height: 40px !important;
 max-height: none !important;
 height: auto !important;
 margin: 8px 0 !important;
 display: block !important;
 overflow: visible !important;
 text-overflow: clip !important;
 word-wrap: break-word !important;
 white-space: normal !important;
 -webkit-line-clamp: unset !important;
 -webkit-box-orient: unset !important;
 color: #1a1a1a !important;
 font-weight: 600 !important;
 text-decoration: none !important;
}

 body .product-card .brand-name,
 .container .product-card .brand-name{
 font-size: 10px !important;
 font-weight: 600 !important;
 color: #888 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.5px !important;
 margin-bottom: 4px !important;
}

 /* Hide efficiency badge and features on mobile */
 .product-card .efficiency-badge,
 .product-card .product-features,
 .product-card .product-attributes{
 display: none !important;
}

 /* ===== PRICE SECTION - SAME AS CATEGORY PAGES ===== */
 .product-card .price-section{
 display: flex !important;
 flex-direction: column !important;
 gap: 1px !important;
 margin: 3px 0 0 0 !important;
 margin-top: auto !important;
}

 .product-card .product-price{
 display: flex !important;
 flex-direction: column !important;
 align-items: flex-start !important;
 gap: 1px !important;
}

 body .product-card .price-current,
 .container .product-card .price-current,
 body .product-card .product-price,
 .container .product-card .product-price{
 font-size: 16px !important;
 font-weight: 800 !important;
 color: #2034ad !important;
 line-height: 1 !important;
 margin-bottom: 2px !important;
}

 .product-card .price-old{
 font-size: 9px !important;
 color: #999 !important;
 text-decoration: line-through !important;
}

 body .product-card .price-info,
 .container .product-card .price-info{
 font-size: 7px !important;
 color: #aaa !important;
 margin-bottom: 0 !important;
}

 /* ===== ADD TO CART BUTTON - SAME AS CATEGORY PAGES ===== */
 body .product-card .btn-add-to-cart,
 .container .product-card .btn-add-to-cart{
 padding: 10px 5px !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 border-radius: 8px !important;
 background: linear-gradient(135deg,#2034ad 0%,#3f57ff 100%) !important;
 color: white !important;
 border: none !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 5px !important;
 width: 100% !important;
 box-shadow: 0 2px 6px rgba(32,52,173,0.25) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.2px !important;
 margin-top: 15px !important;
 position: static !important;
 bottom: auto !important;
 margin-bottom: 0 !important;
 transition: all 0.2s ease !important;
}

 .product-card .btn-add-to-cart:active{
 transform: scale(0.96) !important;
}

 .product-card .btn-add-to-cart:disabled{
 background: #9ca3af !important;
 box-shadow: none !important;
}

 .product-card .btn-add-to-cart svg{
 width: 14px !important;
 height: 14px !important;
}

 /* ===== PAGINATION - COMPACT ===== */
 .pagination-container > div{
 flex-wrap: wrap !important;
 gap: 6px !important;
 margin-top: 16px !important;
 padding: 12px !important;
 justify-content: center !important;
}

 .pagination-container a,
 .pagination-container span{
 min-width: 36px !important;
 height: 36px !important;
 font-size: 13px !important;
 border-radius: 6px !important;
 font-weight: 600 !important;
}

 /* ===== BREADCRUMB - COMPACT AND CLEAN ===== */
 nav[aria-label="breadcrumb"]{
 padding: 10px 12px !important;
 margin: 0 !important;
 background: #f8f9fa !important;
 border-bottom: 1px solid #e8e8e8 !important;
}

 .breadcrumb{
 font-size: 11px !important;
 padding: 0 !important;
 margin: 0 !important;
 background: transparent !important;
}

 .breadcrumb-item{
 color: #666 !important;
}

 .breadcrumb-item.active{
 color: #2034AD !important;
 font-weight: 600 !important;
}

 .breadcrumb-item a{
 color: #666 !important;
 text-decoration: none !important;
}

 .breadcrumb-item a:hover{
 color: #2034AD !important;
}

 /* ===== EMPTY STATE ===== */
 .products-new-section > div[style*="text-align: center"]{
 padding: 40px 20px !important;
}

 .products-new-section > div[style*="text-align: center"] i{
 font-size: 48px !important;
}

 .products-new-section > div[style*="text-align: center"] h3{
 font-size: 16px !important;
}

 .products-new-section > div[style*="text-align: center"] p{
 font-size: 13px !important;
}
}