.page-header,
.page-header .site-breadcrumbs {
    display: none !important;
}

body,
html,
.site,
.site-content,
.page-wrapper,
.vlicious-container-wrapper {
    background: linear-gradient(to bottom, #f4f6f9, #eef2f7) !important;
}

.page-id-24681 .qlwapp__container {
    display: none !important;
}

/* ==================== GRID CONTAINER ==================== */
.vlicious-container,
.vlicious-cart-container {
    display: block;
    gap: 15px;
    padding-top: 15px; /* add some breathing space from top */
}
@media (min-width: 768px) {
    .vlicious-container { 
        grid-template-columns: 1fr 1fr;
        padding-top: 20px; /* keep same on desktop */
    }
}

/* ==================== CARD ==================== */
.vlicious-card {
    display: flex;
    gap: 10px;
    padding: 10px 18px 10px 10px;
    border-radius: 8px;
    background: #fff;
    align-items: flex-start;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    position: relative;
    overflow: visible; /* allow badges to overflow */
    transform: translateY(25px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s;
}

.vlicious-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.vlicious-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* IMAGE */
.vlicious-image img {
    width: 120px;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Allergy Filter Badge with Icon */
.allergy-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    padding-right: 12px;
}

.allergy-filter-badge .filter-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Keep icon visible when active */
.filter-badge.active .filter-icon {
    filter: brightness(0) invert(1);
}

/* CONTENT */
.vlicious-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* TITLE */
.vlicious-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0px;
    margin-top: 0px;   /* added */
}

.vlicious-drawer-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 0px;   /* added */
}

/* VARIATION ROW */
.vlicious-variation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: nowrap;
}

.vlicious-variation-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* VARIATION INFO + DESCRIPTION + PRICE INLINE */
.vlicious-variation-info {
    flex: 1;
}
.vlicious-desc-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.vlicious-variation-desc {
    display: -webkit-box;          /* required for line-clamp */
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;         /* limit to 2 lines */
    line-clamp: 2;                 /* standard property */
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 13px;
    font-weight: 500;
    color: #555;

    line-height: 1;                /* no extra space between lines */
    margin: 0;                      /* remove default margin */
    padding: 0;                     /* remove padding */
}
.vlicious-variation-price {
    font-size: 16px;
    font-weight: 700;
    color: #2c7be5;
}
.vlicious-old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 15px;
}

.vlicious-currency {
    font-size: 10px;
    vertical-align: super;
    letter-spacing: 0.5px;
}

.currency {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.5px;
    vertical-align: top;
}

.discount-badge {
    background: #ff5252;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 12px;
    margin-left: auto;
}

/* CONTROLS */
.vlicious-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.vlicious-minus,
.vlicious-qty {
    transition: opacity 0.2s ease;
}

.vlicious-minus.show,
.vlicious-qty.show {
    display: flex;
    opacity: 1;
}

.vlicious-minus.hide,
.vlicious-qty.hide {
    opacity: 0;
    display: none;
}
.vlicious-minus,
.vlicious-plus {
    width: 32px;
    height: 32px;
    border: none;
    background:white;           /* no solid fill */
    color: blue;
    font-size: 16px;
    cursor: pointer;

    border-radius: 50%;
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    /* soft shadow */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.vlicious-minus .icon,
.vlicious-plus .icon {
    width: 15px;
    height: 15px;
    display: block;   /* removes inline SVG baseline spacing */
}

/* Hover effect */
.vlicious-minus:hover,
.vlicious-plus:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

/* Mobile bigger size
@media (max-width: 768px) {
    .vlicious-minus,
    .vlicious-plus {
        width: 16px;
        height: 16px;
    }
} */

/* Ripple effect */
.vlicious-minus::after,
.vlicious-plus::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(44, 123, 229, 0.2);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.6s ease;
}

.vlicious-minus:active::after,
.vlicious-plus:active::after {
    transform: scale(2);
    opacity: 1;
    transition: 0s;
}

/* ---------------- FILTER DRAWER ---------------- */
.filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 900;
}

.filter-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-filter-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    background: rgba(245, 245, 245, 0.95); /* slightly dimmed light gray */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    max-height: 80%;
    overflow: hidden;
    transition: bottom 0.3s;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* touch-action: pan-y; */
    overscroll-behavior: contain;
}

.mobile-filter-drawer.active {
    bottom: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 10px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

/* Scrollable content area */
.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px 100px; /* top | left&right | bottom */
}

.apply-filters {
    width: 100%;
    max-width: 400px; /* optional: limit max width */
    padding: 14px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.apply-filters:hover {
    background: #333;
}

/* ----------------- Filter Sections ----------------- */

.filter-group {
    background: #ffffff;         /* pure white for each section */
    padding: 14px 16px;          /* generous padding */
    border-radius: 8px;          /* rounded corners */
    margin-bottom: 12px;         /* spacing between sections */
    border: 1px solid #eee;      /* subtle border for structure */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* subtle elevation effect */
}

/* Optional: remove alternating background since sections now stand out */
.filter-group:nth-child(even) {
    background: #ffffff;
}

/* Maintain title + note styling */
.filter-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

.allergy-note {
    font-size: 12px;
    font-weight: normal;
    color: #555;
}

/* Make filter badge container wrap and clickable */
.filter-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* center horizontally */
    gap: 6px;
    margin-bottom: 6px;
}

/* Badge style */
.filter-badge {
    display: inline-flex;   /* change this */
    align-items: center;    /* vertical alignment */
    justify-content: center;
    gap: 8px;               /* space between icon + text */
    padding: 6px 12px;
    border-radius: 20px;
    background: #f3f6fa;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    border: 1px solid #ddd;
}

.filter-badge img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;   /* prevents shrinking */
    display: block;   /* removes inline spacing issues */
}

.filter-badge.active {
    background: #2c7be5;
    color: #fff;
    border-color: #2c7be5;
}

.age-filter-badge {
    padding: 1px 1px;       /* horizontal padding creates pill */
    border-radius: 999px;    /* true pill shape */
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.age-filter-badge img {
    height: 30px;
    width: auto;
    display: block;
}

.cooked-filter-badge {
    padding: 0px 0px;       /* horizontal padding creates pill */
    border-radius: 999px;    /* true pill shape */
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cooked-filter-badge img {
    height: 45px;
    width: auto;
    display: block;
}

/* ----------------- Type Section Badges ----------------- */
.type-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.type-parent {
    display: flex;
    flex-wrap: wrap; /* parent + children inline */
    gap: 6px;
    align-items: center;
}

.parent-category {
    font-weight: 600;
    font-size: 13px;
}

.sub-category-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sub-category-group .sub-category {
    font-size: 11px;      
    opacity: 0.7;
    margin-left: 0;
    padding: 4px 10px;     
    border-radius: 16px;
    background: #e8edf5;
    color: #555;
    border: 1px solid #ccc;   
}

.sub-category-group .sub-category.active {
    background: #2c7be5;
    color: #fff;
    border-color: #2c7be5;
}

/* ----------------- Floating Filter Button ----------------- */
.open-filter {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1100;
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px;
    border-radius: 999px;

    background: linear-gradient(135deg, #2c7be5, #1a5fd0);
    color: #fff;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    border: none;

    box-shadow: 0 8px 20px rgba(44,123,229,0.35);
    transition: bottom 0.3s ease;
}

/* When banner is visible, move filter icon up */
body.cart-banner-visible .open-filter {
    bottom: 60px; /* adjust based on banner height */
}

/* Filter count badge */
.filter-count {
    position: absolute;
    top: -4px;
    right: -4px;

    min-width: 20px;
    height: 20px;
    padding: 0 5px;

    border-radius: 50%;
    background: #ff3b30;
    color: #fff;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

floating-filter {
    width: 45px;
    height: 45px;
}

/* Hover (for devices that support it) */
/* .open-filter:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(44,123,229,0.45);
} */

/* Click feedback */
.open-filter:active {
    transform: scale(0.95);
}

/* Hidden animation */
.open-filter.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(60px);
}

/* Hide on desktop */
@media(min-width:768px){
    .open-filter { display: none; }
}

/* ==================== COMPACT PRODUCT BADGES ==================== */
.vlicious-badges {
    position: absolute;
    top: -10px;          /* goes slightly above card */
    right: -10px;        /* goes slightly outside right border */
    display: flex;
    flex-wrap: wrap;     /* multiple badges stack nicely */
    gap: 4px;
    pointer-events: none; /* optional: prevents hover issues */
    z-index: 10;
}

.vlicious-age-badges,
.vlicious-cooked-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 2px 0 0 0;
}

.vlicious-age-badges .age-badge,
.vlicious-cooked-badges .cooked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    max-width: 60px;
    overflow: hidden;
}

.vlicious-age-badges img,
.vlicious-cooked-badges img {
    height: 20px;
    max-width: 60px;
    width: auto;
    display: block;
}

.vlicious-badge.allergy-icon {
    position: relative;          /* for the overlay */
    display: inline-flex;        /* flex works on inline-flex too */
    align-items: center;         /* vertical centering */
    justify-content: center;     /* horizontal centering */
    /* width: 32px;
    height: 32px;
    font-size: 18px;              */
    line-height: 1;              /* prevents emoji offset */
    text-align: center;          /* ensure inline content is centered */
    overflow: hidden;            /* clip overlay if necessary */
}

.vlicious-badge {
    position: absolute;
    top: -2px;      /* slightly above the card */
    right: 20px;    /* slightly outside the right edge */
    width: 26px;    /* size of the circular badge, was 32 */
    height: 26px;
    display: block;
    border-radius: 50%;  /* keep it perfectly circular */
    background-color: transparent; /* no box behind it */
    padding: 0;
    margin: 0;
    border: none;
    z-index: 10;

    /* Shadow to make it pop */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    /* If the badge is an inline SVG, you can also use: */
    /* filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); */
}

/* ==================== Drawer Footer ==================== */
.drawer-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 14px 16px;
    border-top: 1px solid #eee;

    display: flex;
    gap: 10px;
}

.drawer-footer button {
    flex: 1;
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Clear button */
.clear-filters {
    background: #f3f6fa;
    color: #333;
    border: 1px solid #ddd;
}

/* Apply button */
.apply-filters {
    background: #2c7be5;
    color: #fff;
    border: none;
}

.clear-filters:disabled{
    opacity:0.4;
    pointer-events:none;
}

.drawer-footer button:hover {
    background: #1a5edb;
}

/* Drawer header */
.mobile-filter-drawer .drawer-header {
    position: relative;
    padding: 16px 20px 10px;
    text-align: center;
}

/* Small top drag handle */
.mobile-filter-drawer .drawer-drag-handle {
    width: 50px;
    height: 5px;
    background: linear-gradient(to right, #dcdcdc, #cfcfcf);
    border-radius: 10px;
    margin: 0 auto 12px;
}

/* Optional: subtle hover effect */
.mobile-filter-drawer .drawer-header:active .drawer-drag-handle {
    background: #aaa;
}

/* Slight dim for out-of-stock card */
.vlicious-card.out-of-stock {
    position: relative;
    opacity: 0.5; /* slight dim, still readable */
}

/* Out of Stock Ribbon */
.vlicious-card .stock-ribbon {
    position: absolute;
    top: 20px;       /* moved down from 10px */
    right: -5px;
    background: red;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    transform: rotate(45deg);
    z-index: 10;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Disable buttons for out of stock variations */
.vlicious-card.out-of-stock .vlicious-plus,
.vlicious-card.out-of-stock .vlicious-minus {
    pointer-events: none;
    opacity: 0.6;
}

/* Banner container */
#vlicious-cart-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
    font-size: clamp(11px, 2.2vw) !important; 
    line-height: 1.8;
    z-index: 10001;
    cursor: pointer;

    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-radius: 6px;
}

#vlicious-cart-banner.active {
    transform: translateY(0) scale(1);
}

.banner-arrow {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* -------------------------
   Progress Bar
------------------------- */

#vlicious-cart-banner .banner-progress {
    position: relative;
    width: 100%;
    height: 6px;
    background: lightgray;
    border-radius: 6px;
    overflow: visible;
}

.banner-segments {
    display: flex;
    gap: 4px;
}
.segment {
    flex: 1;
    height: 6px;
    background: #ddd;
    border-radius: 4px;
}
.segment.active {
    background: linear-gradient(135deg,#2c7be5,#1a5fd0);
}

.seg-1 { flex: 500; }
.seg-2 { flex: 300; }
.seg-3 { flex: 200; }
.seg-4 { flex: 250; }

/* progress bar */
#vlicious-cart-banner .banner-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(135deg, #2c7be5, #1a5fd0);
    border-radius: 6px;

    /* smoother animation */
    transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
}

/* -------------------------
   Moving Truck
------------------------- */

#vlicious-cart-banner .banner-truck{
    position: absolute;
    top: -14px;
    left: 0%;
    transform: translateX(-50%) scaleX(-1); /* flip truck */
    font-size: 18px;

    transition: left 0.6s cubic-bezier(.34,1.56,.64,1);
}

.static-truck {
    display: inline-block;
    transform: scaleX(-1);
}

/* Delivery Theme Color */
.delivery-color {
    color: #df9400; /* text */
}

.delivery-bar-fill {
    background-color: #df9400; /* progress bar fill */
}

#vlicious-cart-banner .banner-progress {
    position: relative;
    width: 100%;
    height: 6px;
    display: flex;
    gap: 4px;
    background: transparent;
}

#vlicious-cart-banner .banner-segment {
    height: 6px;
    background: #e0e0e0;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Tier-based widths */
#vlicious-cart-banner .banner-segment.seg-1 {
    flex: 500;
}

#vlicious-cart-banner .banner-segment.seg-2 {
    flex: 300;
}

#vlicious-cart-banner .banner-segment.seg-3 {
    flex: 200;
}

#vlicious-cart-banner .banner-segment.seg-4 {
    flex: 250;
}

/* active segment */
#vlicious-cart-banner .banner-segment.active {
    background: linear-gradient(135deg, #ffbb37, #df9400);
}

/* truck celebration bounce */
.banner-truck.celebrate{
    animation: truckBounce 0.6s ease scaleX(-1);
}

@keyframes truckBounce{
    0%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(-6px); }
    100%{ transform:translateX(-50%) translateY(0); }
}

/* -------------------------
   Banner Content
------------------------- */

#vlicious-cart-banner .banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* -------------------------
   Celebration Animation
------------------------- */

.vlicious-cart-banner.celebrate{
    animation: bannerCelebrate 0.6s ease;
}

@keyframes bannerCelebrate{
    0%{ transform: translateY(0) scale(1); }
    40%{ transform: translateY(0) scale(1.04); }
    70%{ transform: translateY(0) scale(0.98); }
    100%{ transform: translateY(0) scale(1); }
}

/* emoji pop */
.banner-remaining.celebrate{
    animation: confettiPop 1s ease;
}

@keyframes confettiPop{
    0%{ transform: scale(1); }
    30%{ transform: scale(1.2); }
    100%{ transform: scale(1); }
}

/* =========================
   FLOATING CHECKOUT BUTTON
========================= */
#vlicious-fab {
    position: fixed;
    bottom: 60px;
    right: 20px;

    background: linear-gradient(135deg, #2c7be5, #1a5fd0);
    color: #fff;

    padding: 14px 20px;
    border-radius: 40px;

    font-size: 14px;
    font-weight: 700;

    display: flex;
    align-items: center;
    gap: 6px;

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

    z-index: 9999;
    text-decoration: none;

    transform: scale(0);
    transition: bottom 0.3s ease;
}

/* .vlicious-cart-banner.show {
    display: flex;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
} */

/* visible state */
#vlicious-fab.active {
    transform: scale(1);
}

/* hover */
#vlicious-fab:hover {
    background: linear-gradient(135deg, #2c7be5, #1a5fd0);
    transform: scale(1.08);
}

/* icon */
#vlicious-fab .fab-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* mobile tweak */
@media (max-width: 768px) {
    #vlicious-fab {
        bottom: 60px;
        right: 20px;
    }
}

#vlicious-fab.bump {
    animation: bump 0.3s ease;
}

@keyframes bump {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.fab-currency {
    font-size: 11px;
    margin-right: 1px;
}

.fab-amount {
    font-size: 21px;
    font-weight: 800;
}

.vlicious-card.cart-card {
    display: flex;
    flex-direction: row;
    gap: 16px; /* spacing between cards */
    border: 1px solid #eee;
    padding: 12px;
    /* margin-bottom: 12px; */
    border-radius: 8px;
    background: #fff;
    max-height: 105px;
}

.vlicious-card-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.vlicious-cart-image img {
    min-width: 20px;
    max-width: 80px;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* .vlicious-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
} */

.vlicious-variations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vlicious-variation-desc {
    flex: 1 1 60%; /* description takes 60% of the row */
    min-width: 100px;
    margin-right: 12px;
}

.vlicious-variation-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 35%; /* price + buttons take 35% */
    justify-content: flex-end;
    min-width: 120px;
}

.vlicious-price {
    font-weight: bold;
    margin-right: 8px;
    color: #2c7be5;
}

.vlicious-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* .vlicious-controls button {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
} */

.vlicious-qty {
    display: inline-block;
    width: 30px;
    text-align: center;
}

.vlicious-empty-cart {
    text-align: center;
    padding: 40px 20px;
}

.vlicious-shop-btn {
    display: inline-block;
    margin-top: 10px;
    background: #000;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
}

.vlicious-cart-summary {
    margin-top: 20px;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 16px;
}

.vlicious-cart-summary .line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.vlicious-cart-summary .total {
    font-weight: bold;
    font-size: 16px;
}

.vlicious-checkout-btn {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 12px;
    background: black;
    color: white;
    border-radius: 10px;
    cursor: pointer;
}

.vlicious-drawer {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10000;
}

.vlicious-drawer.open {
    display: block;
}

.vlicious-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
    pointer-events: none;
}

.vlicious-drawer-panel {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 12px 12px 10px 12px;
    max-height: 80vh;
  
    margin-bottom: var(--vlicious-banner-height, 0px);
    z-index: 2; 
    transition: transform 0.3s ease;

    /* position: relative; */
}

.drawer-row {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.drawer-img img{
    max-width: 100%;
    height: 50px;
    vertical-align: middle;
}

.vlicious-drawer-close {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 44px;
    height: 44px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 100;

    background: #000; /* optional but helps visibility */
}

/* optional hover */
.vlicious-drawer-close:hover {
    background: rgba(0,0,0,0.8);
}

.vlicious-drawer-close svg {
    width: 20px;
    height: 20px;
}

.vlicious-drawer-close svg,
.vlicious-drawer-close svg * {
    pointer-events: none;
}

.vlicious-drawer-close:active {
    transform: translateX(-50%) scale(0.9);
}

.drawer-controls {
    display: flex;
    flex-direction: row;   /* force horizontal */
    align-items: center;
    gap: 8px;
}

.vlicious-variation-row.multi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vlicious-variation-info {
    flex: 1;
}

.vlicious-controls.multi-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vlicious-variation-block.multi-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vlicious-desc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vlicious-variation-desc {
    flex: 1;
    font-size: 14px;
}

.vlicious-variation-price {
    font-weight: 600;
    white-space: nowrap; /* prevents breaking */
}

.vlicious-controls.multi-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end; /* 🔥 aligns to right */
}

.vlicious-variation-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vlicious-desc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vlicious-variation-desc {
    flex: 1;
    font-size: 14px;
}

.vlicious-variation-price {
    font-weight: 600;
    white-space: nowrap;
}

.vlicious-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end; /* or center if you prefer */
}

.vlicious-drawer-confirm {
    width: 90%;
    margin: 12px auto 12px;
    padding: 12px 18px;

    border: none;
    border-radius: 999px; /* 🔥 capsule shape */

    background: #1a5fd0;
    color: #fff;

    font-size: 15px;
    font-weight: 600;

    display: block;
    text-align: center;

    cursor: pointer;

    transition: all 0.2s ease;
}

.vlicious-drawer-confirm:hover {
    background: #000;
    transform: translateY(-1px);
}

.vlicious-drawer-confirm:active {
    transform: translateY(0);
}

.vlicious-drawer-confirm {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.vlicious-drawer-panel-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.vlicious-drawer-panel-wrapper * {
    pointer-events: auto;
}

/* =============================
   CART DRAWER WRAPPER
============================= */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: flex-end;

    visibility: hidden;
    opacity: 0;

    transition: opacity 0.3s ease;
}

/* ACTIVE STATE */
.cart-drawer.active {
    visibility: visible;
    opacity: 1;
}

/* =============================
   OVERLAY (dark background)
============================= */
.cart-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

/* =============================
   DRAWER PANEL (the white box)
============================= */
.cart-drawer-panel {
    position: relative;
    width: 100%;
    max-height: 90%;
    background: #fff;
    margin-bottom: var(--vlicious-banner-height, 0px);
    z-index: 2;

    border-radius: 16px 16px 0 0;

    transform: translateY(100%);
    transition: transform 0.3s ease;

    display: flex;
    flex-direction: column;

    overflow: hidden; /* ✅ ADD THIS */
}

/* SLIDE UP EFFECT */
.cart-drawer.active .cart-drawer-panel {
    transform: translateY(0);
}

/* =============================
   HEADER
============================= */
.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 8px 16px;
    font-weight: bold;
    font-size: 16px;

    border-bottom: 1px solid #eee;
}

/* CLOSE BUTTON */
.cart-drawer-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

/* =============================
   CONTENT
============================= */
.cart-drawer-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;

    -webkit-overflow-scrolling: touch; /* smooth mobile scroll */
}

/* =============================
   OPTIONAL: Prevent body scroll
============================= */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* FORCE CART ITEMS TO BE VISIBLE */
.cart-drawer .vlicious-card {
    opacity: 1 !important;
    transform: none !important;
}

.vlicious-sticky-nav {
    position: sticky;
    top: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    z-index: 9999;
    background: #fff;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.vlicious-sticky-nav::-webkit-scrollbar {
    display: none;
}

.vlicious-sticky-nav ul {
    display: inline-flex;
    flex-wrap: nowrap;

    gap: 12px;

    min-width: max-content;

    padding: 0 12px;
    margin: 0;

    list-style: none;
}

.vlicious-sticky-nav li {
    flex: 0 0 auto;
}

.vlicious-sticky-nav a {
    display: inline-flex;
    text-align: center;
    padding: 12px 7px;
    background: transparent;
    text-decoration: none !important;   /* removes underline */
    font-size: 13px;
    font-weight: 500;
    color: #888;
    border: none;                        /* removes bottom line */
    transition: color 0.2s ease;
    white-space: nowrap;
}

.vlicious-sticky-nav a:hover,
.vlicious-sticky-nav a.active {
    color: #2c7be5;
    background: transparent;
    border: none;                        /* ensures no underline */
    text-decoration: none !important;
}

/* Section spans full width, no internal scroll */
.vlicious-productsection {
    width: 100%;
    padding: 20px 0;
    scroll-margin-top: 90px;
    overflow: visible; /* remove any accidental scroll containment */
}

.vlicious-productsection-title {
    font-size: 22px;
    margin-bottom: 15px;
}

.vlicious-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}