/* ================================================================
   QMP PREMIUM — "Obsidian Glass" Design System
   PERFORMANCE OPTIMIZED — scroll lag fixes applied
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
    --q-ink:        #050d1a;
    --q-ink-2:      #0e1f3d;
    --q-ink-3:      #1a3360;
    --q-jade:       #00d68f;
    --q-jade-2:     #00f5a0;
    --q-jade-dim:   rgba(0,214,143,0.13);
    --q-sky:        #0084ff;
    --q-sky-dim:    rgba(0,132,255,0.1);
    --q-pearl:      #ffffff;
    --q-pearl-dim:  #f2f7fd;
    --q-mist:       #7a92aa;
    --q-border:     rgba(0,0,0,0.055);
    --q-border-lit: rgba(255,255,255,0.7);

    --q-g-brand:    linear-gradient(135deg, #0062cc 0%, #00d68f 100%);
    --q-g-brand-r:  linear-gradient(135deg, #00d68f 0%, #0062cc 100%);
    --q-g-ink:      linear-gradient(160deg, #050d1a 0%, #1a3360 100%);
    --q-g-green:    linear-gradient(135deg, #00a86b 0%, #00d68f 100%);
    --q-g-amber:    linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    --q-g-red:      linear-gradient(135deg, #dc2626 0%, #f87171 100%);
    --q-g-glass:    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
    --q-g-header:   linear-gradient(135deg, #0a1628 0%, #0e2040 50%, #102448 100%);

    /* PERF: Simplified shadows — fewer layers = faster paint */
    --q-s-xs:   0 2px 8px rgba(5,13,26,0.06);
    --q-s-sm:   0 4px 16px rgba(5,13,26,0.08);
    --q-s-md:   0 8px 28px rgba(5,13,26,0.10);
    --q-s-lg:   0 14px 44px rgba(5,13,26,0.13);
    --q-s-xl:   0 22px 60px rgba(5,13,26,0.18);
    --q-s-jade: 0 6px 22px rgba(0,214,143,0.25);
    --q-s-sky:  0 6px 22px rgba(0,132,255,0.25);

    --q-r:    14px;
    --q-r-sm: 9px;
    --q-r-lg: 20px;
    --q-r-xl: 28px;

    --q-font:  'Sora', -apple-system, sans-serif;
    --q-mono:  'DM Mono', 'Fira Code', monospace;

    --col1: #0084ff;
    --col2: #f59e0b;
    --col3: #10b981;
    --col4: #8b5cf6;
    --col5: #f43f5e;
}

/* ================================================================
   BASE RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(0,214,143,0.18); color: var(--q-ink); }

/* ================================================================
   WRAPPER
   ================================================================ */
.qmp-wrapper {
    position: relative;
    z-index: 0;
    display: flex;
    gap: 24px;
    padding: 28px 32px;
    min-height: 100vh;
    font-family: var(--q-font);
    width: 100%;
    max-width: 100%;
    background:
        radial-gradient(ellipse 70% 60% at 5%  5%,  rgba(0,98,204,0.09)  0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 95% 20%, rgba(0,214,143,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 95%, rgba(0,98,204,0.05)  0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(139,92,246,0.05) 0%, transparent 55%),
        #e8f2fb;
    will-change: auto;
    contain: none;
}

/* ================================================================
   UNIT CODE PREFIX
   ================================================================ */
.qmp-unit-code-prefix {
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, #0062cc 0%, #00d68f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
    margin-right: 2px;
    display: inline;
}

@media (max-width: 768px) {
    .qmp-unit-code-prefix { font-size: 14px !important; }
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.qmp-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.92);
    border-radius: var(--q-r-xl);
    padding: 22px 16px;
    box-shadow: var(--q-s-lg), 0 0 0 1px rgba(255,255,255,0.75) inset;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    z-index: 20;
    will-change: transform;
    animation: qSlideRight 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes qSlideRight {
    from { opacity:0; transform: translateX(-18px); }
    to   { opacity:1; transform: translateX(0); }
}

.qmp-sidebar::-webkit-scrollbar { width: 3px; }
.qmp-sidebar::-webkit-scrollbar-thumb { background: var(--q-g-brand); border-radius: 99px; }

.qmp-sidebar h3 {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--q-mist);
    margin: 0 0 14px 2px; padding-bottom: 10px;
    border-bottom: 1px solid var(--q-border);
}

.qmp-search-wrap { position: relative; margin-bottom: 12px; }
.qmp-search-wrap::before {
    content: '';
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; background: var(--q-mist);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.4; pointer-events: none;
}
.qmp-search-wrap input {
    width: 100%; padding: 9px 10px 9px 32px;
    border-radius: var(--q-r-sm); border: 1.5px solid rgba(5,13,26,0.07);
    background: var(--q-pearl-dim); font-size: 12px;
    font-family: var(--q-font); color: var(--q-ink); transition: all 0.22s ease;
}
.qmp-search-wrap input:focus {
    outline: none; border-color: var(--q-jade); background: #fff;
    box-shadow: 0 0 0 3px var(--q-jade-dim);
}
.qmp-search-wrap input::placeholder { color: var(--q-mist); }

.qmp-sidebar ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }

.qmp-qualification-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 11px; border-radius: var(--q-r-sm);
    cursor: pointer; color: #3d5166;
    font-size: 12px; font-weight: 500; line-height: 1.4;
    transition: color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    position: relative; overflow: hidden;
}
.qmp-qualification-item::after {
    content: ''; position: absolute; inset: 0;
    background: var(--q-g-brand); opacity: 0;
    transition: opacity 0.22s ease; border-radius: inherit;
}
.qmp-qualification-item:hover::after,
.qmp-qualification-item.active::after { opacity: 1; }
.qmp-qualification-item:hover,
.qmp-qualification-item.active { color: #fff; box-shadow: var(--q-s-sky); transform: translateX(3px); }

.qmp-qualification-title { position: relative; z-index: 1; line-height: 1.35; font-size: 12px; }

.qmp-qualification-badge {
    position: relative; z-index: 1;
    font-size: 7.5px; font-weight: 800;
    padding: 4px 5px; border-radius: 5px;
    background: linear-gradient(180deg, #dbeafe, #d1fae5);
    color: var(--q-sky); flex-shrink: 0;
    writing-mode: vertical-rl; text-orientation: mixed;
    transform: rotate(180deg); transition: all 0.22s ease;
    letter-spacing: 0.04em; line-height: 1; margin-top: 1px;
}
.qmp-qualification-item:hover .qmp-qualification-badge,
.qmp-qualification-item.active .qmp-qualification-badge { background: rgba(255,255,255,0.22); color: #fff; }

/* ================================================================
   CONTENT AREA
   ================================================================ */
.qmp-content { flex:1; min-width:0; position:relative; z-index:1; }

.qmp-qualification { display:block; animation: qFadeUp 0.45s cubic-bezier(0.4,0,0.2,1); }
.qmp-qualification:not(.active) { display:none; }

@keyframes qFadeUp {
    from { opacity:0; transform: translateY(16px); }
    to   { opacity:1; transform: translateY(0); }
}

.qmp-content h2 {
    font-size: 22px; font-weight: 800; color: var(--q-ink);
    margin: 0 0 6px; letter-spacing: -0.6px; line-height: 1.2;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}

.qmp-code {
    font-family: var(--q-mono); font-size: 11.5px; font-weight: 500;
    color: var(--q-sky); background: var(--q-sky-dim);
    padding: 3px 9px; border-radius: 6px;
    border: 1px solid rgba(0,132,255,0.12); letter-spacing: 0.02em;
}

.qmp-qualification-badge-status {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px; padding: 3px 5px; border-radius: 5px;
    font-weight: 700; font-size: 7.5px; line-height: 1.2;
    margin-left: 2px; white-space: nowrap; letter-spacing: 0.04em;
}
.qmp-qualification-badge-status.current    { background: #dcfce7; color: #15803d; }
.qmp-qualification-badge-status.superseded { background: #fef3c7; color: #b45309; }
.qmp-qualification-badge-status.deleted    { background: #fee2e2; color: #b91c1c; }
.qmp-status-main { font-size: 7.5px; }
.qmp-status-sub  { font-size: 7px; font-weight: 400; opacity: 0.7; }

.qmp-unit-summary {
    font-size: 12px; color: var(--q-mist); font-weight: 500;
    margin: 3px 0 18px; letter-spacing: 0.01em;
}

.qmp-content h3 {
    font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--q-mist);
    margin: 28px 0 14px;
    display: flex; align-items: center; gap: 10px;
}
.qmp-content h3::after {
    content: ''; flex:1; height: 1px;
    background: linear-gradient(90deg, var(--q-border) 0%, transparent 100%);
}

.qmp-packaging-rules {
    background: linear-gradient(135deg, #f8fbff, #f0f9f5);
    border-radius: var(--q-r); padding: 18px 20px 18px 28px;
    margin: 0 0 22px; position: relative; overflow: hidden;
    box-shadow: var(--q-s-sm); border: 1px solid rgba(0,214,143,0.12);
}
.qmp-packaging-rules::before {
    content: ''; position: absolute; left:0; top:0; bottom:0;
    width: 4px; background: var(--q-g-brand); border-radius: 4px 0 0 4px;
}
.qmp-packaging-rules h4 {
    font-size: 11.5px; font-weight: 700; color: var(--q-ink);
    margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.08em;
}
.qmp-packaging-content { font-size: 13px; line-height: 1.7; color: #334155; }
.qmp-packaging-content ul { list-style:none; padding:0; margin: 8px 0 0; }
.qmp-packaging-content li { position: relative; padding-left: 20px; margin-bottom: 6px; font-size: 12.5px; }
.qmp-packaging-content li::before { content:'✓'; position:absolute; left:0; color:var(--q-jade); font-weight:700; }

/* ================================================================
   TOP CARDS
   ================================================================ */
.qmp-top-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
    gap: 18px;
    margin: 0 0 28px;
}

.qmp-card {
    background: rgba(255,255,255,0.95);
    border-radius: var(--q-r-lg);
    padding: 22px 92px 20px 20px;
    border-top: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: var(--q-s-md), 0 0 0 1px rgba(11,21,38,0.04);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}

.qmp-card::before { content: none; }

.qmp-card::after {
    content: ''; position: absolute; top:0; left: 100%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    pointer-events: none; border-radius: var(--q-r-lg);
}

.qmp-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--q-s-xl), 0 0 0 1.5px rgba(0,214,143,0.15) inset;
}
.qmp-card:hover::after {
    left: 160%;
    transition: left 0.65s ease;
}

.qmp-card-image-wrap {
    position: absolute; top: 18px; right: 16px;
    width: 68px; height: 68px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,132,255,0.07) 0%, rgba(0,214,143,0.07) 100%);
    border: 1.5px solid rgba(0,132,255,0.1);
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.qmp-card:hover .qmp-card-image-wrap {
    transform: scale(1.12) rotate(6deg);
}
.qmp-card-image-wrap img { width: 42px; height: 42px; object-fit: contain; }
.qmp-card-image-wrap::before { content: none; }

.qmp-card-title {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px; position: relative; overflow: visible;
}
.qmp-card h4 { font-size: 13px; font-weight: 700; color: var(--q-ink); margin: 0; line-height: 1.3; }

/* ================================================================
   TOOLTIP PORTAL
   ================================================================ */
.qmp-card .qmp-th-info-wrap {
    position: relative; overflow: visible;
    display: inline-flex; align-items: center;
}
.qmp-card .qmp-info-btn { position: relative; flex-shrink: 0; pointer-events: auto; cursor: pointer; }

.qmp-card-tooltip-portal {
    position: fixed; z-index: 2147483647;
    width: 280px; background: #fff;
    border-radius: var(--q-r); padding: 20px 16px 14px;
    box-shadow: var(--q-s-xl), 0 0 0 1px rgba(5,13,26,0.05);
    font-size: 11.5px; line-height: 1.55; color: var(--q-ink);
    text-align: left; white-space: normal;
    pointer-events: none; opacity: 0; transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    font-family: var(--q-font);
    will-change: opacity, transform;
}
.qmp-card-tooltip-portal.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.qmp-card-tooltip-portal::before {
    content: ''; position: absolute; top: 11px; left: 20px;
    width: 10px; height: 10px; background: #fff;
    transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(0,0,0,0.04); z-index: -1;
}
.qmp-card-tooltip-portal strong { display: block; font-size: 12px; font-weight: 700; color: var(--q-ink); margin-bottom: 6px; }
.qmp-card-tooltip-portal p { margin: 0; font-size: 11px; color: #475569; font-weight: 400; text-transform: none; letter-spacing: normal; }
.qmp-card-tooltip-portal .qmp-tooltip-list { margin: 6px 0 0; padding: 0; list-style: none; }
.qmp-card-tooltip-portal .qmp-tooltip-list li { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; font-size: 11px; color: #475569; }
.qmp-card-tooltip-portal .qmp-tooltip-list li::before { content:'✓'; color: var(--q-jade); font-weight: 700; font-size: 9.5px; flex-shrink: 0; margin-top: 1px; }

.qmp-card .qmp-info-tooltip { display: none !important; }

/* ================================================================
   PRICE + CART ROW
   ================================================================ */
.qmp-price-cart-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: auto; padding-top: 8px;
}
.qmp-price-cart-row .qmp-price { display: flex; flex-direction: column; margin: 0; flex-shrink: 0; }
.qmp-price-cart-row .qmp-price del { font-size: 11px; color: #94a3b8; text-decoration: line-through; line-height: 1.4; }
.qmp-price-cart-row .qmp-price ins,
.qmp-price-cart-row .qmp-price > span {
    font-size: clamp(15px, 3.5vw, 22px);
    font-weight: 800; color: var(--q-ink);
    text-decoration: none; letter-spacing: -0.7px; line-height: 1.1;
}
.qmp-price-cart-row .qmp-btn.qmp-top-add-to-cart {
    width: auto !important; flex: 0 0 auto !important;
    padding: 9px 14px !important; font-size: 11px !important;
    white-space: nowrap !important; min-width: 0 !important; margin-top: 0 !important;
}

.qmp-price { display: flex; flex-direction: column; margin: 6px 0 12px; }
.qmp-price del { font-size: 11px; color: #94a3b8; text-decoration: line-through; line-height: 1.4; }
.qmp-price ins,
.qmp-price > span { font-size: 26px; font-weight: 800; color: var(--q-ink); text-decoration: none; letter-spacing: -0.9px; line-height: 1.1; }

/* ================================================================
   STATUS BADGES
   ================================================================ */
.qmp-status {
    display: inline-flex; align-items: center;
    font-size: 8.5px; font-weight: 700;
    padding: 3px 8px; border-radius: 99px;
    letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; line-height: 1.3; width: fit-content;
    writing-mode: horizontal-tb; transform: none;
}
.qmp-status.ready {
    background: #dcfce7; color: #15803d; border: 1px solid rgba(21,128,61,0.14);
    gap: 5px; writing-mode: vertical-rl; text-orientation: mixed;
    transform: rotate(180deg); padding: 6px 4px; border-radius: 5px;
    font-size: 7.5px; letter-spacing: 0.06em;
    position: absolute !important; left: 0; top: 50%;
    transform: rotate(180deg) translateY(50%);
    height: auto; line-height: 1.2;
}
.qmp-status.ready::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #16a34a; flex-shrink: 0;
}
.qmp-status.superseded { background: #fee2e2; color: #b91c1c; border: 1px solid rgba(185,28,28,0.14); }
.qmp-status.preorder {
    background: #fef3c7; color: #92400e; border: 1px solid rgba(245,158,11,0.18);
    writing-mode: vertical-rl; text-orientation: mixed;
    transform: rotate(180deg); padding: 6px 4px; border-radius: 5px;
    font-size: 7.5px; letter-spacing: 0.06em;
    position: absolute !important; left: 0; top: 50%;
    transform: rotate(180deg) translateY(50%);
    height: auto; line-height: 1.2;
}

.qmp-table td:has(.qmp-status.preorder),
.qmp-table td:has(.qmp-status.ready) { padding-left: 28px !important; }
.qmp-card:has(.qmp-status.preorder),
.qmp-card:has(.qmp-status.ready) { padding-left: 20px !important; }
.qmp-card .qmp-status.preorder { top: 50%; left: 0; border-radius: 0 5px 5px 0; }
.qmp-table td .qmp-status.ready,
.qmp-table td .qmp-status.superseded { margin-bottom: 5px; }

.qmp-card .qmp-status.ready,
.qmp-card .qmp-status.preorder {
    position: static !important; writing-mode: horizontal-tb !important;
    transform: none !important; padding: 3px 10px !important;
    border-radius: 99px !important; font-size: 8px !important;
    letter-spacing: 0.06em; margin-bottom: 6px;
    display: inline-flex !important; align-items: center; gap: 5px;
    height: auto !important; animation: none !important;
}
.qmp-card .qmp-status.ready::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #16a34a; flex-shrink: 0;
}
.qmp-card .qmp-status.preorder::before { display: none; }
.qmp-card .qmp-status.superseded { position: static !important; margin-bottom: 6px; }

/* ================================================================
   ADD TO CART BUTTON
   ================================================================ */
.qmp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 18px; background: var(--q-g-brand);
    color: #fff !important; border-radius: var(--q-r-sm);
    font-weight: 600; font-size: 12px; border: none; cursor: pointer;
    box-shadow: var(--q-s-sky);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s ease;
    position: relative; overflow: hidden; margin-top: auto;
    font-family: var(--q-font); text-decoration: none !important;
    letter-spacing: 0.01em; width: 100%; white-space: nowrap; box-sizing: border-box;
}
.qmp-btn i.fa-cart-shopping { display: none; }
.qmp-btn::before {
    content: '';
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background-color: rgba(255,255,255,0.85);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 10px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 10px;
    transition: transform 0.28s ease;
}
.qmp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,132,255,0.38); color: #fff !important; }
.qmp-btn:hover::before { transform: rotate(90deg); }
.qmp-btn:active { transform: scale(0.97); }

/* ================================================================
   INFO BUTTON + TOOLTIP
   ================================================================ */
.qmp-info-btn {
    width: 17px; height: 17px; border-radius: 50%;
    border: 1.5px solid rgba(5,13,26,0.15);
    background: transparent; color: var(--q-mist);
    font-size: 9.5px; font-weight: 700; font-style: italic;
    font-family: Georgia, serif; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; flex-shrink: 0; line-height: 1;
}
.qmp-info-btn:hover { background: var(--q-ink); border-color: var(--q-ink); color: #fff; transform: scale(1.12); }

.qmp-th-info-wrap {
    position: relative; display: inline-flex; align-items: center;
    margin-left: 4px; vertical-align: middle;
}
.qmp-info-tooltip {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%); width: 240px;
    background: #fff; border-radius: var(--q-r); padding: 14px 16px;
    box-shadow: var(--q-s-xl), 0 0 0 1px rgba(5,13,26,0.05);
    font-size: 11.5px; line-height: 1.55; color: var(--q-ink);
    display: none; z-index: 9999; text-align: left; white-space: normal;
}
.qmp-info-tooltip::before {
    content: ''; position: absolute; top:-5px; left:50%;
    transform: translateX(-50%) rotate(45deg); width:10px; height:10px;
    background: #fff; box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}
.qmp-info-tooltip strong { display:block; font-size:12px; font-weight:700; color:var(--q-ink); margin-bottom:6px; }
.qmp-info-tooltip p { margin:0; font-size:11px; color:#475569; font-weight:400; text-transform:none; letter-spacing:normal; }
.qmp-tooltip-list { margin:6px 0 0; padding:0; list-style:none; }
.qmp-tooltip-list li { display:flex; align-items:flex-start; gap:6px; padding:2px 0; font-size:11px; color:#475569; }
.qmp-tooltip-list li::before { content:'✓'; color:var(--q-jade); font-weight:700; font-size:9.5px; flex-shrink:0; margin-top:1px; }

@media (hover: hover) {
    .qmp-th-info-wrap:hover .qmp-info-tooltip { display:block; animation: qTipIn 0.18s ease; }
}
@keyframes qTipIn {
    from { opacity:0; transform: translateX(-50%) translateY(-5px); }
    to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   TOOLTIP EXTRAS (L&A Pack)
   ================================================================ */
.qmp-tooltip-extra {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.07); text-align: center;
}
.qmp-tooltip-note {
    font-size: 10.5px !important; color: #475569 !important;
    margin: 0 0 8px !important; line-height: 1.5 !important;
    text-align: left; font-weight: 400 !important;
    text-transform: none !important; letter-spacing: normal !important;
}
.qmp-tooltip-enquire-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 7px 16px; font-size: 10px; font-weight: 700;
    border-radius: 99px; border: 1.5px solid #f59e0b;
    background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e !important;
    cursor: pointer; transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    font-family: var(--q-font); letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 5px; box-shadow: 0 2px 8px rgba(245,158,11,0.2);
    position: relative; overflow: hidden;
}
.qmp-tooltip-enquire-btn:hover {
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 4px 16px rgba(245,158,11,0.38); transform: translateY(-1px); color: #78350f !important;
}
.qmp-card-tooltip-portal .qmp-tooltip-extra { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.07); text-align: center; }
.qmp-card-tooltip-portal .qmp-tooltip-note { font-size: 10.5px; color: #475569; margin: 0 0 8px !important; line-height: 1.5; text-align: left; }
.qmp-card-tooltip-portal .qmp-tooltip-small { font-size: 9.5px; color: #94a3b8; margin: 0 !important; font-style: italic; display: block; }
.qmp-card-tooltip-portal .qmp-tooltip-enquire-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 7px 16px; font-size: 10px; font-weight: 700;
    border-radius: 99px; border: 1.5px solid #f59e0b;
    background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e;
    cursor: pointer; font-family: var(--q-font); letter-spacing: 0.06em;
    text-transform: uppercase; margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(245,158,11,0.2); pointer-events: auto;
}
.qmp-tooltip-small {
    font-size: 9.5px !important; color: #94a3b8 !important; margin: 0 !important;
    font-style: italic; text-transform: none !important; letter-spacing: normal !important;
    font-weight: 400 !important; display: block;
}

/* ================================================================
   PRE-ORDER
   ================================================================ */
.qmp-preorder-box { margin: 3px 0 1px; }
.qmp-preorder-line { font-size: 9px; color: #94a3b8; font-weight: 500; margin-bottom: 3px; letter-spacing: 0.02em; line-height: 1.3; }
.qmp-preorder-actions { position: relative; display: inline-flex; align-items: center; gap: 4px; overflow: visible; }
.qmp-enquire-btn {
    padding: 3px 8px; font-size: 8.5px; font-weight: 600; border-radius: 99px;
    border: 1.5px solid #f59e0b; background: #fffbeb; color: #92400e;
    cursor: pointer; transition: background 0.22s ease, box-shadow 0.22s ease;
    font-family: var(--q-font); letter-spacing: 0.01em;
}
.qmp-enquire-btn:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); box-shadow: 0 4px 14px rgba(245,158,11,0.28); }

/* ================================================================
   TABLE — UPDATED BALANCED DESKTOP WIDTHS
   ================================================================ */
.qmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 7px;
    table-layout: fixed;
    margin-bottom: 4px;
}

.qmp-table th:nth-child(1),
.qmp-table td:nth-child(1) { width: 21%; }

.qmp-table th:nth-child(2),
.qmp-table td:nth-child(2),
.qmp-table th:nth-child(3),
.qmp-table td:nth-child(3),
.qmp-table th:nth-child(4),
.qmp-table td:nth-child(4),
.qmp-table th:nth-child(5),
.qmp-table td:nth-child(5) { width: 13%; }

.qmp-table th.qmp-col-weight,
.qmp-table td.qmp-weight-subtotal { width: 8%; min-width: 80px; text-align: center; }

.qmp-table th:last-child,
.qmp-table td:last-child { width: 14%; min-width: 150px; }

.qmp-table thead tr { background: transparent; }

.qmp-table th {
    background: var(--q-g-header);
    color: rgba(255,255,255,0.75);
    padding: 13px 12px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; border: none;
    white-space: normal; word-break: break-word;
    line-height: 1.35; vertical-align: middle; position: relative;
}

.qmp-table th:first-child {
    border-radius: var(--q-r-sm) 0 0 var(--q-r-sm);
    text-align: left; padding-left: 18px; color: #fff; white-space: nowrap;
}
.qmp-table th:last-child { border-radius: 0 var(--q-r-sm) var(--q-r-sm) 0; }
.qmp-table th:not(:first-child):not(:last-child) { border-right: 1px solid rgba(255,255,255,0.05); }

.qmp-table thead th:nth-child(2) { border-bottom: 2.5px solid rgba(0,132,255,0.7); }
.qmp-table thead th:nth-child(3) { border-bottom: 2.5px solid rgba(245,158,11,0.7); }
.qmp-table thead th:nth-child(4) { border-bottom: 2.5px solid rgba(16,185,129,0.7); }
.qmp-table thead th:nth-child(5) { border-bottom: 2.5px solid rgba(139,92,246,0.7); }
.qmp-table thead th:nth-child(6) { border-bottom: 2.5px solid rgba(244,63,94,0.7); }

.qmp-table th .qmp-info-btn { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.55); }
.qmp-table th .qmp-info-btn:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: transparent; }

.qmp-table tbody tr { transition: transform 0.22s ease; }
.qmp-table tbody tr:hover { transform: translateY(-2px); position: relative; z-index: 2; }

.qmp-table td {
    padding: 12px 12px; background: #fff; border: none;
    text-align: center; vertical-align: middle; position: relative;
    overflow: visible !important; transition: background 0.18s ease;
    word-break: break-word; overflow-wrap: break-word; white-space: normal;
}

.qmp-table td:first-child {
    text-align: left; padding-left: 18px;
    border-radius: var(--q-r-sm) 0 0 var(--q-r-sm);
    font-size: 12.5px; font-weight: 600; color: var(--q-ink);
    line-height: 1.45; border-left: 3px solid transparent;
    transition: border-color 0.22s ease, background 0.18s ease;
}
.qmp-table tbody tr:hover td:first-child { border-left-color: var(--q-jade); }
.qmp-table td:last-child { border-radius: 0 var(--q-r-sm) var(--q-r-sm) 0; }
.qmp-table tbody tr:hover td { background: #f8fbff; }
.qmp-table tbody tr td:first-child { box-shadow: var(--q-s-xs); }
.qmp-table tbody tr:hover td:first-child { box-shadow: var(--q-s-md); }

.qmp-table tbody td:nth-child(2) { background-color: #fafcff; }
.qmp-table tbody td:nth-child(3) { background-color: #fefef8; }
.qmp-table tbody td:nth-child(4) { background-color: #f7fffc; }
.qmp-table tbody td:nth-child(5) { background-color: #faf7ff; }
.qmp-table tbody td:nth-child(6) { background-color: #fff7f9; }
.qmp-table tbody td:not(:first-child):not(:last-child) { border-left: 1px solid rgba(226,232,240,0.5); }

.qmp-table tbody tr:hover td:nth-child(2) { box-shadow: inset 0 2px 0 var(--col1); background-color: #f3f8ff; }
.qmp-table tbody tr:hover td:nth-child(3) { box-shadow: inset 0 2px 0 var(--col2); background-color: #fffcf2; }
.qmp-table tbody tr:hover td:nth-child(4) { box-shadow: inset 0 2px 0 var(--col3); background-color: #f2fff8; }
.qmp-table tbody tr:hover td:nth-child(5) { box-shadow: inset 0 2px 0 var(--col4); background-color: #f6f2ff; }
.qmp-table tbody tr:hover td:nth-child(6) { box-shadow: inset 0 2px 0 var(--col5); background-color: #fff2f5; }

.qmp-unit-badge {
    display: inline-flex; flex-direction: row; align-items: center; gap: 2px;
    padding: 2px 6px; border-radius: 4px; font-size: 8px; font-weight: 600;
}
.qmp-unit-badge.current    { background: #dcfce7; color: #15803d; }
.qmp-unit-badge.superseded { background: #fef3c7; color: #b45309; }
.qmp-unit-badge.deleted    { background: #fee2e2; color: #b91c1c; }

.qmp-table-price { display: flex; flex-direction: column; align-items: center; margin-bottom: 7px; }
.qmp-table-price del { font-size: 10.5px; color: #94a3b8; text-decoration: line-through; line-height: 1.3; }
.qmp-table-price ins,
.qmp-table-price > span,
.qmp-table-price .woocommerce-Price-amount { font-size: 15px; font-weight: 700; color: var(--q-ink); text-decoration: none; line-height: 1.2; letter-spacing: -0.3px; }

/* ================================================================
   CART ICON
   ================================================================ */
.qmp-cart-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--q-g-brand); cursor: pointer; border: none; font-size: 0;
}
.qmp-cart-icon::before {
    content: "\f217";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 18px; color: #fff;
}
.qmp-cart-icon.added::before { content: "\f00c"; }
.qmp-cart-icon i { display: none !important; }
.qmp-cart-icon::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.14); opacity: 0;
    transition: opacity 0.2s ease; border-radius: inherit;
}
.qmp-cart-icon:hover { transform: translateY(0px) scale(1.1); box-shadow: var(--q-s-jade); color: transparent; }
.qmp-cart-icon:hover::before { transform: rotate(0deg) scale(1.1); }
.qmp-cart-icon:hover::after  { opacity: 1; }
.qmp-cart-icon.added { background: var(--q-g-green); box-shadow: 0 4px 16px rgba(0,214,143,0.28); }

.qmp-empty-cart-btn {
    background: transparent; border: 1px solid #00d68f; color: #ffffff;
    padding: 6px 12px; border-radius: 6px; font-size: 12px;
    margin-left: 10px; cursor: pointer; transition: 0.2s ease;
}
.qmp-empty-cart-btn:hover { background: #ef4444; color: #fff; }

/* ================================================================
   SUBTOTAL CELL
   ================================================================ */
.qmp-subtotal-cell {
    background: linear-gradient(135deg, #f4f8ff, #eef5ff) !important;
    border-radius: 0 var(--q-r-sm) var(--q-r-sm) 0 !important;
}
.qmp-subtotal-amount { display: block; font-size: 16px; font-weight: 800; color: var(--q-ink); margin-bottom: 7px; letter-spacing: -0.4px; }
.qmp-weight-subtotal { font-size: 13px; font-weight: 600; color: var(--q-sky); text-align: center; }

.qmp-add-all {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 14px; background: var(--q-g-brand); color: #fff !important;
    border-radius: 8px; font-size: 11px; font-weight: 600; border: none; cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    font-family: var(--q-font); white-space: nowrap; letter-spacing: 0.01em;
}
.qmp-add-all::before { content: '+'; font-size: 15px; font-weight: 300; line-height: 1; }
.qmp-add-all:hover { transform: translateY(-1px); box-shadow: var(--q-s-sky); }
.qmp-add-all.added { background: var(--q-g-green); box-shadow: none; }

/* ================================================================
   TOTAL BOX
   ================================================================ */
.qmp-total-wrap { margin: 10px 0 36px; }
.qmp-total-box {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; padding: 18px 22px;
    border-radius: var(--q-r); border: 1px solid rgba(5,13,26,0.06);
    box-shadow: var(--q-s-sm); gap: 12px; position: relative; overflow: hidden;
}
.qmp-total-box::before {
    content: ''; position: absolute; left:0; top:0; bottom:0;
    width: 4px; background: var(--q-g-brand); border-radius: 4px 0 0 4px;
}
.qmp-total-left strong { font-size: 13.5px; font-weight: 700; color: var(--q-ink); display: block; }
.qmp-gst { font-size: 11px; color: var(--q-mist); font-weight: 400; }
.qmp-weight-label small { font-size: 11px; color: var(--q-mist); }
.qmp-total-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

[class$="-total"]:not(.qmp-total-wrap):not(.qmp-total-box):not(.qmp-total-action):not(.qmp-total-left):not(.qmp-total-right) {
    font-size: 26px; font-weight: 800;
    background: var(--q-g-brand);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; letter-spacing: -0.7px; line-height: 1.1;
}
.qmp-total-action { margin-top: 12px; text-align: right; }
.qmp-go-cart-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; background: var(--q-g-green);
    color: #fff; border: none; border-radius: var(--q-r-sm);
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: var(--q-font); text-decoration: none;
    box-shadow: 0 4px 18px rgba(0,214,143,0.28); letter-spacing: 0.01em;
}
.qmp-go-cart-btn::after { content: '→'; font-size: 16px; margin-left: 2px; }
.qmp-go-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,214,143,0.4); color: #fff; }

/* ================================================================
   FLOATING CART BAR
   ================================================================ */
.qmp-cart-bar {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(130%);
    z-index: 9500;
    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.qmp-cart-bar.show { transform: translateX(-50%) translateY(0); }

.qmp-cart-bar-inner {
    background: var(--q-g-ink);
    border-radius: 99px;
    padding: 12px 22px;
    display: flex; align-items: center; gap: 20px;
    color: #fff;
    box-shadow: var(--q-s-xl), 0 0 0 1px rgba(255,255,255,0.07) inset;
}
.qmp-cart-bar-left { display: flex; gap: 14px; align-items: center; }
.qmp-cart-total { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.qmp-cart-count { font-size: 11px; background: rgba(255,255,255,0.12); padding: 2px 10px; border-radius: 99px; font-weight: 500; }
.qmp-view-cart-btn {
    background: var(--q-jade); padding: 9px 20px; border-radius: 99px;
    color: var(--q-ink) !important; text-decoration: none;
    font-weight: 700; font-size: 12px; transition: all 0.22s ease; letter-spacing: 0.01em;
}
.qmp-view-cart-btn:hover { background: var(--q-jade-2); transform: translateY(-1px); color: var(--q-ink) !important; }

/* ================================================================
   MODALS
   ================================================================ */
body.qmp-checkout-open { overflow: hidden; }
.qmp-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.qmp-modal-overlay { position: absolute; inset: 0; background: rgba(5,13,26,0.75); animation: qFadeIn 0.25s ease; }
@keyframes qFadeIn { from { opacity:0; } to { opacity:1; } }
.qmp-modal-content {
    position: relative; background: #fff; width: 100%; max-width: 480px;
    border-radius: var(--q-r-xl); padding: 28px; box-shadow: var(--q-s-xl);
    z-index: 1; animation: qModalPop 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes qModalPop {
    from { opacity:0; transform: translateY(22px) scale(0.96); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.qmp-modal-content h3 { font-size: 17px; font-weight: 700; color: var(--q-ink); margin: 0 0 8px; letter-spacing: -0.3px; }
.qmp-modal-content p  { font-size: 12.5px; color: var(--q-mist); line-height: 1.6; margin: 0 0 14px; }
.qmp-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: #f1f5f9; border: none; width: 30px; height: 30px;
    border-radius: 50%; font-size: 14px; cursor: pointer; color: #475569;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease; z-index: 10;
}
.qmp-modal-close:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }
.qmp-checkout-content {
    position: relative; background: #fff; width: 95vw; max-width: 1040px;
    max-height: 90vh; border-radius: var(--q-r-xl); padding: 28px;
    overflow-y: auto; z-index: 1; box-shadow: var(--q-s-xl);
    animation: qModalPop 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.qmp-checkout-content::-webkit-scrollbar { width: 4px; }
.qmp-checkout-content::-webkit-scrollbar-thumb { background: var(--q-g-brand); border-radius: 99px; }

/* ================================================================
   WOO FORM STYLES
   ================================================================ */
.cf7-modal-form, .cf7-modal-form * { box-sizing: border-box; }
.cf7-modal-form p { margin: 0 !important; }
.cf7-modal-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.cf7-row { display: flex; gap: 11px; margin-bottom: 10px; }
.cf7-col { flex: 1; }
.cf7-col-full { width: 100%; }
.cf7-modal-form label { font-size: 11px; font-weight: 600; margin-bottom: 4px; display: block; color: var(--q-ink); }
.cf7-modal-form input, .cf7-modal-form select, .cf7-modal-form textarea {
    width: 100%; height: 37px; padding: 8px 12px; font-size: 12.5px;
    border: 1.5px solid rgba(5,13,26,0.09); border-radius: var(--q-r-sm);
    background: #fff; font-family: var(--q-font); transition: border-color 0.2s, box-shadow 0.2s; color: var(--q-ink);
}
.cf7-modal-form input:focus, .cf7-modal-form select:focus, .cf7-modal-form textarea:focus {
    outline: none; border-color: var(--q-jade); box-shadow: 0 0 0 3px var(--q-jade-dim);
}
.cf7-modal-form textarea { height: auto; min-height: 80px; resize: vertical; }
.cf7-submit { text-align: center; margin-top: 14px; }
.cf7-submit input[type="submit"] {
    background: var(--q-g-green); color: #fff; padding: 11px 36px;
    border-radius: var(--q-r-sm); font-size: 13.5px; font-weight: 700;
    border: none; cursor: pointer; font-family: var(--q-font);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 16px rgba(0,214,143,0.3);
}
.cf7-submit input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,214,143,0.42); }

/* ================================================================
   LOADING STATES
   ================================================================ */
.qmp-loading { opacity: 0.7; cursor: wait !important; pointer-events: none; }
.qmp-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(0,132,255,0.14); border-top-color: var(--q-sky);
    border-radius: 50%; animation: qSpin 0.65s linear infinite;
    vertical-align: middle; margin-right: 6px;
}
@keyframes qSpin { to { transform: rotate(360deg); } }

#qmp-infinity-loader {
    position: fixed; inset: 0; z-index: 9900;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
    will-change: opacity;
}
#qmp-infinity-loader.qmp-inf-visible { opacity: 1; pointer-events: all; }
.qmp-inf-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.42); }
.qmp-inf-box {
    position: relative; z-index: 1; background: #fff; border-radius: var(--q-r-xl);
    padding: 34px 46px; display: flex; flex-direction: column;
    align-items: center; gap: 16px; box-shadow: var(--q-s-xl); min-width: 200px;
}
.qmp-inf-svg { width: 120px; height: 60px; overflow: visible; }
.qmp-inf-track { fill: none; stroke: #e5e7eb; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.qmp-inf-stroke {
    fill: none; stroke: url(#qmpInfGrad); stroke-width: 10;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 130 390; stroke-dashoffset: 0;
    animation: qInfRun 1.4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(0,214,143,0.55));
}
@keyframes qInfRun { 100% { stroke-dashoffset: -520; } }
.qmp-inf-label { font-size: 12.5px; font-weight: 600; color: #374151; animation: qInfPulse 1.4s ease-in-out infinite; }
@keyframes qInfPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }

/* ================================================================
   WOO OVERRIDES
   ================================================================ */
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width:100%!important; float:none!important; }
.bzotech-col-md-5 { width:100%!important; }
.bzotech-row { flex-wrap:unset!important; }
dt { margin-top:0!important; }
table { border:0!important; }

/* ================================================================
   MOBILE ≤768px — FIXED VERSION
   ================================================================ */
@media (max-width: 768px) {
    .bzotech-col-md-5,.bzotech-col-md-7,.bzotech-col-md-12,
    .bzotech-row,.bzotech-container,.container,
    .site-content,.content-area,.entry-content,
    .page-content,.wp-block-group,.wp-block-column {
        width:100%!important; max-width:100%!important; min-width:0!important;
        float:none!important; flex:none!important;
        padding-left:0!important; padding-right:0!important;
        margin-left:0!important; margin-right:0!important;
        box-sizing:border-box!important;
    }

    .qmp-wrapper { flex-direction: column; padding: 14px; gap: 14px; }
    .qmp-sidebar { width: 100%; position: relative; top: auto; max-height: none; padding: 14px 16px; border-radius: var(--q-r); overflow: visible; will-change: auto; }
    .qmp-sidebar h3 { font-size: 9.5px; margin-bottom: 10px; }
    .qmp-search-wrap { display: none; }
    .qmp-sidebar ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .qmp-qualification-item { flex: 0 0 auto; padding: 6px 12px; border-radius: 99px; font-size: 11px; transform: none !important; }
    .qmp-qualification-item:hover,
    .qmp-qualification-item.active { transform: none !important; }
    .qmp-qualification-item::after { border-radius: 99px; }
    .qmp-qualification-badge { writing-mode: horizontal-tb; transform: none !important; font-size: 7.5px; padding: 2px 5px; }

    .qmp-content h2 { font-size: 17px; }
    .qmp-top-cards { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .qmp-price-cart-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .qmp-price-cart-row .qmp-btn.qmp-top-add-to-cart { width: 100%; flex: none; }

    .qmp-table, .qmp-table thead, .qmp-table tbody,
    .qmp-table tfoot, .qmp-table colgroup { display: block !important; width: 100% !important; border: none !important; }
    .qmp-table thead { display: none !important; }
    .qmp-table tbody tr {
        display: block !important; background: transparent !important;
        border: none !important; box-shadow: none !important;
        border-radius: 0 !important; padding: 0 !important;
        margin-bottom: 20px !important; width: 100% !important;
    }
    .qmp-table tbody tr:hover { transform: none; }
    .qmp-table td {
        display: block !important; width: 100% !important;
        border: none !important; padding: 0 !important;
        background: transparent !important; text-align: left !important;
        overflow: visible !important; border-radius: 0 !important; box-shadow: none !important;
        vertical-align: middle !important;
    }
    .qmp-cart-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto !important; vertical-align: middle; }
    .qmp-table tbody td:nth-child(2),
    .qmp-table tbody td:nth-child(3),
    .qmp-table tbody td:nth-child(4),
    .qmp-table tbody td:nth-child(5),
    .qmp-table tbody td:nth-child(6) { background-color: transparent !important; border-left: none !important; box-shadow: none !important; }
    .qmp-table td:first-child:not([data-label]):not(.qmp-subtotal-cell):not(.qmp-weight-subtotal) {
        font-size: 13px; font-weight: 700; color: var(--q-ink);
        padding: 0 0 10px 2px !important; background: transparent !important; border-left: none !important;
    }

    /* ── FIX 2: Weighting Points — show on mobile ── */
    .qmp-table td.qmp-weight-subtotal {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 14px !important;
        background: #f0f9ff !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--q-sky) !important;
        border-top: 1px dashed rgba(0,132,255,0.15) !important;
    }
    .qmp-table td.qmp-weight-subtotal::before {
        content: "Weighting Points";
        font-size: 11px;
        font-weight: 600;
        color: var(--q-ink);
        opacity: 0.6;
    }

    /* ── FIX 1: Mobile table rows — absolute positioning approach ── */
    .qmp-table td[data-label] {
        display: block !important;
        padding: 12px 14px 12px 14px !important;
        padding-left: 14px !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f4f8 !important;
        min-height: 70px !important;
        position: relative !important;
        border-left: none !important;
    }

    /* Remove the vertical rotated badge left offset on mobile */
    .qmp-table td:has(.qmp-status.preorder),
    .qmp-table td:has(.qmp-status.ready) {
        padding-left: 14px !important;
    }
    .qmp-table td[data-label]:first-of-type { border-radius: var(--q-r) var(--q-r) 0 0 !important; box-shadow: var(--q-s-sm) !important; }
    .qmp-table td[data-label]:last-of-type  { border-bottom: none !important; border-radius: 0 0 var(--q-r) var(--q-r) !important; }

    /* Product name via ::before — leave right side for price+cart */
    .qmp-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px; font-weight: 600; color: var(--q-ink);
        line-height: 1.4; margin-bottom: 5px;
        padding-right: 110px;
    }

    /* Price — absolute top-right, left of cart */
    .qmp-table td[data-label] .qmp-table-price {
        position: absolute !important;
        top: 12px !important;
        right: 58px !important;
        align-items: flex-end !important;
        text-align: right !important;
        margin: 0 !important;
    }
    .qmp-table td[data-label] .qmp-table-price ins,
    .qmp-table td[data-label] .qmp-table-price .woocommerce-Price-amount {
        font-size: 13px !important; font-weight: 700 !important;
    }
    .qmp-table td[data-label] .qmp-table-price del { font-size: 9px !important; }

    /* Cart icon — absolute top-right corner */
    .qmp-table td[data-label] .qmp-cart-icon {
        position: absolute !important;
        top: 12px !important; right: 14px !important;
        width: 34px !important; height: 34px !important; margin: 0 !important;
    }

    /* Status badge (READY/superseded) — inline block, normal flow */
    .qmp-table td[data-label] .qmp-status {
        display: inline-flex !important;
        position: static !important;
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 8.5px !important;
        padding: 3px 8px !important;
        border-radius: 99px !important;
        margin: 0 !important;
        width: fit-content !important;
        vertical-align: middle !important;
    }

    /* Pre-order box — inline flex row: [PRE-ORDER badge] [Enquire Now] [i] */
    .qmp-table td[data-label] .qmp-preorder-box {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    .qmp-table td[data-label] .qmp-preorder-line { display: none !important; }
    .qmp-table td[data-label] .qmp-preorder-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .qmp-enquire-btn {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 4px 10px !important;
        font-size: 9px !important;
    }

    .qmp-table td.qmp-subtotal-cell {
        display: flex !important; justify-content: space-between !important;
        align-items: center !important; padding: 12px 14px !important;
        background: #f8fafc !important; border-top: 1px solid #e8f0f8 !important;
        border-radius: 0 0 var(--q-r) var(--q-r) !important; box-shadow: var(--q-s-sm) !important;
    }
    .qmp-subtotal-amount { font-size: 15px !important; margin-bottom: 0 !important; }
    .qmp-total-box { flex-direction: row; padding: 14px 16px; }
    .qmp-total-action { text-align: center; }
    .qmp-go-cart-btn { width: 100%; justify-content: center; }

    /* ── FIX 3: Mini cart bar — sit above mobile bottom nav bar ── */
    .qmp-cart-bar {
        left: 10px !important;
        right: 10px !important;
        bottom: 72px !important; /* clears the mobile bottom nav (~56px tall + gap) */
        width: auto !important;
        transform: translateY(130%) !important;
    }
    .qmp-cart-bar.show {
        transform: translateY(0) !important;
    }
    .qmp-cart-bar-inner {
        border-radius: 16px !important;
        padding: 10px 16px !important;
        gap: 12px !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    .qmp-cart-bar-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        align-items: flex-start !important;
    }
    .qmp-cart-total {
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -0.4px !important;
        line-height: 1.1 !important;
    }
    .qmp-cart-count {
        font-size: 10px !important;
        padding: 2px 8px !important;
        background: rgba(255,255,255,0.15) !important;
        border-radius: 99px !important;
        font-weight: 500 !important;
    }
    .qmp-view-cart-btn {
        padding: 10px 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 99px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .qmp-empty-cart-btn {
        padding: 8px 10px !important;
        font-size: 11px !important;
        margin-left: 4px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .qmp-modal-content { width: calc(100vw - 24px); padding: 20px; }
    .qmp-checkout-content { width: 100%; padding: 20px 14px; border-radius: var(--q-r); }

    /* Mobile checkout */
    .checkout-custom .bzotech-row { display: flex !important; flex-direction: column !important; gap: 18px !important; }
    .checkout-custom .bzotech-col-md-7,
    .checkout-custom .bzotech-col-md-5 { width:100%!important; max-width:100%!important; flex:0 0 100%!important; padding:0!important; }
    .woocommerce-checkout .col2-set { display:block!important; width:100%!important; }
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2 { display:block!important; width:100%!important; float:none!important; margin-bottom:14px!important; padding:14px!important; background:#f8fafc!important; border-radius:10px!important; box-sizing:border-box!important; }
    .form-row-first,.form-row-last,.form-row-wide,.form-row { display:block!important; width:100%!important; float:none!important; margin-bottom:10px!important; clear:both!important; }
    .woocommerce-checkout input,
    .woocommerce-checkout select,
    .woocommerce-checkout textarea { width:100%!important; height:40px!important; padding:9px!important; font-size:13.5px!important; border:1.5px solid #e2e8f0!important; border-radius:8px!important; box-sizing:border-box!important; }
    .woocommerce-checkout textarea { height:auto!important; min-height:78px!important; }
    .woocommerce-checkout label { display:block!important; font-size:11.5px!important; font-weight:600!important; margin-bottom:4px!important; }
    #order_review { display:block!important; width:100%!important; padding:14px!important; background:#fff!important; border-radius:10px!important; border:1px solid #e2e8f0!important; overflow-x:auto!important; box-sizing:border-box!important; }
    #order_review table { width:100%!important; border-collapse:collapse!important; }
    #order_review table th,#order_review table td { padding:9px 6px!important; border-bottom:1px solid #f1f5f9!important; font-size:12.5px!important; }
    #payment { display:block!important; width:100%!important; padding:14px!important; background:#fff!important; border-radius:10px!important; border:1px solid #e2e8f0!important; box-sizing:border-box!important; }
    .payment_methods { list-style:none!important; padding:0!important; }
    .payment_methods li { margin-bottom:10px!important; padding:8px 0!important; border-bottom:1px solid #f1f5f9!important; }
    .payment_box { background:#f8fafc!important; padding:9px!important; border-radius:8px!important; font-size:12px!important; margin-top:5px!important; }
    #place_order { display:block!important; width:100%!important; height:46px!important; font-size:14.5px!important; font-weight:700!important; background:var(--q-g-green)!important; color:#fff!important; border:none!important; border-radius:8px!important; margin-top:14px!important; cursor:pointer!important; font-family:var(--q-font)!important; }
    .clear { clear:both!important; }

    .qmp-info-tooltip { display: none; }
    .qmp-info-tooltip.active { display: block; }
    .qmp-status.preorder { writing-mode: horizontal-tb !important; transform: none !important; position: static !important; padding: 3px 8px !important; border-radius: 99px !important; font-size: 8.5px !important; }
    /* Override global 28px left padding added for vertical badge — not needed on mobile */
    .qmp-table td:has(.qmp-status.preorder),
    .qmp-table td:has(.qmp-status.ready) { padding-left: 14px !important; }
    .qmp-unit-badge { writing-mode: horizontal-tb !important; transform: none !important; }
    .qmp-qualification-badge-status { writing-mode: horizontal-tb !important; transform: none !important; }
    .qmp-tooltip-enquire-btn { font-size: 10px !important; }
}

@media (max-width: 480px) {
    .qmp-wrapper { padding: 10px; }
    .qmp-top-cards { grid-template-columns: 1fr; }
    .qmp-sidebar { padding: 12px; }
    .qmp-total-box { flex-wrap: wrap; }
}

@media (min-width: 1600px) {
    .qmp-wrapper { padding-left: 56px; padding-right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ================================================================
   QMP PREMIUM — TABLET FIXES (769px – 1100px)
   Add this AFTER your existing stylesheet
   ================================================================ */

@media (min-width: 769px) and (max-width: 1100px) {

    /* ── Layout ── */
    .qmp-wrapper {
        padding: 16px 14px;
        gap: 14px;
    }

    /* ── Sidebar ── */
    .qmp-sidebar {
        width: 200px;
        padding: 16px 12px;
        flex-shrink: 0;
    }
    .qmp-qualification-item {
        font-size: 11px;
        padding: 7px 9px;
    }
    .qmp-qualification-title {
        font-size: 11px;
    }

    /* ── Table column widths — rebalanced for ~600-850px content area ── */
    .qmp-table {
        table-layout: fixed;
        border-spacing: 0 5px;
    }

    .qmp-table th:nth-child(1),
    .qmp-table td:nth-child(1) { width: 22%; }

    .qmp-table th:nth-child(2),
    .qmp-table td:nth-child(2),
    .qmp-table th:nth-child(3),
    .qmp-table td:nth-child(3),
    .qmp-table th:nth-child(4),
    .qmp-table td:nth-child(4),
    .qmp-table th:nth-child(5),
    .qmp-table td:nth-child(5) { width: 14%; }

    .qmp-table th.qmp-col-weight,
    .qmp-table td.qmp-weight-subtotal { width: 7%; min-width: 60px; }

    .qmp-table th:last-child,
    .qmp-table td:last-child { width: 15%; min-width: 110px; }

    /* ── Table header text ── */
    .qmp-table th {
        font-size: 8px;
        padding: 10px 6px;
        letter-spacing: 0.06em;
        line-height: 1.3;
    }
    .qmp-table th:first-child {
        padding-left: 12px;
    }

    /* ── Table cells ── */
    .qmp-table td {
        padding: 10px 6px;
    }
    .qmp-table td:first-child {
        font-size: 11px;
        padding-left: 12px;
        line-height: 1.4;
    }
    .qmp-table td:last-child {
        padding: 10px 8px;
    }

    /* ── Price in table — fix line-breaking ── */
    .qmp-table-price ins,
    .qmp-table-price > span,
    .qmp-table-price .woocommerce-Price-amount {
        font-size: 13px !important;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: -0.3px;
    }
    .qmp-table-price del {
        font-size: 9.5px;
        white-space: nowrap;
    }

    /* ── Subtotal amount ── */
    .qmp-subtotal-amount {
        font-size: 14px !important;
        letter-spacing: -0.3px;
    }

    /* ── READY / PRE-ORDER status badges — force horizontal in table ── */
    .qmp-table td .qmp-status.ready,
    .qmp-table td .qmp-status.preorder {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 3px 5px !important;
        border-radius: 99px !important;
        font-size: 7px !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        height: auto !important;
        width: fit-content !important;
        margin-bottom: 5px !important;
        gap: 3px !important;
    }
    .qmp-table td .qmp-status.ready::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #16a34a;
        flex-shrink: 0;
    }

    /* Remove left padding offset caused by vertical badge on desktop */
    .qmp-table td:has(.qmp-status.preorder),
    .qmp-table td:has(.qmp-status.ready) {
        padding-left: 6px !important;
    }

    /* ── PRE-ORDER cell layout fix ── */
    .qmp-preorder-box {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    .qmp-preorder-line {
        display: none;
    }
    .qmp-preorder-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }
    .qmp-enquire-btn {
        font-size: 8px !important;
        padding: 3px 7px !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }

    /* ── "Made for you?" label ── */
    .qmp-table th span[style*="Made"],
    .qmp-table td [class*="made"] {
        font-size: 8px;
    }

    /* ── Cart icon ── */
    .qmp-cart-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
    .qmp-cart-icon::before {
        font-size: 15px;
    }

    /* ── Add All button ── */
    .qmp-add-all {
        font-size: 10px !important;
        padding: 5px 10px !important;
        gap: 3px !important;
    }
    .qmp-add-all::before {
        font-size: 13px;
    }

    /* ── Unit name + code in first column ── */
    .qmp-unit-code-prefix {
        font-size: 13px !important;
    }

    /* ── Info button size ── */
    .qmp-info-btn {
        width: 15px;
        height: 15px;
        font-size: 8.5px;
    }

    /* ── Unit badge ── */
    .qmp-unit-badge {
        font-size: 7.5px;
        padding: 2px 5px;
    }

    /* ── Top cards grid ── */
    .qmp-top-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* ── Content heading ── */
    .qmp-content h2 {
        font-size: 18px;
    }

    /* ── Total box ── */
    .qmp-total-box {
        padding: 14px 18px;
    }
}

/* ── Narrower tablets / large phones landscape (769–900px) ── */
@media (min-width: 769px) and (max-width: 900px) {

    .qmp-sidebar {
        width: 180px;
        padding: 14px 10px;
    }

    .qmp-table th:nth-child(1),
    .qmp-table td:nth-child(1) { width: 20%; }

    .qmp-table th:nth-child(2),
    .qmp-table td:nth-child(2),
    .qmp-table th:nth-child(3),
    .qmp-table td:nth-child(3),
    .qmp-table th:nth-child(4),
    .qmp-table td:nth-child(4),
    .qmp-table th:nth-child(5),
    .qmp-table td:nth-child(5) { width: 14%; }

    .qmp-table th:last-child,
    .qmp-table td:last-child { width: 13%; min-width: 95px; }

    .qmp-table th {
        font-size: 7.5px;
        padding: 9px 5px;
    }

    .qmp-table td {
        padding: 9px 5px;
    }

    .qmp-table td:first-child {
        font-size: 10.5px;
        padding-left: 10px;
    }

    .qmp-table-price ins,
    .qmp-table-price > span,
    .qmp-table-price .woocommerce-Price-amount {
        font-size: 12px !important;
    }

    .qmp-table-price del {
        font-size: 9px !important;
    }

    .qmp-cart-icon {
        width: 28px;
        height: 28px;
    }
    .qmp-cart-icon::before {
        font-size: 14px;
    }

    .qmp-add-all {
        font-size: 9.5px !important;
        padding: 4px 8px !important;
    }
}

/* Allow clicks on info button */
.qmp-card .qmp-info-btn { position: relative; z-index: 20; pointer-events: auto; }
.qmp-card::before, .qmp-card::after { pointer-events: none; }


/* ================================================================
   QMP PREMIUM — CART ICON ALIGNMENT FIX (ALL SCREEN SIZES)
   Keeps all cart icons on the same horizontal baseline regardless
   of whether a cell has READY badge, PRE-ORDER + Enquire, or just price.
   ================================================================ */

/* Make every product cell a flex column so cart always sits at the bottom */
.qmp-table tbody td:not(:first-child):not(:last-child):not(.qmp-weight-subtotal):not(.qmp-subtotal-cell) {
    display: table-cell !important; /* keep table layout */
    vertical-align: bottom !important; /* anchor all cell content to bottom */
}

/* Inner wrapper for each cell's content — stack vertically, cart at bottom */
.qmp-table tbody td .qmp-table-price,
.qmp-table tbody td .qmp-status.ready,
.qmp-table tbody td .qmp-status.preorder,
.qmp-table tbody td .qmp-preorder-box {
    display: block;
}

/* Wrap the cell content in a flex column via the td itself */
.qmp-table tbody td:not(:first-child):not(:last-child):not(.qmp-weight-subtotal):not(.qmp-subtotal-cell) {
    vertical-align: bottom !important;
}

/* The key fix: use a flex column container inside each td
   by targeting the direct children flow */
.qmp-table tbody tr {
    vertical-align: bottom !important;
}

/* Force all tds to align from the bottom so cart icons line up */
.qmp-table tbody td {
    vertical-align: bottom !important;
}

/* PRE-ORDER cell — prevent "Made for you?" + Enquire from pushing cart down
   by hiding the extra label text and compacting the layout */
.qmp-preorder-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
}

/* Hide the "Made for you?" text that only appears above PRE-ORDER cells
   (it's in the td directly, outside .qmp-preorder-box — target as text node wrapper) */
.qmp-table td > .qmp-made-label,
.qmp-table td > small,
.qmp-table th > small {
    font-size: 8px;
    line-height: 1.2;
    display: block;
    text-align: center;
}

/* Subtotal cell stays middle-aligned */
.qmp-table td.qmp-subtotal-cell {
    vertical-align: middle !important;
}

/* First column stays middle-aligned */
.qmp-table tbody td:first-child {
    vertical-align: middle !important;
}

/* ================================================================
   QMP PREMIUM — TABLET FIXES (769px – 1100px)
   Add this AFTER your existing stylesheet
   ================================================================ */

@media (min-width: 769px) and (max-width: 1100px) {

    /* ── Layout ── */
    .qmp-wrapper {
        padding: 16px 14px;
        gap: 14px;
    }

    /* ── Sidebar ── */
    .qmp-sidebar {
        width: 200px;
        padding: 16px 12px;
        flex-shrink: 0;
    }
    .qmp-qualification-item {
        font-size: 11px;
        padding: 7px 9px;
    }
    .qmp-qualification-title {
        font-size: 11px;
    }

    /* ── Table column widths — rebalanced for ~600-850px content area ── */
    .qmp-table {
        table-layout: fixed;
        border-spacing: 0 5px;
    }

    .qmp-table th:nth-child(1),
    .qmp-table td:nth-child(1) { width: 22%; }

    .qmp-table th:nth-child(2),
    .qmp-table td:nth-child(2),
    .qmp-table th:nth-child(3),
    .qmp-table td:nth-child(3),
    .qmp-table th:nth-child(4),
    .qmp-table td:nth-child(4),
    .qmp-table th:nth-child(5),
    .qmp-table td:nth-child(5) { width: 14%; }

    .qmp-table th.qmp-col-weight,
    .qmp-table td.qmp-weight-subtotal { width: 7%; min-width: 60px; }

    .qmp-table th:last-child,
    .qmp-table td:last-child { width: 15%; min-width: 110px; }

    /* ── Table header text ── */
    .qmp-table th {
        font-size: 8px;
        padding: 10px 6px;
        letter-spacing: 0.06em;
        line-height: 1.3;
    }
    .qmp-table th:first-child {
        padding-left: 12px;
    }

    /* ── Table cells ── */
    .qmp-table td {
        padding: 10px 6px;
    }
    .qmp-table td:first-child {
        font-size: 11px;
        padding-left: 12px;
        line-height: 1.4;
    }
    .qmp-table td:last-child {
        padding: 10px 8px;
    }

    /* ── Price in table — fix line-breaking ── */
    .qmp-table-price ins,
    .qmp-table-price > span,
    .qmp-table-price .woocommerce-Price-amount {
        font-size: 13px !important;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: -0.3px;
    }
    .qmp-table-price del {
        font-size: 9.5px;
        white-space: nowrap;
    }

    /* ── Subtotal amount ── */
    .qmp-subtotal-amount {
        font-size: 14px !important;
        letter-spacing: -0.3px;
    }

    /* ── READY / PRE-ORDER status badges — force horizontal in table ── */
    .qmp-table td .qmp-status.ready,
    .qmp-table td .qmp-status.preorder {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 3px 5px !important;
        border-radius: 99px !important;
        font-size: 7px !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        height: auto !important;
        width: fit-content !important;
        margin-bottom: 5px !important;
        gap: 3px !important;
    }
    .qmp-table td .qmp-status.ready::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #16a34a;
        flex-shrink: 0;
    }

    /* Remove left padding offset caused by vertical badge on desktop */
    .qmp-table td:has(.qmp-status.preorder),
    .qmp-table td:has(.qmp-status.ready) {
        padding-left: 6px !important;
    }

    /* ── PRE-ORDER cell layout fix ── */
    .qmp-preorder-box {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    .qmp-preorder-line {
        display: none;
    }
    .qmp-preorder-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }
    .qmp-enquire-btn {
        font-size: 8px !important;
        padding: 3px 7px !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }

    /* ── "Made for you?" label ── */
    .qmp-table th span[style*="Made"],
    .qmp-table td [class*="made"] {
        font-size: 8px;
    }

    /* ── Cart icon ── */
    .qmp-cart-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
    .qmp-cart-icon::before {
        font-size: 15px;
    }

    /* ── Add All button ── */
    .qmp-add-all {
        font-size: 10px !important;
        padding: 5px 10px !important;
        gap: 3px !important;
    }
    .qmp-add-all::before {
        font-size: 13px;
    }

    /* ── Unit name + code in first column ── */
    .qmp-unit-code-prefix {
        font-size: 13px !important;
    }

    /* ── Info button size ── */
    .qmp-info-btn {
        width: 15px;
        height: 15px;
        font-size: 8.5px;
    }

    /* ── Unit badge ── */
    .qmp-unit-badge {
        font-size: 7.5px;
        padding: 2px 5px;
    }

    /* ── Top cards grid ── */
    .qmp-top-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* ── Content heading ── */
    .qmp-content h2 {
        font-size: 18px;
    }

    /* ── Total box ── */
    .qmp-total-box {
        padding: 14px 18px;
    }
}

/* ── Narrower tablets / large phones landscape (769–900px) ── */
@media (min-width: 769px) and (max-width: 900px) {

    .qmp-sidebar {
        width: 180px;
        padding: 14px 10px;
    }

    .qmp-table th:nth-child(1),
    .qmp-table td:nth-child(1) { width: 20%; }

    .qmp-table th:nth-child(2),
    .qmp-table td:nth-child(2),
    .qmp-table th:nth-child(3),
    .qmp-table td:nth-child(3),
    .qmp-table th:nth-child(4),
    .qmp-table td:nth-child(4),
    .qmp-table th:nth-child(5),
    .qmp-table td:nth-child(5) { width: 14%; }

    .qmp-table th:last-child,
    .qmp-table td:last-child { width: 13%; min-width: 95px; }

    .qmp-table th {
        font-size: 7.5px;
        padding: 9px 5px;
    }

    .qmp-table td {
        padding: 9px 5px;
    }

    .qmp-table td:first-child {
        font-size: 10.5px;
        padding-left: 10px;
    }

    .qmp-table-price ins,
    .qmp-table-price > span,
    .qmp-table-price .woocommerce-Price-amount {
        font-size: 12px !important;
    }

    .qmp-table-price del {
        font-size: 9px !important;
    }

    .qmp-cart-icon {
        width: 28px;
        height: 28px;
    }
    .qmp-cart-icon::before {
        font-size: 14px;
    }

    .qmp-add-all {
        font-size: 9.5px !important;
        padding: 4px 8px !important;
    }
}

/* ================================================================
   FIX: Enquire Now button click + i button in PRE-ORDER cell
   ================================================================ */

/* 1. Make sure preorder actions area is fully clickable */
.qmp-preorder-actions {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}

/* 2. Enquire button — force clickable, above all overlays */
.qmp-enquire-btn {
    position: relative;
    z-index: 15 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 3. Info button next to enquire — sits above enquire */
.qmp-preorder-actions .qmp-th-info-wrap {
    position: relative;
    z-index: 16 !important;
    pointer-events: auto !important;
}

.qmp-preorder-actions .qmp-info-btn {
    position: relative;
    z-index: 17 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. The td cell itself must not block pointer events */
.qmp-table tbody td {
    pointer-events: auto !important;
}

/* 5. Pseudo-elements on rows/cards must never block clicks */
.qmp-table tbody tr::before,
.qmp-table tbody tr::after,
.qmp-table tbody td::before,
.qmp-table tbody td::after {
    pointer-events: none !important;
    z-index: 0 !important;
}

/* 6. Tooltip portal — only gets pointer-events when visible */
.qmp-card-tooltip-portal {
    pointer-events: none !important;
}
.qmp-card-tooltip-portal.visible {
    pointer-events: auto !important;
}

/* 7. Preorder box wrapper */
.qmp-preorder-box {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}


/* ================================================================
   FIX: PRE-ORDER / READY vertical badge jerk on cell hover
   ================================================================ */

/* 1. Lock the vertical badges — no transitions, no transform recalc */
.qmp-status.ready,
.qmp-status.preorder {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    transform: rotate(180deg) translateY(50%) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 2. The td containing the badge — isolate it from hover repaints */
.qmp-table td:has(.qmp-status.ready),
.qmp-table td:has(.qmp-status.preorder) {
    transform: none !important;
    transition: background 0.18s ease !important;
    isolation: isolate;
}

/* 3. Completely freeze row transform — no translateY on hover */
.qmp-table tbody tr,
.qmp-table tbody tr:hover {
    transform: none !important;
    transition: none !important;
}

/* 4. Only color transitions allowed on td hover — no position changes */
.qmp-table tbody td {
    transform: none !important;
    transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

/* 5. Prevent price area hover from triggering reflow */
.qmp-table-price {
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* 6. Cart icon — remove scale, keep color feedback only */
.qmp-cart-icon {
    transition: box-shadow 0.2s ease !important;
}
.qmp-cart-icon:hover {
    transform: none !important;
    box-shadow: var(--q-s-jade) !important;
}

/* ================================================================
   FIX: Tooltip — fixed portal, always above, no duplicates
   ================================================================ */

/* 1. Hide ALL inline tooltips on desktop — portal handles everything */
@media (min-width: 992px) {
    .qmp-info-tooltip {
        display: none !important;
        pointer-events: none !important;
    }
    .qmp-th-info-wrap:hover .qmp-info-tooltip {
        display: none !important;
    }
    .qmp-card-tooltip-portal:not(#qmp-tooltip-portal-global) {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* 2. Global portal — fixed to viewport, no scroll offset issues */
#qmp-tooltip-portal-global {
    position: fixed !important;
    margin: 0 !important;
    padding: 16px !important;
    width: 260px !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease !important;
    /* Remove any transform that shifts position */
    transform: none !important;
}

#qmp-tooltip-portal-global.visible {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 3. Arrow points DOWN toward the button */
#qmp-tooltip-portal-global::before {
    content: '' !important;
    position: absolute !important;
    top: auto !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.04) !important;
    z-index: -1 !important;
}

/* 4. Remove the translateY(-110%) that was pushing tooltip way up */
.qmp-card-tooltip-portal {
    transform: none !important;
    transition: opacity 0.15s ease !important;
}
.qmp-card-tooltip-portal.visible {
    transform: none !important;
    opacity: 1 !important;
}

/* 5. Table overflow — tooltip must escape cell bounds */
.qmp-table,
.qmp-table tbody,
.qmp-table tbody tr,
.qmp-table tbody td {
    overflow: visible !important;
}

/* 6. Mobile tooltip — show inline on tap */
@media (max-width: 991px) {
    .qmp-info-tooltip {
        display: none !important;
    }
    .qmp-info-tooltip.active {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 99999 !important;
        width: 240px !important;
        pointer-events: auto !important;
    }
    .qmp-info-tooltip.active::before {
        top: auto !important;
        bottom: -5px !important;
        left: 50% !important;
        transform: translateX(-50%) rotate(45deg) !important;
    }
}