/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
*/

/* Note: The CSS files are loaded from assets/css/ folder. *//* =======================================

/* =======================================
   Custom product grid & single product styling
   Modern webshop-look
   Toegevoegd op: 16-10-2025
======================================= */

/* ========== BASIS STYLING PRODUCT ARCHIVE ========== */
/* ==========================================================
   PRODUCT ARCHIVE – CLEAN CSS (LATEST) – SAFE CLEANUP
   - Conflicten / dubbele blocks opgeschoond
   - Desktop GRID modus werkt nu ook (4 kolommen)
   - Desktop top-module (searchbar + resultsbar) weer “1 card”
========================================================== */


/* ==========================================================
   1) BASIS / LAYOUT WRAPPER
========================================================== */

.post-type-archive-product .site-content{
  padding-top: 10px !important;
}

.post-type-archive-product #primary.archive-products,
.post-type-archive-product .site-main.archive-products{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.archive-products{
  background: #fff;
  padding: 10px 0 40px;
}

/* Astra container breder + sidebar uit
   max-width bepaalt de contentbreedte op desktop; lager = meer zijwitruimte.
   Alle archief-blokken (searchbar, resultsbar, filters, layout) hangen hieronder
   en volgen deze breedte automatisch. */
.post-type-archive-product .site-content .ast-container{
  max-width: 1200px;
  padding-left: 0;
  padding-right: 0;
}

.post-type-archive-product #primary{
  width: 100%;
  max-width: 100%;
  float: none;
}

.post-type-archive-product #secondary{ display: none; }

/* Veilinghuis directory + single: zelfde breedte als archive-product */
.page-id-170849 .site-content .ast-container,
.single-veilinghuis .site-content .ast-container{
  max-width: 1400px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-id-170849 #primary,
.single-veilinghuis #primary{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-id-170849 #secondary,
.single-veilinghuis #secondary{ display: none !important; }

/* Nieuws (CPT): volle breedte zoals archive-product, iets smaller (1360px, sidebar uit) */
.post-type-archive-nieuws .site-content .ast-container,
.tax-nieuws_categorie .site-content .ast-container,
.single-nieuws .site-content .ast-container{
  max-width: 1360px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.post-type-archive-nieuws #primary,
.tax-nieuws_categorie #primary,
.single-nieuws #primary{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
.post-type-archive-nieuws #secondary,
.tax-nieuws_categorie #secondary,
.single-nieuws #secondary{ display: none !important; }

/* Mobiel burgermenu altijd bovenaan */
.ast-mobile-popup-drawer.active {
  z-index: 999999 !important;
}
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
  z-index: 999999 !important;
}

/* Override Astra's block-layout max-width on the shortcode wrapper */
.page-id-170849 .entry-content[data-ast-blocks-layout] > .eaah-wrap,
.single-veilinghuis .entry-content[data-ast-blocks-layout] > .eaah-wrap,
.single-veilinghuis .entry-content[data-ast-blocks-layout] > .eaah-single {
  max-width: 100% !important;
}

/* Overflow guard (voorkomt "uitschieten") */
.post-type-archive-product .site-content,
.post-type-archive-product .ast-container,
.post-type-archive-product #primary,
.post-type-archive-product .archive-products,
.post-type-archive-product .ea-hero,
.post-type-archive-product .ea-hero-inner,
.post-type-archive-product .ea-sticky-boundary,
.post-type-archive-product .ea-layout,
.post-type-archive-product .ea-main-column,
.post-type-archive-product .ea-products{
  min-width: 0;
}


/* ==========================================================
   2) HERO (DESKTOP) + HIDE MOBILE
========================================================== */

.post-type-archive-product .ea-hero{
  max-width: 1400px;
  margin: 0 auto 18px;
  padding: 0 16px;
}

.post-type-archive-product .ea-hero-inner{
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 14px 16px 12px;
}

/* Tabs row */
.post-type-archive-product .ea-hero-cats{
  display: flex;
  align-items: stretch;
  gap: 10px;
  justify-content: space-between;

  overflow: visible;
  white-space: normal;
  flex-wrap: wrap;

  padding: 2px 0 6px;
}

.post-type-archive-product .ea-hero-cat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  flex: 1 1 160px;
  min-height: 44px;
  padding: 11px 14px;
  line-height: 1.2;

  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #ffffff;
  text-decoration: none;

  color: #111827;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
}

.post-type-archive-product .ea-hero-cat:hover{ background: #f3f4f6; }

.post-type-archive-product .ea-hero-cat.is-active{
  background: #fff8e1;
  border-color: rgba(255,190,19,0.85);
  box-shadow: 0 0 0 2px rgba(255,190,19,0.18);
  color: #111827;
}

.post-type-archive-product .ea-hero-cat-ic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: 0 0 auto;
  align-self: center;
}

.post-type-archive-product .ea-hero-cat-ic svg{
  width: 20px;
  height: 20px;
  display: block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-type-archive-product .ea-hero-cat-txt{
  display: inline-block;
  line-height: 1.2;
  padding-bottom: 1px;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Desktop: 1 rij verdeeld */
@media (min-width: 851px){
  .post-type-archive-product .ea-hero-cats{ flex-wrap: nowrap; }
  .post-type-archive-product .ea-hero-cat{ flex: 1 1 0; }
}

/* Benefits row */
.post-type-archive-product .ea-hero-benefits{
  display: flex;
  align-items: stretch;
  gap: 10px;
  justify-content: space-between;

  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(17,24,39,0.05);
  flex-wrap: wrap;
}

.post-type-archive-product .ea-hero-benefit{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 1 1 220px;
  min-height: 36px;

  font-size: 0.86rem;
  color: #111827;

  background: #fafafa;
  border: 1px solid rgba(17,24,39,0.08);
  padding: 7px 10px;
  border-radius: 999px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 851px){
  .post-type-archive-product .ea-hero-benefits{ flex-wrap: nowrap; }
  .post-type-archive-product .ea-hero-benefit{ flex: 1 1 0; }
}

/* Mobile: hero verbergen */
@media (max-width: 850px){
  .post-type-archive-product .ea-hero{ display: none !important; }
}


/* ==========================================================
   3) SEARCHBAR (MOBILE + DESKTOP)
========================================================== */

/* ✅ was: display:none;  -> nu ook op desktop zichtbaar */
.post-type-archive-product .ea-mobile-searchbar{ display: block; }

@media (max-width: 850px){

  /* Searchbar container (wordt in menu-group gebruikt) */
  .post-type-archive-product .ea-mobile-searchbar{
    display: block;
    margin: 0 4px 0 !important;
    padding: 10px !important;

    background: #fff !important;
    border-left: 1px solid rgba(17,24,39,0.10) !important;
    border-right: 1px solid rgba(17,24,39,0.10) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    position: relative;
    z-index: 2;
  }

  .post-type-archive-product .ea-mobile-searchbar form{
    display: grid;
    grid-template-columns: 1fr 120px 44px;
    gap: 8px;
    align-items: center;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    backdrop-filter: none !important;
  }

  .post-type-archive-product .ea-mobile-searchbar input[type="text"]{
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 0.95rem;
    box-sizing: border-box;
    min-width: 0;
  }

  /* search knop */
  .post-type-archive-product .ea-mobile-searchbar .ea-btn-search{
    height: 44px;
    width: 44px;
    border-radius: 14px;
    border: none;
    background: #ffbe13;
    box-shadow: 0 2px 0 #d19b00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .post-type-archive-product .ea-mobile-searchbar .ea-btn-search svg{
    width: 22px;
    height: 22px;
    stroke: #111;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  /* sort knop in searchbar: altijd uit (zoals jouw state) */
  .post-type-archive-product .ea-mobile-searchbar .ea-btn-sort{
    display: none !important;
  }
}

/* Placeholder match */
@media (max-width: 850px){
  .post-type-archive-product .ea-mobile-searchbar input[type="text"]::placeholder{
    color: #9ca3af !important;
    opacity: 1 !important;
  }
}

/* Desktop: zelfde searchbar bovenin */
@media (min-width: 851px){

  .post-type-archive-product .ea-mobile-searchbar{
    max-width: 1400px;
    margin: 0 auto 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
    z-index: 3;
  }

  .post-type-archive-product .ea-mobile-searchbar form{
    display: grid;
    grid-template-columns: 1fr 180px 46px;
    gap: 10px;
    align-items: center;

    background: #fff !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }

  .post-type-archive-product .ea-mobile-searchbar input[type="text"]{
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 0.98rem;
    min-width: 0;
    box-sizing: border-box;
  }

  /* country trigger in searchbar (desktop) */
  .post-type-archive-product .ea-mobile-searchbar .ea-country-trigger{
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;

    padding: 0 12px;
    padding-right: 42px !important;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    cursor: pointer;
    min-width: 0;
    box-sizing: border-box;

    /* default placeholder look */
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    line-height: 1.2 !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
  }

  .post-type-archive-product .ea-mobile-searchbar .ea-country-trigger.is-selected{
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  .post-type-archive-product .ea-mobile-searchbar .ea-country-trigger__label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: left;
    font-weight: 400 !important;
  }

  .post-type-archive-product .ea-mobile-searchbar .ea-country-trigger__chev{ display: none !important; }

  .post-type-archive-product .ea-mobile-searchbar .ea-btn-search{
    height: 46px;
    width: 46px;
    border-radius: 14px;
    border: none;
    background: #ffbe13;
    box-shadow: 0 2px 0 #d19b00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .post-type-archive-product .ea-mobile-searchbar .ea-btn-search svg{
    width: 22px;
    height: 22px;
    stroke: #111;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  /* sort knop in searchbar ook op desktop uit */
  .post-type-archive-product .ea-mobile-searchbar .ea-btn-sort{
    display: none !important;
  }
}


/* ==========================================================
   3b) AI SEARCH TOGGLE (placeholder) — knop rechts in de searchbar
   - Desktop: extra grid-kolom voor de AI-knop
   - Actief: searchbar-outline krijgt de AI-kleur (violet/indigo) + gloed
   - Mobiel: voorlopig verborgen
========================================================== */
@media (min-width: 851px){

  /* Extra kolom voor de AI-knop — vierkant, net als de zoekknop (input | land | AI | zoeken) */
  .post-type-archive-product .ea-mobile-searchbar form{
    grid-template-columns: 1fr 180px auto 46px !important;
  }

  .post-type-archive-product .ea-mobile-searchbar .ea-ai-toggle{
    height: 46px;
    padding: 0 14px;              /* breder: icoon + "AI search" */
    border-radius: 14px;          /* zelfde radius als de zoekknop */
    border: 1px solid rgba(17,24,39,0.12);   /* neutrale rand (niet paars gevuld) */
    background: #fff;
    color: #111827;

    display: inline-flex;
    align-items: center;
    justify-content: center;      /* icoon + tekst gecentreerd in de knop */
    gap: 7px;

    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;

    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .post-type-archive-product .ea-mobile-searchbar .ea-ai-toggle:hover{
    background: #faf5ff;                      /* lichte paarse zweem bij hover */
    border-color: rgba(134,0,245,0.35);
  }

  /* alleen het sparkle-icoon duidelijk paars */
  .post-type-archive-product .ea-mobile-searchbar .ea-ai-toggle .ea-ai-toggle__ic{
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
    color: #8600F5;
  }
  .post-type-archive-product .ea-mobile-searchbar .ea-ai-toggle .ea-ai-toggle__ic svg{
    width: 16px;
    height: 16px;
    display: block;
  }

  /* ── Actieve AI-modus ───────────────────────────────── */
  /* De OUTLINE van het zoekveld zelf (de input) krijgt de AI-kleur + strakke ring */
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active input[type="text"]{
    border-color: #8600F5 !important;
    box-shadow: 0 0 0 3px rgba(134,0,245,0.22) !important;
    /* eenmalige ring-puls bij activeren */
    animation: ea-ai-outline-in 0.5s ease-out;
  }
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active .ea-ai-toggle{
    box-shadow: 0 0 0 3px rgba(134,0,245,0.30);
  }
  /* placeholder in AI-modus in AI-paars */
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active input[type="text"]::placeholder{
    color: #8600F5;
    opacity: 0.9;
  }
}

/* Mobiel: AI-knop voorlopig verbergen (feature is desktop-only) */
@media (max-width: 850px){
  .post-type-archive-product .ea-mobile-searchbar .ea-ai-toggle{ display: none !important; }
}

/* Eenmalige ring-puls van de AI-outline bij activeren:
   ring komt naar buiten en settelt op de vaste 3px-ring (= eindwaarde van de regel). */
@keyframes ea-ai-outline-in{
  0%   { box-shadow: 0 0 0 0   rgba(134,0,245,0); }
  45%  { box-shadow: 0 0 0 8px rgba(134,0,245,0.30); }
  100% { box-shadow: 0 0 0 3px rgba(134,0,245,0.22); }
}
/* Respecteer 'reduced motion' */
@media (prefers-reduced-motion: reduce){
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active input[type="text"]{ animation: none !important; }
}

/* ── AI-modus: landkeuze uit de snelzoekbalk → zoekveld wordt breder ───────── */
/* In AI-search bepaalt de prompt zelf de relevantie; land verfijn je via het
   filterpaneel. Daarom verbergen we de landknop hier en laat de 1fr-input de
   vrijgekomen kolom opvullen. */
@media (min-width: 851px){
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active .ea-country-trigger{ display: none !important; }
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active form{
    grid-template-columns: 1fr auto 46px !important;   /* input | AI-knop | zoeken */
  }
}
@media (max-width: 850px){
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active .ea-country-trigger{ display: none !important; }
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active form{
    grid-template-columns: 1fr 44px !important;        /* input | zoeken (AI-knop is mobiel verborgen) */
  }
}


/* ── AI-DISCLAIMER: info-knop rechts ín het promptveld + bericht eronder ──── */
/* De wrapper neemt de plek van de input in de searchbar-grid in; de knop hangt
   absoluut rechts ín het veld en is dus GEEN grid-item (grid blijft ongemoeid). */
.post-type-archive-product .ea-mobile-searchbar .ea-ai-input-wrap{
  position: relative;
  min-width: 0;
}
.post-type-archive-product .ea-mobile-searchbar .ea-ai-input-wrap input[type="text"]{
  width: 100%;
  display: block;
}
.post-type-archive-product .ea-mobile-searchbar .ea-ai-info{ display: none; }

.post-type-archive-product .ea-mobile-searchbar.ea-ai-active .ea-ai-input-wrap input[type="text"]{
  padding-right: 44px;
}
.post-type-archive-product .ea-mobile-searchbar.ea-ai-active .ea-ai-info{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8600F5;
  cursor: pointer;
  z-index: 2;
}
.post-type-archive-product .ea-mobile-searchbar.ea-ai-active .ea-ai-info:hover{
  background: rgba(134,0,245,0.12);
}
.post-type-archive-product .ea-mobile-searchbar .ea-ai-info svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Het bericht: klein paneel onder de zoekbalk, rechts uitgelijnd */
.post-type-archive-product .ea-mobile-searchbar .ea-ai-disclaimer{
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  max-width: 360px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(134,0,245,0.35);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17,24,39,0.16);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #374151;
  z-index: 60;
}
.post-type-archive-product .ea-mobile-searchbar .ea-ai-disclaimer[hidden]{ display: none !important; }

/* Bericht open → hele searchbar boven de resultsbar/chips tillen
   (blijft onder de search-focus overlay die 99991 gebruikt) */
.post-type-archive-product .ea-mobile-searchbar.ea-ai-note-open{
  position: relative;
  z-index: 99990;
}

@media (max-width: 850px){
  .post-type-archive-product .ea-mobile-searchbar .ea-ai-disclaimer{
    left: 10px;
    right: 10px;
    max-width: none;
  }
}


/* ==========================================================
   3c) AI-CHIP (mobiel) — knop in de chips-rij tussen Filters en categorieën
========================================================== */
/* Standaard verborgen; alleen op mobiel tonen (desktop gebruikt de searchbar-knop) */
.post-type-archive-product .ea-popular-cats .ea-ai-chip{ display: none !important; }

@media (max-width: 850px){
  .post-type-archive-product .ea-popular-cats .ea-ai-chip{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;       /* icoon + tekst gecentreerd in de chip */
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    line-height: 1 !important;     /* nette verticale centrering (overschrijft line-height:34px) */
    cursor: pointer;
    /* maat/vorm komt van .ea-cat-chip-tag; alleen kleuren + diepte overschrijven: */
    border: 1px solid rgba(134,0,245,0.55) !important;
    background: linear-gradient(135deg, #9A1FFF 0%, #6B00C9 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(134,0,245,0.30) !important;
    transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
  }
  .post-type-archive-product .ea-popular-cats .ea-ai-chip:hover{ filter: brightness(1.07); }
  .post-type-archive-product .ea-popular-cats .ea-ai-chip:active{ transform: translateY(1px); }
  .post-type-archive-product .ea-popular-cats .ea-ai-chip[aria-pressed="true"]{
    box-shadow: 0 0 0 3px rgba(134,0,245,0.30), 0 2px 8px rgba(134,0,245,0.30) !important;
  }

  /* sparkle-icoon */
  .post-type-archive-product .ea-popular-cats .ea-ai-chip .ea-ai-chip__ic{
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
    opacity: 1;
    color: #D8B4FE;   /* paars icoon (lichte violet zodat 't zichtbaar blijft op de paarse chip) */
  }
  .post-type-archive-product .ea-popular-cats .ea-ai-chip .ea-ai-chip__ic svg{
    width: 14px;
    height: 14px;
    display: block;
  }

  /* Actieve AI-modus op de MOBIELE searchbar: outline-kleur + eenmalige ring-puls */
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active input[type="text"]{
    border-color: #8600F5 !important;
    box-shadow: 0 0 0 3px rgba(134,0,245,0.22) !important;
    animation: ea-ai-outline-in 0.5s ease-out;
  }
  .post-type-archive-product .ea-mobile-searchbar.ea-ai-active input[type="text"]::placeholder{
    color: #8600F5;
    opacity: 0.9;
  }
}


/* ==========================================================
   4) POPULAR AUCTIONS + NEWS (REMOVED)
========================================================== */

.post-type-archive-product .ea-top-popular,
.post-type-archive-product .ea-top-popular-inner,
.post-type-archive-product .ea-popular-grid,
.post-type-archive-product .ea-popular-card,
.post-type-archive-product .ea-top-popular::after,
.post-type-archive-product .ea-sidebar-right,
.post-type-archive-product .ea-news-card,
.post-type-archive-product .ea-news-title,
.post-type-archive-product .ea-news-list,
.post-type-archive-product .ea-news-more{
  display: none !important;
}


/* ==========================================================
   5) FILTER PANEL (FORM)
========================================================== */

.ea-filter-shell{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 18px;
  position: relative;
  z-index: 2;
}

.ea-filters{
  background: #f7f7f7;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 0.95rem;
  margin: 0 auto 18px;
  position: relative;
  z-index: 2;
}

.ea-filters-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ea-filter-group{ margin-bottom: 6px; }

.ea-filter-group label{
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 0.86rem;
  color: #333;
}

/* Inputs/selects/category button hoogte */
.ea-filter-group input,
.ea-filter-group select,
.ea-cat-toggle{
  width: 100%;
  height: 42px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  background: #fff;
  box-sizing: border-box;
}

/* Range inputs */
.ea-filter-range-inputs{
  display: flex;
  align-items: center;
  gap: 6px;
}

.ea-filter-range-inputs input{
  flex: 1 1 0;
  min-width: 0;
}

/* Actions */
.ea-filter-actions{
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ea-btn-filter,
.ea-btn-reset{
  flex: 1;
  text-align: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.ea-btn-filter{
  background: #ffbe13;
  color: #111;
  font-weight: 700;
  box-shadow: 0 2px 0 #d19b00;
}

.ea-btn-filter:hover{ background: #f4b000; }

.ea-btn-reset{
  background: #eee;
  color: #333;
}

/* More filters toggle (mobiel) */
.ea-filters-toggle{
  display: none;
  margin-top: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}


/* ==========================================================
   6) CATEGORY BUTTON + MODAL (FULLSCREEN)
========================================================== */

.ea-filter-group--cat-combined{ position: relative; }

.ea-cat-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 400;
}

.ea-cat-toggle #ea-cat-current{ font-weight: 400; }
.ea-cat-arrow{ font-size: 0.85rem; margin-left: 6px; }

/* Category button: non-bold + consistent chevron */
.post-type-archive-product .ea-filters .ea-filter-group--cat-combined .ea-cat-toggle{
  font-weight: 400 !important;
  color: #333;
  text-align: left;

  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.post-type-archive-product .ea-filters .ea-filter-group--cat-combined .ea-cat-toggle #ea-cat-current{
  font-weight: 400 !important;
}

.post-type-archive-product .ea-filters .ea-filter-group--cat-combined .ea-cat-arrow{
  display: none !important;
}

/* Modal container */
.ea-cat-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: stretch;
  justify-content: stretch;
}
.ea-cat-modal--open{ display: flex; }

.ea-cat-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.ea-cat-modal-content{
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
}

.ea-cat-modal-open{ overflow: hidden; }

.ea-cat-modal-header{
  padding: 14px 18px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.ea-cat-modal-header h3{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.ea-cat-modal-close{
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
}

.ea-cat-modal-body{
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Topbar */
.ea-cat-topbar{
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-direction: column;
  align-items: stretch;
}

.ea-cat-search input{
  width: 100%;
  height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 1rem;
}

.ea-cat-recent{
  width: 100%;
  margin-top: 10px;
}

.ea-cat-recent-title{
  font-size: 0.82rem;
  font-weight: 700;
  color: #111827;
  margin: 4px 0 8px;
}

.ea-cat-recent-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ea-cat-chip{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 7px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
}
.ea-cat-chip:hover{ background: #f3f4f6; }

.ea-cat-grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items: start;
}

.ea-cat-col{
  background: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 16px;
  padding: 10px;
}

.ea-cat-item{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border: 1px solid #f1f1f1;
  background: #ffffff;
  border-radius: 14px;
  cursor: pointer;
  font-size: 1rem;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ea-cat-item:last-child{ margin-bottom: 0; }

.ea-cat-item-name{ font-weight: 600; }

.ea-cat-item-count{
  min-width: 44px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #111827;
  background: #eef2ff;
  border: 1px solid #e5e7eb;
}

.ea-cat-parent.is-active{
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17,24,39,0.04);
}
.ea-cat-parent.is-active .ea-cat-item-name{ color: #d97706; }

.ea-cat-children-title,
.ea-cat-results-title,
.ea-cat-mobile-results-title{
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 4px 4px 10px;
  font-weight: 800;
}

.ea-cat-placeholder{
  padding: 14px;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
  color: #6b7280;
  font-size: 0.95rem;
  background: #fafafa;
  margin-bottom: 10px;
}

.ea-cat-results,
.ea-cat-mobile-results,
.ea-cat-mobile-children{
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #f1f1f1;
  border-radius: 16px;
  background: #ffffff;
}

.ea-cat-mobile-results{ margin: 12px 0 0; }
.ea-cat-mobile-children{ margin: 10px 0 12px; }
.ea-cat-mobile-children-title{ display: none; }

.ea-cat-empty{
  padding: 10px 12px;
  color: #6b7280;
  font-size: 0.95rem;
  background: #fafafa;
  border-radius: 12px;
}

/* Footer blijft voor spacing maar buttons verdwijnen */
.ea-cat-modal-footer{
  padding: 10px 16px 12px;
  border-top: 1px solid #f1f1f1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.ea-cat-modal-footer .ea-cat-clear,
.ea-cat-modal-footer .ea-cat-close-secondary{
  display: none !important;
}


/* ==========================================================
   7) GRID LAYOUT + PRODUCT CARDS (LIST DEFAULT)
========================================================== */

.ea-layout{
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1.35fr);
  column-gap: 32px;
  align-items: flex-start;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.ea-main-column{ width: 100%; min-width: 0; }
.ea-sidebar-right{ width: 100%; }

.product-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  min-width: 0;
}

.product-card{
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 16px 22px;
  transition: none;
  overflow: hidden;
}

.product-card:hover{
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-link{
  display: grid;
  grid-template-columns: 210px minmax(0,1fr) 130px;
  gap: 20px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* Image + flag */
.card-image{
  position: relative;
  min-width: 0;
  align-self: stretch;
}

.card-image img{
  width: 100%;
  height: 145px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.flag-overlay{
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 6px;
  padding: 2px 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.flag-overlay img{
  width: 26px;
  height: 18px;
  border-radius: 2px;
  display: block;
  object-fit: cover;
}

/* Content */
.card-content{
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: flex-start;
  height: 100%;
}

.card-title{
  font-size: 1.02rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.card-meta{
  font-size: 0.88rem;
  color: #4b5563;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-top: 6px;
}

.card-meta .value{ font-weight: 500; }

/* Status badges */
.badge-countdown,
.badge-expired{
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

body.single-product .badge-expired{
  padding: 5px 24px !important;
}

.badge-active{
  background: #e8f0ff;
  color: #003399;
}

.badge-expired{
  background: #f3f4f6;
  color: #6b7280;
}

.card-badge{
  margin-top: auto;
  padding-top: 10px;
}

/* Actions right */
.card-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  height: 100%;
  justify-content: space-between;
}

.card-price{
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  padding-top: 2px;
}

.view-button{
  background: #ffbe13;
  color: #111;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 0 #d19b00;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.view-button:hover{ background: #f4b000; }


/* ==========================================================
   8) WATCHLIST HART – list vs grid + active rood
========================================================== */

.post-type-archive-product .ea-watch-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease;
}

.post-type-archive-product .ea-watch-btn:active{ transform: scale(0.98); }

.post-type-archive-product .ea-watch-btn svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: #111827;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-type-archive-product .ea-watch-btn svg path{
  fill: none;
  stroke: currentColor;
}

.post-type-archive-product .ea-watch-btn:hover{ background: #f9fafb; }

/* ACTIVE = rood hart */
.post-type-archive-product .ea-watch-btn.is-active{
  background: #fff !important;
  border-color: rgba(17,24,39,0.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  color: #e11d48 !important;
}
.post-type-archive-product .ea-watch-btn.is-active svg{ stroke: #e11d48 !important; }
.post-type-archive-product .ea-watch-btn.is-active svg path{
  fill: rgba(225,29,72,0.20) !important;
  stroke: #e11d48 !important;
}

/* List: knop links van View auction */
.post-type-archive-product .card-actions-row{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
.post-type-archive-product .ea-watch-btn--inline{ flex: 0 0 auto; }

/* Grid: overlay rechtsboven op afbeelding */
.post-type-archive-product .ea-watch-btn--overlay{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

/* overlay NOOIT in list */
body.post-type-archive-product:not(.ea-view-grid) .ea-watch-btn--overlay{ display: none !important; }
/* inline NOOIT in grid */
body.post-type-archive-product.ea-view-grid .ea-watch-btn--inline{ display: none !important; }
/* overlay ankeren */
body.post-type-archive-product.ea-view-grid .card-image{ position: relative !important; }

/* grid overlay compacter */
body.post-type-archive-product.ea-view-grid .ea-watch-btn--overlay{
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(17,24,39,0.10) !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.92) !important;
}
body.post-type-archive-product.ea-view-grid .ea-watch-btn--overlay svg{
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 850px){
  body.post-type-archive-product.ea-view-grid .ea-watch-btn--overlay{
    width: 30px !important;
    height: 30px !important;
  }
  body.post-type-archive-product.ea-view-grid .ea-watch-btn--overlay svg{
    width: 15px !important;
    height: 15px !important;
  }
}


/* ==========================================================
   9) GRID VIEW (MOBILE) – jouw bestaande (blijft)
========================================================== */

@media (max-width: 850px){

  body.post-type-archive-product.ea-view-grid .product-list{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.post-type-archive-product.ea-view-grid .product-card{
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.post-type-archive-product.ea-view-grid .card-link{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-image img{
    height: 128px !important;
    border-radius: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-content{
    padding: 10px 10px 8px !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.post-type-archive-product.ea-view-grid .card-title{
    font-size: 0.85rem !important;
    line-height: 1.15rem !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: calc(1.15rem * 2) !important;
  }

  body.post-type-archive-product.ea-view-grid .card-meta{
    font-size: 0.72rem !important;
    margin-top: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-badge{
    margin-top: auto !important;
    padding-top: 8px !important;
    margin-bottom: 10px !important;
  }

  body.post-type-archive-product.ea-view-grid .card-actions{
    padding: 0 10px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  body.post-type-archive-product.ea-view-grid .card-price{
    white-space: nowrap !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .view-button{
    padding: 6px 9px !important;
    font-size: 0.64rem !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-actions-row{
    margin-top: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .product-card{ padding-bottom: 0 !important; }
  body.post-type-archive-product.ea-view-grid .product-card .card-actions{
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }
}


/* ==========================================================
   9B) GRID VIEW (DESKTOP) – ✅ 4 KOLOMMEN
========================================================== */

@media (min-width: 851px){

  body.post-type-archive-product.ea-view-grid .product-list{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* ✅ 4 kolommen */
    gap: 16px !important;
    align-items: stretch !important;
  }

  body.post-type-archive-product.ea-view-grid .product-card{
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.post-type-archive-product.ea-view-grid .card-link{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-image img{
    height: 170px !important;
    border-radius: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-content{
    padding: 12px 12px 10px !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.post-type-archive-product.ea-view-grid .card-title{
    font-size: 0.92rem !important;
    line-height: 1.22rem !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: calc(1.22rem * 2) !important;
  }

  body.post-type-archive-product.ea-view-grid .card-meta{
    font-size: 0.78rem !important;
    margin-top: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-badge{
    margin-top: auto !important;
    padding-top: 10px !important;
    margin-bottom: 10px !important;
  }

  body.post-type-archive-product.ea-view-grid .card-actions{
    padding: 0 12px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
  }

  body.post-type-archive-product.ea-view-grid .card-price{
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .view-button{
    padding: 7px 10px !important;
    font-size: 0.70rem !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  body.post-type-archive-product.ea-view-grid .card-actions-row{
    margin-top: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }
}

/* iets minder kolommen op kleinere desktop */
@media (min-width: 851px) and (max-width: 1180px){
  body.post-type-archive-product.ea-view-grid .product-list{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 851px) and (max-width: 980px){
  body.post-type-archive-product.ea-view-grid .product-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ==========================================================
   10) RESULTS BAR (MOBILE + DESKTOP) + SORT DROPDOWN
========================================================== */

.ea-resultsbar{ display: none; }
.ea-resultsbar__right{ position: relative; }

@media (max-width: 850px){

  .post-type-archive-product .ea-resultsbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    margin: 0 4px 10px !important;
    padding: 10px !important;

    background: #fff !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    border-top: 1px solid rgba(17,24,39,0.10) !important;
    border-radius: 0 0 18px 18px !important;

    box-shadow: none !important;
    position: relative;
    z-index: 10000 !important;
    isolation: isolate;
    font-size: 0.88rem;
    color: #111827;
  }

  .post-type-archive-product .ea-resultsbar__left{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;   /* save krimpt niet → geen overlap met list/grid */
  }

  .post-type-archive-product .ea-save-search{
    border: 1px solid rgba(17,24,39,0.10);
    background: #fff;
    border-radius: 999px;
    height: 36px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    cursor: pointer;
    color: #111827;
    font-weight: 800;
    font-size: 0.76rem;

    box-shadow: none;
    outline: none;
  }

  .post-type-archive-product .ea-save-search .ea-ic{
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    opacity: 0.85;
  }

  .post-type-archive-product .ea-save-search .ea-ic svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  .post-type-archive-product .ea-save-search.is-saved{
    background: #f3f4f6;
    border-color: rgba(17,24,39,0.14);
  }

  /* MID (List/Grid) */
  .post-type-archive-product .ea-resultsbar__mid.ea-resultsbar__mid--left{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;   /* list/grid krimpt niet → geen overlap met save */
    margin: 0;        /* geen auto-centrering → space-between geeft gelijke tussenruimte */
  }

  .post-type-archive-product .ea-viewbtn{
    border: 1px solid rgba(17,24,39,0.10);
    background: transparent;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 0 10px;
    height: 36px;
    border-radius: 999px;

    font-weight: 800;
    font-size: 0.76rem;
    color: rgba(17,24,39,0.78);
    line-height: 1;
    white-space: nowrap;

    box-shadow: none;
    outline: none;
  }

  .post-type-archive-product .ea-viewbtn .ea-ic{
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    opacity: 0.9;
  }

  .post-type-archive-product .ea-viewbtn .ea-ic svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  .post-type-archive-product .ea-viewbtn.is-active{
    background: #f3f4f6;
    border-color: rgba(17,24,39,0.14);
    color: #111827;
  }

  /* RIGHT (Sort) */
  .post-type-archive-product .ea-resultsbar__right{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0;
    position: relative !important;
    z-index: 10001 !important;
  }

  .post-type-archive-product .ea-resultsbar__sort{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    height: 36px !important;
    padding: 0 10px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    background: #fff !important;

    cursor: pointer !important;
    white-space: nowrap !important;

    font-weight: 800 !important;
    font-size: 0.78rem !important;
    color: #111827 !important;

    box-shadow: none !important;
    outline: none !important;

    /* OPTIE A: knop mag krimpen binnen z'n flex-vak (__right) zodat het label
       afkapt i.p.v. over list/grid te lopen; de gap blijft zo behouden. */
    min-width: 0 !important;
  }

  .post-type-archive-product .ea-resultsbar__sort .ea-ic{
    flex: 0 0 auto;   /* icoon blijft staan terwijl het label krimpt */
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    opacity: 0.85;
  }

  .post-type-archive-product .ea-resultsbar__sort .ea-ic svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  .post-type-archive-product .ea-resultsbar__sort .ea-sort-label{
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    color: rgba(17,24,39,0.84) !important;
    max-width: 140px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* focus/outline hard off */
  .post-type-archive-product .ea-resultsbar__sort,
  .post-type-archive-product .ea-resultsbar__sort:focus,
  .post-type-archive-product .ea-resultsbar__sort:focus-visible,
  .post-type-archive-product .ea-resultsbar__sort:active{
    outline: none !important;
    box-shadow: none !important;
  }
  .post-type-archive-product .ea-resultsbar__sort::-moz-focus-inner{ border: 0 !important; }
  .post-type-archive-product .ea-resultsbar__sort::after{ display: none !important; content: none !important; }
  .post-type-archive-product .ea-resultsbar__sort{ background-image: none !important; }
  .post-type-archive-product .ea-resultsbar__sort .ea-sort-label::after{ display: none !important; content: none !important; }

  /* micro: borders iets lichter */
  .post-type-archive-product .ea-save-search,
  .post-type-archive-product .ea-viewbtn,
  .post-type-archive-product .ea-resultsbar__sort{
    border-color: rgba(17,24,39,0.09) !important;
  }
}

/* Sort dropdown */
.ea-sortmenu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(260px, 86vw);

  background: #fff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  padding: 8px;
  z-index: 10002;
  display: none;
}
.ea-sortmenu.is-open{ display: block; }

.ea-sortmenu__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #111827;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.1;
}
.ea-sortmenu__item:hover{ background: #f3f4f6; }
.ea-sortmenu__item.is-active{
  background: #fff8e1;
  border: 1px solid rgba(255,190,19,0.55);
}


/* ==========================================================
   11) POPULAR CATEGORY CHIPS (SCROLLER) + BADGE
========================================================== */

.ea-popular-cats-wrap{
  position: relative;
  z-index: 5;
}
.ea-popular-cats-wrap .ea-popular-cats{ pointer-events: auto; }

.ea-popular-cats{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  flex-wrap: nowrap !important;

  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  min-width: 0;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  padding-bottom: 2px;
}
.ea-popular-cats::-webkit-scrollbar{ display: none; }
.ea-popular-cats__label{ display: none !important; }

.ea-cat-chip-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.10);
  background: #ffffff;
  color: #111827;
  text-decoration: none;

  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;

  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  white-space: nowrap;

  flex: 0 0 auto;
  position: relative;
  z-index: 6;
  pointer-events: auto;
}
.ea-cat-chip-tag:hover{ background: #f3f4f6; }

.ea-cat-chip-tag__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef2ff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.ea-cat-chip-tag.is-active{
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17,24,39,0.05);
}

.ea-cat-chip-tag--clear{
  background: #eee;
  border-color: #e5e7eb;
  font-weight: 700;
}

/* Filters chip */
.post-type-archive-product .ea-cat-chip-tag--filters{
  background: #ffffff;
  border-color: rgba(17,24,39,0.15);
  font-weight: 800;
  position: relative;
}

.post-type-archive-product .ea-cat-chip-tag--filters .ea-chip-ic{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.post-type-archive-product .ea-cat-chip-tag--filters .ea-chip-ic svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Badge */
.post-type-archive-product .ea-cat-chip-tag--filters .ea-chip-count{
  position: absolute;
  top: -6px;
  right: -6px;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;

  border-radius: 999px !important;
  box-sizing: border-box !important;

  background: #2563eb;
  color: #fff;

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

  line-height: 1 !important;
  text-align: center !important;

  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  pointer-events: none;
}

.post-type-archive-product .ea-cat-chip-tag--filters .ea-chip-count__num{
  display: block !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

@media (max-width: 850px){
  .post-type-archive-product .ea-cat-chip-tag--filters .ea-chip-count{
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    top: -5px;
    right: -5px;
  }
  .post-type-archive-product .ea-cat-chip-tag--filters .ea-chip-count__num{ font-size: 11px !important; }
}


/* ==========================================================
   12) CHIPS VISIBILITY (TOP VS CONTENT) + MENU-GROUP (MOBILE)
========================================================== */

.ea-popular-cats-wrap--top,
.ea-popular-cats-wrap--content{
  display: block;
}

@media (min-width: 851px){
  .ea-popular-cats-wrap--top{ display: none !important; }
  .ea-popular-cats-wrap--content{ display: block !important; }

  body.post-type-archive-product .ea-popular-cats .ea-chip-filters{ display: none !important; }
  body.post-type-archive-product .ea-popular-cats .ea-chip-all{ display: inline-flex !important; }
}

@media (max-width: 850px){

  /* CHIPS = TOP van menu-group */
  .post-type-archive-product .ea-popular-cats-wrap--top{
    margin: 0 4px 0 !important;
    padding: 10px 10px 6px !important;

    background: #fff !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    border-bottom: 0 !important;

    border-radius: 18px 18px 0 0 !important;
    box-shadow: none !important;

    position: relative;
    z-index: 3;
    overflow: visible !important;
  }

  .post-type-archive-product .ea-popular-cats-wrap--top .ea-popular-cats{
    margin: 0 !important;
    padding-top: 8px !important;
    margin-top: -8px !important;
    padding-bottom: 2px !important;
    overflow-y: visible !important;
  }

  .ea-popular-cats-wrap--content{ display: none !important; }

  body.post-type-archive-product .ea-popular-cats .ea-chip-filters{ display: inline-flex !important; }
  body.post-type-archive-product .ea-popular-cats .ea-chip-all{ display: none !important; }

  /* Chips minimal in menu-group */
  .post-type-archive-product .ea-popular-cats .ea-cat-chip-tag{
    box-shadow: none !important;
    background: #f9fafb !important;
    border-color: rgba(17,24,39,0.10) !important;

    font-weight: 700 !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;

    color: rgba(17,24,39,0.86) !important;
  }

  .post-type-archive-product .ea-popular-cats .ea-cat-chip-tag:hover{
    background: #f3f4f6 !important;
  }

  .post-type-archive-product .ea-popular-cats .ea-cat-chip-tag.is-active{
    background: #fff8e1 !important;
    border-color: rgba(255,190,19,0.55) !important;
    box-shadow: none !important;
    color: #111827 !important;
  }

  .post-type-archive-product .ea-cat-chip-tag__count{
    background: #f3f4f6 !important;
    border-color: rgba(17,24,39,0.08) !important;
    color: rgba(17,24,39,0.90) !important;
  }

  /* fade rechts */
  .post-type-archive-product .ea-popular-cats-wrap--top::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, #fff 35%, rgba(255,255,255,0));
    border-radius: 0 18px 0 0;
  }

  /* Chips compacter */
  .ea-cat-chip-tag{ font-size: 0.78rem; }
  .ea-cat-chip-tag__count{
    font-size: 0.72rem;
    padding: 2px 7px;
  }
}


/* ==========================================================
   13) CONSISTENT CHIP HEIGHT (ALL DEVICES)
========================================================== */

.post-type-archive-product .ea-popular-cats .ea-cat-chip-tag{
  height: 34px;
  padding: 0 12px !important;
  display: inline-flex;
  align-items: center;
  line-height: 34px;
}

.post-type-archive-product .ea-popular-cats .ea-cat-chip-tag__count{
  height: 22px;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 850px){
  .post-type-archive-product .ea-popular-cats .ea-cat-chip-tag{
    height: 32px;
    line-height: 32px;
    padding: 0 10px !important;
  }
}


/* ==========================================================
   14) DESKTOP: STICKY FILTERS LINKS + CONTENT RECHTS
========================================================== */

@media (min-width: 851px){

  .post-type-archive-product .archive-products::after{
    content: "";
    display: block;
    clear: both;
  }

  .post-type-archive-product .ea-filter-shell{
    float: left;
    width: 340px;
    max-width: none;
    margin: 0;
    padding: 0 0 18px 16px;

    /* hele linkerkolom scrollt gewoon mee: niets sticky, zodat de nieuwskaarten
       eronder volledig in beeld scrollen i.p.v. achter het filter te verdwijnen */
    position: static;

    overflow: visible;
  }

  .post-type-archive-product .ea-filters{ margin: 0; }

  /* Select arrows desktop */
  .post-type-archive-product .ea-filters .ea-filter-group select{
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
  }

  .post-type-archive-product .ea-filters-advanced{ display: block !important; }
  .post-type-archive-product .ea-filters-toggle{ display: none !important; }

  .post-type-archive-product .ea-filter-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .post-type-archive-product .ea-btn-filter,
  .post-type-archive-product .ea-btn-reset{
    width: 100% !important;
    max-width: none !important;
  }

  /* Content rechts */
  .post-type-archive-product .ea-layout{
    display: block !important;
    margin-left: calc(340px + 14px);
    max-width: none !important;
    padding: 0 16px 0 0 !important;
  }
}


/* ==========================================================
   15) MOBILE: STACKED LAYOUT + FILTER TOGGLE
========================================================== */

@media (max-width: 850px){

  .ea-filter-shell{ padding: 0 4px 12px; }

  .ea-layout{
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding: 0 4px;
    min-width: 0;
  }

  .ea-filters{
    margin-top: 0;
    margin-bottom: 12px;
    padding: 10px;
  }

  .product-card{
    padding: 10px 8px;
    max-width: 100%;
  }

  .product-list{ gap: 6px; }

  .card-link{
    grid-template-columns: 90px minmax(0,1fr) 70px;
    gap: 8px;
  }

  .card-image img{
    height: 90px;
    border-radius: 8px;
  }

  .flag-overlay{
    bottom: 5px;
    left: 5px;
    border-radius: 5px;
    padding: 2px 4px;
  }

  .flag-overlay img{
    width: 20px;
    height: 14px;
  }

  .card-title{
    font-size: 0.82rem;
    line-height: 1.1rem;
  }

  .card-meta{
    font-size: 0.7rem;
    gap: 4px;
    line-height: 1rem;
    margin-top: 5px;
  }

  .card-badge{ padding-top: 8px; }

  .card-price{
    font-size: 0.78rem;
    padding-top: 1px;
  }

  .view-button{
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
  }

  .badge-countdown,
  .badge-expired{
    font-size: 0.58rem;
    padding: 3px 6px;
  }

  .ea-filters-toggle{ display: block; }
  .ea-filters-advanced{ display: none; }

  .ea-filters.ea-filters--open .ea-filters-advanced{
    display: block;
    margin-top: 10px;
  }

  .ea-filters-basic{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "search sort"
      "cat country";
    gap: 8px;
  }

  .ea-filter-group--search  { grid-area: search; }
  .ea-filter-group--sort    { grid-area: sort; }
  .ea-filter-group--cat1    { grid-area: cat; }
  .ea-filter-group--country { grid-area: country; }

  /* Country in panel zichtbaar blijven */
  .post-type-archive-product .ea-filter-group--country--panel{
    display: block !important;
  }

  /* mobiel: heart knop matchen met view button hoogte */
  .post-type-archive-product .card-actions-row{
    margin-top: 8px;
    gap: 8px;
  }
  .post-type-archive-product .ea-watch-btn{
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .post-type-archive-product .ea-watch-btn svg{
    width: 18px;
    height: 18px;
  }
}


/* ==========================================================
   16) MOBILE: FILTERPANEL OPEN VIA BODY CLASS
========================================================== */

@media (max-width: 850px){
  body.post-type-archive-product .ea-filter-shell{ display: none !important; }
  body.post-type-archive-product.ea-filters-panel-open .ea-filter-shell{ display: block !important; }
}


/* ==========================================================
   17) iOS SAFARI FIXES
========================================================== */

@supports (-webkit-touch-callout: none){

  .post-type-archive-product .ea-filter-group select{
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
  }

  .post-type-archive-product .ea-filter-group input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
  }

  .post-type-archive-product .ea-filter-range-inputs span{
    height: 42px;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==========================================================
   18) CLICK / POINTER FIXES
========================================================== */

.post-type-archive-product .ea-popular-cats-wrap,
.post-type-archive-product .ea-popular-cats,
.post-type-archive-product .ea-cat-chip-tag{
  pointer-events: auto !important;
}

.post-type-archive-product .ea-sticky-boundary::before,
.post-type-archive-product .ea-sticky-boundary::after{
  pointer-events: none !important;
}


/* ==========================================================
   19) OVERRIDES (bewust laten staan)
   - chip counts blauw
   - active = zwarte contour
   - hide Popular auctions chip
========================================================== */

.post-type-archive-product .ea-cat-chip-tag__count{
  background: #eef2ff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

.post-type-archive-product .ea-cat-chip-tag.is-active{
  background: #ffffff !important;
  border-color: #111827 !important;
  box-shadow: 0 0 0 2px rgba(17,24,39,0.05) !important;
  color: #111827 !important;
}

.post-type-archive-product .ea-cat-chip-tag.is-active:hover{
  background: #ffffff !important;
}

/* Popular auctions chip verbergen */
.post-type-archive-product .ea-popular-cats a.ea-cat-chip-tag[href*="sort=popular_clicks"]{
  display: none !important;
}


/* ==========================================================
   20) FLAGS – safety (stretchen voorkomen)
========================================================== */

.post-type-archive-product .flag-overlay img{
  height: auto;
  max-height: 18px;
  width: auto;
}

/* List view vlaggen renderen zoals grid */
.post-type-archive-product .product-list .flag-overlay img{
  height: 18px !important;
  width: auto !important;
  max-width: 26px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 850px){
  .post-type-archive-product .product-list .flag-overlay img{
    height: 14px !important;
    width: auto !important;
    max-width: 20px !important;
    object-fit: contain !important;
  }

  body.post-type-archive-product.ea-view-grid .flag-overlay{
    align-items: center !important;
    justify-content: center !important;
  }

  body.post-type-archive-product.ea-view-grid .flag-overlay img{
    height: 14px !important;
    width: auto !important;
    max-width: 20px !important;
    object-fit: cover !important;
    display: block !important;
  }
}


/* ==========================================================
   21) FIX: List heart button exact dezelfde hoogte als View auction
========================================================== */

@media (max-width: 850px){
  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row{
    align-items: center !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row .ea-watch-btn--inline{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row .ea-watch-btn--inline svg{
    width: 18px !important;
    height: 18px !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row .view-button{
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
}

@media (min-width: 851px){
  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row{
    align-items: center !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row .ea-watch-btn--inline{
    width: 44px !important;
    height: 44px !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row .view-button{
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
}


/* ==========================================================
   22) COUNTRY PICKER – SEARCHABLE MODAL
   - Mobile: fullscreen
   - Desktop: centered popup
========================================================== */

.post-type-archive-product .ea-country-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}
.post-type-archive-product .ea-country-modal.is-open{ display: block; }

.post-type-archive-product .ea-country-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* Mobile trigger */
@media (max-width: 850px){
  .post-type-archive-product .ea-country-trigger{
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;

    padding: 0 10px 0 12px;
    padding-right: 42px !important;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    cursor: pointer;
    min-width: 0;
    box-sizing: border-box;

    font-size: 0.95rem;
    outline: none;
    box-shadow: none;

    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    font-family: inherit !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
  }

  .post-type-archive-product .ea-country-trigger.is-selected{
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  .post-type-archive-product .ea-country-trigger__label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: left;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
  }

  .post-type-archive-product .ea-country-trigger__chev{ display: none !important; }

  .post-type-archive-product .ea-country-modal__panel{
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .post-type-archive-product .ea-country-modal__header{
    padding: 14px 16px;
    border-bottom: 1px solid rgba(17,24,39,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .post-type-archive-product .ea-country-modal__title{
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
  }

  .post-type-archive-product .ea-country-modal__close{
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
  }

  .post-type-archive-product .ea-country-modal__search{
    padding: 12px 16px;
    border-bottom: 1px solid rgba(17,24,39,0.06);
  }

  .post-type-archive-product .ea-country-modal__search input{
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .post-type-archive-product .ea-country-modal__list{
    padding: 12px 16px 20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .post-type-archive-product .ea-country-item{
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(17,24,39,0.08);
    background: #fff;
    font-size: 1rem;
    font-weight: 650;
    color: #111827;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .post-type-archive-product .ea-country-item:hover{ background: #f3f4f6; }
}

/* Desktop modal card */
@media (min-width: 851px){

  .post-type-archive-product .ea-country-modal__panel{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(720px, calc(100vw - 64px)) !important;
    max-height: min(78vh, 720px) !important;

    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,0.22) !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .post-type-archive-product .ea-country-modal__header{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;

    padding: 16px 18px !important;
    border-bottom: 1px solid rgba(17,24,39,0.08) !important;
  }

  .post-type-archive-product .ea-country-modal__title{
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 !important;
  }

  .post-type-archive-product .ea-country-modal__close{
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;

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

    font-size: 22px !important;
    line-height: 1 !important;
    color: #111827 !important;
    padding: 0 !important;
  }
  .post-type-archive-product .ea-country-modal__close:hover{
    background: #f3f4f6 !important;
  }

  .post-type-archive-product .ea-country-modal__search{
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(17,24,39,0.06) !important;
  }

  .post-type-archive-product .ea-country-modal__search input{
    width: 100% !important;
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(17,24,39,0.12) !important;
    background: #fff !important;
    padding: 10px 12px !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    outline: none !important;
  }

  .post-type-archive-product .ea-country-modal__list{
    padding: 14px 18px 18px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .post-type-archive-product .ea-country-item{
    width: 100% !important;
    text-align: left !important;

    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    background: #fff !important;

    font-size: 0.95rem !important;
    font-weight: 650 !important;
    color: #111827 !important;

    cursor: pointer !important;
    margin: 0 !important;
  }

  .post-type-archive-product .ea-country-item:hover{
    background: #f3f4f6 !important;
  }

  @media (max-width: 1100px){
    .post-type-archive-product .ea-country-modal__list{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 900px){
    .post-type-archive-product .ea-country-modal__list{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

/* body scroll lock */
body.ea-modal-open{ overflow: hidden !important; }

/* Category modal altijd boven sticky UI */
.ea-category-modal,
.ea-cat-modal,
#ea-category-modal,
#ea-cat-modal,
#ea-cat-modal-overlay,
#ea-cat-modal-panel{
  z-index: 99999 !important;
}
body.ea-catmodal-open .ea-resultsbar{ display: none !important; }
body.ea-catmodal-open .ea-menu-group .ea-resultsbar{ display: none !important; }


/* ==========================================================
   23) CONSISTENT CHEVRON (country + category + sort select)
========================================================== */

.post-type-archive-product .ea-filter-group--sort select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}

.post-type-archive-product .ea-filters .ea-filter-group--cat-combined .ea-cat-toggle{
  padding-right: 42px !important;
}


/* ==========================================================
   24) PAGINATION – 1 CONSISTENTE STRATEGIE (NO JUMP + SMALLER)
========================================================== */

.archive-pagination{
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.archive-pagination .nav-links{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* Basis */
.archive-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;
  text-decoration: none;
  color: #333;
  border: none;
  background: transparent;

  min-width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 10px;
  box-sizing: border-box;

  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.archive-pagination .page-numbers.current{
  font-weight: 700;
  color: #111;
  background: #ffbe13;
  border-radius: 10px;
}

.archive-pagination .page-numbers:hover:not(.current){
  text-decoration: underline;
}

.archive-pagination .page-numbers.dots{ min-width: 34px; }

/* Previous/Next: stabiele breedte */
.archive-pagination .page-numbers.prev,
.archive-pagination .page-numbers.next{
  min-width: 92px;
}

/* Mobile: iets compacter */
@media (max-width: 420px){
  .archive-pagination .nav-links{
    gap: 6px !important;
    font-size: 0.82rem !important;
  }

  .archive-pagination .page-numbers{
    min-width: 30px;
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
  }

  .archive-pagination .page-numbers.prev,
  .archive-pagination .page-numbers.next{
    min-width: 78px;
  }
}

/* ✅ Als het te breed is: swipe i.p.v. cutoff/verspringen */
@media (max-width: 520px){
  .archive-pagination{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px;
  }
  .archive-pagination .nav-links{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: max-content;
    margin: 0 auto;
  }
  .archive-pagination::-webkit-scrollbar{ display: none; }
  .archive-pagination{ scrollbar-width: none; }
}

/* Ultra-smal: prev/next als arrows */
@media (max-width: 390px){
  .archive-pagination .prev,
  .archive-pagination .next{
    font-size: 0 !important;
    padding: 4px 8px !important;
    min-width: 28px !important;
    position: relative;
  }
  .archive-pagination .prev::before{
    content: "←";
    font-size: 16px;
    line-height: 1;
  }
  .archive-pagination .next::before{
    content: "→";
    font-size: 16px;
    line-height: 1;
  }
}


/* ==========================================================
   25) iPhone-smalle schermen → sort knop niet over list/grid
========================================================== */

@media (max-width: 390px){

  .post-type-archive-product .ea-resultsbar{ gap: 8px !important; }

  .post-type-archive-product .ea-resultsbar__mid{
    min-width: 0 !important;   /* geen flex-grow/auto-centrering → gelijke tussenruimte via space-between */
  }

  .post-type-archive-product .ea-viewbtn{
    padding: 0 8px !important;
    font-size: 0.72rem !important;
  }

  .post-type-archive-product .ea-resultsbar__sort{
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .post-type-archive-product .ea-resultsbar__sort .ea-sort-label{
    max-width: 92px !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 360px){
  .post-type-archive-product .ea-resultsbar__sort .ea-sort-label{
    display: none !important;
  }
  .post-type-archive-product .ea-resultsbar__sort{
    width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}


/* ==========================================================
   DESKTOP: Verberg Search term + Country in linkse filter (sidebar)
   (niet de top searchbar)
========================================================== */

.post-type-archive-product .ea-filters .ea-filter-group--search{
  display: none !important;
}

.post-type-archive-product .ea-filters .ea-filter-group--country--panel{
  display: none !important;
}


/* ==========================================================
   ✅ DESKTOP: TOP MODULE als 1 “card” (fix jouw verspring/shadow)
   - Searchbar bovenkant
   - Resultsbar onderkant
   - Zelfde breedte/uitlijning
========================================================== */

@media (min-width: 851px){

  /* Maak wrapper neutraal */
  .post-type-archive-product .ea-mobile-searchbar{
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Searchbar CARD (form) */
  .post-type-archive-product .ea-mobile-searchbar form{
    width: min(1400px, calc(100% - 32px)) !important; /* 16px links/rechts */
    margin: 0 auto !important;

    border-radius: 18px 18px 0 0 !important;
    border-bottom: 0 !important;

    /* shadow alleen op “onderste” deel voor 1-card look */
    box-shadow: none !important;
  }

  /* Resultsbar aanzetten + als onderkant van dezelfde kaart */
  .post-type-archive-product .ea-resultsbar{
    display: flex !important;
    justify-content: space-between !important;  /* gelijke tussenruimte tussen de 3 groepen */
    align-items: center !important;
    gap: 12px !important;

    width: min(1400px, calc(100% - 32px)) !important;
    margin: 0 auto 14px !important;

    padding: 10px 14px !important;
    min-height: 56px !important;

    background: #fff !important;

    border-left: 1px solid rgba(17,24,39,0.10) !important;
    border-right: 1px solid rgba(17,24,39,0.10) !important;
    border-bottom: 1px solid rgba(17,24,39,0.10) !important;
    border-top: 1px solid rgba(17,24,39,0.06) !important;

    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12) !important;

    position: relative !important;
    z-index: 4 !important;
    isolation: isolate;
  }

  /* OPTIE A — gelijke tussenruimte + geen overlap:
     space-between verdeelt de vrije ruimte gelijk over de twee tussenruimtes
     (save↔list en grid↔sort worden zo even groot, ongeacht knopbreedte). De
     groepen mogen krimpen (min-width:0) en het lange sort-label kapt af met …
     i.p.v. te overlappen; de gap (12px) blijft altijd het minimum. */
  /* Save en list/grid hebben geen truncatie → mogen NIET krimpen (anders lopen
     ze over elkaar). Alleen de sorteergroep krimpt en kapt z'n label af. */
  .post-type-archive-product .ea-resultsbar__left,
  .post-type-archive-product .ea-resultsbar__mid{
    flex: 0 0 auto !important;
  }
  .post-type-archive-product .ea-resultsbar__right{
    display: flex !important;             /* zodat de knop binnenin kan krimpen */
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0;                         /* alleen de sorteergroep mag krimpen */
  }
  .post-type-archive-product .ea-resultsbar__right .ea-resultsbar__sort{
    min-width: 0 !important;
  }
  .post-type-archive-product .ea-resultsbar__sort .ea-sort-label{
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Buttons: icon naast tekst (geen “stack”) */
  .post-type-archive-product .ea-save-search,
  .post-type-archive-product .ea-viewbtn,
  .post-type-archive-product .ea-resultsbar__sort{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    height: 40px !important;
    padding: 0 12px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(17,24,39,0.10) !important;
    background: #fff !important;

    font-size: 0.82rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  .post-type-archive-product .ea-resultsbar__mid.ea-resultsbar__mid--left{
    gap: 6px !important;
    margin: 0 !important;
  }

  .post-type-archive-product .ea-save-search .ea-ic,
  .post-type-archive-product .ea-viewbtn .ea-ic,
  .post-type-archive-product .ea-resultsbar__sort .ea-ic{
    flex: 0 0 auto !important;   /* icoon krimpt niet; alleen het label kapt af */
    width: 16px !important;
    height: 16px !important;
    opacity: 0.9 !important;
  }

  .post-type-archive-product .ea-save-search .ea-ic svg,
  .post-type-archive-product .ea-viewbtn .ea-ic svg,
  .post-type-archive-product .ea-resultsbar__sort .ea-ic svg{
    width: 16px !important;
    height: 16px !important;
  }

  .post-type-archive-product .ea-resultsbar__sort .ea-sort-label{
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: rgba(17,24,39,0.84) !important;
    max-width: 220px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-type-archive-product .ea-viewbtn.is-active{
    background: #f3f4f6 !important;
    border-color: rgba(17,24,39,0.14) !important;
    color: #111827 !important;
  }

  /* dropdown boven cards */
  .post-type-archive-product .ea-resultsbar__right{
    position: relative !important;
    z-index: 10001 !important;
  }
  .post-type-archive-product .ea-sortmenu{
    z-index: 10002 !important;
  }
}


/* ==========================================================
   FIX: MOBILE filtermenu → Search + Country terug tonen
========================================================== */

/* 1) Maak "verberg search/country" echt DESKTOP-only */
@media (min-width: 851px){
  .post-type-archive-product .ea-filters .ea-filter-group--search{
    display: none !important;
  }
  .post-type-archive-product .ea-filters .ea-filter-group--country--panel{
    display: none !important;
  }

  /* AI-modus: op desktop is de landkeuze uit de zoekbalk gehaald, dus tonen we
     'm hier in het filterpaneel (sidebar) zodat je land kunt verfijnen binnen de
     AI-resultaten. Hogere specificiteit (.ea-ai-mode op body) + !important wint
     van de display:none hierboven. */
  body.post-type-archive-product.ea-ai-mode .ea-filters .ea-filter-group--country--panel{
    display: block !important;
  }

  /* Paneel-landknop op desktop stylen als de categorie-knop (zelfde veld-look) */
  body.post-type-archive-product.ea-ai-mode .ea-filters .ea-country-trigger--panel{
    width: 100%;
    height: 42px;
    padding: 8px 10px;
    padding-right: 42px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;

    font-size: 0.9rem;
    font-weight: 400;
    color: #333;

    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
  }
  body.post-type-archive-product.ea-ai-mode .ea-filters .ea-country-trigger--panel:not(.is-selected){
    color: #9ca3af;
  }
  body.post-type-archive-product.ea-ai-mode .ea-filters .ea-country-trigger--panel .ea-country-trigger__chev{
    display: none !important;
  }
}

/* 2) Forceer op MOBILE dat ze zichtbaar zijn (ook als iets anders het verbergt) */
@media (max-width: 850px){
  .post-type-archive-product .ea-filters .ea-filter-group--search{
    display: block !important;
  }
  .post-type-archive-product .ea-filters .ea-filter-group--country--panel{
    display: block !important;
  }
}

/* ==========================================================
   FIX (MOBILE): Country veld in FILTERMENU gelijk aan andere velden
   - Target: alleen binnen .ea-filters (dus niet top searchbar)
========================================================== */
@media (max-width: 850px){

  /* Country trigger in filterpanel */
  .post-type-archive-product .ea-filters .ea-country-trigger{
    width: 100% !important;

    height: 42px !important;               /* gelijk aan inputs/selects */
    border-radius: 6px !important;         /* gelijk aan inputs/selects */
    border: 1px solid #ddd !important;     /* gelijk aan inputs/selects */
    background: #fff !important;

    padding: 8px 10px !important;          /* gelijk aan inputs/selects */
    padding-right: 42px !important;        /* ruimte voor chevron */

    font-size: 0.9rem !important;
    font-weight: 400 !important;

    box-shadow: none !important;
    outline: none !important;

    /* zelfde chevron als je andere selects */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
  }

  /* label binnen trigger */
  .post-type-archive-product .ea-filters .ea-country-trigger__label{
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
  }

  /* placeholder vs selected */
  .post-type-archive-product .ea-filters .ea-country-trigger:not(.is-selected){
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
  }
  .post-type-archive-product .ea-filters .ea-country-trigger.is-selected{
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
  }

  /* als er nog een losse chevron-span in je HTML zit: weg ermee */
  .post-type-archive-product .ea-filters .ea-country-trigger__chev{
    display: none !important;
  }
}

/* ==========================================================
   FIX (DESKTOP): sort dropdown moet boven chips/cards komen
========================================================== */
@media (min-width: 851px){

  /* Resultsbar boven chips + cards */
  .post-type-archive-product .ea-resultsbar{
    position: relative !important;
    z-index: 9999 !important;
    overflow: visible !important;
  }

  /* Parent van dropdown */
  .post-type-archive-product .ea-resultsbar__right{
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  /* Dropdown zelf */
  .post-type-archive-product .ea-sortmenu{
    z-index: 10001 !important;
  }

  /* Chips net onder de resultsbar houden */
  .post-type-archive-product .ea-popular-cats-wrap{
    z-index: 5 !important; /* mag blijven, resultsbar is nu hoger */
  }
}

/* ==========================================================
   FIX (DESKTOP + LIST): View auction niet wrappen + genoeg ruimte
========================================================== */
@media (min-width: 851px){

  /* Alleen LIST view */
  body.post-type-archive-product:not(.ea-view-grid) .card-link{
    grid-template-columns: 210px minmax(0,1fr) 200px !important; /* was 130px */
  }

  /* Houd de actions in 1 rij */
  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row{
    flex-wrap: nowrap !important;
  }

  /* Knoptekst nooit onder elkaar */
  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row .view-button{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    min-width: 110px !important;  /* voorkomt te smal */
  }
}

/* Kleinere desktop: iets minder breed zodat het niet te krap wordt */
@media (min-width: 851px) and (max-width: 1120px){
  body.post-type-archive-product:not(.ea-view-grid) .card-link{
    grid-template-columns: 190px minmax(0,1fr) 180px !important;
  }

}

/* ==========================================================
   DESKTOP CHIP SCROLLER ARROWS (LEFT/RIGHT)
   - Alleen desktop (>=851px)
   - Werkt op .ea-popular-cats-wrap--content
========================================================== */

@media (min-width: 851px){

  /* zorg dat buttons netjes kunnen overlayen */
  .post-type-archive-product .ea-popular-cats-wrap--content{
    position: relative;
    overflow: visible;
  }

  /* wat extra padding zodat eerste/laatste chip niet onder pijl valt —
     ALLEEN bij overflow (pijlen zichtbaar). Zonder overflow staan de pijlen
     uit, dus schuiven All + categorieën gewoon naar de linkerrand. */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-popular-cats{
    scroll-behavior: smooth; /* nice-to-have */
  }
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow .ea-popular-cats{
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
  .post-type-archive-product .ea-popular-cats-wrap--content:not(.has-chip-overflow) .ea-popular-cats{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* de pijlen */
  .post-type-archive-product .ea-chips-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

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

    border: 1px solid rgba(17,24,39,0.12);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);

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

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .post-type-archive-product .ea-chips-nav:hover{
    background: #fff;
  }

  .post-type-archive-product .ea-chips-nav svg{
    width: 18px;
    height: 18px;
    stroke: #111827;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  .post-type-archive-product .ea-chips-nav--left{ left: 6px; }
  .post-type-archive-product .ea-chips-nav--right{ right: 6px; }

  /* disabled state */
  .post-type-archive-product .ea-chips-nav.is-disabled{
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }

  /* alleen tonen als JS zegt dat er overflow is */
  .post-type-archive-product .ea-chips-nav{ display: none; }
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow .ea-chips-nav{
    display: inline-flex;
  }

  /* optionele fade onder pijlen */
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::before,
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::after{
    content:"";
    position:absolute;
    top:0;
    width: 46px;
    height:100%;
    pointer-events:none;
    z-index: 10;
  }
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::before{
    left:0;
    background: linear-gradient(to right, #fff7f5 30%, rgba(255,247,245,0));
  }
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::after{
    right:0;
    background: linear-gradient(to left, #fff7f5 30%, rgba(255,247,245,0));
  }
}

/* Mobile: nooit pijlen */
@media (max-width: 850px){
  .post-type-archive-product .ea-chips-nav{ display: none !important; }
}

/* ==========================================================
   DESKTOP: CHIPS NAV ARROWS (links/rechts)
   - werkt met JS die buttons injecteert:
     .ea-chips-nav--left / .ea-chips-nav--right
   - alleen zichtbaar bij overflow (wrap krijgt class has-chip-overflow)
========================================================== */

@media (min-width: 851px){

  /* wrapper moet "anker" zijn voor absolute pijlen */
  .post-type-archive-product .ea-popular-cats-wrap--content{
    position: relative;
    overflow: visible;
  }

  /* geef scroller ruimte zodat pijlen niet over chips heen vallen */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-popular-cats{
    padding-left: 40px;
    padding-right: 40px;
    scroll-behavior: smooth;
  }

  /* pijlen standaard uit; alleen aan als overflow */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav{
    display: none;
  }
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow .ea-chips-nav{
    display: inline-flex;
  }

  /* pijl knoppen */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

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

    border: 1px solid rgba(17,24,39,0.12);
    background: rgba(255,255,255,0.95);

    align-items: center;
    justify-content: center;
    cursor: pointer;

    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 0;

    -webkit-tap-highlight-color: transparent;
  }

  /* links/rechts positie */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--left{ left: 6px; }
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--right{ right: 6px; }

  /* icon */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav svg{
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: #111827;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* hover */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav:hover{
    background: #ffffff;
    border-color: rgba(17,24,39,0.18);
    box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  }

  /* disabled state (JS togglet .is-disabled) */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav.is-disabled{
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
  }

  /* optioneel: subtiele fade aan de randen zodat overflow duidelijk is */
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::before,
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::after{
    content: "";
    position: absolute;
    top: 0;
    width: 46px;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }

  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::before{
    left: 0;
    background: linear-gradient(to right, #fff7f5 0%, rgba(255,247,245,0) 75%);
  }
  .post-type-archive-product .ea-popular-cats-wrap--content.has-chip-overflow::after{
    right: 0;
    background: linear-gradient(to left, #fff7f5 0%, rgba(255,247,245,0) 75%);
  }
}

/* ==========================================================
   DESKTOP: pijlen zweven IN chips-row, maar tegen BUITENRAND
========================================================== */
@media (min-width: 851px){

  .post-type-archive-product .ea-popular-cats-wrap--content{
    position: relative;
    overflow: visible; /* allow arrows to hang outside */
  }

  /* ✅ Chips krijgen ruimte zodat ze niet onder de pijlen komen */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-popular-cats{
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ✅ Pijlen blijven "zweven" in de row */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
  }

  /* ✅ Horizontaal: tegen buitenrand van de chip-wrap (card-rand) */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--left{
    left: 0 !important;
  }
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--right{
    right: 0 !important;
  }

  /* ✅ Als je ze nét buiten de rand wilt (heel strak tegen de cards):
     zet deze aan en tweak -8/-12px naar smaak */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--left{
    left: -10px !important;
  }
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--right{
    right: -10px !important;
  }
}

/* ==========================================================
   DESKTOP: pijlen uitlijnen met productkaarten eronder
========================================================== */
@media (min-width: 851px){

  /* ✅ 1 knob: zet dit gelijk aan de “inset” van je product cards */
  .post-type-archive-product{
    --ea-card-edge: 3px; /* probeer 12px / 14px / 16px */
    --ea-arrow-gutter: 44px; /* ruimte voor pijl + ademruimte */
  }

  .post-type-archive-product .ea-popular-cats-wrap--content{
    position: relative;
    overflow: visible;
  }

  /* Chips krijgen genoeg padding zodat ze niet onder de pijlen komen */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-popular-cats{
    padding-left: calc(var(--ea-card-edge) + var(--ea-arrow-gutter)) !important;
    padding-right: calc(var(--ea-card-edge) + var(--ea-arrow-gutter)) !important;
  }

  /* Pijlen zweven in de chips row */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
  }

  /* ✅ Uitlijning met productkaarten (zelfde inset) */
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--left{
    left: var(--ea-card-edge) !important;
  }
  .post-type-archive-product .ea-popular-cats-wrap--content .ea-chips-nav--right{
    right: var(--ea-card-edge) !important;
  }
}

/* LIST VIEW: prijs rechts boven uitlijnen met titel */
@media (min-width: 851px){
  body.post-type-archive-product:not(.ea-view-grid) .card-actions{
    justify-content: flex-start !important;
    align-items: flex-end !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-price{
    padding-top: 0 !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row{
    margin-top: auto !important;
  }
}

@media (max-width: 850px){
  body.post-type-archive-product:not(.ea-view-grid) .card-actions{
    justify-content: flex-start !important;
    align-items: flex-end !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-price{
    padding-top: 0 !important;
    margin-top: 0 !important;
    line-height: 1.1 !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row{
    margin-top: auto !important;
  }
}

/* MOBILE LIST VIEW: prijs iets omlaag zodat hij gelijk loopt met titel */
@media (max-width: 850px){
  body.post-type-archive-product:not(.ea-view-grid) .card-actions{
    justify-content: flex-start !important;
    align-items: flex-end !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-price{
    padding-top: 0 !important;
    margin-top: 3px !important;
    line-height: 1 !important;
  }

  body.post-type-archive-product:not(.ea-view-grid) .card-actions-row{
    margin-top: auto !important;
  }
}

/* ======================================
   SINGLE PRODUCT LAYOUT
====================================== */

/* ======================================
   SINGLE PRODUCT – CLEAN + CENTERED (FIXED)
   - Geen 100vw hacks -> geen horizontale overflow
   - Layout rail exact zoals archive (1400px, 20px padding)
   - Desktop 2 kolommen gecentreerd (58/42 + gap-compensatie)
   - Related auctions sectie ook rail-aligned
====================================== */

/* ==========================================================
   0) SAFETY: voorkom horizontale overflow (alleen single)
========================================================== */
body.single-product{
  overflow-x: clip; /* modern; voorkomt “net 15px te breed” */
}

body.single-product *,
body.single-product *::before,
body.single-product *::after{
  box-sizing: border-box;
}

/* ==========================================================
   1) ASTRA / PAGE WIDTH – FORCE LIKE ARCHIVE
========================================================== */
body.single-product #primary,
body.single-product .content-area,
body.single-product #main.site-main{
  width: 100% !important;
  max-width: none !important;
}

/* Elke ast-container in site-content = dezelfde rail */
body.single-product .site-content > .ast-container{
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inner ast-containers: volle breedte van de outer container, eigen padding */
body.single-product .site-content > .ast-container .ast-container{
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Mobiel: outer container volgt bestaande regel, inner containers met iets ruimte aan de zijkanten */
@media (max-width: 900px){
  body.single-product .site-content .ast-container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.single-product .site-content > .ast-container .ast-container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.single-product .ea-breadcrumb-wrapper{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ==========================================================
   2) BREADCRUMB – FULL WIDTH BAR, NO 100vw
========================================================== */
body.single-product .ea-breadcrumb-wrapper{
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  margin: 0 0 16px 0 !important;
  position: relative !important;
}

/* Kill ALLES wat ooit 100vw/::before was */
body.single-product .ea-breadcrumb-wrapper::before{
  content: none !important;
  display: none !important;
  width: 0 !important;
}

body.single-product .ea-breadcrumb{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #6b7280 !important;
}

body.single-product .ea-breadcrumb a{
  color: #111827 !important;
  text-decoration: none !important;
  opacity: 0.72 !important;
  white-space: nowrap !important;
  transition: opacity .15s ease, text-decoration-color .15s ease;
}

body.single-product .ea-breadcrumb a:hover{
  opacity: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body.single-product .ea-breadcrumb-sep{
  opacity: 0.35 !important;
  user-select: none;
  flex: 0 0 auto !important;
}

body.single-product .ea-breadcrumb-current{
  color: #111827 !important;
  font-weight: 700 !important;
  opacity: 0.95 !important;

  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mobile breadcrumb 1 lijn */
@media (max-width: 900px){
  body.single-product .ea-breadcrumb{
    gap: 8px !important;
  }
  body.single-product .ea-breadcrumb-current{
    flex: 1 1 auto !important;
  }
}

/* ==========================================================
   3) DESKTOP 2-KOLOMS LAYOUT (CENTERED FIX)
========================================================== */
body.single-product .product-container{
  display: flex;
  flex-wrap: wrap; /* mobile stack */
  gap: 3rem;
  margin: 1.2rem 0;
  width: 100%;
}

/* Belangrijk: voorkom dat tekst/tabel de kolom oprekt */
body.single-product .product-gallery,
body.single-product .product-details{
  min-width: 0;
}

/* Desktop lock + gap-compensatie:
   58% + 42% + gap moet binnen 100% blijven */
@media (min-width: 901px){
  body.single-product .product-container{
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  /* gap = 3rem -> helft = 1.5rem per kolom */
  body.single-product .product-gallery{
    flex: 0 0 calc(58% - 1.5rem) !important;
    max-width: calc(58% - 1.5rem) !important;
  }

  body.single-product .product-details{
    flex: 0 0 calc(42% - 1.5rem) !important;
    max-width: calc(42% - 1.5rem) !important;
  }
}

/* ==========================================================
   4) GALLERY
========================================================== */
body.single-product .product-gallery{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.single-product .main-image{
  width: 100%;
  position: relative; /* nodig voor absolute share btn */
}

body.single-product .main-image img{
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  cursor: zoom-in;
  transition: transform 0.3s;
  height: auto;
  display: block;
}

body.single-product .thumbnail-row{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 10px 0 0;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

body.single-product .thumbnail-row img.thumb{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.85;
  transition: transform .2s ease, opacity .2s ease;
}

body.single-product .thumbnail-row img.thumb:hover{
  opacity: 1;
  transform: scale(1.04);
}

/* ==========================================================
   5) DETAILS CARD + TITLE
========================================================== */
body.single-product .product-details{
  background: #fff;
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  margin-top: 0;
  overflow: hidden; /* voorkomt dat iets de kolom breder maakt */
}

body.single-product .product-title{
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 14px 0;
  padding: 0 0 10px 0;
  border-bottom: 2px solid #f1c40f;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================
   6) PRODUCT INFO TABLE
========================================================== */
body.single-product .product-info-table{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.95rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
  color: #444;
  line-height: 1.55;
  font-family: "Poppins", sans-serif;
}

/* ✅ Gestapelde indeling: label boven, waarde eronder (i.p.v. links/rechts) */
body.single-product .product-info-table tr{
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

body.single-product .product-info-table th,
body.single-product .product-info-table td{
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0;
  border: none;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

body.single-product .product-info-table th{
  background: transparent;
  color: #888;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: normal;
  margin-bottom: 4px;
}

body.single-product .product-info-table td{
  color: #222;
  font-weight: 500;
}

body.single-product .product-info-table tr:last-child{
  border-bottom: none;
}

body.single-product #countdown{
  display: inline;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* ==========================================================
   7) CTA BUTTON
========================================================== */
body.single-product .btn-primary{
  background: #fbbf13;
  color: #000;
  padding: 0.8rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-top: 14px;
  transition: transform .15s ease, background .2s ease;
}

body.single-product .btn-primary:hover{
  background: #e9ab00;
  transform: translateY(-1px);
}

/* ==========================================================
   8) STICKY MOBILE BUTTON
========================================================== */
html body .mobile-contact-container{
  display: none !important;
}

@media (max-width: 900px){
  html body .mobile-contact-container{
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -3px 10px rgba(0,0,0,0.15);
    z-index: 9999;
  }

  body.ea-ios .mobile-contact-container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
  }

  body.single-product .mobile-contact-btn{
    display: block;
    width: 100%;
    background: #fbbf13;
    color: #000;
    text-align: center;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
  }

  body.single-product .product-details .btn-primary{
    display: none !important;
  }

  body{
    padding-bottom: 75px !important;
  }

  body.page-id-106206,
  body.page-id-170849,
  body.post-type-archive-product,
  body.single-veilinghuis {
    padding-bottom: 0 !important;
  }

  body.page-id-106206 .mobile-contact-container,
  body.page-id-170849 .mobile-contact-container,
  body.post-type-archive-product .mobile-contact-container,
  body.single-veilinghuis .mobile-contact-container {
    display: none !important;
  }
}

/* ==========================================================
   9) ZOOM OVERLAY
========================================================== */
body.single-product .zoom-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000000;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

body.single-product .zoom-overlay.active{
  display: flex;
}

body.single-product .zoom-overlay img{
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(0,0,0,0.55);
}

body.single-product .zoom-close,
body.single-product .zoom-nav{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  width: 46px !important;
  height: 46px !important;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity .15s ease;
}

body.single-product .zoom-close{
  font-size: 2rem !important;
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 100001;
}

body.single-product .zoom-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  font-size: 2.4rem !important;
  z-index: 100000;
}

body.single-product .zoom-nav.prev{ left: 18px !important; }
body.single-product .zoom-nav.next{ right: 18px !important; }

body.single-product .zoom-counter{
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(0,0,0,0.55);
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 100001;
}

/* ==========================================================
   10) MOBILE STACK TWEAKS
========================================================== */
@media (max-width: 900px){
  body.single-product .product-container{
    gap: 0 !important;
  }

  body.single-product .product-details{
    padding: 16px 14px !important;
    border-radius: 12px;
  }

  body.single-product .product-title{
    font-size: 1.45rem;
  }

  body.single-product .zoom-counter{
    position: fixed !important;
    bottom: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000000 !important;
  }
}

/* ==========================================================
   11) RELATED AUCTIONS – rail aligned + cards
========================================================== */
body.single-product .ea-related-section{
  margin: 26px 0 40px;
}

body.single-product .ea-related-title{
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
}

body.single-product .ea-related-nav{
  display: flex;
  gap: 8px;
  margin: 0 0 10px 0;
}

body.single-product .ea-related-arrow{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.single-product .ea-related-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 10px 0 18px;
}

body.single-product .ea-related-card{
  flex: 0 0 310px;
}

body.single-product .ea-related-cardlink{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .2s ease;
}

body.single-product .ea-related-cardlink:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

body.single-product .ea-related-img{
  position: relative;
  background: #f3f4f6;
  overflow: hidden;
}

body.single-product .ea-related-img img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

body.single-product .ea-related-body{
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  position: relative;
}

body.single-product .ea-related-name{
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #111827;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

body.single-product .ea-related-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  margin-top: 4px;
}

body.single-product .ea-related-pill--live{
  background: #e9f2ff;
  color: #0b3b8a;
}

body.single-product .ea-related-pill--closed{
  background: #f1f3f5;
  color: #6b7280;
}

body.single-product .ea-related-price{
  margin-top: 6px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #111827;
  padding-right: 140px; /* ruimte voor button pseudo */
}

body.single-product .ea-related-cardlink::after{
  content: "View auction";
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: #fbbf13;
  color: #000;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  pointer-events: none;
}

body.single-product .ea-related-cardlink:hover::after{
  background: #e9ab00;
}

/* overlays */
body.single-product .ea-related-flag{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  width: 28px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* Desktop: pijlen uit */
@media (min-width: 901px){
  body.single-product .ea-related-nav{ display: none !important; }
}

/* Mobiel: cards iets smaller */
@media (max-width: 900px){
  body.single-product .ea-related-card{ flex-basis: 270px; }
  body.single-product .ea-related-img img{ height: 175px; }
}

/* ==========================================================
   ZOOM HINT ICON (magnifier + plus) rechtsonder main foto
========================================================== */
.single-product .product-gallery-main,
.single-product .ea-gallery-main,
.single-product .product-gallery .main-image,
.single-product .product-gallery .ea-main-image{
  position: relative;
}

.single-product .product-gallery-main a,
.single-product .product-gallery-main button,
.single-product .ea-gallery-main a,
.single-product .ea-gallery-main button{
  position: relative;
  display: block;
}

.single-product .product-gallery-main::after,
.single-product .ea-gallery-main::after,
.single-product .product-gallery .main-image::after,
.single-product .product-gallery .ea-main-image::after{
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(17,24,39,0.16);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10.5 8v5' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 10.5h5' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;

  pointer-events: none;
  z-index: 5;
}

@media (hover:hover){
  .single-product .product-gallery-main:hover::after,
  .single-product .ea-gallery-main:hover::after,
  .single-product .product-gallery .main-image:hover::after,
  .single-product .product-gallery .ea-main-image:hover::after{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  }
}

@media (max-width: 900px){
  .single-product .product-gallery-main::after,
  .single-product .ea-gallery-main::after,
  .single-product .product-gallery .main-image::after,
  .single-product .product-gallery .ea-main-image::after{
    width: 38px;
    height: 38px;
    right: 10px;
    bottom: 10px;
    background-size: 20px 20px;
  }
}

/* ==========================================================
   SHARE BUTTON (single product)
========================================================== */
body.single-product .ea-share-btn{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;

  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(17,24,39,0.16) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

body.single-product .ea-share-btn svg{
  width: 22px !important;
  height: 22px !important;
  color: #111827 !important;
}

@media (hover:hover){
  body.single-product .ea-share-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.22) !important;
    background: rgba(255,255,255,1) !important;
  }
}

/* toast */
body.single-product .ea-share-toast{
  position: absolute;
  top: 12px;
  right: 64px;
  z-index: 8;

  background: rgba(17,24,39,0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

body.single-product .ea-share-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px){
  body.single-product .ea-share-btn{
    width: 38px !important;
    height: 38px !important;
    top: 10px !important;
    right: 10px !important;
  }
  body.single-product .ea-share-btn svg{
    width: 20px !important;
    height: 20px !important;
  }
}

/* ==========================================================
   FIX: Similar/Related auctions vlag niet meer mega groot
========================================================== */
body.single-product .ea-related-img img:not([src*="flagcdn.com"]){
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  display: block !important;
}

body.single-product .ea-related-img img[src*="flagcdn.com"]{
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  z-index: 6 !important;

  width: 26px !important;
  height: 18px !important;
  max-width: 26px !important;
  max-height: 18px !important;

  object-fit: cover !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.90) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.16) !important;

  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 900px){
  body.single-product .ea-related-img img:not([src*="flagcdn.com"]){
    height: 175px !important;
  }
}

/* ==========================================================
   RELATED HEART – zelfde als archive grid cards
========================================================== */
body.single-product .ea-related-img{
  position: relative !important;
}

body.single-product .ea-related-heart.ea-watch-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 50 !important;

  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(17,24,39,0.10) !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: none !important;

  cursor: pointer !important;
  padding: 0 !important;
  line-height: 0 !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease;
}

body.single-product .ea-related-heart.ea-watch-btn:active{
  transform: scale(0.98);
}

body.single-product .ea-related-heart.ea-watch-btn svg{
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: none !important;
  stroke: #111827 !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.single-product .ea-related-heart.ea-watch-btn svg path{
  fill: none !important;
  stroke: currentColor !important;
}

body.single-product .ea-related-heart.ea-watch-btn:hover{
  background: #f9fafb !important;
}

body.single-product .ea-related-heart.ea-watch-btn.is-active{
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(17,24,39,0.10) !important;
  box-shadow: none !important;
  color: #e11d48 !important;
}

body.single-product .ea-related-heart.ea-watch-btn.is-active svg{
  stroke: #e11d48 !important;
}

body.single-product .ea-related-heart.ea-watch-btn.is-active svg path{
  fill: rgba(225,29,72,0.20) !important;
  stroke: #e11d48 !important;
}

@media (max-width: 900px){
  body.single-product .ea-related-heart.ea-watch-btn{
    width: 30px !important;
    height: 30px !important;
    top: 8px !important;
    right: 8px !important;
  }

  body.single-product .ea-related-heart.ea-watch-btn svg{
    width: 15px !important;
    height: 15px !important;
  }
}

/* ==========================================================
   FIX: Similar auctions titel boven cards (geen 2-kolom layout)
   Plak HELEMAAL ONDERAAN je single-product CSS
========================================================== */
body.single-product .ea-related-section .ast-container{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  /* kill mogelijke grid-layout van theme/andere css */
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-auto-flow: initial !important;
}

body.single-product .ea-related-title{
  width: 100% !important;
  margin: 0 0 12px 0 !important;
}

body.single-product .ea-related-nav{
  width: 100% !important;
  justify-content: flex-end !important;
  margin: 0 0 10px 0 !important;
}

body.single-product .ea-related-track{
  width: 100% !important;
  margin: 0 !important;
}

/* extra safety: als er ergens floats of columns worden gebruikt */
body.single-product .ea-related-title,
body.single-product .ea-related-nav,
body.single-product .ea-related-track{
  float: none !important;
  clear: both !important;
  column-span: all !important;
}

body.single-product .ea-related-cardlink::after{
  content: "View auction";
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 8;

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

  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;

  background: #fbbf13;
  color: #000;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  pointer-events: none;

  opacity: 1 !important;
  visibility: visible !important;
}

body.single-product .ea-related-cardlink:hover::after{
  background: #e9ab00;
  opacity: 1 !important;
  visibility: visible !important;
}

body.single-product .ea-related-cardlink{
  position: relative !important;
}

body.single-product .ea-related-body{
  position: relative !important;
  z-index: 1 !important;
}

/* onderkant van de kaart: prijs visueel uitlijnen met CTA */
body.single-product .ea-related-price{
  margin-top: 6px;
  padding-right: 140px !important; /* ruimte voor CTA rechts */
  min-height: 42px !important;     /* zelfde hoogte als CTA */
  display: flex !important;
  align-items: center !important;  /* verticale centrering */
  line-height: 1 !important;       /* voorkomt dat prijs lager oogt */
  font-weight: 800;
  font-size: 1.05rem;
  color: #111827;
}

/* CTA zelf ook stabiel houden */
body.single-product .ea-related-cardlink::after{
  content: "View auction";
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 8;

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

  height: 42px;
  padding: 0 14px;
  border-radius: 12px;

  background: #fbbf13;
  color: #000;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  pointer-events: none;

  opacity: 1 !important;
  visibility: visible !important;
}

body.single-product .ea-related-brand{
  font-size: 0.88rem;
  color: #4b5563;
  font-weight: 500;
  line-height: 1.2;
  margin-top: -2px;
  min-height: 1.2em;
}

@media (max-width: 900px){
  body.single-product .ea-related-title,
  body.single-product .ea-related-nav{
    display: none !important;
  }
}

/* Verwijder ruimte tussen header en breadcrumb */
body.single-product .site-content{
  padding-top: 0 !important;
}

body.single-product #primary{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* breadcrumb zelf ook strak tegen header */
body.single-product .ea-breadcrumb-wrapper{
  margin-top: 0 !important;
  padding-top: 8px !important;
}

@media (max-width: 900px){
  body.single-product .product-details{
    border: 1px solid rgba(17,24,39,0.16) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
  }
}

@media (max-width: 900px){
  body.single-product .product-container{
    gap: 10px !important;
  }
}

/* ==========================================================
   CLOSING SOON BADGE – main image
========================================================== */
body.single-product .main-image{
  position: relative;
}

body.single-product .ea-closing-soon-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 8;

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

  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;

  background: #dc2626;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;

  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.22);

  animation: eaClosingPulse 1.2s infinite ease-in-out;
}

@keyframes eaClosingPulse{
  0%, 100%{
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
  }
  50%{
    opacity: 0.78;
    transform: scale(1.04);
    box-shadow: 0 10px 22px rgba(220,38,38,0.28);
  }
}

@media (max-width: 900px){
  body.single-product .ea-closing-soon-badge{
    top: 10px;
    left: 10px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.76rem;
  }
}

body.single-product .ea-closing-soon-badge[hidden]{
  display: none !important;
}

/* main image als anchor */
body.single-product .main-image{
  position: relative;
}

/* share blijft rechts */
body.single-product .ea-share-btn{
  right: 12px !important;
}

/* heart links van share */
body.single-product .ea-main-heart.ea-watch-btn{
  position: absolute;
  top: 12px;
  right: 64px; /* links van share */
  z-index: 8;

  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;

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

  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(17,24,39,0.16) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;

  cursor: pointer;
  padding: 0;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

body.single-product .ea-main-heart.ea-watch-btn svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: #111827 !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.single-product .ea-main-heart.ea-watch-btn svg path{
  fill: none !important;
  stroke: currentColor !important;
}

body.single-product .ea-main-heart.ea-watch-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.22) !important;
  background: rgba(255,255,255,1) !important;
}

body.single-product .ea-main-heart.ea-watch-btn.is-active{
  color: #e11d48 !important;
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(17,24,39,0.16) !important;
}

body.single-product .ea-main-heart.ea-watch-btn.is-active svg{
  stroke: #e11d48 !important;
}

body.single-product .ea-main-heart.ea-watch-btn.is-active svg path{
  fill: rgba(225,29,72,0.20) !important;
  stroke: #e11d48 !important;
}

@media (max-width: 900px){
  body.single-product .ea-share-btn{
    right: 10px !important;
  }

  body.single-product .ea-main-heart.ea-watch-btn{
    width: 38px !important;
    height: 38px !important;
    top: 10px !important;
    right: 56px !important; /* links van mobiele share */
  }

  body.single-product .ea-main-heart.ea-watch-btn svg{
    width: 20px !important;
    height: 20px !important;
  }
}

/* ==========================================================
   SINGLE PAGE TOP SEARCH BAR
========================================================== */
body.single-product .ea-single-topsearch{
  max-width: 1400px;
  margin: 10px auto 10px;
  padding: 0 20px;
}

body.single-product .ea-single-topsearch form{
  display: grid;
  grid-template-columns: 1fr 180px 46px;
  gap: 10px;
  align-items: center;

  background: #fff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body.single-product .ea-single-topsearch input[type="text"]{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  padding: 10px 12px;
  font-size: 0.98rem;
  min-width: 0;
  box-sizing: border-box;
}

body.single-product .ea-single-topsearch .ea-country-trigger{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  padding: 0 12px;
  padding-right: 42px !important;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;

  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

body.single-product .ea-single-topsearch .ea-country-trigger.is-selected{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.single-product .ea-single-topsearch .ea-country-trigger__label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-align: left;
}

body.single-product .ea-single-topsearch .ea-country-trigger__chev{
  display: none !important;
}

body.single-product .ea-single-topsearch .ea-btn-search{
  height: 46px;
  width: 46px;
  border-radius: 14px;
  border: none;
  background: #ffbe13;
  box-shadow: 0 2px 0 #d19b00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

body.single-product .ea-single-topsearch .ea-btn-search svg{
  width: 22px;
  height: 22px;
  stroke: #111;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* mobile */
@media (max-width: 900px){
  body.single-product .ea-single-topsearch{
    padding: 0 4px;
    margin: 8px auto 8px;
  }

  body.single-product .ea-single-topsearch form{
    grid-template-columns: 1fr 120px 44px;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  body.single-product .ea-single-topsearch input[type="text"]{
    height: 44px;
    font-size: 0.95rem;
  }

  body.single-product .ea-single-topsearch .ea-country-trigger{
    height: 44px;
    font-size: 0.95rem;
  }

  body.single-product .ea-single-topsearch .ea-btn-search{
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================
   SINGLE TOP SEARCH + COUNTRY MODAL
========================================================== */

body.single-product .ea-single-topsearch{
  max-width: 1400px;
  margin: 10px auto 10px;
  padding: 0 20px;
}

body.single-product .ea-single-topsearch form{
  display: grid;
  grid-template-columns: 1fr 180px 46px;
  gap: 10px;
  align-items: center;

  background: #fff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body.single-product .ea-single-topsearch input[type="text"]{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  padding: 10px 12px;
  font-size: 0.98rem;
  min-width: 0;
  box-sizing: border-box;
}

body.single-product .ea-single-topsearch .ea-country-trigger{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  padding: 0 12px;
  padding-right: 42px !important;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;

  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

body.single-product .ea-single-topsearch .ea-country-trigger.is-selected{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.single-product .ea-single-topsearch .ea-country-trigger__label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-align: left;
}

body.single-product .ea-single-topsearch .ea-country-trigger__chev{
  display: none !important;
}

body.single-product .ea-single-topsearch .ea-btn-search{
  height: 46px;
  width: 46px;
  border-radius: 14px;
  border: none;
  background: #ffbe13;
  box-shadow: 0 2px 0 #d19b00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

body.single-product .ea-single-topsearch .ea-btn-search svg{
  width: 22px;
  height: 22px;
  stroke: #111;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* COUNTRY MODAL */
body.single-product .ea-country-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}

body.single-product .ea-country-modal.is-open{
  display: block;
}

body.single-product .ea-country-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

body.ea-modal-open{
  overflow: hidden !important;
}

/* desktop */
@media (min-width: 901px){
  body.single-product .ea-country-modal__panel{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: min(720px, calc(100vw - 64px));
    max-height: min(78vh, 720px);

    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(17,24,39,0.10);
    box-shadow: 0 18px 55px rgba(0,0,0,0.22);

    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.single-product .ea-country-modal__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(17,24,39,0.08);
  }

  body.single-product .ea-country-modal__title{
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
  }

  body.single-product .ea-country-modal__close{
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #111827;
    padding: 0;
  }

  body.single-product .ea-country-modal__close:hover{
    background: #f3f4f6;
  }

  body.single-product .ea-country-modal__search{
    padding: 14px 18px;
    border-bottom: 1px solid rgba(17,24,39,0.06);
  }

  body.single-product .ea-country-modal__search input{
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
  }

  body.single-product .ea-country-modal__list{
    padding: 14px 18px 18px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.single-product .ea-country-item{
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(17,24,39,0.10);
    background: #fff;
    font-size: 0.95rem;
    font-weight: 650;
    color: #111827;
    cursor: pointer;
    margin: 0;
  }

  body.single-product .ea-country-item:hover{
    background: #f3f4f6;
  }
}

/* mobile */
@media (max-width: 900px){
  body.single-product .ea-single-topsearch{
    padding: 0 4px;
    margin: 8px auto 8px;
  }

  body.single-product .ea-single-topsearch form{
    grid-template-columns: 1fr 120px 44px;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  body.single-product .ea-single-topsearch input[type="text"]{
    height: 44px;
    font-size: 0.95rem;
  }

  body.single-product .ea-single-topsearch .ea-country-trigger{
    height: 44px;
    font-size: 0.95rem;
  }

  body.single-product .ea-single-topsearch .ea-btn-search{
    width: 44px;
    height: 44px;
  }

  body.single-product .ea-country-modal__panel{
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  body.single-product .ea-country-modal__header{
    padding: 14px 16px;
    border-bottom: 1px solid rgba(17,24,39,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.single-product .ea-country-modal__title{
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
  }

  body.single-product .ea-country-modal__close{
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
  }

  body.single-product .ea-country-modal__search{
    padding: 12px 16px;
    border-bottom: 1px solid rgba(17,24,39,0.06);
  }

  body.single-product .ea-country-modal__search input{
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  body.single-product .ea-country-modal__list{
    padding: 12px 16px 20px;
    overflow: auto;
  }

  body.single-product .ea-country-item{
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(17,24,39,0.08);
    background: #fff;
    font-size: 1rem;
    font-weight: 650;
    color: #111827;
    cursor: pointer;
    margin-bottom: 10px;
  }

  body.single-product .ea-country-item:hover{
    background: #f3f4f6;
  }
}

/* ==========================================================
   MAIN IMAGE / TABLE COUNTDOWN BOX
   - desktop: in table row
   - mobile: overlay on image
   - same blue colors + rounded corners
========================================================== */

/* gedeelde countdown styling */
body.single-product .ea-main-countdown-box{
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: #e8f0ff;
  color: #003399;
  border-radius: 18px;
  padding: 10px 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

body.single-product .ea-main-countdown-box__item{
  min-width: 68px;
  padding: 2px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

body.single-product .ea-main-countdown-box__item:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 1px;
  height: calc(100% - 12px);
  background: rgba(0,51,153,0.28);
}

body.single-product .ea-main-countdown-box__num{
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: #003399;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

body.single-product .ea-main-countdown-box__label{
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 700;
  color: #003399;
  text-transform: none;
  white-space: nowrap;
}

body.single-product .ea-main-countdown-box--closed{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px !important;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}

body.single-product .ea-main-countdown-box__closed-text{
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

/* variant: overlay op image */
body.single-product .ea-main-countdown-box--overlay{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 8;
  pointer-events: none;
}

/* variant: in tabel */
body.single-product .ea-main-countdown-box--table{
  position: relative;
  left: auto;
  bottom: auto;
  z-index: auto;
  pointer-events: auto;
  box-shadow: none;
  border: 1px solid rgba(0,51,153,0.10);
  padding: 8px 6px;
  border-radius: 16px;
}

body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__item{
  min-width: 58px;
  padding: 2px 12px 0;
}

body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__num{
  font-size: 1.45rem;
}

body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__label{
  margin-top: 6px;
  font-size: 0.72rem;
}

body.single-product .product-info-table td .ea-main-countdown-box--table{
  max-width: 100%;
}

/* desktop gedrag */
@media (min-width: 901px){
  body.single-product .ea-main-countdown-box--overlay{
    display: none !important;
  }

  body.single-product .ea-main-countdown-box--table{
    display: inline-flex !important;
  }
}

/* mobile gedrag */
@media (max-width: 900px){
  body.single-product .ea-main-countdown-box--table{
    display: none !important;
  }

  body.single-product .ea-main-countdown-box--overlay{
    display: inline-flex !important;
    left: 10px;
    bottom: 10px;
    border-radius: 14px;
    padding: 6px 4px;
  }

  body.single-product .ea-main-countdown-box--overlay .ea-main-countdown-box__item{
    min-width: 44px;
    padding: 2px 8px 0;
  }

  body.single-product .ea-main-countdown-box--overlay .ea-main-countdown-box__num{
    font-size: 1.1rem;
  }

  body.single-product .ea-main-countdown-box--overlay .ea-main-countdown-box__label{
    margin-top: 4px;
    font-size: 0.62rem;
  }

  body.single-product .ea-main-countdown-box--overlay .ea-main-countdown-box__item:not(:last-child)::after{
    top: 4px;
    height: calc(100% - 8px);
  }
}

/* desktop countdown in tabel kleiner */
@media (min-width: 901px){
  body.single-product .ea-main-countdown-box--table{
    padding: 6px 4px !important;
    border-radius: 14px !important;
  }

  body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__item{
    min-width: 48px !important;
    padding: 2px 9px 0 !important;
  }

  body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__num{
    font-size: 1.15rem !important;
  }

  body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__label{
    margin-top: 4px !important;
    font-size: 0.62rem !important;
  }

  body.single-product .ea-main-countdown-box--table .ea-main-countdown-box__item:not(:last-child)::after{
    top: 4px !important;
    height: calc(100% - 8px) !important;
  }
}

/* mobiel countdown nog iets kleiner */
@media (max-width: 900px){
  body.single-product .ea-main-countdown-box{
    left: 8px !important;
    bottom: 8px !important;
    padding: 5px 3px !important;
    border-radius: 12px !important;
  }

  body.single-product .ea-main-countdown-box__item{
    min-width: 38px !important;
    padding: 2px 6px 0 !important;
  }

  body.single-product .ea-main-countdown-box__num{
    font-size: 0.98rem !important;
  }

  body.single-product .ea-main-countdown-box__label{
    margin-top: 3px !important;
    font-size: 0.56rem !important;
  }

  body.single-product .ea-main-countdown-box__item:not(:last-child)::after{
    top: 4px !important;
    height: calc(100% - 8px) !important;
  }
}

/* mobiel: verberg Time left rij in tabel */
@media (max-width: 900px){
  body.single-product .product-info-table tr.ea-timeleft-row{
    display: none !important;
  }
}

/* auction closed badge: ruimere horizontale padding op beide varianten */
body.single-product .ea-main-countdown-box--overlay.ea-main-countdown-box--closed,
body.single-product .ea-main-countdown-box--table.ea-main-countdown-box--closed {
  padding: 10px 18px !important;
}

@media (max-width: 900px){
  body.single-product .ea-main-countdown-box--overlay.ea-main-countdown-box--closed {
    padding: 10px 18px !important;
  }
}

@media (max-width: 900px){
  body.single-product .ea-related-card{
    flex: 0 0 210px !important;
  }

  body.single-product .ea-related-img img{
    height: 112px !important;
    object-fit: cover !important;
  }

  body.single-product .ea-related-body{
    padding: 9px 9px 11px !important;
    gap: 5px !important;
  }

  body.single-product .ea-related-name{
    font-size: 0.82rem !important;
    line-height: 1.16 !important;
    min-height: 2.32em !important;
  }

  body.single-product .ea-related-brand{
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    min-height: 1.1em !important;
  }

  body.single-product .ea-related-pill{
    font-size: 0.66rem !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
  }

  body.single-product .ea-related-price{
    font-size: 0.82rem !important;
    min-height: 34px !important;
    padding-right: 98px !important;
    margin-top: 4px !important;
  }

  body.single-product .ea-related-cardlink::after{
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
    right: 9px !important;
    bottom: 11px !important;
    border-radius: 10px !important;
  }

  body.single-product .ea-related-heart.ea-watch-btn{
    width: 26px !important;
    height: 26px !important;
    top: 7px !important;
    right: 7px !important;
  }

  body.single-product .ea-related-heart.ea-watch-btn svg{
    width: 13px !important;
    height: 13px !important;
  }

  body.single-product .ea-related-flag{
    width: 20px !important;
    height: 14px !important;
    left: 7px !important;
    bottom: 7px !important;
  }
}

@media (max-width: 900px){
  body.single-product .ea-related-card{
    flex: 0 0 230px !important;
  }

  body.single-product .ea-related-img img{
    height: 92px !important;
    object-fit: cover !important;
  }
}

/* ==========================================================
   EA ACCOUNTS – FULL CSS (LATEST)
   - Account page
   - Watchlist
   - Login / Register
   - Forgot password / Reset password
   - Resend verification block
   - Desktop + mobile
   - Settings width aligned with watchlist
========================================================== */


/* ==========================================================
   1) PAGE HELPERS / FULL WIDTH
========================================================== */

body.page .ea-account-page,
body.page .ea-watchlist-page,
body.page .ea-auth-page,
body.page .ea-account-settings{
  position: relative;
  z-index: 2;
}

body.page #secondary{
  display: none !important;
}

body.page .site-content .ast-container{
  max-width: 1400px;
}

body.page #primary{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}


/* ==========================================================
   2) SHARED OUTER PAGE WIDTH
   - Watchlist / Account / Settings all use same rail
========================================================== */

.ea-watchlist-page,
.ea-account-page,
.ea-account-settings{
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}


/* ==========================================================
   3) WATCHLIST PAGE
========================================================== */

.ea-watchlist-page{
  padding: 16px;
}

.ea-watchlist-page__title{
  margin: 0 0 16px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
}

.ea-watchlist-empty{
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 16px;
  padding: 20px;
}

.ea-watchlist-empty p{
  margin: 0 0 10px;
}

.ea-watchlist-empty p:last-child{
  margin-bottom: 0;
}

.ea-watchlist-empty a{
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

.ea-watchlist-empty a:hover{
  text-decoration: underline;
}


/* ==========================================================
   4) WATCHLIST GRID
========================================================== */

.ea-watchlist-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 1180px){
  .ea-watchlist-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}


/* ==========================================================
   5) WATCHLIST CARD
========================================================== */

.ea-watchlist-card{
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ea-watchlist-card__media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
  overflow: hidden;
}

.ea-watchlist-card__image-link{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.ea-watchlist-card__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ea-watchlist-card__body{
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ea-watchlist-card__title{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.22rem;
  font-weight: 800;
  min-width: 0;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.22rem * 2);
}

.ea-watchlist-card__title a{
  color: #111827;
  text-decoration: none;
}

.ea-watchlist-card__brand{
  margin-top: 6px;
  font-size: 0.8rem;
  color: #4b5563;
}

.ea-watchlist-card__bottom{
  margin-top: auto;
  padding-top: 10px;
}

.ea-watchlist-card__footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 10px;
}

.ea-watchlist-card__price{
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
}

.ea-watchlist-card__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: #ffbe13;
  color: #111;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 #d19b00;
}

.ea-watchlist-card__button:hover{
  background: #f4b000;
}


/* ==========================================================
   6) FLAG
========================================================== */

.ea-watchlist-card__flag{
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 2px 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  line-height: 0;
  z-index: 2;
}

.ea-watchlist-card__flag img{
  width: 26px;
  height: 18px;
  object-fit: cover;
  display: block;
}


/* ==========================================================
   7) HEART BUTTON
========================================================== */

.ea-watch-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  color: #111827;
}

.ea-watch-btn--overlay{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ea-watch-btn svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  overflow: visible;
}

.ea-watch-btn svg path{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ea-watch-btn:hover{
  background: #f9fafb;
}

.ea-watch-btn.is-active{
  color: #e11d48 !important;
}

.ea-watch-btn.is-active svg path{
  fill: rgba(225,29,72,0.20) !important;
  stroke: #e11d48 !important;
}


/* ==========================================================
   8) COUNTDOWN
========================================================== */

.ea-watchlist-page .badge-countdown,
.ea-watchlist-page .badge-expired{
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.1;
}

.ea-watchlist-page .badge-countdown{
  background: #e8f0ff;
  color: #003399;
}

.ea-watchlist-page .badge-expired{
  background: #f3f4f6;
  color: #6b7280;
}


/* ==========================================================
   9) ACCOUNT PAGE
========================================================== */

.ea-account-page{
  padding: 24px 16px 40px;
}

.ea-account-card{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 24px;
  box-sizing: border-box;
}

.ea-account-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ea-account-card__eyebrow{
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.ea-account-card__title{
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: #111827;
}

.ea-account-card__subtitle{
  margin: 10px 0 0;
  font-size: 1rem;
  color: #4b5563;
}


/* ==========================================================
   10) ACCOUNT ACTIONS
========================================================== */

.ea-account-actions{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin-top: 16px;
}

.ea-account-action{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  background: #fff !important;
  text-decoration: none !important;
  color: #111827 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  min-width: 0;
}

.ea-account-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  border-color: rgba(17,24,39,0.14);
}

.ea-account-action__icon{
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f9fafb !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.ea-account-action--logout .ea-account-action__icon{
  background: #fff7ed !important;
}

.ea-account-action__icon svg{
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.ea-account-action__icon svg path{
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

.ea-account-action__content{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.ea-account-action__title{
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  line-height: 1.2 !important;
}

.ea-account-action__meta{
  margin-top: 4px !important;
  font-size: 0.86rem !important;
  color: #6b7280 !important;
  line-height: 1.3 !important;
}


/* ==========================================================
   11) AUTH PAGES
   - login
   - register
   - forgot password
   - reset password
========================================================== */

.ea-auth-page{
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.ea-auth-card{
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 24px;
}

.ea-auth-card__header{
  margin-bottom: 18px;
}

.ea-auth-card__eyebrow{
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.ea-auth-card__title{
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: #111827;
}

.ea-auth-card__subtitle{
  margin: 10px 0 0;
  font-size: 1rem;
  color: #4b5563;
}


/* ==========================================================
   12) AUTH FORM
========================================================== */

.ea-auth-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ea-auth-form__row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ea-auth-form__row label{
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}

.ea-auth-form__row input{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  padding: 0 14px;
  font-size: 0.96rem;
  color: #111827;
  box-sizing: border-box;
  outline: none;
}

.ea-auth-form__row input:focus{
  border-color: rgba(255,190,19,0.95);
  box-shadow: 0 0 0 3px rgba(255,190,19,0.16);
}


/* ==========================================================
   13) AUTH BUTTONS
========================================================== */

.ea-auth-form__actions{
  margin-top: 4px;
}

.ea-auth-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ea-auth-btn--primary{
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: #ffbe13;
  color: #111;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 2px 0 #d19b00;
}

.ea-auth-btn--primary:hover{
  background: #f4b000;
}

.ea-auth-btn--secondary{
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 800;
  border: 1px solid rgba(17,24,39,0.12);
  box-shadow: none;
}

.ea-auth-btn--secondary:hover{
  background: #f9fafb;
}


/* ==========================================================
   14) AUTH FOOTER
========================================================== */

.ea-auth-form__footer{
  margin-top: 4px;
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.6;
}

.ea-auth-form__footer a{
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

.ea-auth-form__footer a:hover{
  text-decoration: underline;
}


/* ==========================================================
   15) AUTH MESSAGES
========================================================== */

.ea-account-message{
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.ea-account-message--error{
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.ea-account-message--success{
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}


/* ==========================================================
   16) RESEND VERIFICATION BLOCK
========================================================== */

.ea-auth-resend{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(17,24,39,0.08);
}

.ea-auth-resend__divider{
  margin-bottom: 14px;
}

.ea-auth-resend__divider span{
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4b5563;
}

.ea-auth-resend__form{
  gap: 12px;
}

.ea-auth-resend__actions{
  margin-top: 2px;
}


/* ==========================================================
   17) FORGOT / RESET SPECIFIC SMALL TWEAKS
========================================================== */

.ea-auth-page--forgot .ea-auth-card,
.ea-auth-page--reset .ea-auth-card{
  max-width: 100%;
}

.ea-auth-page--forgot .ea-auth-card__subtitle,
.ea-auth-page--reset .ea-auth-card__subtitle{
  max-width: 560px;
}


/* ==========================================================
   18) EA ACCOUNT SETTINGS PAGE
========================================================== */

.ea-account-settings{
  padding: 24px 16px 56px;
  background: transparent;
  box-sizing: border-box;
}

.ea-account-settings .ea-account-container{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.ea-account-settings h1{
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #111;
}

.ea-account-notice{
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}

.ea-account-notice--success{
  background: #edf9f0;
  color: #166534;
  border: 1px solid #ccebd5;
}

.ea-account-settings .ea-account-card{
  width: 100%;
  background: #fff;
  border: 1px solid #e9eaec;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  box-sizing: border-box;
}

.ea-account-settings .ea-account-card + .ea-account-card{
  margin-top: 18px;
}

.ea-account-settings .ea-account-card h2{
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  color: #111;
}

.ea-account-settings .ea-account-card > p{
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #5f6368;
  max-width: 900px;
}

/* Optional intro block inside the card */
.ea-account-settings .ea-settings-intro{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fafafa;
  border: 1px solid #ececec;
}

.ea-account-settings .ea-settings-intro__icon{
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
}

.ea-account-settings .ea-settings-intro__icon svg{
  width: 20px;
  height: 20px;
}

.ea-account-settings .ea-settings-intro__content h3{
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.3;
  color: #111;
}

.ea-account-settings .ea-settings-intro__content p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

/* Settings rows */
.ea-account-settings form{
  margin-top: 8px;
}

.ea-checkbox-row{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 18px 18px;
  border: 1px solid #ececec;
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  cursor: pointer;
}

.ea-checkbox-row + .ea-checkbox-row{
  margin-top: 14px;
}

.ea-checkbox-row:hover{
  border-color: #d9dce1;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  background: #fcfcfc;
}

.ea-checkbox-row input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  margin: 2px 0 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #c7ccd4;
  border-radius: 6px;
  background: #fff;
  position: relative;
  flex: 0 0 20px;
  transition: all .2s ease;
}

.ea-checkbox-row input[type="checkbox"]:hover{
  border-color: #111;
}

.ea-checkbox-row input[type="checkbox"]:checked{
  background: #111;
  border-color: #111;
}

.ea-checkbox-row input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ea-checkbox-row input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(17,17,17,.10);
}

.ea-checkbox-row span{
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: #111;
}

/* Optional two-line layout if you later split title/meta */
.ea-checkbox-row .ea-setting-option{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ea-checkbox-row .ea-setting-option strong{
  font-size: 15px;
  line-height: 1.35;
  color: #111;
  font-weight: 600;
}

.ea-checkbox-row .ea-setting-option small{
  font-size: 13px;
  line-height: 1.45;
  color: #6b7280;
}

/* Save button area */
.ea-account-settings .ea-settings-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.ea-account-settings .ea-auth-btn.ea-auth-btn--primary{
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.ea-account-settings .ea-auth-btn.ea-auth-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.ea-account-settings .ea-auth-btn.ea-auth-btn--primary:active{
  transform: translateY(0);
}

.ea-account-settings .ea-settings-help{
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #777;
}

.ea-account-settings .ea-settings-help a{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================
   19) SAVED SEARCHES
========================================================== */

.ea-saved-searches-list{
  display: grid;
  gap: 16px;
}

.ea-saved-search-item{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px;
  border: 1px solid #ececec;
  border-radius: 16px;
  background: #fafafa;
}

.ea-saved-search-item__content{
  flex: 1 1 auto;
  min-width: 0;
}

.ea-saved-search-item__content h3{
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.3;
  color: #111;
}

.ea-saved-search-item__content p{
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.ea-saved-search-item__actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 190px;
}

.ea-saved-search-form{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ea-checkbox-row--compact{
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}

.ea-saved-searches-empty{
  padding: 16px 0 4px;
  color: #666;
}


/* ==========================================================
   20) MOBILE
========================================================== */

@media (max-width: 850px){

  .ea-watchlist-page{
    padding: 12px 6px 20px;
  }

  .ea-account-page{
    padding: 16px 6px 28px;
  }

  .ea-account-settings{
    padding: 16px 6px 32px;
  }

  .ea-auth-page{
    padding: 16px 6px 28px;
  }

  .ea-watchlist-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }

  .ea-watchlist-card{
    border-radius: 14px;
  }

  .ea-watchlist-card__media{
    aspect-ratio: 16 / 10;
  }

  .ea-watch-btn--overlay{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .ea-watch-btn svg{
    width: 16px !important;
    height: 16px !important;
  }

  .ea-watchlist-card__body{
    padding: 10px 10px 8px;
  }

  .ea-watchlist-card__title{
    font-size: 0.85rem;
    line-height: 1.15rem;
    min-height: calc(1.15rem * 2);
  }

  .ea-watchlist-card__brand{
    font-size: 0.72rem;
  }

  .ea-watchlist-page .badge-countdown,
  .ea-watchlist-page .badge-expired{
    font-size: 0.7rem;
    padding: 5px 8px;
  }

  .ea-watchlist-card__price{
    font-size: 0.88rem;
  }

  .ea-watchlist-card__button{
    font-size: 0.68rem;
    padding: 7px 10px;
    border-radius: 10px;
  }

  .ea-account-card{
    padding: 18px;
    border-radius: 16px;
  }

  .ea-account-card__title{
    font-size: 1.6rem;
  }

  .ea-account-card__subtitle{
    font-size: 0.95rem;
  }

  .ea-account-actions{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ea-account-action{
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .ea-account-action__icon{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  .ea-account-action__icon svg{
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  .ea-account-action__title{
    font-size: 0.95rem !important;
  }

  .ea-account-action__meta{
    font-size: 0.8rem !important;
  }

  .ea-auth-card{
    padding: 18px;
    border-radius: 16px;
  }

  .ea-auth-card__title{
    font-size: 1.6rem;
  }

  .ea-auth-card__subtitle{
    font-size: 0.95rem;
  }

  .ea-auth-form{
    gap: 12px;
  }

  .ea-auth-form__row input{
    height: 44px;
    border-radius: 10px;
    font-size: 0.94rem;
  }

  .ea-auth-btn--primary{
    min-height: 46px;
    border-radius: 10px;
    font-size: 0.92rem;
  }

  .ea-auth-btn--secondary{
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.88rem;
  }

  .ea-auth-form__footer{
    font-size: 0.88rem;
  }

  .ea-account-message{
    font-size: 0.88rem;
    padding: 11px 12px;
    border-radius: 10px;
  }

  .ea-auth-resend{
    margin-top: 18px;
    padding-top: 16px;
  }

  .ea-auth-resend__divider{
    margin-bottom: 12px;
  }

  .ea-auth-resend__divider span{
    font-size: 0.84rem;
  }

  .ea-account-settings h1{
    font-size: 28px;
    margin-bottom: 14px;
  }

  .ea-account-settings .ea-account-card{
    padding: 20px 16px;
    border-radius: 18px;
  }

  .ea-account-settings .ea-account-card h2{
    font-size: 21px;
  }

  .ea-account-settings .ea-account-card > p{
    font-size: 14px;
    margin-bottom: 18px;
  }

  .ea-checkbox-row{
    padding: 15px 14px;
    gap: 12px;
    border-radius: 14px;
  }

  .ea-checkbox-row span{
    font-size: 14px;
  }

  .ea-account-settings .ea-settings-actions{
    margin-top: 18px;
  }

  .ea-account-settings .ea-auth-btn.ea-auth-btn--primary{
    width: 100%;
    justify-content: center;
  }

  .ea-saved-search-item{
    flex-direction: column;
  }

  .ea-saved-search-item__actions{
    width: 100%;
    min-width: 0;
  }

  .ea-saved-search-form{
    width: 100%;
    justify-content: space-between;
  }
}


/* ==========================================================
   21) SMALL MOBILE
========================================================== */

@media (max-width: 420px){
  .ea-watchlist-card__footer{
    flex-direction: column;
    align-items: stretch;
  }

  .ea-watchlist-card__button{
    width: 100%;
  }
}

/* Watchlist mobile optimalisatie */
@media (max-width: 640px) {

  .ea-watchlist-page__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .ea-watchlist-page__title {
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
  }

  /* 🔥 SORT BUTTON KLEINER */
  .ea-watchlist-sort-trigger {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .ea-watchlist-sort-trigger svg {
    width: 13px;
    height: 13px;
  }

  .ea-watchlist-sort-trigger span {
    font-size: 12px;
  }
}

/* EXTRA COMPACT voor kleine iPhones */
@media (max-width: 420px) {

  .ea-watchlist-page__title {
    font-size: 14px;
  }

  .ea-watchlist-sort-trigger {
    padding: 5px 8px;
    font-size: 11px;
  }

  .ea-watchlist-sort-trigger svg {
    width: 12px;
    height: 12px;
  }
}

/* Back link account/settings/watchlist */
.ea-account-back {
  margin: 0 0 18px;
}

.ea-account-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.ea-account-back__link:hover {
  opacity: .75;
}

.ea-account-back__link svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  display: block;
  flex: 0 0 18px;
}

.ea-account-back__link span {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 640px) {
  .ea-account-back__link {
    font-size: 13px;
    gap: 6px;
  }

  .ea-account-back__link svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    flex: 0 0 16px;
  }
}

@media (max-width: 768px){
  .ea-account-back__link svg{
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    flex: 0 0 16px !important;
    display: block;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site,
.ast-site-container,
#page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.site-content,
.ast-container {
  flex: 1;
}

.site-footer,
.ast-footer-wrap {
  margin-top: auto;
}

/* Back link iets verder naar links trekken */
.ea-account-back {
  margin-left: -6px;
  margin-bottom: 10px;
}

.ea-account-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.ea-account-back__link svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  display: block !important;
}

/* Info icon buttons in table headers */
.ea-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0,0,0,0.4);
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: color 0.15s;
  white-space: nowrap;
}

.ea-info-btn:hover {
  color: rgba(0,0,0,0.75);
}

.product-info-table th {
  white-space: nowrap;
}

/* Description toast notification */
.ea-desc-toast {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 9999999;
  background: #1d262b;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 48px 12px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  max-width: 480px;
  width: calc(100vw - 32px);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ea-desc-toast.is-visible {
  display: flex;
  flex-direction: column;
}

.ea-desc-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ea-desc-toast__content {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ea-desc-toast__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
}

.ea-desc-toast__close:hover {
  color: #fff;
}

/* Mobile dropdown menu */
.ast-header-break-point .ast-mobile-header-content,
.ast-header-break-point .ast-desktop-header-content {
    width: auto !important;
    min-width: 160px;
    right: 0;
    left: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: var(--ast-global-color-5);
    border: 1px solid #dddddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    font-size: 16px;
    color: var(--ast-global-color-3);
    overflow: hidden;
}

/* Menu links in dropdown */
.ast-header-break-point .ast-mobile-header-content .main-header-bar-navigation,
.ast-header-break-point .ast-desktop-header-content .main-header-bar-navigation {
    line-height: 1.3 !important;
}

.ast-header-break-point .ast-mobile-header-content .menu-link,
.ast-header-break-point .ast-desktop-header-content .menu-link {
    font-size: 0.95rem !important;
    color: var(--ast-global-color-3) !important;
    padding: 5px 8px !important;
    line-height: 1.3 !important;
}

.ast-header-break-point .ast-mobile-header-content .menu-link:hover,
.ast-header-break-point .ast-desktop-header-content .menu-link:hover {
    color: var(--ast-global-color-8) !important;
    background-color: rgba(0, 0, 0, 0.04);
}

/* Desktop dropdown menu tekst gecentreerd */
.ast-desktop .main-header-menu .sub-menu .menu-link,
.ast-desktop-header-content .menu-link,
.header-main-layout-2 .main-header-bar-navigation .sub-menu,
.header-main-layout-2 .main-header-bar-navigation .sub-menu .menu-link {
    text-align: center !important;
}


/* ==========================================================
   SEARCH FOCUS DIM (mobiel)
   - klik/focus op searchbar => grijze overlay achter de searchbar
     (chips, watchlist, list/grid, sorteer worden gedimd)
   - searchbar zelf komt boven de overlay uit
========================================================== */

/* op desktop nooit zichtbaar / geen layout-impact */
.post-type-archive-product .ea-search-dim{ display: none; }

@media (max-width: 850px){

  /* overlay anker: boundary moet relatief zijn */
  .post-type-archive-product .ea-sticky-boundary{ position: relative; }

  .post-type-archive-product .ea-search-dim{
    display: block;
    /* fixed over de hele viewport: dimt alles achter de searchbar tot aan de
       schermranden én helemaal omlaag tot de footer, ongeacht waar de
       content-container eindigt (geen witte randen / gat boven de footer) */
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 99990;            /* boven chips (5) en resultsbar (10000) */
    pointer-events: none;
  }

  .post-type-archive-product.ea-search-active .ea-search-dim{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;      /* tap op overlay sluit de focus */
  }

  /* searchbar pakt boven de overlay uit en blijft helder */
  .post-type-archive-product.ea-search-active .ea-mobile-searchbar{
    position: relative;
    z-index: 99991;
    /* als 'ie boven de waas uitsteekt: afgeronde kaart i.p.v. rechte hoeken */
    border: 1px solid rgba(17,24,39,0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
  }

  /* header taalswitcher/auth (.ea-lang-wrap heeft z-index 999999 in ea-accounts)
     prikt anders door de waas. Tijdens search-focus de hele auth-balk onder de
     scrim duwen. Op mobiel is dat de .ea-header-auth-topbar; door die een eigen
     stacking-context (position+z-index) te geven, zakken vlag+valuta mee onder. */
  .post-type-archive-product.ea-search-active .ea-header-auth-wrap{
    z-index: 1 !important;                /* desktop overlay (al absolute) */
  }
  .post-type-archive-product.ea-search-active .ea-header-auth-topbar{
    position: relative;                   /* mobiele topbar: maak stacking-context */
    z-index: 1 !important;
  }
}


/* ==========================================================
   NIEUWSKAARTEN op het productarchief
   - desktop: onder het filtermenu in de linker (sticky) kolom
   - mobiel: onder de pagination
   Het blok wordt op beide plekken gerenderd; per breakpoint
   tonen we de juiste variant. (.ean-card styling komt uit ea-news.css)
========================================================== */

.ea-archive-news{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ea-archive-news .ean-card{ width: 100%; }

/* kop boven het nieuwsblok — sectie-look die aansluit op de site-/nieuwsstijl:
   donkere titel (#1a1a1a), hairline-divider in de kaartrandkleur en een kort
   taupe accentbalkje (#8b7355, hetzelfde accent als de nieuwsfilters/pills) */
.ea-archive-news__title{
  position: relative;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ece7df;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #1a1a1a;
}
.ea-archive-news__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 38px;
  height: 2px;
  background: #8b7355;
  border-radius: 2px;
}

/* compacter dan op de nieuwspagina: lagere afbeelding, minder padding,
   excerpt op 2 regels */
.ea-archive-news .ean-card__media{ aspect-ratio: 16 / 9; }
.ea-archive-news .ean-card__body{
  padding: 12px 14px 14px;
  gap: 6px;
}
.ea-archive-news .ean-card__title{ font-size: 1rem; }
.ea-archive-news .ean-card__excerpt{
  font-size: 0.86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* standaard beide verbergen; per breakpoint de juiste aanzetten */
.post-type-archive-product .ea-archive-news--desktop{ display: none; }
.post-type-archive-product .ea-archive-news--mobile{ display: none; }

@media (min-width: 851px){
  .post-type-archive-product .ea-archive-news--desktop{
    display: flex;
    margin-top: 18px;
  }
}

@media (max-width: 850px){
  .post-type-archive-product .ea-archive-news--mobile{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 18px 4px 0;
  }
  /* kop over de volledige breedte van het grid */
  .post-type-archive-product .ea-archive-news--mobile .ea-archive-news__title{
    grid-column: 1 / -1;
  }
}