/* ============================================
   QUADROVEL — Category Page Styles
   Loads after style.css (cascade)
   ============================================ */

/* ============================================
   PLACEHOLDER MOCKUP WALL (redeclared)
   ============================================ */
.placeholder--mockup-wall {
  aspect-ratio: 1.1/1;
  background: linear-gradient(180deg, #EAE7E2 0%, #F0EDE8 60%, #D4D0CA 100%);
  color: #999;
}

/* ============================================
   CATEGORY BANNER
   ============================================ */
.category-banner {
  background: var(--bg-section);
  padding: 28px 0;
  border-bottom: 1px solid #ECECEC;
}
.category-banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-banner__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.1;
  color: var(--text-dark);
  letter-spacing: 0.005em;
}
.category-banner__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: color 0.2s;
}
.category-banner__back:hover { color: var(--text-dark); }
.category-banner__back svg { width: 22px; height: 22px; }

.sort-mobile-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  color: var(--text-dark);
}

/* ============================================
   SORT BAR
   ============================================ */
.sort-bar-section {
  background: #FFF;
  padding: 18px 0 0;
}
.sort-bar {
  display: flex;
  justify-content: flex-end;
}
.sort-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  padding: 8px 24px 8px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
  outline: none;
}
.sort-select:hover { color: var(--brand-pink); }
.sort-select__chevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ============================================
   PRODUCTS GRID
   ============================================ */
.section--products-grid {
  background: #FFF;
  padding: 24px 0 60px;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.products-grid .card-product {
  text-decoration: none;
}

/* ============================================
   SKELETON LOADING CARDS
   ============================================ */
.card-skeleton {
  background: #FFF;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-skeleton__image {
  width: 100%;
  aspect-ratio: 1.1/1;
  background: linear-gradient(90deg, #F2F2F2 0%, #E8E8E8 50%, #F2F2F2 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s infinite linear;
}
.skeleton-bar {
  margin: 14px 12px 0;
  height: 12px;
  background: linear-gradient(90deg, #F0F0F0 0%, #E0E0E0 50%, #F0F0F0 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s infinite linear;
  border-radius: 4px;
}
.skeleton-bar:nth-of-type(1) { width: 70%; }
.skeleton-bar--short {
  width: 35%;
  margin-top: 8px;
  margin-bottom: 16px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   LOADER PILL
   ============================================ */
.products-loader {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.products-loader__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #FFF;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #999;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.products-loader__spinner {
  color: var(--brand-pink);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .category-banner__title { font-size: 32px; }
}

/* ============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .category-banner { padding: 22px 0; }
  .category-banner__inner { padding: 0 16px; }
  .category-banner__title { font-size: 28px; gap: 6px; }
  .category-banner__back { width: 24px; height: 24px; }
  .category-banner__back svg { width: 18px; height: 18px; }
  .sort-mobile-icon { display: inline-flex; right: 16px; }

  .sort-bar-section {
    background: var(--bg-section);
    padding: 10px 0 0;
    /* Mobile: sort dropdown hides — icon overlay sits in banner */
  }
  .sort-bar { display: none; }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
  .section--products-grid { padding: 16px 0 40px; }

  .products-loader { margin-top: 32px; }
  .products-loader__pill { padding: 10px 22px; font-size: 11px; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .category-banner__title { font-size: 24px; }
}

/* ============================================
   Active sub-link in mobile drawer
   ============================================ */
.mobile-drawer__sub-active { color: var(--brand-pink) !important; }