/* ============================================================
   bioyougu.rbn-solutions.com — mobile-first stylesheet
   Default = phone (≥320px). Scale-up via min-width:
     ≥600px tablet · ≥900px desktop · ≥1200px wide.
   Class-namen ongewijzigd t.o.v. legacy; visuele stijl identiek.
   ============================================================ */

/* ===== 1. Design tokens =================================== */
:root {
    /* Brand — bright lime + deep forest green, organic-feeling */
    --brand:        #4d8b3a;        /* hoofdmerk-groen, leesbaar op wit */
    --brand-dark:   #1f5f3f;        /* forest, voor hover & headings */
    --brand-soft:   #ecf5e3;        /* pale tint, voor backgrounds */
    --lime:         #a8d63a;        /* bright lime — accent / gradient-stop */
    --lime-soft:    #f0f8d8;        /* lime tint */
    --forest:       #0d4a31;        /* deepest accent */

    /* Price stays red — CN e-commerce conventie */
    --price:        #d32f2f;
    --price-old:    #999;

    /* Complementaire accenten */
    --accent:       #1a7c3c;        /* organic-green (badges, free-ship) */
    --warn:         #f59e0b;        /* amber (manjian-banner) */
    --fire:         #ff6a45;        /* flash-sale gradient stop */
    --gold:         #d4a015;        /* coupon-chip gold */

    /* Surfaces */
    --bg:           #fafafa;
    --surface:      #ffffff;
    --surface-2:    #f4f6f0;        /* lichtelijk groen-getint */
    --border:       #e1e6dc;
    --border-soft:  #eef1ea;

    --fg:           #1f2417;        /* warm zwart met groene undertoon */
    --fg-soft:      #4d544a;
    --muted:        #7c8475;

    --radius:       8px;
    --radius-sm:    4px;
    --maxw:         1200px;

    --shadow:       0 1px 3px rgb(13 74 49 / 0.05), 0 4px 14px rgb(13 74 49 / 0.04);
    --shadow-hover: 0 4px 12px rgb(13 74 49 / 0.10), 0 12px 28px rgb(13 74 49 / 0.08);

    /* Gradient tokens (gebruikt door brand-mark, buttons, hero, badges) */
    --grad-brand:   linear-gradient(135deg, var(--lime) 0%, var(--brand) 50%, var(--brand-dark) 100%);
    --grad-mark:    linear-gradient(135deg, var(--brand) 0%, var(--forest) 100%);
    --grad-hero:    linear-gradient(135deg, var(--lime-soft) 0%, #fffdf3 55%, #faf3e2 100%);
    --grad-button:  linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    --grad-fire:    linear-gradient(135deg, #ff7a18 0%, #af002d 100%);
    --grad-gold:    linear-gradient(135deg, #ffe9b3 0%, #d4a015 100%);
    --grad-mesh:    radial-gradient(at 20% 10%, var(--lime-soft) 0%, transparent 45%),
                    radial-gradient(at 80% 90%, #fff6e0 0%, transparent 50%),
                    var(--bg);

    --font-zh: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
    --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --tap:          44px;
    --pad-x:        14px;
}
@media (min-width: 900px) { :root { --pad-x: 16px; } }

/* ===== 2. Reset & base ==================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-zh), var(--font-en);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
body[data-lang="en"] { font-family: var(--font-en), var(--font-zh); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ===== 3. Page-container ================================== */
.topbar-inner, .header-main, .header-nav, .service-strip-inner,
.footer-grid, .footer-bottom, main.page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}
main.page {
    padding-top: 14px;
    padding-bottom: 40px;
    min-height: 60vh;
}
@media (min-width: 900px) {
    main.page { padding-top: 20px; padding-bottom: 60px; }
}

/* ===== 4. Demo banner (fixed top) ========================= */
.demo-banner {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 200;
    background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%);
    color: white;
    font-size: 12px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}
.demo-banner-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 7px 12px;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px;
    line-height: 1.3;
}
.demo-banner-icon { font-size: 14px; }
.demo-banner strong { font-weight: 700; letter-spacing: 0.5px; }
.demo-banner-text { display: none; }
.demo-banner-link {
    color: white !important;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.5);
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
    font-size: 11px;
}
/* padding-top wordt door JS gezet op exacte demo-banner height
   via --demo-banner-h CSS-var. Fallback waarden zijn ruwe schattingen
   die alleen pre-JS gebruikt worden. */
body.has-demo-banner { padding-top: var(--demo-banner-h, 34px); }
@media (min-width: 600px) {
    .demo-banner { font-size: 13px; }
    .demo-banner-inner { padding: 9px 16px; gap: 10px; }
    .demo-banner-text { display: inline; flex: 1; opacity: 0.95; }
    body.has-demo-banner { padding-top: var(--demo-banner-h, 38px); }
}

/* ===== 5. Header ========================================== */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--demo-banner-h, 34px);
    z-index: 50;
}
@media (min-width: 600px) { .site-header { top: var(--demo-banner-h, 38px); } }

.topbar {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    font-size: 11px;
    color: var(--fg-soft);
}
.topbar-inner {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 30px; gap: 8px;
}
.topbar-msg {
    flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-links { display: flex; gap: 6px; align-items: center; }
.topbar-links .sep { color: var(--border); }
.lang-toggle {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 10px;
}
@media (min-width: 600px) {
    .topbar { font-size: 12px; }
    .topbar-inner { min-height: 32px; }
    .topbar-links { gap: 8px; }
    .lang-toggle { font-size: 11px; padding: 2px 8px; }
}

.header-main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px;
    align-items: center;
    padding-top: 10px; padding-bottom: 10px;
}
.header-main .brand { grid-row: 1; grid-column: 1; }
.header-main .cart-link { grid-row: 1; grid-column: 2; }
.header-main .search { grid-row: 2; grid-column: 1 / span 2; }
@media (min-width: 900px) {
    .header-main {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        gap: 24px;
        padding-top: 14px; padding-bottom: 14px;
    }
    .header-main .brand, .header-main .cart-link { grid-row: auto; grid-column: auto; }
    .header-main .search { grid-row: auto; grid-column: auto; max-width: 540px; margin: 0 auto; width: 100%; }
}

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--grad-mark);
    color: #fff;
    display: grid; place-items: center;
    font-size: 22px; font-weight: 600; line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgb(13 74 49 / 0.22);
}
.brand-name { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-zh { font-size: 16px; font-weight: 600; color: var(--fg); }
.brand-en { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
@media (min-width: 600px) {
    .brand-mark { width: 40px; height: 40px; font-size: 24px; }
    .brand-zh { font-size: 18px; }
    .brand-en { font-size: 11px; }
}

.search {
    display: flex;
    border: 2px solid var(--brand);
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
}
.search input {
    flex: 1; border: 0; padding: 9px 12px; outline: 0;
    font-size: 14px; background: var(--surface);
    min-height: var(--tap);
}
.search button {
    background: var(--brand); color: #fff;
    border: 0; padding: 0 14px;
    cursor: pointer; display: grid; place-items: center;
    min-height: var(--tap);
}
.search button:hover { background: var(--brand-dark); }

.cart-link {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border);
    padding: 7px 12px;
    border-radius: var(--radius);
    position: relative;
    color: var(--fg); background: var(--surface);
    min-height: var(--tap);
    font-size: 13px;
}
.cart-link:hover { border-color: var(--brand); color: var(--brand); }
.cart-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--brand); color: #fff;
    min-width: 18px; height: 18px; border-radius: 9px;
    font-size: 11px;
    display: grid; place-items: center;
    padding: 0 5px;
}

.header-nav {
    display: flex; gap: 18px;
    padding-top: 8px; padding-bottom: 8px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.header-nav::-webkit-scrollbar { display: none; }
.nav-item { white-space: nowrap; padding: 4px 0; }
.nav-item:hover { color: var(--brand); }
.nav-item-side { margin-left: auto; color: var(--muted); }
@media (min-width: 900px) {
    .header-nav { gap: 24px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
}

/* ===== 6. Hero ============================================ */
.hero {
    background: var(--grad-hero);
    border-radius: 12px;
    margin: 14px 0;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 110%, rgb(168 214 58 / 0.18), transparent 50%);
    pointer-events: none;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
    padding: 26px 22px;
}
.hero h1 {
    font-size: 24px; line-height: 1.25; margin: 0 0 10px;
    font-weight: 600; letter-spacing: 0.5px;
}
.hero p {
    margin: 0 0 16px;
    color: var(--fg-soft);
    font-size: 14px; line-height: 1.6;
}
.hero-art { display: none; }
.hero .btn { margin-right: 8px; }
@media (min-width: 600px) {
    .hero-inner { padding: 32px 28px; }
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 15px; }
}
@media (min-width: 900px) {
    .hero-inner {
        grid-template-columns: 1.4fr 1fr;
        gap: 32px; padding: 48px 40px;
    }
    .hero h1 { font-size: 36px; letter-spacing: 1px; margin-bottom: 16px; }
    .hero p { font-size: 16px; max-width: 480px; margin-bottom: 24px; }
    .hero-art { display: block; aspect-ratio: 1; position: relative; }
    .hero-blob {
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 60% 40%, var(--brand) 0%, var(--brand-dark) 60%, transparent 70%);
        border-radius: 50%; opacity: 0.12; filter: blur(30px);
    }
}

/* ===== 7. Buttons ========================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 18px;
    min-height: var(--tap);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    font-size: 14px;
    cursor: pointer; transition: all .15s;
    font-family: inherit;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { background: var(--grad-button); color: #fff; border-color: var(--brand-dark); }
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-dark), var(--forest)); color: #fff; border-color: var(--forest); }
.btn-buy { background: linear-gradient(135deg, var(--lime), var(--brand)); color: #fff; border-color: var(--brand); font-weight: 500; }
.btn-buy:hover { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-color: var(--brand-dark); }
.btn-ghost { background: transparent; border: 1px solid #ddd; color: #666; }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ===== 8. Section heads =================================== */
.section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 20px 0 12px;
}
.section-head h2 {
    font-size: 18px; margin: 0;
    display: flex; align-items: center; gap: 8px;
    font-weight: 600;
}
.section-head .bar {
    display: inline-block; width: 3px; height: 16px;
    background: var(--brand); border-radius: 2px;
}
.section-head .more { color: var(--muted); font-size: 12px; }
.section-head .more:hover { color: var(--brand); }
@media (min-width: 600px) {
    .section-head { margin: 28px 0 16px; }
    .section-head h2 { font-size: 22px; }
    .section-head .bar { width: 4px; height: 18px; }
    .section-head .more { font-size: 13px; }
}

/* ===== 9. Category-strip ================================== */
.cat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
}
.cat-tile {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 12px 6px;
    text-align: center;
    color: var(--fg);
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    transition: all 0.15s;
    border: 1px solid var(--border-soft);
    min-height: var(--tap);
}
.cat-tile:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.cat-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    display: grid; place-items: center;
}
.cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-icon-fallback { font-size: 22px; font-weight: 600; color: var(--brand); }
.cat-name { font-size: 12px; line-height: 1.3; }
@media (min-width: 600px) {
    .cat-strip { grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
    .cat-icon { width: 56px; height: 56px; }
    .cat-name { font-size: 13px; }
}
@media (min-width: 900px) {
    .cat-strip { grid-template-columns: repeat(8, 1fr); }
    .cat-icon { width: 64px; height: 64px; }
    .cat-tile { padding: 16px 8px; gap: 8px; }
}

/* ===== 10. Product grid + card =========================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.product-card {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    display: flex; flex-direction: column;
    transition: all 0.15s;
    position: relative;
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.product-card .card-img {
    aspect-ratio: 1; overflow: hidden;
    background: var(--surface-2); position: relative;
}
.product-card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card .card-img .badge {
    position: absolute; top: 6px;
    font-size: 10px; padding: 2px 6px;
    border-radius: 3px; font-weight: 500;
}
.product-card .card-img .badge-free { left: 6px; background: var(--accent); color: #fff; }
.product-card .card-img .badge-sale { right: 6px; background: var(--brand); color: #fff; }
.product-card .card-img .badge-oos {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7); color: white; font-size: 12px;
    padding: 4px 12px;
}
.product-card .card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card .card-title {
    font-size: 12px; line-height: 1.35;
    height: 2.7em; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    color: var(--fg);
    margin: 0;
    font-weight: 500;
}
.product-card .card-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.product-card .price { color: var(--price); font-size: 15px; font-weight: 600; }
.product-card .price-old { color: var(--price-old); text-decoration: line-through; font-size: 11px; }
.product-card .card-meta { font-size: 11px; color: var(--muted); }

@media (min-width: 600px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .product-card .card-title { font-size: 13px; }
}
@media (min-width: 900px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .product-card .card-body { padding: 12px 14px 14px; }
    .product-card .card-title { font-size: 14px; }
    .product-card .price { font-size: 18px; }
}
/* Op brede schermen blijft de grid 4 kolommen — gaps groeien iets,
   cards worden breder. Geen 6-cols (anders lege cellen bij 4-items rows). */
@media (min-width: 1200px) {
    .product-grid { gap: 18px; }
}

/* ===== 11. Hot-sale + Flash-sale ========================= */
.hot-sale { margin: 22px 0; }
.flash-sale {
    margin: 16px 0;
    padding: 14px 14px 16px;
    background: linear-gradient(135deg, #ff3b3b 0%, #ff6a45 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 16px rgb(255 59 59 / 0.2);
}
.flash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.flash-title { display: flex; align-items: center; gap: 8px; }
.flash-title strong { font-size: 17px; letter-spacing: 0.5px; }
.flash-icon { font-size: 20px; }
.flash-sub { color: rgba(255,255,255,0.85); font-size: 11px; }
.flash-timer { display: flex; align-items: center; gap: 3px; font-family: Consolas, Menlo, monospace; }
.flash-timer .t-cell {
    background: rgb(0 0 0 / 0.35); color: white;
    padding: 3px 7px; border-radius: 4px; min-width: 26px; text-align: center;
    font-weight: 600; font-size: 14px;
}
.flash-timer .t-sep { color: white; font-weight: 700; padding: 0 1px; }
.flash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.flash-card { background: white; color: #333; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s; }
.flash-card:hover { transform: translateY(-2px); }
.flash-card-img { position: relative; aspect-ratio: 1; background: #f7f7f7; overflow: hidden; }
.flash-card-img img { width: 100%; height: 100%; object-fit: cover; }
.flash-badge {
    position: absolute; top: 6px; left: 6px;
    background: #ff3b3b; color: white;
    font-weight: 600; font-size: 11px;
    padding: 2px 7px; border-radius: 4px;
}
.flash-card-body { padding: 8px 10px 10px; }
.flash-name {
    font-size: 12px; line-height: 1.3;
    height: 2.6em; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    margin-bottom: 5px;
}
.flash-prices { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.flash-now { color: #e4393c; font-size: 15px; font-weight: 600; }
.flash-meter { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.meter-track { flex: 1; height: 5px; background: #eee; border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; background: linear-gradient(90deg, #ffaf65, #ff3b3b); }
@media (min-width: 600px) {
    .flash-sale { padding: 18px 20px 20px; }
    .flash-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .flash-title strong { font-size: 20px; letter-spacing: 1px; }
    .flash-timer .t-cell { padding: 4px 8px; min-width: 30px; font-size: 16px; }
    .flash-now { font-size: 18px; }
}

/* ===== 12. Product page =================================== */
.product-page { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 12px 0; }
.product-gallery .gallery-main { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.product-gallery .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb { width: 56px; height: 56px; border: 2px solid transparent; border-radius: 6px; padding: 0; background: none; cursor: pointer; overflow: hidden; flex-shrink: 0; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--brand); }

.product-info h1 { font-size: 19px; line-height: 1.35; margin: 0 0 10px; }
.product-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.tag { font-size: 12px; padding: 2px 10px; border-radius: 12px; }
.tag-brand { background: var(--brand-soft); color: var(--brand); }
.tag-country { background: var(--surface-2); color: var(--fg-soft); }

.price-block {
    background: linear-gradient(90deg, #fff7e6, #fff);
    padding: 14px;
    border-radius: var(--radius);
    margin: 10px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.price-left { display: flex; align-items: baseline; gap: 8px; }
.price.big { font-size: 26px; }
.badge-sale { background: var(--brand); color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.badge-free { background: var(--accent); color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.badge-free.big { padding: 4px 12px; font-size: 13px; }

.social-proof { display: flex; gap: 12px; align-items: center; margin: 10px 0; font-size: 13px; flex-wrap: wrap; }
.sold-strong strong { color: var(--brand); }
.rating { display: inline-flex; align-items: center; gap: 4px; color: #ffb800; }
.rating-num { color: var(--fg); font-weight: 500; }

.product-body { margin: 10px 0; color: var(--fg-soft); line-height: 1.65; }

.buy-row { display: flex; gap: 6px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qty-btn { width: 36px; height: 40px; border: 0; background: var(--surface); cursor: pointer; font-size: 18px; color: var(--fg-soft); }
.qty-btn:hover { background: var(--surface-2); }
.qty-input { width: 44px; height: 40px; border: 0; text-align: center; font-size: 14px; }
.qty-input::-webkit-inner-spin-button { display: none; }
.qty-val { padding: 0 10px; min-width: 24px; text-align: center; font-weight: 500; }
.qty-form { display: flex; align-items: center; }
.qty-form .qty-btn { width: 28px; height: 28px; }
.buy-row .btn { flex: 1; min-width: 120px; padding: 12px 18px; }

.trust-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; font-size: 12px; color: var(--fg-soft); }
.trust-item { display: inline-flex; align-items: center; gap: 4px; }

@media (min-width: 900px) {
    .product-page { grid-template-columns: 1fr 1fr; gap: 32px; }
    .product-info h1 { font-size: 24px; }
    .price.big { font-size: 32px; }
    .gallery-thumb { width: 64px; height: 64px; }
}
.related { margin: 24px 0; }

/* ===== 13. Reviews ======================================== */
.reviews-section { margin: 20px 0; }
.reviews-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0 16px;
}
.reviews-score { text-align: center; }
.score-big { font-size: 44px; font-weight: 700; color: var(--price); line-height: 1; }
.stars-row { font-size: 18px; letter-spacing: 1px; margin: 6px 0; }
.star.full   { color: #ffb800; }
.star.half   { color: #ffb800; opacity: 0.55; }
.star.empty  { color: #ddd; }
.reviews-breakdown { display: flex; flex-direction: column; gap: 5px; }
.bd-row { display: grid; grid-template-columns: 28px 1fr 30px; align-items: center; gap: 8px; font-size: 12px; }
.bd-label { color: #666; }
.bd-bar { height: 7px; background: #f3f3f3; border-radius: 4px; overflow: hidden; }
.bd-fill { height: 100%; background: linear-gradient(90deg, #ffb800, #ffa000); }
.bd-count { text-align: right; }

.review-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.review-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.review-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ffb88a, #ff8b3d);
    color: white; font-weight: 600; font-size: 14px;
    flex: 0 0 32px;
}
.review-meta { flex: 1; display: flex; align-items: center; gap: 6px; }
.review-name { font-weight: 500; font-size: 13px; }
.badge-verified {
    background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9;
    padding: 0 6px; border-radius: 10px; font-size: 10px; font-weight: 500;
}
.review-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.review-comment { margin: 4px 0; line-height: 1.55; font-size: 13px; color: #333; }
.review-date { font-size: 11px; }
.review-foot { font-size: 11px; }
@media (min-width: 600px) {
    .reviews-summary { grid-template-columns: 200px 1fr; gap: 24px; padding: 20px; }
    .score-big { font-size: 52px; }
    .bd-row { grid-template-columns: 32px 1fr 32px; gap: 10px; }
}

/* ===== 14. Brand-strip + cat filters ====================== */
.brand-strip { margin: 22px 0; }
.brand-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.brand-tile { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 10px; text-align: center; color: var(--fg); transition: all 0.15s; }
.brand-tile:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.brand-tile-name { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.brand-tile-country { font-size: 11px; color: var(--muted); }
@media (min-width: 600px) { .brand-row { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 900px) { .brand-row { grid-template-columns: repeat(6, 1fr); } }

.cat-header { margin: 14px 0; }
.cat-header h1 { font-size: 20px; margin: 0 0 6px; }
.cat-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.filter-bar {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-pill {
    padding: 5px 12px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 12px; white-space: nowrap;
    color: var(--fg-soft);
}
.filter-pill.is-active { background: var(--brand); color: white; border-color: var(--brand); }
@media (min-width: 600px) {
    .cat-header h1 { font-size: 24px; }
    .filter-pill { font-size: 13px; padding: 6px 14px; }
}

/* ===== 15. Cart =========================================== */
.cart-page { margin: 14px 0; }
.cart-page h1 { font-size: 22px; margin: 0 0 14px; }

/* Mobile: card-stack ipv tabel */
.cart-list { display: block; width: 100%; border-collapse: collapse; }
.cart-list thead { display: none; }
.cart-list tbody { display: block; }
.cart-list tr {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    grid-template-areas:
        "img title title"
        "img qty   subtotal"
        "img price del";
    gap: 6px 10px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 10px;
}
.cart-list td { border: 0; padding: 0; font-size: 13px; }
.cart-list td.cell-img { grid-area: img; }
.cart-list td.cell-img img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.cart-list tr td:nth-child(2) { grid-area: title; line-height: 1.4; }
.cart-list tr td:nth-child(3) { grid-area: price; color: var(--muted); font-size: 12px; }
.cart-list tr td:nth-child(4) { grid-area: qty; }
.cart-list tr td:nth-child(5) { grid-area: subtotal; text-align: right; }
.cart-list tr td:nth-child(5).price { color: var(--price); font-weight: 600; }
.cart-list tr td:nth-child(6) { grid-area: del; text-align: right; }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px; }
.link-btn:hover { color: var(--brand); }

/* Tablet+ : echte tabel-layout */
@media (min-width: 720px) {
    .cart-list { display: table; }
    .cart-list thead { display: table-header-group; }
    .cart-list tbody { display: table-row-group; }
    .cart-list tr {
        display: table-row;
        background: var(--surface);
        border-radius: 0;
        margin: 0; padding: 0;
        border-bottom: 1px solid var(--border-soft);
        grid-template-columns: none;
        grid-template-areas: none;
    }
    .cart-list td { display: table-cell; padding: 12px 8px; vertical-align: middle; grid-area: auto !important; }
    .cart-list th { padding: 10px 8px; text-align: left; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border-soft); }
    .cart-list .cell-img img { width: 56px; height: 56px; }
}

.cart-summary { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; margin: 14px 0; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.cart-summary-row.discount, .cart-summary-row.discount .price { color: var(--brand); }
.cart-summary-row.total { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 6px; font-size: 15px; }
.cart-summary-row.total .price.big { font-size: 22px; }
.checkout-btn { display: block; width: 100%; margin-top: 12px; padding: 14px; font-size: 16px; }

/* ===== 16. Coupons + 满减 ================================ */
.mj-hint {
    background: linear-gradient(90deg, #fff4d4, #ffe9b3);
    border: 1px dashed #d4a015; color: #6a4d00;
    padding: 10px 14px; border-radius: 8px;
    margin: 12px 0; font-size: 13px;
}
.coupon-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px; margin: 12px 0; }
.coupon-form { display: flex; gap: 6px; flex-wrap: wrap; }
.coupon-form input[type="text"] {
    flex: 1; min-width: 140px;
    padding: 10px 12px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px;
    font-family: Consolas, Menlo, monospace; letter-spacing: 1px;
    min-height: var(--tap);
}
.coupon-msg { margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.coupon-msg.ok  { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.coupon-msg.err { background: #fdecea; color: #c62828; border: 1px solid #fcbdb6; }
.coupon-suggest { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px dashed #d4a015;
    border-radius: 16px;
    padding: 4px 10px 4px 4px;
    background: #fffbeb;
    cursor: pointer; font-size: 11px; color: #6a4d00;
    transition: all 0.15s; min-height: 32px;
}
.chip:hover { background: #fff4d4; }
.chip code { background: #fff; border: 1px solid #f0c84a; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; color: #d4a015; letter-spacing: 0.5px; }
.chip-disabled { opacity: 0.5; cursor: not-allowed; border-style: solid; border-color: #ddd; background: #f7f7f7; color: #888; }
.chip-disabled code { border-color: #ddd; color: #888; }

/* ===== 17. Checkout stepper + form ====================== */
.checkout-page { margin: 14px 0; }
.checkout-stepper {
    display: flex; align-items: center; gap: 4px;
    margin: 12px 0 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.checkout-stepper::-webkit-scrollbar { display: none; }
.checkout-stepper .step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--border); color: #999;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
}
.step.done .step-num { background: var(--accent); color: white; }
.step.active .step-num { background: var(--brand); color: white; }
.step-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.step.active .step-label { color: var(--fg); font-weight: 500; }
.step.done .step-label { color: var(--accent); }
.step-sep { width: 18px; height: 1px; background: var(--border); flex-shrink: 0; }

.checkout-form { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 16px; }
.checkout-form h2 { font-size: 18px; margin: 0 0 14px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-soft); }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input[type="text"],
.form-grid input[type="tel"],
.form-grid textarea {
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; font-family: inherit;
    min-height: var(--tap);
}
.form-grid textarea { min-height: 60px; resize: vertical; }
.checkout-form .btn-primary { margin-top: 14px; width: 100%; padding: 13px; font-size: 15px; }
@media (min-width: 600px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .checkout-form .btn-primary { width: auto; }
}

.ship-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    cursor: pointer;
}
.ship-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ship-opt input { margin: 0; flex-shrink: 0; }
.ship-opt > div { flex: 1; }
.ship-name { font-weight: 500; font-size: 14px; }

.pay-tabs { display: flex; gap: 6px; margin: 12px 0 16px; }
.pay-tab {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--surface);
    font-size: 12px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    flex-direction: column;
    min-height: 58px;
}
.pay-tab input { display: none; }
.pay-tab-logo {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    background: #f0f0f0; color: #999;
    border-radius: 4px;
}
.pay-tab-wechat .pay-tab-logo { background: #1aad19; color: white; }
.pay-tab-alipay .pay-tab-logo { background: #00aaee; color: white; }
.pay-tab-unionpay .pay-tab-logo { background: #e60012; color: white; }
.pay-tab-wechat:has(input:checked)   { border-color: #1aad19; background: #e8f7e8; color: #1aad19; }
.pay-tab-alipay:has(input:checked)   { border-color: #00aaee; background: #e3f5fc; color: #00aaee; }
.pay-tab-unionpay:has(input:checked) { border-color: #e60012; background: #fde8e8; color: #e60012; }
@media (min-width: 600px) {
    .pay-tab { flex-direction: row; padding: 10px; min-height: var(--tap); font-size: 13px; }
}

.pay-qr {
    --pay-color: #333;
    position: relative;
    background: linear-gradient(180deg, #fafafa, #fff);
    border-radius: var(--radius);
    padding: 18px 14px;
    text-align: center;
    margin-bottom: 16px;
    border: 1px solid var(--border-soft);
}
.pay-brand-head {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    padding: 5px 12px;
    background: var(--pay-color);
    color: white;
    border-radius: 4px;
    font-size: 13px;
}
.pay-brand-logo { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: white; color: var(--pay-color); border-radius: 4px; font-weight: 700; font-size: 12px; }
.qr-frame { position: relative; display: inline-block; padding: 10px; background: #fff; border: 3px solid var(--pay-color); border-radius: var(--radius-sm); }
.qr-art { display: grid; gap: 0; width: 168px; line-height: 0; }
.qr-row { display: flex; }
.qr-cell { width: 6.7px; height: 6.7px; background: transparent; display: block; }
.qr-cell.on { background: var(--pay-color); }
.qr-center-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; background: white; color: var(--pay-color); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.15); }
.pay-hint { margin: 14px 0 6px; font-size: 13px; }
.pay-amount { margin-top: 10px; font-size: 13px; }
.pay-breakdown { margin: 6px 0; line-height: 1.55; }
.pay-breakdown .price { color: #e4393c; font-weight: 600; }
@media (min-width: 600px) {
    .qr-art { width: 200px; }
    .qr-cell { width: 8px; height: 8px; }
    .qr-center-logo { width: 44px; height: 44px; font-size: 22px; }
}

.checkout-done { text-align: center; background: var(--surface); border-radius: var(--radius); padding: 32px 20px; border: 1px solid var(--border-soft); }
.check-mark { display: flex; justify-content: center; margin-bottom: 12px; color: var(--accent); }
.order-id { color: var(--brand); font-family: Consolas, Menlo, monospace; }

/* ===== 18. Mini-cart (click-to-open drawer + backdrop) === */
.mini-cart-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
    animation: mc-fade 0.2s ease-out;
}
.mini-cart-backdrop[hidden] { display: none; }
@keyframes mc-fade { from { opacity: 0; } to { opacity: 1; } }

.mini-cart {
    position: fixed; right: 0; top: 0;
    width: 100%; max-width: 380px;
    height: 100vh; height: 100dvh;
    background: var(--surface);
    box-shadow: -8px 0 24px rgb(0 0 0 / 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 100;
    display: flex; flex-direction: column;
    padding: 16px 16px 14px;
    overflow: hidden;
}
.mini-cart.is-open { transform: translateX(0); }

.mini-cart-flash-msg {
    background: var(--accent); color: white;
    padding: 8px 12px; border-radius: 6px;
    font-size: 13px; margin-bottom: 10px;
}
.mini-cart-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 12px;
}
.mini-cart-title { font-size: 16px; font-weight: 600; }
.mini-cart-count { color: var(--muted); font-weight: 400; margin-left: 4px; }
.mini-cart-close {
    background: none; border: 0;
    width: 32px; height: 32px;
    font-size: 24px; line-height: 1;
    cursor: pointer; color: var(--muted);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.mini-cart-close:hover { background: var(--surface-2); color: var(--fg); }

.mini-cart-empty {
    text-align: center; padding: 32px 12px;
    color: var(--muted); margin: 0;
}
.mini-cart-list {
    flex: 1; min-height: 0;
    list-style: none; padding: 0; margin: 0;
    overflow-y: auto;
}
.mini-cart-list li {
    display: flex; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}
.mini-cart-list img {
    width: 56px; height: 56px;
    object-fit: cover; border-radius: 6px;
    flex-shrink: 0;
}
.mini-line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mini-line-title {
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mini-line-meta { display: flex; align-items: center; justify-content: space-between; }
.mini-line-meta .price { color: var(--price); font-weight: 600; }

.mini-cart-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0 8px;
    border-top: 1px solid var(--border-soft);
    margin-top: 6px;
    font-size: 14px;
}
.mini-cart-foot .price { font-size: 18px; color: var(--price); }
.mini-cart-go { width: 100%; }

/* ===== 19. Footer ======================================== */
.service-strip { background: var(--surface); border-top: 1px solid var(--border); padding: 18px 0; }
.service-strip-inner { display: grid; grid-template-columns: 1fr; gap: 14px; }
.svc { display: flex; align-items: center; gap: 10px; padding: 0; }
.svc svg { color: var(--brand); flex: 0 0 30px; width: 30px; height: 30px; }
.svc div { display: flex; flex-direction: column; line-height: 1.3; }
.svc strong { font-size: 13px; color: var(--fg); }
@media (min-width: 600px) {
    .service-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}
@media (min-width: 900px) {
    .service-strip-inner { grid-template-columns: repeat(5, 1fr); gap: 16px; }
    .svc { padding: 0 8px; }
    .svc svg { flex: 0 0 34px; width: 34px; height: 34px; }
    .svc strong { font-size: 14px; }
}

.cert-strip {
    background: var(--surface-2, #f4f4f4);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 0;
}
.cert-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 10px 14px;
    justify-content: center;
}
.cert-label {
    width: 100%; text-align: center;
    font-size: 12px; color: var(--fg-soft);
    font-weight: 500; padding-bottom: 4px;
}
.cert-inner img {
    height: 38px; width: auto;
    transition: transform 0.15s, opacity 0.15s;
    cursor: help; opacity: 0.92;
}
.cert-inner img:hover { transform: scale(1.08); opacity: 1; }
@media (min-width: 900px) {
    .cert-strip { padding: 18px 0; }
    .cert-inner { gap: 16px 22px; }
    .cert-label {
        width: auto; text-align: left; padding-bottom: 0;
        font-size: 13px; padding-right: 6px;
        border-right: 1px solid var(--border);
    }
    .cert-inner img { height: 52px; }
}

.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    padding: 24px 0;
}
.footer-col h4 { margin: 0 0 8px; font-size: 13px; color: var(--fg); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 3px 0; font-size: 12px; }
.footer-col a { color: var(--fg-soft); }
.footer-col a:hover { color: var(--brand); }
.kefu-hint { margin: 0 0 12px; line-height: 1.6; }
.hotline-num { color: var(--price); font-size: 18px; letter-spacing: 1px; font-weight: 600; }
.pay-icons { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.pay-icon { padding: 3px 8px; border-radius: 4px; font-size: 10px; color: white; font-weight: 500; }
.pay-icon.pay-wechat  { background: #1aad19; }
.pay-icon.pay-alipay  { background: #00aaee; }
.pay-icon.pay-union   { background: #e60012; }

.footer-bottom {
    display: flex; flex-direction: column; gap: 6px;
    align-items: center; padding: 14px var(--pad-x);
    border-top: 1px solid var(--border-soft);
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}
.footer-company { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.footer-company strong { color: var(--fg-soft); font-size: 12px; }
.footer-legal { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 600px) {
    .footer-bottom { font-size: 12px; }
    .footer-company strong { font-size: 13px; }
}
@media (min-width: 900px) {
    .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px 0; }
    .footer-col h4 { font-size: 14px; }
    .footer-col li { font-size: 13px; padding: 4px 0; }
    .hotline-num { font-size: 20px; }
}

/* ===== 20. Orders ======================================== */
.orders-page { margin: 14px 0; max-width: 900px; }
.orders-page h1 { font-size: 22px; margin: 0 0 10px; }
.orders-search { display: flex; gap: 8px; margin: 12px 0 20px; }
.orders-search input { flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; min-height: var(--tap); }
.order-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.order-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; }
.order-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed #eee; }
.order-id { font-family: Consolas, Menlo, monospace; color: #2196f3; font-weight: 500; font-size: 13px; }
.order-id:hover { text-decoration: underline; }
.order-date { font-size: 11px; }
.order-stage { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; margin-left: auto; }
.stage-paid      { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.stage-preparing { background: #fff8e1; color: #f57c00; border: 1px solid #ffe0b2; }
.stage-shipped   { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.stage-delivered { background: #e8eaf6; color: #5e35b1; border: 1px solid #c5cae9; }
.order-card-items { display: flex; align-items: center; gap: 8px; padding-top: 8px; flex-wrap: wrap; }
.order-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; }
.order-more { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f7f7f7; border: 1px solid #eee; border-radius: 4px; font-size: 12px; }
.order-card-total { margin-left: auto; font-size: 12px; }
.order-card-total .price { color: var(--price); font-weight: 600; font-size: 14px; }

.order-page { margin: 14px 0; }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.order-id-big { font-size: 20px; margin: 4px 0 0; font-family: Consolas, Menlo, monospace; color: var(--fg); }
.order-status { padding: 6px 14px; border-radius: 16px; background: #e3f2fd; color: #1565c0; font-size: 13px; }
.order-timeline {
    display: flex; align-items: center; gap: 0;
    padding: 14px 6px; margin: 12px 0;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tl-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 75px; text-align: center; }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f0f0f0; color: #999; font-weight: 600; font-size: 12px; border: 2px solid #f0f0f0; }
.tl-step.done .tl-dot { background: #4caf50; color: white; border-color: #4caf50; }
.tl-label { font-size: 11px; }
.tl-step.done .tl-label strong { color: #2e7d32; }
.tl-bar { flex: 1; height: 3px; background: #f0f0f0; min-width: 30px; margin-top: -18px; }
.tl-bar.done { background: #4caf50; }

.order-body { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 14px 0; }
.order-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px; }
.order-block h3 { margin: 0 0 10px; font-size: 15px; }
@media (min-width: 720px) {
    .order-body { grid-template-columns: 2fr 1fr; }
    .order-side { display: flex; flex-direction: column; gap: 16px; }
    .tl-step { min-width: 110px; }
    .tl-label { font-size: 13px; }
    .tl-dot { width: 34px; height: 34px; font-size: 14px; }
    .tl-bar { min-width: 40px; margin-top: -22px; }
}

/* ===== 21. Kefu chat ==================================== */
.kefu-trigger {
    position: fixed; bottom: 80px; right: 14px;
    background: var(--brand); color: white;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 0; cursor: pointer;
    z-index: 90;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
    display: flex; align-items: center; justify-content: center;
}
.kefu-panel {
    position: fixed; bottom: 14px; right: 14px;
    width: calc(100% - 28px); max-width: 320px; height: min(70vh, 480px);
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
    display: flex; flex-direction: column;
    z-index: 95;
    overflow: hidden;
}
/* Critical: zonder dit overschrijft display:flex de [hidden] UA-style. */
.kefu-panel[hidden] { display: none; }
.kefu-head { background: var(--brand); color: white; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.kefu-close { background: none; border: 0; color: white; font-size: 20px; cursor: pointer; }
.kefu-body { flex: 1; overflow-y: auto; padding: 12px; background: #f5f5f5; }
.kefu-msg { margin-bottom: 10px; }
.kefu-msg-user { text-align: right; }
.kefu-msg-user .kefu-bubble { background: var(--brand); color: white; display: inline-block; }
.kefu-msg-bot .kefu-bubble { background: white; display: inline-block; }
.kefu-bubble { padding: 8px 12px; border-radius: 10px; max-width: 80%; line-height: 1.4; font-size: 13px; }
.kefu-typing .kefu-bubble span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #999; margin: 0 1px; animation: blink 1.4s infinite both; }
.kefu-typing .kefu-bubble span:nth-child(2) { animation-delay: 0.2s; }
.kefu-typing .kefu-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.kefu-time { font-size: 10px; color: var(--muted); margin-top: 2px; }
.kefu-replies { padding: 8px 12px; background: white; border-top: 1px solid var(--border-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.kefu-reply { padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 14px; font-size: 12px; cursor: pointer; color: var(--fg-soft); }
.kefu-reply:hover { border-color: var(--brand); color: var(--brand); }
.kefu-input { padding: 8px 12px; background: white; border-top: 1px solid var(--border-soft); display: flex; gap: 6px; }
.kefu-input input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 16px; font-size: 13px; min-height: 36px; }
.kefu-input button { padding: 0 14px; border: 0; background: var(--brand); color: white; border-radius: 16px; cursor: pointer; }

/* ===== 22. Welcome popup =============================== */
.welcome-popup {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: welcome-fade-in 0.25s ease-out;
}
.welcome-popup[hidden] { display: none; }
@keyframes welcome-fade-in { from { opacity: 0; } to { opacity: 1; } }
.welcome-card {
    background: white;
    border-radius: 14px;
    padding: 28px 22px 20px;
    width: 100%; max-width: 340px;
    text-align: center; position: relative;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
    animation: welcome-pop-in 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.3);
}
@keyframes welcome-pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.welcome-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 4px 8px; min-width: var(--tap); min-height: var(--tap); }
.welcome-close:hover { color: #333; }
.welcome-confetti { font-size: 36px; margin: 4px 0; }
.welcome-card h2 {
    margin: 6px 0; font-size: 22px;
    background: linear-gradient(90deg, #ff6a00, #e4393c);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e4393c;
}
.welcome-sub { color: #888; margin: 4px 0 10px; font-size: 13px; }
.welcome-amount { font-size: 13px; color: var(--price); font-weight: 600; margin: 10px 0; }
.welcome-amount strong { font-size: 52px; line-height: 1; }
.welcome-min { margin: 4px 0 14px; font-size: 12px; }
.welcome-code {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 10px 0 14px;
    padding: 8px;
    background: linear-gradient(90deg, #fff4d4, #ffe9b3);
    border: 1px dashed #d4a015;
    border-radius: 8px;
}
.welcome-code code { font-family: Consolas, Menlo, monospace; font-size: 16px; font-weight: 700; color: #6a4d00; letter-spacing: 2px; }
.welcome-cta { width: 100%; padding: 12px; font-size: 15px; font-weight: 500; }
.welcome-tos { margin-top: 10px; font-size: 10px; }

/* ===== 23. Prose / static pages ======================== */
.prose { max-width: 820px; margin: 14px 0; }
.prose h1 { font-size: 22px; margin: 0 0 12px; }
.prose h2 { font-size: 18px; margin: 18px 0 10px; padding-left: 10px; border-left: 3px solid var(--brand); }
.prose h3 { font-size: 15px; margin: 12px 0 6px; color: var(--fg-soft); }
.prose p { margin: 0 0 10px; color: var(--fg-soft); line-height: 1.7; font-size: 14px; }
.prose strong { color: var(--fg); }
.prose ul { padding-left: 22px; line-height: 1.8; color: var(--fg-soft); font-size: 14px; }
.prose code { background: #fff4d4; border: 1px solid #f0c84a; color: #6a4d00; padding: 1px 6px; border-radius: 4px; font-family: Consolas, Menlo, monospace; font-weight: 600; font-size: 12px; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose details { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 14px; margin: 6px 0; }
.prose details summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.prose details[open] { box-shadow: var(--shadow); }
.prose details p { margin: 6px 0 0; padding: 0; }

.about-hero { text-align: center; padding: 22px 0 14px; border-bottom: 1px dashed var(--border-soft); margin-bottom: 22px; }
.about-hero h1 {
    font-size: 26px;
    background: linear-gradient(90deg, var(--lime) 0%, var(--brand) 45%, var(--forest) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 10px;
    letter-spacing: 0.5px;
}
.about-lead { font-size: 14px; color: var(--fg-soft); margin: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0; }
.contact-grid > div { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; }
.contact-grid strong { color: var(--fg); font-size: 13px; }

@media (min-width: 600px) {
    .prose h1 { font-size: 26px; }
    .prose h2 { font-size: 20px; }
    .about-hero h1 { font-size: 30px; }
    .about-lead { font-size: 15px; }
    .contact-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (min-width: 900px) {
    .prose p, .prose ul { font-size: 15px; }
    .about-hero h1 { font-size: 32px; }
}

/* ===== 24. Empty state, errors ========================= */
.empty-state { text-align: center; padding: 32px 20px; color: var(--muted); }
.empty-state p { margin: 0 0 12px; }
.form-error { background: #fdecea; color: #c62828; border: 1px solid #fcbdb6; padding: 8px 12px; border-radius: 6px; font-size: 13px; }

/* ===== 25. Admin / by-admin ============================ */
.admin-body { background: #f5f5f7; min-height: 100vh; }
.admin-header { background: #fff; border-bottom: 1px solid #e0e0e0; padding: 10px 14px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; }
.admin-brand { display: flex; align-items: center; gap: 8px; color: #333; }
.admin-brand .brand-mark { width: 30px; height: 30px; background: linear-gradient(135deg, #ff6a00, #e4393c); color: white; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: 700; }
.admin-nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { padding: 8px 14px; border-radius: 6px; color: #555; font-size: 14px; white-space: nowrap; }
.admin-nav a:hover, .admin-nav a.is-active { background: #f0f0f0; color: #e4393c; }
.admin-meta { display: flex; gap: 12px; font-size: 13px; }

.admin-main { padding: 18px 14px; max-width: 1300px; margin: 0 auto; }
.admin-main h1 { margin: 0 0 14px; font-size: 20px; }
.admin-h2 { font-size: 16px; margin: 20px 0 10px; }

.admin-login { min-height: 90vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.admin-login-card { background: #fff; border-radius: 12px; padding: 28px 22px; width: 100%; max-width: 380px; box-shadow: 0 4px 20px rgb(0 0 0 / 0.08); }
.admin-login-head { text-align: center; margin-bottom: 20px; }
.admin-login-head .brand-mark.big { width: 52px; height: 52px; font-size: 26px; margin: 0 auto 10px; display: flex; }
.admin-login-head h1 { font-size: 20px; margin: 0; }
.admin-login-form { display: flex; flex-direction: column; gap: 12px; }
.admin-login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; }
.admin-login-form input { padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; min-height: var(--tap); }
.admin-login-hint { text-align: center; margin-top: 14px; font-size: 12px; }
.admin-login-hint code { background: #f0f0f0; padding: 1px 6px; border-radius: 4px; font-family: Consolas, monospace; }

.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 20px; }
.stat-card { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid #ececec; }
.stat-label { color: #888; font-size: 12px; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 600; color: #333; }
.stat-card:nth-child(2) .stat-value { color: #e4393c; }
@media (min-width: 600px) { .admin-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .admin-stats { grid-template-columns: repeat(5, 1fr); gap: 14px; } .stat-value { font-size: 28px; } }

.admin-table { width: 100%; background: #fff; border-radius: 10px; border-collapse: collapse; border: 1px solid #ececec; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table thead { display: none; }
.admin-table tbody { display: block; }
.admin-table tr { display: block; padding: 12px 14px; border-bottom: 1px solid #f3f3f3; }
.admin-table td { padding: 4px 0; font-size: 13px; display: block; }
@media (min-width: 720px) {
    .admin-table { display: table; }
    .admin-table thead { display: table-header-group; }
    .admin-table tbody { display: table-row-group; }
    .admin-table tr { display: table-row; padding: 0; }
    .admin-table thead th { background: #fafafa; padding: 10px 14px; text-align: left; font-size: 13px; color: #666; border-bottom: 1px solid #ececec; font-weight: 500; }
    .admin-table tbody td { padding: 10px 14px; border-bottom: 1px solid #f3f3f3; font-size: 14px; display: table-cell; }
}
.admin-table .price { color: #e4393c; font-weight: 500; }

.admin-search { display: flex; gap: 8px; margin: 10px 0 16px; max-width: 500px; }
.admin-search input { flex: 1; padding: 8px 14px; border: 1px solid #ddd; border-radius: 6px; min-height: 36px; }
.admin-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.admin-products-table input[type="number"] { width: 80px; padding: 5px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; font-family: inherit; }
.admin-inline-form { display: inline-block; }
.admin-row-saved { color: #2e7d32; font-size: 12px; }
.tag-mini { display: inline-block; background: #f3f3f3; color: #666; padding: 1px 6px; border-radius: 4px; font-size: 11px; margin-right: 3px; }

/* ===== 26. 404 + Print ================================ */
.page-404 { text-align: center; padding: 40px 20px; }
.page-404 h1 { font-size: 26px; }

@media print {
    .demo-banner, .kefu-trigger, .kefu-panel, .mini-cart, .welcome-popup,
    .service-strip, .cert-strip, .site-footer { display: none !important; }
    body.has-demo-banner { padding-top: 0; }
}

/* ===== Category toolbar — fancy filter chips + sort ============= */
.cat-header {
    margin: 14px 0 18px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--brand-soft), #fff8f0);
    border-radius: 12px;
    border: 1px solid rgba(13, 74, 49, 0.10);
}
.cat-header h1 {
    font-size: 22px; margin: 0 0 6px;
    color: var(--fg); font-weight: 600;
    letter-spacing: 0.5px;
}
.cat-meta-line {
    margin: 0; color: var(--fg-soft); font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.cat-meta-dot { color: var(--brand); font-size: 8px; }
@media (min-width: 600px) {
    .cat-header { padding: 24px 28px; }
    .cat-header h1 { font-size: 26px; }
}

.cat-toolbar {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.filter-section {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.filter-section + .filter-section {
    border-top: 1px dashed var(--border-soft);
    padding-top: 12px;
    margin-top: 4px;
}
.filter-section-row { gap: 12px; }
.filter-label {
    font-size: 12px; color: var(--muted);
    letter-spacing: 1px; text-transform: uppercase;
    font-weight: 500;
    flex-shrink: 0;
}
.filter-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    flex: 1; min-width: 0;
}
.chip-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--fg-soft);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
}
.chip-toggle:hover { border-color: var(--brand); color: var(--brand); }
.chip-toggle input { display: none; }
.chip-toggle.is-active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 500;
}
.chip-toggle.chip-sale.is-active {
    background: linear-gradient(135deg, #ff7a18, #ff3b3b);
    border-color: #ff3b3b;
    color: white;
}
.chip-toggle.chip-stock.is-active {
    background: #e8f5e9;
    border-color: var(--accent);
    color: var(--accent);
}
.chip-icon { font-size: 11px; opacity: 0.85; }
.chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(77, 139, 58, 0.22);
    color: var(--brand);
    font-size: 12px;
    margin-left: 2px;
}

.filter-spacer { flex: 1; min-width: 0; }
.sort-control {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.select-wrap { position: relative; display: inline-block; }
.select-wrap select {
    appearance: none; -webkit-appearance: none;
    padding: 7px 32px 7px 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--fg);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-height: 36px;
    line-height: 1.2;
    transition: border-color 0.15s;
}
.select-wrap select:hover, .select-wrap select:focus {
    border-color: var(--brand); outline: 0;
}
.select-chev {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
    font-size: 11px;
}

.cat-result-meta {
    display: flex; align-items: center; gap: 8px;
    padding-top: 12px; margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px; color: var(--fg-soft);
}
.result-badge {
    background: var(--brand);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.result-badge strong { color: white; }
.filter-reset {
    margin-left: auto;
    color: var(--muted); font-size: 12px;
    transition: color 0.15s;
}
.filter-reset:hover { color: var(--brand); }

@media (max-width: 600px) {
    .filter-section-row { flex-direction: column; align-items: flex-start; }
    .filter-spacer { display: none; }
    .sort-control { width: 100%; justify-content: space-between; margin-top: 4px; }
    .select-wrap select { flex: 1; }
}

/* Hide legacy filter classes from category-results.php */
.filters, .filter-group { display: none; }

/* ============================================================
   ===== FANCY ANIMATIONS & TRANSITIONS ======================
   Professional motion-layer over de bestaande components.
   prefers-reduced-motion respected — accessibility first.
   ============================================================ */

/* ---- Animation tokens ------------------------------------ */
:root {
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:  150ms;
    --dur-base:  280ms;
    --dur-slow:  500ms;
}

/* ---- Page enter (subtle fade) --------------------------- */
main.page { animation: page-fade-in 220ms var(--ease-out); }
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Scroll-reveal utility — pure opacity, geen vertical 'spring' --- */
.reveal {
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
    will-change: opacity;
}
.reveal.is-in { opacity: 1; }

.stagger > * {
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
}
.stagger.is-in > * { opacity: 1; }
.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }
.stagger.is-in > *:nth-child(7) { transition-delay: 360ms; }
.stagger.is-in > *:nth-child(8) { transition-delay: 420ms; }

/* ---- Buttons (subtle press + sheen op primary) ---------- */
.btn {
    transition: background-color var(--dur-fast) var(--ease-in-out),
                border-color     var(--dur-fast) var(--ease-in-out),
                color            var(--dur-fast) var(--ease-in-out),
                transform        var(--dur-fast) var(--ease-spring),
                box-shadow       var(--dur-fast) var(--ease-in-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    position: relative; overflow: hidden;
    box-shadow: 0 2px 6px rgb(13 74 49 / 0.18);
}
.btn-primary::before {
    content: '';
    position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg);
    transition: left var(--dur-slow) var(--ease-out);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgb(13 74 49 / 0.30); }
.btn-primary:hover::before { left: 130%; }

/* ---- Product card refinement ---------------------------- */
.product-card {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-fast) var(--ease-in-out);
}
.product-card .card-img img {
    transition: transform 500ms var(--ease-out);
    will-change: transform;
    transform: translateZ(0);    /* GPU-layer promotion-hint */
}
.product-card:hover .card-img img { transform: scale(1.06) translateZ(0); }
.product-card .price { transition: color var(--dur-fast); }
.product-card:hover .price { color: var(--brand-dark); }

/* ---- Cat-tile hover ------------------------------------- */
.cat-tile {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-fast) var(--ease-in-out);
}
.cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
}
.cat-tile .cat-icon img { transition: transform var(--dur-base) var(--ease-out); }
.cat-tile:hover .cat-icon img { transform: scale(1.08); }

/* ---- Brand-tile hover ----------------------------------- */
.brand-tile {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-fast) var(--ease-in-out);
}
.brand-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(0 0 0 / 0.06); }

/* ---- Flash-card pulse op badge -------------------------- */
.flash-card { transition: transform var(--dur-base) var(--ease-out); }
.flash-card .flash-card-img img { transition: transform 600ms var(--ease-out); }
.flash-card:hover .flash-card-img img { transform: scale(1.08); }
/* Pulse vervangen door cheaper opacity-ring (geen continue box-shadow
   re-paint die op zwakke GPU's hapert) */
.flash-badge {
    position: absolute; top: 6px; left: 6px;
    background: #ff3b3b; color: white;
    font-weight: 600; font-size: 11px;
    padding: 2px 7px; border-radius: 4px;
}
.flash-badge::after {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 6px;
    border: 2px solid rgb(255 59 59 / 0.55);
    animation: flash-pulse 2.4s var(--ease-out) infinite;
    pointer-events: none;
}
@keyframes flash-pulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ---- Hero blob slow float ------------------------------- */
.hero-blob { animation: hero-float 12s var(--ease-in-out) infinite alternate; }
@keyframes hero-float {
    from { transform: translate(0, 0) scale(1); opacity: 0.12; }
    to   { transform: translate(8%, -4%) scale(1.06); opacity: 0.18; }
}

/* ---- Cart badge pulse bij update ------------------------ */
.cart-badge { transition: transform var(--dur-fast) var(--ease-spring); }
.cart-link:hover .cart-badge { transform: scale(1.15); }
.cart-badge.is-bump { animation: badge-bump 0.4s var(--ease-spring); }
@keyframes badge-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ---- Filter-chip hover lift ----------------------------- */
.chip-toggle, .chip {
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast),
                border-color var(--dur-fast),
                color var(--dur-fast),
                box-shadow var(--dur-fast);
}
.chip-toggle:hover, .chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgb(0 0 0 / 0.06); }

/* ---- Cert-logo hover ------------------------------------ */
.cert-inner img {
    transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base), filter var(--dur-base);
    filter: saturate(0.95);
}
.cert-inner img:hover { filter: saturate(1.2); }

/* ---- Section-head bar glow ------------------------------ */
.section-head .bar {
    background: linear-gradient(180deg, var(--brand), var(--brand-dark));
    box-shadow: 0 0 6px rgb(77 139 58 / 0.45);
}

/* ---- Stepper transitions -------------------------------- */
.checkout-stepper .step-num,
.tl-dot {
    transition: background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.checkout-stepper .step.active .step-num { transform: scale(1.1); }
.tl-step.done .tl-dot { animation: tl-pop 0.4s var(--ease-spring); }
@keyframes tl-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ---- Mini-cart drawer transition ------------------------ */
.mini-cart { transition: transform 350ms var(--ease-out); }
.mini-cart-backdrop { animation: mc-fade var(--dur-base) var(--ease-out); }

/* ---- Welcome popup hardware-acceleratie hint ------------ */
.welcome-card { will-change: transform, opacity; }

/* ---- Kefu trigger gentle breath ------------------------- */
/* Kefu trigger — static shadow + hover-only motion. Geen continuous
   box-shadow loop (te zwaar op zwakke GPU's). */
.kefu-trigger {
    transition: transform var(--dur-base) var(--ease-spring),
                box-shadow var(--dur-base) var(--ease-out);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}
.kefu-trigger:hover {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 22px rgb(0 0 0 / 0.25);
}

/* ---- Header sticky-shadow on scroll --------------------- */
.site-header { transition: box-shadow var(--dur-base) var(--ease-in-out); }
body.scrolled .site-header { box-shadow: 0 4px 16px rgb(0 0 0 / 0.06); }

/* ---- Link underline animation --------------------------- */
.nav-item, .footer-col a, .topbar-links a {
    position: relative;
    transition: color var(--dur-fast);
}
.nav-item::after,
.footer-col a::after,
.topbar-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1.5px;
    background: var(--brand);
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
}
.nav-item:hover::after,
.footer-col a:hover::after,
.topbar-links a:hover::after {
    transform: scaleX(1); transform-origin: left;
}

/* ---- Skeleton-loader (voor toekomstig htmx-loading) ----- */
.skeleton {
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 40%, #eee 80%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s linear infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---- HTMX request-in-flight indicator ------------------- */
.htmx-request { opacity: 0.7; pointer-events: none; transition: opacity var(--dur-fast); }
.htmx-settling { animation: htmx-settle 250ms var(--ease-out); }
@keyframes htmx-settle {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Reduced motion respect ----------------------------- */
/* Reduced-motion: alleen decoratieve continue loops uit, niet alle
   transitions. Functionele animaties (header-slide, modal-open,
   hover-feedback) blijven werken zodat UI niet 'breekt'. */
@media (prefers-reduced-motion: reduce) {
    .hero-blob,
    .demo-banner,
    .flash-badge,
    .flash-badge::after,
    .kefu-trigger,
    .skeleton,
    .htmx-settling {
        animation: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ============================================================
   ===== IMAGE PROTECTION (best-effort) ======================
   100% prevention is impossible (browser must decode pixel data
   to render). Below stops casual right-click-save / drag-to-desktop
   / long-press-save / accidental text-selection.
   ============================================================ */

/* Alle img-tags op de shop-side. Admin (.admin-body) blijft normaal
   zodat de inline product-thumbs / dashboards normaal werken. */
body:not(.admin-body) img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    pointer-events: none;
}

/* Container moet wel klikbaar zijn — herstel pointer-events daar */
.product-card .card-img,
.flash-card .flash-card-img,
.gallery-main {
    position: relative;
    pointer-events: auto;
}

/* Onzichtbare overlay over elke gallery/product img — vangt right-click,
   waardoor "Save image as" niet kan kiezen welke image (geen img element
   onder de cursor in de DOM-zin). */
.product-card .card-img::after,
.flash-card .flash-card-img::after,
.gallery-main::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: auto;
}

/* Subtiele watermark-cue rechtsonder op gallery — discrete CN-stijl */
.gallery-main::before {
    content: '© bioyougu';
    position: absolute;
    right: 8px; bottom: 8px;
    z-index: 3;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    letter-spacing: 1px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    user-select: none;
}

/* ===== Image-protect toast ============================== */
.byg-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgb(0 0 0 / 0.78);
    color: white;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.byg-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   ===== PROFESSIONAL POLISH LAYER ===========================
   View-transitions + magnetic buttons + scroll-aware header +
   refined loading states + counter animations + focus polish.
   ============================================================ */

/* ---- Smooth scroll ------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- View Transitions API (Chrome 111+, Safari 18+) ----
   Persistente shell: demo-banner, site-header en kefu krijgen
   een eigen view-transition-name + 0s duration → ze blijven
   ongewijzigd staan tijdens cross-page navigation. Alleen het
   main-content gedeelte fade't. */
@view-transition { navigation: auto; }
.demo-banner { view-transition-name: demo-banner; }
.site-header { view-transition-name: site-header; }
.kefu-trigger, .kefu-panel { view-transition-name: kefu; }
::view-transition-group(demo-banner),
::view-transition-group(site-header),
::view-transition-group(kefu),
::view-transition-old(demo-banner),
::view-transition-new(demo-banner),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(kefu),
::view-transition-new(kefu) {
    animation: none !important;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* ---- Header — graceful slide + fade + soft blur-out.
       Asymmetrische timing: hide is iets sneller (500ms ease-in)
       dan show (600ms ease-out) — voelt natuurlijker dan symmetrisch. */
.site-header {
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
                filter 500ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow var(--dur-base) var(--ease-in-out),
                backdrop-filter var(--dur-base) var(--ease-in-out),
                background-color var(--dur-base) var(--ease-in-out);
    will-change: transform, opacity;
    transform-origin: top center;
}
body.scrolled .site-header {
    background-color: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 4px 18px rgb(13 74 49 / 0.06);
}
body.scroll-down.scrolled .site-header {
    /* Hide-state: snellere ease-in-out + lichte blur-out voor 'mist-weg' feel */
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
                filter 400ms cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter var(--dur-base) var(--ease-in-out),
                background-color var(--dur-base) var(--ease-in-out);
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
}

/* ---- Image lazy-reveal — opacity only, geen filter (i3-vriendelijk).
       Cruciaal: transform meegeven in transition zodat hover-zoom
       blijft animeren ipv 'instant' (filter-transition overschreed
       eerder de transform-transition van .card-img img). */
img[loading="lazy"] {
    transition: opacity 400ms var(--ease-out),
                transform 600ms var(--ease-out);
}
img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
img.is-loaded { opacity: 1; }

/* ---- Htmx progress-bar bovenaan ------------------------ */
#byg-progress {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--lime), var(--brand), var(--forest));
    z-index: 500;
    box-shadow: 0 0 8px rgb(168 214 58 / 0.6);
    transition: width 200ms var(--ease-out), opacity 200ms;
    pointer-events: none;
    opacity: 0;
}
#byg-progress.is-active { opacity: 1; }

/* ---- Admin dashboard stat-card gradient cijfers ------- */
.stat-value {
    background: var(--grad-mark);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-card:nth-child(2) .stat-value {
    background: linear-gradient(135deg, #ff6a45 0%, #d32f2f 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Focus-visible accessibility ring ---------------- */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.btn:focus-visible,
.btn-primary:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgb(77 139 58 / 0.18);
}

/* ---- Refined cart-badge bump (overrides earlier) ---- */
@keyframes badge-bump {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.85); }
    50%  { transform: scale(1.35); background-color: var(--lime); }
    100% { transform: scale(1); }
}

/* ---- Featured-cat section line-grow ----------------- */
.featured-cat .section-head h2 {
    position: relative;
    overflow: hidden;
}
.featured-cat .section-head h2::before {
    content: '';
    position: absolute;
    left: 14px; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--lime), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease-out);
}
.featured-cat.is-in .section-head h2::before { transform: scaleX(1); }

/* ---- Refined toast (image-protect) ------------------ */
.byg-toast {
    border: 1px solid rgb(255 255 255 / 0.08);
    background: linear-gradient(135deg, rgb(13 74 49 / 0.92), rgb(31 95 63 / 0.92));
}

/* ---- Selection color match -------------------------- */
::selection { background: var(--lime); color: var(--forest); }
::-moz-selection { background: var(--lime); color: var(--forest); }

/* ---- Scrollbar styling ----------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--brand-soft) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--lime), var(--brand));
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--brand), var(--brand-dark));
}

/* ---- Price-block sheen on hover -------------------- */
.price-block {
    position: relative;
    overflow: hidden;
}
.price-block::after {
    content: '';
    position: absolute; top: 0; right: -50%; bottom: 0;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgb(168 214 58 / 0.15), transparent);
    transform: skewX(-15deg);
    transition: right 1.2s var(--ease-out);
}
.price-block:hover::after { right: 110%; }

/* ---- Slide-in cart-summary discount rows ---------- */
.cart-summary-row.discount {
    animation: row-slide-in 350ms var(--ease-out);
}
@keyframes row-slide-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Cat-tile is-active ---------------------------- */
.cat-tile.is-active,
.cat-tile:focus-within {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--lime-soft) 0%, var(--surface) 100%);
}

/* ---- Kefu chat bubble polish ----------------------- */
.kefu-msg-user .kefu-bubble {
    background: var(--grad-button);
}
.kefu-msg-bot .kefu-bubble {
    border: 1px solid var(--border-soft);
    box-shadow: 0 1px 2px rgb(13 74 49 / 0.04);
}

/* ---- Rating hover -------------------------------- */
.rating { transition: transform var(--dur-fast) var(--ease-spring); }
.rating:hover { transform: scale(1.06); }

/* ---- Stagger cascade fine-tune -------------------- */
.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 50ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 100ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 150ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 200ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 250ms; }
.stagger.is-in > *:nth-child(7) { transition-delay: 300ms; }
.stagger.is-in > *:nth-child(8) { transition-delay: 340ms; }

/* Demo-banner drift verwijderd — continuous background-position-shift
   triggered onnodig repaints. Statisch gradient blijft mooi. */

/* ---- Success-checkmark draw ----------------------- */
.checkout-done .check-mark svg circle,
.checkout-done .check-mark svg path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: checkmark-draw 1s var(--ease-out) forwards;
}
.checkout-done .check-mark svg path { animation-delay: 0.3s; }
@keyframes checkmark-draw {
    to { stroke-dashoffset: 0; }
}

/* ---- Reduced-motion override --------------------- */
@media (prefers-reduced-motion: reduce) {
    .demo-banner, .hero-blob, .kefu-trigger { animation: none !important; }
}