/**
 * futbol-mesa CSS — partial 4/6: 04-shop-sidebar. Contiguous slice of the former style.css.
 * Shop page title, sidebar filter cards, price filter, category + tag-cloud widgets, the tag-cloud modal, the brand-filter widget and the sorting toolbar.
 * Load order is load-bearing (LRN-020/TSK-034): enqueued 01->06 in functions.php,
 * before storefront-woocommerce. Do NOT reorder or move rules between partials. @package futbol-mesa
 */
/* PAGE TITLE: Archivo 900, clamp(2rem,4vw,2.8rem). body.fm re-anchor lifts this to
   (0,2,0) so it beats WooCommerce's own title rule without !important (TSK-034).
   font-weight stays 900 either way via the global h1,h2,h3 900 !important. */
body.fm .woocommerce-products-header__title {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--color-ink);
  margin: 0 0 24px 0;
}

/* SIDEBAR FILTER CARDS: white bg, hairline border, radius 14px, padding 18px */
.widget-area .widget,
.widget-area .woocommerce-widget-layered-nav {
  background: #fff;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 24px;
}

.widget-area .widget:last-child {
  margin-bottom: 0;
}

/* Widget title: Archivo 800, 0.78rem, uppercase. !important: the title renders as a
   heading (global h1,h2,h3 forces 900 !important) and storefront-woocommerce.css
   re-styles widget titles after the child loads, so order/specificity alone lose. */
.widget-area .widget-title,
.widget-area .widgettitle,
.widget-area .woocommerce-widget-layered-nav-list__heading {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  margin: 0 0 12px 0 !important;
  /* Storefront underlines widget titles; the mockup has no rule. */
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1.2;
}

/* Price-filter title sits a touch lower than the rest, per the mockup. */
.widget-area .widget_price_filter .widget-title {
  margin-bottom: 14px !important; /* override the widget-title (0,2,0) margin above, itself !important */
}

/* PRICE FILTER: terracotta slider + outline button.
   WC's widget class is `widget_price_filter` (NOT `woocommerce_price_filter`);
   the earlier selector never matched, so the jQuery-UI default purple slider and
   the solid-terracotta button leaked through. */
/* Card bottom padding per mockup (18px 18px 20px). */
.widget-area .widget_price_filter {
  padding-bottom: 20px;
}

/* Kill the form's default bottom margin so the card hugs the footer row. */
.widget_price_filter form {
  margin-bottom: 0;
}

.widget_price_filter .price_slider_wrapper {
  /* The footer (.price_slider_amount) lives INSIDE this wrapper, so a wrapper
     bottom margin just adds dead space under the card. */
  margin-bottom: 0;
}

/* Slider track / range / handles → terracotta, overriding the jQuery-UI theme.
   body.fm re-anchor (0,4,0) beats woocommerce.css's own .widget_price_filter
   .ui-slider rules (0,3,0) and WC's inline purple accent, both of which print
   AFTER these partials (TSK-034 moved these out of style.css, which used to load
   last; the re-anchor restores the win without !important). */
body.fm .widget_price_filter .price_slider.ui-slider {
  background: var(--color-hairline);
  height: 4px;
  border: none;
  border-radius: var(--radius-pill);
  margin: 18px 4px 16px;
}

body.fm .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--color-terracotta);
  border-radius: var(--radius-pill);
}

body.fm .widget_price_filter .ui-slider .ui-slider-handle {
  width: 16px;
  height: 16px;
  /* Center on the 5px track: top to track mid, then pull up half the handle. */
  top: 50%;
  margin-top: -8px;
  margin-left: -8px;
  background: #fff;
  border: 2px solid var(--color-terracotta);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(24, 17, 14, 0.25);
  cursor: pointer;
}

/* Footer row: price label left, "Filtrar" button right, no trailing gap.
   WC lays this out with floats + a .clear spacer; flex it instead. */
.widget_price_filter .price_slider_amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.widget_price_filter .price_slider_amount .price_label {
  order: 1;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.widget_price_filter .price_slider_amount .price_label .from,
.widget_price_filter .price_slider_amount .price_label .to {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  color: var(--color-ink);
}

.widget_price_filter .price_slider_amount button.button {
  order: 2;
}

/* The float-clearing spacer would add an empty row under the flex footer. */
.widget_price_filter .price_slider_amount .clear {
  display: none;
}

/* body.fm re-anchor (0,3,0) beats the site-wide .woocommerce button.button and
   storefront-woocommerce's .button rules without !important (TSK-034). */
body.fm .widget_price_filter button.button {
  background-color: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}

body.fm .widget_price_filter button.button:hover,
body.fm .widget_price_filter button.button:focus {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

/* PRODUCT CATEGORIES WIDGET: count pills + "Ver todas" link.
   Real WC class is `widget_product_categories`; the count is a <span> SIBLING of
   the link (not nested), so the flex row lives on the <li>. */
.widget_product_categories .product-categories {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Zero Storefront's default <li> bottom margin so the flex `gap` controls
   spacing (otherwise items sit ~19px apart, not the mockup's tight 2px). */
.widget_product_categories .product-categories li {
  margin: 0;
}

.widget_product_categories .product-categories li.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-hairline-faint);
}

/* Body grey, not terracotta — beats the global `.widget a` content-link color. */
.widget_product_categories .product-categories a {
  color: var(--color-body); /* (0,3,0) outranks the global .widget a (0,2,0) */
  text-decoration: none;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.2;
}

.widget_product_categories .product-categories a:hover {
  color: var(--color-terracotta);
}

.widget_product_categories .product-categories .count {
  background: var(--color-cream);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.widget_product_categories .product-categories .more-link {
  display: block;
  margin-top: 12px;
  padding: 0;
  border-bottom: none;
}

.widget_product_categories .product-categories .more-link a {
  color: var(--color-terracotta); /* (0,4,0) outranks the global .widget a (0,2,0) */
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* TAG CLOUD WIDGET: uniform pill chips + "Ver más" link.
   Real WC class is `widget_product_tag_cloud`. WC prints a per-tag inline
   font-size (e.g. style="font-size:22pt"); a stylesheet !important beats the
   non-important inline rule, so the chips render at one size. */
.widget_product_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  line-height: 1.4;
}

.widget_product_tag_cloud .tagcloud a.tag-cloud-link {
  padding: 5px 11px;
  margin: 0;
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  /* Body grey + normal weight (beats the global terracotta + any cloud weight). */
  color: var(--color-body); /* (0,3,0) outranks the global .widget a (0,2,0) */
  font-weight: 400 !important; /* beat any tag-cloud weight */
  text-decoration: none;
  font-size: 0.78rem !important; /* beat WC's per-tag inline font-size (e.g. 22pt) */
}

.widget_product_tag_cloud .tagcloud a.tag-cloud-link:hover {
  background: #fff;
  border-color: var(--color-terracotta);
  color: var(--color-terracotta); /* (0,3,0) outranks the global .widget a:hover (0,2,0) */
}

/* TSK-044: overflow tags now rendered inside a <dialog> modal instead of
   in-place expansion. Old overflow <span> CSS removed. */

/* "Ver más" sits on its own row under the chips (card footer), not inline. */
.widget_product_tag_cloud .tagcloud a.more-link {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-terracotta); /* (0,3,0) outranks the global .widget a (0,2,0) */
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* TAG CLOUD MODAL: fullscreen dialog showing all tags. */
.tag-cloud-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: none;
  padding: 0;
  margin: 0;
  background: #fff;
  z-index: 1000;
}

.tag-cloud-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.tag-cloud-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--color-hairline);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1001;
}

.tag-cloud-modal__header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-body);
}

.tag-cloud-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-body);
  font-size: 0;
  transition: all 0.2s ease;
}

.tag-cloud-modal__close::before {
  content: '✕';
  font-size: 1.25rem;
  line-height: 1;
}

.tag-cloud-modal__close:hover {
  background: var(--color-cream);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.tag-cloud-modal__close:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

.tag-cloud-modal__content {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: flex-start;
}

/* Reuse tag-cloud chip styling inside modal. */
.tag-cloud-modal__content > a.tag-cloud-link {
  padding: 5px 11px;
  margin: 0;
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-body) !important;
  font-weight: 400 !important;
  text-decoration: none;
  font-size: 0.78rem !important;
  transition: all 0.2s ease;
}

.tag-cloud-modal__content > a.tag-cloud-link:hover {
  background: #fff;
  border-color: var(--color-terracotta);
  color: var(--color-terracotta) !important;
}

.tag-cloud-modal__content > a.tag-cloud-link:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Category names run longer than tag words, so the flex-wrap pill cloud
   above forces multi-line text into a circle. Match the sidebar category
   list's own flat-row style instead, flowed into columns to fit the
   fullscreen modal. */
.tag-cloud-modal__content--categories {
  display: block;
  columns: 280px 4;
  column-gap: 32px;
}

.tag-cloud-modal__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline-faint);
  color: var(--color-body) !important;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  break-inside: avoid;
}

.tag-cloud-modal__category:hover {
  color: var(--color-terracotta) !important;
}

.tag-cloud-modal__category:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

.tag-cloud-modal__category .count {
  background: var(--color-cream);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

/* BRAND FILTER WIDGET: real checkboxes (terracotta accent) + count pills,
   multi-select via the "Aplicar" submit. Rendered by Futbol_Mesa_Brand_Filter_Widget. */
/* The form's default bottom margin would add dead space under the card. */
.brand-filter {
  margin-bottom: 0;
}

.brand-filter__list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Zero Storefront's <li> margin so flex `gap` is the only spacing. */
.brand-filter__list .brand-filter__item {
  margin: 0;
  padding: 0;
}

.brand-filter__label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--color-body);
}

.brand-filter__label:hover {
  color: var(--color-terracotta);
}

.brand-filter__checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-terracotta);
}

.brand-filter__name {
  flex: 1;
  line-height: 1.2;
}

.brand-filter__count {
  background: var(--color-cream);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.brand-filter__apply {
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}

.brand-filter__apply:hover,
.brand-filter__apply:focus {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

/* TOOLBAR: result count + ordering (pill style) */
.storefront-sorting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap when the row is too narrow for both: the ordering block drops to a
     second line and, as a lone item under space-between, aligns flush left —
     stacking "Mostrando…" above "Ordenar", both left (mockup fix). */
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: 24px;
}

/* Storefront's clearfix ::before/::after become zero-width flex items here and,
   with the gap, shove the result count ~32px off the left edge. Remove them. */
.storefront-sorting::before,
.storefront-sorting::after {
  content: none;
}

/* Top toolbar (the .storefront-sorting right after the page header): no pagination,
   result count flush left, "Ordenar" + ordering pill on the right. */
.woocommerce-products-header + .storefront-sorting .woocommerce-pagination,
.woocommerce-products-header + .storefront-sorting .woocommerce-notices-wrapper {
  display: none;
}

.woocommerce-products-header + .storefront-sorting .woocommerce-result-count {
  order: 1;
  margin: 0 auto 0 0;
}

.woocommerce-products-header + .storefront-sorting .woocommerce-ordering {
  order: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* "Ordenar" label before the sort select, per mockup. */
.woocommerce-products-header + .storefront-sorting .woocommerce-ordering::before {
  content: 'Ordenar';
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-right: 10px;
  white-space: nowrap;
}

/* Bottom toolbar (the .storefront-sorting right after the product loop): show only
   the pagination, simple and centered — drop the duplicate ordering + result count. */
.woocommerce ul.products + .storefront-sorting {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.woocommerce ul.products + .storefront-sorting .woocommerce-ordering,
.woocommerce ul.products + .storefront-sorting .woocommerce-result-count,
.woocommerce ul.products + .storefront-sorting .woocommerce-notices-wrapper {
  display: none;
}

.woocommerce-result-count {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  background: #fff;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-ink);
  padding: 9px 38px 9px 16px !important; /* beat storefront-woocommerce's select padding (loads after the child) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A84830' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  appearance: none;
  padding-right: 38px;
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
  border-color: var(--color-terracotta);
}