/* ============================================================
   mod_snapshopfeatured.css — v1.1.0
   Snap-Sell Go / Pickeenoo
   Palette : #fb923c (orange) · #ff294a (red) · #fff (white)
   Font    : ABeeZee
   ============================================================ */

/* ABeeZee already loaded via template Google Fonts consolidation */

/* ── Variables — Rebrand Navy Premium 2026 ── */
.snpsf-wrap {
    --c-orange:       #1A2F6F;   /* navy — remplace orange */
    --c-orange-dark:  #122254;   /* navy dark — remplace orange dark */
    --c-orange-light: #EEF0F8;   /* badge bg — remplace orange light */
    --c-red:          #1A2F6F;   /* navy — remplace rouge */
    --c-red-dark:     #122254;   /* navy dark — remplace rouge dark */
    --c-surface:      #F8F7F4;   /* blanc cassé chaud */
    --c-text:         #1A1A1A;
    --c-muted:        #6B6B6B;
    --c-white:        #ffffff;
    --c-amber:        #C9860A;   /* or ambre pour badges prix */

    /* Plan badge colors — conservés */
    --c-vip:      #1A2F6F;
    --c-premium:  #C9860A;
    --c-biz:      #2563eb;
    --c-pro:      #0891b2;
    --c-starter:  #16a34a;
    --c-free:     #9ca3af;

    font-family: ABeeZee, sans-serif;
    background: var(--c-surface);
    color: var(--c-text);
    overflow-x: hidden;
    line-height: 1.5;
}
.snpsf-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Announcement bar ── */
.snpsf-ann {
    background: linear-gradient(90deg, var(--c-red-dark), var(--c-red) 40%, var(--c-orange) 70%, var(--c-orange-dark));
    color: var(--c-white);
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    letter-spacing: .3px;
}
.snpsf-ann::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: snpsf-shimmer 3s infinite;
    will-change: transform;
}
@keyframes snpsf-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.snpsf-trusted-pill {
    background: var(--c-white);
    color: var(--c-red);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--c-white);
}

/* ── Awning storefront ── */
.snpsf-storefront {
    background: linear-gradient(180deg, var(--c-orange-dark), var(--c-orange));
    position: relative;
}
.snpsf-aw {
    display: flex;
    justify-content: center;
    perspective: 500px;
}
.snpsf-stripes {
    display: flex;
    transform: rotateX(8deg);
    transform-origin: top center;
    box-shadow: 0 15px 40px rgba(0,0,0,.3);
}
.snpsf-stripe { width: 60px; height: 80px; position: relative; }
.snpsf-stripe.o { background: linear-gradient(180deg, var(--c-orange), var(--c-orange-dark)); }
.snpsf-stripe.w { background: linear-gradient(180deg, #fff, #f0eee9); }
.snpsf-stripe::after {
    content: '';
    position: absolute; bottom: -20px; left: 0;
    width: 100%; height: 25px;
    background: inherit;
    border-radius: 0 0 50% 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
}
.snpsf-aw-sh {
    position: absolute; bottom: -30px; left: 50%;
    transform: translateX(-50%);
    width: 90%; height: 20px;
    background: radial-gradient(ellipse, rgba(0,0,0,.25) 0%, transparent 70%);
    filter: blur(8px);
}

/* ── Store header gradient zone ── */
.snpsf-hdr-zone {
    background: linear-gradient(180deg, var(--c-orange) 0%, var(--c-surface) 100%);
    padding: 28px 16px 40px;
}

/* ── Vendor card ── */
.snpsf-vcard {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--c-white);
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,.13);
    animation: snpsf-fadein .6s ease forwards;
    position: relative;
    overflow: hidden;
}
.snpsf-vcard::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-red), var(--c-orange));
}
@keyframes snpsf-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.snpsf-vtop {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.snpsf-vleft {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.snpsf-vavt-wrap { position: relative; flex-shrink: 0; }
.snpsf-vavt {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    border: 3px solid var(--c-orange);
    box-shadow: 0 4px 16px rgba(26,47,111,.2);
    overflow: hidden;
}
.snpsf-vavt img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.snpsf-vavt-badge {
    position: absolute; bottom: 0; right: 0;
    background: var(--c-amber);
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    border: 2px solid var(--c-white);
}
.snpsf-vinfo { flex: 1; min-width: 160px; }
.snpsf-vtop-cat {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--c-red); margin-bottom: 4px;
}
.snpsf-vname-row {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.snpsf-vname { font-size: 20px; font-weight: 700; color: var(--c-text); }
.snpsf-plan-chip {
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--c-white);
}
.snpsf-vmeta {
    display: flex; align-items: center;
    gap: 12px; font-size: 12px; color: var(--c-muted);
    flex-wrap: wrap; margin-bottom: 10px;
}
.snpsf-online { display: flex; align-items: center; gap: 5px; }
.snpsf-online::before {
    content: '';
    width: 8px; height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: snpsf-pulse 2s infinite;
}
@keyframes snpsf-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .7; transform: scale(1.2); }
}
.snpsf-trusted-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--c-orange-light);
    border: 1.5px solid var(--c-orange-light);
    padding: 5px 12px; border-radius: 4px;
    font-size: 11px; font-weight: 700;
    color: var(--c-orange-dark);
    text-transform: uppercase; letter-spacing: .5px;
}
.snpsf-vstats {
    display: flex; gap: 28px;
    flex-wrap: wrap; align-items: center;
}
.snpsf-stat { text-align: center; min-width: 55px; }
.snpsf-stat-val {
    display: block;
    font-size: 26px; font-weight: 700; color: var(--c-orange-dark);
    line-height: 1.1;
}
.snpsf-stat-lbl {
    display: block;
    font-size: 10px; color: var(--c-muted);
    text-transform: uppercase; letter-spacing: .8px;
    margin-top: 3px;
}
.snpsf-view-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 24px; border-radius: 6px;
    font-size: 13px; font-weight: 700;
    text-decoration: none; color: var(--c-white);
    font-family: ABeeZee, sans-serif;
    background: linear-gradient(135deg, var(--c-red), var(--c-red-dark));
    box-shadow: 0 4px 14px rgba(255,41,74,.3);
    transition: all .2s;
    letter-spacing: .3px;
    white-space: nowrap;
}
.snpsf-view-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,41,74,.4);
}

/* ── Search bar — pill bar ── */
.snpsf-srch-zone {
    background: linear-gradient(180deg, var(--c-orange) 0%, var(--c-surface) 100%);
    padding: 20px 0 10px;
}
.snpsf-pill-bar-wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.snpsf-pill-bar {
    display: flex; align-items: center;
    background: var(--c-white);
    border-radius: 14px;
    border: 2px solid var(--c-orange-light);
    box-shadow: 0 4px 24px rgba(26,47,111,.12);
    padding: 6px 8px; gap: 2px; flex-wrap: wrap;
}
@media (max-width: 640px) {
    .snpsf-pill-bar { border-radius: 10px; padding: 8px; gap: 6px; }
}
.snpsf-kw-input {
    flex: 1; min-width: 120px;
    border: none; outline: none;
    padding: 10px 16px;
    font-family: ABeeZee, sans-serif;
    font-size: 13px; background: transparent; color: var(--c-text);
}
.snpsf-pill-sep {
    width: 1.5px; height: 26px;
    background: var(--c-orange-light);
    flex-shrink: 0; margin: 0 2px;
}
@media (max-width: 640px) { .snpsf-pill-sep { display: none; } }

/* Dropdown wrappers */
.snpsf-dd-wrap { position: relative; flex-shrink: 0; }
.snpsf-pill-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none;
    padding: 9px 14px;
    font-family: ABeeZee, sans-serif;
    font-size: 13px; cursor: pointer;
    color: var(--c-text); white-space: nowrap;
    border-radius: 8px; transition: background .15s;
}
.snpsf-pill-btn:hover { background: #fff7ed; }
.snpsf-pill-icon { font-size: 14px; }
.snpsf-pill-lbl { font-weight: 600; }
.snpsf-pill-chevron { font-size: 10px; color: var(--c-muted); }

/* Dropdown panel */
.snpsf-dd-panel {
    display: none;
    position: absolute; top: calc(100% + 8px); left: 0;
    background: var(--c-white);
    border: 1.5px solid var(--c-orange-light);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    z-index: 9999; min-width: 220px;
    flex-direction: column;
}
.snpsf-dd-search-wrap {
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--c-orange-light);
    flex-shrink: 0;
}
.snpsf-dd-search-wrap input {
    width: 100%; border: 1.5px solid var(--c-orange-light);
    border-radius: 8px; padding: 7px 12px;
    font-family: ABeeZee, sans-serif;
    font-size: 12px; outline: none; box-sizing: border-box;
}
.snpsf-dd-list { overflow-y: auto; max-height: 250px; padding: 6px 0; }
.snpsf-dd-item {
    padding: 9px 16px; font-size: 13px;
    cursor: pointer; color: var(--c-text);
    transition: background .12s;
}
.snpsf-dd-item:hover { background: var(--c-orange-light); color: var(--c-orange-dark); }
.snpsf-dd-active { font-weight: 700; color: var(--c-orange) !important; }

/* Filters + Search buttons */
.snpsf-filters-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--c-orange-light); color: var(--c-orange-dark);
    border: 1.5px solid var(--c-orange-light);
    border-radius: 8px; padding: 9px 18px;
    font-family: ABeeZee, sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: all .2s; flex-shrink: 0;
}
.snpsf-filters-btn:hover {
    background: var(--c-orange-light);
    border-color: var(--c-orange);
}
.snpsf-go-btn {
    display: flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, var(--c-red), var(--c-red-dark));
    color: var(--c-white);
    border: none; border-radius: 8px;
    padding: 10px 22px;
    font-family: ABeeZee, sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(26,47,111,.25);
    transition: all .2s; flex-shrink: 0;
}
.snpsf-go-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(26,47,111,.35);
}

/* Root cat header + subcat section */
.snpsf-root-hdr { margin-bottom: 14px; }
.snpsf-root-title-row {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 10px;
}
.snpsf-root-title {
    display: flex; align-items: center;
    gap: 10px; font-size: 22px; font-weight: 700; color: var(--c-text);
}
.snpsf-subcat-title {
    font-size: 16px; font-weight: 700; color: var(--c-text);
}
.snpsf-subcat-icon { color: var(--c-orange); margin-right: 4px; }

/* ── Main container ── */
.snpsf-main { max-width: 1100px; margin: 0 auto; padding: 28px 16px 52px; min-height: 400px; contain: layout; }

/* ── Category section ── */
.snpsf-sec { margin-bottom: 44px; }
.snpsf-sec-hdr {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 16px;
}
.snpsf-sec-title {
    display: flex; align-items: center;
    gap: 12px; font-size: 20px; font-weight: 700; color: var(--c-text);
}
.snpsf-pbadge {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--c-white);
}
.snpsf-seeall {
    color: var(--c-red); text-decoration: none;
    font-size: 13px; font-weight: 700;
    letter-spacing: .3px;
    display: flex; align-items: center; gap: 4px;
}
.snpsf-seeall:hover { text-decoration: underline; }

/* ── Subcategory pills — modern design ── */
.snpsf-pills {
    display: flex; gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
}
.snpsf-pills::-webkit-scrollbar { display: none; }
.snpsf-pill {
    padding: 7px 18px;
    background: var(--c-white);
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all .18s;
    font-family: ABeeZee, sans-serif;
    color: var(--c-muted);
    letter-spacing: .2px;
}
.snpsf-pill:hover {
    border-color: var(--c-orange);
    color: var(--c-orange-dark);
    background: var(--c-orange-light);
}
.snpsf-pill.active {
    background: var(--c-orange);
    color: var(--c-white);
    border-color: var(--c-orange);
    box-shadow: 0 3px 10px rgba(26,47,111,.25);
    font-weight: 700;
}

/* ── Carousel ── */
.snpsf-cw { position: relative; padding: 0 6px; }
.snpsf-ovf { overflow: hidden; border-radius: 10px; }
.snpsf-track {
    display: flex; gap: 14px;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    padding: 6px 2px 10px;
}
.snpsf-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    background: var(--c-white);
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    z-index: 10;
    font-size: 20px; font-weight: 700;
    transition: all .2s; color: var(--c-text);
    line-height: 1;
}
.snpsf-nav:hover {
    background: var(--c-red);
    border-color: var(--c-red);
    color: var(--c-white);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 14px rgba(255,41,74,.3);
}
.snpsf-nav.prev { left: -20px; }
.snpsf-nav.next { right: -20px; }

/* ── Product card ── */
.snpsf-card {
    width: 185px; flex-shrink: 0; cursor: pointer;
    animation: snpsf-fadein .5s ease both;
}
.snpsf-card:nth-child(1) { animation-delay: .04s; }
.snpsf-card:nth-child(2) { animation-delay: .08s; }
.snpsf-card:nth-child(3) { animation-delay: .12s; }
.snpsf-card:nth-child(4) { animation-delay: .16s; }
.snpsf-card:nth-child(5) { animation-delay: .20s; }
.snpsf-card:nth-child(6) { animation-delay: .24s; }
.snpsf-card:nth-child(7) { animation-delay: .28s; }
.snpsf-card:nth-child(8) { animation-delay: .32s; }

.snpsf-ci { position: relative; width: 100%; height: 295px; }
.snpsf-flip .snpsf-ci {
    transition: transform .6s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
}
.snpsf-flip:hover .snpsf-ci { transform: rotateY(180deg); }

.snpsf-face {
    position: absolute; width: 100%; height: 100%;
    border-radius: 12px; overflow: hidden;
    background: var(--c-white);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .25s;
}
.snpsf-flip .snpsf-face { backface-visibility: hidden; }
.snpsf-face.front { z-index: 2; }
.snpsf-card:hover .snpsf-face.front {
    box-shadow: 0 10px 30px rgba(26,47,111,.15);
}
.snpsf-face.back {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px; color: var(--c-white);
}
.snpsf-flip .snpsf-face.back { transform: rotateY(180deg); }

.snpsf-thumb {
    height: 160px;
    background: var(--c-orange-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    overflow: hidden; position: relative;
}
.snpsf-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Plan dot on card */
.snpsf-pdot {
    position: absolute; top: 8px; right: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px; font-weight: 800;
    color: var(--c-white); z-index: 3;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.snpsf-cbody { padding: 9px 12px; }
.snpsf-clbl {
    font-size: 10px; text-transform: uppercase;
    color: var(--c-orange-dark); font-weight: 700;
    letter-spacing: .6px; margin-bottom: 5px;
}
.snpsf-ctitle {
    font-size: 13px; font-weight: 600; line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; color: var(--c-text);
}
.snpsf-cprice { font-size: 16px; font-weight: 700; color: var(--c-orange-dark); }
.snpsf-cprice-free { font-size: 13px; font-weight: 600; color: #16a34a; }

/* Card back */
.snpsf-bk-avt {
    width: 62px; height: 62px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 10px;
    border: 2px solid rgba(255,255,255,.5);
    overflow: hidden;
}
.snpsf-bk-avt img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.snpsf-bkname {
    font-size: 13px; font-weight: 700;
    margin-bottom: 3px; text-align: center;
}
.snpsf-bkplan { font-size: 11px; opacity: .9; margin-bottom: 3px; }
.snpsf-bkcount { font-size: 11px; opacity: .75; margin-bottom: 14px; }
.snpsf-bklink {
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.6);
    color: var(--c-white);
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    font-family: ABeeZee, sans-serif;
    letter-spacing: .3px;
    transition: background .2s;
}
.snpsf-bklink:hover { background: rgba(255,255,255,.3); }

/* ── Gradient divider ── */
.snpsf-div {
    height: 2px; border: none; margin: 36px 0;
    background: linear-gradient(90deg, transparent, var(--c-red) 30%, var(--c-orange) 70%, transparent);
}

/* ── Top Sellers ── */
.snpsf-sellers-title {
    font-size: 20px; font-weight: 700;
    margin-bottom: 20px; color: var(--c-text);
    display: flex; align-items: center; gap: 10px;
}
.snpsf-sellers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
}
.snpsf-scard {
    background: var(--c-white);
    border-radius: 12px; padding: 16px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    transition: all .25s; cursor: pointer;
    text-decoration: none; display: block;
    border: 2px solid transparent;
}
.snpsf-scard:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(26,47,111,.10);
    border-color: var(--c-orange-light);
}
.snpsf-savt {
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin: 0 auto 10px;
    border: 3px solid var(--c-orange);
    overflow: hidden;
}
.snpsf-savt img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.snpsf-sname {
    font-size: 12px; font-weight: 700; color: var(--c-text);
    margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snpsf-smeta {
    display: flex; align-items: center;
    justify-content: center; gap: 5px;
    font-size: 10px; color: var(--c-muted); flex-wrap: wrap;
}
.snpsf-splan {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px; font-weight: 800;
    color: var(--c-white);
    letter-spacing: .5px;
}

/* ── Empty state ── */
.snpsf-empty {
    text-align: center; padding: 52px;
    color: var(--c-muted); font-style: italic; font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .snpsf-stripe { width: 40px; height: 60px; }
    .snpsf-stripe::after { bottom: -15px; height: 18px; }
    .snpsf-vtop { flex-direction: column; text-align: center; }
    .snpsf-vleft { justify-content: center; }
    .snpsf-vstats { justify-content: center; }
    .snpsf-vname-row { justify-content: center; }
    .snpsf-vmeta { justify-content: center; }
    .snpsf-nav.prev { left: 2px; }
    .snpsf-nav.next { right: 2px; }
    .snpsf-card { width: 158px; }
    .snpsf-ci { height: 255px; }
    .snpsf-thumb { height: 115px; }
    .snpsf-vcard { padding: 20px 16px; }
}
@media (max-width: 480px) {
    .snpsf-stripe { width: 30px; height: 50px; }
    .snpsf-vname { font-size: 18px; }
    .snpsf-vavt { width: 68px; height: 68px; font-size: 28px; }
    .snpsf-card { width: 143px; }
    .snpsf-ci { height: 238px; }
    .snpsf-thumb { height: 105px; }
}

/* ── Vendor banner (remplace vendor card) ── */
.snpsf-hdr-zone {
    padding: 20px 16px 24px;
    background: linear-gradient(180deg, rgba(26,47,111,.08) 0%, #F8F7F4 100%);
}
.snpsf-vcard { max-width: 1100px; margin: 0 auto; }
.snpsf-vbanner {
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    animation: snpsf-fadein .6s ease forwards;
}
.snpsf-vbanner-overlay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 28px;
    background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 100%);
}
.snpsf-vbanner-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.snpsf-vavt {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    border: 3px solid rgba(255,255,255,.7);
    overflow: hidden;
    flex-shrink: 0;
}
.snpsf-vavt img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.snpsf-vbanner-info { color: #fff; }
.snpsf-vtop-cat {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,.8); margin-bottom: 4px;
}
.snpsf-vname-row {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.snpsf-vname {
    font-size: 20px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.snpsf-plan-chip {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: #fff;
    background: rgba(255,255,255,.25);
    border: 1.5px solid rgba(255,255,255,.6);
}
.snpsf-vmeta {
    display: flex; align-items: center;
    gap: 12px; font-size: 12px;
    color: rgba(255,255,255,.85); flex-wrap: wrap;
}
.snpsf-online { display: flex; align-items: center; gap: 5px; }
.snpsf-online::before {
    content: '';
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: snpsf-pulse 2s infinite;
}

/* ── Vendor banner — sidebar + grid ── */
.snpsf-vbanner-wrap {
    display: flex;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.13);
    margin-bottom: 24px;
}
.snpsf-vsidebar {
    width: 190px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.snpsf-vsidebar-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .15;
}
.snpsf-vsidebar-content {
    position: relative; z-index: 1;
    padding: 18px 14px;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    height: 100%;
}
.snpsf-vavt-wrap { position: relative; margin-bottom: 10px; }
.snpsf-vavt {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    border: 3px solid rgba(255,255,255,.7);
    overflow: hidden;
}
.snpsf-vavt img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.snpsf-vavt-star {
    position: absolute; top: -3px; right: -3px;
    background: #fbbf24; border-radius: 50%;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; border: 2px solid #fff;
}
.snpsf-vsname {
    font-size: 14px; font-weight: 700;
    color: #fff; margin-bottom: 8px; line-height: 1.3;
}
.snpsf-vschip {
    display: inline-block;
    padding: 4px 12px; border-radius: 4px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: #fff;
    background: rgba(255,255,255,.25);
    border: 1.5px solid rgba(255,255,255,.6);
    margin-bottom: 10px;
}
.snpsf-vsstats {
    display: flex; gap: 14px; margin-bottom: 12px;
}
.snpsf-vsstat { text-align: center; }
.snpsf-vsstat strong {
    display: block;
    font-size: 16px; font-weight: 700; color: #fff; line-height: 1.1;
}
.snpsf-vsstat span {
    font-size: 9px; color: rgba(255,255,255,.7);
    text-transform: uppercase; letter-spacing: .5px;
}
.snpsf-vslink {
    display: inline-block;
    padding: 7px 14px;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 6px;
    color: #fff; text-decoration: none;
    font-size: 11px; font-weight: 700;
    font-family: ABeeZee, sans-serif;
    transition: background .2s;
    margin-top: auto;
}
.snpsf-vslink:hover { background: rgba(255,255,255,.35); }
/* Grid vignettes droite */
.snpsf-vgrid-wrap {
    flex: 1; background: #fff;
    padding: 14px 16px;
    display: flex; flex-direction: column;
}
.snpsf-vgrid-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: #1A2F6F; margin-bottom: 10px;
}
.snpsf-vgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; flex: 1;
}
.snpsf-vgrid-item {
    text-decoration: none; color: inherit;
    border-radius: 8px; overflow: hidden;
    border: 1.5px solid #f3f4f6;
    transition: all .2s; display: block;
}
.snpsf-vgrid-item:hover {
    border-color: #1A2F6F;
    box-shadow: 0 3px 10px rgba(26,47,111,.12);
    transform: translateY(-2px);
}
.snpsf-vgrid-thumb {
    height: 90px; background: #EEF0F8;
    display: flex; align-items: center;
    justify-content: center; font-size: 24px; overflow: hidden;
}
.snpsf-vgrid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.snpsf-vgrid-title {
    padding: 5px 7px 2px;
    font-size: 11px; font-weight: 600; color: #1c1917;
    display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden;
}
.snpsf-vgrid-price {
    padding: 1px 7px 6px;
    font-size: 12px; font-weight: 700; color: #1A1A1A;
}
@media (max-width: 768px) {
    .snpsf-vbanner-wrap { flex-direction: column; }
    .snpsf-vsidebar { width: 100%; }
    .snpsf-vgrid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Rendu navigateur des vignettes (shops.js) ──────────────────────────────
   Les cartes ne sont plus dans le HTML : un squelette occupe la place le temps
   de la reponse, pour que la page ne saute pas quand elles arrivent. */
.snpsf-fshop-sk{
  background:linear-gradient(100deg,#EFEBE4 30%,#F7F5F1 50%,#EFEBE4 70%);
  background-size:220% 100%;
  animation:snpsfSk 1.1s ease-in-out infinite;
  border-radius:14px; min-height:280px; flex:0 0 auto;
}
.snpsf-track .snpsf-fshop-sk{ min-height:230px; }
@keyframes snpsfSk{ from{background-position:180% 0} to{background-position:-40% 0} }
@media (prefers-reduced-motion:reduce){
  .snpsf-fshop-sk{ animation:none; background:#EFEBE4; }
}

/* Bannieres et vignettes sans image : aplat discret, jamais un emoji. */
.snpsf-fshop-banner-ph{
  width:100%; height:100%;
  background:linear-gradient(135deg,#1A1A1A,#EA7318);
}
.snpsf-fshop-slide-ph,
.snpsf-thumb-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; background:#EFEBE4; color:#9B9690;
}

/* Filtres charges a la demande : mot d'attente le temps du trajet. */
.snpsf-attr-loading{
  padding:18px 4px; color:#8A8578; font-size:14px;
}

/* Badge de plan : le template le cale a GAUCHE (left:8px) tandis que cette
   feuille le calait a droite (right:8px). Les deux cotes fixes etiraient le
   badge sur toute la vignette. On neutralise le cote droit ici : le template
   fait autorite. */
.snpsf-pdot{
  right:auto;
  max-width:calc(100% - 16px);
  white-space:nowrap;
}

/* ── Mode recherche : vitrines reléguées sous les résultats ──────────────────
   Elles gardent leur exposition, mais ne s'interposent plus entre la recherche
   et sa réponse. Une séparation nette marque le changement de propos. */
.snpsf-main-after-results{
  margin-top:42px; padding-top:34px;
  border-top:1px solid var(--ssg-line,#eceae5);
}
.snpsf-main-after-results::before{
  content:"Browse the shops";
  display:block; margin:0 0 22px;
  font-family:'DM Serif Display',Georgia,serif;
  font-size:22px; color:var(--ssg-ink,#1a1a1a);
}

/* ── Boutiques inserees dans le flux de resultats ────────────────────────────
   La rangee occupe toute la largeur de la grille : elle se pose entre deux
   lignes de resultats sans en bousculer aucune. Ses cartes suivent la meme
   trame que les resultats, pour que le defilement reste d'un seul tenant. */
.snpsf-band{
  /* Occuper TOUTE la largeur de la grille, quel que soit son nombre de
     colonnes. Sans !important, une regle plus specifique du theme pouvait
     rendre la rangee a une seule colonne : les 4 boutiques s'empilaient alors
     en hauteur et etiraient les vignettes voisines. */
  grid-column:1/-1 !important;
  display:grid !important;
  /* Le nombre de colonnes est pose par le JS (--snpsf-band-cols) pour coller
     exactement a la grille de resultats. auto-fit creait des colonnes vides. */
  grid-template-columns:repeat(var(--snpsf-band-cols,4),minmax(0,1fr));
  align-items:stretch;
  gap:inherit;
  margin:4px 0;
  width:100%;
}
/* Les cartes boutique sont taillees pour un carrousel (flex:0 0 260px) :
   dans la grille elles doivent au contraire remplir leur colonne. */
.snpsf-band .snpsf-fshop-card{
  flex:1 1 auto; min-width:0; width:100%;
  /* Sans cela le diaporama interne, en position absolue, deborde a gauche. */
  position:relative; overflow:hidden;
}
/* Hauteur alignee sur celle d'une vignette de resultat : une rangee plus
   haute casserait le rythme du defilement. */
.snpsf-band .snpsf-fshop-banner{ height:88px; }
.snpsf-band .snpsf-fshop-slideshow{ height:112px; }
.snpsf-band .snpsf-fshop-slide img{ width:100%; height:100%; object-fit:cover; }
.snpsf-band .snpsf-fshop-btn{ padding:8px 12px; }

@media (max-width:640px){
  .snpsf-band{ gap:14px; }
  .snpsf-band .snpsf-fshop-banner{ height:76px; }
  .snpsf-band .snpsf-fshop-slideshow{ height:96px; }
}