/*
 * bs-product-category-page.css
 *
 * Product category archive page layout overrides.
 * Sidebar/facets/price/backdrop all handled by bs-algolia-facets.css (shared).
 *
 * This file covers:
 *   1. Product image aspect ratios on category archive pages
 *   2. Category archive page header — image treatment (with-image) and
 *      branded strip fallback (no-image, e.g. Gift Card). Both are driven
 *      by :has() selector branching; no per-category class needed.
 *
 * With-image layout: full-bleed banner photo, dark gradient overlay,
 *   "CATEGORY" eyebrow in bronze, H1 in white Verdana 700, amber bottom rule.
 *
 * No-image fallback: slim #1e1919 strip with ambient bronze radial glow,
 *   eyebrow + H1 column layout, amber bottom rule.
 *
 * Subcategory nav (.wd-nav-product-cat) is hidden entirely — with 1,200
 *   categories in a hierarchy, chips are unusable at scale. Subcategory
 *   navigation is delegated to the Algolia filter sidebar.
 *
 * Loaded on is_product_category() pages only.
 *
 * Colors: #b0743e bronze | #c8925e bronze-300 | #1e1919 deep-brown
 *   #ffffff white | #fafafa neutral-025
 *
 * Every declaration uses !important — WoodMart + Elementor specificity.
 *
 * @package BlackSpace
 */

/* ══════════════════════════════════════════════════════════
   PRODUCT IMAGES — square aspect ratio + cover fit
   Ensures consistency with product search page cards.
   ══════════════════════════════════════════════════════════ */

body.tax-product_cat .product-image-link {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

body.tax-product_cat .wd-product-thumb {
  overflow: hidden !important;
}

body.tax-product_cat .product-image-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ══════════════════════════════════════════════════════════
   CATEGORY ARCHIVE HEADER
   ══════════════════════════════════════════════════════════ */

/* Remove wd-content-layout top gap so header is flush with site nav */
.tax-product_cat .wd-content-layout {
  padding-top: 0 !important;
}

/* ── Base: all category pages ─────────────────────────────
   Deep brown surface + ambient bronze radial glow at left.
   The #1e1919 background shows through on no-image pages;
   on with-image pages the image covers it. */

.tax-product_cat .wd-page-title {
  position: relative !important;
  overflow: hidden !important;
  background-color: #1e1919 !important;
  background-image: radial-gradient(
    ellipse 55% 90% at 28% 50%,
    rgba(176,116,62,0.18) 0%,
    transparent 68%
  ) !important;
}

/* Amber gradient bottom rule — always present */
.tax-product_cat .wd-page-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(176,116,62,0.60),
    rgba(176,116,62,0.20),
    transparent
  ) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ── Background image — absolute fill ────────────────────── */

.tax-product_cat .wd-page-title-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.tax-product_cat .wd-page-title-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Dark gradient overlay — only when image is present.
   Left-heavy so title text at bottom-left is always legible
   regardless of the image content. */
.tax-product_cat .wd-page-title-bg:has(img)::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    rgba(10,6,4,0.78) 0%,
    rgba(10,6,4,0.52) 45%,
    rgba(10,6,4,0.18) 100%
  ) !important;
  z-index: 1 !important;
}

/* ── WITH image: tall banner, column layout, bottom-aligned ─ */

.tax-product_cat .wd-page-title:has(.wd-page-title-bg img) {
  min-height: 200px !important;
  padding: 0 !important;
}

.tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 28px 40px 24px !important;
  min-height: 200px !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}

.tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .wd-title-wrapp {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-bottom: 12px !important;
}

.tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .entry-title {
  font-size: 1.75rem !important;
}

/* ── WITHOUT image: slim strip, column layout (same as shop strip).
   Row layout breaks when chips wrap; column is always safe. */

.tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) {
  padding: 18px 0 !important;
  min-height: auto !important;
}

.tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) .container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 40px !important;
  min-height: auto !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

.tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) .wd-title-wrapp {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
}

.tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) .entry-title {
  font-size: 0.875rem !important;
}

/* ── Hide WoodMart UI chrome + category nav entirely ─────────
   Subcategory chips are removed — the nav contains 1,200 categories
   in a hierarchy, making chips unusable at scale. Subcategory
   navigation is handled by the Algolia filter sidebar instead. */

.tax-product_cat .wd-back-btn,
.tax-product_cat .wd-btn-show-cat,
.tax-product_cat .wd-nav-product-cat {
  display: none !important;
}

/* ── "CATEGORY" eyebrow — injected before the H1 ────────── */

.tax-product_cat .wd-title-wrapp::before {
  content: 'Category' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c8925e !important;
  margin-bottom: 5px !important;
  line-height: 1 !important;
}

/* ── H1 category title ───────────────────────────────────── */

.tax-product_cat .wd-page-title .entry-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── 1024px: reset Elementor's negative top margin ──────────
   Elementor sets --margin-top: -40px on section 904db2b at ≤1024px
   to compensate for wd-content-layout's original padding-top: 40px.
   Our CSS zeroes that padding, so the -40px overshoots and hides the
   top of the header (eyebrow + title) behind the site nav. */

@media (max-width: 1024px) {
  .tax-product_cat [data-id="904db2b"] {
    margin-top: 0 !important;
    --margin-top: 0px !important;
  }
}

@media (max-width: 768px) {
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .container {
    padding: 22px 32px 20px !important;
    min-height: 180px !important;
  }
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) {
    min-height: 180px !important;
  }
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .entry-title {
    font-size: 1.5rem !important;
  }
  .tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) .container {
    padding: 16px 32px !important;
  }
}

@media (max-width: 640px) {
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .container {
    padding: 18px 20px 16px !important;
    min-height: 160px !important;
  }
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) {
    min-height: 160px !important;
  }
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .entry-title {
    font-size: 1.25rem !important;
  }
  .tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) .container {
    padding: 16px 20px !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .container {
    padding: 16px 18px 14px !important;
    min-height: 140px !important;
  }
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) {
    min-height: 140px !important;
  }
  .tax-product_cat .wd-page-title:has(.wd-page-title-bg img) .entry-title {
    font-size: 1.125rem !important;
  }
  .tax-product_cat .wd-page-title:not(:has(.wd-page-title-bg img)) .container {
    padding: 14px 18px !important;
  }
}