/**
 * futbol-mesa CSS — partial 3/6: 03-search-cart-shop. Contiguous slice of the former style.css.
 * On-sale badge, header search + cart pill, Max Mega Menu bar + mobile drawer, featured-products header, and the Tienda shop-archive layout, filters toggle, mobile reflow and breadcrumb.
 * Load order is load-bearing (LRN-020/TSK-034): enqueued 01->06 in functions.php,
 * before storefront-woocommerce. Do NOT reorder or move rules between partials. @package futbol-mesa
 */
/* On-sale flash: pill shape matching the mockup's badge language. */
.onsale {
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Header search: rounded pill field + terracotta submit, per the mockup.
   The form fills its flex-grown .site-search wrapper so the field claims the
   row's free space between logo and cart. */
.site-search .widget_product_search form,
.site-search form.woocommerce-product-search {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 18px;
}

.site-search .search-field,
.site-search input[type="search"],
.site-search input.search-field {
  flex: 1;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 8px 0; /* .site-search input.search-field (0,3,0) outranks Storefront's input padding */
  font-size: 0.95rem; /* match the design's search field */
  color: var(--color-ink);
}

.site-search .widget_product_search button,
.site-search form.woocommerce-product-search button[type="submit"] {
  border: none;
  background: var(--color-terracotta);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.8rem; /* canonical primary·sm pill, per the mockup */
  letter-spacing: 0.04em;
  /* Storefront visually hides this submit button (screen-reader clip + absolute
     positioning). Undo the clip and return it to normal flow at intrinsic width
     so it sits after the input and shows the "Buscar" label. */
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  text-indent: 0;
  padding: 9px 18px;
}

.site-search .widget_product_search button:hover,
.site-search .widget_product_search button:focus-visible,
.site-search form.woocommerce-product-search button[type="submit"]:hover,
.site-search form.woocommerce-product-search button[type="submit"]:focus-visible {
  background: var(--color-terracotta-hover);
}

/* Header cart: white pill with hairline border (mockup), terracotta total kept
   from the price rule above. Supersedes the earlier ink-block treatment.
   The cart <ul> and its <li> otherwise hold the dropdown widget's width and the
   pill is left-aligned inside it; shrink them to the pill so the cart sits flush
   right (the dropdown is already position:absolute, so this does not affect it). */
#site-header-cart,
#site-header-cart > li {
  width: auto;
  min-width: 0;
}

#site-header-cart .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 12px;
  line-height: 1.2;
}

/* "CESTA" label stacked above the terracotta total, per the mockup. */
#site-header-cart .cart-contents-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

#site-header-cart .cart-contents-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

#site-header-cart .amount {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
}

/* Shrinking the cart <li> also shrank the absolute dropdown mini-cart to the
   pill's width; give it a usable fixed width anchored to the cart's right edge. */
#site-header-cart .widget_shopping_cart {
  right: 0;
  width: 320px;
  max-width: 90vw;
}

#site-header-cart .cart-contents:hover {
  color: var(--color-ink);
  border-color: var(--color-terracotta);
}

/* Basket icon: cream circle holding the SVG, with the item count as a small
   pitch-green badge pinned to its top-right corner (mockup language). Markup
   comes from futbol_mesa_header_cart(). */
#site-header-cart .cart-contents-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-ink);
}

#site-header-cart .cart-contents-icon .count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background-color: var(--color-pitch-green);
  /* Storefront dims the count to opacity:0.5, washing pitch-green pale. */
  opacity: 1;
  color: #fff;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* Very narrow phones: drop the basket icon (and its count badge) so the cart
   shrinks to just the stacked "CESTA / total" text and stops crowding the
   hamburger. Placed after the icon rules so it wins on source order. */
@media (max-width: 389px) {
  #site-header-cart .cart-contents-icon {
    display: none;
  }

  #site-header-cart .cart-contents {
    gap: 0;
  }
}

/* ---------------------------------------------------------------------------
   Primary navigation (Max Mega Menu plugin). The plugin paints the bar and
   links from its own stylesheet (terracotta bar, Public Sans white links), so
   matching the mockup's white bar + ink Archivo links + terracotta hover needs
   !important to beat the plugin CSS. Scoped to the top-level bar only — submenu
   panels are left to the plugin.
   --------------------------------------------------------------------------- */
#mega-menu-wrap-primary {
  background-color: #fff !important;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  color: var(--color-ink) !important;
  background-color: transparent !important;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  /* 800 (was 700): the main fix — nav was getting lost between the search bar
     and page title. Matches the approved site-header.dc.html mockup. */
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 16px 18px !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-parent > a.mega-menu-link {
  color: var(--color-terracotta) !important;
  background-color: transparent !important;
  /* inset shadow draws the 3px underline without shifting item height */
  box-shadow: inset 0 -3px 0 var(--color-terracotta);
}

/* TSK-036: the 5 top-level items at the rule above's 0.88rem/800-weight font
   plus 16px/18px padding need ~828px in a row (measured via CDP
   Emulation.setDeviceMetricsOverride, which gives exact layout — the
   headless screenshot CLI's viewport sizing proved unreliable for this).
   The nav's containing column is `~0.92 * viewport` (the fluid --content-gutter
   on each side), so that only clears 828px from a 927px viewport up; anywhere
   from Max Mega Menu's real desktop floor (769px — its `responsive_breakpoint`
   DB setting is 768px, and the plugin's own stylesheet keys "desktop" off
   `min-width: 769px`, switching to the off-canvas drawer at 768px and below,
   see the @media (max-width: 768px) block below) through 926px, the last item
   ("Más información") wraps to a second row. Shrink font-size and horizontal
   padding (each property cascades independently, so color/family/weight/
   letter-spacing/transform keep coming from the unconditional rule above —
   only the two properties restated here are affected) so the row needs
   ~632px even at the 769px floor (>70px to spare). Past 1024px there's
   enough room for the roomier defaults again (828px easily fits a >930px
   row). */
@media (min-width: 769px) and (max-width: 1024px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding: 14px 8px !important;
    font-size: 0.75rem !important;
  }
}

/* ---------------------------------------------------------------------------
   Mobile off-canvas flyout (Max Mega Menu, ≤768px). The plugin slides a 300px
   dark (#222) panel in from the left, which leaves the rest of the page (and a
   z-index:1000 contact strip that paints over it) bleeding through beside the
   panel. We promote the panel to a full-screen opaque drawer so nothing bleeds,
   lift the toggle/X above it, and flip the link text to white (the bar rule
   forces ink for the white desktop bar, which is invisible on the dark panel).
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Full-screen drawer. The plugin keys open/closed off the toggle's adjacency
     to the menu (`+ #mega-menu-primary`); mirror those selectors so the panel
     fills the viewport and slides fully off-screen when closed. */
  #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    /* Leave a strip of page on the right so tapping outside closes the menu. */
    width: calc(100% - 56px) !important;
    left: -100% !important;
    z-index: 9999 !important;
    /* Clear the close (X) pinned to the top-right corner. */
    padding-top: 64px !important;
  }

  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    left: 0 !important;
  }

  /* Pin the close (X) to the top-right corner, above the full-screen panel.
     position:fixed so the offset is from the viewport, not the header (which
     the contact strip pushes down). Only in the open state — the closed
     hamburger keeps its normal place in the header. */
  /* Subtle overlay over the page strip left of the drawer (tap to close).
     z-index 150 clears the sticky .site-header (100) so the dim backdrop
     isn't painted over by the header while the drawer is open; still below
     the drawer panel (9999) and close toggle (10000). */
  #page:has(.mega-menu-toggle.mega-menu-open)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.4);
  }

  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open {
    position: fixed !important;
    z-index: 10000 !important;
    top: 8px !important;
    /* Sit inside the drawer: clear the 56px page strip + a small inset. */
    right: 64px !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Close icon: white lines on the transparent button (the bars are the
     .mega-toggle-animated-inner element plus its ::before / ::after). */
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner,
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::before,
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::after {
    background-color: #fff !important;
  }

  /* The plugin's toggle ::after is a fixed 52px-wide, full-height black bar
     (a slide-animation artifact). Hidden by default behind the menu, but our
     z-index bump would surface it as a seam over the panel — kill it. */
  #mega-menu-wrap-primary .mega-menu-toggle::after {
    display: none !important;
  }

  /* The contact strip sits at z-index:1000 in #page — above the header's
     z-index:100, so it would paint over the panel (which lives inside the
     header). Drop it out of the way while the menu is open. */
  #page:has(.mega-menu-toggle.mega-menu-open) .futbol_mesa_contact {
    z-index: auto;
  }

  /* Light text on the dark panel — beats the ink !important from the bar rule. */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-parent > a.mega-menu-link {
    color: #fff !important;
  }
}

/* ---------------------------------------------------------------------------
   Featured products section header (design spec)
   Title + "view all" link on one row: left-aligned Archivo heading and a
   terracotta underlined link, sitting above the homepage products grid.
   --------------------------------------------------------------------------- */
.featured-products__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.featured-products__header .featured-products__title {
  margin: 0;
  text-align: left;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800 !important; /* beat the global `h1, h2, h3 { font-weight: 900 !important }` */
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* Submenu (flyout) items: balance their size with the top-level nav items.
   The plugin renders them at 16px Public Sans 400; bring them to the top-level
   0.82rem Archivo so the dropdown reads as one menu, not a heavier second tier. */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.02em !important;
}

.featured-products__header .featured-products__view-all {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-terracotta);
  text-decoration: none !important; /* beat `.hentry .entry-content a { text-decoration: underline }` (border-bottom is the underline) */
  border-bottom: 2px solid var(--color-terracotta);
  padding-bottom: 2px;
  white-space: nowrap;
}

.featured-products__header .featured-products__view-all:hover,
.featured-products__header .featured-products__view-all:focus {
  color: var(--color-terracotta-hover);
  border-color: var(--color-terracotta-hover);
}

@media (max-width: 767px) {
  /* Hide the section header on mobile (design has no title row there). Keep the
     <h2> in the a11y/SEO outline via screen-reader-only clipping; drop the link,
     which duplicates the "Ver todos los productos" button below the grid. */
  .featured-products__header {
    display: block;
    margin-bottom: 0;
  }

  .featured-products__header .featured-products__view-all {
    display: none;
  }

  .featured-products__header .featured-products__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* ============================================================================
   TIENDA SHOP ARCHIVE STYLING
   Per Claude Design mockup. Layout, filters, product cards, pagination.
   ============================================================================ */

/* LAYOUT: 2-column grid (main + 280px sidebar right), reflow on mobile ≤900px */
/* Storefront: .site-content > .col-full contains #primary + #secondary siblings. */
@supports (display: grid) {
  body.woocommerce-shop .site-content,
  body.archive.woocommerce-page .site-content {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  body.woocommerce-shop .site-content > .col-full,
  body.archive.woocommerce-page .site-content > .col-full {
    /* Storefront sizes .col-full to ~92.4% and auto-centers it, insetting the
       content ~23px more than the full-bleed breadcrumb band — they then start on
       different left edges. Full-width here (the parent .site-content already caps
       at 1280 + centers) so content and breadcrumb share one padding model. */
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: 1fr 280px;
    /* column-gap only: the empty .woocommerce notices wrapper auto-places into a
       0px first grid row, and a row-gap would re-add the ~32px title gap below it. */
    column-gap: 32px;
    row-gap: 0;
    /* Small top padding: breadcrumb sits right above and supplies the spacing.
       A full clamp(…,48px) top here is what produced the ~96px title gap. */
    padding: clamp(12px, 2vw, 18px) clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px);
  }

  /* Storefront's .col-full clearfix ::before/::after become phantom grid rows;
     the 32px grid gap before them is what still padded the title down. Remove. */
  body.woocommerce-shop .site-content > .col-full::before,
  body.woocommerce-shop .site-content > .col-full::after,
  body.archive.woocommerce-page .site-content > .col-full::before,
  body.archive.woocommerce-page .site-content > .col-full::after {
    content: none;
  }

  /* Storefront floats #primary/#secondary at 74%/22% widths — override to let
     them fill their grid tracks, else the sidebar collapses to ~60px. */
  body.woocommerce-shop #primary,
  body.archive.woocommerce-page #primary {
    grid-column: 1 / 2;
    width: 100%;
    min-width: 0; /* let the track shrink below the product grid's max-content */
    float: none;
    margin: 0;
  }

  body.woocommerce-shop #secondary,
  body.archive.woocommerce-page #secondary {
    grid-column: 2 / 3;
    width: 100%;
    float: none;
    margin: 0;
    align-self: start;
  }
}

/* FILTERS TOGGLE: desktop hides the control; the sidebar is always visible.
   Injected as <input hidden> + <label> before #secondary via the get_sidebar
   hook. The checkbox-hack collapse/expand lives in the mobile block below. */
.shop-filters-toggle {
  display: none;
}

/* Keep the checkbox keyboard-focusable but out of view (no `hidden` attr, which
   would drop it from the tab order). Absolute positioning removes it from the
   grid without breaking the sibling-combinator selectors below. */
.shop-filters-toggle__cb {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Mobile reflow: sidebar collapsed behind a toggle (≤1024px) */
@media (max-width: 1024px) {
  @supports (display: grid) {
    body.woocommerce-shop .site-content > .col-full,
    body.archive.woocommerce-page .site-content > .col-full {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: clamp(16px, 4vw, 48px);
    }

    /* Toggle button: full-width pill above the product grid. order:-2 keeps it
       above #secondary (order:-1) so the control always precedes the panel. */
    .shop-filters-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      grid-column: 1 / 2;
      order: -2;
      padding: 13px 18px;
      background: #fff;
      border: 1px solid var(--color-hairline);
      border-radius: var(--radius-lg);
      font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.03em;
      color: var(--color-ink);
      cursor: pointer;
      user-select: none;
      transition: border-color 0.18s ease, color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .shop-filters-toggle:hover,
    .shop-filters-toggle__cb:focus-visible + .shop-filters-toggle {
      border-color: var(--color-terracotta);
      color: var(--color-terracotta);
    }

    /* Open state: terracotta accent ties the control to the revealed panel. */
    .shop-filters-toggle__cb:checked + .shop-filters-toggle {
      border-color: var(--color-terracotta);
      color: var(--color-terracotta);
    }

    /* Chevron: down when collapsed, flips up when the panel is open. */
    .shop-filters-toggle__icon {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      transition: transform 0.18s ease;
    }

    .shop-filters-toggle__cb:checked + .shop-filters-toggle .shop-filters-toggle__icon {
      transform: rotate(180deg);
    }

    /* Reflow the sidebar ABOVE the product grid (mockup fix #1). Grid honours
       `order`; without it the sidebar auto-places after #primary and lands
       below the whole grid + pagination. Collapsed by default on mobile. */
    body.woocommerce-shop #secondary,
    body.archive.woocommerce-page #secondary {
      grid-column: 1 / 2;
      order: -1;
      display: none;
    }

    /* Expand on toggle. !important overrides the (1,1,1) collapse rule above
       from this (1,1,0) sibling selector. */
    .shop-filters-toggle__cb:checked ~ #secondary {
      display: block !important;
    }
  }
}

/* BREADCRUMB: muted links, current crumb ink + weight-600 */
.storefront-breadcrumb .woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0;
  padding: 0;
}

/* Prev crumbs gray, not terracotta: the global `.woocommerce a:not(.button)…`
   rule (0,3,1) outranks a plain `.storefront-breadcrumb .woocommerce-breadcrumb a`
   (0,2,1), so :not(.button) here matches its specificity and wins on source order. */
.storefront-breadcrumb .woocommerce-breadcrumb a:not(.button) {
  color: var(--color-muted);
  text-decoration: none;
}

.storefront-breadcrumb .woocommerce-breadcrumb a:not(.button):hover,
.storefront-breadcrumb .woocommerce-breadcrumb a:not(.button):focus {
  color: var(--color-terracotta);
}

/* Separator: dimmed slash with 8px breathing room either side (per mockup) */
.storefront-breadcrumb .woocommerce-breadcrumb .breadcrumb-separator {
  margin: 0 8px;
  opacity: 0.5;
}

/* Current breadcrumb item: ink + weight-600 (wrapped by the theme template) */
.storefront-breadcrumb .woocommerce-breadcrumb .breadcrumb-current {
  color: var(--color-ink);
  font-weight: 600;
}