/* ==============================================
   31-search.css — Search Results product cards (ERG v3)
   Scope: .search (product search results, template 702144)

   WHY THIS FILE EXISTS
   Search results are rendered by the Elementor *WooCommerce Products*
   widget (not the Loop Grid). The Loop Grid / branded loop-item card can't
   be used here: JetSearch's expanded result set lives in WooCommerce's
   product-query layer, not the raw main query an Elementor "Current Query"
   loop grid reads — so the loop grid only ever sees one page and renders
   NO pagination. The Products widget paginates correctly, so we keep it and
   instead skin its native `ul.products li.product` markup to match the shop
   PLP card (see 30-plp.css .erg-plp-card).

   Mirrors the shop card: steel panel, image frame, Oswald uppercase title,
   gold price + gold CTA pill (var --erg-cta), red sale pill, hover lift.
   Uses tokens from 00-tokens.css only.
============================================== */

/* Grid gap to match the PLP loop grid */
.search .elementor-widget-woocommerce-products ul.products{
  gap: 22px !important;
}

@media (min-width: 768px) and (max-width: 1099px){
  .search .elementor-widget-woocommerce-products ul.products{ gap: 18px !important; }
}
@media (max-width: 767px){
  .search .elementor-widget-woocommerce-products ul.products{ gap: 16px !important; }
}

/* =========================================================
   CARD SHELL — Steel/Range v2 (matches .erg-plp-card)
========================================================= */
.search .elementor-widget-woocommerce-products ul.products li.product{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;

  margin: 0 !important;
  padding: 16px 16px 14px;
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.035) 0, rgba(255,255,255,0) 60%),
    var(--erg-panel, #13181f);

  border: 1px solid var(--erg-line, rgba(255,255,255,.08));
  box-shadow: 0 14px 30px rgba(0,0,0,.55);

  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
}

@media (hover:hover){
  .search .elementor-widget-woocommerce-products ul.products li.product:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 38px rgba(0,0,0,.70);
    border-color: rgba(255,255,255,.14);
  }
}

/* The product link wraps image + title + price */
.search .elementor-widget-woocommerce-products li.product a.woocommerce-loop-product__link{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

/* =========================================================
   IMAGE FRAME (matches .erg-card__thumb)
========================================================= */
.search .elementor-widget-woocommerce-products li.product img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;

  margin: 0;
  padding: 10px;
  border-radius: 12px;
  background: #0f1216;
  border: 1px solid rgba(255,255,255,.08);

  will-change: transform;
  transition: transform .22s ease-out, filter .22s ease-out;
}

@media (hover:hover){
  .search .elementor-widget-woocommerce-products li.product:hover img{
    transform: scale(1.03);
    filter: brightness(1.06);
  }
}

/* =========================================================
   TITLE — Oswald uppercase, 3-line clamp (white, matches shop)
========================================================= */
.search .elementor-widget-woocommerce-products li.product h2.woocommerce-loop-product__title{
  margin: 0;
  padding: 0;

  font-family: var(--erg-head, "Oswald", sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.22;

  color: var(--erg-text, #f2f4f6) !important;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  min-height: calc(1.22em * 3);
}

/* =========================================================
   PRICE — gold, with strikethrough handling (matches shop)
========================================================= */
.search .elementor-widget-woocommerce-products li.product .price{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.search .elementor-widget-woocommerce-products li.product .price .woocommerce-Price-amount,
.search .elementor-widget-woocommerce-products li.product .price .woocommerce-Price-amount bdi{
  font-family: var(--erg-head, "Oswald", sans-serif);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--erg-text, #f2f4f6);
}

.search .elementor-widget-woocommerce-products li.product .price ins{ text-decoration: none; }

.search .elementor-widget-woocommerce-products li.product .price del{
  opacity: .6;
  margin: 0;
}
.search .elementor-widget-woocommerce-products li.product .price del .woocommerce-Price-amount,
.search .elementor-widget-woocommerce-products li.product .price del .woocommerce-Price-amount bdi{
  font-size: 14px;
  font-weight: 700;
  color: var(--erg-text-dim, #bdc3cc);
}

/* =========================================================
   SALE PILL — green "savings" badge, top-right
   Per the ERG email design system + 00-tokens.css: the sale/savings
   badge is GREEN (--erg-sale-1/-2). Gold = CTAs/accents, red = urgency
   ("expires") only. Overrides the widget's gold .onsale (Elementor !important).
========================================================= */
.search .elementor-widget-woocommerce-products li.product span.onsale{
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  z-index: 3;
  margin: 0;
  min-width: 0;
  min-height: 0;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* !important required: the Elementor products-widget CSS forces padding:0
     at higher specificity, and 36-homepage.css sets font-size:11px and loads
     after this file (same specificity), so both win without !important. */
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;

  background-color: var(--erg-sale-1, #5cb87a) !important;
  background-image: linear-gradient(180deg, var(--erg-sale-1, #5cb87a), var(--erg-sale-2, #4a9e66)) !important;

  border: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);

  color: #0e1411 !important;
  font-family: var(--erg-head, "Oswald", sans-serif) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* =========================================================
   CARD ACTIONS — Add to Cart + More Info (match archive loop card)
   The archive loop card shows a gold-gradient ADD TO CART pill and a
   full-width gold MORE INFO pill below it. The search Products widget
   renders only the add-to-cart link, so the "More Info" link is added
   server-side (erg-wc-tweaks.php → woocommerce_after_shop_loop_item) and
   styled here. Both buttons pinned to the bottom for equal-height cards.
========================================================= */

/* Primary ADD TO CART (and "Read more"/"Select options" variants) —
   gold gradient pill matching the archive button (global button type:
   ~16px / 500 / uppercase, NOT condensed Oswald). */
.search .elementor-widget-woocommerce-products li.product a.button:not(.erg-search-moreinfo){
  margin-top: auto !important;   /* equal-height cards: pin action group to bottom */

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;

  border-radius: 999px !important;
  padding: 12px 18px !important;

  font-family: inherit;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  background: linear-gradient(180deg, var(--erg-cta, #C8A84B), var(--erg-cta-2, #b8983f)) !important;
  color: var(--erg-cta-contrast, #11151a) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);

  transition: transform .14s, box-shadow .14s, filter .14s;
}

@media (hover:hover){
  .search .elementor-widget-woocommerce-products li.product a.button:not(.erg-search-moreinfo):hover{
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 16px 28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.14);
  }
}

/* Secondary MORE INFO — full-width gold pill below Add to Cart (matches archive) */
.search .elementor-widget-woocommerce-products li.product a.erg-search-moreinfo{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;

  border-radius: 999px !important;
  padding: 12px 18px !important;

  font-family: inherit;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  background: var(--erg-cta, #C8A84B) !important;
  color: var(--erg-cta-contrast, #11151a) !important;
  border: 1px solid var(--erg-cta, #C8A84B) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14);

  transition: transform .14s, filter .14s;
}

@media (hover:hover){
  .search .elementor-widget-woocommerce-products li.product a.erg-search-moreinfo:hover{
    transform: translateY(-1px);
    filter: brightness(1.06);
  }
}

/* Post-add "View cart" link */
.search .elementor-widget-woocommerce-products li.product a.added_to_cart{
  width: 100%;
  margin-top: 8px;
  text-align: center;
  text-decoration: none;

  font-family: var(--erg-body, sans-serif);
  font-size: 13px;
  color: var(--erg-link, #72B6C6);
}

/* =========================================================
   NO-RESULTS EMPTY STATE
   The Products widget renders nothing when a search has no matches, so
   this block is injected into the results column (erg-wc-tweaks.php
   wp_footer script) and styled here.
========================================================= */
.erg-search-empty{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;

  margin: 4px 0 0;
  padding: 32px 30px 34px;

  border-radius: 18px;
  border: 1px solid var(--erg-line, rgba(255,255,255,.08));
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(200,168,75,.06) 0, rgba(0,0,0,0) 60%),
    var(--erg-panel, #13181f);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.erg-search-empty__kicker{
  font-family: var(--erg-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--erg-cta, #C8A84B);
}

.erg-search-empty__title{
  margin: 0;
  font-family: var(--erg-head, "Oswald", sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--erg-text, #f2f4f6);
}

.erg-search-empty__text{
  margin: 0;
  max-width: 56ch;
  font-family: var(--erg-body, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--erg-muted, rgba(242,244,246,.82));
}

.erg-search-empty__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.erg-search-empty__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 26px;

  border-radius: 999px;
  font-family: var(--erg-head, "Oswald", sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;

  background: linear-gradient(180deg, var(--erg-cta, #C8A84B), var(--erg-cta-2, #b8983f));
  color: var(--erg-cta-contrast, #11151a);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .14s, filter .14s;
}
.erg-search-empty__btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }

.erg-search-empty__link{
  font-family: var(--erg-body, sans-serif);
  font-size: 14px;
  color: var(--erg-link, #72B6C6);
  text-decoration: none;
  border-bottom: 1px solid rgba(114,182,198,.35);
  padding-bottom: 2px;
}
.erg-search-empty__link:hover{ color: var(--erg-link-hover, #9BCED9); }

/* =========================================================
   PAGINATION — native WooCommerce pagination (.woocommerce-pagination)
   The Products widget renders WC's native pagination, not Elementor's, so
   the 30-plp.css .elementor-pagination styles don't reach it (it was falling
   back to the theme's red #cc3366 link color). Mirror the brand pagination:
   dark pills + gold active page.
========================================================= */
.search .woocommerce-pagination ul.page-numbers{
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: 28px 0 12px;
  padding: 0;
  border: 0;
}
.search .woocommerce-pagination ul.page-numbers li{ margin: 0; border: 0; }

.search .woocommerce-pagination li .page-numbers{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;

  border-radius: 10px !important;
  border: 1px solid var(--erg-line, rgba(255,255,255,.10)) !important;
  background: var(--erg-panel, #13181f) !important;
  color: var(--erg-text-dim, #bdc3cc) !important;

  font-family: var(--erg-mono, "JetBrains Mono", monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none !important;

  transition: all .15s ease;
}

.search .woocommerce-pagination li a.page-numbers:hover{
  border-color: rgba(255,255,255,.22) !important;
  color: var(--erg-text, #f2f4f6) !important;
  background: rgba(255,255,255,.06) !important;
}

.search .woocommerce-pagination li .page-numbers.current{
  background: var(--erg-cta, #C8A84B) !important;
  color: var(--erg-cta-contrast, #11151a) !important;
  border-color: var(--erg-cta, #C8A84B) !important;
  font-weight: 700;
}

.search .woocommerce-pagination li .page-numbers.dots{
  border: none !important;
  background: none !important;
  color: var(--erg-text-dim, #bdc3cc) !important;
  min-width: 28px;
  padding: 0;
}

.search .woocommerce-pagination li .page-numbers.prev,
.search .woocommerce-pagination li .page-numbers.next{
  font-family: var(--erg-head, "Oswald", sans-serif);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  padding: 0 16px;
}

@media (max-width: 767px){
  .search .woocommerce-pagination li .page-numbers{
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 8px;
  }
}

/* =========================================================
   BROWSE BY CATEGORY — search facet (sidebar)
   Lists the product categories present in the current search results with
   counts; each row narrows the search to that category. Injected into the
   sidebar above the filters by erg-wc-tweaks.php. Mirrors .erg-br-filters.
========================================================= */
.erg-search-cats{
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid var(--erg-line, rgba(255,255,255,.08));
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.03) 0, rgba(255,255,255,0) 60%),
    var(--erg-panel, #13181f);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}

.erg-search-cats__label{
  margin: 0 0 10px;
  font-family: var(--erg-head, "Oswald", sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.erg-search-cats__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.erg-search-cats__list li{ margin: 0; padding: 0; }

.erg-search-cats__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);

  font-family: var(--erg-body, sans-serif);
  font-size: 14px;
  color: var(--erg-text, #f2f4f6);
  text-decoration: none;

  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.erg-search-cats__item .name{ font-weight: 600; }
.erg-search-cats__item .count{
  font-family: var(--erg-mono, monospace);
  font-size: 12px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 2px 9px;
}

@media (hover:hover){
  .erg-search-cats__item:hover{
    background: rgba(0,0,0,.26);
    border-color: rgba(255,255,255,.18);
  }
}

.erg-search-cats__item.is-active{
  background: var(--erg-cta, #C8A84B);
  border-color: var(--erg-cta, #C8A84B);
  color: var(--erg-cta-contrast, #11151a);
}
.erg-search-cats__item.is-active .name{ font-weight: 700; }
.erg-search-cats__item.is-active .count{
  background: rgba(0,0,0,.16);
  color: #11151a;
  border-color: rgba(0,0,0,.18);
}

.erg-search-cats__item:focus-visible{
  outline: 2px solid var(--erg-red, #e23b3b);
  outline-offset: 2px;
}

.erg-search-cats__clear{ margin-top: 8px; }
.erg-search-cats__clear a{
  font-family: var(--erg-body, sans-serif);
  font-size: 13px;
  color: var(--erg-link, #72B6C6);
  text-decoration: none;
}
.erg-search-cats__clear a:hover{ color: var(--erg-link-hover, #9BCED9); }

/* =========================================================
   SIDEBAR SCROLL (search) — the sidebar now holds the category facet plus
   the filters and can exceed the viewport. The shared 30-plp sticky sidebar
   only reveals its scrollbar on hover (unreliable) and clips the overflow, so
   the lower filters become unreachable. On search, give it an always-on
   internal scrollbar so every filter stays reachable while the column stays
   sticky.
========================================================= */
@media (min-width: 1024px){
  .search .erg-plp-layout__sidebar{
    max-height: calc(100vh - 190px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .search .erg-plp-layout__sidebar::-webkit-scrollbar{ width: 8px !important; height: 8px !important; }
  .search .erg-plp-layout__sidebar::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .search .erg-plp-layout__sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); }
}

/* A11y focus */
.search .elementor-widget-woocommerce-products li.product :is(a, button):focus-visible{
  outline: 2px solid var(--erg-red, #e23b3b);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 768px){
  .search .elementor-widget-woocommerce-products ul.products li.product{
    padding: 14px 14px 12px;
    border-radius: 14px;
  }
  .search .elementor-widget-woocommerce-products li.product h2.woocommerce-loop-product__title{
    font-size: 16px;
  }
  .search .elementor-widget-woocommerce-products li.product .price .woocommerce-Price-amount,
  .search .elementor-widget-woocommerce-products li.product .price .woocommerce-Price-amount bdi{
    font-size: 16px;
  }
}