@import url('avenir.css');

:root {
  /* Typography */
  --font-family-base: 'AvenirNext', sans-serif;
  --line-height-base: 1.6;

  /* Font sizes (rem) */
  --font-size-xs: 0.75rem;   /* 12px  */
  --font-size-sm: 0.875rem;  /* 14px  */
  --font-size-base: 1rem;    /* 16px  */
  --font-size-md: 1.125rem;  /* 18px  */
  --font-size-lg: 1.25rem;   /* 20px  */
  --font-size-xl: 1.5rem;    /* 24px  */
  --font-size-2xl: 2rem;     /* 32px  */
  --font-size-3xl: 2.5rem;     /* 40px  */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;


  /* Colors */
  --color-bg: #E9ECF0;
  --color-bg-start: #FCC020;
  --color-bg-mid: #FFE605;
  --color-bg-end: #E3841E;
  --color-ske-start: #e1a910;
  --color-ske-mid: #e7ca0a;
  --color-ske-end: #c46e11;
  --color-header-bg: #0A1521;
  --color-text: #000000;
  --color-white: #ffffff;
  --color-white-trans: #ffffff33;
  --color-border-header: #C1BDBD;
  --color-bg-light: #DBE0E7;
  --color-hero-start: #29B1D7;
  --color-hero-end: #3E29E2;
  --color-accent: #515151;
  --color-accent-hover: #2c2c2c;
  --color-border: #000000;          /* used for generic .ccc borders */
  --color-border-soft: #ADB7C4;  /* slightly different border color */
  --color-border-light: #dadee4; /* for .shirt-item and such */
  --color-gray-light: #D8D8D8;
  --color-text-dark: #222222;
  --color-text-muted: #555555;
  --color-bg-about: #F3F3F3;
  --color-bg-footer: #000000;
  --color-amzn-btn: #000000;
  
  /* Spacing (1rem = 16px) */
  --spacing-xxs: 0.25rem;   /* 4px  */
  --spacing-xs: 0.5rem;     /* 8px  */
  --spacing-sm: 0.75rem;    /* 12px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-xxl: 2.5rem;  
  --spacing-3xl: 3rem;  
  --spacing-4xl: 3.5rem; 
  --spacing-5xl: 4rem;    /* 40px */

  /* Common Border-Radius */
  --radius-sm: 0.25rem;   /* 4px  */
  --radius-md: 0.5rem;    /* 8px  */
  --radius-lg: 1.5rem;    /* 24px */
  --radius-xl: 2rem;      /* 32px */

  /* Specific Sizes (rarely re-used, but you can still define them) */
  --logo-width: 42px;   /* 185px / 16 */
  --logo-height: 48px;   /* 25px / 16 */
  --filter-panel-width: 20.3125rem; /* 325px / 16 */
  --checkbox-size: 1.125rem;  /* 18px / 16 */
  --shades-container-max-height: 16.1875rem; /* 259px / 16 */
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  background: linear-gradient(90deg, var(--color-bg-start) 0%, var(--color-bg-mid) 33%, var(--color-bg-end) 100%);
  color: var(--color-text);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-medium)
}

/* Containers for consistent max-width */
.container {
  /* width: 90%;
  max-width: 1200px; */
  margin: 0 auto;
}

/* Header */
header {
  background-color: var(--color-header-bg);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-xl); /* 0.75rem 2rem */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 999;
  gap: var(--spacing-xxl); /* 40px => 2.5rem */
  border-bottom: 1px solid var(--color-white);
}

.search-section {
  width: 100%;
}

.search-section input {
  width: 80%;
  height: 40px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm); /* 16px => 1rem */
  font-weight: var(--font-weight-bold);
  border: none;
  color: var(--color-text);
  padding: var(--spacing-xs) var(--spacing-xxl); /* 8px 16px => 0.5rem 1rem */
  border-radius: var(--radius-sm);  /* 24px => 1.5rem */
  background-color: var(--color-white);
}

.logo-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xxl);
  width: 100%;
}

.search-section svg {
  position: absolute;
  top: 31px;
  left: 128px;
}

header nav a{
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-color-white);
}

.logo img {
  width: var(--logo-width);   /* 185px => 11.5625rem */
  height: var(--logo-height); /* 25px => 1.5625rem */
  margin-top: 0.3125rem;      /* 5px => 0.3125rem */
}

nav {
  display: flex;
  gap: var(--spacing-lg); /* 1.5rem */
}

nav a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: opacity 0.3s ease;
}

nav a:hover {
  opacity: 0.7;
}

/* Skeleton loader styles */
.skeleton {
  background: linear-gradient(90deg, var(--color-ske-start) 25%, var(--color-ske-mid) 50%, var(--color-ske-end) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
}

@keyframes skeleton-loading {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.skeleton-card {
  width: 100%;
  aspect-ratio: 3 / 5;
  border-radius: 4px;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1; 
  border-radius: 4px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
}


/* Hero Section */
.hero {
  background: url(../img/hero_background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
  padding: var(--spacing-md); /* 2rem */
  text-align: center;
  /* margin: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);  */
  /* border-radius: var(--radius-sm);  */
  text-transform: uppercase;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
}

.hero-container {
  margin: 0 auto;
}

.hero-container .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.hero h1 {
  font-size: var(--font-size-3xl); /* 2rem */
  font-weight: var(--font-weight-black);
}

.hero p {
  font-size: 1.1rem; /* kept as is for slight difference from base (optional) */
  line-height: 1.4;
}

.hero.home {
padding: 0;
}

.hero.home .hero-container {
  display: flex;
  flex-direction: row;
  text-align: left;
  padding: var(--spacing-4xl) var(--spacing-5xl);
  justify-content: space-between;
  align-items: center;
}

.hero.home h1 {
  font-size: var(--font-size-3xl);
}

.hero.home p {
  font-size: var(--font-size-md); /* kept as is for slight difference from base (optional) */
  font-weight: var(--font-weight-bold);
  text-transform: none;
}

.hero.home a {
  cursor: pointer;
  color: var(--color-white);
  text-decoration: none;
}

.banner-btn {
  color: var(--color-white);
  text-transform: uppercase;
  border: 1px solid var(--color-white);
  height: 40px;
  width: 140px;
  text-decoration: none;
  font-size: var(--font-size-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--font-weight-black);
}

.hero.home .hero-container:hover .banner-btn, .homepage-banners a:hover .banner-btn {
  background-color: var(--color-white-trans);
}

.homepage-banners {
  display:flex;
  flex-direction: row;
  margin: var(--spacing-xl);
  flex: 1;
  gap: var(--spacing-xl);
}

.homepage-banners a {
  font-family: var(--font-family-base);
  color: var(--color-white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-sm);
  width: 50%;
  height: 300px;
  /* justify-content: center; */
  align-items: center;
  display: flex;
  text-decoration: none;
}

.homepage-banners a h2{
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black) !important;
  text-transform: uppercase;
}

.homepage-banners .food {
  background: url(../img/food_banner.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.homepage-banners .holiday {
  background: url(../img/holiday_banner.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.homepage-banners a .banner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.featured-categories {
  margin: var(--spacing-xl);
}

.featured-categories .container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--spacing-md);
}

.subcategory-section {
  margin-bottom: var(--spacing-lg);
}

.subcategory-section h3 {
  margin-bottom: var(--spacing-md);
}

.category-section h2 {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-2xl);
  text-transform: uppercase;
  margin: var(--spacing-xl);
}

.featured-categories h3 {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xl);
  text-transform: uppercase;
}

.featured-categories a {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  padding: var(--spacing-md);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-border);
  text-align: center;
}

.featured-categories a:hover {
  background-color: var(--color-border-header);
}

.featured-products {
  margin: var(--spacing-xl);
}

.featured-products .shirt-grid
{
  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
}

.featured-products .container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.featured-products h3 {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xl);
  text-transform: uppercase;
}


#breadcrumb {
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
}

#breadcrumb a {
  text-decoration: none;
  color: var(--color-hero-end);
}

/* NEW LAYOUT WRAPPER FOR FILTER & PRODUCTS */
.product-section {
  display: flex;
  gap: var(--spacing-xl); /* 2rem */
  margin-bottom: var(--spacing-xl); /* 2rem */
  padding: 0 var(--spacing-xl);
}

/* Side Filter Panel */
.filter-panel {
  background-color: var(--color-bg-light);
  padding: var(--spacing-md); /* 1rem */
  border-radius: var(--radius-sm); /* 8px => 0.5rem */
  border: 1px solid var(--color-border);
  flex: 0 0 var(--filter-panel-width); /* 325px => 20.3125rem */
  height: 100%;
}

.filter-panel h3 {
  margin-bottom: var(--spacing-md); /* 1rem */
  font-size: var(--font-size-xl); /* 20px => 1.25rem */
  text-transform: uppercase;
  font-weight: var(--font-weight-black);
}

#selected-filters-container {
  margin-bottom: var(--spacing-md); /* 1rem */
}

.filter-container {
  background-color: var(--color-white);
  border-radius: var(--radius-sm); /* 8px => 0.5rem */
  padding: var(--spacing-xs); /* 8px => 0.5rem */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: var(--spacing-lg); /* 24px => 1.5rem */
}

.filter-container .filter-name {
  width: 100%;
  margin-bottom: 0.75rem; /* 12px => var(--spacing-sm) if you want consistency */
  font-size: var(--font-size-md); /* 18px => 1.125rem */
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
}

.filter-checkbox {
  width: var(--checkbox-size);  /* 18px => 1.125rem */
  height: var(--checkbox-size); /* 18px => 1.125rem */
}

/* Stacked checkboxes (instead of wrapping in a row) */
.checkboxes-container {
  max-height: var(--shades-container-max-height); /* 259px => 16.1875rem */
  overflow-y: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}

.checkboxes-container.expanded {
  overflow-y: auto;
}

/* 'See More' button */
.see-more-btn {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  margin-top: var(--spacing-md); /* 1rem */
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); /* 4px => 0.25rem */
  padding: 0.375rem 0.75rem; /* 6px 12px => 0.375rem 0.75rem */
  cursor: pointer;
  font-size: var(--font-size-sm); /* 14px => 0.875rem */
}

.see-more-btn:hover {
  background-color: #ccc;
}

/* Each label is a "row" */
label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* 12px => 0.75rem */
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0;
  padding: 0.625rem var(--spacing-xs); /* 10px 8px => 0.625rem 0.5rem */
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: var(--font-size-sm); /* 14px => 0.875rem */
  font-weight: var(--font-weight-bold);
}

label:hover {
  background: #eee;
}

.color-chip {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px => 0.375rem */
  background-color: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  padding: var(--spacing-xxs) var(--spacing-xs); /* 4px 8px => 0.25rem 0.5rem */
  margin: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) 0;
  border-radius: 100px;
  font-size: var(--font-size-sm); /* 14px => 0.875rem */
  cursor: pointer;
  
}

.clear-all-chip {
  background-color: var(--color-text-dark);
  color: var(--color-white);
  border: none;
}

.color-chip .remove-icon {
  font-weight: var(--font-weight-bold);
}

.price {
  font-size: var(--font-size-xl); /* 1.5rem */
}

.cta-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl); /* 0.75rem 2rem */
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-sm); /* 4px => 0.25rem */
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: var(--color-accent-hover);
}

/* Shirts List */
.shirts-list {
  flex: 1; /* takes remaining space, side by side with filter-panel */
}

.shirts-list h3 {
  font-size: var(--font-size-2xl); /* 1.5rem */
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
}

/* Responsive Grid for the Shirt Items */
.shirt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); /* 270px => 16.875rem */
  gap: var(--spacing-md);
}

/* Shirt Card */
.shirt-item {
  background-color: var(--color-white);
  border-radius: var(--radius-sm); /* 8px => 0.5rem */
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
	box-shadow: 4px 4px 0px var(--color-border);
}

.shirt-item:hover {
  transform: translateY(-3px);
  box-shadow: 5px 7px 0px var(--color-border);
}

.shirt-item img {
  width: 100%;
  height: auto;
  display: block;
  padding: var(--spacing-md);
}

.img-link {
  flex-basis: 50%;
}

.shirt-info {
  padding: var(--spacing-md); /* 1rem */
  background-color: #F5F5F5; /* optional: define var if used more often */
  border-top: 1px solid var(--color-gray-light);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 50%;
}

.shirt-info h4 {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.shirt-info .description {
  font-size: var(--font-size-xs); /* 0.875rem -> might be var(--font-size-sm) if you prefer */
  color: #666; /* define var if repeated */
  margin-bottom: var(--spacing-md);
  font-family: 'Satoshi-Medium', sans-serif;
  display: none; /* as in original */
}

.buy-btn {
  width: 100%;
  height: 2rem; /* 32px => 2rem */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-amzn-btn); /* define var if repeated, or use var(--color-accent) if same */
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--radius-sm); /* 32px => 2rem fully rounded pill shape */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); /* 14px => 0.875rem */
  transition: background-color 0.3s ease;
  gap: var(--spacing-sm); /* 12px => 0.75rem */
}

.buy-btn:hover {
  background-color: var(--color-accent-hover);
}

/* About Section */
.about {
  background-color: var(--color-bg-about);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.about h3 {
  font-size: 1.75rem; /* or var(--font-size-lg) etc. if you want */
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
}

.about p {
  margin: 0 auto;
  line-height: 1.5;
  padding: var(--spacing-md) var(--spacing-xl);
  text-align: left;
}

/* Footer */
footer {
  color: var(--color-white);
  text-align: center;
  font-size: 0.9rem; /* or var(--font-size-sm) if you want to unify */
}

footer .top-content {
  background-color: var(--color-white);
  padding: var(--spacing-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer .bottom-content{  
  background-color: var(--color-bg-footer);
  padding: var(--spacing-xl) 0;
}

footer span {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 20px;
}

footer .top-content p {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  color: #757575;
  font-size: var(--font-size-md);
  letter-spacing: .2px;
  width: 75%;
}

footer .bottom-content p {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  font-size: var(--font-size-base);
}

/* Container for all swatches and the +# text */
.color-swatch-container {
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Individual swatch styling */
.color-swatch {
  display: inline-block;
  width: 1.5rem;  /* 24px => 1.5rem */  
  height: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  vertical-align: middle;
}

.color-toggle-btn{
  height: 1.5rem;
  width: initial;
  padding: var(--spacing-xs);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.color-swatch-checkbox {
  display: inline-block;
  width: var(--checkbox-size);   /* 1.125rem => 18px */
  height: var(--checkbox-size);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  vertical-align: middle;
}

.extra-colors {
  margin-left: 0.375rem; /* 6px => 0.375rem */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); /* 14px => 0.875rem */
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* Mobile Filter Button */
.filter-button {
  display: none;
  background-color: var(--color-amzn-btn); /* or var(--color-accent) if you prefer consistent usage */
  color: var(--color-white);
  border: none;
  padding: 0.625rem var(--spacing-sm); /* 10px 16px => 0.625rem 1rem */
  font-size: var(--font-size-base); /* 16px => 1rem */
  font-weight: var(--font-weight-bold);
  border-radius: 0.3125rem; /* 5px => 0.3125rem */
  margin: 0.625rem auto;    /* 10px => 0.625rem */
  cursor: pointer;
  width: 100%;
}

/* Filter Drawer (Mobile) */
#filter-drawer.active {
  left: 0;
}

/* Close Button */
.close-filters {
  background: none;
  border: none;
  font-size: 1.5rem; /* 24px => could do var(--font-size-xl) if you want */
  font-weight: var(--font-weight-bold);
  position: absolute;
  top: 0.625rem;  /* 10px => 0.625rem */
  right: 0.9375rem; /* 15px => 0.9375rem */
  cursor: pointer;
}

/* Pagination & Page Size Controls */
.page-size-controls {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* 12px => 0.75rem */
}

.page-size-btn {
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  padding: 0.375rem 0.625rem; /* 6px 10px => 0.375rem 0.625rem */
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-sm); /* 14px => 0.875rem */
}

.page-size-btn.active {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-border);
}

.page-size-btn.active:hover {
  background-color: var(--color-accent-hover);
}

.page-size-btn:hover {
  background-color: #ddd;
}

.pagination {
  display: flex;
  gap: 0.375rem; /* 6px => 0.375rem */
  justify-content: center;
  margin: var(--spacing-md) 0;
}

.pagination button {
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  cursor: pointer;
  padding: 0.375rem 0.75rem; /* 6px 12px => 0.375rem 0.75rem */
  border-radius: var(--radius-sm);
}

.pagination button.active {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent-hover);
}

.count-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
}

/* Responsive Breakpoints */
@media (max-width: 1180px) {
  .hero.home .hero-container {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: var(--font-size-2xl);
  }

  .shirt-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-section {
    flex-direction: column;
  }

  .filter-button {
    display: block;
  }

  #filter-drawer {
    position: fixed;
    top: 0;
    left: -100%; /* Hidden initially */
    width: 80%;
    max-width: 20rem; /* 320px => 20rem */
    height: 100vh;
    background: var(--color-bg-light);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    padding: 1.25rem; /* 20px => 1.25rem */
    transition: left 0.3s ease-in-out;
    z-index: 1000;
  }

  .filter-panel {
    border-radius: 0;
    flex: 0 0 18.75rem; /* 300px => 18.75rem */
  }

  .product-section {
    flex-direction: column;
  }
}

@media (max-width: 480px) {

  header {
    padding: var(--spacing-xxs) var(--spacing-md); /* 0.75rem 1rem */
    gap: 0;
    flex-direction: column;
  }

  header nav a {
    font-size: var(--font-size-sm);
  }

  .search-section input {
    padding: var(--spacing-xs) var(--spacing-xl);
    width: 100%;
  }

  .logo-search {
    gap: var(--spacing-lg);
  }

  .search-section svg {
    top: 26px;
    left: 91px;
  }

  .hero {
    background: url(../img/hero_background_mobile.jpg);
  }

  .homepage-banners .holiday {
    background: url(../img/holiday_banner_mobile.jpg);
  }

  .homepage-banners .food {
    background: url(../img/food_banner_mobile.jpg);
  }

  .hero.home h1 {
    font-size: var(--font-size-xl);
  }

  .hero.home .hero-container {
    flex-direction: column;
    align-items: start;
    padding: var(--spacing-lg) var(--spacing-xl);
    gap: var(--spacing-lg);
  }

  .homepage-banners {
    flex-direction: column;
    margin: 0;
    gap: 0;
  }

  .homepage-banners a {
    width: 100%;
    border-radius: 0;
    align-items: flex-end;
    padding: 0;
  }

  .homepage-banners a .banner {
    width: 100%;
    background-color: var(--color-header-bg);
    padding: var(--spacing-md);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .homepage-banners a h2 {
    font-size: var(--font-size-lg);
  }

  .banner-btn {
    font-size: var(--font-size-sm);
    width: 120px;
  }

  .category-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .featured-products, .featured-categories {
    margin: var(--spacing-md);
  }

  .featured-categories a {
    padding: var(--spacing-sm);
  }

  nav ul {
    flex-direction: column;
  }

  .product-section {
    padding: 0 var(--spacing-md); 
  }

  .shirt-grid {
    grid-template-columns: 1fr;
  }

  .count-info {
    flex-direction: column;
  }

  .shirt-item {
    flex-direction: row;
  }

  .shirt-info {
    border-top: none;
    border-left: 1px solid var(--color-gray-light);
  }

  .product-section {
    flex-direction: column;
  }

  footer span {
    line-height: 70px;
  }

  footer .top-content, footer .bottom-content {
    padding: var(--spacing-xl) var(--spacing-xl);
  }

  footer .top-content p {
    font-size: var(--font-size-sm);
    letter-spacing: 0;
    width: 100%;
  }
}