/* ================================================================

   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; }

}

/* ================================================================

   UNIT CODE CHIP — matrix table unit column

   ================================================================ */

.qmp-unit-code-chip {

    display: inline-flex;

    align-items: center;

    padding: 2px 8px 2px 6px;

    border-radius: 5px;

    background: linear-gradient(135deg, rgba(0,98,204,0.10) 0%, rgba(0,214,143,0.10) 100%);

    border: 1px solid rgba(0,98,204,0.15);

    margin-bottom: 4px;

    gap: 4px;

    width: fit-content;

}

.qmp-unit-code-chip::before {

    content: '';

    display: inline-block;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: linear-gradient(135deg, #0062cc 0%, #00d68f 100%);

    flex-shrink: 0;

}

.qmp-unit-code-chip-text {

    font-size: 11px;

    font-weight: 800;

    background: linear-gradient(135deg, #0062cc 0%, #00d68f 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    letter-spacing: 0.04em;

    line-height: 1.3;

    font-family: var(--q-mono, 'DM Mono', monospace);

}

.qmp-unit-title-name {

    display: block;

    font-size: 12.5px;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.45;

    letter-spacing: -0.1px;

}

/* ================================================================

   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: center; 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: visible;   /* FIX */

    white-space: normal; /* allow wrapping */

}

.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;  transform: translateX(3px); }

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

        white-space: normal;

    word-break: break-word;

    overflow-wrap: anywhere;

}

.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 (FIXED)

   ================================================================ */

.qmp-content {

    flex: 1;

    min-width: 0;

    position: relative;

    z-index: 1;

    display: block;

}

/* 🔥 FIX: ALWAYS SHOW */

.qmp-qualification {

    display: block !important;

    animation: qFadeUp 0.45s cubic-bezier(0.4,0,0.2,1);

}

/* ❌ REMOVE THIS (IMPORTANT) */

/* .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;

}

.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: 13px 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(240px, 1fr));

    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: transparent; color: var(--q-sky) !important;

    border: 1.5px solid var(--q-sky);

    border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer;

    transition: transform 0.22s ease, box-shadow 0.22s ease, background 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 { background: var(--q-sky); color: #fff !important; transform: translateY(-1px); box-shadow: var(--q-s-sky); }

.qmp-add-all.added { background: transparent; border-color: #16a34a; color: #16a34a !important; }

.qmp-add-all.added::before { content: '−'; }

.qmp-add-all.added:hover { background: #16a34a; color: #fff !important; }

/* ================================================================

   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: 24px;

    left: 50%;

    transform: translateX(-50%) translateY(130%);

    z-index: 9500;

    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);

    pointer-events: none;

}

.qmp-cart-bar.show {

    transform: translateX(-50%) translateY(0);

    pointer-events: all;

}

.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);

    /* ✅ Fix scrollbar clipping on rounded corners */

    overflow: hidden;

    overflow-y: auto;

}

.qmp-checkout-content::-webkit-scrollbar {

    width: 4px;

}

.qmp-checkout-content::-webkit-scrollbar-track {

    background: transparent;

    border-radius: 0 var(--q-r-xl) var(--q-r-xl) 0;

    margin-top: 28px;

    margin-bottom: 28px;

}

.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: 12px 14px;

        border-radius: var(--q-r);

        overflow: visible;

        will-change: auto;

        /* Horizontal scrollable pill bar like rtoworks mobile */

        background: rgba(255,255,255,0.96);

        box-shadow: 0 2px 8px rgba(5,13,26,0.07);

    }

    .qmp-sidebar h3 { font-size: 9.5px; margin-bottom: 8px; }

    .qmp-search-wrap { display: none; }

    .qmp-sidebar ul {

        flex-direction: column;

        flex-wrap: nowrap;

        overflow-x: auto;

        gap: 6px;

        padding-bottom: 4px;

        /* hide scrollbar visually but keep functional */

        scrollbar-width: none;

        -ms-overflow-style: none;

    }

    .qmp-sidebar ul::-webkit-scrollbar { display: none; }

    .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: 7px 7px 10px 10px !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: 0px !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 {

    position: fixed;

    bottom: 24px;

    left: 50%;

    transform: translateX(-50%) translateY(150%);

    z-index: 99999;

    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);

}

/* Cart bar — z-index lowered to 9500 so it doesn't overlap Elementor content */

body > .qmp-cart-bar {

    position: fixed !important;

    bottom: 24px !important;

    left: 50% !important;

    transform: translateX(-50%) translateY(150%) !important;

    z-index: 9500 !important;

}

body > .qmp-cart-bar.show {

    transform: translateX(-50%) translateY(0) !important;

}

.qmp-cart-bar.show { transform: translateX(-50%) translateY(0); }

    .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: 0px !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;

        white-space: normal !important;

    word-break: break-word !important;

    overflow-wrap: anywhere !important;

    }

    /* ── 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 */

}

/* Mobile - Override with block layout */

@media (max-width: 768px) {

    .qmp-table tbody td:not(:first-child):not(:last-child):not(.qmp-weight-subtotal):not(.qmp-subtotal-cell) {

        display: block !important;

    }

}

/* 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;

    }

}

/* ================================================================

   QMP PATCH — Infinity Loader inside last column (subtotal cell)

   PASTE THIS AT THE VERY END OF YOUR matrix.css

   ================================================================ */

/* Make subtotal cell a positioning anchor */

.qmp-subtotal-cell {

    position: relative !important;

    overflow: visible !important;

}

/* The infinity popup sits OVER the subtotal cell content */

.qmp-row-inf-popup {

    position: absolute;

    inset: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.92);

    border-radius: var(--q-r-sm, 9px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    animation: qmpRowInfIn 0.18s ease both;

    pointer-events: none;

}

@keyframes qmpRowInfIn {

    from { opacity: 0; }

    to   { opacity: 1; }

}

/* The infinity SVG */

.qmp-row-inf-popup svg {

    width: 56px;

    height: 28px;

    overflow: visible;

    display: block;

}

.qmp-row-inf-track {

    fill: none;

    stroke: #e5e7eb;

    stroke-width: 10;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.qmp-row-inf-stroke {

    fill: none;

    stroke: url(#qmpRowInfGrad);

    stroke-width: 10;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 130 390;

    stroke-dashoffset: 0;

    animation: qmpRowInfRun 1.4s linear infinite;

    filter: drop-shadow(0 0 5px rgba(0, 214, 143, 0.55));

}

@keyframes qmpRowInfRun {

    100% { stroke-dashoffset: -520; }

}

/* Label below */

.qmp-row-inf-label {

    font-size: 9.5px;

    font-weight: 600;

    color: #374151;

    font-family: 'Sora', sans-serif;

    letter-spacing: 0.03em;

    animation: qmpRowInfPulse 1.4s ease-in-out infinite;

}

@keyframes qmpRowInfPulse {

    0%, 100% { opacity: 1; }

    50%       { opacity: 0.4; }

}

/* ── Card infinity loader ── */

.qmp-card {

    overflow: hidden !important;

}

.qmp-card-inf-popup {

    position: absolute;

    inset: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.92);

    border-radius: var(--q-r-lg, 20px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    pointer-events: none;

    animation: qmpRowInfIn 0.18s ease both;

}

.qmp-card-inf-popup svg {

    width: 56px;

    height: 28px;

    overflow: visible;

    display: block;

}

.qmp-card-inf-popup .qmp-row-inf-label {

    font-size: 10.5px;

    font-weight: 600;

    color: #374151;

    font-family: 'Sora', sans-serif;

    letter-spacing: 0.03em;

    animation: qmpRowInfPulse 1.4s ease-in-out infinite;

}

/* ================================================================

   QMP v7 — Premium UX additions

   PASTE AT THE VERY END of your matrix.css

   ================================================================ */

/* ── Cart icon pop animation (Twitter-heart style) ── */

@keyframes qmpPop {

    0%   { transform: scale(1); }

    40%  { transform: scale(1.35); }

    70%  { transform: scale(0.88); }

    100% { transform: scale(1); }

}

.qmp-cart-icon.qmp-pop {

    animation: qmpPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;

}

/* ── Row flash on add ── */

@keyframes qmpFlashAdd {

    0%   { background-color: rgba(34, 197, 94, 0.18); }

    100% { background-color: transparent; }

}

@keyframes qmpFlashRemove {

    0%   { background-color: rgba(239, 68, 68, 0.12); }

    100% { background-color: transparent; }

}

.qmp-row-flash-add td {

    animation: qmpFlashAdd 0.6s ease-out both !important;

}

.qmp-row-flash-remove td {

    animation: qmpFlashRemove 0.6s ease-out both !important;

}

/* ── Cart bar pulse ── */

@keyframes qmpBarPulse {

    0%   { transform: translateX(-50%) translateY(0) scale(1); }

    40%  { transform: translateX(-50%) translateY(-4px) scale(1.02); }

    100% { transform: translateX(-50%) translateY(0) scale(1); }

}

.qmp-cart-bar.qmp-bar-pulse {

    animation: qmpBarPulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;

}

/* ── Premium Toast with Undo button ── */

.qmp-toast-undo {

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #fff;

    padding: 3px 10px;

    border-radius: 99px;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    margin-left: 8px;

    font-family: var(--q-font, 'Sora', sans-serif);

    transition: background 0.15s ease;

    flex-shrink: 0;

    white-space: nowrap;

}

.qmp-toast-undo:hover {

    background: rgba(255, 255, 255, 0.28);

}

/* ── Subtotal cell loader ── */

.qmp-subtotal-cell {

    position: relative !important;

    overflow: visible !important;

}

.qmp-row-inf-popup {

    position: absolute;

    inset: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.92);

    border-radius: var(--q-r-sm, 9px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    animation: qmpRowInfIn 0.15s ease both;

    pointer-events: none;

}

@keyframes qmpRowInfIn {

    from { opacity: 0; }

    to   { opacity: 1; }

}

.qmp-row-inf-popup svg {

    width: 56px; height: 28px;

    overflow: visible; display: block;

}

.qmp-row-inf-track {

    fill: none; stroke: #e5e7eb;

    stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;

}

.qmp-row-inf-stroke {

    fill: none; stroke: url(#qmpRowInfGrad);

    stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;

    stroke-dasharray: 130 390; stroke-dashoffset: 0;

    animation: qmpRowInfRun 1.4s linear infinite;

    filter: drop-shadow(0 0 5px rgba(0, 214, 143, 0.55));

}

@keyframes qmpRowInfRun { 100% { stroke-dashoffset: -520; } }

.qmp-row-inf-label {

    font-size: 9.5px; font-weight: 600; color: #374151;

    font-family: 'Sora', sans-serif; letter-spacing: 0.03em;

    animation: qmpRowInfPulse 1.4s ease-in-out infinite;

}

@keyframes qmpRowInfPulse {

    0%, 100% { opacity: 1; }

    50%       { opacity: 0.4; }

}

/* ── Card infinity loader ── */

.qmp-card {

    overflow: hidden !important;

}

.qmp-card-inf-popup {

    position: absolute;

    inset: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.92);

    border-radius: var(--q-r-lg, 20px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    pointer-events: none;

    animation: qmpRowInfIn 0.15s ease both;

}

.qmp-card-inf-popup svg {

    width: 56px; height: 28px;

    overflow: visible; display: block;

}

/* ================================================================

   QMP v8 — Ultra Premium CSS

   PASTE AT THE VERY END of your matrix.css

   ================================================================ */

/* ── Cart icon pop ── */

@keyframes qmpPop {

    0%   { transform: scale(1); }

    35%  { transform: scale(1.4); }

    65%  { transform: scale(0.85); }

    100% { transform: scale(1); }

}

.qmp-cart-icon.qmp-pop {

    animation: qmpPop 0.35s cubic-bezier(0.34,1.56,0.64,1) both !important;

}

/* ── Row flash ── */

@keyframes qmpFA { 0%{background:rgba(34,197,94,0.2)} 100%{background:transparent} }

@keyframes qmpFR { 0%{background:rgba(239,68,68,0.12)} 100%{background:transparent} }

.qmp-flash-add    { animation: qmpFA 0.65s ease-out both !important; }

.qmp-flash-remove { animation: qmpFR 0.65s ease-out both !important; }

/* ── Cart bar pulse ── */

@keyframes qmpBP {

    0%   { transform: translateX(-50%) scale(1); }

    40%  { transform: translateX(-50%) scale(1.025) translateY(-3px); }

    100% { transform: translateX(-50%) scale(1); }

}

.qmp-cart-bar.qmp-bar-pulse {

    animation: qmpBP 0.42s cubic-bezier(0.34,1.56,0.64,1) both !important;

}

/* ── Toast Undo button ── */

.qmp-toast-undo {

    background: rgba(255,255,255,0.15);

    border: 1px solid rgba(255,255,255,0.3);

    color: #fff;

    padding: 3px 11px;

    border-radius: 99px;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    margin-left: 10px;

    font-family: var(--q-font,'Sora',sans-serif);

    transition: background 0.15s;

    flex-shrink: 0;

    white-space: nowrap;

}

.qmp-toast-undo:hover { background: rgba(255,255,255,0.3); }

/* ── Shared loader styles ── */

@keyframes qmpLdrIn { from{opacity:0} to{opacity:1} }

@keyframes qmpInfRun { 100%{stroke-dashoffset:-502} }

@keyframes qmpInfPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.qmp-inf-t {

    fill: none; stroke: #e5e7eb;

    stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;

}

.qmp-inf-s {

    fill: none; stroke: url(#qmpG);

    stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;

    stroke-dasharray: 130 390; stroke-dashoffset: 0;

    animation: qmpInfRun 1.4s linear infinite;

    filter: drop-shadow(0 0 5px rgba(0,214,143,0.55));

}

.qmp-ldr-lbl {

    font-size: 9.5px; font-weight: 600; color: #374151;

    font-family: 'Sora',sans-serif; letter-spacing: 0.03em;

    animation: qmpInfPulse 1.4s ease-in-out infinite;

}

/* ── Row loader (subtotal cell) ── */

.qmp-subtotal-cell {

    position: relative !important;

    overflow: visible !important;

}

.qmp-ldr-row {

    position: absolute;

    inset: 0;

    z-index: 99;

    background: rgba(255,255,255,0.93);

    border-radius: var(--q-r-sm,9px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    pointer-events: none;

    animation: qmpLdrIn 0.15s ease both;

}

.qmp-ldr-row svg {

    width: 52px; height: 26px;

    overflow: visible; display: block;

}

/* ── Card loader (full card overlay) ── */

.qmp-card { overflow: hidden !important; }

.qmp-ldr-card {

    position: absolute;

    inset: 0;

    z-index: 99;

    background: rgba(255,255,255,0.93);

    border-radius: var(--q-r-lg,20px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    pointer-events: none;

    animation: qmpLdrIn 0.15s ease both;

}

.qmp-ldr-card svg {

    width: 52px; height: 26px;

    overflow: visible; display: block;

}

/* ================================================================

   FIX 1: Top Cards — Pre-order content LEFT aligned

   ================================================================ */

/* Make the preorder box inside cards left-aligned */

.qmp-card .qmp-preorder-box {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;  /* LEFT align, not center */

    gap: 4px !important;

}

.qmp-card .qmp-preorder-line {

    display: block !important;           /* Show "Made for you?" text in cards */

    text-align: left !important;

    font-size: 9px;

    color: #94a3b8;

    font-weight: 500;

    letter-spacing: 0.02em;

    line-height: 1.3;

}

.qmp-card .qmp-preorder-actions {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: flex-start !important;  /* LEFT align */

    gap: 5px !important;

    flex-wrap: nowrap !important;

}

.qmp-card .qmp-enquire-btn {

    writing-mode: horizontal-tb !important;

    transform: none !important;

    white-space: nowrap !important;

}

/* ================================================================

   FIX 2: Sidebar scrollbar clipped inside rounded corners

   ================================================================ */

.qmp-sidebar {

    /* Clip scrollbar within rounded corners */

    overflow: hidden;           /* outer clip */

    overflow-y: auto;           /* allow vertical scroll */

    border-radius: var(--q-r-xl);

    /* Force scrollbar to paint inside — webkit only */

    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari rounded clip trick */

}

/* Chrome/Edge — custom scrollbar stays inside */

.qmp-sidebar::-webkit-scrollbar {

    width: 3px;

}

.qmp-sidebar::-webkit-scrollbar-track {

    background: transparent;

    /* Add top/bottom margin so bar doesn't overlap rounded caps */

    margin-top: 14px;

    margin-bottom: 14px;

    border-radius: 99px;

}

.qmp-sidebar::-webkit-scrollbar-thumb {

    background: var(--q-g-brand);

    border-radius: 99px;

}

.qmp-sidebar::-webkit-scrollbar-corner {

    background: transparent;

}

/* =====================================================

 * AJAX PANEL — placeholder, loading, fade-in

 * ===================================================== */

.qmp-panel-placeholder {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 56px 40px;

    color: var(--q-g-brand, #0e7490);

    font-size: 15px;

    font-weight: 500;

    opacity: 0.75;

}

.qmp-panel-placeholder svg {

    flex-shrink: 0;

    opacity: 0.6;

}

.qmp-panel-loading {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 56px 40px;

    color: #94a3b8;

    font-size: 14px;

}

/* Spinner */

.qmp-panel-spinner {

    display: inline-block;

    width: 18px;

    height: 18px;

    border: 2px solid #e2e8f0;

    border-top-color: var(--q-g-brand, #0e7490);

    border-radius: 50%;

    animation: qmpSpin 0.7s linear infinite;

    flex-shrink: 0;

}

@keyframes qmpSpin {

    to { transform: rotate(360deg); }

}

/* Panel fade-in */

.qmp-qual-fade-in {

    animation: qmpFadeSlide 0.22s ease both;

}

@keyframes qmpFadeSlide {

    from { opacity: 0; transform: translateY(8px); }

    to   { opacity: 1; transform: translateY(0); }

}

/* Enquire Button — normal display, no collapse/expand effect */

.qmp-enquire-btn.qmp-enquire-collapsed {

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    padding: 5px 12px !important;

    overflow: visible !important;

    white-space: nowrap !important;

    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    
 

}

.qmp-enquire-btn.qmp-enquire-collapsed:hover {

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    padding: 5px 12px !important;

    overflow: visible !important;

}

/* Tooltip Styles - Uses your existing design tokens */

.qmp-th-info-wrap {

    position: relative;

    display: inline-flex;

    align-items: center;

    margin-left: 4px;

}

.qmp-info-btn {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    border: 1.5px solid rgba(5,13,26,0.15);

    background: transparent;

    color: var(--q-mist, #7a92aa);

    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;

}

.qmp-info-btn:hover {

    background: var(--q-ink, #050d1a);

    border-color: var(--q-ink, #050d1a);

    color: #fff;

    transform: scale(1.12);

}

/* Tooltip that appears on hover */

.qmp-info-tooltip {

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(-8px);

    background: #fff;

    border-radius: 12px;

    padding: 12px 16px;

    width: 260px;

    box-shadow: 0 20px 35px -10px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);

    font-size: 12px;

    line-height: 1.5;

    color: #1f2937;

    z-index: 10000;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

    text-align: left;

    white-space: normal;

}

/* Arrow for tooltip */

.qmp-info-tooltip::before {

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%) rotate(45deg);

    width: 8px;

    height: 8px;

    background: #fff;

    box-shadow: 2px 2px 4px rgba(0,0,0,0.04);

}

/* Show tooltip on hover */

.qmp-th-info-wrap:hover .qmp-info-tooltip {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}

/* ================================================================

   SUBTOTAL CELL INFINITY LOADER (Large icon, white transparent background)

   ================================================================ */

/* Make subtotal cell a positioning anchor */

.qmp-subtotal-cell {

    position: relative !important;

    overflow: visible !important;

}

/* The infinity popup sits OVER the subtotal cell content */

.qmp-row-inf-popup {

    position: absolute;

    inset: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.92);

    border-radius: var(--q-r-sm, 9px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    animation: qmpRowInfIn 0.18s ease both;

    pointer-events: none;

}

@keyframes qmpRowInfIn {

    from { opacity: 0; }

    to   { opacity: 1; }

}

/* The infinity SVG - LARGE icon (48px width) */

.qmp-row-inf-popup svg {

    width: 56px;

    height: 28px;

    overflow: visible;

    display: block;

}

.qmp-row-inf-track {

    fill: none;

    stroke: #e5e7eb;

    stroke-width: 10;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.qmp-row-inf-stroke {

    fill: none;

    stroke: url(#qmpRowInfGrad);

    stroke-width: 10;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 130 390;

    stroke-dashoffset: 0;

    animation: qmpRowInfRun 1.4s linear infinite;

    filter: drop-shadow(0 0 5px rgba(0, 214, 143, 0.55));

}

@keyframes qmpRowInfRun {

    100% { stroke-dashoffset: -520; }

}

/* Label below the infinity SVG */

.qmp-row-inf-label {

    font-size: 9.5px;

    font-weight: 600;

    color: #374151;

    font-family: 'Sora', sans-serif;

    letter-spacing: 0.03em;

    animation: qmpRowInfPulse 1.4s ease-in-out infinite;

}

@keyframes qmpRowInfPulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.4; }

}

/* .qmp-btn-loading base — no circle spinner, each button type handles its own loading state */

.qmp-btn-loading {

    pointer-events: none;

    opacity: 0.8;

    position: relative;

}

/* Suppress any ::after circle spinner on cart/add-all buttons */

.qmp-cart-icon.qmp-btn-loading::after,

.qmp-add-all.qmp-btn-loading::after,

.qmp-top-add-to-cart.qmp-btn-loading::after {

    display: none !important;

    content: none !important;

}

@keyframes qmpInfinity {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

/* Suppress duplicate circle spinner block */

.qmp-btn-loading {

    pointer-events: none;

    opacity: 0.8;

    position: relative;

}

@keyframes qmpSpin {

    to { transform: rotate(360deg); }

}

/* Toast Container and Styles */

#qmp-toast-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    left: auto;

    transform: none;

    z-index: 999999;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    pointer-events: none;

    max-width: 300px;

}

.qmp-toast {

    background: #0f172a;

    color: #fff;

    padding: 9px 16px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 500;

    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.25);

    opacity: 0;

    transform: translateX(20px);

    transition: all 0.22s ease;

    display: flex;

    align-items: center;

    gap: 8px;

    pointer-events: auto;

    max-width: 300px;

    line-height: 1.4;

}

.qmp-toast.show {

    opacity: 1;

    transform: translateX(0);

}

.qmp-toast.qmp-toast-error {

    background: #dc2626;

}

.qmp-toast-icon {

    font-size: 13px;

    flex-shrink: 0;

}

.qmp-toast-undo {

    background: rgba(255, 255, 255, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #fff;

    padding: 3px 10px;

    border-radius: 99px;

    font-size: 10px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s ease;

    margin-left: 4px;

    white-space: nowrap;

    flex-shrink: 0;

}

.qmp-toast-undo:hover {

    background: rgba(255, 255, 255, 0.3);

}

/* Unit Search Bar Styles */

.qmp-unit-search-wrap {

    margin-bottom: 24px;

    background: #fff;

    border-radius: 16px;

    padding: 4px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}

#qmp-unit-search {

    width: 100%;

    padding: 14px 18px;

    border: 1.5px solid #e2e8f0;

    border-radius: 14px;

    font-size: 14px;

    font-family: 'Sora', sans-serif;

    transition: all 0.2s ease;

    background: #fff;

}

#qmp-unit-search:focus {

    border-color: #00d68f;

    box-shadow: 0 0 0 3px rgba(0,214,143,0.1);

    outline: none;

}

#qmp-unit-search::placeholder {

    color: #94a3b8;

    font-weight: 400;

}

.qmp-search-highlight {

    background: #fef9c3;

    color: #854d0e;

    padding: 0 2px;

    border-radius: 3px;

    font-weight: 600;

}

/* ================================================================

   RESPONSIVE OVERHAUL — Preorder cards + sidebar + breakpoints

   ================================================================ */

/* ── Preorder card: title on its own line, buttons row below ── */

.qmp-card .qmp-card-title {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;  /* LEFT align — no space-between */

    gap: 5px !important;

    flex-wrap: nowrap !important;

    margin-bottom: 6px !important;

    overflow: visible !important;

}

 

/* h4 must NOT stretch — only take as much space as its text needs */

.qmp-card .qmp-card-title h4 {

    flex: 0 1 auto !important;   /* shrink if needed, but never grow to fill */

    margin: 0 !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    color: var(--q-ink) !important;

    line-height: 1.3 !important;

}

 

/* i button stays right next to the title text */

.qmp-card .qmp-card-title .qmp-th-info-wrap {

    flex-shrink: 0 !important;

    margin-left: 0 !important;  /* gap on .qmp-card-title handles spacing */

}

/* Preorder box sits directly below title */

.qmp-card .qmp-preorder-box {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 4px !important;

    margin: 0 0 10px !important;

}

.qmp-card .qmp-preorder-line {

    display: block !important;

    text-align: left !important;

    font-size: 9px;

    color: #94a3b8;

    font-weight: 500;

    letter-spacing: 0.02em;

    line-height: 1.3;

}

.qmp-card .qmp-preorder-actions {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 6px !important;

    flex-wrap: nowrap !important;

}

.qmp-card .qmp-enquire-btn {

    writing-mode: horizontal-tb !important;

    transform: none !important;

    white-space: nowrap !important;

}

/* ── Tablet (769px – 1100px): sidebar narrower, cards 2-col ── */

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

    .qmp-top-cards {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }

}

/* ── Mobile (≤768px): price-cart row stacks ── */

@media (max-width: 768px) {

    .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%;

        justify-content: center;

    }

}

/* ── Small mobile (≤480px): single column cards ── */

@media (max-width: 480px) {

    .qmp-top-cards {

        grid-template-columns: 1fr;

    }

    .qmp-card {

        padding: 14px;

    }

}

/* ================================================================

   QMP PREMIUM — RTOWorks Style Responsive Matrix

   FIXES: Sidebar vertical mobile, Top card tooltip, Table spacing

   ================================================================ */

/* ================================================================

   SIDEBAR - VERTICAL SCROLL ON MOBILE (like RTOWorks)

   ================================================================ */

@media (max-width: 768px) {

    .qmp-sidebar {

        position: sticky !important;

        top: 0 !important;

        z-index: 100 !important;

        width: 100% !important;

        border-radius: 0 !important;

        padding: 12px 16px !important;

        background: rgba(255,255,255,0.98) !important;

        backdrop-filter: blur(14px) !important;

        box-shadow: 0 2px 12px rgba(5,13,26,0.08) !important;

        max-height: none !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        white-space: nowrap !important;

    }

    

    .qmp-sidebar h3 {

        display: none !important;

    }

    

    .qmp-search-wrap {

        display: none !important;

    }

    

    .qmp-sidebar ul {

        display: flex !important;

        flex-direction: column !important;

        flex-wrap: nowrap !important;

        gap: 8px !important;

        padding: 0 !important;

        margin: 0 !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: thin !important;

    }

    

    .qmp-sidebar ul::-webkit-scrollbar {

        height: 3px !important;

    }

    

    .qmp-sidebar ul::-webkit-scrollbar-track {

        background: #e2e8f0 !important;

        border-radius: 99px !important;

    }

    

    .qmp-sidebar ul::-webkit-scrollbar-thumb {

        background: var(--q-jade) !important;

        border-radius: 99px !important;

    }

    

    .qmp-qualification-item {

        flex: 0 0 auto !important;

        display: inline-flex !important;

        padding: 8px 16px !important;

        border-radius: 99px !important;

        font-size: 13px !important;

        font-weight: 500 !important;

        white-space: nowrap !important;

        background: #f1f5f9 !important;

        color: #334155 !important;

        transform: none !important;

        margin: 0 !important;

    }

    

    .qmp-qualification-item.active {

        background: var(--q-g-brand) !important;

        color: white !important;

    }

    

    .qmp-qualification-item:hover {

        transform: none !important;

    }

    

    .qmp-qualification-item::after {

        display: none !important;

    }

    

    .qmp-qualification-badge {

        writing-mode: horizontal-tb !important;

        transform: none !important;

        font-size: 8px !important;

        padding: 2px 6px !important;

        margin-left: 6px !important;

    }

}

/* ================================================================

   TABLE CARD LAYOUT - MOBILE (with proper spacing)

   ================================================================ */

@media (max-width: 768px) {

    .qmp-table,

    .qmp-table thead,

    .qmp-table tbody,

    .qmp-table tr,

    .qmp-table td {

        display: block !important;

        width: 100% !important;

    }

    

    .qmp-table thead {

        display: none !important;

    }

    

    .qmp-table tbody tr {

        background: white !important;

        border-radius: 16px !important;

        margin-bottom: 16px !important;

        padding: 0 !important;

        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;

        overflow: hidden !important;

    }

    

    .qmp-table tbody tr td {

        padding: 14px 16px !important;

        border-bottom: 1px solid #eef2f6 !important;

        text-align: left !important;

        background: white !important;

        position: relative !important;

    }

    

    .qmp-table tbody tr td:last-child {

        border-bottom: none !important;

    }

    

    /* First cell = Unit Name */

    .qmp-table tbody tr td:first-child {

        background: linear-gradient(135deg, #f8faff, #f0f6fe) !important;

        font-weight: 700 !important;

        font-size: 15px !important;

        border-left: 4px solid var(--q-jade) !important;

        padding: 16px !important;

    }

    

    /* Add data labels for other cells */

    .qmp-table tbody tr td:not(:first-child) {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 12px !important;

        flex-wrap: wrap !important;

    }

    

    .qmp-table tbody tr td:not(:first-child)::before {

        content: attr(data-label);

        font-weight: 600 !important;

        font-size: 12px !important;

        color: #64748b !important;

        min-width: 100px !important;

        flex-shrink: 0 !important;

    }

    

    /* Price alignment */

    .qmp-table tbody tr td .qmp-table-price {

        margin: 0 !important;

        text-align: right !important;

    }

    

    .qmp-table tbody tr td .qmp-table-price ins {

        font-size: 16px !important;

        font-weight: 700 !important;

    }

    

    /* Cart icon */

    .qmp-table tbody tr td .qmp-cart-icon {

        margin-left: auto !important;

        flex-shrink: 0 !important;

    }

    

    /* Status badges - horizontal with proper spacing */

    .qmp-table tbody tr td .qmp-status {

        writing-mode: horizontal-tb !important;

        transform: none !important;

        position: static !important;

        display: inline-flex !important;

        padding: 4px 10px !important;

        font-size: 10px !important;

        margin: 0 !important;

        width: auto !important;

        height: auto !important;

    }

    

    /* Pre-order box - inline horizontal */

    .qmp-table tbody tr td .qmp-preorder-box {

        display: inline-flex !important;

        flex-direction: row !important;

        align-items: center !important;

        gap: 8px !important;

        margin: 0 !important;

        flex-wrap: wrap !important;

    }

    

    .qmp-preorder-line {

        display: inline-block !important;

        font-size: 10px !important;

    }

    

    .qmp-preorder-actions {

        display: inline-flex !important;

        flex-direction: row !important;

        gap: 6px !important;

    }

    

    .qmp-enquire-btn {

        padding: 4px 12px !important;

        font-size: 10px !important;

    }

    

    /* Weight column */

    .qmp-table tbody tr td.qmp-weight-subtotal {

        justify-content: space-between !important;

        background: #f8fafc !important;

    }

    

    .qmp-table tbody tr td.qmp-weight-subtotal::before {

        content: "Weighting Points" !important;

    }

    

    /* Subtotal cell */

    .qmp-table tbody tr td.qmp-subtotal-cell {

        background: linear-gradient(135deg, #f4f8ff, #eef5ff) !important;

        justify-content: space-between !important;

        border-top: 2px solid #e2e8f0 !important;

    }

    

    .qmp-subtotal-amount {

        font-size: 18px !important;

        font-weight: 800 !important;

    }

    

    .qmp-add-all {

        padding: 6px 14px !important;

        font-size: 11px !important;

    }

}

/* ================================================================

   TOP CARD TOOLTIP FIX - Single instance with close button

   ================================================================ */

/* Hide native tooltips on all devices */

.qmp-info-tooltip {

    display: none !important;

}

/* Global tooltip portal */

#qmp-tooltip-portal-global {

    position: fixed;

    z-index: 999999;

    background: white;

    border-radius: 16px;

    padding: 18px 20px;

    width: 280px;

    max-width: calc(100vw - 40px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);

    font-size: 12px;

    line-height: 1.5;

    display: none;

    opacity: 0;

    transition: opacity 0.2s ease;

    pointer-events: auto;

    font-family: 'Sora', sans-serif;

}

#qmp-tooltip-portal-global.visible {

    display: block;

    opacity: 1;

}

/* Close button inside tooltip */

.qmp-tooltip-close {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: #f1f5f9;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    font-weight: bold;

    color: #64748b;

    transition: all 0.2s ease;

    z-index: 10;

}

.qmp-tooltip-close:hover {

    background: #ef4444;

    color: white;

}

/* Tooltip arrow */

#qmp-tooltip-portal-global::before {

    content: '';

    position: absolute;

    bottom: -6px;

    left: 50%;

    transform: translateX(-50%) rotate(45deg);

    width: 12px;

    height: 12px;

    background: white;

    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);

}

/* Tooltip content styles */

#qmp-tooltip-portal-global strong {

    display: block;

    font-size: 13px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 8px;

    padding-right: 24px;

}

#qmp-tooltip-portal-global p {

    margin: 0 0 8px 0;

    font-size: 12px;

    color: #475569;

    line-height: 1.5;

}

#qmp-tooltip-portal-global .qmp-tooltip-list {

    margin: 8px 0 0;

    padding: 0;

    list-style: none;

}

#qmp-tooltip-portal-global .qmp-tooltip-list li {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding: 4px 0;

    font-size: 11px;

    color: #475569;

}

#qmp-tooltip-portal-global .qmp-tooltip-list li::before {

    content: '✓';

    color: var(--q-jade);

    font-weight: 700;

    font-size: 11px;

    flex-shrink: 0;

}

/* ================================================================

   TABLE SPACING FIX - Ready status not behind add to cart

   ================================================================ */

/* Desktop table - ensure proper spacing */

@media (min-width: 769px) {

    .qmp-table td {

        vertical-align: middle !important;

        padding: 16px 12px !important;

    }

    

    .qmp-table td:first-child {

        padding-left: 18px !important;

    }

    

    .qmp-table td:last-child {

        padding-right: 18px !important;

    }

    

    /* Status badge spacing */

    .qmp-table td .qmp-status {

        display: inline-block !important;

        margin-bottom: 6px !important;

    }

    

    /* Pre-order box spacing */

    .qmp-table td .qmp-preorder-box {

        margin: 22px 0 !important;

    }

    

    /* Cart icon spacing */

    .qmp-table td .qmp-cart-icon {

        margin-top: 6px !important;

        display: inline-flex !important;

    }

    

    /* Ensure content has proper spacing */

    .qmp-table td .qmp-table-price {

        margin-bottom: 6px !important;

    }

}

/* ================================================================

   CARD PRE-ORDER CONTENT - Below title

   ================================================================ */

@media (max-width: 768px) {

    .qmp-card .qmp-preorder-box {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        flex-wrap: wrap !important;

        gap: 8px !important;

        margin: 8px 0 12px !important;

    }

    

    .qmp-card .qmp-preorder-line {

        font-size: 10px !important;

        margin: 0 !important;

    }

    

    .qmp-card .qmp-preorder-actions {

        display: inline-flex !important;

        gap: 8px !important;

    }

    

    /* Ensure card content has proper spacing */

    .qmp-card .qmp-price-cart-row {

        margin-top: 8px !important;

    }

}

/* ================================================================

   REMOVE THE PROBLEMATIC RULE THAT CAUSED ISSUES

   ================================================================ */

/* This rule was causing the issue - DO NOT ADD BACK */

/* 

.qmp-table tbody td:not(:first-child):not(:last-child):not(.qmp-weight-subtotal):not(.qmp-subtotal-cell) {

    display: table-cell !important;

}

*/

/* ================================================================

   ENQUIRY MODAL STYLES

   ================================================================ */

.qmp-modal {

    position: fixed;

    inset: 0;

    z-index: 100000;

    display: flex;

    align-items: center;

    justify-content: center;

}

.qmp-modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(5,13,26,0.75);

}

.qmp-modal-content {

    position: relative;

    background: #fff;

    width: 100%;

    max-width: 480px;

    border-radius: 24px;

    padding: 28px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.2);

    z-index: 1;

}

.qmp-modal-close {

    position: absolute;

    top: 14px;

    right: 14px;

    background: #f1f5f9;

    border: none;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

}

.qmp-modal-close:hover {

    background: #ef4444;

    color: white;

}

/* ================================================================

   TOAST NOTIFICATIONS

   ================================================================ */

#qmp-toast-container {

    position: fixed;

    bottom: 24px;

    right: 24px; /* 👈 move to right */

    z-index: 999999;

    display: flex;

    flex-direction: column;

    align-items: flex-end; /* 👈 align toast to right */

    gap: 8px;

    pointer-events: none;

}

.qmp-toast {

    background: #0f172a;

    color: #fff;

    padding: 12px 24px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 500;

    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.25s ease;

    display: flex;

    align-items: center;

    gap: 12px;

    pointer-events: auto;

}

.qmp-toast.show {

    opacity: 1;

    transform: translateY(0);

}

.qmp-toast.qmp-toast-error {

    background: #dc2626;

}

.qmp-toast-undo {

    background: rgba(255,255,255,0.2);

    border: 1px solid rgba(255,255,255,0.3);

    color: #fff;

    padding: 4px 12px;

    border-radius: 99px;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s;

    margin-left: 8px;

}

.qmp-toast-undo:hover {

    background: rgba(255,255,255,0.3);

}

/* ================================================================

   CART BAR — scoped to plugin wrapper, won't overlap Elementor content

   ================================================================ */

.qmp-cart-bar {

    position: fixed;

    bottom: 24px;

    left: 50%;

    transform: translateX(-50%) translateY(150%);

    z-index: 9500;

    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);

    /* Constrain width so it doesn't span full viewport on wide screens */

    max-width: 600px;

    width: auto;

    pointer-events: none; /* hidden state — no accidental clicks */

}

.qmp-cart-bar.show {

    transform: translateX(-50%) translateY(0);

    pointer-events: all;

}

/* Only show when inside or triggered by the QMP wrapper */

.qmp-wrapper ~ .qmp-cart-bar,

.qmp-wrapper .qmp-cart-bar {

    z-index: 9500;

}

/* Remove the aggressive z-index override that was fighting Elementor */

body > .qmp-cart-bar {

    z-index: 9500 !important;

    bottom: 24px !important;

}

body > .qmp-cart-bar.show {

    transform: translateX(-50%) translateY(0) !important;

}

.qmp-cart-bar-inner {

    background: linear-gradient(135deg, #050d1a, #1a3360);

    border-radius: 99px;

    padding: 12px 24px;

    display: flex;

    align-items: center;

    gap: 20px;

    color: #fff;

    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);

}

.qmp-view-cart-btn {

    background: var(--q-jade);

    padding: 8px 20px;

    border-radius: 99px;

    color: #050d1a;

    text-decoration: none;

    font-weight: 700;

    font-size: 12px;

    cursor: pointer;

    border: none;

}

.qmp-empty-cart-btn {

    background: transparent;

    border: 1px solid rgba(255,255,255,0.3);

    color: #fff;

    padding: 8px 12px;

    border-radius: 8px;

    cursor: pointer;

}

@media (max-width: 768px) {

    .qmp-cart-bar {

        bottom: 16px;

        left: 12px;

        right: 12px;

        transform: translateY(150%);

        width: auto;

    }

    

    .qmp-cart-bar.show {

        transform: translateY(0);

    }

    

    .qmp-cart-bar-inner {

        border-radius: 16px;

        padding: 10px 16px;

        justify-content: space-between;

        width: 100%;

    }

}

/* ================================================================

   QMP FIX — Mobile card tooltip (inline, no portal)

   PASTE AT THE VERY END of matrix.css

   ================================================================ */

/* Always hide portal on mobile — belt AND suspenders */

@media (max-width: 991px) {

    .qmp-card-tooltip-portal,

    .qmp-card-tooltip-portal.visible {

        display: none !important;

        opacity: 0 !important;

        pointer-events: none !important;

        visibility: hidden !important;

        transform: none !important;

    }

}

/* Mobile inline tooltip — hidden by default */

@media (max-width: 991px) {

    .qmp-card .qmp-info-tooltip {

        display: none !important;

    }

    /* Show when JS adds .active */

    .qmp-card .qmp-info-tooltip.active {

        display: block !important;

        position: fixed !important;

        top: 50% !important;

        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: min(300px, calc(100vw - 32px)) !important;

        max-height: 75vh !important;

        overflow-y: auto !important;

        z-index: 999999 !important;

        border-radius: 16px !important;

        padding: 20px 18px !important;

        box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;

        background: #fff !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        /* Kill the pseudo arrow on mobile */

        /* arrow handled below */

    }

    .qmp-card .qmp-info-tooltip.active::before {

        display: none !important;

    }

}

/* Desktop: portal handles it, hide inline always */

@media (min-width: 992px) {

    .qmp-card .qmp-info-tooltip {

        display: none !important;

    }

}

/* ================================================================

   CRITICAL FIX: Modal z-index above all tooltips and portals

   ================================================================ */

#qmp-enquiry-modal,

#qmp-checkout-modal {

    z-index: 2147483647 !important;

}

#qmp-enquiry-modal .qmp-modal-overlay,

#qmp-checkout-modal .qmp-modal-overlay {

    z-index: 2147483646 !important;

}

#qmp-enquiry-modal .qmp-modal-content,

#qmp-checkout-modal .qmp-checkout-content {

    z-index: 2147483647 !important;

}

/* Hide tooltip portal when modal is open */

body.qmp-checkout-open #qmp-tooltip-portal-global,

body.qmp-checkout-open .qmp-card-tooltip-portal {

    display: none !important;

    opacity: 0 !important;

    pointer-events: none !important;

}

/* ================================================================

   FLOATING GIF CART BUTTON

   ================================================================ */

#qmp-float-cart-btn {

    position: fixed;

    bottom: 100px;  /* 24px chatbot bottom + 60px chatbot height + 16px gap */

    right: 24px;    /* same right as chatbot */

    z-index: 999998;

    width: 72px;

    height: 72px;

    border-radius: 50%;

    background: #0f172a;

    border: none;

    cursor: pointer;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 3px rgba(0,214,143,0.18);

    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease;

    overflow: visible;

}

#qmp-float-cart-btn:hover {

    transform: scale(1.1) translateY(-3px);

    box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 0 0 4px rgba(0,214,143,0.3);

}

#qmp-float-cart-btn:active {

    transform: scale(0.96);

}

#qmp-float-cart-btn img {

    width: 44px;

    height: 44px;

    object-fit: contain;

    pointer-events: none;

    border-radius: 0;

}

/* Red badge */

#qmp-float-cart-badge {

    position: absolute;

    top: -4px;

    right: -4px;

    min-width: 22px;

    height: 22px;

    background: #ef4444;

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    border-radius: 99px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 5px;

    border: 2px solid #fff;

    box-shadow: 0 2px 8px rgba(239,68,68,0.5);

    font-family: var(--q-font, 'Sora', sans-serif);

    line-height: 1;

    pointer-events: none;

    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);

}

#qmp-float-cart-badge.qmp-badge-pop {

    animation: qmpBadgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);

}

@keyframes qmpBadgePop {

    0%   { transform: scale(1); }

    50%  { transform: scale(1.5); }

    100% { transform: scale(1); }

}

/* Glow pulse when cart has items */

#qmp-float-cart-btn.has-items {

    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 3px rgba(0,214,143,0.35);

    animation: qmpCartGlow 2.5s ease-in-out infinite;

}

@keyframes qmpCartGlow {

    0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 3px rgba(0,214,143,0.2); }

    50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 6px rgba(0,214,143,0.4); }

}

/* Mobile adjustments */

@media (max-width: 768px) {

    #qmp-float-cart-btn {

        bottom: 90px;  /* 14px + 60px + 16px gap */

        right: 12px;   /* same as chatbot mobile */

        width: 62px;

        height: 62px;

    }

    #qmp-float-cart-btn img {

        width: 36px;

        height: 36px;

    }

}

/* ================================================================

   INFINITY LOADER — cart actions

   ================================================================ */

/* The infinity symbol animation — dashoffset runs along the path */

@keyframes qmp-inf-spin {

    to { stroke-dashoffset: -502; }

}

/* Shared loader element injected by JS */

.qmp-infinity-loader {

    display: none;

    width: 0;

    height: 0;

    overflow: hidden;

    position: absolute;

    pointer-events: none;

    flex-shrink: 0;

}

/* When active — shown by the .qmp-btn-loading parent rules */

.qmp-btn-loading .qmp-infinity-loader {

    display: inline-flex !important;

    width: auto;

    height: auto;

    overflow: visible;

    position: static;

    align-items: center;

    justify-content: center;

}

/* No rotation — just the dashoffset animation on the path itself */

.qmp-infinity-loader svg {

    display: block;

}

/* ── Cart icon loading state ── */

.qmp-cart-icon.qmp-btn-loading {

    pointer-events: none;

    background: rgba(0, 98, 204, 0.18) !important;

    color: transparent !important;

    position: relative;

}

.qmp-cart-icon.qmp-btn-loading::before { display: none !important; }

.qmp-cart-icon.qmp-btn-loading i { display: none !important; }

.qmp-cart-icon.qmp-btn-loading .qmp-infinity-loader { display: inline-flex !important; }

/* ── Add All / Remove All loading state — infinity loader shown ── */

.qmp-add-all.qmp-btn-loading {

    pointer-events: none;

    opacity: 0.9;

    gap: 0;

    background: rgba(0,132,255,0.08) !important;

}

.qmp-add-all.qmp-btn-loading::before { display: none !important; }

.qmp-add-all.qmp-btn-loading .qmp-add-all-text { display: none !important; }

.qmp-add-all.qmp-btn-loading .qmp-infinity-loader { display: inline-flex !important; }

/* ── Top Add to Cart loading state — show infinity loader ── */

.qmp-top-add-to-cart.qmp-btn-loading {

    pointer-events: none;

    opacity: 0.85;

}

.qmp-top-add-to-cart.qmp-btn-loading .qmp-btn-label { display: none !important; }

.qmp-top-add-to-cart.qmp-btn-loading i { display: none !important; }

.qmp-top-add-to-cart.qmp-btn-loading .qmp-infinity-loader { display: inline-flex !important; }

/* ================================================================

   MOBILE POLISH — targeted fixes based on real screenshot review

   ================================================================ */

@media (max-width: 768px) {

    /* ── 1. Unit header cell: code chip + name layout ── */

    .qmp-table tbody tr td:first-child {

        padding: 14px 16px 12px !important;

        border-left: 3px solid var(--q-jade) !important;

        background: linear-gradient(135deg, #f8faff 0%, #f0f6fe 100%) !important;

    }

    /* Code chip on mobile */

    .qmp-table tbody tr td:first-child .qmp-unit-code-chip {

        margin-bottom: 5px;

    }

    .qmp-table tbody tr td:first-child .qmp-unit-title-name {

        font-size: 13px !important;

        font-weight: 700 !important;

        line-height: 1.4 !important;

        color: #0f172a !important;

        white-space: normal !important;

    }

    /* ── 2. TGA status badge — smaller on mobile ── */

    .qmp-unit-badge {

        font-size: 8px !important;

        padding: 2px 7px !important;

        border-radius: 99px !important;

        writing-mode: horizontal-tb !important;

        transform: none !important;

        vertical-align: middle !important;

   

    }

    .qmp-qualification-badge-status {

        font-size: 7px !important;

        padding: 2px 6px !important;

        writing-mode: horizontal-tb !important;

        transform: none !important;

    }

    /* .qmp-status-sub { display: none !important; } /* hide "(TGA Status)" on mobile */

    /* ── 3. Resource rows — remove redundant ::before label, clean flex row ── */

    .qmp-table tbody tr td:not(:first-child):not(.qmp-subtotal-cell):not(.qmp-weight-subtotal) {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        gap: 8px !important;

 

        min-height: 56px !important;

    }

    /* Remove the auto data-label ::before — label is already in the row content */

    .qmp-table tbody tr td:not(:first-child)::before {

        display: none !important;

        content: none !important;

    }

    /* Resource label + status group — left side */

    .qmp-table tbody tr td[data-label] .qmp-status,

    .qmp-table tbody tr td[data-label] .qmp-preorder-box {

        display: inline-flex !important;

        flex-shrink: 0 !important;

    }

    /* Left content group: label text + badge stacked */

    .qmp-table tbody tr td[data-label]::after {

        content: attr(data-label);

        position: absolute;

        top: 11px;

        left: 14px;

        font-size: 12px;

        font-weight: 600;

        color: #334155;

        line-height: 1.3;

        max-width: 45%;

        white-space: normal;

        word-break: break-word;

    }

    .qmp-table tbody tr td[data-label] {

        padding-left: 14px !important;

        padding-top: 30px !important; /* space for the ::after label above */

        flex-direction: column !important;

        align-items: flex-start !important;

        position: relative !important;

    }

    /* Price + cart row inside each resource cell */

    .qmp-table tbody tr td[data-label] .qmp-table-price {

        position: absolute !important;

        margin: 0 !important;

        display: inline-flex !important;

        flex-direction: column !important;

        align-items: flex-end !important;

    }

    .qmp-table tbody tr td[data-label] .qmp-table-price ins,

    .qmp-table tbody tr td[data-label] .qmp-table-price > span {

        font-size: 15px !important;

        font-weight: 800 !important;

        letter-spacing: -0.4px !important;

        color: #0f172a !important;

    }

    .qmp-table tbody tr td[data-label] .qmp-table-price del {

        font-size: 10px !important;

        color: #94a3b8 !important;

    }

    /* Bottom row inside resource cell: status/preorder left, price+cart right */

    .qmp-table tbody tr td[data-label] > * {

        flex-shrink: 0;

    }

    .qmp-table-mobile-row {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        width: 100% !important;

        gap: 8px !important;

        margin-top: 4px !important;

    }

    .qmp-table-mobile-price-cart {

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin-left: auto !important;

    }

    /* ── 4. Pre-order row — compact single line ── */

    .qmp-table tbody tr td[data-label] .qmp-preorder-box {

        flex-direction: row !important;

        align-items: center !important;

        gap: 6px !important;

        flex-wrap: nowrap !important;

    }

    .qmp-preorder-line { display: none !important; }

    .qmp-enquire-btn {

        padding: 3px 10px !important;

        font-size: 9px !important;

        white-space: nowrap !important;

    }

    .qmp-table tbody tr td[data-label] .qmp-info-btn {

        width: 20px !important;

        height: 20px !important;

        font-size: 9px !important;

        flex-shrink: 0 !important;

    }

    /* ── 5. Subtotal cell — balanced layout ── */

    .qmp-table tbody tr td.qmp-subtotal-cell {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 12px 16px !important;

        background: linear-gradient(135deg, #f4f8ff, #eef5ff) !important;

        border-top: 2px solid rgba(0,98,204,0.1) !important;

        gap: 12px !important;

    }

    .qmp-subtotal-amount {

        font-size: 20px !important;

        font-weight: 800 !important;

        letter-spacing: -0.5px !important;

        margin-bottom: 0 !important;

        color: var(--q-ink) !important;

    }

    .qmp-add-all {

        padding: 9px 18px !important;

        font-size: 12px !important;

        font-weight: 700 !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;

    }

    /* Hide the + ::before on mobile add-all since text already says + Add All */

    .qmp-add-all::before { display: none !important; }

    /* ── 6. Cart icon consistent color ── */

    .qmp-table tbody tr td .qmp-cart-icon {

        width: 36px !important;

        height: 36px !important;

        border-radius: 10px !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

    }

    /* ── 7. Top cards on mobile — single column below 480px ── */

    .qmp-top-cards {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .qmp-card {

        padding: 16px 16px 14px !important;

    }

    .qmp-price-cart-row {

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 8px !important;

    }

    .qmp-price-cart-row .qmp-btn.qmp-top-add-to-cart {

        width: auto !important;

        flex: 0 0 auto !important;

    }

    /* ── 8. Group section heading ── */

    .qmp-content h3 {

        font-size: 9px !important;

        margin: 20px 0 10px !important;

    }

    /* ── 9. Total wrap row ── */

    .qmp-total-wrap {

        margin-top: 4px !important;

    }

    .qmp-total-box {

        flex-direction: row !important;

        align-items: center !important;

        padding: 12px 16px !important;

        gap: 12px !important;

    }

    .qmp-total-left strong {

        font-size: 12px !important;

    }

    .qmp-total-right [class$="-total"] {

        font-size: 20px !important;

        font-weight: 800 !important;

    }

    .qmp-go-cart-btn {

        width: 100% !important;

        justify-content: center !important;

        padding: 11px 20px !important;

        font-size: 13px !important;

    }

}

/* ── Extra small (≤ 390px) ── */

@media (max-width: 390px) {

    .qmp-subtotal-amount { font-size: 17px !important; }

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

    .qmp-table tbody tr td:first-child .qmp-unit-title-name { font-size: 12px !important; }

    .qmp-enquire-btn { padding: 3px 7px !important; font-size: 8.5px !important; }

}

/* ================================================================

   SKELETON LOADER — panel switch shimmer

   ================================================================ */

@keyframes qmpShimmer {

    0%   { background-position: -600px 0; }

    100% { background-position:  600px 0; }

}

.qmp-skeleton-wrap {

    padding: 24px 0;

    animation: qFadeUp 0.3s ease;

}

.qmp-skeleton {

    background: linear-gradient(90deg, #e8edf2 25%, #f4f7fa 50%, #e8edf2 75%);

    background-size: 600px 100%;

    animation: qmpShimmer 1.4s ease-in-out infinite;

    border-radius: 8px;

}

.qmp-skeleton-title   { height: 28px; width: 55%; margin-bottom: 10px; }

.qmp-skeleton-summary { height: 14px; width: 30%; margin-bottom: 28px; border-radius: 4px; }

.qmp-skeleton-table   { display: flex; flex-direction: column; gap: 10px; }

.qmp-skeleton-row     { display: flex; gap: 10px; align-items: center; }

.qmp-skeleton-unit    { height: 48px; flex: 0 0 22%; border-radius: 8px; }

.qmp-skeleton-cell    { height: 48px; flex: 1; border-radius: 8px; }

.qmp-skeleton-subtotal{ height: 48px; flex: 0 0 14%; border-radius: 8px; }

@media (max-width: 768px) {

    .qmp-skeleton-row { flex-direction: column; }

    .qmp-skeleton-unit,

    .qmp-skeleton-cell,

    .qmp-skeleton-subtotal { flex: none; width: 100%; height: 36px; }

}

/* ================================================================

   ACCESSIBLE STATUS BADGES — aria support only, rotation preserved on desktop

   ================================================================ */

/* Fix the left padding that was added to accommodate the rotated badge */

.qmp-table td:has(.qmp-status.preorder),

.qmp-table td:has(.qmp-status.ready) {

    padding-left: 10px !important;

}




/* ================================================================

   CART BAR CLOSE BUTTON

   ================================================================ */

.qmp-cart-bar-close {

    background: rgba(255,255,255,0.12);

    border: 1px solid rgba(255,255,255,0.2);

    color: #fff;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 13px;

    transition: background 0.2s ease, transform 0.2s ease;

    flex-shrink: 0;

    margin-left: 4px;

}

.qmp-cart-bar-close:hover {

    background: rgba(239,68,68,0.7);

    transform: scale(1.1);

}

/* ================================================================

   FLOAT CART BUTTON — draggable cursor

   ================================================================ */

#qmp-float-cart-btn {

    cursor: grab;

    user-select: none;

    -webkit-user-select: none;

}

#qmp-float-cart-btn:active {

    cursor: grabbing;

}

/* ================================================================

   PANEL LOADING OVERLAY — shown while qualification data loads

   ================================================================ */

.qmp-panel-loading-overlay {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 300px;

    width: 100%;

}

.qmp-panel-loading-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

}

.qmp-panel-loading-inner .qmp-infinity-loader {

    display: inline-flex !important;

}

.qmp-panel-loading-inner .qmp-infinity-loader svg {

    display: block !important;

    width: 48px !important;

    height: 84px !important;

}

.qmp-panel-loading-text {

    font-size: 13px;

    font-weight: 600;

    color: var(--q-mist, #7a92aa);

    letter-spacing: 0.04em;

    font-family: var(--q-font, 'Sora', sans-serif);

}

/* Sidebar item — no loading state needed, content area shows loader */

/* ================================================================

   QUALIFICATION HEADER — title + Enquire Now side by side

   ================================================================ */

.qmp-single-header-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    margin-bottom: 6px;

}

.qmp-single-header-top h2 {

    flex: 1;

    min-width: 0;

    margin: 0;

}

/* Header Enquire Now button — gradient green→blue with arrow */

.qmp-header-enquire-btn {

    display: inline-flex !important;

    align-items: center;

    gap: 8px;

    padding: 12px 22px !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    border-radius: 10px !important;

    border: none !important;

    background: linear-gradient(135deg, #00CC01 0%, #0055FF 100%) !important;

    color: #fff !important;

    cursor: pointer;

    white-space: nowrap;

    flex-shrink: 0;

    box-shadow: 0 4px 18px rgba(0, 85, 255, 0.28);

    transition: none;

    font-family: var(--q-font, inherit);

    letter-spacing: 0.01em;

    writing-mode: horizontal-tb !important;

    transform: none;

}

.qmp-header-enquire-btn:hover {

    transform: none !important;

    box-shadow: 0 4px 18px rgba(0, 85, 255, 0.28) !important;

    background: linear-gradient(135deg, #00CC01 0%, #0055FF 100%) !important;

    color: #fff !important;

    font-size: 14px !important;

    padding: 12px 22px !important;

    border-radius: 10px !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    min-width: unset !important;

    transition: none !important;

}

.qmp-enquire-arrow {

    font-size: 16px;

    line-height: 1;

}

@media (max-width: 600px) {

    .qmp-single-header-top {

        flex-direction: column;

        align-items: flex-start;

    }

    .qmp-header-enquire-btn {

        width: 100% !important;

        justify-content: center;

    }

}

.qmp-qualification-item:not(:has(.qmp-qualification-badge))::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 18px;
    flex-shrink: 0;
}