/*
 * Shop archive: header, filters, product grid, cards.
 * Light context throughout — product photography needs a near-white ground.
 */

/* --- Archive header ----------------------------------------------------- */

.eld-shop-head { padding: var(--eld-space-6) 0 var(--eld-space-5); }

.eld-shop-head__desc {
  max-width: 62ch;
  margin-top: var(--eld-space-4);
  line-height: 1.7;
  color: var(--eld-ink-2);
}

.eld-shop-head__count {
  margin: var(--eld-space-3) 0 0;
  font-size: var(--eld-text-small);
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-3);
}

.eld-shop-head__count strong { color: var(--eld-ink-2); font-weight: 600; }

/* --- Filters ------------------------------------------------------------ */

.eld-filters {
  padding: var(--eld-space-4) 0;
  border-block: 1px solid var(--eld-border);
  margin-bottom: var(--eld-space-5);
}

.eld-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eld-space-3);
}

.eld-filter { position: relative; }

.eld-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--eld-space-2);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  font-size: var(--eld-text-small);
  font-weight: 500;
  color: var(--eld-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color var(--eld-transition), color var(--eld-transition);
}

.eld-filter__toggle::-webkit-details-marker { display: none; }
.eld-filter__toggle:hover { border-color: var(--eld-accent); color: var(--eld-accent); }

.eld-filter[open] .eld-filter__toggle { border-color: var(--eld-accent); }
.eld-filter[open] .eld-filter__toggle .eld-icon { transform: rotate(180deg); }
.eld-filter__toggle .eld-icon { transition: transform var(--eld-transition); }

.eld-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--eld-radius-full);
  background-color: var(--eld-accent);
  color: var(--eld-on-accent);
  font-size: 0.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * The panel floats so opening a filter does not push the grid down — on a
 * catalogue page that shift costs the reader their place.
 */
.eld-filter__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--eld-z-dropdown);
  min-width: 15rem;
  max-height: 20rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--eld-space-2);
  list-style: none;
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg);
}

.eld-filter__option {
  display: flex;
  align-items: center;
  gap: var(--eld-space-3);
  padding: 0.4375rem 0.5rem;
  border-radius: var(--eld-radius);
  color: var(--eld-ink-2);
  font-size: var(--eld-text-small);
}

.eld-filter__option:hover { background-color: var(--eld-bg-2); color: var(--eld-ink); }

.eld-filter__check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--eld-border-2);
  border-radius: 3px;
}

.eld-filter__option.is-on { color: var(--eld-ink); font-weight: 500; }

.eld-filter__option.is-on .eld-filter__check {
  border-color: var(--eld-accent);
  background-color: var(--eld-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.eld-filter__name { flex: 1; }

.eld-filter__count {
  font-size: var(--eld-text-micro);
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-3);
}

/* --- Active filter chips ------------------------------------------------ */

.eld-filters__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eld-space-2);
  margin-top: var(--eld-space-4);
}

.eld-filters__active-label {
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eld-ink-3);
  margin-right: var(--eld-space-2);
}

.eld-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg-2);
  color: var(--eld-ink);
  font-size: var(--eld-text-small);
}

.eld-chip:hover { border-color: var(--eld-accent); color: var(--eld-accent); }
.eld-chip .eld-icon { opacity: 0.6; }

.eld-filters__clear {
  font-size: var(--eld-text-small);
  color: var(--eld-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eld-filters__clear:hover { color: var(--eld-accent); }

/* --- Toolbar ------------------------------------------------------------ */

.eld-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--eld-space-5);
}

.eld-shop-toolbar .woocommerce-ordering select,
.woocommerce-ordering select {
  min-height: 40px;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg);
  color: var(--eld-ink);
  font-family: var(--eld-font-body);
  font-size: var(--eld-text-small);
}

/* --- Product grid ------------------------------------------------------- */

ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--eld-space-6) var(--eld-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * WooCommerce's general stylesheet clearfixes ul.products with ::before and
 * ::after set to display:table. In a float layout they are invisible; in a
 * grid each one becomes a cell, so the first row started an entire column late.
 *
 * !important is deliberate: Woo's selector is more specific, and matching it
 * would mean hardcoding a selector that changes between releases. This is a
 * framework override, which is what !important is for.
 */
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 700px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); gap: var(--eld-space-7) var(--eld-space-5); }
}

ul.products li.product,
.eld-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

/* --- Card --------------------------------------------------------------- */

/*
 * White media, on a page that is a shade darker. The catalogue photographs
 * everything cut out on white, so the card reads as one continuous surface
 * with the product floating in it — and the card separates from the page by
 * tone and a hairline rather than by a shadow, which this brand does not use.
 */
.eld-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--eld-paper-border);
  border-radius: var(--eld-radius);
  background-color: var(--eld-paper);
  aspect-ratio: 1 / 1;
}

.eld-card:hover .eld-card__media { border-color: var(--eld-accent); }

/*
 * The card answers the pointer by rising, not by casting a shadow — this
 * brand has none. Two hairlines doing the work instead: the border takes the
 * accent, and a rule wipes in under the media.
 */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .eld-card__media {
    transition:
      border-color var(--eld-transition),
      transform 320ms var(--eld-ease-out);
  }

  .eld-card:hover .eld-card__media { transform: translateY(-3px); }

  .eld-card__media::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--eld-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms var(--eld-ease-out);
  }

  .eld-card:hover .eld-card__media::after { transform: scaleX(1); }
}

/*
 * contain, not cover: these are technical parts on a plain ground and a crop
 * that clips a profile's end or a trowel's handle misrepresents the product.
 */
.eld-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--eld-space-4);
  transition: transform 500ms var(--eld-ease-out), opacity 300ms ease;
}

/*
 * Hover reveals the second gallery frame — on a profile that is the section
 * view, the single most useful thing to see without opening the product.
 */
.eld-card__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.eld-card:hover .eld-card__img--alt { opacity: 1; }
.eld-card:hover .eld-card__img { transform: scale(1.03); }

.eld-card__badge {
  position: absolute;
  top: var(--eld-space-3);
  left: var(--eld-space-3);
  z-index: 1;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--eld-radius-full);
  font-size: var(--eld-text-micro);
  font-weight: 600;
  letter-spacing: var(--eld-tracking-wide);
  text-transform: uppercase;
}

.eld-card__badge--sale { background-color: var(--eld-promo); color: var(--eld-promo-ink); }
.eld-card__badge--new { background-color: var(--eld-accent); color: var(--eld-on-accent); }

.eld-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--eld-space-4);
}

.eld-card__brand {
  margin: 0 0 0.375rem;
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eld-ink-3);
}

.eld-card__title {
  margin: 0 0 0.375rem;
  font-family: var(--eld-font-body);
  font-size: var(--eld-text-lead);
  font-weight: 600;
  line-height: var(--eld-leading-snug);
  letter-spacing: -0.015em;
}

.eld-card__title a { color: var(--eld-ink); }
.eld-card:hover .eld-card__title a { color: var(--eld-accent-h); }

.eld-card__ref { margin: 0 0 var(--eld-space-3); }

.eld-card__ref .eld-ref { font-size: var(--eld-text-small); color: var(--eld-ink-2); }

.eld-card__refs {
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-3);
}

.eld-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: var(--eld-space-3);
}

/* The price is what the visitor came for; it should not be the same size as
   the reference number sitting above it. */
.eld-card__amount {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
  color: var(--eld-ink);
}

.eld-card__amount del { font-weight: 400; color: var(--eld-ink-3); margin-right: 0.375rem; }
.eld-card__amount ins { text-decoration: none; color: var(--eld-promo); }

.eld-card__unit {
  font-size: var(--eld-text-small);
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-3);
}

/* --- Stock line --------------------------------------------------------- */

.eld-stock {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 0 var(--eld-space-4);
  font-size: var(--eld-text-small);
  color: var(--eld-ink-2);
}

.eld-stock__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--eld-radius-full);
  background-color: var(--eld-stock-out);
}

.eld-stock--in .eld-stock__dot { background-color: var(--eld-stock-in); }
.eld-stock--low .eld-stock__dot { background-color: var(--eld-stock-low); }
.eld-stock--backorder .eld-stock__dot { background-color: var(--eld-stock-low); }

.eld-stock--low .eld-stock__label { color: var(--eld-stock-low); font-weight: 500; }
.eld-stock--out .eld-stock__label { color: var(--eld-ink-3); }
.eld-stock__dispatch { color: var(--eld-ink-3); }

/* --- Card action -------------------------------------------------------- */

/* Pushed to the bottom so buttons line up across a row of uneven titles. */
.eld-card__action { margin-top: auto; padding-top: var(--eld-space-3); }

.eld-card__cta,
.eld-card .add_to_cart_button,
.eld-card .button {
  width: 100%;
  min-height: 42px;
  font-size: 0.875rem;
  font-weight: 500;
}

/*
 * "Choisir une référence" is an outline control because it opens a choice
 * rather than buying anything — but a hairline in the faintest grey read as
 * disabled next to a filled blue button elsewhere on the page. It takes the
 * ink colour and a real border, and fills on hover so the affordance is
 * unmistakable.
 */
.eld-card .eld-btn--outline {
  border-color: var(--eld-border-2);
  color: var(--eld-ink);
}

.eld-card:hover .eld-btn--outline { border-color: var(--eld-accent); color: var(--eld-accent); }

.eld-card .eld-btn--outline:hover {
  background-color: var(--eld-accent);
  border-color: var(--eld-accent);
  color: var(--eld-on-accent);
}

.eld-card .added_to_cart { display: none; }

/* --- Pagination --------------------------------------------------------- */

.woocommerce-pagination {
  margin-top: var(--eld-space-7);
  padding-top: var(--eld-space-5);
  border-top: 1px solid var(--eld-border);
}

.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eld-space-2);
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.625rem;
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  color: var(--eld-ink-2);
  font-size: var(--eld-text-small);
  font-variant-numeric: tabular-nums;
}

.woocommerce-pagination a:hover { border-color: var(--eld-accent); color: var(--eld-accent); }

.woocommerce-pagination .current {
  background-color: var(--eld-accent);
  border-color: var(--eld-accent);
  color: var(--eld-on-accent);
  font-weight: 600;
}

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 699px) {
  .eld-filters__row { gap: var(--eld-space-2); }

  .eld-filter__list {
    position: static;
    min-width: 0;
    margin-top: var(--eld-space-2);
  }

  .eld-card__title { font-size: 0.9375rem; }
  .eld-card__amount { font-size: 1rem; }

  /*
   * Two cards to a row leaves ~170px of text column. "En stock — expédié sous
   * 24 h" breaks across three lines there and reads as broken. The dot plus
   * "En stock" carries the decision; the dispatch promise still appears in
   * full on the product page, where there is room for it.
   */
  .eld-card__price { gap: 0.25rem 0.5rem; }
  .eld-stock { flex-wrap: wrap; font-size: var(--eld-text-micro); }
  .eld-stock__dispatch { display: none; }
}