@import url('circular-std.css');

:root {
  /* Typography */
  --font-family-base: 'CircularStd', 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 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-header-bg: #F9F7F7;
  --color-text: #333333;
  --color-white: #ffffff;
  --color-border-header: #C1BDBD;
  --color-bg-light: #e6e6e6;
  --color-hero-start: #29B1D7;
  --color-hero-end: #3E29E2;
  --color-accent: #ee2a7b;
  --color-accent-hover: #ac1151;
  --color-border: #ccc;          /* used for generic .ccc borders */
  --color-border-soft: #a4a4a4;  /* 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: #292929;
  --color-amzn-btn: #ee2a7b;
  
  /* 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;    /* 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: 160px;   /* 185px / 16 */
  --logo-height: 21px;   /* 25px / 16 */
  --filter-panel-width: 325px; /* 325px / 16 */
  --checkbox-size: 18px;  /* 18px / 16 */
  --shades-container-max-height: 259px; /* 259px / 16 */
}

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

body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg);
  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);
  border-bottom: 1px solid var(--color-border-header);
  padding: var(--spacing-sm) 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 */
}

.search-section {
  width: 100%;
}

.search-section input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-md); /* 8px 16px => 0.5rem 1rem */
  font-family: var(--font-family-base);
  font-size: var(--font-size-base); /* 16px => 1rem */
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);  /* 24px => 1.5rem */
  background-color: var(--color-bg-light);
}

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

nav ul {
  list-style: none;
  display: flex;
  gap: var(--spacing-md); /* 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;
}

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

.homepage-banners a {
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black) !important;
  text-decoration: none;
  background: linear-gradient(135deg, var(--color-hero-start) 0%, var(--color-hero-end) 100%);
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  width: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}


#breadcrumb {
  padding: var(--spacing-md) var(--spacing-xl);
}

#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-md); /* 8px => 0.5rem */
  border: 1px solid var(--color-border-soft);
  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-lg); /* 20px => 1.25rem */
}

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

.filter-container {
  background-color: var(--color-white);
  border-radius: var(--radius-md); /* 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-bold);
}

.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 {
  margin-top: var(--spacing-md); /* 1rem */
  background-color: #ddd;
  border: none;
  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);
  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 {
  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-soft);
  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 {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-xl); /* 1.5rem */
  font-weight: var(--font-weight-bold);
}

/* Responsive Grid for the Shirt Items */
.shirt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 270px => 16.875rem */
  gap: var(--spacing-xs); /* 1rem or 0.5rem? Original was 1rem so let's keep var(--spacing-md)? 
                             Just pick a spacing variable you prefer, e.g. var(--spacing-md). */
  gap: var(--spacing-md);
}

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

.shirt-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.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-xl); /* 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);
  color: var(--color-white);
  text-decoration: none;
}

/* 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 {
  background-color: var(--color-bg-footer);
  color: var(--color-white);
  padding: var(--spacing-md) 0;
  text-align: center;
  font-size: 0.9rem; /* or var(--font-size-sm) if you want to unify */
}

footer p {
  margin: 0.25rem 0;
}

/* 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-xl);
  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: #FF9D26; /* 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-accent-hover);
}

.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;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {

  .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) {

  .logo img {
    width: 8.4375rem;  /* 135px => 8.4375rem */
    height: 1.125rem;  /* 18px => 1.125rem */
  }

  header {
    padding: var(--spacing-sm) var(--spacing-md); /* 0.75rem 1rem */
    gap: 1.5rem;
  }

  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-item img {
    height: initial;
  }

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

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