/* =============================================
   ARCHIVE / CATALOGUE
   ============================================= */

/* --- Archive Hero (catalogue) --- */
.archive-hero {
  position: relative;
  margin: -105px 20px 0;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}

.archive-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 120px 20px 0;
}

/* Breadcrumb */
.archive-hero__breadcrumb {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.archive-hero__breadcrumb-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.archive-hero__breadcrumb-sep {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.archive-hero__breadcrumb-link {
  padding: 8px;
  font-family: var(--font-sporting);
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  border-radius: 5px;
  transition: all 0.2s;
}
.archive-hero__breadcrumb-link:hover {
  text-decoration: underline;
}
.archive-hero__breadcrumb-link--current {
  pointer-events: none;
}

/* Title & content */
.archive-hero__content {
  position: relative;
  z-index: 30;
  padding-bottom: 20px;
}

.archive-hero__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  margin: 44px 0;
}

/* Description wrapper — collapsed by default */
.archive-hero__desc-wrapper {
  position: relative;
  max-height: 60px;
  overflow: hidden;
  text-align: center;
  transition: max-height 0.4s ease;
}
.archive-hero__desc-wrapper.is-expanded {
  max-height: 2000px;
}

.archive-hero__desc {
  font-family: var(--font-sporting);
  font-size: 14px;
  line-height: 23px;
  color: var(--black);
}
.archive-hero__desc p {
  margin: 0 0 12px;
}

/* Gradient fade at bottom */
.archive-hero__desc-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  transition: opacity 0.3s;
}
.archive-hero__desc-wrapper.is-expanded .archive-hero__desc-fade {
  opacity: 0;
}

/* Expand button */
.archive-hero__expand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 2;
}
.archive-hero__expand:hover {
  border: 1px solid var(--black);
}
.archive-hero__expand svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s;
}
.archive-hero__desc-wrapper.is-expanded .archive-hero__expand svg {
  transform: rotate(180deg);
}

/* --- Filters Toolbar --- */
.archive-filters {
  position: sticky;
  top: 70px;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 16px var(--side-pad);
}

.archive-filters__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-filters__form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  position: relative;
}

.filter-group--sort {
  margin-left: auto;
}

.filter-select {
  height: 44px;
  padding: 8px 36px 8px 16px;
  border: 1px solid var(--black);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M0.5 0.5L4.5 4.5L8.5 0.5' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s;
}
.filter-select:focus {
  outline: none;
  border-color: var(--green);
}
.filter-select:hover {
  border-color: var(--green);
}

/* Active filter tags */
.archive-filters__active {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(103, 255, 9, 0.1);
  color: var(--green);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.filter-tag:hover {
  background: rgba(103, 255, 9, 0.2);
}

.filter-tag--clear {
  background: transparent;
  color: var(--grey);
  border: 1px solid var(--grey);
}
.filter-tag--clear:hover {
  color: var(--red);
  border-color: var(--red);
  background: rgba(254, 47, 47, 0.05);
}

/* --- Products Grid --- */
.archive-products {
  padding: 48px var(--side-pad) 80px;
  background: var(--light-grey);
}

.archive-products__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.products-grid .product-card {
  width: 100%;
  min-height: 100%;
  min-width: 0;
}

.products-grid > * {
  min-width: 0;
}

.products-grid .product-card__link {
  color: var(--dark);
}
.products-grid .product-card__link:hover .product-card__name {
  text-decoration: underline;
}
.products-grid .product-card__name {
  color: var(--dark);
}
/* --- Pagination --- */
.archive-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.archive-pagination .page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.archive-pagination .page-numbers li {
  list-style: none;
}

.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--white);
  transition: all 0.2s;
}

.archive-pagination .page-numbers a:hover {
  border-color: var(--green);
  color: var(--green);
}

.archive-pagination .page-numbers .current {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.archive-pagination .page-numbers .prev,
.archive-pagination .page-numbers .next {
  border: none;
  background: transparent;
  font-size: 20px;
}
.archive-pagination .page-numbers .prev:hover,
.archive-pagination .page-numbers .next:hover {
  color: var(--green);
}

/* --- Empty State --- */
.archive-empty {
  text-align: center;
  padding: 80px 20px;
}

.archive-empty__icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.archive-empty__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 12px;
}

.archive-empty__desc {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 24px;
}

/* --- Subcategories (shop page) --- */
.archive-subcategories {
  padding: 60px var(--side-pad) 80px;
}

.archive-subcategories__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.archive-subcategories .section-title {
  margin-bottom: 32px;
  text-align: center;
}

.subcategories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  justify-content: center;
}

/* =============================================
   ARCHIVE FAQ (molecule categories)
   ============================================= */
.archive-faq {
  position: relative;
  padding: 10px 20px 75px;
  overflow: hidden;
}

.archive-faq__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.archive-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* FAQ item styles (mirrored from home.css — not loaded on archives) */
.archive-faq .faq-item {
  border-radius: 0;
  overflow: hidden;
  background: none;
  border: none;
  border-bottom: 1px solid var(--black);
}

.archive-faq .faq-item__question {
  width: 100%;
  background: none;
  border: none;
  color: var(--dark);
  font-family: var(--font-sporting);
  font-size: 25px;
  font-weight: 700;
  padding: 20px 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
  line-height: 30px;
}
.archive-faq .faq-item__question:hover { color: var(--green); }

.archive-faq .faq-chevron {
  font-size: 16px;
  color: var(--dark);
  transition: transform 0.3s;
}
.archive-faq .faq-item.active .faq-chevron { transform: rotate(45deg); }

.archive-faq .faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}
.archive-faq .faq-item.active .faq-item__answer {
  max-height: 600px;
  padding: 0 0 20px;
}

.archive-faq .faq-item__answer p {
  font-family: var(--font-sporting);
  font-size: 16px;
  line-height: 1.3;
  color: var(--dark);
  opacity: 0.7;
}

.archive-faq .faq-item__answer ul {
  padding-left: 20px;
  margin: 8px 0;
}

.archive-faq .faq-item__answer li {
  font-family: var(--font-sporting);
  font-size: 16px;
  line-height: 1.3;
  color: var(--dark);
  opacity: 0.7;
  margin-bottom: 4px;
}

/* Inherit hero color on breadcrumb & hero text */
.archive-hero .archive-hero__breadcrumb-link,
.archive-hero .archive-hero__title,
.archive-hero .archive-hero__desc,
.archive-hero .archive-hero__breadcrumb-sep {
  color: inherit;
}

.archive-hero .archive-hero__breadcrumb-icon path:first-child {
  fill: currentColor;
}

.archive-hero .archive-hero__expand svg {
  stroke: currentColor;
}