/* ==============================================
   30-plp.css — PLP / Archive styling (ERG v2)
   - Product cards (Loop Item)
   - PLP filter bar (JetSmartFilters)
   Uses tokens from 00-tokens.css only.
============================================== */

/* =========================================================
   PRODUCT CARD — Steel/Range v2
   Scope: .erg-plp-card.erg-card
========================================================= */

/* Card shell */
.erg-plp-card.erg-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;

  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);

  border: 1px solid var(--erg-line);
  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){
  .erg-plp-card.erg-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 38px rgba(0,0,0,.70);
    border-color: rgba(255,255,255,.14);
  }
}

/* Legacy image wrapper (kept in case some templates still use it) */
.erg-card__image{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0f1216;
}

.erg-card__image img{
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  transition: transform .22s ease-out, filter .22s ease-out;
}

@media (hover:hover){
  .erg-plp-card:hover .erg-card__image img{
    transform: scale(1.03);
    filter: brightness(1.06);
  }
}

/* Title + clamp */
.erg-card__title{ margin-top: 10px; }

.erg-card__title :is(.product_title, h3, a){
  font-family: var(--erg-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.22;

  color: var(--erg-text);
  text-decoration: none;

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

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

@media (hover:hover){
  .erg-card__title a:hover{ text-decoration: underline; }
}

/* Price (generic fallback) */
.erg-card__price{ margin-top: 4px; }

.erg-card__price :is(.woocommerce-Price-amount, .woocommerce-Price-amount bdi){
  font-family: var(--erg-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--erg-text);
}

.erg-card__price del{
  opacity: .55;
  margin-right: 6px;
  color: var(--erg-text-dim);
}

.erg-card__price ins{
  text-decoration: none;
}

/* Meta lines */
.erg-card__meta{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;

  font-size: 12px;
  line-height: 1.4;
}

.erg-card__meta p{ margin: 0; }

.erg-meta-line--primary{
  color: color-mix(in oklab, var(--erg-text) 86%, transparent);
  font-weight: 600;
}

.erg-meta-line--secondary{ color: var(--erg-text-dim); }

.erg-meta-line--upc{
  color: color-mix(in oklab, var(--erg-text) 45%, transparent);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

/* Actions — responsive CTAs (Grid) */
.erg-card__actions{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* Primary + Woo add-to-cart */
.erg-card__actions :is(.elementor-button, .single_add_to_cart_button){
  width: 100%;
  justify-content: center;

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

  font-size: clamp(12px, .9rem, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;

  background: linear-gradient(180deg, var(--erg-cta), var(--erg-cta-2));
  color: var(--erg-cta-contrast);

  border: 1px solid rgba(255,255,255,.10);
  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, background .14s;
}

@media (hover:hover){
  .erg-card__actions :is(.elementor-button, .single_add_to_cart_button):hover{
    transform: translateY(-1px);
    background: linear-gradient(180deg, var(--erg-cta-2), var(--erg-cta-3));
    box-shadow: 0 16px 28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.14);
  }
}

.erg-card__actions :is(.button, .add_to_cart_button){ width: 100%; }

/* Secondary (More Info) */
.erg-card__secondary-btn .elementor-button{
  width: 100%;
  justify-content: center;

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

  font-size: clamp(12px, .9rem, 14px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;

  background: transparent;
  border: 1px solid var(--erg-line);
  color: var(--erg-text);

  box-shadow: none;
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}

@media (hover:hover){
  .erg-card__secondary-btn .elementor-button:hover{
    border-color: color-mix(in srgb, var(--erg-link) 60%, transparent);
    background: color-mix(in srgb, var(--erg-link) 12%, transparent);
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
    transform: translateY(-1px);
  }
}

/* Icon spacing in Elementor buttons */
.erg-card__actions .elementor-button .elementor-button-icon{
  margin-inline-end: 10px;
  line-height: 0;
}

/* Hard collapse to single column on tighter screens */
@media (max-width: 880px){
  .erg-card__actions{ grid-template-columns: 1fr; }
}

/* Mobile spacing */
@media (max-width: 768px){
  .erg-plp-card.erg-card{
    padding: 14px 14px 12px;
    border-radius: 14px;
  }

  .erg-card__title :is(.product_title, h3, a){
    font-size: 16px;
    -webkit-line-clamp: 3;
    min-height: calc(1.22em * 3);
  }

  .erg-card__price :is(.woocommerce-Price-amount, .woocommerce-Price-amount bdi){
    font-size: 16px;
  }
}

/* A11y focus */
.erg-plp-card.erg-card :is(a, button):focus-visible{
  outline: 2px solid var(--erg-red);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =========================================================
   PLP IMAGE FRAME (if you use erg-card__thumb on the image widget)
========================================================= */
.erg-plp-card .erg-card__thumb .elementor-widget-container{
  aspect-ratio: 4 / 3;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;

  background: #0f1216;
  border-radius: 12px;
  overflow: hidden;
}

.erg-plp-card .erg-card__thumb :is(figure, .wp-caption){
  margin: 0;
  width: 100%;
  height: 100%;
}

.erg-plp-card .erg-card__thumb a{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.erg-plp-card .erg-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  will-change: transform;
  transition: transform .22s ease-out, filter .22s ease-out;
}

@media (hover:hover){
  .erg-plp-card:hover .erg-card__thumb img{
    transform: scale(1.03);
    filter: brightness(1.06);
  }
}

/* =========================================================
   PLP SALE BADGE (JetWooBuilder) — wrapper transparency + pill
========================================================= */
.erg-plp-card .erg-card__sale-badge,
.erg-plp-card .erg-card__sale-badge .elementor-widget-container,
.erg-plp-card .erg-card__sale-badge .jet-woo-builder-archive-product-sale-badge{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.erg-plp-card .erg-card__sale-badge::before,
.erg-plp-card .erg-card__sale-badge::after{
  content: none !important;
  display: none !important;
}

.erg-plp-card .erg-card__sale-badge .jet-woo-product-badge__sale,
.erg-plp-card .erg-card__sale-badge .jet-woo-product-badge__sale *{
  background: transparent !important;
  box-shadow: none !important;
}

.erg-plp-card .erg-card__sale-badge .jet-woo-product-badge.jet-woo-product-badge__sale{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: var(--erg-red) !important;
  background-image: linear-gradient(180deg, #f04a4a, #b82d2d) !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,.14) !important;

  color: #fff !important;
  font-family: var(--erg-head) !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  font-variant-numeric: tabular-nums !important;

  white-space: nowrap !important;
  max-width: calc(100% - 24px);
}

.erg-plp-card .erg-card__sale-badge .jet-woo-product-badge__sale::after{
  content: "" !important;
  position: absolute;
  left: 2px; right: 2px; top: 2px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) !important;
  pointer-events: none !important;
}

/* =========================================================
   PLP PRICE (if you use erg-card__priceval on the Price widget)
========================================================= */
.erg-plp-card .erg-card__priceval .price{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

/* Sale price (ins) = primary */
.erg-plp-card .erg-card__priceval .price ins{
  text-decoration: none;
}

.erg-plp-card .erg-card__priceval .price ins :is(.woocommerce-Price-amount, .woocommerce-Price-amount bdi){
  font-family: var(--erg-head);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--erg-text);
}

/* Regular price (del) = secondary */
.erg-plp-card .erg-card__priceval .price del{
  opacity: .65;
  color: var(--erg-text-dim);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,.35);
  margin: 0;
}

.erg-plp-card .erg-card__priceval .price del :is(.woocommerce-Price-amount, .woocommerce-Price-amount bdi){
  font-family: var(--erg-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
}

/* Non-sale items (single price) */
.erg-plp-card .erg-card__priceval .price > :is(.woocommerce-Price-amount, .woocommerce-Price-amount bdi){
  font-family: var(--erg-head);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--erg-text);
}

/* =========================================================
   PLP META: category links — dotted underline
========================================================= */
.erg-plp-card .erg-card__meta a{
  display: inline-block;
  color: rgba(255,255,255,.80);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.35);
  transition: color .14s, transform .14s, text-decoration-color .14s;
}

@media (hover:hover){
  .erg-plp-card .erg-card__meta a:hover{
    color: #fff;
    text-decoration-color: rgba(255,255,255,.65);
    transform: translateY(-1px);
  }
}

.erg-plp-card .erg-card__meta a:focus-visible{
  outline: 2px solid var(--erg-red);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================
   PLP FILTER BAR — JetSmartFilters (ERG)
   Scope: shop + category + tag archives
   Template classes:
   - .erg-filters-bar
   - .erg-filters-left
   - .erg-filters-right
========================================================= */

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar{
  width: 100%;
  max-width: min(100% - 48px, 1320px);
  margin: 18px auto 22px;
  padding: 12px;

  border: 1px solid var(--erg-line);
  border-radius: var(--erg-radius);

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

  /* kill any weird inherited sizing */
  min-height: 0 !important;
  height: auto !important;
}

/* Elementor boxed containers put children in .e-con-inner — that’s our grid */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar > .e-con-inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: min-content;
  gap: 12px 14px;

  align-items: end;
  align-content: start;
  justify-items: stretch;

  min-height: 0 !important;
  height: auto !important;
}

/* Active filters row spans full width */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar > .e-con-inner > :is(
  .elementor-widget-jet-smart-filters-active,
  .jet-active-filters,
  .jet-active-filters__list
){
  grid-column: 1 / -1;
}

/* ---------------------------------
   Left side: filters (3-up grid)
---------------------------------- */

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-left{
  grid-column: 1;
  min-width: 0 !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

/* widgets in left column shouldn’t enforce width */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-left .elementor-widget{
  min-width: 0 !important;
}

/* Range widget spans whole left grid */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-left .elementor-widget-jet-smart-filters-range{
  grid-column: 1 / -1;
  min-width: 0 !important;
}

/* ---------------------------------
   Right side: result count + sort
---------------------------------- */

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-right{
  grid-column: 2;
  min-width: 260px;
  margin: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

/* prevent Elementor widget widths from fighting flex */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-right .elementor-widget{
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* optional: keep sort select at a sane width */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-right .erg-sort-select{
  width: 240px;
}

/* Result count styling */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-result-count{
  margin: 0;
  padding: 0;

  font-family: var(--erg-head);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;

  color: color-mix(in srgb, var(--erg-text) 72%, transparent);
  white-space: nowrap;
}

/* ---------------------------------
   Compact controls / labels
---------------------------------- */

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-filter-label{
  display: block;
  margin: 0 0 4px;

  font-family: var(--erg-head);
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 11px;

  color: color-mix(in srgb, var(--erg-text) 72%, transparent);
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar :is(
  select,
  input[type="text"],
  input[type="number"],
  .jet-select__control
){
  width: 100%;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--erg-line);
  background: rgba(0,0,0,.28);
  color: var(--erg-text);
  font-family: var(--erg-body);
  font-size: 12px;
  padding: 8px 12px;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar :is(select, input):focus-visible{
  outline: 2px solid var(--erg-link);
  outline-offset: 2px;
}

/* Hide counters */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-filter-counter{
  display: none !important;
}

/* Hide Apply buttons (instant filters) */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-smart-filters-apply-button{
  display: none !important;
}

/* Active filter pills */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-active-filters__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-active-filters__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--erg-line);
  background: rgba(255,255,255,.04);

  color: var(--erg-text);
  font-family: var(--erg-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-active-filters__remove{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: 999px;

  border: 1px solid var(--erg-line);
  background: rgba(0,0,0,.25);
  color: var(--erg-text);
  line-height: 1;
}

/* ---------------------------------
   Range slider / inputs
---------------------------------- */

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__slider{
  position: relative;
  border: 1px solid var(--erg-line);
  border-radius: var(--erg-radius-sm);
  background: rgba(0,0,0,.22);
  padding: 10px 10px 8px;
  margin: 0;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__slider__track{
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* active range uses inline --low / --high */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__slider__track__range{
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: var(--low);
  right: calc(100% - var(--high));
  border-radius: 999px;
  background: linear-gradient(90deg, var(--erg-cta-3), var(--erg-cta));
}

/* overlay the two range inputs */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__slider__input{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;

  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;

  height: 26px;
  margin: 0;
  pointer-events: none;
}

/* thumbs */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__slider__input::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 18px;
  height: 18px;
  border-radius: 999px;

  background: var(--erg-panel-2);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);

  pointer-events: auto;
  cursor: grab;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__slider__input::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;

  background: var(--erg-panel-2);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);

  pointer-events: auto;
  cursor: grab;
}

/* Range inputs under slider */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__inputs{
  margin-top: 8px;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__inputs__container{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__inputs__group{
  min-width: 0;
  display: flex;
  align-items: stretch;

  border: 1px solid var(--erg-line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__inputs__group__text{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  padding: 0 8px;

  font-family: var(--erg-head);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  color: color-mix(in srgb, var(--erg-text) 80%, transparent);

  background: rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.10);
}

:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
.erg-filters-bar .jet-range__inputs__group input[type="number"]{
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 40px;
  padding: 8px 10px 8px 10px;
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------
   Responsive
---------------------------------- */

/* Tablet: stack right below left */
@media (max-width: 1024px){
  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-bar > .e-con-inner{
    grid-template-columns: 1fr;
  }

  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-right{
    grid-column: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
    min-width: 0;
  }
}

/* Mobile: 2-up selects, full-width range, hide labels */
@media (max-width: 767px){
  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-bar{
    padding: 10px;
    border-radius: 14px;
  }

  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-bar .jet-filter-label{
    display: none;
  }

  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-left{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-left .elementor-widget-jet-smart-filters-range{
    grid-column: 1 / -1;
  }

  :is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag)
  .erg-filters-bar .jet-range__inputs__container{
    grid-template-columns: 1fr;
  }
}