/*
Theme Name:   La Equipación
Theme URI:    https://laequipacion.com
Description:  Storefront for La Equipación. Child of Astra, but the shop templates, header and footer are all overridden — the layout follows the conventions of a modern sportswear catalogue: a sticky filter rail, a wide square-tile product grid, and a product page built around one large image and a size grid.
Author:       La Equipación
Version:      3.6.0
Template:     astra
Text Domain:  laequipacion
*/

/* ==========================================================================
   Design tokens

   Helvetica is the reference face for this kind of catalogue. We use the copy
   already installed on the reader's machine rather than shipping a licensed
   webfont — it costs no network request and it is what the design was drawn
   for. Nimbus Sans is the metric-compatible free clone found on Linux.
   ========================================================================== */

:root {
  --ink:        #111111;
  --muted:      #707072;
  --line:       #cacacb;
  --line-soft:  #e5e5e5;
  --tile:       #e5e5e5;
  --accent:     #d33918;
  --paper:      #ffffff;
  --wash:       #f5f5f5;

  --font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;

  --util-h:   36px;
  --head-h:   60px;
  --subnav-h: 56px;
  --rail-w:   192px;
  --gutter:   48px;

  --radius-pill: 999px;
  --radius-box:  4px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset over Astra

   Astra ships opinionated container widths, headings and button styles. The
   templates here use their own class names, but Astra's element-level rules
   still land, so the ones that fight the layout are neutralised up front.
   ========================================================================== */

body,
body.woocommerce,
body.woocommerce-page {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ast-container,
.site-content .ast-container {
  max-width: none;
  padding: 0;
  display: block;
}

#primary,
#content .ast-container > #primary {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

.ast-separate-container #primary,
.ast-separate-container .site-main > article {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.laeq-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Keyboard users need to see where they are; the design is otherwise very
   low-contrast on focus. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.laeq-util {
  background: var(--wash);
  height: var(--util-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 var(--gutter);
  font-size: 12px;
  font-weight: 500;
}
.laeq-util a { padding: 0 4px; }
.laeq-util a:hover { color: var(--muted); }
.laeq-util .sep { color: var(--line); }

.laeq-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  height: var(--head-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
}

.laeq-logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  justify-self: start;
  line-height: 1;
}
.laeq-logo span { color: var(--accent); }

.laeq-nav {
  display: flex;
  gap: 24px;
  justify-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.laeq-nav li { margin: 0; }
.laeq-nav a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: var(--head-h);
  padding: 0 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.laeq-nav a:hover,
.laeq-nav .current-menu-item > a {
  border-bottom-color: var(--ink);
}

.laeq-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.laeq-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wash);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  height: 40px;
  transition: background 0.15s var(--ease);
}
.laeq-search:focus-within { background: var(--line-soft); }
.laeq-search svg { flex: none; }
.laeq-search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  width: 130px;
  padding: 0;
  color: var(--ink);
}
.laeq-search input:focus { outline: none; }
.laeq-search input::placeholder { color: var(--muted); }
/* Site-wide, despite reading like a WooCommerce patch. Astra's shop sheet has
   `.woocommerce-page input[type="search"]` (0,2,1) with a white background,
   which outranks `.laeq-search input` (0,1,1) above — so the pill went white on
   shop, product, cart, checkout and account, and stayed grey only on the home
   page. `body` + the attribute makes ours (0,2,2): it wins on specificity
   rather than on which stylesheet happens to load last. */
body .laeq-search input[type="search"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: auto;
  line-height: normal;
}

.laeq-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  position: relative;
  transition: background 0.15s var(--ease);
}
.laeq-icon:hover { background: var(--wash); }
.laeq-icon .count {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  text-align: center;
}

.laeq-burger { display: none; }

/* League strip under the header. */
.laeq-subnav {
  height: var(--subnav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.laeq-subnav::-webkit-scrollbar { display: none; }
.laeq-subnav a {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.15s var(--ease);
}
.laeq-subnav a:hover,
.laeq-subnav a[aria-current] { color: var(--ink); }

/* Only where the header nav is not. Above the burger breakpoint both rows list
   the same five leagues; below it the header nav collapses and this strip
   becomes the only nav on screen. */
@media (min-width: 1181px) {
  .laeq-subnav { display: none; }
}

/* The header runs out of room long before it runs out of screen. Measured at
   1440: logo 164 + nav 749 + tools 280 + two 48px gutters leaves 17px between
   "Mi cuenta" and the search box, and by 1257 they touch and the nav wraps to
   a second line straight through the logo.
 *
   Two tiers rather than one. Here the nav tightens and the search field gives
   up 40px, which is enough down to about 1150 and keeps every link and the
   search box reachable on a 1280 laptop. Below that there is no honest way to
   fit eight links, so the burger takes over. */
@media (max-width: 1300px) {
  .laeq-nav { gap: 14px; }
  .laeq-nav a { font-size: 14.5px; }
  .laeq-search { padding: 0 12px; }
  .laeq-search input { width: 90px; }
}

@media (max-width: 1180px) {
  .laeq-nav,
  .laeq-search { display: none; }
  .laeq-burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
  .laeq-head { grid-template-columns: auto 1fr auto; position: sticky; }

  /* Menu panel: anchored to the header rather than the viewport, so it lands
     under it whether or not the utility strip is on screen. */
  body.laeq-menu-open .laeq-nav,
  body.laeq-menu-open .laeq-search {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 80;
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    padding: 16px var(--gutter);
  }
  /* The nav is a direct child of the header, and the header is a grid. An
     absolutely positioned grid child is laid out inside its grid area, not the
     container's padding box, and `normal` self-alignment then shrink-wraps it:
     left/right both said 0 and the panel still came out 171px wide, centred
     over the products. Asking for the stretch explicitly is what makes the
     panel span the header. The search escapes this because it sits one level
     down inside `.laeq-tools`, which is flex. */
  body.laeq-menu-open .laeq-nav { justify-self: stretch; width: auto; }

  /* Without a scrim the dropdown reads as a floating card over live product
     tiles; the page underneath is already scroll-locked, so it should look it.
     Hung off <body>, not off the header: the header is a stacking context of
     its own (sticky + z-index), so a scrim inside it paints over the header
     bar as well and greys out the burger you need in order to close it. At 50
     it sits under the whole header group — bar and panel both — and over
     everything else. */
  body.laeq-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(17, 17, 17, 0.4);
  }
  body.laeq-menu-open .laeq-search {
    height: 56px;
    align-items: center;
    border-radius: 0;
    background: var(--paper);
  }
  body.laeq-menu-open .laeq-search input { width: 100%; }
  body.laeq-menu-open .laeq-nav {
    top: calc(100% + 56px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    bottom: auto;
    max-height: calc(100vh - var(--head-h) - 56px);
    overflow-y: auto;
    box-shadow: 0 24px 40px -24px rgba(0,0,0,0.35);
  }
  body.laeq-menu-open .laeq-nav a {
    line-height: 1;
    padding: 16px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  body.laeq-menu-open { overflow: hidden; }
}

/* ==========================================================================
   Product listing page
   ========================================================================== */

.laeq-plp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--gutter) 14px;
}
.laeq-plp-head h1 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
}
.laeq-plp-head .count { color: var(--muted); font-weight: 400; }

.laeq-plp-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  font-weight: 500;
  flex: none;
}
.laeq-filter-toggle {
  background: none;
  border: 0;
  font: 500 16px var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--ink);
  /* The label swaps between "Ocultar filtros" and "Mostrar filtros"; without
     this it wraps onto two lines and the toolbar row jumps as it toggles. */
  white-space: nowrap;
}
.laeq-sort {
  border: 0;
  background: transparent;
  font: 500 16px var(--font);
  cursor: pointer;
  color: var(--ink);
  padding-right: 4px;
}

.laeq-plp {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: 60px;
  padding: 0 var(--gutter) 80px;
  align-items: start;
}
.laeq-plp[data-rail="closed"] { grid-template-columns: 1fr; gap: 0; }
.laeq-plp[data-rail="closed"] .laeq-rail { display: none; }

/* --- filter rail --- */

.laeq-rail {
  position: sticky;
  top: calc(var(--head-h) + 16px);
  max-height: calc(100vh - var(--head-h) - 32px);
  overflow-y: auto;
  padding-bottom: 24px;
  scrollbar-width: thin;
}
.laeq-rail-quick { list-style: none; margin: 0 0 20px; padding: 0; }
.laeq-rail-quick li { margin-bottom: 10px; }
.laeq-rail-quick a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.laeq-rail-quick a:hover { color: var(--muted); }
.laeq-rail-quick a[aria-current="true"] { text-decoration: underline; text-underline-offset: 3px; }

.laeq-rail-clear {
  display: inline-block;
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 18px;
}
.laeq-rail-clear:hover { color: var(--ink); }

.laeq-facet { border-top: 1px solid var(--line-soft); }

.laeq-facet > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  user-select: none;
}
.laeq-facet > summary::-webkit-details-marker { display: none; }
.laeq-facet > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.laeq-facet[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.laeq-facet-body { padding-bottom: 16px; }
.laeq-facet-body.is-scroll { max-height: 320px; overflow-y: auto; }

/* League headings inside the club list. Sticky, because the whole point of the
   heading is knowing which country you are scrolling through. */
.laeq-facet-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 14px 0 4px;
  padding: 4px 0;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #757575;
}
.laeq-facet-heading:first-child { margin-top: 0; }

.laeq-facet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.4;
}
.laeq-facet-item:hover { color: var(--muted); }
.laeq-facet-box {
  flex: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  display: grid;
  place-items: center;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.laeq-facet-item[aria-pressed="true"] { color: var(--ink); }
.laeq-facet-item[aria-pressed="true"] .laeq-facet-box {
  background: var(--ink);
  border-color: var(--ink);
}
.laeq-facet-box svg { opacity: 0; }
.laeq-facet-item[aria-pressed="true"] .laeq-facet-box svg { opacity: 1; }

.laeq-rail-done { margin-top: 18px; width: 100%; height: 48px; }

/* --- grid --- */

.laeq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* The editorial band spans two tracks. At three columns it lands cleanly on
     the second row, but at two (≤640px) it cannot fit beside the product
     before it, so it wraps and strands an empty cell. Dense packing pulls the
     next product back into that hole. It decouples visual order from DOM
     order for that one card only — acceptable in a catalogue grid, where the
     sequence carries no meaning and tab order still follows the markup. */
  grid-auto-flow: dense;
}
.laeq-grid > li { margin: 0; }

.laeq-card { display: block; padding-bottom: 24px; }

/* Square, which is what Nike's own grid uses — measured off their Barcelona
   listing at 1184x1184 — even though their product page is 4:5. The two ratios
   are deliberate on their side and copied deliberately here. */
.laeq-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  overflow: hidden;
}

/* `contain`, not `cover`. The photography is 4:5 and the tile is 1:1, so
   `cover` cropped the collar off the top of every shirt and the hem off the
   bottom — which is exactly what it is asked to do, and is why it went unnoticed
   while the images were square drawings. Containing letterboxes it instead, and
   the letterbox is invisible because the photograph's own backdrop is rendered
   as --tile, the same colour this box is painted. */
.laeq-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--ease);
}
.laeq-card:hover .laeq-card-media img { transform: scale(1.035); }

/* The back of the shirt, stacked over the front and cross-faded in on hover,
   which is the move Nike's own grid makes.

   Both frames sit in the DOM rather than one src being swapped: a swap leaves
   an empty tile for however long the fetch takes, which is precisely when the
   shopper is looking at it. The cost is one lazy request per card, and it buys
   the only place in the whole storefront where the reverse of a garment is
   visible while browsing.

   Positioned and hidden unconditionally, but revealed only under (hover: hover).
   The other way round — putting the positioning inside the query — drops the
   second image back into normal flow on a phone, where it stacks up underneath
   the first and doubles the height of every card in the grid. */
.laeq-card-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
@media (hover: hover) {
  .laeq-card:hover .laeq-card-alt { opacity: 1; }
}

.laeq-card-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-box);
}

.laeq-card-body { padding: 14px 8px 0; }
.laeq-card-msg {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--accent);
}
.laeq-card-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  margin: 0;
}
.laeq-card-sub {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--muted);
}
.laeq-card-price {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  margin-top: 8px;
}
.laeq-card-price del { color: var(--muted); font-weight: 400; margin-right: 8px; }
.laeq-card-price ins { text-decoration: none; }
.laeq-card-price .laeq-off { color: var(--accent); margin-left: 8px; font-weight: 400; }

/* An editorial tile: same grid, two columns wide, no product behind it. */
.laeq-editorial {
  grid-column: span 2;
  position: relative;
  /* No aspect-ratio: as a grid item it stretches to the row, which is what
     keeps its bottom edge level with the product card beside it. A fixed
     ratio left a band of white under it on desktop, and at two columns it
     clipped its own paragraph. */
  min-height: 200px;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  overflow: hidden;
}
.laeq-editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 44px);
}
.laeq-editorial > * { position: relative; z-index: 1; }
.laeq-editorial h2 {
  color: #fff;
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 6px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.laeq-editorial p { color: rgba(255,255,255,0.8); margin: 0 0 20px; max-width: 44ch; }
.laeq-editorial .laeq-btn-ghost { align-self: flex-start; }

.laeq-empty { padding: 60px 0 120px; max-width: 52ch; }
.laeq-empty h2 { font-size: 22px; margin: 0 0 10px; }
.laeq-empty p { color: var(--muted); margin: 0 0 20px; }

.laeq-pagination { padding: 40px 0 0; }
.laeq-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.laeq-pagination a, .laeq-pagination span {
  display: grid;
  place-items: center;
  min-width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
}
.laeq-pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.laeq-btn,
.laeq-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.laeq-btn { background: var(--ink); color: #fff; }
.laeq-btn:hover { background: #3a3a3a; color: #fff; }
.laeq-btn:disabled { background: var(--line); color: #fff; cursor: not-allowed; }

.laeq-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.laeq-btn-ghost:hover { border-color: var(--ink); }
.laeq-editorial .laeq-btn-ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.laeq-editorial .laeq-btn-ghost:hover { background: #fff; color: var(--ink); }

.laeq-btn-block { width: 100%; }

/* The favourite button had state but no appearance: clicking it wrote to
   localStorage and flipped aria-pressed, and nothing on screen moved. The heart
   ships as an outline (`fill="none"` sits on the SVG element itself); a CSS
   `fill` overrides a presentation attribute, so filling it costs no second
   icon. */
.laeq-fav svg { transition: fill 0.15s var(--ease); }
.laeq-fav[aria-pressed="true"] { border-color: var(--ink); }
.laeq-fav[aria-pressed="true"] svg { fill: currentColor; }

/* Before a size is picked WooCommerce marks the button with a `disabled`
   *class*, not the attribute — :disabled never matches it. */
button.laeq-btn.disabled,
button.laeq-btn.disabled:hover,
button.laeq-btn[disabled],
.laeq-btn[disabled] {
  background: var(--line);
  border-color: var(--line);
  color: #fff;
  cursor: not-allowed;
}

/* Astra's floating "back to top" pill. Nothing in the design has one, and it
   arrives in the theme accent colour. */
#ast-scroll-top { display: none !important; }

/* --------------------------------------------------------------------------
   Undoing Astra's blanket button styling

   Astra paints bare `button` in three states from a stylesheet loaded after
   this one. The base rule is `button` — specificity 0,0,1 — so it loses to any
   class here and the buttons look right at rest. But the other two are
   `button:hover` and `button:focus`, specificity 0,1,1, and those outrank every
   single-class rule in this file: hover anything, or click it and leave it
   focused, and it turns Astra blue.

   Prefixing with `body` buys the one element of specificity needed to win. It
   costs nothing at runtime, keeps the rules legible, and avoids both
   `!important` and the usual class-doubling trick.

   Every button the theme renders is listed below. A new one has to be added
   here as well, or it will flash blue the first time somebody touches it.
   -------------------------------------------------------------------------- */

body .laeq-btn:hover,
body .laeq-btn:focus,
body .laeq-btn:active           { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }

/* Listed after the enabled states so the pre-selection grey survives a hover. */
body button.laeq-btn.disabled:hover,
body button.laeq-btn.disabled:focus,
body .laeq-btn[disabled]:hover,
body .laeq-btn[disabled]:focus  { background: var(--line); border-color: var(--line); color: #fff; }

body .laeq-btn-ghost:hover,
body .laeq-btn-ghost:focus,
body .laeq-btn-ghost:active     { background: transparent; border-color: var(--ink); color: var(--ink); }
body .laeq-editorial .laeq-btn-ghost:hover,
body .laeq-editorial .laeq-btn-ghost:focus { background: #fff; border-color: #fff; color: var(--ink); }

body .laeq-size:hover,
body .laeq-size:focus,
body .laeq-size:active          { background: var(--paper); color: var(--ink); border-color: var(--ink); }
body .laeq-size[disabled]:hover,
body .laeq-size[disabled]:focus { background: var(--paper); color: var(--line); border-color: var(--line-soft); }

body .laeq-size-guide:hover,
body .laeq-size-guide:focus     { background: none; color: var(--ink); }

body .laeq-dialog-close:hover,
body .laeq-dialog-close:focus   { background: #3a3a3a; color: #fff; }

body .laeq-filter-toggle:hover,
body .laeq-filter-toggle:focus  { background: none; color: var(--ink); }

/* The burger only exists below 900px, which is why it was the one control
   still wearing Astra's button styling: white text and 12px/24px padding. A
   white stroke on a white header meant the menu button was invisible — the
   40x40 box in the media query was landing on an empty grid cell. */
body .laeq-burger {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  box-shadow: none;
}
body .laeq-burger:hover,
body .laeq-burger:focus         { background: none; color: var(--ink); }

/* One ring for all of them, drawn outside the shape so it reads on the black
   pill and the white outlined buttons alike. `:focus-visible` rather than
   `:focus`, so a mouse click does not leave a ring sitting on the page. */
body .laeq-btn:focus-visible,
body .laeq-btn-ghost:focus-visible,
body .laeq-size:focus-visible,
body .laeq-size-guide:focus-visible,
body .laeq-dialog-close:focus-visible,
body .laeq-filter-toggle:focus-visible,
body .laeq-burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ==========================================================================
   Product detail page
   ========================================================================== */

.laeq-crumbs {
  padding: 16px var(--gutter) 0;
  font-size: 14px;
  color: var(--muted);
}
.laeq-crumbs a:hover { color: var(--ink); }

/* Centred and capped, unlike the full-bleed grid: past about 1200px the two
   columns drift apart and the shirt grows to fill space it does not need. */
.laeq-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  padding: 24px var(--gutter) 80px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- gallery --- */

.laeq-gallery { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
.laeq-thumbs { display: flex; flex-direction: column; gap: 10px; }
.laeq-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-box);
  overflow: hidden;
  background: var(--tile);
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}
/* `contain` for the same reason as the grid card: the thumb is square and the
   photography is 4:5, and a cropped thumbnail no longer shows which view it is
   selecting once the collar and hem are gone. */
.laeq-thumb img { width: 100%; height: 100%; object-fit: contain; }
.laeq-thumb[aria-current="true"] { border-color: var(--ink); }

/* 4:5, matching the product photography, and `contain` so a shirt is never
   cropped — the frame and the image share a ratio, so nothing letterboxes. */
.laeq-stage { background: var(--tile); aspect-ratio: 4 / 5; overflow: hidden; }
.laeq-stage img { width: 100%; height: 100%; object-fit: contain; }

/* The stage image is wrapped in a button; it should look like nothing at all.
   Padding zeroed for the same reason as .laeq-size — Astra pads every button,
   and 15px of it here would inset the photograph inside its own tile. */
.laeq-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* `background: none` above is not enough: Astra also paints `button:hover` and
   `button:focus`, and those beat a plain class selector, so pointing at the
   photograph washed it blue. Same `body` prefix the size grid and the lightbox
   controls already need — the tile behind the photo must stay the page's own
   grey, not the theme's link colour. */
body .laeq-zoom:hover,
body .laeq-zoom:focus {
  background: none;
}

/* --- zoom overlay --- */

/* Above the mobile menu (90), which is the highest thing the theme stacks. */
.laeq-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Asymmetric on purpose: the close control sits top-right and the counter
     bottom-centre, so the picture is kept clear of both. This padding is also
     what sizes the image — fit() measures this box, not the window. */
  padding: 60px 20px 52px;
  background: rgba(17, 17, 17, 0.94);
}
/* display:flex would otherwise beat the UA sheet's [hidden] and the overlay
   would sit over the shop permanently. */
.laeq-lightbox[hidden] { display: none; }

/* Sized in JS, not here: max-width/max-height only ever shrink, so a 500px
   photograph opened at its own size — smaller than the 584px stage behind it,
   which is a strange thing for a "zoom" to do. These stay as the safety net for
   the case where the file's dimensions are not known yet. */
.laeq-lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.laeq-lightbox.is-zoomed .laeq-lightbox-img { cursor: zoom-out; }
.laeq-lightbox.is-loading .laeq-lightbox-img { opacity: 0; }

/* Absolute rather than flex siblings, so the picture gets the full width and
   the controls do not push it off centre. */
.laeq-lightbox-x,
.laeq-lightbox-nav {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s var(--ease);
}
/* Astra paints a blue fill on any focused or hovered button and wins on
   specificity, which turned the close control into a solid blue box the moment
   it took focus. Same `body` prefix the size grid already needs. */
body .laeq-lightbox-x:hover,
body .laeq-lightbox-x:focus,
body .laeq-lightbox-nav:hover,
body .laeq-lightbox-nav:focus {
  background: none;
  color: var(--paper);
  opacity: 1;
}
.laeq-lightbox-x { top: 14px; right: 18px; width: 44px; height: 44px; font-size: 32px; }
.laeq-lightbox-nav { top: 50%; width: 48px; height: 72px; margin-top: -36px; font-size: 42px; }
.laeq-lightbox-prev { left: 10px; }
.laeq-lightbox-next { right: 10px; }
.laeq-lightbox-count {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.laeq-lightbox button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; opacity: 1; }

/* --- summary column --- */

.laeq-pdp-col { position: sticky; top: calc(var(--head-h) + 24px); }

.laeq-eyebrow {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 2px;
}
.laeq-pdp-col h1 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  margin: 0;
}
.laeq-pdp-sub { font-size: 16px; line-height: 24px; color: var(--muted); margin: 2px 0 0; }
.laeq-pdp-price { font-size: 16px; line-height: 24px; font-weight: 500; margin: 18px 0 0; }
.laeq-pdp-price del { color: var(--muted); font-weight: 400; margin-right: 8px; }
.laeq-pdp-price ins { text-decoration: none; }
.laeq-pdp-tax { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* Sibling kits: the home / away / Match switcher. */
.laeq-kits { margin: 26px 0 0; }
.laeq-kits h2 { font-size: 15px; font-weight: 500; margin: 0 0 10px; }
.laeq-kit-row { display: flex; gap: 10px; flex-wrap: wrap; }
.laeq-kit {
  width: 60px; height: 60px;
  border-radius: var(--radius-box);
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--tile);
  display: block;
}
.laeq-kit[aria-current="true"] { border-color: var(--ink); }
.laeq-kit img { width: 100%; height: 100%; object-fit: cover; }

/* --- size grid --- */

.laeq-size-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 0 10px;
}
.laeq-size-head h2 { font-size: 16px; font-weight: 500; margin: 0; }
.laeq-size-guide {
  font-size: 15px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  font-family: var(--font);
  cursor: pointer;
  padding: 0;
}
.laeq-size-guide:hover { color: var(--ink); }

/* Auto-fit tracks rather than a flex basis of 20%. The basis hard-coded five
   per row, so the two sizes past XXL wrapped onto a second row and grew to half
   the width each — the widest buttons on the page were the two least-bought
   sizes. Tracks stay the same width on every row however many sizes there are. */
/* The 64px floor was sized for a seven-term size range ending at XXXXL. The
   Fórmula 1 range is sold S-5XL, and XXXXXL is one X wider — about 58px against
   the 54px content box a 64px track leaves once the border and padding are
   taken out. That is the same overflow described below, with the same result:
   the label stops being centred and clamps to the left padding edge. A 72px
   floor leaves 62px of content box, which the widest label clears. Tracks are
   1fr and stretch past the floor anyway, so this only moves the point at which
   the grid wraps to a new row. */
.laeq-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}
/* Centred by the box, not by text-align. Astra pads every <button> with
   `15px 30px` and this rule never said otherwise, so 60px of horizontal padding
   sat inside a 74px track and left a 12px content box. Chrome does not centre
   text that outgrows a button's content box — it clamps it to the left padding
   edge — so text-align went quietly dead: every label started at x+31 and only
   the short ones looked centred. XXXL landed 31px from the left and 4px from the
   right, XXXXL spilled 5px past its own border. The widest label is 48px, so a
   near-zero padding box gives all seven room to sit in the middle. */
.laeq-size {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.laeq-size:hover:not([disabled]) { border-color: var(--ink); }
.laeq-size[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; }
.laeq-size[disabled] {
  color: var(--line);
  border-color: var(--line-soft);
  cursor: not-allowed;
  text-decoration: line-through;
}

.laeq-variation-error {
  color: var(--accent);
  font-size: 14px;
  margin: 10px 0 0;
}

.laeq-cta { display: grid; gap: 12px; margin: 24px 0 0; }

/* ---------------------------------------------------------------------------
   Personalisation — version, printed dorsal, patches

   Rendered by the catalogue plugin between the size grid and the buy button,
   so it borrows the size grid's furniture: the same 1px hairline, the same
   inset shadow to mark a chosen item, the same 48px touch target. The native
   radios and checkboxes are hidden rather than restyled, because the label is
   the control here and a browser's own dot would sit inside the card arguing
   with the border that already says "chosen".
   ------------------------------------------------------------------------ */

.laeq-options { margin: 28px 0 0; display: grid; gap: 26px; }

.laeq-opt { border: 0; margin: 0; padding: 0; min-width: 0; }
.laeq-opt legend,
.laeq-opt-toggle-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
  margin: 0 0 10px;
}
.laeq-opt-toggle-label { margin: 0; }

.laeq-opt input[type="radio"],
.laeq-opt input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.laeq-opt-help {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Version: two cards, the widest choice on the page --- */

.laeq-opt-cards { display: grid; gap: 8px; }
.laeq-opt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.laeq-opt-card:hover { border-color: var(--ink); }
.laeq-opt-card-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.laeq-opt-card-title { font-size: 15px; color: var(--ink); }
.laeq-opt-card-note { font-size: 13px; color: var(--muted); }
.laeq-opt-card-price {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.laeq-opt-card:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.laeq-opt-card:has(input:checked) .laeq-opt-card-title { font-weight: 500; }
.laeq-opt-card:has(input:focus-visible),
.laeq-opt-toggle:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- Dorsal: a switch that reveals two inputs --- */

.laeq-opt-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.laeq-opt-toggle:hover { border-color: var(--ink); }
.laeq-opt-toggle:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
/* A box that ticks, drawn rather than native so it matches the hairline. */
.laeq-opt-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper) no-repeat center;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.laeq-opt-toggle:has(input:checked)::before {
  background-color: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}
.laeq-opt-toggle .laeq-opt-toggle-label { flex: 1 1 auto; }

.laeq-opt-reveal { padding: 14px 0 0; }
.laeq-opt-reveal[hidden] { display: none; }

.laeq-opt-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}
.laeq-opt-field { margin: 0; display: grid; gap: 6px; }
.laeq-opt-field label {
  font-size: 13px;
  color: var(--muted);
}
.laeq-opt-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
}
.laeq-opt-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
/* The shirt is printed in capitals whatever the shopper types, so the field
   shows what will actually be pressed onto the back. */
#laeq-dorsal-name { text-transform: uppercase; letter-spacing: 0.06em; }
.laeq-opt-field--number input { text-align: center; }

/* --- Patches: a grid of the patches themselves ---------------------------
 *
 * These were rows of text, then rows of text with a pictogram. Neither worked,
 * for the same reason: the list is forty items long and several of the names
 * differ by one word — "Winner 14 Champions + UEFA Foundation" against "Winner
 * 15 Champions + UEFA Foundation" — so a shopper cannot find theirs by reading.
 * They already know what the patch looks like. So the picture is the control
 * and the name is the caption under it, which is also how every shop selling
 * these does it.
 *
 * Kept as a grid of small tiles rather than the full-width rows the rest of
 * this column uses, because forty full-width rows is a page of its own. The
 * group headings carry the structure the rows used to carry.
 */

.laeq-patch-unit {
  margin: -4px 0 14px;
  font-size: 13px;
  color: var(--muted);
}

.laeq-patch-group + .laeq-patch-group { margin-top: 22px; }
.laeq-patch-group-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* auto-fill, not auto-fit: a group with three patches in it keeps tile-sized
   tiles instead of stretching them across the whole column. */
.laeq-patch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.laeq-patch {
  display: grid;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

.laeq-patch-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  /* White because the photographs are shot on white — the tile is the sheet
     they sit on, and any other colour puts a border around each patch. */
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.laeq-patch-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.laeq-patch:hover .laeq-patch-tile { border-color: var(--ink); }

/* The tick, drawn on the tile rather than beside it: at this size a separate
   checkbox would be most of the cell. Same mark as the dorsal toggle's. */
.laeq-patch-tile::after {
  content: "";
  position: absolute;
  top: 5px; right: 5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.laeq-patch:has(input:checked) .laeq-patch-tile {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.laeq-patch:has(input:checked) .laeq-patch-tile::after {
  opacity: 1;
  transform: scale(1);
}
.laeq-patch:has(input:focus-visible) .laeq-patch-tile {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.laeq-patch-name {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  /* Two lines, then an ellipsis: the longest names run to four otherwise, and
     one tall cell drags every tile on its row down with it. The full name is
     on the title attribute and in the cart line. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.laeq-patch:has(input:checked) .laeq-patch-name {
  color: var(--ink);
  font-weight: 500;
}

/* At the limit the tiles that can no longer be added go quiet, rather than
   disappearing — a shopper needs to see what they are choosing between. */
.laeq-patch:has(input:disabled) { cursor: default; }
.laeq-patch:has(input:disabled) .laeq-patch-tile { border-color: var(--line-soft); }
.laeq-patch:has(input:disabled) .laeq-patch-tile img { opacity: 0.35; }
.laeq-patch:has(input:disabled) .laeq-patch-name { color: var(--line); }
.laeq-patch:has(input:disabled):hover .laeq-patch-tile { border-color: var(--line-soft); }

.laeq-patch-own { margin-top: 22px; }
.laeq-opt-toggle-note {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* --- Running total --- */

.laeq-opt-total {
  display: grid;
  gap: 6px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--muted);
}
.laeq-opt-total[hidden] { display: none; }
.laeq-opt-total p { margin: 0; display: flex; justify-content: space-between; gap: 16px; }
.laeq-opt-total-sum {
  padding: 8px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

/* :has() is what keeps the markup free of state classes and the JS free of
   className bookkeeping. Browsers without it get an unstyled-but-usable set of
   controls, so the selected state is restored the old way. */
@supports not selector(:has(*)) {
  .laeq-opt input[type="radio"],
  .laeq-opt input[type="checkbox"] {
    position: static;
    width: auto; height: auto;
    opacity: 1;
    pointer-events: auto;
    margin-right: 8px;
  }
}

@media (max-width: 640px) {
  /* One track narrower than the desktop minimum, so a phone gets four tiles to
     a row instead of three-and-a-gap. Below 84px the two-line names start
     clipping mid-word, which is why the tile does not shrink any further. */
  .laeq-patch-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .laeq-patch-name { font-size: 10px; }
}

/* WooCommerce's own variation furniture is hidden, not removed: its JavaScript
   still drives price, stock and the add-to-cart button through those selects,
   and the size grid is a facade in front of them. */
.laeq-variations-native {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.laeq-pdp .woocommerce-variation-price,
.laeq-pdp .woocommerce-variation-availability,
.laeq-pdp .reset_variations,
.laeq-pdp .quantity { display: none !important; }

.laeq-accordion { margin: 34px 0 0; border-top: 1px solid var(--line-soft); }
.laeq-accordion details { border-bottom: 1px solid var(--line-soft); }
.laeq-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.laeq-accordion summary::-webkit-details-marker { display: none; }
.laeq-accordion summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; }
.laeq-accordion details[open] summary::after { content: "–"; }
.laeq-accordion .body { padding: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.laeq-accordion .body p:first-child { margin-top: 0; }
.laeq-accordion .body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.laeq-accordion .body th,
.laeq-accordion .body td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); }
.laeq-accordion .body th { color: var(--ink); font-weight: 500; }

/* --- size guide dialog --- */

.laeq-dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  width: min(520px, calc(100vw - 32px));
}
.laeq-dialog::backdrop { background: rgba(0,0,0,0.5); }
.laeq-dialog-inner { padding: 28px; }
.laeq-dialog h2 { font-size: 20px; margin: 0 0 4px; }
.laeq-dialog > .laeq-dialog-inner > p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.laeq-dialog table { width: 100%; border-collapse: collapse; font-size: 15px; }
.laeq-dialog th, .laeq-dialog td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.laeq-dialog th { font-weight: 500; }
.laeq-dialog-close {
  margin-top: 20px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  border: 0;
  font: 500 15px var(--font);
  cursor: pointer;
}

/* --- related --- */

.laeq-related { padding: 0 var(--gutter) 90px; }
.laeq-related h2 { font-size: 22px; font-weight: 500; margin: 0 0 20px; }
.laeq-related .laeq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   Home page
   ========================================================================== */

.laeq-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 24px 64px;
  background: var(--ink);
  overflow: hidden;
}
.laeq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #2b2b2b 0%, #111 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 46px);
}
.laeq-hero > * { position: relative; z-index: 1; }
.laeq-hero-kicker {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.laeq-hero h1 {
  color: #fff;
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.laeq-hero p { color: rgba(255,255,255,0.82); font-size: 18px; max-width: 46ch; margin: 0 0 28px; }
.laeq-hero .laeq-btn { background: #fff; color: var(--ink); }
.laeq-hero .laeq-btn:hover { background: var(--line); }

.laeq-section { padding: 64px var(--gutter); }
.laeq-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 22px;
}
.laeq-section-head h2 { font-size: 24px; font-weight: 500; margin: 0; }
.laeq-section-head a { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

.laeq-leagues {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.laeq-league {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.laeq-league::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.62) 100%);
  transition: background 0.2s var(--ease);
}
.laeq-league > * { position: relative; z-index: 1; }
.laeq-league strong { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.2; }
.laeq-league span { color: rgba(255,255,255,0.8); font-size: 14px; }
.laeq-league:hover::after { background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,0.75) 100%); }

.laeq-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 56px var(--gutter);
  border-top: 1px solid var(--line-soft);
}
.laeq-usp h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.laeq-usp p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ==========================================================================
   Trust strip, notices, WooCommerce's own pages
   ========================================================================== */

.laeq-trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.laeq-trust li { padding-left: 20px; position: relative; }
.laeq-trust li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--ink);
  background: var(--wash);
  border-radius: var(--radius-box);
  font-size: 15px;
  margin: 0 var(--gutter) 20px;
}
.woocommerce-error { border-left-color: var(--accent); }
/* WooCommerce stores its own #515151 on the info variant, which reads as a
   third grey next to --ink and --muted. */
.woocommerce-info { color: var(--ink); }

/* WooCommerce's own tick, from its icon font. Astra recolours it to the theme
   accent, and the info variant to a #1e85be blue — the two colours on the page
   that belong to neither design. */
.woocommerce-message::before { color: var(--ink); }
.woocommerce-info::before    { color: var(--muted); }
.woocommerce-error::before   { color: var(--accent); }

/* "Ver carrito" is an <a class="button wc-forward"> and Astra paints it blue
   from a 33-selector group that includes `.woocommerce .woocommerce-message
   a.button` — three classes. Both shapes are spelled out because WooCommerce
   puts `woocommerce` on the <body> for shop and product pages but only on a
   wrapper <div> for the cart, checkout and account. */
body .woocommerce .woocommerce-message a.button,
body .woocommerce .woocommerce-info a.button,
body .woocommerce .woocommerce-error a.button,
body.woocommerce .woocommerce-message a.button,
body.woocommerce .woocommerce-info a.button,
body.woocommerce .woocommerce-error a.button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font: 500 15px var(--font);
  text-decoration: none;
}
body .woocommerce .woocommerce-message a.button:hover,
body .woocommerce .woocommerce-message a.button:focus,
body .woocommerce .woocommerce-info a.button:hover,
body .woocommerce .woocommerce-info a.button:focus,
body .woocommerce .woocommerce-error a.button:hover,
body .woocommerce .woocommerce-error a.button:focus,
body.woocommerce .woocommerce-message a.button:hover,
body.woocommerce .woocommerce-message a.button:focus,
body.woocommerce .woocommerce-info a.button:hover,
body.woocommerce .woocommerce-info a.button:focus,
body.woocommerce .woocommerce-error a.button:hover,
body.woocommerce .woocommerce-error a.button:focus { background: #3a3a3a; color: #fff; }

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
.laeq-page {
  padding: 40px var(--gutter) 90px;
}
.laeq-page h1 { font-size: 32px; margin: 0 0 20px; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font);
  padding: 16px 26px;
  border: 0;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: #3a3a3a; color: #fff; }

.laeq-tracking {
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  padding: 18px 20px;
  margin: 24px 0;
}
.laeq-tracking h2 { font-size: 16px; margin: 0 0 6px; }
.laeq-tracking a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Cart and checkout

   These two pages are WooCommerce's own templates, not ours, and they arrived
   looking like a different website: a boxed 1200px column floating inside a
   full-bleed site, a table with a grey header band, a 30px "Totales del
   carrito", and form fields in Astra's grey. They are also the two pages that
   decide whether a shopper finishes, so they get the same treatment as the
   rest: full-bleed to the site gutter, items on the left, a summary card on
   the right that stays put while the page scrolls.

   All of it is CSS over the stock markup. Overriding cart.php and
   form-checkout.php would give finer control, but those two templates change
   between WooCommerce releases and every override has to be re-reconciled by
   hand — a cost that lasts for ever, in exchange for a layout the cascade can
   already produce.
   ========================================================================== */

/* Astra's block-layout rule (`.entry-content[data-ast-blocks-layout] > *`)
   caps and centres everything inside the post content. Every other page here
   renders through our own templates and never meets it; these two do. */
body.woocommerce-cart .entry-content > .woocommerce,
body.woocommerce-checkout .entry-content > .woocommerce,
body.woocommerce-account .entry-content > .woocommerce {
  max-width: none;
  margin: 0;
}

body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-account .entry-title {
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header { margin: 0; padding: 0; border: 0; }

/* ---- Two columns: line items on the left, the money on the right --------- */

.woocommerce-cart .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0 64px;
  align-items: start;
}
/* Notices carry a gutter margin so they clear the page edge on our own
   full-bleed templates. Inside the cart and checkout they are already in a
   gutter-inset column, and the extra 48px each side left them visibly
   narrower than the line items underneath. */
body.woocommerce-cart #content .woocommerce-notices-wrapper > *,
body.woocommerce-checkout #content .woocommerce-notices-wrapper > *,
body.woocommerce-account #content .woocommerce-notices-wrapper > *,
/* The coupon prompt is a notice too, but WooCommerce prints it outside the
   wrapper, so it kept the gutter and sat 48px inside everything around it. */
body.woocommerce-checkout #content .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-left: 0;
  margin-right: 0;
}

/* Notices and the empty-cart state have no opposite number, so they run the
   full width rather than leaving a 380px hole beside them. */
.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .entry-content > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .entry-content > .woocommerce > .cart-empty,
.woocommerce-cart .entry-content > .woocommerce > .return-to-shop { grid-column: 1 / -1; }

/* ---- The line items ------------------------------------------------------ */

/* Why `#content` is in front of nearly every selector below.
 *
 * Astra's WooCommerce compatibility sheets style these pages at three and four
 * classes deep — `.woocommerce-cart .cart-collaterals .cart_totals`,
 * `.woocommerce-js #content table.cart td`, `form #order_review:not(...)` — and
 * the child theme loading last only breaks ties, not losses. `#content` is our
 * own wrapper (header.php), so borrowing its id costs nothing and buys one
 * whole specificity tier, which beats every one of them without `!important`
 * and stays readable.
 */

body.woocommerce-cart #content table.cart {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* The column headings are only meaningful for a table, and this is no longer
   one. Each cell still carries its own label in `data-title`. */
body.woocommerce-cart #content table.cart thead { display: none; }
body.woocommerce-cart #content table.cart tbody { display: block; }
body.woocommerce-cart #content table.cart > tbody > tr { display: block; }

/* Must out-rank the `> tbody > tr` rule directly above it, which is four
   elements deep and would otherwise keep these rows `display: block` — the
   first version of this stacked every cell in a single column. */
body.woocommerce-cart #content table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name  total"
    "thumb price price"
    "thumb qty   remove";
  gap: 0 20px;
  align-items: start;
  padding: 24px 0;
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}
body.woocommerce-cart #content table.cart tr.cart_item:first-child { border-top: 1px solid var(--line-soft); }
body.woocommerce-cart #content table.cart tr.cart_item > td {
  display: block;
  padding: 0;
  border: 0;
  /* Astra puts `min-height: 3.25em` on every cart cell, which in a three-row
     grid adds up to 150px of empty line item. */
  min-height: 0;
  font-size: 15px;
}
body.woocommerce-cart #content tr.cart_item td.product-thumbnail { grid-area: thumb; }
body.woocommerce-cart #content tr.cart_item td.product-name     { grid-area: name; font-size: 16px; }
body.woocommerce-cart #content tr.cart_item td.product-price    { grid-area: price; color: var(--muted); padding-top: 4px; }
body.woocommerce-cart #content tr.cart_item td.product-quantity { grid-area: qty; align-self: end; }
body.woocommerce-cart #content tr.cart_item td.product-subtotal { grid-area: total; text-align: right; white-space: nowrap; }
body.woocommerce-cart #content tr.cart_item td.product-remove   { grid-area: remove; align-self: end; text-align: right; }

/* Astra shrinks cart thumbnails to 32px, and separately caps every
   `.product-thumbnail img` at `max-width: 70px` — which silently clamps the
   width below down to 70 while leaving the height at 130. */
body.woocommerce-cart #content td.product-thumbnail img {
  width: 104px;
  max-width: none;
  height: 130px;
  object-fit: cover;
  background: var(--wash);
  border-radius: var(--radius-box);
}
body.woocommerce-cart #content td.product-name a { color: var(--ink); }
body.woocommerce-cart #content td.product-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Deliberately not scoped to body.woocommerce-cart. WooCommerce prints this same
   <dl class="variation"> in four places — the cart, the checkout review table,
   the order-received summary and the order detail under Mi cuenta — and a
   shopper who paid 1,99 € for a name on the back reads it on all of them. A
   cart-only rule left "Versión:Player Versión" run together everywhere else. */
td.product-name .variation {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}
/* WooCommerce floats these, which is what used to keep each pair on its own
   line. The float has to go — a floated dt ignores display:inline, and that is
   what left "Versión:" welded to its value with no space. Once it is gone the
   line break has to be put back deliberately, hence the "\A" below. */
td.product-name .variation dt,
td.product-name .variation dd {
  float: none;
  clear: none;
  display: inline;
  margin: 0;
  font-weight: 400;
}
/* Non-breaking, so a long value never wraps away from the label it belongs to. */
td.product-name .variation dt::after { content: "\00a0"; }
/* The value arrives wrapped in a <p>, which would otherwise break the line
   between the label and what it labels. */
td.product-name .variation dd p { display: inline; margin: 0; }
td.product-name .variation dd::after { content: "\A"; white-space: pre; }

body.woocommerce-cart a.remove {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--muted);
  font-size: 0;
  background: none;
}
body.woocommerce-cart a.remove:hover,
body.woocommerce-cart a.remove:focus { background: var(--wash); color: var(--ink); }
body.woocommerce-cart a.remove svg { width: 18px; height: 18px; }

/* ---- Coupon + update row ------------------------------------------------- */

body.woocommerce-cart #content td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 0;
  min-height: 0;
  border: 0;
}
/* WooCommerce centres this block with `margin: 0 auto` from a four-class
   selector, which parked the coupon field in the middle of the row. */
body.woocommerce-cart #content table.cart td.actions .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}
body.woocommerce-cart #content table.cart td.actions .coupon::before,
body.woocommerce-cart #content table.cart td.actions .coupon::after { content: none; }
/* Astra sizes this one from `#content table.cart td.actions .input-text`
   (width: auto) and `[name=coupon_code]` (max-height: 35px), so the shared
   field styling further down never reached it. */
body.woocommerce-cart #content table.cart td.actions #coupon_code {
  width: 220px;
  height: 48px;
  max-height: none;
  float: none;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  line-height: normal;
}
/* Astra hooks a "volver a la tienda" link into the same cell and makes it a
   centred block; in a flex row it just needs to stop claiming a whole line. */
body.woocommerce-cart #content td.actions .ast-return-to-shop {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Shared field styling (cart coupon, checkout, my account) ------------ */

body .woocommerce #coupon_code,
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .woocommerce .select2-container .select2-selection--single {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px var(--font);
  box-shadow: none;
}
body .woocommerce #coupon_code { width: 220px; }

/* País and Provincia had no dropdown affordance at all: `appearance: none`
   removes the native arrow, and select2's replacement is a CSS triangle sized
   against its own 28px box, which lands off-centre in a 48px field. Both
   fields read as text inputs that happened to be pre-filled.
 *
 * The chevron goes on the wrapper rather than on either control, because the
 * wrapper is the one element that survives select2 swapping the <select> out
 * for a <span> — one caret, correctly placed, whether or not the script has
 * run yet. A background-image on the <select> itself was tried first and
 * Chrome does not paint it. */
body .woocommerce form .form-row .woocommerce-input-wrapper:has(select) {
  display: block;
  position: relative;
}
body .woocommerce form .form-row .woocommerce-input-wrapper:has(select)::after {
  content: "";
  position: absolute;
  right: 18px;
  top: calc(50% - 6px);
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
body .woocommerce form .form-row select { appearance: none; padding-right: 38px; }
body .woocommerce .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  padding-right: 38px;
}
body .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  color: var(--ink);
}
/* Suppressed rather than restyled — the wrapper draws the only caret. */
body .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { display: none; }
body .woocommerce form .form-row textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
body .woocommerce #coupon_code:focus,
body .woocommerce form .form-row input.input-text:focus,
body .woocommerce form .form-row textarea:focus,
body .woocommerce form .form-row select:focus { border-color: var(--ink); }
body .woocommerce ::placeholder { color: var(--muted); opacity: 1; }

/* Native radios and checkboxes are the last blue thing on these pages. */
body .woocommerce input[type="radio"],
body .woocommerce input[type="checkbox"] { accent-color: var(--ink); }

/* The quantity box: Astra sizes it from its own form styles, which leaves a
   26px-tall field the width of two digits. */
body .woocommerce .quantity input.qty {
  width: 76px;
  height: 44px;
  padding: 0 4px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px var(--font);
}
body .woocommerce .quantity input.qty:focus { border-color: var(--ink); }

/* "Actualizar carrito" and "Aplicar cupón" are secondary to "Finalizar
   compra", so they read as outlines rather than a second black pill. */
body .woocommerce td.actions button.button,
body .woocommerce .checkout_coupon button.button {
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: 500 15px var(--font);
  line-height: 1;
}
body .woocommerce td.actions button.button:hover,
body .woocommerce td.actions button.button:focus,
body .woocommerce .checkout_coupon button.button:hover,
body .woocommerce .checkout_coupon button.button:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* WooCommerce disables "Actualizar carrito" until the quantity changes. */
body .woocommerce td.actions button.button[disabled],
body .woocommerce td.actions button.button[disabled]:hover {
  border-color: var(--line-soft);
  background: var(--paper);
  /* Not --line: at #cacacb on white the label was legible only if you already
     knew what it said. Disabled should read as "not yet", not as "broken". */
  color: #9e9e9f;
  cursor: default;
}

/* ---- The summary card, shared by the cart and the checkout --------------- */

body.woocommerce-cart #content .cart-collaterals,
body.woocommerce-cart #content .cart-collaterals .cart_totals {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-cart #content .cart-collaterals::before,
body.woocommerce-cart #content .cart-collaterals::after { content: none; }

/* Astra frames the cart totals in a square 1px box with a grey heading band,
   and the checkout review in a 2px one via `form #order_review:not(...)` —
   two IDs' worth of specificity. `#content` plus `form.checkout` clears both. */
body.woocommerce-cart #content .cart-collaterals .cart_totals,
body.woocommerce-checkout #content form.checkout #order_review {
  width: auto;
  float: none;
  clear: none;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 24px;
  background: var(--paper);
  position: sticky;
  top: calc(var(--head-h) + 16px);
}
body.woocommerce-cart #content .cart-collaterals .cart_totals > h2,
body.woocommerce-checkout #content form.checkout #order_review_heading {
  width: auto;
  float: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
}
body.woocommerce-checkout #content form.checkout #order_review_heading { margin: 0 0 14px; }

body.woocommerce-cart #content .cart-collaterals .cart_totals table.shop_table,
body.woocommerce-checkout #content form.checkout #order_review table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  /* Astra sets `table-layout: fixed`, which splits the two columns 50/50 and
     wraps "Subtotal" onto two lines the moment a currency symbol gets long. */
  table-layout: auto;
  border-collapse: collapse;
  font-size: 15px;
}
body.woocommerce-cart #content .cart-collaterals .cart_totals table.shop_table th,
body.woocommerce-cart #content .cart-collaterals .cart_totals table.shop_table td,
body.woocommerce-checkout #content form.checkout #order_review table.shop_table th,
body.woocommerce-checkout #content form.checkout #order_review table.shop_table td {
  width: auto;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
  line-height: 1.45;
  vertical-align: top;
  text-align: left;
  color: var(--ink);
}
body.woocommerce-cart #content .cart-collaterals .cart_totals table.shop_table th,
body.woocommerce-checkout #content form.checkout #order_review tfoot th { color: var(--muted); }
body.woocommerce-cart #content .cart-collaterals .cart_totals table.shop_table td,
body.woocommerce-checkout #content form.checkout #order_review table.shop_table td { text-align: right; }

body.woocommerce-checkout #content form.checkout #order_review thead th {
  padding-top: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* `table.shop_table` is in here only to out-rank the blanket `… #order_review
   table.shop_table td { text-align: right }` a few rules up, which is a class
   more specific and would otherwise right-align the shirt name against the
   price it belongs to. */
body.woocommerce-checkout #content form.checkout #order_review table.shop_table td.product-name {
  display: block;
  text-align: left;
  font-weight: 400;
}
body.woocommerce-checkout #content form.checkout #order_review .product-quantity { color: var(--muted); }

body.woocommerce-cart #content .cart-collaterals .cart_totals tr.order-total th,
body.woocommerce-cart #content .cart-collaterals .cart_totals tr.order-total td,
body.woocommerce-checkout #content form.checkout #order_review tr.order-total th,
body.woocommerce-checkout #content form.checkout #order_review tr.order-total td {
  border-bottom: 0;
  /* The divider above the total is drawn here rather than under the shipping
     row, which is `display: block` and therefore only as wide as the first
     column — see the shipping rules below. */
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  padding-bottom: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  /* The table sizes its columns to content, so without this the VAT line
     underneath wraps to "(incluye 34,71 €" / "IVA)" in an 89px cell. */
  white-space: nowrap;
}
body .woocommerce .includes_tax,
body .woocommerce small.includes_tax { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

/* The shipping row is the one that cannot be a label/value pair: it holds a
   list of radio buttons and an address line. Right-aligned in a 380px column
   it wrapped into a ragged four-line block. Stacked and left-aligned, the
   options read as options. */
body.woocommerce-cart #content .cart-collaterals .cart_totals tr.woocommerce-shipping-totals,
body.woocommerce-checkout #content form.checkout #order_review tr.woocommerce-shipping-totals { display: block; }
body.woocommerce-cart #content .cart-collaterals .cart_totals tr.woocommerce-shipping-totals th,
body.woocommerce-checkout #content form.checkout #order_review tr.woocommerce-shipping-totals th {
  display: block;
  padding-bottom: 6px;
  border: 0;
}
body.woocommerce-cart #content .cart-collaterals .cart_totals tr.woocommerce-shipping-totals td,
body.woocommerce-checkout #content form.checkout #order_review tr.woocommerce-shipping-totals td {
  display: block;
  padding-top: 0;
  text-align: left;
  /* A `display: block` row inside a table becomes an anonymous cell, which
     takes the width of the first column — so its bottom border stopped short
     of the card edge. The total row above draws that divider instead, where it
     is still two real cells and spans the full width. */
  border-bottom: 0;
}

body .woocommerce ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
body .woocommerce ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
body .woocommerce ul#shipping_method li input { margin: 3px 0 0; }
body .woocommerce ul#shipping_method label { margin: 0; font-size: 14px; line-height: 1.4; }
body .woocommerce .woocommerce-shipping-destination {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
body .woocommerce .shipping-calculator-button {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .woocommerce .wc-proceed-to-checkout { padding: 20px 0 0; }
body .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
}

/* ---- Checkout: form left, summary right ---------------------------------- */

body.woocommerce-checkout form.checkout {
  display: grid;
  /* Capped rather than 1fr: at 1440 the free column is 880px wide, and a
     "Nombre" field 430px across reads as a form somebody forgot to lay out.
     The leftover space goes between the two columns, which keeps the summary
     against the right gutter where the eye already expects it. */
  grid-template-columns: minmax(0, 680px) 400px;
  /* `auto 1fr`, not `auto auto`: #customer_details spans both rows, and grid
     shares a spanning item's height across the tracks it crosses unless one of
     them is flexible. With two auto rows the heading was pushed 735px down the
     page, level with the middle of the billing form instead of its own card. */
  grid-template-rows: auto 1fr;
  justify-content: space-between;
  gap: 0 64px;
  align-items: start;
}
/* Spanning both rows rather than sitting in one: otherwise the summary is
   pushed below the whole billing form instead of sitting beside it. */
/* `#content` and `.col2-set` are both here to clear Astra's
   `.woocommerce-page.woocommerce-checkout form #customer_details.col2-set`
   (one id, three classes), which floats this at 55% and left the form filling
   barely half of its own grid column. */
body.woocommerce-checkout #content form.checkout > #customer_details.col2-set {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  float: none;
  margin-right: 0;
}
body.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
body.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; }

/* WooCommerce floats billing and shipping side by side at 47% each. Here the
   left column is already half the page, so they stack instead. */
body.woocommerce-checkout .col2-set { width: 100%; float: none; }
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; padding: 0; }
body.woocommerce-checkout .col2-set .col-2:not(:empty) { margin-top: 28px; }

body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

/* Name/surname and postcode/city pair up; everything else runs full width. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body .woocommerce .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
body .woocommerce form .form-row { padding: 0; margin: 0 0 18px; }
body .woocommerce form .form-row-first,
body .woocommerce form .form-row-last { width: 100%; float: none; }
body .woocommerce form .form-row-wide,
body .woocommerce form .form-row.notes { grid-column: 1 / -1; }
body .woocommerce form .form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
body .woocommerce form .form-row label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
body .woocommerce form .required { color: var(--accent); border: 0; text-decoration: none; }
body .woocommerce form .optional { color: var(--muted); }

body.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 12px;
}
/* This label carries `.checkbox` but sits in an <h3>, not a `.form-row`, so the
   shared checkbox rule above never matched it: the box rendered at the browser
   default 13px, hard against a bold heading with no gap between them. */
body.woocommerce-checkout h3#ship-to-different-address label.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
body .woocommerce input[type="checkbox"],
body .woocommerce input[type="radio"] { width: 16px; height: 16px; margin: 0; flex: none; }

/* ---- Checkout payment box ------------------------------------------------ */

body.woocommerce-checkout #payment {
  margin-top: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
body.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
}
/* Astra clears the float on this list with `::before`/`::after` table cells.
   The list is a grid now, so those two become empty grid items and open a
   20px hole above and below the payment options. */
body.woocommerce-checkout #payment ul.payment_methods::before,
body.woocommerce-checkout #payment ul.payment_methods::after { content: none; }
body.woocommerce-checkout #payment ul.payment_methods li { margin: 0; line-height: 1.5; }
body.woocommerce-checkout #payment ul.payment_methods label {
  display: inline;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
body.woocommerce-checkout #payment div.payment_box {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--wash);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* WooCommerce draws a little speech-bubble arrow on the payment description
   in its own grey; the box no longer needs one. */
body.woocommerce-checkout #payment div.payment_box::before { display: none; }
body.woocommerce-checkout #payment .place-order { padding: 18px 0 0; margin: 0; }
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.woocommerce-checkout #place_order {
  width: 100%;
  height: 52px;
  padding: 0;
  font-size: 16px;
}

/* ---- Coupon toggle and the empty cart ------------------------------------ */

body.woocommerce-checkout .woocommerce-form-coupon-toggle { margin: 0 0 28px; }
body .woocommerce .checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}
body .woocommerce .checkout_coupon .form-row { width: auto; margin: 0; padding: 0; }
body .woocommerce .checkout_coupon .form-row input.input-text { width: 220px; }
body .woocommerce .checkout_coupon .clear { display: none; }

body .woocommerce .cart-empty { margin: 0 0 20px; }
body .woocommerce .return-to-shop { margin: 0; }

/* ==========================================================================
   Account — the sign-in page

   Stock WooCommerce renders the login form at whatever width its container
   allows, which here meant a 1344px-wide box holding two fields: the form was
   readable but looked like a bug. Nike's sign-in is a narrow centred column,
   so that is what this is.

   Registration is switched off (guest checkout only), so this page is the
   login form alone — there is no `#customer_login` two-column wrapper to
   style. If customer accounts are ever turned on, that layout needs writing.
   ========================================================================== */

body.woocommerce-account .entry-title { text-align: center; }

/* WooCommerce prints its own "Acceder" above the form. With registration off
   the page holds nothing else, so it duplicates the "Mi cuenta" <h1> — and it
   sat hard against the left gutter, a long way from the centred form it was
   supposed to label. Hidden from view, left in the accessibility tree so the
   form keeps its heading. */
body.woocommerce-account .woocommerce > h2 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

body.woocommerce-account form.woocommerce-form-login {
  max-width: 440px;
  margin: 0 auto 80px;
  padding: 0;
  border: 0;
  border-radius: 0;
}
body.woocommerce-account form.woocommerce-form-login .form-row { padding: 0; margin: 0 0 18px; }

/* The eye toggle is a bare <button> inside `span.password-input`; WooCommerce
   styles it only in its own block themes, so here it sat outside the field. */
/* WooCommerce's script wraps the password field in this span after load — it
   is not in the served markup, which is why the button below has to be styled
   defensively rather than from a template we control.

   The span becomes the bordered box and the field inside it goes borderless,
   so the toggle is a plain flex sibling. WooCommerce positions the button
   absolutely; every inset it computed here resolved against something other
   than this span, and the button came out sitting on the field's top border.
   Laying it out in flow removes the containing block from the question. */
body .woocommerce form .form-row .password-input {
  display: flex;
  align-items: stretch;
  /* WooCommerce already makes this a flex container, but a centred, wrapping
     *column* — which stacked the toggle under a full-width field and stretched
     it across the whole box. Every part of that has to be restated. */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
}
body .woocommerce form .form-row .password-input:focus-within { border-color: var(--ink); }
/* Matched through `.form-row` and `.password-input` so it outranks the shared
   field rule up at the top of this section — that one is (0,3,3), and a
   shorter selector here left the field with its own border inside the box. */
body .woocommerce form .form-row .password-input input.input-text {
  /* Basis 0, not auto: an <input> has an intrinsic width, and letting it seed
     the basis makes the row's width depend on a UA default. */
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: none;
}
/* A word rather than the eye glyph WooCommerce ships. The glyph comes from
   its own icon font, and that font-family is set on the ::after directly —
   inheriting `font: inherit` from the button does not reach it, so our label
   rendered as "Mo☆trar" until the family was restated here. */
body .woocommerce .show-password-input {
  position: static;
  flex: none;
  /* Restated because the container's `align-items: stretch` is not the whole
     story: this element carries its own alignment, and left to it the button
     rides half its height above the field. */
  align-self: stretch;
  display: grid;
  place-items: center;
  /* Both, not just `transform`: `translate` is an independent property now,
     and a `translate: 0 -50%` left over from WooCommerce's absolute centring
     survives `transform: none` untouched. That is what kept dragging the
     button half its own height above the field through every other fix. */
  transform: none;
  translate: none;
  margin: 0;
  padding: 0 14px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
}
body .woocommerce .show-password-input::before { content: none; }
body .woocommerce .show-password-input::after {
  content: "Mostrar";
  font: 400 13px var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body .woocommerce .show-password-input.display-password::after { content: "Ocultar"; }
body .woocommerce .show-password-input:hover { color: var(--ink); }

/* Same defect as the checkout's ship-to-different-address box: WooCommerce
   leaves the checkbox `display:block`, so the label wrapped underneath at
   full width in muted 13px.
   Written the long way round because the field-label rule further up this
   file — `body .woocommerce form .form-row label`, (0,2,3) — is ours too and
   was quietly winning over the short form of this one. */
body .woocommerce form .form-row label.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--ink);
}
body .woocommerce .woocommerce-form-login__rememberme input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit {
  width: 100%;
  height: 52px;
  padding: 0;
  margin: 0;
  font-size: 16px;
  float: none;
}
body.woocommerce-account .woocommerce-LostPassword {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14px;
}
body.woocommerce-account .woocommerce-LostPassword a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--ink); }

/* The lost-password form is the same shape with one field. */
body.woocommerce-account form.woocommerce-ResetPassword {
  max-width: 440px;
  margin: 0 auto 80px;
}
body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-Button {
  width: 100%;
  height: 52px;
  padding: 0;
  font-size: 16px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.laeq-foot {
  background: var(--ink);
  color: #fff;
  padding: 56px var(--gutter) 32px;
}
.laeq-foot-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}
.laeq-foot h3 {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.laeq-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.laeq-foot a { color: rgba(255,255,255,0.72); font-size: 15px; }
.laeq-foot a:hover { color: #fff; }
.laeq-foot-bottom {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* ==========================================================================
   Responsive

   The rail is the first thing to go: below 1080px it becomes a drawer opened
   from the "Filtros" button, which is what that button already does on desktop.
   ========================================================================== */

@media (max-width: 1280px) {
  :root { --gutter: 32px; }
  .laeq-pdp { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .laeq-related .laeq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .laeq-leagues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1081px) {
  .laeq-rail-done { display: none; }
}

@media (max-width: 1080px) {
  .laeq-plp,
  .laeq-plp[data-rail="closed"] { grid-template-columns: 1fr; gap: 0; }
  .laeq-plp .laeq-rail,
  .laeq-plp[data-rail="closed"] .laeq-rail {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(340px, 88vw);
    max-height: none;
    background: var(--paper);
    z-index: 90;
    padding: 24px 24px 40px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45);
    transform: translateX(-102%);
    transition: transform 0.25s var(--ease);
    overflow-y: auto;
    visibility: hidden;
  }
  /* Keyed on the body class, not on data-rail: the markup ships with the rail
     open for desktop, and without this the drawer would be open on load. */
  body.laeq-rail-open .laeq-plp .laeq-rail { transform: none; visibility: visible; }
  body.laeq-rail-open { overflow: hidden; }

  /* The summary drops under the items. It stops being sticky at the same
     time — a sticky element in a single-column flow just pins itself to the
     bottom of the page and follows you around. */
  .woocommerce-cart .entry-content > .woocommerce,
  body.woocommerce-checkout form.checkout { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; }
  body.woocommerce-checkout #content form.checkout > #customer_details.col2-set,
  body.woocommerce-checkout form.checkout > #order_review_heading,
  body.woocommerce-checkout form.checkout > #order_review { grid-column: 1; grid-row: auto; }
  body.woocommerce-checkout #content form.checkout #order_review_heading { margin: 36px 0 14px; }
  /* In two columns the details block needs a floor under it; stacked, its
     32px collapses against the heading's 36px and the wrapper's 28px into
     ~96px of blank screen between the last field and "Tu pedido". */
  body.woocommerce-checkout #content form.checkout > #customer_details.col2-set { margin-bottom: 0; }
  body.woocommerce-cart #content .cart-collaterals .cart_totals,
  body.woocommerce-checkout #content form.checkout #order_review { position: static; }
  body.woocommerce-cart #content .cart-collaterals { margin-top: 36px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  /* The header collapse happens at 1180px — see the block up beside the
     header rules, not here. */

  .laeq-pdp { grid-template-columns: 1fr; }
  .laeq-pdp-col { position: static; }
  .laeq-gallery { grid-template-columns: 1fr; }
  .laeq-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .laeq-usp, .laeq-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laeq-editorial { padding: 24px; }
  .laeq-editorial h2 { font-size: 26px; }
}

/* Below 768px WooCommerce swaps every shop table into a small-screen mode of
   its own: thead and th hidden, a bold `data-title` label injected in front of
   each cell, `text-align: right !important` on all of them, and zebra
   striping. It is a reasonable fallback for a theme that leaves the cart as a
   table, but ours is already a grid that works at this width, so the mode is
   switched back off rather than worked around — the alternative is a line item
   reading "Producto: … Precio: … Cantidad:" down the right-hand edge.
 *
   The `!important`s are matching WooCommerce's own; at equal specificity
   nothing else can. */
@media (max-width: 768px) {
  body .woocommerce table.shop_table_responsive tr td::before { content: none; }
  body .woocommerce table.shop_table_responsive tr:nth-child(2n) td { background-color: transparent; }
  body .woocommerce table.shop_table_responsive tbody th { display: table-cell; }
  body .woocommerce table.shop_table_responsive tr td { text-align: left !important; }

  /* The summary is a label/value table at every width — WooCommerce's
     `tr { display: block }` stacked "Subtotal" above its own amount and left
     the restored `th` generating an anonymous table row of its own, which is
     the stray underline it drew beneath the word. `table.shop_table` is
     deliberately left out of these selectors so the shipping row, which really
     does stack, still out-ranks them. */
  body.woocommerce-cart #content .cart-collaterals .cart_totals tr,
  body.woocommerce-checkout #content form.checkout #order_review tr { display: table-row; }
  body.woocommerce-cart #content .cart-collaterals .cart_totals th,
  body.woocommerce-cart #content .cart-collaterals .cart_totals td,
  body.woocommerce-checkout #content form.checkout #order_review th,
  body.woocommerce-checkout #content form.checkout #order_review td { display: table-cell; }

  /* Money keeps its right-hand column, as at every other width. */
  body.woocommerce-cart #content table.cart tr.cart_item td.product-subtotal,
  body.woocommerce-cart #content table.cart tr.cart_item td.product-remove,
  body.woocommerce-cart #content .cart-collaterals .cart_totals table.shop_table td,
  body.woocommerce-checkout #content form.checkout #order_review table.shop_table td { text-align: right !important; }
  body.woocommerce-cart #content .cart-collaterals .cart_totals tr.woocommerce-shipping-totals td,
  body.woocommerce-checkout #content form.checkout #order_review tr.woocommerce-shipping-totals td,
  body.woocommerce-checkout #content form.checkout #order_review table.shop_table td.product-name { text-align: left !important; }
}

@media (max-width: 640px) {
  .laeq-grid,
  .laeq-related .laeq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* One field per row, and the coupon stops sharing a line with the update
     button — at this width they were 90px wide each. */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  body .woocommerce .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
  body.woocommerce-cart #content td.actions { flex-direction: column; align-items: stretch; }
  body.woocommerce-cart #content td.actions .coupon { flex-wrap: wrap; }
  body .woocommerce #coupon_code,
  body .woocommerce .checkout_coupon .form-row input.input-text { width: 100%; }
  body .woocommerce .checkout_coupon .form-row { width: 100%; }
  body.woocommerce-cart #content table.cart tr.cart_item { grid-template-columns: 84px minmax(0, 1fr) auto; }
  body.woocommerce-cart #content td.product-thumbnail img { width: 84px; height: 105px; }
  body.woocommerce-cart .entry-title,
  body.woocommerce-checkout .entry-title,
  body.woocommerce-account .entry-title { font-size: 28px; }
  .laeq-leagues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laeq-plp-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .laeq-hero { min-height: 68vh; }
  .laeq-util { display: none; }
  .laeq-editorial h2 { font-size: 22px; }
  .laeq-editorial p { display: none; }

  /* Edge to edge on a phone. The stage already spans the full screen width, so
     side padding here would open the picture at the size it already was — the
     only room left to give it is the margin itself. */
  .laeq-lightbox { padding: 52px 0 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}