/* Global responsive utilities and breakpoints */
/* Mobile-first styles */
:root{
    --container-padding: 1rem;
}
/* Global responsive utilities and breakpoints */
/* Mobile-first styles */
:root{
    --container-padding: 1rem;
}

/* Make images fluid */
img, .img-fluid{ max-width:100%; height:auto; display:block; }

/* Navbar responsiveness enhancements */
.navbar-brand img{ max-height:48px; width:auto; }
.navbar-nav{ flex-wrap:wrap; }
.navbar-nav .nav-link{ padding: .375rem .6rem; }

@media (max-width: 767.98px){
    .navbar-brand img{ max-height:40px; }
    .navbar-nav{ width:100%; justify-content:center; }
    .navbar-nav .nav-item{ margin: .25rem 0; }
}

/* Footer responsive stacking */
@media (max-width: 767.98px){
    /* Support older footer structure used in templates/footer.html */
    .footer{ text-align:center; }
    .footer .col-lg-4, .footer .col-lg-8{ width:100%; padding:0.5rem 0; }
    .footer .d-flex{ flex-direction:column; gap:.5rem; align-items:center; }
    .footer a{ display:inline-block; padding:.25rem .5rem; }
}
/* Container padding and max widths */
.container, .container-fluid{ box-sizing:border-box; padding-left:var(--container-padding); padding-right:var(--container-padding); margin-left:auto; margin-right:auto; }

/* Navbar brand sizing */
.navbar-brand img{ height:40px; width:auto; }

/* Header improvements (override fixed heights) */
.header{ min-height:420px; padding:3.5rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

.header .paragraph, .header .video, .header .tagline{ width:100%; }

/* Product cards and layout */
.products-showcase .product-card{ width:100%; box-sizing:border-box; }
.products-showcase .product-card img{ max-width:160px; margin-left:auto; margin-right:auto; }

/* Forms: stack horizontally-aligned items on small screens */
@media (max-width:576px){
    .d-flex{ flex-direction:column !important; }
    .w-50{ width:100% !important; }
    .text-end{ text-align:center !important; }
}

/* Tablet and up */
@media (min-width:576px){
    .navbar-brand img{ height:44px; }
    .header{ padding:4.5rem 2rem; }
}

@media (min-width:768px){
    .header{ min-height:480px; padding:6rem 2rem; }
    .header .paragraph{ width:50%; }
    .header .video{ width:63%; }
    .products-showcase .product-card{ max-width:520px; }
}

@media (min-width:992px){
    /* Desktop grid tuning for product showcase */
    .products-showcase .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
    .products-showcase .col-lg-3{ flex:0 0 23%; max-width:23%; }
    .products-showcase .col-lg-6{ flex:0 0 46%; max-width:46%; }
}

/* Footer adjustments */
@media (max-width:576px){
    .footer .d-flex{ flex-direction:column; gap:.5rem; }
    .footer a{ display:inline-block; }
}

/* Utility: ensure buttons are touch-friendly */
.btn{ padding:.6rem 1rem; }