/* Basic styles for bundle form */
.qpb-bundle-form { border:none; padding:18px; border-radius:12px; margin:16px auto; background:#fff; max-width: 1400px; }
.qpb-layout { display:grid; grid-template-columns: 2fr 1fr; gap:20px; }
.qpb-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:14px; justify-items:center; }
.qpb-card { border:1px solid #E6E8EC; border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; cursor:pointer; background:#fff; transition:box-shadow .2s, transform .2s; align-items:center; }
.qpb-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.06); transform:translateY(-1px); }
.qpb-card.selected { outline:2px solid #B0132C; box-shadow:0 6px 22px rgba(176,19,44,.18); }
.qpb-thumb { width:100%; aspect-ratio:1/1; background:#FCF7EF; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; margin-bottom:8px; }
.qpb-thumb img { width:100%; height:100%; object-fit:cover; }
.qpb-name { font-weight:600; font-size:14px; min-height:34px; color:#111; margin-bottom:-7px; text-align:center; width:100%; }
.qpb-price { color:#1f2937; font-size:13px; margin-bottom:0; text-align:center; width:100%; }
.qpb-qty-value { display:none; }

.qpb-right { display:flex; flex-direction:column; gap:18px; }
.qpb-steps { border:1px solid #E6E8EC !important; padding:16px 16px 28px 16px !important; border-radius:12px; background:#FAFBFC; }
.qpb-steps h4 { margin:0 0 14px 0 !important; }
.qpb-slots { list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; justify-content:center; }
.qpb-slot { width:50px; height:50px; border:1px dashed #E0E3E7; border-radius:50%; position:relative; background:#F7F8FA; }
.qpb-slot.qpb-tier { border:1px dashed #B0132C; }
.qpb-slot.filled { background: var(--qpb-thumb, #F7F8FA); background-size:cover; background-position:center; border-style:solid; }
.qpb-slot.active { border:1px solid #B0132C; }
.qpb-slot .qpb-slot-num { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:11px; color:#6B7280; }
/* Default pill badge for all slots when text is present */
.qpb-slot .qpb-slot-badge { position:absolute; top:-8px; right:-8px; display:inline-block; padding:2px 8px; line-height:1; border-radius:999px; font-size:11px; font-weight:600; background:#F3F4F6; border:1px solid #CBD5E1; color:#374151; box-shadow:0 1px 2px rgba(0,0,0,0.06); }

.qpb-slot .qpb-slot-badge:empty { display:none; }
.qpb-slot.active .qpb-slot-badge { background:#B0132C; color:#fff; border-color:#B0132C; }
.qpb-slot.qpb-tier.active .qpb-slot-badge { background:#B0132C; color:#fff; border-color:#B0132C; }

.qpb-totals { border:1px solid #E6E8EC; border-radius:12px; padding:16px; background:#fff; display:flex; flex-direction:column; justify-content:center; }
.qpb-totals h4 { margin:0 0 14px 0 !important; }
.qpb-selected-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:260px; overflow:auto; }
.qpb-row { display:grid; grid-template-columns: 28px 1fr auto auto; gap:14px; align-items:center; font-size:13px; }
.qpb-row img { width:28px; height:28px; object-fit:cover; border-radius:4px; }
.qpb-row-price-original {
    text-decoration:line-through;
    color:#999;
    font-size:12px;
    margin-right:4px;
}
.qpb-row-price-discounted {
    color:#B0132C;
    font-weight:700;
}
.qpb-summary { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.qpb-summary > div { display:flex; justify-content:space-between; align-items:center; }
.qpb-summary strong { font-weight:700; }
.qpb-bundle-form .button, .qpb-bundle-form button.button { border-radius:8px; padding:8px 16px; border:none; background:#fff; color:#111; line-height:1.25; font-size:16px; font-weight:600; cursor:pointer; transition:background 0.2s ease; }
.qpb-bundle-form .button-primary, .qpb-bundle-form button.button.button-primary { background:#B0132C !important; color:#fff !important; border:none !important; }
.qpb-bundle-form .button-primary:hover, .qpb-bundle-form button.button.button-primary:hover { background:#8B0F22 !important; }
.qpb-bundle-form .button-secondary { background:#F3F4F6; }
.qpb-submit {
    width:100% !important;
    margin-top:16px !important;
    padding:8px 16px !important;
    font-size:16px !important;
    font-weight:600 !important;
    background:#B0132C !important;
    color:#fff !important;
    border:none !important;
    border-radius:8px !important;
    cursor:pointer;
    transition:background 0.2s ease;
}
.qpb-submit:hover {
    background:#8B0F22 !important;
}

/* Mobile sticky and drawer */
.qpb-mobile-bar { display:none; position:fixed; left:0; right:0; bottom:0; background:#ffffff; border-top:1px solid #E6E8EC; padding:0; z-index:10; box-shadow:0 -4px 16px rgba(0,0,0,0.12); }
.qpb-mobile-bar, .qpb-mobile-bar * { -webkit-tap-highlight-color: transparent; }
.qpb-mobile-bar button { outline: none; }
.qpb-composition-title-mobile { margin:0 0 10px 0; font-size:16px; font-weight:700; text-align:center; color:#111; }
.qpb-slots-mobile { list-style:none; display:flex; gap:14px; margin:0 0 10px; padding:0; }

.qpb-slots-mobile .qpb-slot .qpb-slot-badge:empty { display:none; }
.qpb-mobile-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px; }
.qpb-submit-mobile {
    width:100% !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:12px 20px !important;
    font-size:16px !important;
    margin-top:12px !important;
    border-radius:8px !important;
}
.qpb-submit-text {
    font-weight:700;
}
.qpb-submit-prices {
    display:flex;
    gap:8px;
    align-items:center;
}
.qpb-submit-price-original {
    text-decoration:line-through;
    opacity:0.8;
    font-size:14px;
}
.qpb-submit-price-final {
    font-weight:700;
    font-size:18px;
}

.qpb-drawer { display:none; position:fixed; inset:0; z-index:2147483640; }
.qpb-drawer, .qpb-drawer * { -webkit-tap-highlight-color: transparent; }
.qpb-drawer button { outline: none; }
.qpb-drawer.open { display:block; }
.qpb-drawer-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.qpb-drawer-panel { position:absolute !important; left:0; right:0; bottom:0; background:#fff; border-top-left-radius:16px; border-top-right-radius:16px; padding:20px !important; max-height:95vh !important; min-height:85vh !important; overflow:auto; }
.qpb-drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.qpb-drawer-header h4 { margin:0; font-size:18px; font-weight:700; }
.qpb-close-drawer {
    background:none !important;
    border:none !important;
    color:#B0132C !important;
    font-size:32px !important;
    line-height:1 !important;
    padding:0 !important;
    width:32px !important;
    height:32px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    transition:transform 0.2s ease;
}
.qpb-close-drawer:hover {
    transform:rotate(90deg);
}
.qpb-selected-list-mobile { max-height:40vh; overflow:auto; margin-bottom:8px; }
.qpb-selected-list-mobile .qpb-row { display:grid; grid-template-columns: 28px 1fr auto auto; gap:14px; align-items:center; font-size:13px; }
.qpb-selected-list-mobile .qpb-row img { width:28px; height:28px; object-fit:cover; border-radius:4px; }
.qpb-selected-list-mobile .qpb-row-price-original {
    text-decoration:line-through;
    color:#999;
    font-size:12px;
    margin-right:4px;
}
.qpb-selected-list-mobile .qpb-row-price-discounted {
    color:#B0132C;
    font-weight:700;
}

@media (max-width: 768px) {
  .qpb-layout { grid-template-columns: 1fr; }
  .qpb-right { display:none; }
  .qpb-grid { grid-template-columns: repeat(2, 1fr) !important; justify-items:center; }
  .qpb-mobile-bar { display:block; }
  body { padding-bottom: 140px; }
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .qpb-mobile-bar { border-radius:0 !important; }
}



.qpb-slot.qpb-tier .qpb-slot-badge { background: #FDE8EA; border-color: #B0132C; color: #B0132C; }



.qpb-mobile-totals .qpb-mobile-discount { color:#111827; font-size:12px; }
.qpb-mobile-totals .qpb-mobile-line { display:flex; align-items:baseline; gap:6px; }
.qpb-mobile-totals .qpb-subtotal-strike-mobile { color:#6B7280; text-decoration:line-through; font-weight:400; font-size:14px; }
.qpb-mobile-totals .qpb-sep-mobile { color:#6B7280; font-size:14px; }

/* Quick View Button */
.qpb-card {
    position:relative;
}
.qpb-quick-view {
    position:absolute;
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    border:1px solid #E6E8EC;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
    z-index:10;
    padding:0;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    opacity:1;
}
.qpb-quick-view:hover {
    background:#fff;
    border-color:#B0132C;
    transform:scale(1.1);
}
.qpb-quick-view svg {
    color:#666;
    transition:color 0.2s ease;
}
.qpb-quick-view:hover svg {
    color:#B0132C;
}

/* On mobile, keep button always visible */
@media (max-width: 768px) {
    .qpb-quick-view {
        opacity:1;
        background:rgba(255,255,255,0.98);
        box-shadow:0 2px 12px rgba(0,0,0,0.12);
    }
}

/* Quick View Modal */
.qpb-quick-view-modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2147483645;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.3s ease;
}
.qpb-quick-view-modal.open {
    opacity:1;
}
.qpb-quick-view-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    cursor:pointer;
}
.qpb-quick-view-content {
    position:relative;
    width:90%;
    max-width:900px;
    max-height:85vh;
    background:#fff;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    z-index:1;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.qpb-quick-view-close {
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    border:none;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
    color:#666;
    box-shadow:0 2px 12px rgba(0,0,0,0.15);
    flex-shrink:0;
}
.qpb-quick-view-close:hover {
    background:#B0132C;
    color:#fff;
    transform:rotate(90deg);
}
.qpb-quick-view-loader {
    padding:40px;
    text-align:center;
    font-size:16px;
    color:#666;
}
.qpb-quick-view-body {
    padding:32px;
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
}

/* Custom Quick View Product Layout */
.qpb-quick-product {
    display:flex;
    flex-direction:column;
    gap:24px;
}
.qpb-quick-header {
    padding-bottom:16px;
    border-bottom:1px solid #E6E8EC;
}
.qpb-quick-title {
    font-size:26px;
    font-weight:700;
    margin:0;
    color:#111;
    line-height:1.3;
}
.qpb-quick-content {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
}
.qpb-quick-image {
    width:100%;
    background:#FCF7EF;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1/1;
    position:relative;
}
.qpb-quick-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Image slider */
.qpb-image-slider {
    width:100%;
    height:100%;
    position:relative;
}
.qpb-slider-slides {
    width:100%;
    height:100%;
    position:relative;
}
.qpb-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.3s ease;
    pointer-events:none;
}
.qpb-slide.active {
    opacity:1;
    pointer-events:auto;
}
.qpb-slide img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.qpb-slider-dots {
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:10;
}
.qpb-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#333;
    cursor:pointer;
    transition:background 0.3s ease;
}
.qpb-dot:hover {
    background:#666;
}
.qpb-dot.active {
    background:#B0132C;
}
.qpb-quick-info {
    display:flex;
    flex-direction:column;
    gap:0;
}
.qpb-quick-price {
    font-size:20px;
    font-weight:600;
    color:#B0132C;
}
.qpb-quick-price del {
    color:#999;
    font-weight:400;
    margin-right:8px;
}
.qpb-quick-desc {
    font-size:15px;
    line-height:1.4;
    color:#374151;
}
.qpb-quick-desc p {
    margin:0 0 12px 0;
}
.qpb-quick-desc p:last-child {
    margin-bottom:0;
}
.qpb-quick-desc ul,
.qpb-quick-desc ol {
    margin:0 0 12px 0;
    padding-left:24px;
}
.qpb-quick-desc li {
    margin-bottom:6px;
}
.qpb-quick-desc strong,
.qpb-quick-desc b {
    font-weight:700;
}
.qpb-quick-desc em,
.qpb-quick-desc i {
    font-style:italic;
}
.qpb-quick-desc a {
    color:#B0132C;
    text-decoration:underline;
}
.qpb-quick-desc a:hover {
    color:#8B0F22;
}
.qpb-quick-desc h1,
.qpb-quick-desc h2,
.qpb-quick-desc h3,
.qpb-quick-desc h4,
.qpb-quick-desc h5,
.qpb-quick-desc h6 {
    font-weight:700;
    margin:16px 0 8px 0;
    line-height:1.3;
}
.qpb-quick-desc h3 { font-size:18px; }
.qpb-quick-desc h4 { font-size:16px; }
.qpb-quick-desc img {
    max-width:100%;
    height:auto;
    border-radius:8px;
    margin:12px 0;
}
.qpb-quick-add {
    margin-top:16px;
    width:100%;
    padding:8px 16px !important;
    font-size:16px !important;
    font-weight:600 !important;
    background:#B0132C !important;
    color:#fff !important;
    border:none !important;
    border-radius:8px !important;
    cursor:pointer;
    transition:background 0.2s ease;
}
.qpb-quick-add:hover {
    background:#8B0F22 !important;
}
.qpb-quick-remove {
    background:#111 !important;
    color:#fff !important;
}
.qpb-quick-remove:hover {
    background:#333 !important;
}

@media (max-width: 768px) {
    .qpb-quick-content {
        grid-template-columns:1fr;
    }
    .qpb-quick-view-body {
        padding:24px;
    }
    .qpb-quick-title {
        font-size:22px;
    }
}

@media (max-width: 768px) {
    .qpb-quick-view-content {
        width:95%;
        height:90vh;
    }
}

/* Sticky sidebar on desktop */
@media (min-width: 769px) {
    .qpb-right {
        position: sticky;
        top: 150px;
        align-self: start;
    }
}