/* ==========================================================================
   MAIN MASTER STYLESHEET (MODULAR CSS ARCHITECTURE)
   ========================================================================== */

/* 1. Base Layer */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');
@import url('./base/animations.css');
@import url('./base/utilities.css');

/* 2. Core Site Styles */
@import url('./style.css');

/* 3. Layout Layer */
@import url('./layout/header.css');
@import url('./layout/footer.css');
@import url('./layout/navigation.css');
@import url('./layout/sidebar.css');
@import url('./layout/grid.css');

/* 4. Component Layer */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/badges.css');
@import url('./components/forms.css');
@import url('./components/modals.css');
@import url('./components/search.css');
@import url('./components/filters.css');
@import url('./components/pagination.css');
@import url('./components/gallery.css');
@import url('./components/carousel.css');

/* 5. Page-Specific Layer */
@import url('./pages/home.css');
@import url('./pages/product-list.css');
@import url('./pages/product-details.css');
@import url('./pages/manufacturing.css');
@import url('./pages/about.css');
@import url('./pages/contact.css');

/* 6. Centralized Responsive Breakpoints Layer */
@import url('./responsive/desktop.css');
@import url('./responsive/tablet.css');
@import url('./responsive/mobile.css');

/* ==========================================================================
   CLIENT OVERRIDES (loaded last, after all @imports — authoritative)
   ========================================================================== */

/* hide per-category product counts (sidebar + category cards) */
.f-opt .f-num,
.filter-option .count,
.cat-card .cat-count,
.ak-category-card .count { display: none !important; }

/* single-image product cards must NOT blank on hover
   (only cross-fade when a real 2nd image exists) */
.pcard-media img.img-b { opacity: 0; }
.pcard-media:not(:has(img.img-b)):hover img.img-a { opacity: 1 !important; }
.pcard-media:has(img.img-b):hover img.img-a { opacity: 0; }
.pcard-media:has(img.img-b):hover img.img-b { opacity: 1; }