/* ════════════════════════════════════════════════════════════
   TIBS Shop Quick View Addon  v2.1.5
   — Modern Luxury Design
   — Eye-badge appears on every product image on hover
   — Bottom-sheet on mobile, centred modal on desktop
════════════════════════════════════════════════════════════ */

/* ── GLOBAL RESET inside our elements ─────────────────── */
.tibsqv-modal *,
.tibsqv-overlay {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════
   EYE BADGE — sits on product image, works on ANY card
   JS dynamically wraps every product image in .tibsqv-img-wrap
   and appends a <button class="tibsqv-eye"> inside it.
══════════════════════════════════════════════════════════ */
.tibsqv-img-wrap {
    position: relative !important;
    display: block !important;
    overflow: hidden;
    /* Inherit any existing shape */
    border-radius: inherit;
}

/* The glowing eye button */
.tibsqv-eye {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    z-index: 9 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: none !important;
    border-radius: 30px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #7c3aed !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(.34,1.2,.64,1),
        background 0.15s,
        color 0.15s,
        box-shadow 0.15s !important;
    user-select: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.tibsqv-eye svg {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: stroke 0.15s !important;
}

/* Show on hover — both the wrap and the product card */
.tibsqv-img-wrap:hover .tibsqv-eye,
.tibs-product-card:hover .tibsqv-eye,
.woocommerce ul.products li.product:hover .tibsqv-eye,
.elementor-widget-woocommerce-product-images:hover .tibsqv-eye {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.tibsqv-eye:hover {
    background: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(124,58,237,0.4) !important;
    transform: translateX(-50%) translateY(-2px) !important;
}

.tibsqv-eye:active {
    transform: translateX(-50%) translateY(0) !important;
}

/* Also shown on touch devices without hover (always visible at lower opacity) */
@media (hover: none) {
    .tibsqv-eye {
        opacity: 0.88 !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════════════════════ */
.tibsqv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 5, 20, 0.62);
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.tibsqv-overlay.on {
    opacity: 1;
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════
   MODAL SHELL
══════════════════════════════════════════════════════════ */
.tibsqv-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%) scale(0.94);
    z-index: 999999;
    width: calc(100% - 40px);
    max-width: 980px;
    max-height: 90vh;
    background: #fff;
    border-radius: 24px;
    box-shadow:
        0 40px 100px rgba(0,0,0,.25),
        0 8px 24px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.28s cubic-bezier(.4,0,.2,1),
        transform 0.32s cubic-bezier(.34,1.1,.64,1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.tibsqv-modal.on {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Close ─────────────────────────────────────────────── */
.tibsqv-x {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 20;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.95);
    box-shadow: 0 2px 10px rgba(0,0,0,.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .16s, color .16s, transform .16s;
}
.tibsqv-x:hover {
    background: #1a1a2e;
    color: #fff;
    transform: rotate(90deg) scale(1.05);
}

/* ── Body (2-column) ────────────────────────────────────── */
.tibsqv-body {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 420px;
    max-height: 90vh;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   LOADER
══════════════════════════════════════════════════════════ */
.tibsqv-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 400px;
}
.tibsqv-spin {
    display: block;
    width: 44px;
    height: 44px;
    border: 3px solid #ede9fe;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: qv-spin .65s linear infinite;
}
@keyframes qv-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   LEFT — GALLERY
══════════════════════════════════════════════════════════ */
.tibsqv-gallery {
    width: 46%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, #f7f4ff 0%, #f1f5f9 100%);
    border-radius: 24px 0 0 24px;
    overflow: hidden;
    position: relative;
}

.tibsqv-sale-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    background: linear-gradient(135deg,#ef4444,#dc2626);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(239,68,68,.38);
}

/* Main image */
.tibsqv-main-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 260px;
}
#tibsqv-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 22px;
    display: block;
    transition: opacity .2s ease, transform .2s ease;
}
#tibsqv-main-img.fade {
    opacity: 0;
    transform: scale(.97);
}

/* Thumbnails */
.tibsqv-thumbs {
    display: flex;
    gap: 7px;
    padding: 10px 14px;
    overflow-x: auto;
    background: rgba(255,255,255,.55);
    border-top: 1px solid rgba(124,58,237,.07);
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #ddd6fe transparent;
}
.tibsqv-thumbs::-webkit-scrollbar { height: 3px; }
.tibsqv-thumbs::-webkit-scrollbar-thumb { background: #ddd6fe; border-radius: 3px; }

.tibsqv-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 9px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    background: #fff;
    transition: border-color .15s, transform .14s, box-shadow .15s;
}
.tibsqv-thumb:hover { border-color: rgba(124,58,237,.35); transform: translateY(-2px); }
.tibsqv-thumb.active {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.16);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════
   RIGHT — INFO PANEL
══════════════════════════════════════════════════════════ */
.tibsqv-info {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.tibsqv-info::-webkit-scrollbar { width: 4px; }
.tibsqv-info::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

/* Categories */
.tibsqv-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tibsqv-cat {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #7c3aed;
    background: rgba(124,58,237,.07);
    border: 1px solid rgba(124,58,237,.18);
    border-radius: 20px;
    padding: 3px 10px;
    text-decoration: none;
    line-height: 1.6;
    transition: background .15s, color .15s;
    display: inline-block;
}
.tibsqv-cat:hover { background: #7c3aed; color: #fff; text-decoration: none; }

/* Title */
.tibsqv-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f0e17;
    line-height: 1.25;
    letter-spacing: -.2px;
}

/* SKU */
.tibsqv-sku {
    font-size: 11px;
    color: #9ca3af;
}
.tibsqv-sku b { color: #6b7280; font-weight: 600; }

/* Rating row */
.tibsqv-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tibsqv-stars { display: flex; gap: 2px; line-height: 1; }
.tibsqv-star  { width: 14px; height: 14px; }
.tibsqv-rval  { font-size: 13px; font-weight: 700; color: #1a1a2e; }
.tibsqv-rcnt  { font-size: 12px; color: #9ca3af; }

/* Price */
.tibsqv-price {
    line-height: 1;
}
.tibsqv-price .price,
.tibsqv-price .woocommerce-Price-amount {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
}
.tibsqv-price .price del,
.tibsqv-price del .woocommerce-Price-amount {
    font-size: 14px !important;
    color: #d1d5db !important;
    font-weight: 400 !important;
}
.tibsqv-price .price ins { text-decoration: none !important; }

/* Stock */
.tibsqv-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}
.tibsqv-stock.in  { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.tibsqv-stock.out { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.tibsqv-sdot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.in  .tibsqv-sdot { background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.22); }
.out .tibsqv-sdot { background:#ef4444; }

/* Divider */
.tibsqv-hr { height:1px; background:linear-gradient(90deg,#f1f1f5,#f8f8fb,transparent); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   VARIATIONS
══════════════════════════════════════════════════════════ */
.tibsqv-attrs  { display:flex; flex-direction:column; gap:13px; }
.tibsqv-attr   { display:flex; flex-direction:column; gap:7px; }
.tibsqv-alabel {
    font-size:11px; font-weight:800; text-transform:uppercase;
    letter-spacing:.8px; color:#374151;
    display:flex; align-items:center; gap:6px;
}
.tibsqv-asel { font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; color:#7c3aed; }
.tibsqv-opts  { display:flex; flex-wrap:wrap; gap:7px; }

.tibsqv-sw {
    padding: 7px 15px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, box-shadow .14s, transform .12s;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
}
.tibsqv-sw:hover { border-color:#7c3aed; color:#7c3aed; background:rgba(124,58,237,.04); transform:translateY(-1px); }
.tibsqv-sw.on    { border-color:#7c3aed; background:#7c3aed; color:#fff; box-shadow:0 2px 10px rgba(124,58,237,.32); transform:translateY(-1px); }
.tibsqv-sw.off   { opacity:.3; cursor:not-allowed; pointer-events:none; }

/* ══════════════════════════════════════════════════════════
   QUANTITY + ACTIONS  (the section that was broken in v2.0)
   Key fixes:
   • qty-row: flex, never wraps to new line
   • btn-row: flex, ATC gets flex:1, view is fixed 46×46
   • checkout: full-width row beneath, hidden until ATC success
   • On mobile: btn-row stacks vertically, all buttons 100%
══════════════════════════════════════════════════════════ */
.tibsqv-actions {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* — Quantity row — */
.tibsqv-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap; /* NEVER wrap */
}
.tibsqv-qlabel {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #374151;
    flex-shrink: 0;
    white-space: nowrap;
}
.tibsqv-qctrl {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    height: 38px;
    flex-shrink: 0;
}
.tibsqv-qminus,
.tibsqv-qplus {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .13s, color .13s;
    line-height: 1;
    flex-shrink: 0;
}
.tibsqv-qminus:hover, .tibsqv-qplus:hover { background: #f5f3ff; color: #7c3aed; }
.tibsqv-qminus:disabled, .tibsqv-qplus:disabled { opacity: .3; cursor: not-allowed; }
.tibsqv-qnum {
    width: 38px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #0f0e17;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    height: 36px;
    line-height: 36px;
    user-select: none;
    flex-shrink: 0;
}

/* — Primary button row: [ATC ———flex———] [View 46px] — */
.tibsqv-btn-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap; /* desktop: single line */
}

/* ATC button */
.tibsqv-atc {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,58,237,.36);
    transition: transform .13s, box-shadow .13s, opacity .15s;
    position: relative;
}
.tibsqv-atc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.14), transparent);
    pointer-events: none;
    border-radius: inherit;
}
.tibsqv-atc:hover  { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(124,58,237,.44); }
.tibsqv-atc:active { transform: none; }
.tibsqv-atc:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.tibsqv-atc svg { flex-shrink: 0; }

/* View product button — fixed square, icon-only */
.tibsqv-view {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .14s, color .14s, background .14s, box-shadow .14s;
    cursor: pointer;
}
.tibsqv-view:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59,130,246,.05);
    box-shadow: 0 2px 10px rgba(59,130,246,.16);
    text-decoration: none;
}
.tibsqv-view svg { display: block; }

/* Checkout button — full width, hidden until ATC */
.tibsqv-co {
    display: none;   /* shown via .show class */
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .15px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 16px rgba(16,185,129,.30);
    transition: transform .13s, box-shadow .13s;
    white-space: nowrap;
    position: relative;
}
.tibsqv-co::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.14), transparent);
    pointer-events: none;
    border-radius: inherit;
}
.tibsqv-co.show { display: inline-flex; }
.tibsqv-co:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(16,185,129,.40); color:#fff; text-decoration:none; }
.tibsqv-co:active { transform: none; }

/* Feedback toast */
.tibsqv-msg {
    display: none;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.4;
}
.tibsqv-msg.ok  { display:block; background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; }
.tibsqv-msg.err { display:block; background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ══════════════════════════════════════════════════════════
   SHORT DESCRIPTION
══════════════════════════════════════════════════════════ */
.tibsqv-desc {
    font-size: 13.5px;
    line-height: 1.72;
    color: #4b5563;
}
.tibsqv-desc p { margin-bottom:6px; }
.tibsqv-desc p:last-child { margin-bottom:0; }
.tibsqv-desc ul, .tibsqv-desc ol { padding-left:18px; }

/* ══════════════════════════════════════════════════════════
   TAGS
══════════════════════════════════════════════════════════ */
.tibsqv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.tibsqv-taglabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#9ca3af; }
.tibsqv-tag { font-size:11px; padding:3px 9px; background:#f3f4f6; border-radius:20px; color:#6b7280; font-weight:500; }

/* ══════════════════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════════════════ */
.tibsqv-reviews { border-top:1px solid #f1f1f5; padding-top:17px; }
.tibsqv-sec-hd {
    font-size:11px; font-weight:800; text-transform:uppercase;
    letter-spacing:.9px; color:#374151;
    display:flex; align-items:center; gap:10px; margin-bottom:13px;
}
.tibsqv-sec-hd::after { content:''; flex:1; height:1px; background:#f1f1f5; }

.tibsqv-review {
    display:flex; gap:11px;
    padding:12px 0;
    border-bottom:1px solid #f9f9fb;
    animation: qv-in .2s ease;
}
.tibsqv-review:last-child { border-bottom:none; }
@keyframes qv-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.tibsqv-rav { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #f3f4f6; flex-shrink:0; }
.tibsqv-rbody { flex:1; min-width:0; }
.tibsqv-rmeta { display:flex; align-items:center; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.tibsqv-rauth { font-size:13px; font-weight:700; color:#1a1a2e; }
.tibsqv-rdate { font-size:11px; color:#9ca3af; margin-left:auto; white-space:nowrap; }
.tibsqv-rtext { font-size:13px; color:#4b5563; line-height:1.6; }
.tibsqv-no-reviews { font-size:13px; color:#9ca3af; text-align:center; padding:10px 0; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 860px) {
    .tibsqv-modal { max-width: 640px; }
    .tibsqv-gallery { width: 43%; }
    .tibsqv-title { font-size: 18px; }
    .tibsqv-info { padding: 22px 20px 20px; gap: 13px; }
}

/* Mobile — bottom sheet */
@media (max-width: 640px) {
    .tibsqv-modal {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 96vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%) !important;
        transition: opacity .25s ease, transform .32s cubic-bezier(.34,1.06,.64,1) !important;
    }
    .tibsqv-modal.on {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .tibsqv-body {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        max-height: 96vh;
    }

    .tibsqv-gallery {
        width: 100%;
        min-height: 230px;
        max-height: 270px;
        border-radius: 22px 22px 0 0;
        flex-shrink: 0;
    }
    .tibsqv-main-wrap { min-height: 180px; }
    #tibsqv-main-img  { padding: 14px; }

    /* Drag pill */
    .tibsqv-gallery::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        background: rgba(124,58,237,.28);
        border-radius: 2px;
        margin: 10px auto 0;
    }

    .tibsqv-info {
        overflow-y: visible;
        padding: 16px 16px 36px;
        gap: 13px;
    }

    .tibsqv-title { font-size: 17px; }

    /* Stack buttons vertically on mobile */
    .tibsqv-btn-row {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .tibsqv-atc  { width: 100%; flex: none; }
    .tibsqv-view {
        /* On mobile becomes full-width text button */
        flex: none;
        width: 100%;
        height: 42px;
        font-size: 13px;
        font-weight: 700;
        gap: 7px;
    }
    /* Add label text inside view button on mobile */
    .tibsqv-view::after { content: attr(data-label); margin-left: 4px; font-size:13px; font-weight:700; }
    .tibsqv-co   { width: 100%; }

    .tibsqv-x { top: 10px; right: 10px; }
}

@media (max-width: 380px) {
    .tibsqv-gallery { max-height: 210px; }
    .tibsqv-title { font-size: 15px; }
    .tibsqv-info  { padding: 13px 13px 30px; }
    .tibsqv-atc   { font-size: 13px; height: 43px; }
    .tibsqv-sw    { padding: 6px 12px; font-size: 12px; }
}

/* ATC success pulse */
@keyframes qv-pulse {
    0%   { box-shadow: 0 4px 16px rgba(124,58,237,.36), 0 0 0 0 rgba(124,58,237,.5); }
    60%  { box-shadow: 0 4px 16px rgba(124,58,237,.36), 0 0 0 10px rgba(124,58,237,0); }
    100% { box-shadow: 0 4px 16px rgba(124,58,237,.36), 0 0 0 0 rgba(124,58,237,0); }
}
.tibsqv-atc.pulse { animation: qv-pulse .55s ease; }