@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;700&display=swap');

:root {
  --primary-font: 'Space Grotesk', sans-serif;
  --ui-font: 'Inter', sans-serif;

  /* Button variants */
  --color-button-primary: #f30c1e;
  --color-button-secondary: #fff;

  /* Text Variants */
  --color-text-primary: #070707;
  --color-text-alert: #f30c1e;
  --color-text-primary-hover: #F63747;
  --color-text-secondary:#ffffff;
  --color-text-muted: #7D7D7D;
  --nav-link-color: #ffffff;

  /* Background variants */
  --color-background-primary: #fff;
  --color-background-secondary: #070707;
  --color-background-alert: #f30c1e;

  /* Border variants */
  --color-border-primary: #e5e7eb;
  --color-border-secondary: #fff;


  /* Thumb variants */
  --color-thumbnail-primary: #f30c1e;

  /* Font size variants */
  --font-size-sm: 0.75rem !important; /* 12px */
  --font-size-med: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --fs-h1: 2rem;          /* 32px — hero lines */
  --fs-h2: 1.5rem;          /* 24px — section headers */
  --fs-product-title: 1.25rem; /* 24px — PDP <h1> */
  --fs-h3: 1.25rem;       /* 20px — card titles, brand names */
  --fs-h4: 1.125rem;          /* 16px — small section labels, accordion triggers */
  --fs-cta: 1rem;         /* 16px — CTA links */
  --fs-body: 1rem;        /* 16px — body copy */
  --fs-body-sm: 0.875rem; /* 14px — nav, filters, size labels */
  --fs-caption: 0.75rem;  /* 12px — captions, disclaimers */
  --fs-price: 1.375rem;   /* 22px — product prices (18–24px range) */
  
  /* Status variants */ 
  --color-status-success: #16803c;
  --color-status-success-light: #F0FDF4;
  --color-status-pending: #F5A624;
  --color-status-error: #F30B1E;

  --gap-xxs: 0.25rem;
  --gap-xs: 0.75rem;
  --gap-sm: 0.5rem;
  --gap-reg: 1rem;
  --gap-med: 1.25rem;
  --gap-lg: 1.5rem;
  --gap-xl:
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* change the font-family later (find new font online)*/
}

/* Utilities */
.margin-l-r-sm {
  margin: var(--margin-lg) var(--margin-xl) 0 !important;
}

.margin-bottom-reg {
  margin-bottom: 1rem;
}

.text-upper {
  text-transform: uppercase !important;
}

.text-center {
  text-align: center;
}

.pos-relative {
  position: relative !important;
}

.subheading {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.lh-loose {
  line-height: 1.8 !important;
}

p {
  padding: 0;
  margin-bottom: 0 !important;  /* removed !important — too aggressive globally */
}

hr {
  color: var(--color-text-muted) !important;
}

#product1 {
  margin: 0 2rem;
}

.pro-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pro-header-row .pro-header {
  margin: 0;
  font-size: 1.5rem;
}

.shop-now-link {
  flex-shrink: 0;
  font-weight: 600;
  color: #E63946;
  text-decoration: none;
  white-space: nowrap;
}

.shop-now-link:hover {
  text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
   font-family: var(--primary-font);
   letter-spacing: -0.03em !important; 
   font-weight: 600 !important;
   margin: 0 !important;
  }
body, p, nav { font-family: var(--ui-font) !important; }







/* Wraps results-sort + products-section so they stack via normal flex flow,
   independent of the filter sidebar's height (see grid-area above). */
.main-content {
  grid-area: main-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0; /* allow the product grid to shrink below its content's intrinsic width */
}

.results-sort {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  /* justify-content: space-between; */
}

.results-sort .pg-results {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
}



.pagination-section {
  grid-area: pagination-section;
}

/* Price trend colors */
.price-trend.uptrend {
  color: #2e7d2e;
  background: #e8f5e9;
}

.price-trend.downtrend {
  color: #c62828;
  background: #ffebee;
}

.price-trend.sideways-trend {
  color: #666;
  background: #f4f3f1;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ── Misc ───────────────────────────────────────── */

.heading {
  display: flex;
  justify-content: space-between;
}



.pg-btn {
  border: transparent;
  font-weight: 700;
  background-color: transparent;
}

.test-product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

#product-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 6;
}

#prod-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

#prod-card-container {
  margin: 8px 16px;
}


/* color picker */

.color-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 0;
}

.color-wrapper  {
  list-style: none;
  display: flex;
  align-items: center;
}

.color-wrapper .color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: var(--swatch);
  cursor: pointer;
  transition: border-color 0.2s ease;
  outline-offset: 3px;
}

.color[data-light="true"] {
  border-color: #ccc;
}

.color:hover,
.color.active {
  border-color: #dc2626;
}

.page-results {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.load-more-btn {
  border: none;
  background-color: #dc2626;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
}

.load-more-btn:hover {
  background-color: #b91c1c;
  transform: scale(1.05);
}


.no-results-cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.65rem 1.5rem;
  border-radius: 0.25rem;
  background-color: #000;
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s ease;
}

.no-results-cta:hover {
  transform: translateY(-2px);
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;

}

.modal-overlay.show {
  display: flex;
}



/* ── Responsive ─────────────────────────────────── */

@media (max-width: 991.98px) {
  /* Stack the product page grid on tablet and below */
  .product-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "filter-section"
      "main-content"
      "pagination-section";
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #prod-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.7rem;
    column-gap: 0.7rem;
  }

  .product-card {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {


  .sort-content {
    right: 12px;
  }

  #filter-section {
    gap: 20px;
  }

  #prod-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.7rem;
    column-gap: 0.7rem;
  }

  .product-card {
    width: 100%;
  }

  .product-image,
  .pro {
    height: auto;
  }

  .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #product-container .filter-container {
    width: 50%;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #prod-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.7rem;
    column-gap: 0.7rem;
  }

  .product-card {
    width: 100%;
  }

  #filter-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 575.98px) {

  .breadcrumbs .breadcrumbs-routes {
    margin: 1rem 0;
  }

  /* #page-header {
    margin: 1rem;
  } */

  .page-results {
    width: 100%;
  }

  .product-page {
    grid-template-columns: 1fr;
  }
  

  .product-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  #product-container .filter-container {
    /* width: 100%; */
    align-items: center;
    flex-direction: column;
    padding: 0;
  }

  #prod-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 49%);
    row-gap: 1rem;
    column-gap: 1.2rem;
  }

  .product-card {
    width: 100%;
  }

  #pagination {
    width: 100%;
  }

  #pagination a {
    padding: 0 0.25rem;
  }

  .filter-container .filter-opt {
    display: -webkit-inline-box;
  }

  .filter-container .filter-opt .sort-data {
    padding: 1px;
    border: 1px solid #b5a9a9c9;
    display: flex;
    border-radius: 2rem;
  }

  .filter-container .filter-opt .pg-data {
    display: flex;
    padding: 1px;
    border: 1px solid #b5a9a9c9;
    border-radius: 2rem;
  }

  #sort-btn,
  #pg-amount-btn {
    font-size: 1rem;
    font-weight: 500;
  }

  #sort-icon {
    display: inline-flex;
  }

  .results-sort {
    align-items: center;
  }
}