/* =====================================================
   GLOBAL
=====================================================*/
html {
    height: 100%;
    /* Forces the baseline window background to be pure white (or whatever your nav bar color is) */
    background-color: #ffffff; 
}

body {
    background: linear-gradient(180deg, #f3fff7 0%, #e8f8ee 40%, #dff3e7 100%);
    margin: 0;
    overflow-x: hidden;
    font-family: 'Segoe UI', sans-serif;
    
    /* Keeps your navigation spacing, but adds the dynamic safe area padding for TWAs */
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
    
    min-height: 100%;
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

	/* GLOBAL LINK RESET - PREVENTS BLUE/PURPLE COLORS */
	a, a:link, a:visited, a:hover, a:active { 
		text-decoration: none; 
		color: inherit; /* Takes the color from the parent (.qlee-cat) */
		-webkit-tap-highlight-color: transparent; /* Removes the gray/blue box on mobile tap */
	}


/* Apply to every interactive element on the site */
button, 
a, 
input, 
select, 
area, 
[role="button"],
[onclick],
.qlee-add-cart,
.qlee-open-item {
    /* 1. Eliminate the 300ms mobile tap delay */
    touch-action: manipulation; 
    
    /* 2. Remove the 'grey highlight' flicker on Android/iOS taps */
    -webkit-tap-highlight-color: transparent; 
    
    /* 3. Ensure the browser treats it as a high-priority touch zone */
    cursor: pointer;
    
    /* 4. Disable user-select on buttons to prevent accidental text highlighting when double-tapping */
    user-select: none;
    -webkit-user-select: none;
}

/* Instant Visual Feedback (Optional but recommended for "speed" feel) */
button:active, .qlee-add-cart:active, .qlee-tab-item:active {
    transform: scale(0.97);
    opacity: 0.8;
    transition: 0.1s;
}


/* WISHLIST */
/* 1. Base State: Small, Slim & Glassy */
.qlee-add-wishlist { 
    position: absolute; 
    top: 6px; 
    right: 6px; 
    font-size: 14px; /* Shrunk icon */
    color: #94a3b8; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 10; 
    cursor: pointer;
    
    /* Compact Circular Housing */
    background: rgba(255, 255, 255, 0.7);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    backdrop-filter: blur(3px); /* Subtle glass effect */
    border: 0.5px solid rgba(241, 245, 249, 0.8);
}

/* 2. Tap Interaction: Tiny Squeeze */
.qlee-add-wishlist:active {
    transform: scale(0.85);
}

/* 3. Active State: Qlee Green Pop */
.qlee-add-wishlist.qlee-wish-added { 
    color: #16a34a; 
    background: #fff;
    transform: scale(1.1); 
    border-color: rgba(22, 163, 74, 0.3);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

/* 4. The "Success" Pop Animation */
.qlee-wish-added i {
    animation: qleePop 0.3s ease-out;
}

@keyframes qleePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}




/* ===============================
PERFORMANCE BOOST
===============================*/

.qlee-vivid-card,
.qlee-product-card,
.qlee-shop-card,
.qlee-bottom-nav,
.qlee-feature-card{
will-change: transform;
transform:translateZ(0);
backface-visibility:hidden;
}

.qlee-product-row,
.qlee-trending-row,
.qlee-feature-wrap,
.qlee-shops-row{
-webkit-overflow-scrolling:touch;
contain:layout paint;
}

.qlee-top{
transition:transform .35s ease, border-radius .35s ease;
}


img{
image-rendering:auto;
content-visibility:auto;
}

@media (hover:none){
.qlee-feature-card:hover,
.qlee-vivid-card:hover,
.qlee-shop-card:hover{
transform:none;
box-shadow:0 3px 10px rgba(0,0,0,.06);
}
}

.qlee-icon-link{
position:relative;
}

.qlee-badge{
position:absolute;
top:-6px;
right:-8px;

background:#ef4444;
color:#fff;

font-size:10px;
padding:2px 6px;
border-radius:20px;
}



/* ===== CATEGORY GRID ===== */
.qlee-home-categories{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
padding:20px;
max-width:800px;
margin:0 auto;
}


/* ===== CARD ===== */
.qlee-cat-card{
border-radius:24px;
padding:24px 16px;
text-align:center;
text-decoration:none;

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

/* elegant soft gradient */
background:linear-gradient(145deg,#ffffff,#f3f4f6);

/* soft border */
border:1px solid rgba(0,0,0,0.04);

/* premium shadow */
box-shadow:
0 4px 10px rgba(0,0,0,0.06),
0 12px 24px rgba(0,0,0,0.05);
}

.qlee-cat-card:nth-child(1){
background:linear-gradient(135deg,#ecfdf5,#d1fae5);
}

.qlee-cat-card:nth-child(2){
background:linear-gradient(135deg,#eef2ff,#e0e7ff);
}

.qlee-cat-card:nth-child(3){
background:linear-gradient(135deg,#fdf2f8,#fce7f3);
}

.qlee-cat-card:nth-child(4){
background:linear-gradient(135deg,#fff7ed,#ffedd5);
}


/* ===== IMAGE ===== */
.qlee-cat-card img{
width:90px;
height:90px;
object-fit:contain;
margin-bottom:16px;
}


/* ===== TITLE ===== */
.qlee-cat-title{
font-size:17px;
font-weight:700;
color:#1f2937;
margin-top:6px;
letter-spacing:0.3px;
text-align:center;
font-family:'Inter',-apple-system,sans-serif;
}






/* =====================================================
FLASH CARD
===================================================== */

.qlee-flash-card{
border-radius:22px;
margin:16px;
overflow:hidden;
box-shadow:0 12px 26px rgba(0,0,0,0.18);
}


/* =====================================================
FLASH WRAPPER
===================================================== */

.qlee-flash-wrap{
position:relative;
overflow:hidden;
}


/* =====================================================
FLASH IMAGE
===================================================== */

.qlee-flash-img{
width:100%;
height:200px;
object-fit:cover;
display:block;
transition:transform .6s ease;
}

/* subtle zoom animation */

.carousel-item.active .qlee-flash-img{
transform:scale(1.02);
}

@media(min-width:768px){
.qlee-flash-img{
height:380px;
}
}


/* smoother GPU animation */

.carousel-item{
transform:translateZ(0);
backface-visibility:hidden;
}

.qlee-flash-link{
display:block;
text-decoration:none;
}









/* =====================================================
   CART BOUNCE ANIMATION
=====================================================*/
@keyframes qleeBounce{
0%{ transform:scale(1); }
30%{ transform:scale(1.2); }
60%{ transform:scale(.9); }
100%{ transform:scale(1); }
}
.qlee-bounce{ animation:qleeBounce .35s ease; }







/* =====================================================
   BESTSELLER CARD PERFECT HEIGHT
=====================================================*/

/* make column stretch */
.qlee-bestseller-section .col-6,
.qlee-bestseller-section .col-md-4{
display:flex;
}

/* main card full height */
.qlee-bcat-card{
background:#f2f4f5;
border-radius:22px;
padding:14px;
text-align:center;
transition:.25s;

display:flex;
flex-direction:column;
width:100%;
height:100%;
}

/* ⭐ FIX IMAGE GRID HEIGHT */
.qlee-bcat-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;

height:160px;           /* FIXED HEIGHT */
}

.qlee-bcat-grid img{
width:100%;
height:70px;
object-fit:contain;
background:#fff;
border-radius:14px;
padding:6px;
}

/* ⭐ KEEP BADGE SPACE EVEN IF EMPTY */
.qlee-bcat-more{
display:inline-block;
background:#e5e7eb;
padding:4px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
color:#444;
margin:8px auto 6px;
min-height:24px;        /* reserve space */
}

/* ⭐ FIX TITLE HEIGHT */
.qlee-bcat-title{
font-size:18px;
font-weight:700;
color:#333;
line-height:1.3;

min-height:46px;        /* equal title height */
display:flex;
align-items:center;
justify-content:center;
}

/* =====================================================
   QLEE VIBRANT RANDOM SUBCAT
 
=====================================================*/

/* =====================================================
   QLEE MOBILE LUXE DISCOVERY (TOUCH-OPTIMIZED)
   PERMANENT SOFT AURA + TACTILE FEEDBACK
=====================================================*/

.qlee-random-subcat-wrap {
    padding: 25px 0 35px; /* Removed side padding for full-width feel */
    background: transparent;
}

.qlee-home-title {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 20px 20px;
    letter-spacing: -0.5px;
}

/* Scroll container with "Snap" feel */
.qlee-random-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 10px 20px 30px; /* Space at bottom for the glow to breathe */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* Smooth inertia scroll on iOS */
}

.qlee-random-scroll::-webkit-scrollbar {
    display: none;
}

/* ================= THE CARD ================= */
.qlee-random-card {
    flex: 0 0 auto;
    width: 110px; 
    text-align: center;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* TACTILE FEEDBACK: Shrinks when the finger touches the screen */
.qlee-random-card:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* ================= THE ICON TILE (PERMANENT GLOW) ================= */
.qlee-random-icon {
    width: 100px;  
    height: 100px;
    border-radius: 34px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    
    /* Clean white border for that "Premium Sticker" look */
    border: 1.5px solid #ffffff;
    
    /* Soft Permanent Glow - Uses a very subtle shadow instead of animation */
    box-shadow: 
        0 12px 24px -8px rgba(0, 0, 0, 0.12);
}

/* THE AURA (Always visible on mobile for "Pop") */
.qlee-random-icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 36px;
    background: inherit; 
    filter: blur(14px);
    opacity: 0.45; /* Permanent soft visibility */
    z-index: -1;
}

/* THE IMAGE (MAX SIZE) */
.qlee-random-icon img {
    width: 74px; /* Large image relative to 100px box */
    height: 74px;
    object-fit: contain;
    z-index: 5;
    /* Keeps images crisp and adds slight depth */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.06));
}

/* THE LABEL */
.qlee-random-card span {
    display: block;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Prevents long names from breaking layout */
}

/* ================= 10 SOOTHING GRADIENTS ================= */
.qlee-random-card:nth-child(10n+1) .qlee-random-icon { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.qlee-random-card:nth-child(10n+2) .qlee-random-icon { background: linear-gradient(135deg, #f0f9ff, #bae6fd); }
.qlee-random-card:nth-child(10n+3) .qlee-random-icon { background: linear-gradient(135deg, #fffbeb, #fde68a); }
.qlee-random-card:nth-child(10n+4) .qlee-random-icon { background: linear-gradient(135deg, #f5f3ff, #ddd6fe); }
.qlee-random-card:nth-child(10n+5) .qlee-random-icon { background: linear-gradient(135deg, #fff1f2, #fecdd3); }
.qlee-random-card:nth-child(10n+6) .qlee-random-icon { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.qlee-random-card:nth-child(10n+7) .qlee-random-icon { background: linear-gradient(135deg, #f1f5f9, #cbd5e1); }
.qlee-random-card:nth-child(10n+8) .qlee-random-icon { background: linear-gradient(135deg, #ecfeff, #a5f3fc); }
.qlee-random-card:nth-child(10n+9) .qlee-random-icon { background: linear-gradient(135deg, #fefce8, #fef08a); }
.qlee-random-card:nth-child(10n+10) .qlee-random-icon { background: linear-gradient(135deg, #f8fafc, #e2e8f0); }


/* =====================================================
   QLEE MOBILE LUXE (ANIMATED VERSION)
   ENTRANCE BOUNCE + CONSTANT FLOAT
=====================================================*/

/* 1. THE ENTRANCE ANIMATION (Staggered Pop-in) */
@keyframes qleePopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
    }
    70% {
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 2. THE FLOATING LOOP (Premium Feel) */
@keyframes qleeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Apply Entrance Animation to Cards */
.qlee-random-card {
    flex: 0 0 auto;
    width: 110px; 
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    
    /* Animation Settings */
    animation: qleePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Stagger the entrance (Card 1 comes first, then 2, etc.) */
.qlee-random-card:nth-child(1) { animation-delay: 0.1s; }
.qlee-random-card:nth-child(2) { animation-delay: 0.2s; }
.qlee-random-card:nth-child(3) { animation-delay: 0.3s; }
.qlee-random-card:nth-child(4) { animation-delay: 0.4s; }
.qlee-random-card:nth-child(n+5) { animation-delay: 0.5s; } /* Rest pop together */

/* Apply the floating loop to the ICON BOX */
.qlee-random-icon {
    width: 100px;  
    height: 100px;
    border-radius: 34px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1.5px solid #ffffff;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);

    /* Permanent Subtle Floating Animation */
    animation: qleeFloat 4s ease-in-out infinite;
}

/* Offset the floating for odd/even cards so they don't move in a boring line */
.qlee-random-card:nth-child(even) .qlee-random-icon {
    animation-delay: 1s; 
    animation-duration: 4.5s;
}

/* ACTIVE STATE (Pressing with finger) */
.qlee-random-card:active {
    transform: scale(0.9) !important; /* Forces shrink on tap */
    transition: 0.1s;
}

/* Reset image size for mobile focus */
.qlee-random-icon img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    z-index: 5;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.1));
}

/* Keep the Aura Glow Permanent */
.qlee-random-icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 36px;
    background: inherit; 
    filter: blur(14px);
    opacity: 0.4;
    z-index: -1;
}



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

						ITEM PAGE LAYOUT

				===================================

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

/* =========================
MODAL HERO IMAGE AREA
=========================*/

.qlee-modal-hero{
position:relative;
}

.qlee-modal-img{
width:100%;
height:260px;
object-fit:contain;
border-radius:18px;
background:linear-gradient(180deg,#e6fff0,#ffffff);
}


/* TOP ACTION ICONS */

.qlee-modal-actions{
position:absolute;
top:12px;
right:12px;
display:flex;
gap:10px;
}

.qlee-modal-actions i{
background:#fff;
padding:8px;
border-radius:50%;
box-shadow:0 2px 8px rgba(0,0,0,.12);
}


/* =========================
CLOSE BUTTON (FIXED)
=========================*/

/* ===============================
FLOATING CLOSE BUTTON (ABOVE MODAL)
===============================*/
/* =========================
ULTRA FLOATING CLOSE BUTTON
=========================*/

.qlee-modal-close{
position:fixed;
bottom:82vh;                  /* stays above modal sheet */
left:50%;
transform:translateX(-50%);
z-index:10001;
pointer-events:auto;
}


/* GLASS FLOATING BUTTON */
.qlee-modal-close i{

width:46px;
height:46px;

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

border-radius:50%;

/* ⭐ ultra glass */
background:rgba(255,255,255,.18);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.35);

color:#111;
font-size:16px;

box-shadow:
0 12px 28px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.15) inset;

/* ⭐ floating animation */
animation:qleeFloat 3.2s ease-in-out infinite;

transition:.25s ease;
cursor:pointer;
}


/* SOFT FLOAT MOTION */
@keyframes qleeFloat{
0%{ transform:translateY(0); }
50%{ transform:translateY(-6px); }
100%{ transform:translateY(0); }
}


/* PRESS FEEDBACK */
.qlee-modal-close i:active{
transform:translateY(0) scale(.88);
box-shadow:0 6px 14px rgba(0,0,0,.25);
}

.qlee-modal-unit{
font-size:13px;
color:#666;
margin-top:4px;
}

.qlee-modal-price span{
color:#999;
text-decoration:line-through;
font-size:14px;
margin-left:6px;
}


/* =========================
BODY
=========================*/

.qlee-modal-body{
padding:14px 6px;
}

.qlee-modal-tag{
color:#dc2626;
font-weight:700;
margin-bottom:4px;
}

.qlee-modal-title{
font-size:20px;
font-weight:800;
line-height:1.3;
margin-bottom:6px;
}


/* META ROW */

.qlee-modal-meta{
display:flex;
gap:14px;
font-size:13px;
font-weight:600;
color:#16a34a;
margin-bottom:4px;
}

.qlee-seller{
font-size:14px;
font-weight:700;
margin-bottom:6px;
}

.qlee-modal-desc{
font-size:14px;
color:#6b7280;
margin-bottom:8px;
}

.qlee-modal-price{
font-size:24px;
font-weight:900;
}

.qlee-modal-price span{
text-decoration:line-through;
color:#999;
font-size:14px;
margin-left:6px;
}