/* Catalog — ported verbatim from reference/css/pages/catalogo.css (filters, zone map of lalita/zone-map, price, loop and
   pagination; kept in one file to keep the reference order). Selectors adapted to WordPress follow at the end. */

/* ---------- filters: frame and toolbar ---------- */
.lm-filters {
  padding-block: var(--wp--preset--spacing--60);
  border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
}
.lm-filters__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50); }
.lm-filters__open { display: none; }
.lm-filters__count { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.lm-filters__count[hidden] { display: none; }
.lm-filters__cats { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); min-width: 0; }
.lm-filters__sort { display: flex; align-items: center; flex-shrink: 0; gap: var(--wp--preset--spacing--30); }
.lm-filters__sort-label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* Wide enough for the longest option ("Precio: menor a mayor") next to the chevron. */
.lm-filters__sort .lm-select { width: 216px; }
.lm-filters__sort .lm-field { min-height: var(--wp--custom--control--md); font-size: var(--wp--preset--font-size--ui); font-weight: var(--wp--custom--font-weight--semibold); }

/* ---------- filters: zone + price row (becomes the bottom sheet on mobile) ---------- */
.lm-filters__sheet { margin-top: var(--wp--preset--spacing--70); }
.lm-filters__sheet-head, .lm-filters__sheet-foot, .lm-filters__scrim { display: none; }
.lm-filters__body { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--90); }
.lm-filters__side { flex-shrink: 0; width: 280px; }
.lm-filters__applied { margin-top: var(--wp--preset--spacing--60); }
.lm-filters__active { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); }
.lm-filters__none { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* Remove button inside a tag: 24px visible, 44px hit area. */
.lm-filters__remove {
  position: relative; display: grid; place-items: center; width: 24px; height: 24px;
  margin-right: calc(-1 * var(--wp--preset--spacing--20));
  border-radius: var(--wp--custom--radius--pill);
}
.lm-filters__remove::after { content: ""; position: absolute; inset: -10px; }
.lm-filters__remove:hover { background: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent); }
.lm-filters__remove:focus-visible { outline-color: var(--wp--preset--color--contrast); outline-offset: 1px; }

/* ---------- zone filter ---------- */
.lm-zone { flex: 1; min-width: 0; }
.lm-zone__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--40); }
.lm-zone__box { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.lm-zone__subhead { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); }
.lm-zone__hint { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--muted); }
.lm-zone__view { display: flex; align-items: center; gap: var(--wp--preset--spacing--70); }
.lm-zone__view[hidden] { display: none; }
.lm-zone__info { flex: 1; min-width: 0; }
.lm-zone__text { max-width: 560px; font-size: var(--wp--preset--font-size--ui); color: var(--wp--preset--color--secondary); }
.lm-zone__text strong { color: var(--wp--preset--color--contrast); font-weight: var(--wp--custom--font-weight--bold); }
.lm-zone__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--40); }
.lm-zone__more-label { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--muted); }
.lm-zone__chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.lm-zone__note { max-width: 560px; margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--muted); }
.lm-zone__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--wp--preset--spacing--20); }
.lm-zone__list .lm-chip { width: 100%; padding-inline: var(--wp--preset--spacing--30); }
.lm-zone .lm-chip--soft.is-selected { border-color: var(--wp--preset--color--accent); }

/* ---------- zone map: a drawing with HTML hotspots on top ----------
   Hotspot = 44px button centred on --x / --y; ::before is the ring, ::after the dot, the label hangs on one side. */
.lm-zone-map { position: relative; flex-shrink: 0; }
.lm-zone-map--ear { width: 180px; height: 216px; margin-left: var(--wp--preset--spacing--30); }
.lm-zone-map__art { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent); }
.lm-zone-map__fold { opacity: 0.6; }
.lm-zone-map__zone {
  position: absolute; left: var(--x); top: var(--y);
  display: grid; place-items: center; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--muted);
}
.lm-zone-map__zone::before, .lm-zone-map__zone::after {
  content: ""; grid-area: 1 / 1; border-radius: var(--wp--custom--radius--pill);
  transition: background-color var(--wp--custom--motion--fast) ease, border-color var(--wp--custom--motion--fast) ease, transform var(--wp--custom--motion--fast) ease;
}
.lm-zone-map__zone::before { width: 24px; height: 24px; border: var(--wp--custom--border--control) solid color-mix(in srgb, var(--wp--preset--color--faint) 60%, transparent); }
.lm-zone-map__zone::after { width: 10px; height: 10px; background: var(--wp--preset--color--faint); }
.lm-zone-map__label {
  position: absolute; top: 50%; left: calc(50% + var(--gap, 16px)); transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--caption); font-weight: var(--wp--custom--font-weight--semibold);
  line-height: var(--wp--custom--line-height--control); white-space: nowrap;
  transition: color var(--wp--custom--motion--fast) ease;
}
.lm-zone-map__zone--left .lm-zone-map__label { left: auto; right: calc(50% + var(--gap, 16px)); }
/* Callout: the label sits outside the drawing (--gap px from the dot) and a leader line joins them. */
.lm-zone-map__zone--callout .lm-zone-map__label::after {
  content: ""; position: absolute; top: 50%; left: calc(100% + 4px); width: calc(var(--gap) - 20px); height: 1px;
  background: currentColor; opacity: 0.45;
}
.lm-zone-map__zone--callout.lm-zone-map__zone--right .lm-zone-map__label::after { left: auto; right: calc(100% + 4px); }
.lm-zone-map__zone:hover { color: var(--wp--preset--color--contrast); }
.lm-zone-map__zone:hover::before { border-color: var(--wp--preset--color--accent); }
.lm-zone-map__zone:hover::after { background: var(--wp--preset--color--accent); }
.lm-zone-map__zone.is-selected { color: var(--wp--preset--color--accent); }
.lm-zone-map__zone.is-selected::before { border-color: var(--wp--preset--color--accent); }
.lm-zone-map__zone.is-selected::after { background: var(--wp--preset--color--accent); transform: scale(1.4); }

/* Body map: placeholder frame until the client's silhouette SVG arrives. Hotspots are 28px tall here
   so neighbouring zones never overlap on the 200px frame. */
.lm-zone-map--body {
  width: 120px; height: 200px;
  border: var(--wp--custom--border--hairline) dashed var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--lg);
}
.lm-zone-map--body .lm-zone-map__zone { height: 28px; }
.lm-zone-map__pending {
  position: absolute; left: 0; right: 0; bottom: var(--wp--preset--spacing--30); text-align: center;
  font-size: var(--wp--preset--font-size--tiny); line-height: var(--wp--custom--line-height--snug); color: var(--wp--preset--color--muted);
}

/* ---------- price range (static two-handle slider) ---------- */
.lm-price__track {
  position: relative; height: 4px;
  margin-top: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--pill);
}
.lm-price__fill { position: absolute; top: 0; bottom: 0; left: var(--from); right: calc(100% - var(--to)); background: var(--wp--preset--color--accent); border-radius: var(--wp--custom--radius--pill); }
.lm-price__handle {
  position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: var(--wp--custom--radius--pill); cursor: grab;
}
.lm-price__handle::after {
  content: ""; width: 18px; height: 18px; border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--contrast); border: 3px solid var(--wp--preset--color--accent);
}
.lm-price__handle--from { left: var(--from); }
.lm-price__handle--to { left: var(--to); }
.lm-price__values { display: flex; justify-content: space-between; font-size: var(--wp--preset--font-size--ui); font-weight: var(--wp--custom--font-weight--semibold); line-height: var(--wp--custom--line-height--snug); color: var(--wp--preset--color--secondary); }

/* ---------- product loop + pagination ---------- */
.lm-catalog { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--130); }
.lm-catalog .lm-pagination { margin-top: var(--wp--preset--spacing--100); }

/* =====================================================================
   TABLET — categories scroll sideways next to the sort; zone and price stack.
   ===================================================================== */
@media (max-width: 1023px) {
  .lm-filters__bar { gap: var(--wp--preset--spacing--40); }
  /* One row that scrolls: a fade on the right edge hints at the chips that are out of view. */
  .lm-filters__cats {
    flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-block: var(--wp--preset--spacing--20); margin-block: calc(-1 * var(--wp--preset--spacing--20));
    padding-right: var(--wp--preset--spacing--70);
    -webkit-mask-image: linear-gradient(to right, var(--wp--preset--color--base) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, var(--wp--preset--color--base) calc(100% - 32px), transparent);
  }
  .lm-filters__cats::-webkit-scrollbar { display: none; }
  .lm-filters__cats li { flex-shrink: 0; }
  .lm-filters__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .lm-filters__body { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--70); }
  .lm-filters__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--90); width: auto; }
  .lm-filters__applied { margin-top: 0; }

  /* Touch: the placeholder frame grows so the four hotspots can be 40px tall without overlapping. */
  .lm-zone-map--body { height: 288px; }
  .lm-zone-map--body .lm-zone-map__zone { height: 40px; }
  .lm-zone__chips .lm-chip--sm { min-height: var(--wp--custom--control--sm); padding-inline: var(--wp--preset--spacing--40); }

  .lm-catalog { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--120); }
  .lm-catalog .lm-pagination { margin-top: var(--wp--preset--spacing--90); }
}

/* =====================================================================
   MOBILE — toolbar [Filtrar] [sort] + scrolling categories; zone + price in a bottom sheet.
   ===================================================================== */
@media (max-width: 639px) {
  .lm-filters { padding-block: var(--wp--preset--spacing--40); }
  .lm-filters__bar {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "open sort" "cats cats";
    gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  }
  .lm-filters__open { grid-area: open; display: inline-flex; padding-inline: var(--wp--preset--spacing--50); }
  .lm-filters__sort { grid-area: sort; }
  .lm-filters__sort .lm-select { width: 100%; }
  /* Categories bleed to the screen edges; the cut-off chip is the scroll hint. */
  .lm-filters__cats {
    grid-area: cats;
    margin-inline: calc(-1 * var(--wp--custom--layout--gutter)); padding-inline: var(--wp--custom--layout--gutter);
    scroll-padding-inline: var(--wp--custom--layout--gutter);
    -webkit-mask-image: none; mask-image: none;
  }

  /* Bottom sheet: closed = not rendered; open = slides up over a scrim. */
  .lm-filters__sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--wp--custom--z-index--dialog);
    display: none; flex-direction: column; max-height: 85vh; margin-top: 0;
    background: var(--wp--preset--color--surface);
    border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line-strong);
    border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0;
    box-shadow: var(--wp--preset--shadow--pop);
  }
  .lm-filters__sheet.is-open { display: flex; animation: lm-sheet-in var(--wp--custom--motion--base) var(--wp--custom--motion--ease); }
  .lm-filters__sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); flex-shrink: 0;
    padding: var(--wp--preset--spacing--40) var(--wp--custom--layout--gutter);
    border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  }
  .lm-filters__sheet-title { font-size: var(--wp--preset--font-size--huge); }
  .lm-filters__body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    gap: var(--wp--preset--spacing--80);
    padding: var(--wp--preset--spacing--60) var(--wp--custom--layout--gutter) var(--wp--preset--spacing--70);
  }
  .lm-filters__sheet-foot {
    display: block; flex-shrink: 0;
    padding: var(--wp--preset--spacing--40) var(--wp--custom--layout--gutter);
    padding-bottom: max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
    border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  }
  .lm-filters__scrim { position: fixed; inset: 0; z-index: var(--wp--custom--z-index--drawer); background: var(--wp--preset--color--scrim); }
  .lm-filters__sheet.is-open + .lm-filters__scrim { display: block; animation: lm-scrim-in var(--wp--custom--motion--base) ease; }

  .lm-filters__side { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--70); }

  /* Inside the sheet the zone views need no frame of their own. */
  .lm-zone__box { padding: 0; border: 0; border-radius: 0; background: none; }
  .lm-zone__subhead { flex-wrap: wrap; }
  .lm-zone__view { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--60); }
  .lm-zone-map { align-self: center; }
  .lm-zone__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lm-catalog { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--110); }
  .lm-catalog .lm-pagination { margin-top: var(--wp--preset--spacing--80); }
}

@keyframes lm-sheet-in { from { transform: translateY(100%); } }
@keyframes lm-scrim-in { from { opacity: 0; } }

/* ---------- WordPress DOM ---------- */
/* The product grid sits in a Product Collection block, whose own stylesheet adds a 30px bottom margin the
   reference grid does not have: neutralised with the specificity it needs. */
.lm-catalog .wp-block-woocommerce-product-collection { margin-bottom: 0; }