/* moved from /store/assets/css/store.css */

/* Log in link in prijs-melding */
.store-login-link {
    color: #6d00c7;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.18s;
}
.store-login-link:hover {
    color: #220042;
    text-decoration: underline;
}
/* Backorder link styling */
.store-backorder-link {
    color: #6d00c7;
    text-decoration: underline dotted;
    font-size: 0.98em;
    margin-left: 6px;
    cursor: pointer;
    transition: color 0.18s;
}
.store-backorder-link:hover {
    color: #220042;
    text-decoration: underline;
}

/* Prijs verborgen melding */
.store-product-price-hidden {
    color: #6d00c7;
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 0.5em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
.store-lock-icon {
    font-size: 0.95em;
    vertical-align: middle;
    margin-right: 2px;
}
/* Productkaart knoppen naast elkaar */
.store-product-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 10px; /* compactere gap */
    width: 100%;
    margin-top: 1em; /* basisafstand boven knoppen */
    justify-content: center; /* centreer knoppen horizontaal */
}
/* Button visuals are standardized in includes/main.css
   Keep this file free of visual overrides for .store-product-bekijk-btn */
/* Product titel link styling: zwart en links */
.store-product-link {
    text-align: left;
    color: #111;
    text-decoration: none;
    display: block;
}
.store-product-link:visited,
.store-product-link:active,
.store-product-link:hover {
    color: #111;
    text-decoration: none;
}
.store-product-title {
    color: #111;
    font-size: 1.13em;
    font-weight: 600;
    margin: 0.7em 0 0.2em 0;
    text-align: center;
    width: 100%;
    display: block;
}
/* Extra klassen voor productkaart details (voorheen inline styles) */
.store-product-category {
    color: #888;
    font-size: 0.98em;
    margin-bottom: 0.3em;
}
.store-product-description {
    color: #555;
    font-size: 0.97em;
    margin-bottom: 0.7em;
    min-height: 2.2em;
    text-align: center;
}
.store-product-badge {
    background: #6d00c7;
    color: #fff;
    font-size: 0.85em;
    padding: 0.18em 0.7em;
    border-radius: 12px;
    margin-bottom: 0.7em;
    display: inline-block;
}
.store-product-stock {
    font-size: 0.93em;
    margin-bottom: 0.7em;
}
.store-product-delivery {
    font-size: 0.93em;
    color: #555;
    margin-top: -0.2em;
    margin-bottom: 0.3em; /* kleiner zodat knoppen minder naar beneden schuiven */
}
.store-stock-green {
    color: #1ca02c;
    font-weight: 600;
}
.store-stock-orange {
    color: #ff9800;
    font-weight: 600;
}
.store-stock-red {
    color: #e53935;
    font-weight: 600;
}
/* Dropdown menu styling zoals voorbeeld */
.dropdown-menu {
    background: #f7f7fa;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(34,0,66,0.07);
    padding: 10px 0;
    min-width: 170px;
    margin-top: 8px;
    z-index: 100;
    position: absolute;
}
.dropdown-menu li {
    list-style: none;
    padding: 10px 18px;
    color: #222;
    font-size: 1.08em;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.13s;
}
.dropdown-menu li:hover {
    background: #ece6f6;
    color: #6d00c7;
}
.dropdown-menu li:not(:last-child) {
    margin-bottom: 2px;
}
/* Shop pagina CSS */


body {
    font-family: 'Outfit', Arial, sans-serif;
    background: #f7f7fa; /* verwijder gradient achtergrond */
    margin: 0;
    padding: 0;
}

/* Width is governed by .site-container; keep only vertical spacing */
.store-container {
    margin: 2.5rem auto 2rem auto;
    background: transparent; /* geen kaart */
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 2rem 0;
}

.store-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2.2rem;
    color: #220042;
    letter-spacing: 0.5px;
    text-align: left;
}

/* Shop grid breder maken */
/* Shop grid met 4 kolommen */
.store-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    justify-items: stretch;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 300px;
}

/* Productkaart breder */
/* Productkaart breder bij 4 kolommen */
.store-product {
    background: #faf8ff;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(34,0,66,0.07);
    border: 1px solid #ece6f6;
    padding: 1.5rem 2.7rem 1.5rem 2.7rem;
    width: 100%;
    min-width: 0;
    min-height: 420px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.18s, border 0.18s;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.store-product:hover {
    box-shadow: 0 6px 24px rgba(34,0,66,0.13);
    border: 1.5px solid #a084e8;
}

/* Button visuals centralized in includes/main.css for .store-product-button */
/*
   Add-to-cart (winkelwagen) icon button was te klein doordat alleen de kleurstijl werd geërfd.
   We forceren hier een consistente square size (40px mobiel, 44px desktop) en centreren het icoon.
   Hover kleuren blijven uit main.css komen; we voegen alleen structure/sizing + focus ring toe.
*/
.store-product-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important; /* geen extra horizontale padding voor square look */
    border-radius: 8px !important; /* sluit aan bij overige knoppen */
    font-size: 18px !important; /* icoon iets groter dan tekstgrootte */
    line-height: 1 !important;
    cursor: pointer !important; /* toon klik-handje */
    /* Fade effect for background / border / color to align with global .btn behaviour */
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Backorder label styling */
.store-backorder-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #c43d3d;
    margin-left: 4px;
}

/* Disabled state for add-to-cart when no stock */
.store-product-button-disabled,
.store-product-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.store-productpage-cartbtn.store-product-button-disabled {
    background: #555;
    border-color: #777;
    color: #ddd;
}
.store-product-button i { pointer-events: none; }
.store-product-button:focus-visible {
    outline: 2px solid #6d00c7;
    outline-offset: 2px;
}
@media (min-width: 768px) {
    .store-product-button {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important; /* schaal icoon iets op voor desktop */
        border-radius: 10px !important; /* iets ronder voor grotere variant */
    }
}

/* Apply identical fade transitions to other store card action buttons that are not using .btn base */
.store-product-bekijk-btn {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Desktop standaard: toon lange tekst, verberg korte mobiele variant */
.store-product-bekijk-btn .text-desktop { display: inline; }
.store-product-bekijk-btn .text-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
    .store-product-button,
    .store-product-bekijk-btn { transition: none !important; }
}

/* Wanneer er een levertijd regel is, verklein extra verticale ruimte boven de knoppen zodat ze niet zichtbaar verder naar beneden schuiven t.o.v. kaarten zonder levertijd. */
/* Reserveer vaste ruimte voor optionele levertijd zodat knoppen niet verspringen. */
.store-product-meta-block {
    min-height: 2.6em; /* ruimte voor max twee regels (≈2 * 1.2em + kleine marge) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: -0.2em; /* compenseer kleine eerdere top-margin in delivery */
    margin-bottom: 0.35em; /* lichte afstemming naar buttons */
    text-align: center;
}
/* Levertijd tekst: forceer max 2 regels zodat hoogte voorspelbaar blijft */
.store-product-delivery {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* future spec */
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.4em; /* 2 * line-height (≈1.2em) */
}
/* Geen levertijd: behoud dezelfde verticale reservering */
.store-product-meta-block:empty { min-height: 2.6em; }
/* einde .shop-product-image, verwijderde foutieve regels */
/* Productafbeelding netjes schalen en centreren */
.store-product-image {
    width: 100%;
    max-width: 180px;
    max-height: 180px;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 0 auto 1.1rem auto;
    /* Transparante achtergrond zodat PNG transparantie zichtbaar blijft.
       Voorheen: solid #f3f3f7 gaf 'blok' achter alle PNG's op listing.
       Als lichte fallback bij ontbrekende / zeer lichte afbeeldingen kan eventueel
       een gradient of subtle checker via :after worden toegevoegd; nu bewust leeg. */
    background: transparent;
    /* Verwijder radius + shadow om 'lichte rand' effect rond transparante assets weg te nemen. */
    border-radius: 0;
    box-shadow: none;
}
/* Large tablets: 3 columns */
@media (max-width: 1200px) {
    .store-products { grid-template-columns: repeat(3, 1fr); }
}
/* Tablets: 2 columns */
@media (max-width: 900px) {
    .store-products { grid-template-columns: repeat(2, 1fr); }
}
/* Phones: 1 column moved to store.mobile.css */

/* Phones: styles moved to store.mobile.css */

/* ================================ */
/* Store specifieke cart icon size  */
/* ================================ */
/* Op de algemene site is het winkelmand icoon 36x36. In de store context willen we meer touch target en visuele balans met grotere productkaarten. 
     Alleen op >=768px (desktop/tablet landscape) verhogen we naar 44px. Mobile (<=767px) blijft 36px via main.mobile.css. */
@media (min-width: 768px) {
    .header-main .header-right .shop-cart-icon.store-cart-large {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
    }
    .header-main .header-right .shop-cart-icon.store-cart-large i {
        font-size: 20px !important;
    }
    /* Badge herpositioneren (1px verder naar buiten en iets omhoog voor grotere knop) */
    .header-main .header-right .shop-cart-icon.store-cart-large .cart-badge,
    .header-main .cart-badge { /* fallback: badge binnen icon container */
        right: -4px !important;
        top: -4px !important;
    }
}

/* Gebruik in HTML: voeg extra class 'store-cart-large' toe aan het winkelmand element op store pagina's.
     (Alternatief: JS detectie of body.store-page > css body.store-page .shop-cart-icon) */