/**
 * Design System — Category / shop page (Phase C)
 *
 * Aligns the existing shop archive (.shop-*, .filter-*, .product-card,
 * category SEO) with the design tokens. shop.css / product-cards.css hardcode
 * the old palette, so these are explicit selector overrides loaded after them.
 *
 * The add-to-cart card buttons keep their established green (deliberate
 * conversion element); everything else moves to the design tokens.
 *
 * References tokens from ds-tokens.css.
 *
 * @package Longboardcenter
 */

/* ==========================================================================
   CATEGORY HERO — section 8.1 item 2
   ========================================================================== */
.shop-header__title{font-family:var(--font-display);color:var(--c-ink);letter-spacing:-.01em}
.shop-header__description{color:var(--c-ink-soft)}
.shop-header .woocommerce-breadcrumb{font-size:var(--fs-sm);color:var(--c-ink-soft)}
.shop-header .woocommerce-breadcrumb a{color:var(--c-ink-soft);text-decoration:none}
.shop-header .woocommerce-breadcrumb a:hover{color:var(--c-accent-deep)}

/* Subcategory chips (internal links, support SEO) */
.shop-subcats{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.shop-subcat-chip{
  display:inline-flex;align-items:center;
  padding:8px 16px;
  border:1.5px solid var(--c-line-strong);
  border-radius:var(--r-pill);
  background:var(--c-paper);
  color:var(--c-ink);
  font-size:var(--fs-sm);font-weight:600;
  text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
}
.shop-subcat-chip:hover{border-color:var(--c-ink);color:var(--c-accent-deep)}

/* ==========================================================================
   ACTIVE FILTER TAGS — section 8.1 item 3
   ========================================================================== */
.active-filters__label{color:var(--c-ink-soft)}
.active-filter-tag{
  background:var(--c-paper);
  border:1px solid var(--c-line-strong);
  color:var(--c-ink);
  border-radius:var(--r-pill);
}
.active-filter-tag__remove{color:var(--c-ink-faint)}
.active-filter-tag__remove:hover{color:var(--c-sale)}
.active-filters__clear{color:var(--c-accent-deep)}
.active-filters__clear:hover{color:var(--c-accent)}

/* ==========================================================================
   FILTERS SIDEBAR — section 8.1 item 3
   ========================================================================== */
.shop-sidebar__title{font-family:var(--font-display);color:var(--c-ink)}
.filter-section__header{color:var(--c-ink);font-family:var(--font-body);font-weight:600}
.filter-section__header:hover{color:var(--c-accent)}
.filter-section__active-dot{background:var(--c-accent)}
.filter-list__name{color:var(--c-ink)}
.filter-list__count{color:var(--c-ink-faint)}
.filter-list__item.is-active .filter-list__name{color:var(--c-accent-deep);font-weight:600}
.filter-list__checkbox{border:1.5px solid var(--c-line-strong);border-radius:var(--r-sm)}
.filter-list__checkbox.is-checked{background:var(--c-accent);border-color:var(--c-accent)}
.filter-checkbox__box,.filter-radio__box{border:1.5px solid var(--c-line-strong)}
.filter-checkbox input:checked + .filter-checkbox__box{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.filter-radio input:checked + .filter-radio__box{border-color:var(--c-accent)}
.filter-checkbox__badge{background:var(--c-sale);color:#fff}
.filter-color-swatch.is-selected{box-shadow:0 0 0 3px var(--c-accent-wash);border-color:var(--c-accent)}
.price-filter__apply{
  background:var(--c-cta);color:var(--c-cta-text);border:0;border-radius:var(--r-md);
  font-family:var(--font-body);font-weight:600;
}
.price-filter__apply:hover{background:var(--c-cta-hover)}
.price-filter__field input,.price-filter input[type="number"]{
  border:1.5px solid var(--c-line-strong);border-radius:var(--r-md);color:var(--c-ink);background:var(--c-paper);
}
.price-filter input[type="range"]{accent-color:var(--c-accent)}
.filter-actions__clear{color:var(--c-accent-deep)}
.shop-sidebar__apply{background:var(--c-cta);color:var(--c-cta-text);border-radius:var(--r-md)}
.shop-sidebar__apply:hover{background:var(--c-cta-hover)}
.shop-filter-toggle{border:1.5px solid var(--c-line-strong);color:var(--c-ink);background:var(--c-paper);border-radius:var(--r-md)}
.shop-filter-toggle__count{background:var(--c-accent);color:#fff}

/* ==========================================================================
   TOOLBAR — result count + sort (section 8.1 item 3)
   ========================================================================== */
.shop-toolbar__count{color:var(--c-ink-soft)}
.shop-toolbar__sort select,
.shop-toolbar__sort .orderby{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  color:var(--c-ink);
  background:var(--c-paper);
  border:1.5px solid var(--c-line-strong);
  border-radius:var(--r-md);
  padding:10px 14px;
}
.shop-toolbar__sort select:focus,
.shop-toolbar__sort .orderby:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-wash)}

/* ==========================================================================
   KEUZEHULP BLOCK — section 8.1 item 3 (dark card in the grid flow)
   ========================================================================== */
.shop-keuzehulp{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  background:var(--c-ink);
  color:var(--c-cream);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
}
.shop-keuzehulp__text{max-width:60ch}
.shop-keuzehulp__eyebrow{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-accent);
}
.shop-keuzehulp__title{font-family:var(--font-display);color:var(--c-cream);font-size:var(--fs-xl);margin:var(--sp-1) 0 var(--sp-2)}
.shop-keuzehulp__desc{color:rgba(245,238,225,.8);font-size:var(--fs-base)}
.shop-keuzehulp__cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-cta);color:var(--c-cta-text);
  font-family:var(--font-body);font-weight:600;
  padding:14px 24px;border-radius:var(--r-md);text-decoration:none;
  transition:background .15s;
}
.shop-keuzehulp__cta:hover{background:var(--c-cta-hover);color:var(--c-cta-text)}

/* ==========================================================================
   PAGINATION — centered (.pager look) (section 8.1 item 4)
   ========================================================================== */
.shop-pagination{display:flex;justify-content:center}
.shop-pagination a,
.shop-pagination span{
  border:1.5px solid var(--c-line-strong);
  border-radius:var(--r-md);
  color:var(--c-ink);
  font-family:var(--font-body);font-weight:600;
}
.shop-pagination a:hover{border-color:var(--c-ink);color:var(--c-ink)}
.shop-pagination span.current{background:var(--c-ink);color:var(--c-cream);border-color:var(--c-ink)}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.shop-empty__title{font-family:var(--font-display);color:var(--c-ink)}
.shop-empty__text{color:var(--c-ink-soft)}
.shop-empty .lbc-btn-primary{background:var(--c-cta);color:var(--c-cta-text)}
.shop-empty .lbc-btn-primary:hover{background:var(--c-cta-hover)}

/* Product card surface is retokened site-wide in ds-cards.css. */

/* ==========================================================================
   CATEGORY SEO TEXT — section 8.1 item 5 (retoken; remap legacy vars)
   ========================================================================== */
.category-seo-content{
  --lbc-orange:#FF4A1C;
  --lbc-orange-dark:#D63A10;
  --lbc-orange-light:#FDEDE6;
  --lbc-font-heading:var(--font-display);
}
.category-seo-content h2,
.category-seo-content h3,
.seo-buying-guide__title,
.seo-brands__title,
.seo-faq__title,
.seo-related__title{font-family:var(--font-display);color:var(--c-ink)}
.category-seo-content{color:var(--c-ink-soft)}
.seo-related__link{
  border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);
  color:var(--c-ink);background:var(--c-paper);text-decoration:none;
}
.seo-related__link:hover{border-color:var(--c-ink);color:var(--c-accent-deep)}
.seo-faq__icon{color:var(--c-accent)}

/* "Lees meer" expander — pure CSS (checkbox hack), full text stays in the HTML */
.seo-readmore{position:relative}
.seo-readmore__content{position:relative;max-height:320px;overflow:hidden;transition:max-height .2s var(--ease)}
.seo-readmore__content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom, rgba(245,238,225,0), var(--c-cream));
  pointer-events:none;
}
.seo-readmore__toggle:checked ~ .seo-readmore__content{max-height:none}
.seo-readmore__toggle:checked ~ .seo-readmore__content::after{display:none}
.seo-readmore__label{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--sp-3);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);
  color:var(--c-accent-deep);cursor:pointer;
}
.seo-readmore__label:hover{text-decoration:underline}
.seo-readmore__less{display:none}
.seo-readmore__toggle:checked ~ .seo-readmore__label .seo-readmore__more{display:none}
.seo-readmore__toggle:checked ~ .seo-readmore__label .seo-readmore__less{display:inline}
.seo-readmore__toggle:focus-visible ~ .seo-readmore__label{outline:2px solid var(--c-accent);outline-offset:3px}