/* ══════════════════════════════════════════════════════
   Suriname Market – Storefront CSS
   Kleurenschema: Donker groen + goud (Surinaamse vlag-inspiratie)
   ══════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────── */
:root {
    --sm-green:        #1a6b3a;
    --sm-green-dark:   #0f4525;
    --sm-green-light:  #2d9c56;
    --sm-gold:         #e8a000;
    --sm-gold-light:   #f5c13e;
    --sm-red:          #c0392b;
    --sm-white:        #ffffff;
    --sm-gray-50:      #f8f9fa;
    --sm-gray-100:     #f0f2f5;
    --sm-gray-200:     #e4e7ec;
    --sm-gray-400:     #9ca3af;
    --sm-gray-600:     #4b5563;
    --sm-gray-800:     #1f2937;
    --sm-text:         #111827;
    --sm-radius:       10px;
    --sm-radius-lg:    16px;
    --sm-shadow:       0 2px 12px rgba(0,0,0,.10);
    --sm-shadow-lg:    0 8px 40px rgba(0,0,0,.15);
    --sm-transition:   .22s ease;
    --sm-font:         'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset & Base ──────────────────────────────────── */
.sm-homepage *, .sm-homepage *::before, .sm-homepage *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sm-homepage { font-family: var(--sm-font); color: var(--sm-text); line-height: 1.6; }
.sm-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.sm-section   { padding: 72px 0; }

/* ── Buttons ───────────────────────────────────────── */
.sm-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--sm-radius);
    font-family: var(--sm-font); font-size: 15px; font-weight: 600;
    cursor: pointer; border: 2px solid transparent;
    text-decoration: none; transition: var(--sm-transition);
    white-space: nowrap;
}
.sm-btn--primary  { background: var(--sm-green); color: var(--sm-white); border-color: var(--sm-green); }
.sm-btn--primary:hover { background: var(--sm-green-light); border-color: var(--sm-green-light); color: #fff; }
.sm-btn--outline  { background: transparent; color: var(--sm-white); border-color: var(--sm-white); }
.sm-btn--outline:hover { background: rgba(255,255,255,.15); }
.sm-btn--buyer    { background: var(--sm-green); color: #fff; }
.sm-btn--buyer:hover { background: var(--sm-green-light); color: #fff; }
.sm-btn--seller   { background: var(--sm-gold); color: var(--sm-gray-800); }
.sm-btn--seller:hover { background: var(--sm-gold-light); }
.sm-btn--lg { padding: 16px 32px; font-size: 17px; border-radius: 12px; }
.sm-btn--sm { padding: 8px 14px; font-size: 13px; }

/* ── Inputs ────────────────────────────────────────── */
.sm-input { padding: 12px 16px; border: 1.5px solid var(--sm-gray-200); border-radius: var(--sm-radius); font-size: 15px; font-family: var(--sm-font); width: 100%; }
.sm-input:focus { outline: none; border-color: var(--sm-green); }
.sm-input--lg { padding: 14px 20px; font-size: 16px; }

/* ── HERO ──────────────────────────────────────────── */
.sm-hero {
    background: linear-gradient(135deg, var(--sm-green-dark) 0%, var(--sm-green) 60%, var(--sm-green-light) 100%);
    color: var(--sm-white); padding: 80px 20px 60px; position: relative; overflow: hidden;
}
.sm-hero::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.sm-hero__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 60px; position: relative; }
.sm-hero__content { flex: 1; }
.sm-hero__badge { display: inline-block; background: rgba(255,255,255,.15); padding: 6px 16px; border-radius: 999px; font-size: 13px; margin-bottom: 20px; }
.sm-hero__title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.sm-hero__accent { color: var(--sm-gold-light); }
.sm-hero__sub { font-size: 17px; opacity: .88; margin-bottom: 32px; line-height: 1.7; }
.sm-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.sm-hero__stats { display: flex; gap: 32px; }
.sm-hero__stat { text-align: center; }
.sm-hero__stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--sm-gold-light); }
.sm-hero__stat span { font-size: 13px; opacity: .8; }

/* Hero phone illustration */
.sm-hero__image { flex: 0 0 280px; }
.sm-hero__phone { background: rgba(255,255,255,.12); border-radius: 24px; padding: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); }
.sm-phone-mockup { text-align: center; }
.sm-phone-bar  { width: 60px; height: 6px; background: rgba(255,255,255,.3); border-radius: 3px; margin: 0 auto 16px; }
.sm-phone-product { font-size: 48px; margin-bottom: 12px; }
.sm-phone-text { font-size: 15px; margin-bottom: 8px; }
.sm-phone-check { font-size: 32px; color: var(--sm-gold-light); }

/* Hero zoekbalk */
.sm-hero__search { max-width: 700px; margin: 40px auto 0; position: relative; }
.sm-search-bar { display: flex; align-items: center; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sm-shadow-lg); }
.sm-search-bar__icon { padding: 0 16px; color: var(--sm-gray-400); font-size: 18px; }
.sm-search-bar__input { flex: 1; border: none; padding: 16px 8px; font-size: 15px; font-family: var(--sm-font); color: var(--sm-text); outline: none; }
.sm-search-bar__btn { border-radius: 0 12px 12px 0; }
.sm-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0 0 12px 12px; box-shadow: var(--sm-shadow-lg); z-index: 100; border: 1px solid var(--sm-gray-200); max-height: 360px; overflow-y: auto; }
.sm-search-result-item { display: flex; justify-content: space-between; padding: 12px 20px; text-decoration: none; color: var(--sm-text); border-bottom: 1px solid var(--sm-gray-100); transition: background var(--sm-transition); }
.sm-search-result-item:hover { background: var(--sm-gray-50); }
.sm-search-result-item__price { color: var(--sm-green); font-weight: 700; }
.sm-search-no-results { padding: 16px 20px; color: var(--sm-gray-400); }

/* ── Trust Bar ─────────────────────────────────────── */
.sm-trust-bar { background: var(--sm-gray-800); color: var(--sm-white); padding: 18px 20px; }
.sm-trust-bar__items { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; }
.sm-trust-bar__item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sm-trust-bar__item i { color: var(--sm-gold-light); font-size: 18px; }

/* ── Section headers ───────────────────────────────── */
.sm-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.sm-section__header--center { flex-direction: column; text-align: center; gap: 12px; }
.sm-section__title { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; color: var(--sm-gray-800); }
.sm-section__desc { color: var(--sm-gray-600); font-size: 16px; max-width: 600px; }
.sm-section__link { color: var(--sm-green); font-weight: 600; text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sm-section__link:hover { color: var(--sm-green-light); }

/* ── Categories Grid ───────────────────────────────── */
.sm-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.sm-category-card { display: flex; flex-direction: column; align-items: center; padding: 24px 12px; background: var(--sm-white); border-radius: var(--sm-radius-lg); border: 1.5px solid var(--sm-gray-200); text-decoration: none; color: var(--sm-text); transition: var(--sm-transition); position: relative; }
.sm-category-card:hover { border-color: var(--sm-green); transform: translateY(-3px); box-shadow: var(--sm-shadow); }
.sm-category-card__icon { width: 64px; height: 64px; background: var(--sm-gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sm-category-card__icon i { font-size: 26px; color: var(--sm-green); }
.sm-category-card__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sm-category-card__name { font-size: 13px; font-weight: 600; text-align: center; }
.sm-category-card--placeholder { opacity: .65; cursor: default; }
.sm-category-card--placeholder:hover { transform: none; box-shadow: none; border-color: var(--sm-gray-200); }
.sm-category-card__soon { font-size: 10px; font-weight: 700; color: var(--sm-gold); background: #fff8e1; padding: 2px 8px; border-radius: 999px; margin-top: 6px; }

/* ── Product Grid ──────────────────────────────────── */
.sm-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.sm-products-grid--4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.sm-product-card { background: var(--sm-white); border-radius: var(--sm-radius-lg); overflow: hidden; border: 1.5px solid var(--sm-gray-200); transition: var(--sm-transition); position: relative; display: flex; flex-direction: column; }
.sm-product-card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow-lg); border-color: var(--sm-green); }
.sm-product-card__badge { position: absolute; top: 12px; left: 12px; background: var(--sm-red); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; z-index: 1; }
.sm-product-card__img-wrap { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sm-gray-100); }
.sm-product-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sm-product-card:hover .sm-product-card__img-wrap img { transform: scale(1.06); }
.sm-product-card__no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--sm-gray-400); font-size: 36px; }
.sm-product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sm-product-card__store { font-size: 12px; color: var(--sm-gray-400); }
.sm-product-card__name { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--sm-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-product-card__pricing { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.sm-product-card__price { font-size: 16px; font-weight: 800; color: var(--sm-green); }
.sm-product-card__old-price { font-size: 13px; color: var(--sm-gray-400); text-decoration: line-through; }

/* ── How it Works ──────────────────────────────────── */
.sm-how-it-works { background: var(--sm-gray-50); }
.sm-steps { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.sm-step { flex: 1; min-width: 180px; text-align: center; padding: 32px 20px; }
.sm-step__num { width: 40px; height: 40px; background: var(--sm-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; margin: 0 auto 16px; }
.sm-step__icon { font-size: 36px; color: var(--sm-green); margin-bottom: 16px; }
.sm-step__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.sm-step__desc { font-size: 14px; color: var(--sm-gray-600); line-height: 1.6; }
.sm-step__arrow { display: flex; align-items: center; padding-top: 80px; color: var(--sm-green); font-size: 22px; flex: 0; }

/* ── Benefits ──────────────────────────────────────── */
.sm-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sm-benefits-col { background: var(--sm-white); border-radius: var(--sm-radius-lg); overflow: hidden; box-shadow: var(--sm-shadow); }
.sm-benefits-header { display: flex; align-items: center; gap: 16px; padding: 28px 32px; color: var(--sm-white); }
.sm-benefits-header--buyer { background: linear-gradient(135deg, var(--sm-green-dark), var(--sm-green)); }
.sm-benefits-header--seller { background: linear-gradient(135deg, #7a5800, var(--sm-gold)); }
.sm-benefits-header i { font-size: 32px; }
.sm-benefits-header h2 { font-size: 20px; font-weight: 800; }
.sm-benefits-list { list-style: none; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.sm-benefits-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; }
.sm-benefits-list li i { color: var(--sm-green); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.sm-benefits-col .sm-btn { margin: 0 32px 28px; }

/* ── Become Vendor CTA ─────────────────────────────── */
.sm-become-vendor-cta { background: linear-gradient(135deg, var(--sm-green-dark) 0%, var(--sm-green) 100%); color: #fff; }
.sm-become-vendor-box { display: flex; align-items: center; gap: 60px; }
.sm-become-vendor-box__content { flex: 1; }
.sm-become-vendor-box__content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; }
.sm-become-vendor-box__content p { font-size: 16px; opacity: .88; margin-bottom: 24px; line-height: 1.7; }
.sm-become-vendor-box__perks { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.sm-become-vendor-box__perks li { font-size: 15px; }
.sm-seller-mockup { background: rgba(255,255,255,.12); border-radius: 16px; padding: 24px; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); min-width: 240px; }
.sm-seller-mockup__screen { }
.sm-seller-mockup__topbar { font-weight: 700; font-size: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.sm-seller-mockup__stat { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.sm-seller-mockup__stat:last-child { border-bottom: none; }

/* ── Payment Methods ───────────────────────────────── */
.sm-payment-section { background: var(--sm-gray-50); }
.sm-payment-methods { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
.sm-payment-method { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; padding: 24px 32px; border-radius: var(--sm-radius-lg); border: 1.5px solid var(--sm-gray-200); min-width: 120px; }
.sm-payment-method i { font-size: 32px; color: var(--sm-green); }
.sm-payment-method span { font-size: 13px; font-weight: 600; color: var(--sm-gray-600); }

/* ── Newsletter ────────────────────────────────────── */
.sm-newsletter-section { background: var(--sm-gray-800); color: #fff; }
.sm-newsletter { text-align: center; }
.sm-newsletter h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }
.sm-newsletter p { opacity: .8; margin-bottom: 28px; }
.sm-newsletter__form { display: flex; justify-content: center; gap: 12px; max-width: 480px; margin: 0 auto; }
.sm-newsletter__form .sm-input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.sm-newsletter__form .sm-input::placeholder { color: rgba(255,255,255,.5); }

/* ── Coming Soon ───────────────────────────────────── */
.sm-coming-soon { text-align: center; padding: 60px 20px; }
.sm-coming-soon__icon { font-size: 64px; margin-bottom: 24px; }
.sm-coming-soon h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 16px; }
.sm-coming-soon p { font-size: 16px; color: var(--sm-gray-600); margin-bottom: 32px; line-height: 1.7; }
.sm-coming-soon__form { display: flex; justify-content: center; gap: 12px; max-width: 420px; margin: 0 auto; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
    .sm-hero__inner { flex-direction: column; gap: 32px; }
    .sm-hero__image { display: none; }
    .sm-benefits-grid { grid-template-columns: 1fr; }
    .sm-become-vendor-box { flex-direction: column; gap: 32px; }
    .sm-steps { flex-direction: column; }
    .sm-step__arrow { display: none; }
}

@media (max-width: 600px) {
    .sm-hero { padding: 48px 16px 40px; }
    .sm-hero__title { font-size: 1.8rem; }
    .sm-section { padding: 48px 0; }
    .sm-section__header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sm-categories-grid { grid-template-columns: repeat(3, 1fr); }
    .sm-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sm-trust-bar__items { flex-direction: column; align-items: flex-start; }
    .sm-newsletter__form, .sm-coming-soon__form { flex-direction: column; }
    .sm-hero__stats { gap: 16px; }
    .sm-hero__actions { flex-direction: column; }
}

/* ── Shop pagina extra ──────────────────────────────── */
.sm-shop-wrap { max-width:1280px; margin:0 auto; padding:24px 0; }
.sm-shop-filters { margin-bottom:24px; }
.sm-shop-filters__row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.sm-shop-count { font-size:13px; color:#6b7280; margin-left:auto; }
.sm-sf-input { padding:10px 14px; border:1.5px solid #e4e7ec; border-radius:8px; font-size:14px; outline:none; font-family:inherit; }
.sm-sf-input:focus { border-color:#1a6b3a; }
.sm-sf-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; text-decoration:none; font-family:inherit; transition:.2s; }
.sm-sf-btn--primary { background:#1a6b3a; color:#fff; }
.sm-sf-btn--primary:hover { background:#2d9c56; color:#fff; }
.sm-sf-btn--ghost { background:transparent; color:#6b7280; border:1.5px solid #e4e7ec; }
.sm-sf-btn--sm { padding:7px 14px; font-size:13px; }
.sm-sf-btn--lg { padding:14px 28px; font-size:16px; }
.sm-sf-btn--full { width:100%; justify-content:center; }
.sm-pagination { display:flex; gap:6px; margin-top:24px; }
.sm-pagination__btn { padding:8px 14px; border-radius:6px; border:1.5px solid #e4e7ec; background:#fff; text-decoration:none; color:#111; font-size:13px; }
.sm-pagination__btn.active { background:#1a6b3a; color:#fff; border-color:#1a6b3a; }
.sm-sf-empty { text-align:center; padding:60px 20px; color:#6b7280; }
.sm-sf-empty i { font-size:48px; display:block; margin-bottom:16px; }
.sm-sf-empty h3 { color:#111; margin-bottom:8px; }

/* ── Cart wrap ─────────────────────────────────────── */
.sm-cart-wrap { max-width:1100px; margin:0 auto; padding:24px 0; }
.sm-cart-wrap h2 { font-size:1.4rem; font-weight:800; margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.sm-esc-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; }
.sm-esc-layout__main { display:flex; flex-direction:column; gap:16px; }
.sm-esc-layout__side { }
.sm-esc-card { background:#fff; border-radius:10px; border:1.5px solid #e4e7ec; overflow:hidden; }
.sm-esc-cart-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid #e4e7ec; }
.sm-esc-cart-row:last-child { border-bottom:none; }
.sm-esc-cart-row__img { width:60px; height:60px; background:#f0f2f5; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#9ca3af; flex-shrink:0; }
.sm-esc-cart-row__info { flex:1; }
.sm-esc-cart-row__name { font-size:14px; font-weight:600; display:block; }
.sm-esc-cart-row__price { font-size:12px; color:#6b7280; }
.sm-esc-cart-row__qty { display:flex; align-items:center; }
.sm-qty-btn { width:32px; height:32px; background:#f0f2f5; border:none; cursor:pointer; font-size:16px; border-radius:4px; }
.sm-qty-input { width:44px; height:32px; border:1.5px solid #e4e7ec; text-align:center; font-size:14px; outline:none; }
.sm-esc-cart-row__line { min-width:90px; text-align:right; font-size:14px; }
.sm-esc-cart-row__remove { background:none; border:none; cursor:pointer; color:#9ca3af; padding:6px; font-size:14px; border-radius:4px; }
.sm-esc-cart-row__remove:hover { color:#c0392b; background:#fee2e2; }
.sm-esc-summary { padding:20px; }
.sm-esc-summary__title { font-size:15px; font-weight:800; margin:0 0 16px; }
.sm-esc-summary__row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
.sm-esc-summary__row--total { font-size:16px; }
.sm-esc-summary__row--total strong { color:#1a6b3a; font-size:20px; }
.sm-esc-summary__divider { border:none; border-top:1.5px solid #e4e7ec; margin:10px 0; }
.sm-esc-trust-box { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:12px 14px; display:flex; gap:10px; margin:16px 0; }
.sm-esc-trust-box i { color:#1a6b3a; font-size:18px; flex-shrink:0; }
.sm-esc-trust-box strong { display:block; font-size:13px; color:#1a6b3a; margin-bottom:2px; }
.sm-esc-trust-box p { margin:0; font-size:12px; color:#166534; }
@media(max-width:768px){ .sm-esc-layout{grid-template-columns:1fr;} }


/* Storefront cart/store fixes */
.sm-product-card__store{ text-decoration:none; display:inline-flex; align-items:center; gap:5px; color:#7b8794; font-size:12px; }
.sm-product-card__store:hover{ color:var(--sm-green); text-decoration:underline; }
.sm-product-card .sm-add-to-cart{ width:100%; justify-content:center; min-height:38px; white-space:nowrap; }
.sm-floating-cart{ position:fixed; right:18px; top:70px; z-index:9999; display:flex; align-items:center; gap:8px; background:var(--sm-green); color:#fff; text-decoration:none; padding:12px 16px; border-radius:999px; box-shadow:0 10px 28px rgba(0,0,0,.25); font-weight:800; }
.sm-floating-cart:hover{ color:#fff; transform:translateY(-2px); }
.sm-floating-cart__count{ background:#ffb703; color:#111; border-radius:999px; min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; padding:0 6px; }
@media(max-width:600px){ .sm-floating-cart{ left:auto; right:18px; bottom:auto; top:70px; justify-content:center; border-radius:14px; } body{ padding-top:0; } .sm-product-card .sm-add-to-cart{ font-size:13px; padding-left:8px; padding-right:8px; } }


/* Veilige vaste winkelwagen knop */
.sm-floating-cart{position:fixed!important;right:18px!important;top:70px!important;bottom:auto!important;z-index:999999!important;display:inline-flex!important;align-items:center!important;gap:8px!important;background:#16763f!important;color:#fff!important;text-decoration:none!important;padding:12px 16px!important;border-radius:999px!important;box-shadow:0 10px 28px rgba(0,0,0,.25)!important;font-weight:800!important;line-height:1!important}
.sm-floating-cart i,.sm-floating-cart span{color:#fff!important}.sm-floating-cart__count{background:#ffb703!important;color:#111!important;border-radius:999px!important;min-width:22px!important;height:22px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;padding:0 6px!important}
@media(max-width:600px){.sm-floating-cart{left:auto!important;right:18px!important;top:70px!important;bottom:auto!important;border-radius:999px!important;min-height:46px!important}}

/* ══════════════════════════════════════════════════════
   RESPONSIVE FIXES – alle breakpoints compleet
   ══════════════════════════════════════════════════════ */

/* ── Shop filters op mobiel ─────────────────────────── */
@media (max-width:600px) {
    .sm-shop-wrap { padding:16px 0; }
    .sm-shop-filters__row { flex-direction:column; align-items:stretch; }
    .sm-shop-filters__row .sm-sf-input,
    .sm-shop-filters__row select,
    .sm-shop-filters__row .sm-sf-btn { width:100%; }
    .sm-shop-count { margin-left:0; }

    /* Producten grid: 2 kolommen op mobiel */
    .sm-products-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .sm-product-card__body { padding:10px; }
    .sm-product-card__name { font-size:13px; }
    .sm-product-card__price { font-size:14px; }

    /* Pagination: groter touch target */
    .sm-pagination { flex-wrap:wrap; gap:4px; }
    .sm-pagination__btn { padding:10px 14px; font-size:14px; min-width:44px; text-align:center; }

    /* Cart rijen op mobiel */
    .sm-esc-cart-row { flex-wrap:wrap; gap:8px; padding:12px; }
    .sm-esc-cart-row__info { flex:1 1 100%; }
    .sm-esc-cart-row__qty { order:2; }
    .sm-esc-cart-row__line { order:3; margin-left:auto; }
    .sm-esc-cart-row__remove { order:4; }

    /* Product detail */
    .sm-pd-layout { grid-template-columns:1fr; }
    .sm-pd-main-img img { height:260px; }
    .sm-pd-title { font-size:1.3rem; }
    .sm-pd-add-to-cart { flex-wrap:wrap; }
    .sm-pd-add-to-cart .sm-sf-btn--lg { width:100%; }
}

@media (max-width:400px) {
    /* 1 kolom op zeer kleine schermen */
    .sm-products-grid { grid-template-columns:1fr; }
    .sm-categories-grid { grid-template-columns:repeat(3,1fr); }
}

/* ── Homepage categorie grid minimum ────────────────── */
@media (max-width:480px) {
    .sm-categories-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
    .sm-category-card { padding:12px 8px; }
    .sm-category-card__icon { font-size:24px; }
    .sm-category-card span { font-size:11px; }
}

/* ── Winkelwagen samenvatting mobiel ────────────────── */
@media (max-width:768px) {
    .sm-cart-wrap { padding:16px 0; }
    .sm-cart-wrap h2 { font-size:1.1rem; }
    .sm-esc-summary { padding:16px; }
}

/* ── Top knoppen container ───────────────────────────── */
.sm-top-buttons {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.sm-top-buttons .sm-floating-cart,
.sm-top-buttons .sm-floating-account {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}
@media(max-width:600px) {
    .sm-top-buttons {
        top: 10px !important;
        right: 10px !important;
        gap: 6px !important;
    }
    .sm-top-buttons .sm-floating-account span { display:none !important; }
    .sm-top-buttons .sm-floating-cart span { display:none !important; }
}

/* ══════════════════════════════════════════════════════
   WINKEL PAGINA – NETTE OPMAAK
   ══════════════════════════════════════════════════════ */

/* ── Winkel header ──────────────────────────────────── */
.sm-shop-wrap { max-width:1280px; margin:0 auto; padding:24px 20px 60px; }
.sm-shop-header { margin-bottom:20px; }
.sm-shop-header__title { font-size:1.5rem; font-weight:800; margin:0 0 4px; color:#111827; }
.sm-shop-header__title em { font-style:normal; color:#1a6b3a; }
.sm-shop-header__count { font-size:13px; color:#6b7280; }

/* ── Filter balk – netjes als één rij ───────────────── */
.sm-shop-filters-bar { 
    background:#fff; 
    border:1px solid #e4e7ec; 
    border-radius:12px; 
    padding:12px 16px; 
    margin-bottom:20px;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.sm-shop-filters-form { 
    display:flex; 
    gap:10px; 
    align-items:center; 
    flex-wrap:wrap; 
}
.sm-shop-search-wrap { 
    flex:1; 
    min-width:200px;
    position:relative; 
    display:flex; 
    align-items:center;
}
.sm-shop-search-icon { 
    position:absolute; 
    left:12px; 
    color:#9ca3af; 
    font-size:14px;
    pointer-events:none;
}
.sm-shop-search-input { 
    width:100%; 
    padding:9px 12px 9px 36px; 
    border:1.5px solid #e4e7ec; 
    border-radius:8px; 
    font-size:14px; 
    outline:none;
    transition:border-color .2s;
    font-family:inherit;
}
.sm-shop-search-input:focus { border-color:#1a6b3a; }
.sm-shop-search-clear {
    position:absolute;
    right:10px;
    background:none;
    border:none;
    font-size:18px;
    color:#9ca3af;
    cursor:pointer;
    padding:0;
    line-height:1;
}
.sm-shop-cats-wrap select,
.sm-shop-cat-select { 
    padding:9px 12px; 
    border:1.5px solid #e4e7ec; 
    border-radius:8px; 
    font-size:14px; 
    outline:none; 
    background:#fff;
    cursor:pointer;
    font-family:inherit;
}
.sm-shop-search-btn { 
    padding:9px 18px; 
    background:#1a6b3a; 
    color:#fff; 
    border:none; 
    border-radius:8px; 
    font-size:14px; 
    font-weight:600; 
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    font-family:inherit;
}
.sm-shop-search-btn:hover { background:#2d9c56; }
.sm-shop-clear-btn { 
    padding:9px 14px; 
    background:#f3f4f6; 
    color:#6b7280; 
    border-radius:8px; 
    font-size:14px; 
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    font-family:inherit;
}
.sm-shop-clear-btn:hover { background:#e5e7eb; color:#374151; }

/* ── Categorie chips ────────────────────────────────── */
.sm-shop-cat-chips { 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap; 
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #f3f4f6;
}
.sm-cat-chip { 
    padding:5px 14px; 
    background:#f3f4f6; 
    color:#374151; 
    border-radius:999px; 
    font-size:13px; 
    font-weight:600;
    text-decoration:none;
    transition:all .15s;
    white-space:nowrap;
}
.sm-cat-chip:hover { background:#e5e7eb; color:#111; }
.sm-cat-chip.active { background:#1a6b3a; color:#fff; }

/* ── Product badges ─────────────────────────────────── */
.sm-product-card__badges { 
    position:absolute; 
    top:8px; 
    left:8px; 
    display:flex; 
    flex-direction:column; 
    gap:4px;
    z-index:2;
}
.sm-product-card__badge { 
    display:inline-block;
    padding:3px 8px; 
    border-radius:6px; 
    font-size:11px; 
    font-weight:700; 
    line-height:1.3;
}
.sm-product-card__badge--sale { 
    background:#ef4444; 
    color:#fff; 
}
.sm-product-card__badge--out { 
    background:#6b7280; 
    color:#fff; 
}
.sm-product-card__badge--featured { 
    background:#f59e0b; 
    color:#fff; 
}

/* ── Productkaart verbeteringen ─────────────────────── */
.sm-product-card { 
    position:relative;
    background:#fff; 
    border:1px solid #e4e7ec; 
    border-radius:12px; 
    overflow:hidden;
    transition:all .2s;
    display:flex;
    flex-direction:column;
}
.sm-product-card:hover { 
    box-shadow:0 8px 24px rgba(0,0,0,.1); 
    transform:translateY(-2px);
    border-color:#d1d5db;
}
.sm-product-card__img-wrap { 
    display:block; 
    aspect-ratio:1/1; 
    overflow:hidden;
    background:#f8fafc;
}
.sm-product-card__img-wrap img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    transition:transform .3s;
}
.sm-product-card:hover .sm-product-card__img-wrap img { 
    transform:scale(1.04); 
}
.sm-product-card__no-img { 
    width:100%; 
    height:100%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:48px; 
    color:#d1d5db;
}
.sm-product-card__body { 
    padding:12px; 
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
}
.sm-product-card__store { 
    font-size:11px; 
    color:#6b7280; 
    display:flex; 
    align-items:center; 
    gap:4px;
    text-decoration:none;
}
.sm-product-card__name { 
    font-size:14px; 
    font-weight:700; 
    color:#111827; 
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.sm-product-card__pricing { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    flex-wrap:wrap;
}
.sm-product-card__price { 
    font-size:16px; 
    font-weight:800; 
    color:#1a6b3a; 
}
.sm-product-card__old-price { 
    font-size:13px; 
    color:#9ca3af; 
    text-decoration:line-through; 
}
.sm-product-card__stock { 
    font-size:12px; 
    color:#6b7280;
}
.sm-add-to-cart { 
    margin-top:auto;
    width:100%; 
    padding:9px; 
    background:#1a6b3a; 
    color:#fff; 
    border:none; 
    border-radius:8px; 
    font-size:13px; 
    font-weight:700; 
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:.2s;
    font-family:inherit;
}
.sm-add-to-cart:hover { background:#2d9c56; }
.sm-add-to-cart:disabled { background:#d1d5db; cursor:not-allowed; }

/* ── Uitverkocht staat ──────────────────────────────── */
.sm-product-card--out .sm-product-card__img-wrap { opacity:.6; }
.sm-product-card--out .sm-add-to-cart { 
    background:#6b7280; 
    cursor:not-allowed;
}

/* ── Responsive shop ────────────────────────────────── */
@media(max-width:768px) {
    .sm-shop-wrap { padding:16px 12px 40px; }
    .sm-shop-filters-form { gap:8px; }
    .sm-shop-search-wrap { min-width:100%; }
    .sm-shop-cats-wrap { display:none; } /* verberg dropdown op mobiel, gebruik chips */
    .sm-shop-search-btn { padding:9px 14px; }
    .sm-shop-cat-chips { gap:6px; }
    .sm-cat-chip { font-size:12px; padding:4px 10px; }
}

@media(max-width:480px) {
    .sm-products-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .sm-product-card__name { font-size:13px; }
    .sm-product-card__price { font-size:15px; }
    .sm-product-card__body { padding:10px; }
}



/* ══════════════════════════════════════════════════════
   SURINAME MARKET NAVBAR – EBAY STIJL
   ══════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
.sm-homepage { overflow-x: hidden; width: 100%; }

.sm-nav-header {
    position: sticky;
    top: 0;
    z-index: 9000;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ── Rij 1: Top utility bar ─────────────────────────── */
.sm-nav-top {
    background: #0f4525;
    color: rgba(255,255,255,.85);
    font-size: 12px;
    padding: 5px 0;
    width: 100%;
}
.sm-nav-top__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sm-nav-top__left { font-size: 12px; }
.sm-nav-top__left strong { color: #fff; }
.sm-nav-top__right { display: flex; align-items: center; gap: 14px; }
.sm-nav-top__link { color: rgba(255,255,255,.85); text-decoration: none; font-size: 12px; }
.sm-nav-top__link:hover { color: #fff; text-decoration: underline; }
.sm-nav-top__link--bold { font-weight: 700; color: #f5c13e; }
.sm-nav-top__link--bold:hover { color: #fde68a; }

/* ── Rij 2: Logo + Zoekbalk + Cart ─────────────────── */
.sm-nav-main {
    background: #1a6b3a;
    padding: 10px 0;
    width: 100%;
}
.sm-nav-main__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Logo */
.sm-nav-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}
.sm-nav-logo__icon { font-size: 24px; line-height: 1; }
.sm-nav-logo__text {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
}

/* Zoekbalk */
.sm-nav-search {
    flex: 1;
    min-width: 0;
    position: relative;
}
.sm-nav-search__bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    width: 100%;
}
.sm-nav-search__input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    background: transparent;
}
.sm-nav-search__btn {
    padding: 10px 18px;
    background: #f5c13e;
    color: #0f4525;
    border: none;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
}
.sm-nav-search__btn:hover { background: #e8a000; }

/* Zoekresultaten */
.sm-nav-search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e4e7ec;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    max-height: 360px;
    overflow-y: auto;
}
.sm-nav-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #111827;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.sm-nav-result:hover { background: #f9fafb; }
.sm-nav-result:last-child { border-bottom: none; }
.sm-nav-result__price { margin-left: auto; font-weight: 700; color: #1a6b3a; white-space: nowrap; }

/* Winkelwagen */
.sm-nav-cart {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: .2s;
}
.sm-nav-cart:hover { background: rgba(255,255,255,.25); }
.sm-nav-cart i { font-size: 15px; }
.sm-nav-cart__count {
    background: #f5c13e;
    color: #0f4525;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    padding: 0 5px;
}

/* Hamburger */
.sm-nav-hamburger {
    display: none;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 8px 10px;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Rij 3: Categorie balk ──────────────────────────── */
.sm-nav-cats {
    background: #fff;
    border-bottom: 2px solid #e4e7ec;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
}
.sm-nav-cats::-webkit-scrollbar { display: none; }
.sm-nav-cats__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.sm-nav-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 12px;
    text-decoration: none;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sm-nav-cat:hover { color: #1a6b3a; border-bottom-color: #1a6b3a; }
.sm-nav-cat--all { color: #1a6b3a; font-weight: 700; border-right: 1px solid #e4e7ec; }

/* ── Mobiel menu ────────────────────────────────────── */
.sm-nav-mobile {
    background: #fff;
    border-top: 1px solid #e4e7ec;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}
.sm-nav-mobile__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    text-decoration: none;
    color: #374151;
    font-size: 15px;
    border-bottom: 1px solid #f3f4f6;
    font-weight: 500;
}
.sm-nav-mobile__link i { color: #1a6b3a; width: 18px; text-align: center; }
.sm-nav-mobile__link:hover { background: #f9fafb; }
.sm-nav-mobile__link--cat { font-size: 14px; padding: 10px 20px 10px 32px; }
.sm-nav-mobile__cats { border-top: 2px solid #f3f4f6; }

/* Verberg zwevende groene balk op homepage */
.sm-homepage + * .smgm-menu,
body:has(.sm-homepage) .smgm-menu { display: none !important; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .sm-nav-top { display: none; }
    .sm-nav-cats { display: none; }
    .sm-nav-cart__label { display: none; }
    .sm-nav-main__inner { gap: 8px; padding: 0 12px; }
    .sm-nav-logo__text { font-size: 15px; }
    .sm-nav-hamburger { display: flex; }
    .sm-nav-cart { padding: 9px 12px; }
    .sm-search-btn-text { display: none; }
    .sm-nav-search__btn { padding: 10px 14px; border-radius: 0 28px 28px 0; }
}

@media (max-width: 480px) {
    .sm-nav-main { padding: 8px 0; }
    .sm-nav-logo__icon { font-size: 20px; }
    .sm-nav-logo__text { font-size: 13px; }
    .sm-nav-search__input { padding: 9px 12px; font-size: 14px; }
    .sm-nav-search__btn { padding: 9px 12px; }
}