/* ====================================================================
   TheShopCart — Category Landing Page styles
   Path: public/assets/css/category.css
   Pairs with: views/pages/category.php
   Loaded by: views/layout/header.php (after home.css, before product.css)

   Visual language mirrors home.css:
     - Sharp corners (no border-radius)
     - #e4e6eb borders
     - #7a0f0f burgundy accent
     - White cards on near-white page

   This file owns category-landing-only styles. The lean product card
   used in subcategory shelves is a modifier of .tsc-p-card (defined
   in home.css) — both stylesheets load on category pages.
   ==================================================================== */

/* --------------------------------------------------
   HEADER BAND — H1 with burgundy accent bar + intro
-------------------------------------------------- */

.tsc-cat-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e4e6eb;
}

.tsc-cat-header__title {
  display: inline-block;
  position: relative;
  margin: 0 0 0.55rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
}

.tsc-cat-header__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 0.55rem;
  background: #7a0f0f;
}

.tsc-cat-header__intro {
  max-width: 72ch;
  margin: 0;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.65;
}

/* --------------------------------------------------
   SHARED PILL — used by subcategory nav AND related strip
-------------------------------------------------- */

.tsc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid #e4e6eb;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.tsc-pill i {
  font-size: 0.85rem;
  color: #6b7280;
  transition: color .15s ease;
}

.tsc-pill:hover,
.tsc-pill:focus-visible {
  background: #7a0f0f;
  border-color: #7a0f0f;
  color: #ffffff;
  text-decoration: none;
}

.tsc-pill:hover i,
.tsc-pill:focus-visible i {
  color: #ffffff;
}

.tsc-pill--anchor {
  background: #1a1715;
  border-color: #1a1715;
  color: #ffffff;
}
.tsc-pill--anchor i { color: #ffffff; }
.tsc-pill--anchor:hover,
.tsc-pill--anchor:focus-visible {
  background: #2a2522;
  border-color: #2a2522;
  color: #ffffff;
}

/* --------------------------------------------------
   SUBCATEGORY PILL ROW (top of category page)
-------------------------------------------------- */

.tsc-subcat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------
   SUBCATEGORY SHELVES — one row per subcategory
   Renders only when that subcategory has products.
-------------------------------------------------- */

.tsc-subcat-row {
  margin: 2.25rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid #e4e6eb;
}

.tsc-subcat-row:first-of-type {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 0;
}

.tsc-subcat-row__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tsc-subcat-row__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.tsc-subcat-row__viewall {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a0f0f;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tsc-subcat-row__viewall:hover,
.tsc-subcat-row__viewall:focus-visible {
  text-decoration: underline;
  color: #961616;
}

/* Desktop: grid of cards. Mobile: horizontal swipe strip. */
.tsc-subcat-row__strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

@media (max-width: 767.98px) {
  .tsc-subcat-row__strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tsc-subcat-row__strip > * {
    flex: 0 0 60vw;
    max-width: 220px;
    scroll-snap-align: start;
  }

  .tsc-subcat-row__strip::-webkit-scrollbar {
    height: 6px;
  }
  .tsc-subcat-row__strip::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }
  .tsc-subcat-row__strip::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* --------------------------------------------------
   LEAN PRODUCT CARD — modifier of .tsc-p-card (home.css)
-------------------------------------------------- */

.tsc-p-card--lean .tsc-p-card__body {
  padding: 0.6rem 0.75rem 1.7rem;
  text-align: center;
  background: #ffffff;
}

.tsc-p-card--lean .tsc-p-card__title {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* color inherits from .tsc-p-card__title in home.css */
}

.tsc-p-card--lean .tsc-p-card__price {
  font-size: 0.95rem;
  font-weight: 700;
  /* color inherits from .tsc-p-card__price in home.css */
}

.tsc-p-card--lean .tsc-p-card__hover-side {
  display: none !important;
}

.tsc-p-card--lean:hover .tsc-p-card__body {
  transform: translateY(-1.3rem);
}

/* --------------------------------------------------
   CONDITION RIBBON — diagonal banner top-left of image
   Mirrors product.css's .ribbon at card scale:
     - rotated -45°
     - semi-transparent colored fill + matching colored border
     - white uppercase text
     - clipped to image bounds via .tsc-p-card__img overflow:hidden
   Independent class name (not .ribbon) to avoid cascade conflicts
   with product.css.
-------------------------------------------------- */

.tsc-cond-badge {
  position: absolute;
  top: 9%;
  left: -28px;
  z-index: 4;
  width: 110px;
  padding: 3px 0;
  text-align: center;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  transform: rotate(-45deg);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
}

/* Color states — same Bootstrap palette as product.css ribbons,
   just less transparent so they read at card scale. */
.tsc-cond-badge--new {
  background: rgba(25, 135, 84, 0.88);
  border: 1px solid rgba(25, 135, 84, 0.55);
}

.tsc-cond-badge--used {
  background: rgba(13, 110, 253, 0.88);
  border: 1px solid rgba(13, 110, 253, 0.55);
}

.tsc-cond-badge--parts {
  background: rgba(220, 53, 69, 0.88);
  border: 1px solid rgba(220, 53, 69, 0.55);
}

/* --------------------------------------------------
   EMPTY STATE — when no products at all
-------------------------------------------------- */

.tsc-cat-empty {
  background: #ffffff;
  border: 1px dashed #d1d5db;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #6b7280;
  margin-top: 1rem;
}

.tsc-cat-empty i {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  color: #9ca3af;
}

/* --------------------------------------------------
   FAQ SECTION — narrower for readability, sharp corners
-------------------------------------------------- */

.tsc-cat-faq {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid #e4e6eb;
}

.tsc-cat-faq__inner {
  max-width: 820px;
}

.tsc-cat-faq__title {
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.tsc-cat-faq .accordion-item {
  margin-bottom: -1px;
  border: 1px solid #e4e6eb;
  border-radius: 0;
  background: #ffffff;
}

.tsc-cat-faq .accordion-item:first-of-type {
  border-top: 1px solid #e4e6eb;
}

.tsc-cat-faq .accordion-button {
  padding: 1rem 1.1rem;
  border-radius: 0;
  background: #ffffff;
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: none;
}

.tsc-cat-faq .accordion-button:not(.collapsed) {
  background: #fbf6f6;
  color: #7a0f0f;
}

.tsc-cat-faq .accordion-button:focus {
  border-color: #7a0f0f;
  box-shadow: 0 0 0 0.2rem rgba(122, 15, 15, 0.12);
}

.tsc-cat-faq .accordion-body {
  padding: 0.5rem 1.1rem 1.25rem;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --------------------------------------------------
   RELATED CATEGORIES — pill row with small caps label
-------------------------------------------------- */

.tsc-cat-related {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e4e6eb;
}

.tsc-cat-related__title {
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6b7280;
}

.tsc-cat-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}