/* ============================================
   WOOPREMIUM — Product Archive / Category Page
   Version: 1.0.0
   ============================================ */

/* Inherits CSS variables from single-product.css via :root */

/* ---- Reset ---- */
.single-product .content-area,
.tax-product_cat .content-area,
.post-type-archive-product .content-area {
  max-width: 100%;
  padding: 0;
}
/* Reset max-width on .site-main */
.tax-product_cat .site-main,
.post-type-archive-product .site-main {
  max-width: 100%;
}

/* ============================================
   CATEGORY HERO (dark)
   ============================================ */
.wp-cat-hero {
  background: var(--wp-dark, #1a1a1a);
  position: relative;
  overflow: hidden;
  padding: 64px 0 48px;
}

/* ---- Brand hero variant (/merk/<slug>/) ----
   Logo sits in a light card so brand logos with a baked-in white background
   blend cleanly on top of the dark hero. */
.wp-cat-hero--brand .wp-container {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.wp-cat-hero--brand .wp-cat-hero__content {
  flex: 1 1 340px;
  max-width: 620px;
}
.wp-cat-hero__brand-card {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 14px;
  padding: 28px 36px;
  min-width: 220px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  position: relative;  /* required so z-index keeps us above the hero's ::after overlay */
  z-index: 3;
}
.wp-cat-hero__brand-card img {
  height: 96px;     /* fixed height so SVGs without intrinsic size still render */
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .wp-cat-hero--brand .wp-container { gap: 24px; }
  .wp-cat-hero__brand-card {
    padding: 20px 24px;
    min-width: 160px;
    min-height: 88px;
  }
  .wp-cat-hero__brand-card img { height: 64px; max-width: 180px; }
}
/* Brand hero with a filled brand image: bump overlay so text remains readable */
.wp-cat-hero--has-bg::after {
  background: linear-gradient(90deg,
    rgba(26,26,26,.92) 0%,
    rgba(26,26,26,.78) 40%,
    rgba(26,26,26,.45) 70%,
    rgba(26,26,26,.15) 100%
  );
}

.wp-cat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(26,26,26,.97) 0%,
    rgba(26,26,26,.92) 30%,
    rgba(26,26,26,.7) 50%,
    rgba(26,26,26,.35) 70%,
    rgba(26,26,26,.1) 90%,
    rgba(26,26,26,0) 100%
  );
  z-index: 1;
}
.wp-cat-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wp-cat-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}
.wp-cat-hero .wp-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.wp-cat-hero__content {
  max-width: 600px;
}
.wp-cat-hero__title {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 3rem;
  font-weight: 400;
  color: var(--wp-dark-text, #e8e4de);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.wp-cat-hero__desc {
  font-size: 1rem;
  color: var(--wp-dark-text-2, #a09890);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 480px;
}
.wp-cat-hero__breadcrumbs {
  font-size: .8125rem;
  color: var(--wp-dark-text-2, #a09890);
}
.wp-cat-hero__breadcrumbs a {
  color: var(--wp-dark-text-2, #a09890);
  text-decoration: none;
  transition: color .2s;
}
.wp-cat-hero__breadcrumbs a:hover { color: var(--wp-gold, #b8960c); }
.wp-cat-hero__breadcrumbs .breadcrumb-sep { margin: 0 6px; opacity: .4; }

/* Hero image — fills right side, bleeds to edge */
.wp-cat-hero__image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}
.wp-cat-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   SUBCATEGORIES (compact chips under hero)
   ============================================ */
.wp-subcats {
  background: var(--wp-dark-surface, #222120);
  padding: 20px 0;
  border-bottom: 1px solid var(--wp-dark-border, #3a3835);
}
.wp-subcats .wp-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wp-subcats__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wp-dark-text-2, #a09890);
  flex-shrink: 0;
}
.wp-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  font-size: .8125rem;
  color: #ffffff;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  font-family: var(--wp-sans);
}
.wp-subcat-chip:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--wp-gold, #b8960c);
  color: #ffffff;
}
.wp-subcat-chip__count {
  font-size: .6875rem;
  color: var(--wp-dark-text-2, #a09890);
}
.wp-subcat-chip__img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.wp-subcat-chip__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   KEUZEHULP CTA
   ============================================ */
.wp-keuzehulp {
  background: var(--wp-surface, #f5f3ef);
  padding: 20px 0;
  border-bottom: 1px solid var(--wp-border-light, #eae6df);
}
.wp-keuzehulp .wp-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wp-keuzehulp__text {
  font-size: .875rem;
  color: var(--wp-text-2, #5c5650);
}
.wp-keuzehulp__text strong {
  color: var(--wp-text, #1a1a1a);
}
/* Hide the original shortcode button but keep it in DOM for JS triggering */
.wp-keuzehulp__shortcode-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}
.wp-keuzehulp__btn--disabled {
  opacity: .4;
  cursor: default;
}
/* Keuzehulp action wrapper */
.wp-keuzehulp__action {
  flex-shrink: 0;
}
.wp-keuzehulp__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--wp-gold, #b8960c);
  color: var(--wp-white, #fff);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--wp-r-sm, 6px);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--wp-sans);
  transition: background .2s;
}
.wp-keuzehulp__btn:hover {
  background: var(--wp-cta, #1a1a1a);
  color: var(--wp-white, #fff);
}
/* Style the vloeradvies button from the shortcode */
.wp-keuzehulp .vloer-advies-knop,
.wp-keuzehulp #vloer-start-btn {
  padding: 10px 24px !important;
  background: var(--wp-gold, #b8960c) !important;
  color: var(--wp-white, #fff) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: var(--wp-r-sm, 6px) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--wp-sans) !important;
  transition: background .2s !important;
}
.wp-keuzehulp .vloer-advies-knop:hover {
  background: var(--wp-cta, #1a1a1a) !important;
}

/* ============================================
   FILTER BAR (from shortcode, styled to match)
   ============================================ */
.wp-filter-section {
  background: var(--wp-white, #fff);
  border-bottom: 1px solid var(--wp-border-light, #eae6df);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Style overrides for wcf-filter-bar from the plugin */
.wp-filter-section .wcf-filter-bar {
  max-width: var(--wp-container, 1400px);
  margin: 0 auto;
  padding: 0 var(--wp-gutter, 40px);
}

/* ============================================
   PRODUCT GRID
   ============================================ */
.wp-archive-products {
  background: var(--wp-surface, #f5f3ef);
  padding: 40px 0 72px;
}
.wp-archive-products .products,
.wp-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Product card in archive */
.wp-archive-card {
  background: var(--wp-white, #fff);
  border-radius: var(--wp-r, 8px);
  overflow: hidden;
  transition: box-shadow .3s var(--wp-ease), transform .3s var(--wp-ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  text-decoration: none;
  color: var(--wp-text, #1a1a1a);
  display: block;
}
.wp-archive-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  transform: translateY(-4px);
}
.wp-archive-card__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}
.wp-archive-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--wp-ease);
}
.wp-archive-card:hover .wp-archive-card__image img {
  transform: scale(1.04);
}
.wp-archive-card__body {
  padding: 16px 16px 20px;
}
.wp-archive-card__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  height: 40px; /* Fixed height so cards align regardless of logo size */
}
.wp-archive-card__brand-logo {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: visible;
  opacity: 1;
  line-height: 0;
}
.wp-archive-card__brand-logo img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 80px;
  object-fit: contain;
  object-position: left center;
}
.wp-archive-card__brand-name {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wp-text-3, #8a837c);
}
.wp-archive-card__name {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--wp-text, #1a1a1a);
  letter-spacing: -.01em;
}
.wp-archive-card__price {
  font-size: .875rem;
  color: var(--wp-text-2, #5c5650);
  margin-bottom: 14px;
}
.wp-archive-card__price strong {
  color: var(--wp-text, #1a1a1a);
  font-weight: 600;
  font-size: .9375rem;
}
.wp-archive-card__price small {
  color: var(--wp-text-3, #8a837c);
  font-size: .75rem;
  font-weight: 400;
}
.wp-archive-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp-text, #1a1a1a);
  transition: gap .2s var(--wp-ease);
}
.wp-archive-card:hover .wp-archive-card__link { gap: 10px; }
.wp-archive-card__link svg { width: 14px; height: 14px; }

/* ============================================
   PAGINATION
   ============================================ */
.wp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 48px;
}
.wp-pagination a,
.wp-pagination span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .875rem;
  color: var(--wp-text-2, #5c5650);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.wp-pagination a:hover { background: var(--wp-white, #fff); color: var(--wp-text, #1a1a1a); }
.wp-pagination .current {
  background: var(--wp-gold, #b8960c);
  color: var(--wp-white, #fff);
  font-weight: 600;
}
.wp-pagination .prev,
.wp-pagination .next {
  width: auto;
  padding: 0 12px;
  border-radius: 20px;
  gap: 4px;
  font-size: .8125rem;
  font-weight: 500;
}

/* ============================================
   SEO CONTENT (dark)
   ============================================ */
.wp-seo-content {
  background: var(--wp-dark, #1a1a1a);
  padding: 72px 0;
}
.wp-seo-content__inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.wp-seo-content h2 {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--wp-dark-text, #e8e4de);
  margin-bottom: 20px;
}
.wp-seo-content h3 {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--wp-dark-text, #e8e4de);
  margin-top: 32px;
  margin-bottom: 12px;
}
.wp-seo-content p,
.wp-seo-content div {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--wp-dark-text-2, #a09890);
}

/* ============================================
   FAQ SECTION (dark, reused from product page)
   ============================================ */
/* Uses .wp-faq-section, .wp-faq-item etc from single-product.css */

/* ============================================
   NEWSLETTER (light)
   ============================================ */
.wp-newsletter {
  background: var(--wp-surface, #f5f3ef);
  padding: 72px 0;
}
.wp-newsletter__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.wp-newsletter__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--wp-text-3, #8a837c);
  margin-bottom: 12px;
}
.wp-newsletter h2 {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--wp-text, #1a1a1a);
  margin-bottom: 12px;
  font-style: italic;
}
.wp-newsletter__desc {
  font-size: .9375rem;
  color: var(--wp-text-2, #5c5650);
  margin-bottom: 32px;
  line-height: 1.6;
}
/* Style gravity form within newsletter */
.wp-newsletter .gform_wrapper {
  max-width: 420px;
  margin: 0 auto;
}
.wp-newsletter .gform_wrapper input[type="email"],
.wp-newsletter .gform_wrapper input[type="text"] {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1.5px solid var(--wp-border-input, #9e9186) !important;
  border-radius: var(--wp-r-sm, 6px) !important;
  font-family: var(--wp-sans) !important;
  font-size: .9375rem !important;
  background: var(--wp-white, #fff) !important;
  transition: border-color .2s !important;
}
.wp-newsletter .gform_wrapper input[type="email"]:focus {
  border-color: var(--wp-gold, #b8960c) !important;
  outline: none !important;
}
.wp-newsletter .gform_wrapper input[type="submit"],
.wp-newsletter .gform_wrapper button[type="submit"] {
  padding: 12px 32px !important;
  background: var(--wp-cta, #1a1a1a) !important;
  color: var(--wp-white, #fff) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: var(--wp-r-sm, 6px) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--wp-sans) !important;
  transition: background .2s !important;
  margin-top: 8px !important;
}
.wp-newsletter .gform_wrapper input[type="submit"]:hover {
  background: var(--wp-cta-hover, #333) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .wp-archive-products .products,
  .wp-archive-grid { grid-template-columns: repeat(3, 1fr); }
  .wp-cat-hero__title { font-size: 2.5rem; }
  .wp-cat-hero__image { width: 40%; }
}
/* ============================================
   ARCHIVE PAGE STYLE OVERRIDES
   ============================================ */

/* Hero content — force above overlay */
.wp-archive-page .wp-cat-hero .wp-container {
  position: relative;
  z-index: 10;
}
.wp-archive-page .wp-cat-hero__content {
  position: relative;
  z-index: 10;
}
/* Hero title — pure white for maximum contrast on dark */
.wp-archive-page .wp-cat-hero__title {
  color: #ffffff;
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 3rem;
  font-weight: 400;
  position: relative;
  z-index: 10;
}
.wp-archive-page .wp-cat-hero__desc {
  color: var(--wp-dark-text-2, #a09890);
  font-family: var(--wp-sans);
}
.wp-archive-page .wp-cat-hero__breadcrumbs,
.wp-archive-page .wp-cat-hero__breadcrumbs * {
  color: var(--wp-dark-text-2, #a09890);
  font-family: var(--wp-sans);
}

/* Product card text overrides */
.wp-archive-page .wp-archive-card__name,
.wp-archive-page h3.wp-archive-card__name {
  font-family: var(--wp-serif, Georgia, serif);
  font-weight: 400;
  font-size: .9375rem;
  color: var(--wp-text, #1a1a1a);
}
.wp-archive-page .wp-archive-card__brand-name {
  font-family: var(--wp-sans);
  color: var(--wp-text-3, #8a837c);
}
.wp-archive-page .wp-archive-card__price {
  font-family: var(--wp-sans);
}
.wp-archive-page .wp-archive-card__price strong {
  color: var(--wp-text, #1a1a1a);
}
.wp-archive-page .wp-archive-card__price small {
  color: var(--wp-text-3, #8a837c);
}
.wp-archive-page .wp-archive-card__link {
  font-family: var(--wp-sans);
  color: var(--wp-text, #1a1a1a);
}

/* SEO content section — match "Over dit product" styling from product page */
.wp-archive-page .wp-seo-content h2 {
  color: var(--wp-dark-text, #e8e4de);
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 400;
}
.wp-archive-page .wp-seo-content h3 {
  color: var(--wp-dark-text, #e8e4de);
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
}
.wp-archive-page .wp-seo-content p,
.wp-archive-page .wp-seo-content div {
  color: var(--wp-dark-text-2, #a09890);
  font-family: var(--wp-sans);
  font-size: .9375rem;
  line-height: 1.8;
  font-weight: 400;
}

/* FAQ section — exact match with product page styling */
.wp-archive-page .wp-faq-section {
  padding: 72px 0;
  background: var(--wp-dark, #1a1a1a);
}
.wp-archive-page .wp-faq__title {
  color: var(--wp-dark-text, #e8e4de);
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 12px;
}
.wp-archive-page .wp-faq__subtitle {
  color: var(--wp-dark-text-2, #a09890);
  font-family: var(--wp-sans);
  font-size: .9375rem;
  text-align: center;
  margin-bottom: 48px;
}
.wp-archive-page .wp-faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.wp-archive-page .wp-faq-item {
  border-bottom: 1px solid var(--wp-dark-border, #3a3835);
}
.wp-archive-page .wp-faq-item:first-child {
  border-top: 1px solid var(--wp-dark-border, #3a3835);
}
.wp-archive-page .wp-faq__trigger {
  color: var(--wp-dark-text, #e8e4de);
  font-family: var(--wp-sans);
  font-weight: 400;
  font-size: .9375rem;
  background: none;
  border: none;
  padding: 20px 0;
  text-transform: none;
  letter-spacing: normal;
  height: auto;
  line-height: 1.4;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.wp-archive-page .wp-faq__trigger:hover {
  color: var(--wp-gold, #b8960c);
  background: none;
}
.wp-archive-page .wp-faq__trigger svg {
  width: 18px;
  height: 18px;
  color: var(--wp-dark-text-2, #a09890);
  flex-shrink: 0;
}
.wp-archive-page .wp-faq__answer-inner {
  color: var(--wp-dark-text-2, #a09890);
  font-family: var(--wp-sans);
  font-size: .9375rem;
  line-height: 1.7;
  padding: 0 0 20px;
}

/* Newsletter section */
.wp-archive-page .wp-newsletter__label {
  color: var(--wp-text-3, #8a837c);
  font-family: var(--wp-sans);
}
.wp-archive-page .wp-newsletter h2 {
  color: var(--wp-text, #1a1a1a);
  font-family: var(--wp-serif, Georgia, serif);
  font-weight: 400;
  font-style: italic;
}
.wp-archive-page .wp-newsletter__desc {
  color: var(--wp-text-2, #5c5650);
  font-family: var(--wp-sans);
}

/* Keuzehulp text */
.wp-archive-page .wp-keuzehulp__text {
  color: var(--wp-text-2, #5c5650);
  font-family: var(--wp-sans);
}
.wp-archive-page .wp-keuzehulp__text strong {
  color: var(--wp-text, #1a1a1a);
}

/* Pagination */
.wp-archive-page .wp-pagination a,
.wp-archive-page .wp-pagination span {
  font-family: var(--wp-sans);
}
.wp-archive-page .wp-pagination .current {
  background: var(--wp-gold, #b8960c);
  color: var(--wp-white, #fff);
}

/* Hide default WooCommerce breadcrumb on archive pages */
.wp-archive-page > .woocommerce-breadcrumb {
  display: none;
}

@media (max-width: 768px) {
  .wp-archive-page { overflow-x: hidden; }
  .wp-archive-products .products,
  .wp-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wp-cat-hero .wp-container { text-align: center; }
  .wp-cat-hero__title { font-size: 2rem; }
  .wp-cat-hero__desc { max-width: 100%; }
  .wp-cat-hero__image { position: relative; width: 100%; height: 200px; }
  .wp-cat-hero::after { background: linear-gradient(180deg, rgba(26,26,26,.95) 0%, rgba(26,26,26,.7) 100%); }
  .wp-subcats .wp-container { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wp-subcats .wp-container::-webkit-scrollbar { display: none; }
  .wp-keuzehulp .wp-container { flex-direction: column; text-align: center; gap: 12px; }
  .wp-archive-card__body { padding: 12px 12px 16px; }
  .wp-archive-card__name { font-size: .8125rem; }
  .wp-newsletter h2 { font-size: 1.375rem; }
  .wp-filter-section { overflow-x: hidden; }
}

/* ============ SHOP CATEGORY CARDS ============ */
.wp-shop-cats {
  padding: 56px 0 48px;
  background: var(--wp-dark, #1a1a1a);
}
.wp-shop-cats__title {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--wp-dark-text, #e8e4de);
  text-align: center;
  margin: 0 0 32px;
}
.wp-shop-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.wp-shop-cat {
  display: block;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--wp-r-lg, 12px);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .25s, background .25s;
}
.wp-shop-cat:hover {
  border-color: var(--wp-gold, #b8960c);
  background: rgba(255,255,255,.1);
}
.wp-shop-cat__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--wp-surface, #f5f3ef);
}
.wp-shop-cat__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--wp-ease);
}
.wp-shop-cat:hover .wp-shop-cat__image img {
  transform: scale(1.04);
}
.wp-shop-cat__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp-text-3, #8a837c);
}
.wp-shop-cat__placeholder svg {
  width: 40px;
  height: 40px;
  opacity: .4;
}
.wp-shop-cat__body {
  padding: 16px 20px 20px;
}
.wp-shop-cat__name {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 4px;
}
.wp-shop-cat__count {
  font-family: var(--wp-sans);
  font-size: .75rem;
  color: var(--wp-dark-text-2, #a09890);
  display: block;
  margin-bottom: 10px;
}
.wp-shop-cat__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  transition: color .2s;
}
.wp-shop-cat:hover .wp-shop-cat__link {
  color: var(--wp-gold-text, #8e7409);
}
.wp-shop-cat__link svg {
  transition: transform .2s;
}
.wp-shop-cat:hover .wp-shop-cat__link svg {
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .wp-shop-cats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .wp-shop-cats { padding: 40px 0 32px; }
  .wp-shop-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wp-shop-cat__body { padding: 12px 14px 16px; }
  .wp-shop-cat__name { font-size: .875rem; }
}

/* ============ SEARCH RESULTS ============ */
.wp-cat-hero--search { min-height: 200px; }
.wp-archive-card__type {
  font-family: var(--wp-sans);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wp-gold-text, #8e7409);
}
.wp-archive-card__excerpt {
  font-family: var(--wp-sans);
  font-size: .8125rem;
  color: var(--wp-text-3, #8a837c);
  line-height: 1.5;
  margin-top: 4px;
}
.wp-search-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--wp-text-3, #8a837c);
}
.wp-search-empty svg { margin-bottom: 24px; opacity: .4; }
.wp-search-empty h2 {
  font-family: var(--wp-serif, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--wp-text, #1a1a1a);
  margin-bottom: 8px;
}
.wp-search-empty p {
  font-family: var(--wp-sans);
  font-size: .9375rem;
  margin-bottom: 24px;
}
.wp-search-empty__cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--wp-cta, #1a1a1a);
  color: var(--wp-white, #fff);
  font-family: var(--wp-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--wp-r-sm, 6px);
  text-decoration: none;
  transition: background .2s;
}
.wp-search-empty__cta:hover { background: var(--wp-cta-hover, #333); color: var(--wp-white, #fff); }

/* ---- Empty state ---- */
.wp-empty-state {
  text-align: center;
  padding: 48px 0;
  color: var(--wp-text-3);
}

/* ---- Placeholder image (search results without thumbnail) ---- */
.wp-placeholder-image {
  width: 100%;
  aspect-ratio: 1;
  background: var(--wp-surface, #f5f3ef);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp-text-3, #8a837c);
}