/*
 * Vloershop Core — productkaart + grid (luxuryfloors-stijl).
 * Bewust assertief (incl. !important) om de thema-/WooCommerce-default-styling
 * te overschrijven. Kleuren via --vs-* met concrete fallbacks.
 */

/* ── Grid: neem de WooCommerce-archiefcontainer over ───────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6,
.vs-product-grid {
    --vs-grid-columns: 4;
    display: grid !important;
    grid-template-columns: repeat(var(--vs-grid-columns), minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.vs-product-grid::before,
.vs-product-grid::after {
    content: none !important;
    display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.vs-product-grid > li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    list-style: none !important;
    display: flex;
}

.vs-product-grid > li.product > .vs-product-card {
    width: 100%;
}

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .vs-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .vs-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* ── Kaart ─────────────────────────────────────────────────────────── */
.vs-product-card {
    --vs-accent: var(--vs-color-primary, #4056b4);
    --vs-price-bg: var(--vs-color-success, #62b959);
    --vs-muted: var(--vs-color-muted, #6c757d);

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    /* Geen eigen witte laag: de kaart heeft toch al geen rand en geen schaduw,
       dus dat wit was alleen zichtbaar als een blok op een gekleurde sectie
       (zoals "Populaire vloeren" op de zandkleurige homepage-band). Nu staan
       foto en tekst direct op de pagina. Op de witte archiefpagina's verandert
       er niets, daar was wit-op-wit al onzichtbaar. */
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
    text-align: left !important;
    transition: transform .15s ease;
}

.vs-product-card:hover,
.vs-product-card:focus-within {
    transform: translateY(-2px);
}

/* Media */
.vs-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f4f5f7;
    overflow: hidden;
    border-radius: inherit;
}

/* Wishlist rechtsboven */
.vs-product-card__wishlist {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3;
    width: 40px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important;
    color: #5f6157 !important;
    cursor: pointer;
    line-height: 0 !important;
}

.vs-product-card__wishlist:hover,
.vs-product-card__wishlist:focus {
    background: #fff !important;
    color: #1f2444 !important;
}

/* Opgeslagen: gevuld rood hartje */
.vs-product-card__wishlist.is-active {
    color: #e3342f !important;
    background: #fff !important;
}

.vs-product-card__wishlist.is-active svg path {
    fill: #e3342f !important;
    stroke: #e3342f !important;
}

.vs-product-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.vs-product-card__image {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    transition: opacity .3s ease, transform .4s ease;
}

.vs-product-card__image--hover {
    opacity: 0;
}

@media (hover: hover) {
    .vs-product-card:hover .vs-product-card__image {
        transform: scale(1.05);
    }

    .vs-product-card:hover .vs-product-card__image--hover {
        opacity: 1;
    }
}

/* Promo-labels over de foto (linksonder) */
.vs-product-card__labels {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    pointer-events: none;
}

.vs-product-card__label {
    display: inline-block;
    padding: .3rem .6rem;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vs-accent);
    background-color: #f0fdfe;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Body
 *
 * Geen zijmarge: het tekstblok loopt even breed als de foto erboven. De kaart
 * zelf heeft geen rand en geen schaduw (zie .vs-product-card), dus er is niets
 * om vanaf te blijven; de ruimte tussen twee kaarten komt van de grid-gap.
 * Titels van twee regels en de kleurstaaltjes hebben die 32 px hard nodig: in
 * de smalle kolommen (kruisverkoop, 2 kolommen op mobiel) paste anders een
 * staaltje minder op de regel. Boven wel ruimte, anders plakt de titel aan de
 * foto. */
.vs-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 0;
    flex: 1 1 auto;
}

.vs-product-card__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--vs-card-title, #1f2444) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.vs-product-card__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.vs-product-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Prijs: groene pill + doorgestreepte oude prijs */
.vs-product-card__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.vs-product-card__price-current {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 10px 16px 10px 12px;
    font-size: 21px;
    font-weight: 700;
    color: #fff !important;
    background: var(--vs-price-bg, #62b959);
    background-image: var(--vs-price-bg-image, linear-gradient(#89c270, #62b959));
    border-radius: 20px 0;
    white-space: nowrap;
    line-height: 1;
}

.vs-product-card__price-current .woocommerce-Price-amount,
.vs-product-card__price-current bdi {
    color: #fff !important;
}

.vs-product-card__price-unit {
    margin-left: 4px;
    font-size: .52em;
    font-weight: 700;
    letter-spacing: 0.01em;
    align-self: center;
    opacity: 0.95;
}

.vs-product-card__price-old {
    font-size: .9rem;
    color: var(--vs-muted);
}

.vs-product-card__price-old del,
.vs-product-card__price-old .woocommerce-Price-amount {
    color: var(--vs-muted) !important;
}

/* USP's als vinkjes */
.vs-product-card__usps {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.vs-product-card__usp {
    --vs-usp-color: var(--vs-color-success, #62b959);
    display: flex !important;
    align-items: center;
    gap: .45rem;
    margin: 0 !important;
    font-size: .85rem;
    color: var(--vs-color-text, #3a4160);
}

.vs-product-card__usp::before {
    content: none !important;
}

.vs-product-card__check {
    color: var(--vs-usp-color);
    flex: 0 0 auto;
}

.vs-product-card__usp-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Vloertype */
.vs-product-card__type {
    margin-top: auto;
    padding-top: .25rem;
    font-size: .8rem;
    color: var(--vs-muted);
}

/* Shortcode-single niet uitrekken */
.vs-product-grid--single {
    grid-template-columns: minmax(0, 320px) !important;
}

@media (max-width: 600px) {
    .vs-product-card__media {
        aspect-ratio: 1 / 1;
    }
}

/* "Gratis staal"-knop op de kaart.
   De titellink legt met een ::after (inset 0, z-index 1) de HELE kaart klikbaar
   naar de productpagina. Deze knop stond daar als enige knop niet bovenop, dus
   een muisklik opende de productpagina in plaats van een staal toe te voegen.
   Zelfde laag als de verlanglijst- en vergelijkknop, die dit al goed hadden. */
.vs-product-card__sample {
    position: relative !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding: 7px 12px !important;
    width: auto !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--vs-color-primary, #4056b4) !important;
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid #d8dce8 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: border-color 0.14s, background 0.14s, color 0.14s !important;
}
.vs-product-card__sample:hover,
.vs-product-card__sample:focus-visible {
    border-color: var(--vs-color-primary, #4056b4) !important;
    background: #f4f6fb !important;
}
.vs-product-card__sample-icon { flex: 0 0 auto; }

/* Review-sterren op de kaart */
.vs-product-card__rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: -2px 0 2px !important;
}
.vs-stars {
    position: relative;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #d8dce3;
    white-space: nowrap;
}
.vs-stars::before {
    content: "★★★★★";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--vs-stars, 0%);
    overflow: hidden;
    color: #f5a623;
    white-space: nowrap;
}
.vs-product-card__rating-count {
    font-size: 12px;
    color: var(--vs-muted, #6c757d);
}

/* Kleur-swatches op de kaart (linken naar dit artikel in die kleur)
 *
 * Eén regel hoog houden. Zes staaltjes van 24 px plus het aantal is 236 px en
 * dat past op de kaart in het archief (296 px bij 1280) en in de tegels van 346
 * bij 768. Op 375 is de kaart nog maar 162 px breed en dan wikkelde de rij naar
 * twee regels (live gemeten: 198 px inhoud, 53 px hoog). Onder 600 px staan er
 * daarom vier kleinere staaltjes: 152 px, dus weer één regel. Dat mag zonder
 * het getal te breken omdat daar het TOTAAL staat en niet het verschil. */
.vs-product-card__swatches {
    position: relative; /* boven de title-link-overlay */
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 2px 0 0;
}
.vs-product-card__swatch {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
    background: #f4f5f7;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px var(--vs-border, #e1e4ec);
    transition: box-shadow .14s ease, transform .14s ease;
}
.vs-product-card__swatch img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border-radius: 0 !important;
}
.vs-product-card__swatch:hover,
.vs-product-card__swatch:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--vs-accent, #4056b4);
}
.vs-product-card__swatch.is-current {
    box-shadow: 0 0 0 2px var(--vs-accent, #4056b4);
}
.vs-product-card__swatch-more {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vs-muted, #6c757d);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .vs-product-card__swatches { gap: 4px; }
    .vs-product-card__swatch { width: 20px !important; height: 20px !important; }
    /* Vijfde en verder weg: het getal ernaast noemt het totaal, dus er gaat geen
       informatie verloren. nth-of-type telt alleen de a-elementen, het getal is
       een span en blijft dus altijd staan. */
    .vs-product-card__swatch:nth-of-type(n+5) { display: none !important; }
    .vs-product-card__swatch-more { font-size: 11px; }
}

/* Kleuren zonder staalfoto's (vrije attributen uit de PPC-import): dan alleen
   het aantal. Zelfde plek en zelfde toon als het staaltjesrijtje. */
.vs-product-card__kleuren {
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--vs-muted, #6c757d) !important;
}

/* Hartje-link in de header (naar de verlanglijst) met teller-badge */
.vs-wishlist-headerlink {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 8px;
    color: #1f2444;
    text-decoration: none !important;
    vertical-align: middle;
    transition: color .14s ease, transform .14s ease;
}
.vs-wishlist-headerlink svg {
    width: 24px;
    height: 24px;
    display: block;
}
.vs-wishlist-headerlink:hover { color: #e3342f; transform: translateY(-1px); }
.vs-wishlist-headerlink__count {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e3342f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    box-sizing: border-box;
}
.vs-wishlist-headerlink__count[hidden] { display: none; }

/* Levertijd-indicator op de kaart (stipje + label) */
.vs-product-card__delivery {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--vs-color-text, #3a4160) !important;
}
.vs-product-card__delivery-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #98a2b3;
}
.vs-product-card__delivery--green .vs-product-card__delivery-dot { background: var(--vs-color-success, #62b959); }
.vs-product-card__delivery--amber .vs-product-card__delivery-dot { background: #e8943a; }
.vs-product-card__delivery--grey .vs-product-card__delivery-dot { background: #98a2b3; }
.vs-product-card__delivery--green { color: #2f7d51 !important; }

/* Adviesprijs-korting-badge op de productkaart. Blijft oranje: dit is precies
   het soort ACTIE waar die kleur sinds 07-08 nog voor gereserveerd is. Via
   --vs-color-sale, zodat de actiekleur op één plek in het thema staat. */
.vs-product-card__korting {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--vs-color-sale, #fa6900);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .2px;
}
/* De naam staat er klein bij; het percentage blijft het element dat je ziet. */
.vs-product-card__korting-naam {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  opacity: .9;
}

/* Balk onderaan de foto bij een klikvloer met geintegreerde ondervloer. Groen
   en niet oranje: dit is een producteigenschap, geen actie. De balk ligt over
   de onderkant van het beeld, net als de sfeerfoto eronder doorloopt. */
.vs-product-card__subfloor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 7px 10px;
    background: var(--vs-color-primary, #1e3a2f);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2px;
    text-align: center;
    pointer-events: none;
}

.vs-product-card__subfloor .vs-product-card__check {
    color: #fff;
    flex: 0 0 auto;
}

/* Het actielabel staat linksonder in het beeld; met de balk erbij zou het
   eronder verdwijnen, dus schuift het een balkhoogte omhoog. */
.vs-product-card__media--subfloor .vs-product-card__labels {
    bottom: 2.9rem;
}

@media (max-width: 640px) {
    .vs-product-card__subfloor {
        padding: 5px 8px;
        font-size: .72rem;
    }

    .vs-product-card__media--subfloor .vs-product-card__labels {
        bottom: 2.4rem;
    }
}

/* Prijspil op smalle schermen. De pil staat op nowrap met een letter van 21px;
   op een kaart van ~161px (twee naast elkaar op een telefoon) past
   "€ 69,50 per stuk" daar niet in en knipte de kaart-overflow de eenheid half
   weg — geen scroll, wel verdwenen tekst (DLV 5c54b32). Kleiner, en de
   eenheid mag naar een tweede regel als het niet past. */
@media (max-width: 420px) {
    .vs-product-card__price-current {
        max-width: 100%;
        padding: 8px 12px 8px 10px;
        font-size: 17px;
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .vs-product-card__price-unit {
        margin-left: 0;
        font-size: .62em;
    }
}