/* main.css - Cleaned and Deduplicated */

/* ——— CSS Variables ——— */
:root {
  --color-primary: #b30000;      /* Exact AutoZone red */
  --color-secondary: #000000;  /* Black accent */
  --color-bg: #FFFFFF;         /* White background */
  --color-text: #333333;       /* Dark gray text */
  --font-base: 'Work Sans', sans-serif;
}

/* ——— Reset & Base ——— */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* ——— Links ——— */
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ——— Buttons ——— */
.btn {
  display: inline-block;
  padding: 0.5em 1em;
  background: var(--color-primary);
  color: #FFF;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
}
.btn-contact {
  background: var(--color-secondary);
}
.btn-hero {
  margin-top: 1.5rem;
  padding: 0.75rem 2rem;
  background: var(--color-secondary);
  color: #FFF;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.btn-hero:hover {
  transform: translateY(-2px);
}

/* ——— Header & Navigation ——— */
.site-header {
  position: sticky;
  top: 0;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 1em;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.site-header .logo img {
  height: 40px;
  width: auto;
}
.nav-toggle {
  display: none;
}
.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: relative;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  display: block;
  background: #FFF;
  height: 3px;
  border-radius: 3px;
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
}
.nav-toggle-label span { top: 50%; transform: translateY(-50%); }
.nav-toggle-label span::before { top: -8px; }
.nav-toggle-label span::after { top: 8px; }
.nav-toggle:checked + .nav-toggle-label span { background: transparent; }
.nav-toggle:checked + .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
.nav-toggle:checked + .nav-toggle-label span::after  { transform: rotate(-45deg); top: 0; }

/*
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-secondary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
*/

.nav-toggle:checked ~ .site-nav {
  transform: scaleY(1);
}
.site-nav ul {
  list-style: none;
  padding: 1em;
}
.site-nav li + li {
  margin-top: 0.75em;
}
.site-nav a {
  display: block;
  color: #FFF;
  font-size: 1.1rem;
  text-transform: uppercase;
}

/* ——— Container ——— */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}

/* ——— Hero Section ——— */
.hero {
  background: url('../images/hero-banner.jpg') center/cover no-repeat;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #FFF;
  text-align: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.hero-content { position: relative; z-index: 1; }
.hero h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.hero p { margin-top: 0.5rem; font-size: clamp(1rem, 3vw, 1.125rem); }

/* Hero subtitle */
.hero-subtitle {
  font-size: 1.25rem;
  margin-top: 0.5rem;
  opacity: 0.9;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}


/* ——— Scroll‐down Cue ——— */
.scroll-down {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #FFF;
  animation: bounce 2s infinite;
  text-decoration: none;
}

@keyframes bounce {
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 10px); }
}

/* ——— Carousel ——— */
.carousel {
  position: relative;
  overflow: visible;
}
.carousel-container {
  display: flex;
  transition: transform 0.5s ease;
  overflow: hidden;
  position: relative;
}
.slide {
  min-width: 100%;
  position: relative;
}
.slide img { width: 100%; display: block; }
.slide-caption {
  position: absolute;
  bottom: 1em;
  left: 1em;
  background: rgba(0,0,0,0.5);
  color: #FFF;
  padding: 0.5em 1em;
  border-radius: 4px;
}
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #FFF;
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.carousel-prev { left: 0.5em; }
.carousel-next { right: 0.5em; }

/* ——— Carousel Indicators ——— */
.carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.carousel-indicators button {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s;
}
.carousel-indicators button.active {
  opacity: 1;
}

/* ——— Responsive Images ——— */
.img-wrap {
  width: 100%;
  overflow: hidden;
}
.responsive-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ——— Featured Products ——— */
.featured-products {
  background: #F7F7F7;
  padding: 3em 0;
  text-align: center;
}
.featured-products h2 {
  font-size: 1.875rem;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.featured-products h2::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 50px;
  height: 4px;
  background: var(--color-primary);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
}
.grid-item {
  background: #FFF;
  padding: 1em;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}
.grid-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ——— Footer ——— */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: var(--color-secondary);
  color: #DDD;
}
@media (min-width: 768px) {
  .site-footer {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1rem;
  }
}



/* ——— Media Queries ——— */
 
@media (min-width: 768px) {
    
  /* Hide mobile toggle */
  
 /* .nav-toggle-label { display: none; } */
  /* .site-nav { transform: none; position: static;  background: transparent; width: auto; } */
 /* .site-nav ul { display: flex; align-items: center; gap: 2em; padding: 0; } */
 /* .site-nav li + li { margin: 0; } */
}

/* ——— Navigation Desktop & Tablet Override ——— */

@media (min-width: 768px) {
  /* 1) Hide the hamburger toggle icon */
  .nav-toggle-label {
    display: none;
  }

  /* 2) Force the nav back into the header flow */
  .site-nav {
    display: block;        /* ensure it renders */
    transform: none;       /* undo the mobile scaleY */
    position: static;      /* flow with the header */
    background: transparent;
    width: auto;
    z-index: 1000;         /* sit above content */
  }

  /* 3) Lay out the links horizontally */
  .site-nav ul {
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 0;
  }
  .site-nav li + li {
    margin: 0;
  }
}


/* ——— Responsive Breakpoints ——— */

/* Extra Large screens (up to 1440px) */
@media (max-width: 1440px) {
  .container {
    max-width: 1100px;
  }
  .hero {
    height: 50vh;
  }
}

/* Desktop (up to 1024px) */
@media (max-width: 1024px) {
  .container {
    max-width: 960px;
  }
  .featured-products h2 {
    font-size: 1.75rem;
  }
  .hero h1 {
    font-size: 2.25rem;
  }
  .grid {
    gap: 0.75em;
  }
}

/* Tablet (up to 768px) */
@media (max-width: 768px) {
  .container {
    max-width: 720px;
  }
  .hero {
    height: 40vh;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1.125rem;
  }
  .site-footer {
    gap: 0.75rem;
    padding: 1rem;
  }
}

/* Mobile (up to 480px) */
@media (max-width: 480px) {
  .container {
    max-width: 100%;
    padding: 0 0.5em;
  }
  .hero {
    height: 30vh;
  }
  .hero h1 {
    font-size: 1.75rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }
  .site-header {
    padding: 0.5em;
  }
}

/* Small Mobile (up to 320px) */
@media (max-width: 320px) {
  .hero h1 {
    font-size: 1.5rem;
  }
  .btn-hero {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
  }
}


/* ——— Dual Content Blocks (Layout 4) ——— */
.dual-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin: 3em 0;
}
.dual-blocks .block {
  background: #FFF;
  padding: 1.5em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dual-blocks .block h2 {
  margin-bottom: 0.75em;
  font-size: 1.5rem;
  color: var(--color-primary);
}

/* Stack blocks on mobile */
@media (max-width: 768px) {
  .dual-blocks {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------*/

/* ─── Products Page Layout 2: Tabs + 4×2 (mobile) / 4×2 (desktop) Grid ─── */
body.products-page {
  /* sticky footer container */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.products-page > .container {
  flex: 1 0 auto;
}
body.products-page .site-footer {
  flex-shrink: 0;
}

/* filter toggle (mobile only) */
body.products-page .filter-toggle {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.75em 1em;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.5em;
}
/* filter tabs list */
body.products-page .filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;               /* hidden by default (mobile) */
  flex-wrap: wrap;
  gap: 1rem;
}
body.products-page .filter-list.open {
  display: block;              /* shown when you click the toggle */
}
body.products-page .filter-list li {
  padding: 0.5em 0;
  cursor: pointer;
}
body.products-page .filter-list li.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* product grid: mobile-first 2-col */
body.products-page .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}

/* tablet & up: show tabs (hide toggle) and keep 2-col grid */
@media (min-width: 600px) {
  body.products-page .filter-toggle {
    display: none;
  }
  body.products-page .filter-list {
    display: flex !important;
    justify-content: center;
  }
}

/* desktop & up: switch to 4-col grid (2 rows of your 8 items) */
@media (min-width: 1024px) {
  body.products-page .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5em;
  }
}

/* uniform thumbnails */
body.products-page .product-grid .img-wrap {
  height: 180px;    /* lock all thumbs to 180px tall */
  overflow: hidden;
  border-radius: 6px;
}
body.products-page .product-grid .img-wrap img {
  width: auto;
  height: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}


/*-----------------*/

/* ─── Pixel 8a Portrait Overrides (≈393px wide) ─── */
@media only screen 
  and (max-width: 393px) {
  
  /* 1) Tighter container padding */
  .container {
    padding: 0 0.5em;
  }

  /* 2) Shrink hero height so it’s not too tall */
  .hero {
    height: 30vh;
  }

  /* 3) Reduce product thumbnail height */
  .product-grid .img-wrap {
    height: 120px; /* down from 180px */
  }

  /* 4) Smaller font sizes in grid items */
  .product-item .product-name {
    font-size: 0.9rem;
  }
  .product-item .product-price {
    font-size: 0.85rem;
  }

  /* 5) Compact header padding */
  .site-header {
    padding: 0.5em 0.75em;
  }
}

/*----------------------------------*/

/* — Pixel 8a Portrait Overrides — */
@media only screen and (max-width: 393px) {
  /* 1) Shrink hero so filter is visible without scrolling */
  .hero {
    height: 30vh;
  }

  /* 2) Basic filter‐toggle styling (if missing upstream) */
  .filter-toggle {
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.5em;
  }
}

/*---------------------------*/

/* ——— Mobile fix: images + sticky footer ——— */
@media (max-width: 600px) {
  /* 1) Make product images shrink to fit */
  body.products-page .product-grid .img-wrap {
    height: auto;        /* let wrapper size to image */
  }
  body.products-page .product-grid .img-wrap img.responsive-img {
    width: 100%;         /* fill width of wrapper */
    height: auto;        /* maintain aspect ratio */
    object-fit: contain; /* show entire image */
  }

  /* 2) Ensure content doesn’t run under the footer */
  body.products-page > .container {
    padding-bottom: 5rem;  /* roughly footer height + some breathing room */
  }

  /* 3) Pin the footer to the bottom */
  body.products-page .site-footer {
   /* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;        /* float above any content if needed */
  }
}

/*---------------------------*/


/* ——— Mobile Fix: image sizing + footer safe-zone ——— */
@media (max-width: 600px) {
  /* 1) Make product thumbnails truly fluid */
  body.products-page .product-grid .img-wrap {
    max-height: none;      /* unset any fixed height */
    overflow: hidden;      /* keep overflow under control */
  }
  body.products-page .product-grid .img-wrap img.responsive-img {
    width: 100%;           /* fill wrapper width */
    height: auto;          /* maintain aspect ratio */
    object-fit: contain;   /* don’t crop on mobile */
  }

  /* 2) Give the main content a bottom “safe-zone” so it never goes under the fixed footer */
  body.products-page > .container {
    padding-bottom: 5rem;  /* ≈ footer height + breathing room */
  }

  /* 3) Pin footer to bottom of viewport */
  body.products-page .site-footer {
   /* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
}


/*---------------------------*/

/* ——— Mobile Fix: Images & Footer Overlay ——— */
@media (max-width: 600px) {
  /* 1) Make the footer static again so it won’t float over content */
  body.products-page .site-footer {
    position: static;
  }

  /* 2) Give your content room so nothing ever hides behind the footer */
  body.products-page > .container {
    padding-bottom: 5rem; /* adjust this to your footer’s exact height */
  }

  /* 3) Let product thumbnails resize to fit any narrow screen */
  body.products-page .product-grid .img-wrap {
    height: auto;          /* unwrap any fixed height */
  }
  body.products-page .product-item img.responsive-img {
    width: 100%;           /* fill the card width */
    height: auto;          /* keep aspect ratio */
    object-fit: contain;   /* show the entire image */
  }
}

/*---------------------------*/

/* ——— Large Tablet / Small Desktop (900px–1023px): 3-column ——— */
@media (min-width: 900px) and (max-width: 1023px) {
  body.products-page .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/*---------------------------*/

/* ——— Tablet (600px–1023px) adjustments ——— */
@media (min-width: 600px) and (max-width: 1023px) {
  /* 1) Ensure two-column grid */
  body.products-page .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25em;
  }

  /* 2) Contain images */
  body.products-page .product-grid .img-wrap {
    height: 160px;          /* fixed box for uniform cards */
    overflow: hidden;
  }
  body.products-page .product-item img.responsive-img {
    width: auto;            /* let width auto-scale */
    height: 100%;           /* fill that 160px box */
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }

  /* 3) Add side padding so cards don't hit screen edges */
  body.products-page > .container {
    padding: 0 1.5em 3rem;   /* left/right padding, bottom for footer room */
  }

  /* 4) Static footer (no overlap) */
  body.products-page .site-footer {
    position: static;
  }
}


/*---------------------------*/


body.contact-page, /* or .products-page */ 
body.products-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.contact-page > .container,
body.products-page > .container {
  flex: 1 0 auto;        /* fill remaining space */
  /* won’t need fixed positioning at all */
}
.site-footer {
  flex-shrink: 0;
}

body.contact-page > .container,
body.products-page > .container {
  padding-top: 4rem;      /* approx header height */
  /*padding-bottom: 4rem;   /* approx footer height */
}

/* Default: menu hidden */
.site-nav {
  display: none;
}
/* When the toggle is checked, show menu and push content */
.nav-toggle:checked ~ .site-nav {
  display: block;
}
body.nav-open .container {
  margin-top: 200px;  /* height of your expanded menu */
}

.img-wrap img.responsive-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .product-grid .img-wrap {
    max-height: 160px;
  }
  .product-grid .img-wrap img {
    height: 100%; object-fit: cover;
  }
}

/*---------------------------*/

/* ——— Force Desktop/Tablet Nav Visible ———

@media (min-width: 768px) {
  .site-nav {
    display: block !important;
  }
}
 */
 
 /*---------------------------*/
 
 
 /* ——— Mobile Nav Dropdown ——— */
/*@media (max-width: 768px) {
  /* make the header overflow visible so the menu can show outside it */
  /*
  .site-header {
    overflow: visible;
  
  */

  /* keep the nav hidden by default up in the header */
  /*
  .site-nav {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-secondary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
    z-index: 1000;
    
  } 
  
  */
  /* when you tap the hamburger, pop it open */
  /*
  .nav-toggle:checked ~ .site-nav {
    transform: scaleY(1);
    */
 /* }
  
/*}


  /*---------------------------*/
  
  /* ——— Navigation Desktop & Tablet Override ——— */
  
@media (min-width: 768px) {
  /* 1) Hide the hamburger */
  .nav-toggle-label {
    display: none !important;
  }

  /* 2) Force nav back into the header row and fully visible */
  .site-nav {
    display: block !important;           /* make sure it’s rendered */
    transform: none !important;          /* undo any scaleY(0) */
    position: static !important;         /* flow with header */
    background: transparent !important;  /* clear mobile background */
    width: auto !important;
    z-index: 1000 !important;            /* above all content */
  }

  /* 3) Lay out your links horizontally */
  .site-nav ul {
    display: flex !important;
    align-items: center !important;
    gap: 2em !important;
    padding: 0 !important;
    margin: 0;                           /* reset any extra margin */
  }
  .site-nav li + li {
    margin: 0 !important;
  }
}

  /*---------------------------*/
  
  /* ——— Mobile Nav Dropdown Fix ——— */
@media (max-width: 768px) {
  /* 1) Let the header overflow so the menu isn’t clipped */
  .site-header {
    overflow: visible;
  }

  /* 2) Hide the nav by default up under the header */
  .site-nav {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-secondary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  /* 3) When the toggle’s checked, “drop” it down */
  .nav-toggle:checked ~ .site-nav {
    transform: scaleY(1);
  }
}

/*---------------------------*/

/* ——— Products Page Header Fixed ——— */
body.products-page .site-header {
  position: fixed;   /* pin to top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Add top padding to content to avoid overlap */
body.products-page > .container {
  padding-top: calc(0.75em + 1em); /* header height (padding + logo) */
}

/*---------------------------*/

/* ——— Contact Page Header Fixed on All Screens ——— */
body.contact-page .site-header {
  /* replace sticky with fixed */
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* ensure main content sits below the header */
body.contact-page > .container {
  padding-top: 4rem; /* adjust to your header's actual height */
}

/*---------------------------*/