/**
 * GLOBAL MOBISTAR — SITE-WIDE BEAUTY & CONSISTENCY
 * Comprehensive polish: typography, spacing, image display, cards, colors
 */

/* ============================================
   TYPOGRAPHY & FONT BASELINE
   ============================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1f2937;
    background: #ffffff;
}

/* ============================================
   LOGO SIZE — CONSISTENT ACROSS ALL PAGES
   ============================================ */
nav img[alt*="Logo"],
nav img[alt*="logo"] {
    height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
    max-height: 40px !important;
}

@media (min-width: 1024px) {
    nav img[alt*="Logo"],
    nav img[alt*="logo"] {
        height: 40px !important;
        max-height: 44px !important;
    }
}

/* Footer logo fix */
footer img[alt*="Logo"],
footer img[alt*="logo"] {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    max-height: 48px !important;
    background: transparent !important;
}

/* ============================================
   NAVIGATION — POLISHED TOP BAR
   ============================================ */
.bg-\[\#FFBF00\] {
    background-color: #FFBF00 !important;
}

/* Sticky nav with clean shadow */
.sticky-nav,
nav.sticky-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ============================================
   PRODUCT CARDS — BEAUTIFUL & CONSISTENT
   ============================================ */

/* Base card style */
.md\:col-span-3 .grid > a,
.products-grid > a {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.md\:col-span-3 .grid > a:hover,
.products-grid > a:hover {
    box-shadow: 0 8px 24px rgba(6, 75, 103, 0.12) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(6, 75, 103, 0.3) !important;
}

/* Card image area */
.md\:col-span-3 .grid > a .aspect-square,
.products-grid > a .aspect-square {
    background: #f8fafc !important;
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
}

/* Product images — crisp, full, no opacity fade */
.md\:col-span-3 .grid > a .aspect-square img,
.products-grid > a .aspect-square img,
.aspect-square img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    transition: transform 0.35s ease !important;
    padding: 6px !important;
}

.md\:col-span-3 .grid > a:hover .aspect-square img,
.products-grid > a:hover .aspect-square img {
    transform: scale(1.06) !important;
}

/* Card info section */
.md\:col-span-3 .grid > a .p-3,
.products-grid > a .p-3 {
    padding: 10px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
}

/* Product name */
.md\:col-span-3 .grid h3,
.products-grid h3 {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

@media (min-width: 1024px) {
    .md\:col-span-3 .grid h3,
    .products-grid h3 {
        font-size: 0.875rem !important;
    }
}

/* Price display */
.md\:col-span-3 .grid span.text-\[\#064B67\],
.products-grid span.text-\[\#064B67\],
.md\:col-span-3 .grid span[class*="text-[#064"],
.products-grid span[class*="text-[#064"] {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #064b67 !important;
    letter-spacing: -0.01em !important;
}

/* Add to Cart button */
.md\:col-span-3 .grid button,
.products-grid button {
    border: 1px solid #f97316 !important;
    color: #1c1917 !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 7px 8px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    cursor: pointer !important;
    width: 100% !important;
}

.md\:col-span-3 .grid button:hover,
.products-grid button:hover {
    background: #f97316 !important;
    color: #ffffff !important;
}

/* Border separator above price */
.md\:col-span-3 .grid .border-b,
.products-grid .border-b {
    border-color: #e2e8f0 !important;
    padding-bottom: 6px !important;
    margin-bottom: 2px !important;
}

/* ============================================
   CATEGORY HERO BANNER — POLISHED
   ============================================ */
.relative.mb-8 {
    margin-bottom: 2rem !important;
}

/* Category header card */
.flex.flex-col.md\:flex-row.justify-between.items-center.py-4.md\:py-12 {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
    border: 1px solid rgba(6, 75, 103, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(6, 75, 103, 0.06) !important;
}

/* Category heading */
.flex.flex-col.md\:flex-row.justify-between.items-center.py-4.md\:py-12 h1 {
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
}

/* ============================================
   FILTER SIDEBAR — CLEAN PROFESSIONAL LOOK
   ============================================ */
.hidden.md\:block.md\:col-span-1.bg-white.rounded-lg {
    border: 1px solid rgba(6, 75, 103, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    position: sticky !important;
    top: 80px !important;
}

/* Filter input fields */
.filter-section input[type="number"] {
    border-radius: 6px !important;
}

.filter-section select {
    border-radius: 6px !important;
}

/* ============================================
   PAGINATION — CLEAN & ACCESSIBLE
   ============================================ */
.mt-8.flex.justify-center.space-x-2 {
    gap: 6px !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.mt-8.flex.justify-center.space-x-2 button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease !important;
}

.mt-8.flex.justify-center.space-x-2 button:hover:not(:disabled) {
    border-color: #064b67 !important;
    color: #064b67 !important;
    background: #f0f9ff !important;
}

/* Active page button */
.mt-8.flex.justify-center.space-x-2 button.bg-\[\#064b67\] {
    background: #064b67 !important;
    color: white !important;
    border-color: #064b67 !important;
    font-weight: 700 !important;
}

/* ============================================
   HOMEPAGE HERO — POLISHED
   ============================================ */
.hero-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Hero navigation dots */
.absolute.bottom-4 button,
.absolute.bottom-6 button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.absolute.bottom-4 button.bg-white,
.absolute.bottom-6 button.bg-white {
    width: 24px !important;
    border-radius: 4px !important;
}

/* ============================================
   HOMEPAGE CATEGORY ICONS — POLISHED
   ============================================ */
.grid.grid-cols-4 a,
.grid.grid-cols-6 a,
.grid.grid-cols-8 a {
    text-decoration: none !important;
}

.grid.grid-cols-4 a .w-16,
.grid.grid-cols-4 a .md\:w-32,
.grid.grid-cols-6 a .w-16,
.grid.grid-cols-6 a .md\:w-32 {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    border: 1px solid #e5e7eb !important;
}

.grid.grid-cols-4 a:hover .w-16,
.grid.grid-cols-4 a:hover .md\:w-32,
.grid.grid-cols-6 a:hover .w-16,
.grid.grid-cols-6 a:hover .md\:w-32 {
    box-shadow: 0 6px 16px rgba(6, 75, 103, 0.15) !important;
    transform: translateY(-2px) !important;
}

.grid.grid-cols-4 a span.font-medium,
.grid.grid-cols-6 a span.font-medium {
    font-size: 0.75rem !important;
    color: #374151 !important;
    transition: color 0.2s ease !important;
}

.grid.grid-cols-4 a:hover span.font-medium,
.grid.grid-cols-6 a:hover span.font-medium {
    color: #064b67 !important;
}

/* ============================================
   PROMO BANNERS — POLISHED
   ============================================ */
.aspect-\[2\/3\] {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.aspect-\[2\/3\] img {
    transition: transform 0.4s ease !important;
}

.aspect-\[2\/3\]:hover img {
    transform: scale(1.03) !important;
}

/* ============================================
   TESTIMONIAL CARDS — POLISHED
   ============================================ */
.flex-none.w-80 .bg-white {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.flex-none.w-80:hover .bg-white {
    box-shadow: 0 8px 24px rgba(6, 75, 103, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   PRODUCT DETAIL PAGE — POLISHED
   ============================================ */
.max-w-6xl .rounded-lg.overflow-hidden.relative.shadow-sm {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

.max-w-6xl .rounded-lg.overflow-hidden img {
    max-height: 480px !important;
    object-fit: contain !important;
    padding: 12px !important;
}

/* Add to Cart (product detail) */
.max-w-6xl button.bg-\[\#064B67\] {
    background: #064b67 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 12px 20px !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.max-w-6xl button.bg-\[\#064B67\]:hover {
    background: #053c52 !important;
    transform: translateY(-1px) !important;
}

/* Product description box */
.bg-gray-50.rounded-lg.p-5 {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

/* Delivery info */
.border.border-dashed.rounded-lg.p-5 {
    border-radius: 12px !important;
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

/* ============================================
   FOOTER — POLISHED
   ============================================ */
footer.relative.bg-\[\#064b67\] {
    background: #053c52 !important;
    background: linear-gradient(180deg, #064b67 0%, #042f40 100%) !important;
}

footer a:hover {
    text-decoration: none !important;
}

/* Footer category/support links */
footer ul li a {
    font-size: 0.875rem !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

footer ul li a:hover {
    padding-left: 4px !important;
}

/* Footer contact items */
footer .space-y-3 > div {
    transition: opacity 0.2s ease !important;
}

footer .space-y-3 > div:hover {
    opacity: 0.85 !important;
}

/* ============================================
   SEARCH INPUT — POLISHED
   ============================================ */
#desktop-search {
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    transition: box-shadow 0.2s ease !important;
}

#desktop-search:focus {
    box-shadow: 0 0 0 3px rgba(255, 191, 0, 0.3) !important;
}

/* ============================================
   "ADD TO CART" CONSISTENT ACROSS PAGES
   ============================================ */
/* Homepage product add to cart */
.products-grid button {
    border-radius: 6px !important;
}

/* ============================================
   DELIVERY THRESHOLD BADGE IN NAV
   ============================================ */
.bg-\[\#FFBF00\] h3 {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1c1917 !important;
}

/* ============================================
   BREADCRUMB NAV
   ============================================ */
.max-w-6xl nav.flex.items-center {
    margin-bottom: 1.5rem !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

/* ============================================
   MOBILE BOTTOM NAV — POLISHED
   ============================================ */
nav.md\:hidden.fixed {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06) !important;
}

/* ============================================
   IMAGE FALLBACK
   ============================================ */
img:not([src]),
img[src=""] {
    opacity: 0 !important;
}

/* Smooth lazy loading */
img[loading="lazy"] {
    transition: opacity 0.3s ease !important;
}

/* ============================================
   STAFF CAROUSEL — POLISHED
   ============================================ */
.animate-scroll img,
.animate-scroll-slow img {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    object-fit: cover !important;
}

/* ============================================
   BRAND PARTNERS MARQUEE — POLISHED
   ============================================ */
.animate-marquee img {
    filter: grayscale(20%) !important;
    transition: filter 0.3s ease !important;
    border-radius: 4px !important;
}

.animate-marquee > div:hover img {
    filter: grayscale(0%) !important;
}

/* ============================================
   HOMEPAGE PRODUCT SECTION HEADER
   ============================================ */
.products-grid {
    margin-top: 1rem !important;
}

section.w-full.py-8 > .products-grid {
    padding: 0 0.5rem !important;
}

/* ============================================
   "SHOW X OF Y" COUNTER STYLE
   ============================================ */
.hidden.md\:flex.mt-4 span.font-semibold {
    color: #064b67 !important;
    font-weight: 700 !important;
}

/* ============================================
   FORM INPUTS — CONSISTENT STYLE
   ============================================ */
input[type="number"],
input[type="text"],
input[type="email"],
select {
    border-radius: 6px !important;
    border-color: #d1d5db !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
select:focus {
    border-color: #064b67 !important;
    box-shadow: 0 0 0 2px rgba(6, 75, 103, 0.15) !important;
    outline: none !important;
}

/* ============================================
   LOADING SKELETON ANIMATION
   ============================================ */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   SECTION SPACING CONSISTENCY
   ============================================ */
section.py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

section.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* ============================================
   SCROLL BEHAVIOUR
   ============================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================
   SPECIAL OFFER LINK
   ============================================ */
a.text-pink-400.font-extrabold {
    color: #ec4899 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease !important;
}

a.text-pink-400.font-extrabold:hover {
    color: #db2777 !important;
}

/* ============================================
   MOBILE PRODUCT IMAGE FULL DISPLAY FIX
   ============================================ */
@media (max-width: 767px) {
    .aspect-square img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 4px !important;
    }

    /* Product card padding on mobile */
    .md\:col-span-3 .grid > a .p-3 {
        padding: 8px 10px 10px !important;
    }

    /* Smaller card name on mobile */
    .md\:col-span-3 .grid h3 {
        font-size: 0.75rem !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* ============================================
   PRODUCT DETAIL — SIMILAR PRODUCTS CAROUSEL
   ============================================ */
.hide-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
}

.flex-none.w-56 {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.flex-none.w-56:hover {
    box-shadow: 0 6px 18px rgba(6, 75, 103, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   SCROLL-UP ANIMATION FOR CATEGORY BANNER DOTS
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.relative.mb-8 > div:last-child {
    animation: fadeInUp 0.45s ease forwards !important;
}

/* ============================================
   ACCESSIBILITY — FOCUS RINGS
   ============================================ */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #FFBF00 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}


/* ============================================
   BROKEN IMAGE HANDLING
   Hide the ugly browser broken-image icon
   JS replaces src with fallback on error
   ============================================ */
img[src*="/products/all/"] {
    background: #f8fafc;
    min-height: 40px;
}

/* Placeholder shimmer while loading */
img[loading="lazy"]:not([src*="logo"]):not([src*="branding"]) {
    background-color: #f1f5f9;
}

/* ============================================
   PRODUCT CARD UNIFORM HEIGHT IMPROVEMENTS
   ============================================ */

/* Ensure all product cards in grids have same height */
.products-grid > a,
.md\:col-span-3 .grid > a {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.products-grid > a .p-3,
.md\:col-span-3 .grid > a .p-3 {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Ensure price is always at the same position */
.products-grid > a .p-3 > div:nth-child(2),
.md\:col-span-3 .grid > a .p-3 > div:nth-child(2) {
    margin-top: auto !important;
}

/* ============================================
   HOMEPAGE HERO SIDE PANEL (Cement)
   ============================================ */
.hidden.lg\:flex.flex-shrink-0 {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.hidden.lg\:flex.flex-shrink-0 img {
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.hidden.lg\:flex.flex-shrink-0:hover img {
    transform: scale(1.03) !important;
}

/* ============================================
   CATEGORY HEADER SECTION BORDER
   ============================================ */
.relative.mb-8 .absolute.inset-0.opacity-30 {
    opacity: 0.12 !important;
}

/* ============================================
   MOBILE CATEGORY ICONS IMPROVEMENT
   ============================================ */
@media (max-width: 767px) {
    .grid.grid-cols-4 a .w-16,
    .grid.grid-cols-4 a .h-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
        border-radius: 10px !important;
    }
    
    .grid.grid-cols-4 a > div:last-child span {
        font-size: 0.6875rem !important;
        line-height: 1.3 !important;
    }
}

/* ============================================
   SECTION HEADINGS POLISH
   ============================================ */
section h2.text-3xl,
section h2.text-2xl {
    letter-spacing: -0.02em !important;
}

/* "What Our Customers Say" heading */
.py-16 h2 {
    color: #064b67 !important;
}

/* ============================================
   PRODUCT INFO SECTION POLISH
   ============================================ */
.py-12 .text-gray-700 {
    line-height: 1.8 !important;
    color: #374151 !important;
}

/* ============================================
   BUILDING MATERIALS SEO SECTION STYLING
   ============================================ */
.bg-gray-50.py-12 .prose {
    max-width: none !important;
}

.bg-gray-50.py-12 h2,
.bg-gray-50.py-12 h3 {
    color: #064b67 !important;
}

.bg-gray-50.py-12 .flex.justify-between.items-center.py-2.border-b {
    padding: 10px 0 !important;
    border-color: #e2e8f0 !important;
}

.bg-gray-50.py-12 .font-semibold.text-\[\#064b67\] {
    font-weight: 700 !important;
    color: #064b67 !important;
}

/* ============================================
   AUTH PAGES POLISH
   ============================================ */
.auth-container, 
form[action*="login"],
form[action*="register"] {
    box-shadow: 0 8px 32px rgba(6, 75, 103, 0.1) !important;
    border-radius: 16px !important;
}

/* ============================================
   BULK ORDER PAGE POLISH
   ============================================ */
.bulk-order-form {
    background: #f8fafc !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   TRACKING PAGE POLISH
   ============================================ */
.tracking-container {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-radius: 16px !important;
}

/* ============================================
   SCROLL BAR HIDE (Testimonials + Similar Products)
   ============================================ */
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
}

.no-scrollbar,
.hide-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ============================================
   ABOUT PAGE POLISH
   ============================================ */
.about-hero {
    background: linear-gradient(135deg, #064b67 0%, #0a7a9a 100%) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* ============================================
   QUANTITY INPUT STYLING
   ============================================ */
input#quantity,
.global-quantity-input {
    border-color: #d1d5db !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #064b67 !important;
}

/* Quantity +/- buttons */
.flex.border.rounded-lg.shadow-sm button {
    transition: background 0.15s ease !important;
}

.flex.border.rounded-lg.shadow-sm button:not(:disabled):hover {
    background: #f0f9ff !important;
    color: #064b67 !important;
}

/* ============================================
   FILTER SIDEBAR — STICKY POSITION FIX
   ============================================ */
@media (min-width: 768px) {
    .hidden.md\:block.md\:col-span-1 {
        position: sticky !important;
        top: 80px !important;
        align-self: flex-start !important;
    }
}

/* ============================================
   PAINTS CATEGORY — PRODUCT IMAGE PADDING
   (Products from Firebase CDN use object-contain)
   ============================================ */
.md\:col-span-3 .grid > a .aspect-square img[src*="storage.googleapis"],
.md\:col-span-3 .grid > a .aspect-square img[src*="firebasestorage"],
.md\:col-span-3 .grid > a .aspect-square img[src*="/products/all/"] {
    object-fit: contain !important;
    padding: 4px !important;
    background: #ffffff !important;
}


/* ============================================
   PRODUCT CARD IMAGE PADDING — PREMIUM LOOK
   Images get breathing room, never touch edges
   ============================================ */
.aspect-square img.object-contain {
    padding: 6px !important;
    background: #ffffff !important;
}

/* Category page product images */
.md\:col-span-3 .grid > a .aspect-square img,
.products-grid > a .aspect-square img {
    padding: 6px !important;
    object-fit: contain !important;
    background: #ffffff !important;
}

/* Hover scale on product images */
.md\:col-span-3 .grid > a:hover .aspect-square img,
.products-grid > a:hover .aspect-square img {
    transform: scale(1.06) !important;
}

/* ============================================
   HOMEPAGE FEATURED PRODUCTS SECTION HEADING
   ============================================ */
.products-grid {
    position: relative !important;
}

/* Add a subtle section header before featured products */
section.w-full.py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

/* ============================================
   TRUST STATS BAR STYLING
   ============================================ */
section.w-full.bg-\[\#064b67\].py-6 {
    box-shadow: 0 4px 20px rgba(6, 75, 103, 0.25) !important;
}

/* ============================================
   HOMEPAGE CATEGORY ICONS — CONSISTENT SIZING
   ============================================ */
.grid.grid-cols-4 a > div:first-child,
.grid.grid-cols-6 a > div:first-child,
.grid.grid-cols-8 a > div:first-child {
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    flex-shrink: 0 !important;
}

@media (min-width: 768px) {
    .grid.grid-cols-4 a > div:first-child,
    .grid.grid-cols-6 a > div:first-child,
    .grid.grid-cols-8 a > div:first-child {
        width: 7rem !important;
        height: 7rem !important;
    }
}

.grid.grid-cols-4 a:hover > div:first-child,
.grid.grid-cols-6 a:hover > div:first-child {
    box-shadow: 0 6px 18px rgba(6, 75, 103, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   PRODUCT DETAIL PAGE — ELEGANT IMPROVEMENTS
   ============================================ */

/* Product title */
.max-w-6xl h1.text-lg,
.max-w-6xl h1.text-xl,
.max-w-6xl h1.text-2xl {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

/* Price display */
.max-w-6xl span.text-lg.font-bold,
.max-w-6xl span.text-xl.font-bold {
    font-size: 1.625rem !important;
    letter-spacing: -0.02em !important;
}

/* Brand/SKU info */
.max-w-6xl .grid.grid-cols-2.gap-2 {
    background: #f8fafc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   MOBILE NAV BOTTOM — ACTIVE STATE POLISH
   ============================================ */
nav.md\:hidden.fixed button,
nav.md\:hidden.fixed a {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

nav.md\:hidden.fixed .text-\[\#064b67\] {
    position: relative !important;
}

nav.md\:hidden.fixed .text-\[\#064b67\]::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #064b67 !important;
    border-radius: 50% !important;
}

/* ============================================
   ABOUT PAGE — PROSE IMPROVEMENTS
   ============================================ */
.prose p {
    line-height: 1.8 !important;
    color: #374151 !important;
}

.prose h2 {
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.prose h3 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* ============================================
   FILTER BUTTON MOBILE IMPROVEMENT
   ============================================ */
.md\:hidden.mb-4 button {
    border-radius: 10px !important;
    border: 1px solid rgba(6, 75, 103, 0.3) !important;
    color: #064b67 !important;
    font-weight: 600 !important;
    background: white !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* ============================================
   WHATSAPP CTA BUTTON (if present)
   ============================================ */
a[href*="wa.me"],
a[href*="whatsapp"] {
    background: #25D366 !important;
    color: white !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease !important;
}

a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover {
    background: #128C7E !important;
}

/* ============================================
   GLOBAL LINK TRANSITIONS
   ============================================ */
a {
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

/* ============================================
   CATEGORY HERO DOT PATTERN — LIGHTER
   ============================================ */
[style*="radial-gradient"] {
    opacity: 0.12 !important;
}

/* ============================================
   PRODUCT COUNT BADGE 
   ============================================ */
.hidden.md\:flex.mt-4.md\:mt-0.text-sm.text-gray-500 {
    background: #f0f9ff !important;
    border: 1px solid rgba(6, 75, 103, 0.15) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.8125rem !important;
}

/* ============================================
   BULK ORDER PAGE CTA IMPROVEMENTS
   ============================================ */
form button[type="submit"] {
    background: #064b67 !important;
    color: white !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    letter-spacing: 0.01em !important;
}

form button[type="submit"]:hover {
    background: #053c52 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(6, 75, 103, 0.25) !important;
}

/* ============================================
   404 / ERROR PAGE STYLING
   ============================================ */
.error-page,
[class*="not-found"],
[class*="error-container"] {
    text-align: center !important;
    padding: 4rem 2rem !important;
}

/* ============================================
   REMOVE BLACK ANNOUNCMENT BAR
   Hides the original "text-blue-700 bg-black" empty div
   ============================================ */
.text-blue-700.bg-black {
    display: none !important;
}

/* ============================================
   PRINT STYLES — CLEAN PRINT VIEW
   ============================================ */
@media print {
    nav, footer, .md\:hidden.fixed, .sticky-nav {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
    }
    
    .max-w-6xl, .max-w-screen-2xl {
        max-width: 100% !important;
    }
}


/* ============================================
   BROKEN IMAGE HIDING — CLEAN, NO LOGO
   ============================================ */

/* When an image fails to load, it's hidden by JS.
   The .img-placeholder div shown instead */
.img-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #cbd5e1 !important;
    font-size: 2rem !important;
    border-radius: inherit !important;
}

/* If a product card has no visible image at all, hide it */
.aspect-square:empty,
.aspect-square:has(> .img-placeholder:only-child) {
    background: #f8fafc !important;
}

/* ============================================
   HOMEPAGE RIGHT PANEL — BEAUTIFUL CSS CARDS
   ============================================ */

/* Top bulk order card hover */
.hidden.lg\:flex.flex-shrink-0 a:first-child:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(6, 75, 103, 0.3) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.hidden.lg\:flex.flex-shrink-0 a:first-child {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Mini cards hover */
.hidden.lg\:flex.flex-shrink-0 .flex.gap-2 a:hover {
    transform: translateY(-2px) scale(1.02) !important;
    transition: transform 0.2s ease !important;
}

.hidden.lg\:flex.flex-shrink-0 .flex.gap-2 a {
    transition: transform 0.2s ease !important;
}


/* ============================================
   HOMEPAGE RIGHT PANEL — ADVANCED CARD STYLES
   ============================================ */

/* Top bulk order CTA card */
.hidden.lg\:flex.flex-shrink-0 > div > a:first-child {
    display: block !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.hidden.lg\:flex.flex-shrink-0 > div > a:first-child:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 40px rgba(6, 75, 103, 0.35) !important;
}

/* Bottom mini cards */
.hidden.lg\:flex.flex-shrink-0 > div > .flex.gap-2 > a {
    display: block !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.hidden.lg\:flex.flex-shrink-0 > div > .flex.gap-2 > a:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   FEATURED PRODUCTS SECTION HEADING
   ============================================ */
.max-w-screen-xl.mx-auto.px-4.pt-2 h2 {
    position: relative !important;
    display: inline-block !important;
}

.max-w-screen-xl.mx-auto.px-4.pt-2 h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 40px !important;
    height: 3px !important;
    background: #FFBF00 !important;
    border-radius: 2px !important;
}

/* ============================================
   TESTIMONIAL CARDS — POLISHED WITH STARS
   ============================================ */
.flex-none.w-80 .bg-white {
    border-radius: 16px !important;
    padding: 20px !important;
}

.flex-none.w-80 .bg-white p.text-gray-700 {
    font-style: italic !important;
    line-height: 1.7 !important;
}

.flex-none.w-80 .bg-white p.font-semibold {
    font-weight: 700 !important;
    color: #064b67 !important;
}

/* Star ratings color */
.flex-none.w-80 span[style*="FFBF00"] {
    letter-spacing: 2px !important;
}

/* ============================================
   CATEGORY PAGE SEO BOTTOM SECTION
   ============================================ */
.bg-gray-50.py-12 .prose h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
}

.bg-gray-50.py-12 .prose h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #064b67 !important;
    margin-bottom: 0.75rem !important;
    border-bottom: 2px solid #FFBF00 !important;
    padding-bottom: 4px !important;
    display: inline-block !important;
}

.bg-gray-50.py-12 .prose li {
    color: #4b5563 !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
}

.bg-gray-50.py-12 .prose p.text-sm {
    background: #f0f9ff !important;
    border: 1px solid rgba(6, 75, 103, 0.15) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border-left: 3px solid #064b67 !important;
}

/* ============================================
   HOMEPAGE CATEGORY ICONS SECTION HEADING
   ============================================ */
.py-10 .max-w-screen-4xl {
    position: relative !important;
}

/* ============================================
   "VIEW ALL" LINK STYLE
   ============================================ */
a.hidden.md\:flex.items-center.gap-1 {
    padding: 6px 12px !important;
    border: 1px solid rgba(6, 75, 103, 0.2) !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
}

a.hidden.md\:flex.items-center.gap-1:hover {
    background: #064b67 !important;
    color: white !important;
    border-color: #064b67 !important;
}

a.hidden.md\:flex.items-center.gap-1:hover svg {
    stroke: white !important;
}

/* ============================================
   FINAL CARD BORDER IMPROVEMENT
   All product cards get a slightly warmer border
   ============================================ */
.md\:col-span-3 .grid > a,
.products-grid > a {
    border-color: #e8edf2 !important;
}

.md\:col-span-3 .grid > a:hover,
.products-grid > a:hover {
    border-color: rgba(6, 75, 103, 0.25) !important;
}

/* ============================================
   PRODUCT CARD ADD TO CART BUTTON FINAL POLISH
   ============================================ */
.md\:col-span-3 .grid button,
.products-grid button {
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.md\:col-span-3 .grid button:hover,
.products-grid button:hover {
    background: #f97316 !important;
    color: white !important;
    border-color: #f97316 !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important;
}