.vxshop-app {
    background: var(--vx-bg-body);
    border-radius: var(--vx-radius);
    padding: 0px 0 90px 0;
    font-family: var(--vx-font-family);
    color: var(--vx-text);width: 100%;
      max-width: 1480px;
    margin: 0 auto;
    margin-top: 46px;
    border-radius: 20px;
}

.vxshop-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.vxshop-card.is-in {
    opacity: 1;
    transform: translateY(0);
}
.vxpick-name, .vxpick-item{cursor:pointer;}
.vxpick-name, .vxpick-item:hover{opacity:0.7;}


.vxfoto-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vxfoto-tools { display: flex; align-items: center; gap: 12px; }
.vxfoto-bg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--vx-text-2); }
.vxfoto-foot-actions { display: flex; gap: 8px; }

.vxshop-status {
	display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    margin-bottom: 18px;
    border-radius: var(--vx-radius);
    font-size: 1.3rem;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
}

.vxshop-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.vxshop-dot-on  { background: var(--vx-success); box-shadow: 0 0 0 4px var(--vx-primary-light); }
.vxshop-dot-off { background: var(--vx-danger); }
.vxshop-status-lbl { font-weight: 700; letter-spacing: .02em; }
.vxshop-slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--vx-border);
    border-radius: 999px;
    color: var(--vx-text-2);
    font-size: .82rem;
    font-weight: 600;
    background: var(--vx-bg-body);
}

.vxshop-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--vx-bg-body);
    padding: 10px 16px;

}

.vxshop-cats {
    display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 240px;
    scrollbar-width: none; padding-bottom: 4px;
}
.vxshop-cats::-webkit-scrollbar { display: none; }
.vxshop-cat {
    flex: 0 0 auto; padding: 9px 16px; cursor: pointer;
    border: 1px solid var(--vx-border);
    border-radius: 999px;
    background: transparent; color: var(--vx-text-2);
    font-size: .88rem; font-weight: 600; white-space: nowrap;
    font-family: var(--vx-font-family);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vxshop-cat:hover { background: var(--vx-bg-hover); color: var(--vx-text); }
.vxshop-cat.is-on {
    background: var(--vx-primary); color: var(--vx-text-inv);
    border-color: var(--vx-primary);
}

.vxshop-search-wrap { position: relative; flex: 0 0 auto; min-width: 220px; margin-top: 10px;}
.vxshop-search-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--vx-text-3); pointer-events: none;
}
.vxshop-search {
    width: 100%; padding: 10px 12px 10px 38px;
    border: 1px solid var(--vx-border); border-radius: 999px;
    background: var(--vx-bg-input); color: var(--vx-text);
    font-size: .9rem; font-family: var(--vx-font-family);
    outline: none; transition: border-color .18s ease;
}
.vxshop-search:focus { border-color: var(--vx-primary); }

.vxshop-grid-wrap { transition: opacity .2s ease;     padding: 10px; }
.vxshop-grid-wrap.is-busy { opacity: .4; pointer-events: none; }
.vxshop-grid {
    display: grid; gap:12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.vxshop-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    background: var(--vx-bg-card);
    overflow: hidden; position: relative;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    will-change: transform;
}
.vxshop-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vx-shadow-lg);
    border-color: var(--vx-primary);
}
.vxshop-media {
    position: relative; aspect-ratio: 4/4; overflow: hidden;

}
.vxshop-media img {
    width: 100%; display: block;
    transition: transform .4s ease;
}
.vxshop-card:hover .vxshop-media img { transform: scale(1.06); }
.vxshop-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--vx-text-3);
}
.vxshop-flag {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--vx-accent); color: var(--vx-text-inv);
    font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
.vxshop-flag-sale { background: var(--vx-danger); }

.vxshop-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.vxshop-name {
    margin: 0 0 6px; font-size: 1.02rem; font-weight: 700;
    line-height: 1.25; color: var(--vx-text);
}
.vxshop-desc {
    margin: 0 0 14px; font-size: .84rem; line-height: 1.5;
    color: var(--vx-text-2); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vxshop-foot {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
}
.vxshop-price { display: flex; align-items: baseline; gap: 7px; }
.vxshop-price-now { font-size: 1.12rem; font-weight: 800; color: var(--vx-text); }
.vxshop-price-old {
    font-size: .84rem; color: var(--vx-text-3); text-decoration: line-through;
}
.vxshop-from { font-size: .72rem; color: var(--vx-text-3); }

.vxshop-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--vx-radius);
    font-size: .88rem; font-weight: 500;
    font-family: var(--vx-font-family);
    transition: opacity .18s ease, transform .12s ease, background .18s ease;
}
.vxshop-btn:active { transform: scale(.97); }
.vxshop-btn-primary { background: var(--vx-primary); color: var(--vx-text-inv); }
.vxshop-btn-primary:hover { background: var(--vx-primary-hover); }
.vxshop-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.vxshop-btn-ghost {
    background: transparent; color: var(--vx-text-2);
    border-color: var(--vx-border);
}
.vxshop-btn-ghost:hover { background: var(--vx-bg-hover); color: var(--vx-text); }
.vxshop-btn-block { width: 100%; }
.vxshop-btn-grow { flex: 1; justify-content: space-between; }
.vxshop-btn-sm { padding: 5px 10px; font-size: .72rem; }

.vxshop-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 400;
    display: none; align-items: center; gap: 10px;
    padding: 13px 20px; cursor: pointer; border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vx-primary) 0%, var(--vx-primary-2) 100%);
    color: var(--vx-text-inv);
    box-shadow: 0 10px 30px var(--vx-primary-light), 0 4px 12px rgba(0,0,0,.15);
    font-family: var(--vx-font-family); font-weight: 800; font-size: .92rem;
    transition: transform .18s ease;
}
.vxshop-fab.is-on { display: inline-flex; }
.vxshop-fab:active { transform: scale(.95); }
.vxshop-fab-badge {
    position: absolute; top: -5px; left: -5px;
    min-width: 22px; height: 22px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--vx-danger); color: var(--vx-text-inv);
    font-size: .72rem; font-weight: 800;
}

.vxshop-overlay {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: var(--vx-overlay);
    backdrop-filter: blur(3px);
}
.vxshop-overlay.is-on { display: block; }

.vxshop-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 501;
    width: 420px; max-width: 92vw;
    display: flex; flex-direction: column;
    background: var(--vx-bg-card);
    border-left: 1px solid var(--vx-border);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.vxshop-drawer.is-on { transform: translateX(0); }
.vxshop-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--vx-border); flex: 0 0 auto;
}
.vxshop-drawer-title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.vxshop-drawer-body { flex: 1; overflow-y: auto; padding: 10px 10px; }
.vxshop-drawer-foot {
    flex: 0 0 auto; padding: 16px 20px 20px;
    border-top: 1px solid var(--vx-border);
    background: var(--vx-bg-body);
    display: flex; flex-direction: column; gap: 9px;
}
.vxshop-sum {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: .92rem; color: var(--vx-text-2);
}
.vxshop-sum strong { font-size: 1.35rem; font-weight: 800; color: var(--vx-text); }
.vxshop-fine { margin: 0 0 4px; font-size: .74rem; color: var(--vx-text-3); line-height: 1.4; }

.vxshop-line {
    display: flex;
    gap: 12px;
    border: 1px solid var(--vx-border);
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 15px;
}
.vxshop-line:last-child { border-bottom: none; }
.vxshop-line-main { flex: 1; min-width: 0; }
.vxshop-line-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.vxshop-line-name { font-size: .94rem; font-weight: 700; }
.vxshop-line-tot { font-size: .94rem; font-weight: 800; white-space: nowrap; }
.vxshop-line-vars {
    margin: 5px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 5px;
}
.vxshop-line-vars li {
    padding: 2px 8px; border-radius: 999px;
    background: var(--vx-bg-hover); color: var(--vx-text-2);
    font-size: .72rem;
}
.vxshop-line-note {
    margin: 6px 8px 0; font-size: .76rem; color: var(--vx-text-3); font-style: italic;
}
.vxshop-line-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.vxshop-stepper {
    display: inline-flex; align-items: center;
    border: 1px solid var(--vx-border); border-radius: 999px; overflow: hidden;
}
.vxshop-step {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--vx-text-2); transition: background .15s ease;
}
.vxshop-step:hover { background: var(--vx-bg-hover); color: var(--vx-text); }
.vxshop-step-val {
    min-width: 30px; text-align: center; font-size: .86rem; font-weight: 700;
}
.vxshop-del {
    background: transparent; border: none; cursor: pointer;
    color: var(--vx-text-3); padding: 4px; display: flex;
    transition: color .15s ease;
}
.vxshop-del:hover { color: var(--vx-danger); }

.vxshop-modal {
    display: none; position: fixed; top: 50%; left: 50%; z-index: 501;
    transform: translate(-46%, -54%);
    max-width: 25vw; max-height: 90vh;
    flex-direction: column; overflow: hidden;
    background: var(--vx-bg-card);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.vxshop-modal.is-on { display: flex; }
.vxshop-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--vx-border); flex: 0 0 auto;
}
.vxshop-modal-titles { min-width: 0; }
.vxshop-modal-title { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; }
.vxshop-modal-desc { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--vx-text-2); }
.vxshop-modal-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.vxshop-modal-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 16px 22px 18px;
    border-top: 1px solid var(--vx-border);
    background: var(--vx-bg-body);
}

.vxshop-x {
    flex: 0 0 auto; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--vx-border);
    border-radius: 50%; cursor: pointer; color: var(--vx-text-2);
    transition: background .15s ease, color .15s ease;
}
.vxshop-x:hover { background: var(--vx-bg-hover); color: var(--vx-text); }

.vxshop-group { margin-bottom: 22px; }
.vxshop-group:last-child { margin-bottom: 0; }
.vxshop-group-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
}
.vxshop-group-lbl {
    font-size: .82rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em; color: var(--vx-text);
}
.vxshop-group-hint {
    font-size: .72rem; color: var(--vx-text-3);
    padding: 2px 8px; border: 1px solid var(--vx-border); border-radius: 999px;
}
.vxshop-opts {display: grid;grid-template-columns: 1fr;gap: 10px;align-items: start; }

.vxshop-opt {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; cursor: pointer;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    background: var(--vx-bg-body);
    transition: border-color .16s ease, background .16s ease;
}
.vxshop-opt:hover { border-color: var(--vx-primary); background: var(--vx-bg-hover); }
.vxshop-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vxshop-opt.is-on {
    border-color: var(--vx-primary);
    background: var(--vx-primary-light);
}
.vxshop-tick {
    flex: 0 0 auto; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--vx-border);
    background: var(--vx-bg-card);
    color: var(--vx-text-inv);
    transition: background .16s ease, border-color .16s ease;
}
.vxshop-tick-radio { border-radius: 50%; }
.vxshop-tick-check { border-radius: 5px; }
.vxshop-tick svg { opacity: 0; transition: opacity .16s ease; }
.vxshop-opt.is-on .vxshop-tick {
    background: var(--vx-primary); border-color: var(--vx-primary);
}
.vxshop-opt.is-on .vxshop-tick svg { opacity: 1; }
.vxshop-opt-name { flex: 1; font-size: .9rem; font-weight: 400; }
.vxshop-opt-price {
    font-size: .84rem; font-weight: 700; color: var(--vx-text-2); white-space: nowrap;
}
.vxshop-opt.is-on .vxshop-opt-price { color: var(--vx-text); }

.vxshop-note-lbl {
    display: block; margin-bottom: 8px;
    font-size: .82rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
}
.vxshop-note {
    width: 100%; min-height: 72px; resize: vertical;
    padding: 11px 13px;
    border: 1px solid var(--vx-border); border-radius: var(--vx-radius);
    background: var(--vx-bg-input); color: var(--vx-text);
    font-size: .88rem; font-family: var(--vx-font-family);
    outline: none; transition: border-color .16s ease;
}
.vxshop-note:focus { border-color: var(--vx-primary); }

.vxshop-qty {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    border: 1px solid var(--vx-border); border-radius: 999px; overflow: hidden;
}
.vxshop-qty-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--vx-text-2); transition: background .15s ease;
}
.vxshop-qty-btn:hover { background: var(--vx-bg-hover); color: var(--vx-text); }
.vxshop-qty-val {
    min-width: 34px; text-align: center; font-size: .98rem; font-weight: 800;
}

.vxshop-toast {
    position: fixed; z-index: 600;
    left: 50%; bottom: 26px; transform: translate(-50%, 200%);
    visibility: hidden;
    display: flex; align-items: center; gap: 13px;
    padding: 13px 16px;
    background: var(--vx-bg-card);
    border: 1px solid var(--vx-border);
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(0,0,0,.2);
    transition: transform .34s cubic-bezier(.22,.61,.36,1),
                visibility 0s linear .34s;
    max-width: 92vw;
}
.vxshop-toast.is-on {
    transform: translate(-50%, 0);
    visibility: visible;
    transition: transform .34s cubic-bezier(.22,.61,.36,1),
                visibility 0s;
}
.vxshop-toast-ico {
    flex: 0 0 auto; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--vx-success); color: var(--vx-text-inv);
}
.vxshop-toast-txt { display: flex; flex-direction: column; min-width: 0; }
.vxshop-toast-txt strong { font-size: .84rem; font-weight: 800; }
.vxshop-toast-txt span {
    font-size: .8rem; color: var(--vx-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vxshop-toast-cta {
    flex: 0 0 auto; padding: 8px 15px; cursor: pointer; border: none;
    border-radius: 999px;
    background: var(--vx-primary); color: var(--vx-text-inv);
    font-size: .8rem; font-weight: 800; font-family: var(--vx-font-family);
}

.vxshop-empty {
    grid-column: 1 / -1;
    padding: 60px 20px; text-align: center; color: var(--vx-text-3);
}
.vxshop-empty svg { margin-bottom: 14px; opacity: .5; }
.vxshop-empty p { margin: 0; font-size: .92rem; }
.vxshop-skel {
    height: 300px; border-radius: var(--vx-radius);
    background: linear-gradient(90deg,
        var(--vx-bg-body) 0%, var(--vx-bg-hover) 50%, var(--vx-bg-body) 100%);
    background-size: 200% 100%;
    animation: vxshopShine 1.3s ease-in-out infinite;
}
@keyframes vxshopShine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 640px) {
    .vxshop-app { padding-bottom: 100px; }
    .vxshop-grid { grid-template-columns: 1fr; gap: 12px; }

    .vxshop-card { flex-direction: row; align-items: stretch; }
    .vxshop-card:hover { transform: none; box-shadow: none; }
    .vxshop-media { flex: 0 0 120px; aspect-ratio: auto; }
    .vxshop-body { padding: 12px 13px; }
    .vxshop-name { font-size: .95rem; }
    .vxshop-desc { -webkit-line-clamp: 2; font-size: .78rem; margin-bottom: 10px; }
    .vxshop-flag { top: 6px; left: 6px; padding: 3px 7px; font-size: .62rem;max-width: 49px; }

    .vxshop-toolbar { gap: 10px;top: 57px !important;}
    .vxshop-search-wrap { width: 100%; min-width: 0; }
	.vxshop-fab.is-on{display:none}

    .vxshop-fab { left: 14px; right: 14px; bottom: 14px; justify-content: center; }
    .vxshop-drawer { width: 100%; max-width: 100%; }

    .vxshop-modal {
        top: auto; bottom: 0; left: 0;
        transform: none; width: 100%; max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        border-left: none; border-right: none; border-bottom: none;
    }
    .vxshop-modal.is-on { animation: vxshopUp .3s cubic-bezier(.22,.61,.36,1); }
    @keyframes vxshopUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .vxshop-modal-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .vxshop-toast {
        left: 12px; right: 12px;
        bottom: calc(74px + env(safe-area-inset-bottom));
        transform: translateY(300%);
        visibility: hidden;
    }
    .vxshop-toast.is-on {
        transform: translateY(0);
        visibility: visible;
    }
	.vxshop-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
	}
	.vxshop-opt-name {
    flex: 1;
    font-size: .9rem;
    font-weight: 400;
	}
	.vxshop-opt {
    gap: 11px;
    padding: 5px 13px;
}

.vxshop-opts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}
.vxshop-btn {
    padding: 7px 13px;
	gap:5px;
}
.vxshop-modal-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 10px 18px;
}
}

.vxshop-rating {
    display: flex; align-items: center; gap: 2px;
    margin-bottom: 8px; color: var(--vx-accent);
}
.vxshop-rating-n {
    font-size: .74rem; color: var(--vx-text-3); margin-left: 5px; font-weight: 600;
}

.vxshop-rev-modal { width: 540px; }
.vxshop-rev-list { display: flex; flex-direction: column; gap: 12px; }
.vxshop-rev-item {
    padding: 14px; border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius); background: var(--vx-bg-body);
}
.vxshop-rev-head2 {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.vxshop-rev-ava2 {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--vx-primary-light); color: var(--vx-primary);
    font-weight: 800; font-size: .85rem;
}
.vxshop-rev-who2 { flex: 1; min-width: 0; }
.vxshop-rev-name2 { font-size: .86rem; font-weight: 700; line-height: 1.2; }
.vxshop-rev-zone {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
    font-size: .72rem; color: var(--vx-text-3);
}
.vxshop-rev-zone svg { flex: 0 0 auto; }
.vxshop-rev-stars2 {
    display: inline-flex; gap: 1px; color: var(--vx-accent); flex: 0 0 auto;
}
.vxshop-rev-stars2 svg { display: block; }
.vxshop-rev-star-off2 { color: var(--vx-border); display: inline-flex; }
.vxshop-rev-txt { font-size: .84rem; line-height: 1.5; color: var(--vx-text-2); margin: 0; }
.vxshop-rev-diner2 {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--vx-bg-hover); color: var(--vx-text-2);
    font-size: .72rem; font-weight: 600;
}
.vxshop-rev-diner2 svg { flex: 0 0 auto; }
.vxshop-rev-empty { text-align: center; padding: 30px; color: var(--vx-text-3); font-size: .88rem; }
.vxshop-rev-foot {
    flex: 0 0 auto; padding: 14px 20px 18px;
    border-top: 1px solid var(--vx-border); background: var(--vx-bg-body);
}
.vxshop-rating { cursor: pointer; transition: opacity .15s ease; }
.vxshop-rating:hover { opacity: .65; }

.vxshop-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vxshop-media { position: relative; cursor: pointer; }
.vxshop-name  { cursor: pointer; }

.vxshop-eye {
    position: absolute;
    bottom: 35%;
    right: 43%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--vx-overlay);
    color: #fff;
    opacity: .7;                 
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;        
}

@media (hover: hover) and (min-width: 768px) {
    .vxshop-eye { opacity: 0; }
    .vxshop-media:hover .vxshop-eye { opacity: 1; transform: scale(1.05); }
}

.vxshop-modal-hero {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--vx-bg-hover);
    overflow: hidden;
    flex: 0 0 auto;
}
.vxshop-modal-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vxshop-modal-hero.is-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--vx-text-3);
}

.vxshop-modal-x-float {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    background: var(--vx-overlay);
    color: #fff;
    border-radius: 50%;
}

.vxshop-modal { overflow: hidden; }

.vxshop-modal-desc {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
}

@media (max-width: 767px) {
    .vxshop-modal {
        top: 0; right: 0; left: auto;
        transform: translateX(100%);
        width: 92vw; max-width: 420px;
        height: 100%; max-height: 100%;
        border-radius: 0;
        transition: transform .28s ease;
    }
    .vxshop-modal.is-on { transform: translateX(0); }
	.vxshop-eye{display:none;}
}

.vxshop-line-desc {
    margin: 6px 0 0;
    padding-top: 6px;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--vx-text-2);
}

.vxshop-flash {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 9999;
    max-width: 90vw;
    padding: 11px 18px;
    border-radius: var(--vx-radius);
    background: var(--vx-bg-card);
    color: var(--vx-text);
    border: 1px solid var(--vx-border);
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    pointer-events: none;
}
.vxshop-flash.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
}

.vxshop-flash-error   { border-left: 3px solid var(--vx-danger); }
.vxshop-flash-info    { border-left: 3px solid var(--vx-info); }
.vxshop-flash-success { border-left: 3px solid var(--vx-success); }

.vxshop-confirm {
    position: fixed; inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.vxshop-confirm.is-on { display: flex; }
.vxshop-confirm-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}
.vxshop-confirm-box {
    position: relative;
    width: 340px; max-width: 90vw;
    background: var(--vx-bg-card);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    padding: 22px 20px 18px;
    text-align: center;
}
.vxshop-confirm-msg {
    margin: 0 0 18px;
    font-size: .96rem;
    color: var(--vx-text);
    line-height: 1.4;
}
.vxshop-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.vxshop-confirm-actions .vxshop-btn { flex: 1; }

#vxshopGrid.vxshop-grid {
    display: block;
}

.vxshop-toolbar {
    position: sticky;
    top: 68px;
    z-index: 20;
    background: var(--vx-bg-body);
    padding-top: 8px;
    padding-bottom: 8px;
}

.vxshop-section {
    margin: 0 0 32px 0;
    scroll-margin-top: 90px; 
}

.vxshop-sec-head {
	display: flex;
    align-items: center;
    gap: 14px;
    margin: 0px 0px 20px 0px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vx-border);
    width: 100%;
}
.vxshop-sec-ico {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    border-radius: var(--vx-radius);
    overflow: hidden;
	background: #fff;
    padding: 5px;
    border: 1px solid #cccccc9e;
}
.vxshop-sec-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vxshop-sec-titles {
    min-width: 0;
}
.vxshop-sec-title {
    margin: 0 0 2px 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--vx-text);
    line-height: 1.2;
}
.vxshop-sec-desc {
    margin: 0;
    font-size: .92rem;
    color: var(--vx-text-2);
    line-height: 1.4;
}

.vxshop-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: var(--vx-gap, 16px);
        align-items: stretch;
}

@media (max-width: 640px) {
    .vxshop-cards {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .vxshop-sec-title { font-size: 1.15rem;}
	.vxshop-sec-head {padding-top: 42px;}
}

.vxshop-anim-slide {
    opacity: 0;
    transform: translate3d(0, -24px, 0);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.vxshop-anim-fade {
    opacity: 0;
    transition: opacity .35s ease;
    will-change: opacity;
}

.vxshop-anim-slide.is-in,
.vxshop-anim-fade.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .vxshop-anim-slide,
    .vxshop-anim-fade {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

.vxshop-media {
    position: relative; 
}
.vxshop-cat-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 85%;
    padding: 3px 10px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .2px;
    color: var(--vx-text-inv);
        background: var(--vx-warning);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 2;
	text-transform: uppercase;
}

@media (min-width: 768px) {
    .vxshop-cat-badge {
        opacity: 0;
        transition: opacity .2s ease;
    }
    .vxshop-card:hover .vxshop-cat-badge {
        opacity: 1;
    }
}

.vxfoto-btn{position:absolute;top:8px;left:8px;width:34px;height:34px;border:none;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:3;transition:background .15s}
.vxfoto-btn:hover{background:rgba(0,0,0,.8)}

.vxfoto-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
    transition:opacity .2s;z-index:900}
.vxfoto-overlay.is-on{opacity:1;visibility:visible}
.vxfoto-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);width:min(92vw,460px);
    background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s;z-index:901;overflow:hidden}
.vxfoto-modal.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.vxfoto-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eee}
.vxfoto-head h3{margin:0;font-size:16px}

.vxfoto-dropzone{padding:22px}
.vxfoto-dropzone.is-hidden{display:none}
.vxfoto-dz-inner{border:2px dashed #cbd2dc;border-radius:12px;padding:34px 18px;text-align:center;
    color:#6b7280;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,background .15s}
.vxfoto-dz-inner:hover{border-color:#f4820a;background:#fffaf3}
.vxfoto-dz-txt{margin:0;font-weight:600;color:#374151}
.vxfoto-dz-or{font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.6}

.vxfoto-stage{display:none;padding:16px}
.vxfoto-stage.is-on{display:block}
.vxfoto-crop-wrap{width:100%;height:320px;background:#111;border-radius:10px;overflow:hidden}
.vxfoto-crop-wrap img{display:block;max-width:100%}
.vxfoto-hint{margin:10px 2px 0;font-size:12px;color:#6b7280;text-align:center}

.vxfoto-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid #eee}

.vxshop-optsheet-ov {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 700;                 
    background: var(--vx-overlay);
    backdrop-filter: blur(3px);
}
.vxshop-optsheet-ov.is-on { display: block; }

.vxshop-optsheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 701;                 
    width: 100%;
    max-width: 560px;             
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--vx-bg-card);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 60px rgba(0,0,0,.28);

    transform: translate(-50%, 100%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.vxshop-optsheet.is-on {
    transform: translate(-50%, 0);
}

.vxshop-optsheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--vx-border);
}
.vxshop-optsheet-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}
.vxshop-optsheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
}
.vxshop-optsheet-foot {
    flex: 0 0 auto;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vx-border);
    background: var(--vx-bg-body);
}

.vxshop-optsheet-trigger {
    justify-content: space-between;
    margin-bottom: 16px;
}
.vxshop-optsheet-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--vx-primary);
    color: var(--vx-text-inv);
    font-size: .78rem;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .vxshop-optsheet { transition: none; }
}

.vxshop-hours-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 4px auto 14px; 
}
.vxshop-hours-cta-lbl {
    font-size: .86rem; font-weight: 600; color: var(--vx-text-2);
}
.vxshop-hours-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--vx-primary); border-radius: 50%;
    background: transparent; color: var(--vx-primary);
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.vxshop-hours-btn:hover { background: var(--vx-primary); color: var(--vx-text-inv); }

.vxshop-hours-ov {
    position: fixed; inset: 0; z-index: 700;
    background: var(--vx-overlay); backdrop-filter: blur(3px);
}
.vxshop-hours-modal {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 701; width: 92vw; max-width: 620px; max-height: 86vh;
    display: flex; flex-direction: column;
    background: var(--vx-bg-card); border: 1px solid var(--vx-border);
    border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.vxshop-hours-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--vx-border); flex: 0 0 auto;
}
.vxshop-hours-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.vxshop-hours-body { padding: 18px 20px; overflow-y: auto; }

.vxshop-hours-sede { margin-bottom: 22px; }
.vxshop-hours-sede:last-child { margin-bottom: 0; }
.vxshop-hours-sede-name {
    margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--vx-primary);
    padding-bottom: 8px; border-bottom: 2px solid var(--vx-primary-light);
}
.vxshop-hours-block { margin-bottom: 14px; }
.vxshop-hours-block-title {
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--vx-text-3); margin-bottom: 6px;
}
.vxshop-hours-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-radius: 8px; font-size: .9rem;
}
.vxshop-hours-row.is-today { background: var(--vx-primary-light); font-weight: 700; }
.vxshop-hours-day { color: var(--vx-text-2); }
.vxshop-hours-row.is-today .vxshop-hours-day { color: var(--vx-primary); }
.vxshop-hours-time { color: var(--vx-text); font-weight: 600; }
.vxshop-hours-closed { color: var(--vx-text-3); font-style: italic; }

@media (min-width: 600px) {

    .vxshop-hours-sede { display: grid; grid-template-columns: 1fr; }
}
/* RATING nelle card */
.vxshop-rating { margin: 2px 0 4px; }
.vxrev-stars { display: inline-flex; position: relative; vertical-align: middle; }
.vxrev-stars-base, .vxrev-stars-fill { display: inline-flex; }
.vxrev-stars-base { color: var(--vx-border); }
.vxrev-stars-fill {
    position: absolute; top: 0; left: 0; overflow: hidden;
    color: var(--vx-warning); white-space: nowrap;
}
.vxrev-stars-fill svg { fill: var(--vx-warning); }
.vxrev-count { font-size: 11px; color: var(--vx-text-3); margin-left: 5px; vertical-align: middle; }

/* AZIONI nel modal prodotto */
.vxrev-actions { display: flex; gap: 10px; margin-top: 14px; }
.vxrev-actions .vxshop-btn { flex: 1; }

/* LISTA recensioni nel modal prodotto */
.vxrev-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.vxrev-empty { color: var(--vx-text-3); font-size: 13px; text-align: center; padding: 14px 0; }
.vxrev-item { display: flex; gap: 10px; }
.vxrev-item-photo {
    flex: 0 0 60px; width: 60px; height: 60px; border-radius: var(--vx-radius);
    overflow: hidden; background: var(--vx-bg-hover); border: 1px solid var(--vx-border);
}
.vxrev-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vxrev-item-main { flex: 1; min-width: 0; }
.vxrev-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.vxrev-item-name { font-weight: 700; font-size: 13px; color: var(--vx-text); }
.vxrev-item-text { font-size: 12px; color: var(--vx-text-2); line-height: 1.45; margin: 2px 0; }
.vxrev-item-date { font-size: 10px; color: var(--vx-text-3); }

/* MODAL VOTO */
.vxrev-overlay {
    display: none; position: fixed; inset: 0;
    background: var(--vx-overlay); backdrop-filter: blur(2px); z-index: 1000;
}
.vxrev-overlay.is-on { display: block; }
.vxrev-modal {
    display: none; position: fixed; z-index: 1001;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: calc(100% - 32px); max-width: 460px; max-height: 90vh;
    background: var(--vx-bg-card); border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius); box-shadow: var(--vx-shadow);
    flex-direction: column;
}
.vxrev-modal.is-on { display: flex; }
.vxrev-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--vx-border);
    background: var(--vx-bg-header); flex: 0 0 auto;
}
.vxrev-title { font-size: 14px; font-weight: 700; color: var(--vx-text); }
.vxrev-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.vxrev-prod { display: flex; align-items: center; gap: 10px; }
.vxrev-prod-ph {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--vx-radius);
    overflow: hidden; background: var(--vx-bg-hover); border: 1px solid var(--vx-border);
}
.vxrev-prod-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vxrev-prod-name { font-weight: 700; font-size: 14px; color: var(--vx-text); }

/* stelle cliccabili */
.vxrev-stars-pick { display: flex; gap: 4px; }
.vxrev-star {
    width: 34px; height: 34px; padding: 0; border: none; background: none;
    cursor: pointer; color: var(--vx-border);
    -webkit-mask: no-repeat center / 26px 26px; mask: no-repeat center / 26px 26px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    background-color: var(--vx-border);
}
.vxrev-star.is-on { background-color: var(--vx-warning); }

.vxrev-input, .vxrev-text { width: 100%; }
.vxrev-text { resize: vertical; min-height: 60px; font-family: var(--vx-font-family); }

/* foto */
.vxrev-dz {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px; border: 2px dashed var(--vx-border); border-radius: var(--vx-radius);
    color: var(--vx-text-3); text-align: center; cursor: pointer;
}
.vxrev-dz.is-hidden { display: none; }
.vxrev-dz-txt { font-size: 13px; font-weight: 600; color: var(--vx-text-2); }
.vxrev-dz-req { font-size: 11px; color: var(--vx-danger); font-weight: 600; }
.vxrev-stage { display: none; }
.vxrev-stage.is-on { display: block; }
.vxrev-crop-wrap { max-height: 300px; }
.vxrev-crop-wrap img { max-width: 100%; display: block; }

.vxrev-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 12px 16px; border-top: 1px solid var(--vx-border); flex: 0 0 auto;
}
/* ── CIPRIA MODAL VOTO ── */

/* header con accento brand */
.vxrev-head {
    background: linear-gradient(180deg, var(--vx-bg-header), var(--vx-bg-card));
    position: relative;
}
.vxrev-head::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--vx-primary), transparent);
    opacity: .5;
}
.vxrev-title { letter-spacing: .2px; }

/* prodotto: pill morbida */
.vxrev-prod {
    padding: 8px 10px; background: var(--vx-bg-hover);
    border: 1px solid var(--vx-border); border-radius: var(--vx-radius);
}
.vxrev-prod-ph { box-shadow: 0 2px 6px rgba(0,0,0,.10); }

/* stelle: più grandi, con hover a cascata e piccolo rimbalzo */
.vxrev-stars-pick { gap: 6px; justify-content: center; padding: 4px 0; }
.vxrev-star {
    width: 40px; height: 40px;
    -webkit-mask-size: 32px 32px; mask-size: 32px 32px;
    transition: background-color .12s ease, transform .12s ease;
}
.vxrev-star:hover { transform: scale(1.15); }
.vxrev-star.is-on { transform: scale(1.06); }
/* effetto "riempimento fino al cursore" all'hover */
.vxrev-stars-pick:hover .vxrev-star { background-color: var(--vx-warning); }
.vxrev-stars-pick .vxrev-star:hover ~ .vxrev-star { background-color: var(--vx-border); }

/* input: focus con anello brand */
.vxrev-input, .vxrev-text {
    border: 1px solid var(--vx-border); border-radius: var(--vx-radius);
    padding: 10px 12px; background: var(--vx-bg-input); color: var(--vx-text);
    font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease;
}
.vxrev-input::placeholder, .vxrev-text::placeholder { color: var(--vx-text-3); }
.vxrev-input:focus, .vxrev-text:focus {
    outline: none; border-color: var(--vx-primary);
    box-shadow: 0 0 0 3px var(--vx-primary-light);
}

/* dropzone: più viva, hover e stato "ok" */
.vxrev-dz {
    background: var(--vx-bg-hover);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vxrev-dz:hover {
    border-color: var(--vx-primary); color: var(--vx-text-2);
    background: var(--vx-primary-light);
}
.vxrev-dz svg { color: var(--vx-primary); opacity: .8; }
.vxrev-dz-req::before {
    content: '•'; margin-right: 4px;
}

/* stage crop: cornice pulita */
.vxrev-stage.is-on {
    border: 1px solid var(--vx-border); border-radius: var(--vx-radius);
    overflow: hidden; background: var(--vx-bg-body);
}

/* footer: bottone invia con un filo di rilievo */
.vxrev-foot { background: var(--vx-bg-header); }
.vxrev-foot .vxshop-btn-primary:not(:disabled) {
    box-shadow: 0 2px 8px var(--vx-primary-light);
}
.vxrev-foot .vxshop-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* FAB "Scelgo questo" */
.vxpick-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 802;
    display: none; align-items: center; gap: 7px;
    padding: 12px 16px; border: none; border-radius: 40px;
    background: var(--vx-primary); color: var(--vx-text-inv);
    font-weight: 700; font-size: 13px; cursor: pointer;
    box-shadow: var(--vx-shadow);
}
.vxpick-fab.is-visible { display: inline-flex; }
.vxpick-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 12px;
    background: var(--vx-bg-card); color: var(--vx-primary); font-size: 12px;
}
.vxpick-panel {
    position: fixed; right: 18px; bottom: 74px; z-index: 801;
    width: calc(100% - 36px); max-width: 320px; max-height: 60vh;
    display: none; flex-direction: column; overflow: hidden;
    background: var(--vx-bg-card); border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius); box-shadow: var(--vx-shadow);
}
.vxpick-panel.is-on { display: flex; }
.vxpick-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--vx-border);
    background: var(--vx-bg-header); font-size: 13px; color: var(--vx-text);
}
.vxpick-clear {
    border: none; background: none; color: var(--vx-text-3);
    font-size: 12px; cursor: pointer;
}
.vxpick-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.vxpick-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    background: var(--vx-bg-hover); border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
}
.vxpick-thumb {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--vx-radius);
    overflow: hidden; background: var(--vx-bg-active);
}
.vxpick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vxpick-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--vx-text); }
.vxpick-rm { border: none; background: none; color: var(--vx-text-3); cursor: pointer; padding: 2px; }
.vxpick-rm:hover { color: var(--vx-danger); }

/* backdrop del pannello picks (blur + scurita) */
.vxpick-backdrop {
    display: none; position: fixed; inset: 0; z-index: 800;
    background: var(--vx-overlay);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vxpick-backdrop.is-on { display: block; }
.vxshop-flag-ad { background: var(--vx-info); }
.vxshop-ad { cursor: pointer; }
/* ADS informativa senza foto: il contenuto occupa tutto */
.vxshop-ad-nophoto { justify-content: center; }
.vxshop-ad-nophoto .vxshop-body { padding: 18px 18px 20px; }
.vxshop-ad-nophoto .vxshop-desc-ad {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
.vxshop-flag-inline {
    position: static;            /* badge nel flusso, non più assoluto */
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 8px;
}
.vxad-p { margin: 0 0 10px; line-height: 1.55; }
.vxad-p:last-child { margin-bottom: 0; }
.vxad-ul { margin: 0 0 10px; padding-left: 20px; }
.vxad-ul li { margin: 3px 0; line-height: 1.5; }
.vxad-ul li::marker { color: var(--vx-primary); }

/* nel modal la descrizione dell'ad va leggibile e non troncata */
.vxshop-modal-desc .vxad-p,
.vxshop-modal-desc .vxad-ul { color: var(--vx-text-2); font-size: .9rem; }
/* descrizione ad nel modal: spaziatura + scroll sottile */
.vxshop-modal-desc { max-height: 46vh; overflow-y: auto; }
.vxshop-modal-desc p { margin: 0 0 10px; line-height: 1.6; }
.vxshop-modal-desc p:last-child { margin-bottom: 0; }
.vxshop-modal-desc ul,
.vxshop-modal-desc ol { margin: 8px 0; padding-left: 22px; }
.vxshop-modal-desc li { margin: 4px 0; line-height: 1.55; }
.vxshop-modal-desc strong { font-weight: 700; }

/* scrollbar sottile (webkit + firefox) */
.vxshop-modal-desc { scrollbar-width: thin; scrollbar-color: var(--vx-border) transparent; }
.vxshop-modal-desc::-webkit-scrollbar { width: 6px; }
.vxshop-modal-desc::-webkit-scrollbar-track { background: transparent; }
.vxshop-modal-desc::-webkit-scrollbar-thumb { background: var(--vx-border); border-radius: 10px; }
.vxshop-modal-desc::-webkit-scrollbar-thumb:hover { background: var(--vx-text-3); }


.vxshop-ad { position: relative; }
.vxfx-giostra, .vxfx-coriandoli, .vxfx-shine, .vxfx-zoom, .vxfx-bgphoto { overflow: hidden; }
.vxshop-ad .vxshop-media,
.vxshop-ad .vxshop-body { position: relative; z-index: 2; }

.vxfx-giostra { border: none !important; }
.vxfx-giostra::before {
    content: ''; position: absolute; z-index: 0;
    top: 50%; left: 50%; width: 200%; height: 200%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, #ff004c, #ffb400, #21d4fd, #b721ff, #00e676, #ff004c);
    animation: vxfxSpin 3s linear infinite;
}
.vxfx-giostra::after {
    content: ''; position: absolute; z-index: 1;
    inset: 4px; border-radius: calc(var(--vx-radius) - 2px);
    background: var(--vx-bg-card);
}
@keyframes vxfxSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.vxfx-giostra .vxshop-media { margin: 4px 4px 0; border-radius: calc(var(--vx-radius) - 2px) calc(var(--vx-radius) - 2px) 0 0; overflow: hidden; }
.vxfx-giostra .vxshop-body { margin: 0 4px 4px; }

.vxfx-glow { animation: vxfxGlow 1.8s ease-in-out infinite; }
@keyframes vxfxGlow {
    0%,100% { box-shadow: 0 0 18px 2px rgba(255,180,0,.35); }
    50%     { box-shadow: 0 0 30px 8px rgba(255,180,0,.75); }
}

.vxfx-confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vxfx-confetti i {
    position: absolute; top: -12px; width: 8px; height: 12px; opacity: .9;
    animation: vxfxFall linear infinite;
}
.vxfx-confetti i:nth-child(1){left:5%;background:#ff004c;animation-duration:3.2s;animation-delay:0s}
.vxfx-confetti i:nth-child(2){left:14%;background:#ffb400;animation-duration:2.6s;animation-delay:.4s}
.vxfx-confetti i:nth-child(3){left:23%;background:#21d4fd;animation-duration:3.6s;animation-delay:.8s}
.vxfx-confetti i:nth-child(4){left:32%;background:#b721ff;animation-duration:2.9s;animation-delay:.2s}
.vxfx-confetti i:nth-child(5){left:41%;background:#00e676;animation-duration:3.3s;animation-delay:.6s}
.vxfx-confetti i:nth-child(6){left:50%;background:#ff004c;animation-duration:2.7s;animation-delay:1s}
.vxfx-confetti i:nth-child(7){left:59%;background:#ffb400;animation-duration:3.5s;animation-delay:.3s}
.vxfx-confetti i:nth-child(8){left:68%;background:#21d4fd;animation-duration:2.8s;animation-delay:.7s}
.vxfx-confetti i:nth-child(9){left:77%;background:#b721ff;animation-duration:3.1s;animation-delay:1.1s}
.vxfx-confetti i:nth-child(10){left:86%;background:#00e676;animation-duration:2.5s;animation-delay:.5s}
.vxfx-confetti i:nth-child(11){left:10%;background:#ff004c;animation-duration:3.4s;animation-delay:.9s}
.vxfx-confetti i:nth-child(12){left:38%;background:#21d4fd;animation-duration:2.9s;animation-delay:1.3s}
.vxfx-confetti i:nth-child(13){left:64%;background:#ffb400;animation-duration:3.2s;animation-delay:.15s}
.vxfx-confetti i:nth-child(14){left:92%;background:#b721ff;animation-duration:2.7s;animation-delay:.75s}
@keyframes vxfxFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: .9; }
    100% { transform: translateY(520px) rotate(540deg); opacity: 0; }
}

.vxfx-dashmove {
    border: 4px dashed var(--vx-primary) !important;
    background-image: linear-gradient(90deg, var(--vx-primary) 50%, transparent 50%);
    background-size: 20px 4px; background-repeat: repeat-x; background-position: 0 0;
    animation: vxfxDash .6s linear infinite;
}
@keyframes vxfxDash { to { background-position: 20px 0; } }

.vxfx-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.vxfx-giostra .vxfx-bg { z-index: 1; inset: 4px; border-radius: calc(var(--vx-radius) - 2px); }
.vxfx-giostra.vxfx-bgphoto::after { display: none; }
.vxfx-bgphoto .vxfx-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72));
}
.vxfx-bgphoto .vxshop-name,
.vxfx-bgphoto .vxshop-desc-ad,
.vxfx-bgphoto .vxshop-price-now { color: #fff; }

.vxfx-badgeblink .vxshop-flag-ad { animation: vxfxBlink 1s steps(2, jump-none) infinite; }
@keyframes vxfxBlink { 50% { opacity: .35; transform: scale(1.06); } }

.vxfx-pulse { animation: vxfxPulse 1.6s ease-in-out infinite; }
@keyframes vxfxPulse { 50% { transform: scale(1.02); } }

.vxfx-shine::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 3;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); animation: vxfxShine 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes vxfxShine { 0% { left: -60%; } 60%,100% { left: 130%; } }

.vxfx-float { animation: vxfxFloat 3s ease-in-out infinite; }
@keyframes vxfxFloat { 50% { transform: translateY(-6px); } }

.vxfx-rainbow {
    border: 4px solid transparent !important;
    background:
        linear-gradient(var(--vx-bg-card), var(--vx-bg-card)) padding-box,
        linear-gradient(90deg, #ff004c, #ffb400, #00e676, #21d4fd, #b721ff, #ff004c) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: vxfxRainbow 4s linear infinite;
}
@keyframes vxfxRainbow { to { background-position: 0 0, 300% 0; } }

.vxfx-zoom .vxshop-media img { animation: vxfxZoom 6s ease-in-out infinite; }
@keyframes vxfxZoom { 50% { transform: scale(1.12); } }

.vxfx-shake { animation: vxfxShake 4s ease-in-out infinite; }
@keyframes vxfxShake {
    0%,92%,100% { transform: translateX(0); }
    93% { transform: translateX(-3px); } 95% { transform: translateX(3px); }
    97% { transform: translateX(-2px); } 99% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .vxshop-ad, .vxshop-ad * { animation: none !important; }
}