/* 10:30 pm*/
* { box-sizing: border-box;}
html{background-color: white;}
body { font-family: sans-serif; margin: 0; padding: 0; overflow-x: hidden; background-color: white; width: 100%; scroll-behavior: smooth; display: flex; align-items: center; justify-content: center; flex-direction: column;}
a { text-decoration: none; }

header { width: 100%; height: 3.5rem; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: rgb(206, 72, 206); z-index: 2000; padding: 0 2%;}
.logo { height: max-content; width: max-content; color: white; font-size: clamp(1rem, 1.7vw, 1.7rem); margin: auto; padding: 0px;}
#logo-link{height: 100%; display: flex; justify-content: left; align-items: center;}
.logo:hover { text-decoration: underline; cursor: pointer;}
#splash-screen {
    display: none;
}

.highlight-search {
    z-index: 100;
    position: relative;
    /* Soft modern Green glow to match your theme */
    box-shadow: 
        0 0 0 4px rgb(27, 253, 27), 
        0 0 30px rgba(123, 252, 2, 0.6) !important;
    
    /* Full Horizontal Spin + Scale */
    transform: perspective(1000px) rotateY(360deg) scale(1.05);
    
    /* Transition set to 1s to match your request */
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    backface-visibility: visible; 
}
.highlight-search > * { backface-visibility: visible; }

.search-container { display: flex; align-items: center; background: white; border-radius: 20px; padding: 2px 10px; margin: 0 10px; flex-grow: 0.5; position: relative; height: 80%;}
.search-container input { border: none; outline: none; padding: 5px; width: 100%; border-radius: 20px; font-size: 0.9rem;}
.search-btn { background: none; border: none; cursor: pointer; font-size: 1.2rem; animation: move 1s linear infinite; border-radius: 5px;}

/* Clear Search Button Style */
.clear-btn { padding: 0 5px; cursor: pointer; color: #999; font-weight: bold; font-size: 0.8rem; transition: 0.2s; }
.clear-btn:hover { color: #333; }

#search-suggestions { position: absolute; top: 110%; left: 0; width: 100%; background: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: none; z-index: 3000; max-height: 250px; overflow-y: auto;}
.suggestion-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; font-size: 0.9rem;}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background-color: #f0f0f0; }
.suggestion-item img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; }

.nav-links { display: flex; align-items: center; gap: 5px; }
.nav-links h2 {
  /* --- Your Existing Styles --- */
  background-color: rgb(172, 69, 172);
  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
  margin: 0;
  cursor: pointer;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 4px 0px;
  padding-inline: clamp(0.5rem, 1vw, 1rem);
  white-space: nowrap;
  user-select: none;
  display: inline-block; /* Required for transforms to apply correctly */

  /* --- The Animation Trigger --- */
  /* Runs for 2 seconds, repeats forever */
  animation: shrinkBounce 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

/* --- The Percentage-Based Keyframes --- */
@keyframes shrinkBounce {
  0% {
    transform: scale(1);
  }
  20% {
    /* The Shrink Phase */
    transform: scale(0.85); 
  }
  40% {
    /* The Bounce Phase (Overshoot) */
    transform: scale(1.05);
  }
  60%, 100% {
    /* Return to Rest */
    transform: scale(1);
  }
}

.order-trigger { display: flex; align-items: center; justify-content: center; background-color: rgb(132, 247, 132); padding: 2px 4px; border: 2px solid #333; width: clamp(4rem, 8vw, 8rem); border-radius: 6px; cursor: pointer; font-weight: bold; font-size: clamp(0.8rem, 1.5vw, 1.5rem) }
.order-trigger:hover { background-color: #25D366; }
#cart-count { background-color: #ffeb3b; padding: 2px 6px; border-radius: 50%; }

#collection-view { padding: 0rem 1rem; width: 100%; scroll-margin-top: 80px;}
#collection-view h1.main-title { margin: 0px 0px 0px 0px; padding: 0px; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 2.5rem;}
.heading { margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 2rem;}

.collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(90%, 350px), 1fr)); gap: 20px; width: 100%; 
    margin-bottom: 3rem;}
.collection-card { background: rgb(230, 182, 230); border-radius: 12px; padding: 5px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: center;}

.collection-card h3 { margin: 5px 0 0 0; font-size: clamp(0.9rem, 1vw, 1.1rem); border-radius: 50px; background-color: rgb(243, 221, 243);}

.image-preview-box { display: grid; width: 100%; max-width: 160px; margin: 0 auto 10px auto; background: none; overflow: hidden; border-radius: 15px; gap: 0.2rem;}
.image-preview-card { border: 0.5px solid #fff; aspect-ratio: 1/1; border-radius: 15px;}
.image-preview-card img { width: 100%; height: 100%; display: block; object-fit: cover; border: 0.5px solid purple; border-radius: 15px;}

#prevBtn{display: none;}
#nextBtn{display: none;}


#product-slider { position: fixed; top: 3.5rem; padding-bottom: 10rem; left: 0; width: 100%; height: calc(100svh - 4rem); background-color: rgb(252, 241, 252); z-index: 1000; transform: translateX(-100%); transition: 0.4s ease-in-out; box-shadow: 5px 0 25px rgba(0,0,0,0.2); overflow-y: auto; border: 2px solid black;}
#product-slider.active { transform: translateX(0); height: 100svh;}
.slider-header { position: sticky; top: 0; background: rgb(197, 94, 197); padding: 15px 5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd; z-index: 10; }
#slider-title{margin: 0; color: white;}
.back-btn { border: 1px solid white; background: none; color: white; padding: 8px 15px; border-radius: 5px; cursor: pointer; }
#pslidandp{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    position: relative;
    display: flex;
    height: auto; /* Adjust based on your header */
}
#pgroupslider {
    /* Layout & Positioning */
    width: clamp(75px, 15vw, 100px); /* Responsive width: mobile friendly but caps on desktop */
    height: 80svh;   /* Takes full height minus header space */
    position: sticky;
    top: 85px;                      /* Matches your header height */
    left: 0;
    z-index: 5;

    /* Flexbox for Items */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-top: 2px solid purple;
    border-bottom: 2px solid purple;
    border-left: none;
    border-right: none;
    border-radius: 0px 30px 0px 0px;                   /* Spacing between subcat items */

    /* Aesthetics */
    background: plum;
    border-right: 1px solid #eee;
    padding: 15px 5px;
    
    /* Scroll Behavior */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome/Safari if preferred, or keep for visual feedback */
#pgroupslider::-webkit-scrollbar { width: 6px; height: 1rem;}
#pgroupslider::-webkit-scrollbar-thumb { background: green; border-radius: 10px; }

.subcat-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5px;
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid black;
    border-radius: 10px;
    transition: background-color 0.2s ease;
    
    /* --- Add these lines --- */
    min-width: 118%;           /* Forces the item to span the full sidebar width */
    box-sizing: border-box; /* Ensures padding doesn't push the item past 100% */
    flex-shrink: 0;        /* Prevents the items from squishing if the container is small */
}
/* This replaces .subcat-nav-item:active */
.subcat-active-highlight {
    background-color: rgb(112, 238, 112) !important;
    transition: background-color 0.1s ease;
}
.download{
    text-decoration: underline;
}

.subcat-nav-item img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 5px;
    border: 2px solid transparent;
    object-fit: cover;
}

.subcat-nav-item span {
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scroll-behavior: smooth;
    scroll-padding-top: 1px;
    
}

.subcat-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
}


#product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(0.5rem, 2vw, 2rem); padding: 15px; align-items: center;}
.empty-msg { grid-column: 1/-1; padding: 50px; text-align: center; }
.card { background: white; border: 1px solid #eee; padding: 10px; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; margin: auto; height: max-content; transition: 0.3s; transform: perspective(1000px) rotateY(0deg);}
.card[id^="sub-"] {
    scroll-margin-top: 200px; /* Adjust: 85px (header height) + 10px (desired padding) */
}
.card h4 { margin: 5px 0; font-size: 1.1rem; }
.card .price-tag { margin: 5px 0; font-size: 1.1rem; font-weight: bold; }
.card:hover { box-shadow: -5px 0 25px rgba(0,0,0,0.5);}
.img-container { width: 100%; height: clamp(7rem, 17vw, 17rem); border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: #f0f0f0; }
.iimg { width: 100%; height: 100%; object-fit: cover; display: block; }

.variant-selector { display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; gap: 5px; margin: 10px 0; height: clamp(5rem, 8vw, 8rem); margin: 0px; padding: 0px; border-top: 1px solid purple; border-bottom: 1px solid purple; }
.variant-btn { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; font-size: 1.1rem; border: 1px solid #ccc; background-color: none; border-radius: 20px; cursor: pointer; min-width: 100px;}
.variant-btn.active { background: rgb(12, 155, 12); color: white; border-color: #333; }
.variant-btn span { font-size: 1rem; background: none;}
.unit-text { opacity: 0.8; font-weight: normal;}

.controls { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 40px; }
.controls button { padding: 5px 10px; cursor: pointer; border: 1px solid #333; background: rgb(7, 207, 57); border-radius: 4px; font-weight: bold; font-size: 1.2rem; }
.controls button:hover { background: green; color: white; }
.add-btn{color:white;}
.qty-btn { color:black; background: #ffeb3b !important; border: none !important; }
.qty-controls span { margin: 0 8px; font-weight: bold; }

#orderSidebar { position: fixed; bottom: 0rem; right: 0; width: 400px; max-width: 100%; height: 100svh; background: white; box-shadow: -5px 0 25px rgba(0,0,0,0.15); transition: 0.4s ease-in-out; transform: translateX(100%); z-index: 1000; padding: 20px; padding-top: 4rem; overflow-y: auto; font-size: 1.2rem;}
#orderSidebar.active { transform: translateX(0); }
.order-item-detail { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #eee; padding: 12px 0;}
.order-item-detail img { width: 45px; height: 45px; object-fit: cover; border-radius: 4px; }
.sidebar-controls { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
#sidebar-footer h3{font-size: 1.3rem;} 
.side-qty-btn { background: #ffeb3b; border: 1px solid #333; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-weight: bold; }

.address-section { margin-top: 15px; background: #f4f4f4; padding: 12px; border-radius: 8px; }
.address-section input, .address-section textarea { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;}
.loc-btn { background: #007bff; font-size: 1.1rem; color: white; border: none; padding: 10px; width: 100%; border-radius: 4px; margin-top: 10px; cursor: pointer; }
#location-display { font-size: 1rem; color: #666; display: block; margin-top: 5px; }

.checkout-btn { width: 100%; padding: 15px; background: #25D366; color:white; border: none; border-radius: 6px; cursor: pointer; font-size: 1.3rem; font-weight: bold; margin-top: 15px; display: flex; align-items: center; justify-content: center;}
.lock-icon { margin-right: 5px; }
.close-btn { background: rgb(216, 213, 213); border: 1px solid black; font-size: clamp(1.5rem, 2vw, 2rem); cursor: pointer; float: right; border-radius: 5px; padding: 0.5rem 1rem;}

.cart-popup { border: 1px solid purple; background-color: rgb(12, 199, 12); position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 320px; padding: 10px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; z-index: 1500; cursor: pointer; }
.cart-popup p{color: white; font-weight: bolder; padding: 0px; margin: 0px;}
.popup-images { display: flex; gap: 4px; margin-bottom: 6px;}
#popup-images-container{background-color: none;}
.cart-popup img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 0.5px solid purple;}
#popup-count{margin:0; font-size: 1.1rem;}

.hidden { display: none !important; }
h6 { font-size: 1.3rem; margin: 0px; padding: 0px; text-align: center;}

.about { height: auto; width: 100%; border-radius: 25px; scroll-margin-top: 80px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.abox { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); place-items: center; }
.atext { justify-self: center; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: clamp(1rem, 5vw, 5rem); width: 90%; background-color: rgb(236, 174, 236); border-radius: 50px;}
.atext h1 { padding-bottom: 0px; margin-bottom: 0px; }
.atext p { font-size: 1.2rem; 
    line-height: 1.2;        /* 1.2 is too tight; 1.5 gives the breathability you mentioned */
    text-align: justify; 
    hyphens: auto;           /* This fixes the irregular spacing by splitting long words */
    text-wrap: pretty; 
    color: #333;
    
    /* Optional: Improves how the browser handles word spacing */
    word-break: break-word;}
.contact-btn { background-color: rgb(206, 72, 206); height: 3rem; width: clamp(8rem, 10vw, 10rem); border-radius: 25px; color: white; font-size: clamp(1rem, 2vw, 2rem); animation: move 1s linear infinite; cursor: pointer; border: none;}
.contact-btn:hover { background-color: purple;}

@keyframes move { 0%{ transform: translateY(-5px); } 50%{ transform: translateY(0px); } 100%{ transform: translateY(-5px); } }

.aimg { display: flex; justify-content: center; align-items: center; width: 100%; height: clamp(20rem, 60vw, 60rem);}
.aimg img { height: 100%; width: 90%; padding: 20px 0px; object-fit: contain;}

.cbox { width: 100%; overflow: hidden; border: 1px solid purple; border-radius: 25px; padding: 40px 20px;}
.cwrap { flex-wrap:nowrap; width: 100%; display: flex; justify-content: space-evenly; align-items: center; flex-direction: row; gap: 20px;}
.cimg { height: clamp(5rem, 20vw, 18rem); width: clamp(5rem, 22vw, 20rem); border: 1px solid purple; border-radius: 10px; box-shadow: 0 6px 15px rgba(17, 1, 9, 0.5); object-fit: contain;}
.ctext { text-align: center; border: 1px solid purple; padding: 0px 0px; width: 90%; font-size: clamp(0.7rem, 1.5vw, 1.5rem); display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 6px 15px rgba(17, 1, 9, 0.5); border-radius: 25px; background-color: white; height: clamp(10rem, 20vw, 20rem); line-height: clamp(0.1rem, 0.1vw, 0.1rem); width: clamp(10rem, 20vw, 20rem);}
.ctext h3{margin: 0px; padding: 0px; line-height: clamp(1.2rem, 2.5vw, 2.5rem);}
.acc img { height: 25px; width: 25px; border-radius: 5px; animation: ro 5s ease infinite;}
.acc { width: 100%; display: flex; justify-content: space-evenly; align-items: center; margin-top: 10px;}
@keyframes ro{
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

@media (max-width: 768px) {
    .collection-grid { display: grid; 
  /* This forces exactly 3 columns on all screen sizes */
  grid-template-columns: repeat(3, 1fr); 
  gap: 5px; /* Adjusted gap to ensure they fit on mobile */
  width: 100%;
}
    #product-grid { grid-template-columns: 1fr 1fr; }
    .atext { order: 1;}
    .logo { font-size: clamp(1rem, 3vw, 1.2rem); line-height: 1.1; }
    .search-container { flex-grow: 0.7; margin: 0 5px; }/* Splash Screen Styling */
    @keyframes cinematicFade {
    0% { opacity: 1; visibility: visible; }
    83% { opacity: 1; visibility: visible; } /* Stay visible for ~5s (83% of 6s) */
    100% { opacity: 0; visibility: hidden; pointer-events: none; } /* Fade and disable */
}

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: cinematicFade 4.5s forwards; 
    z-index: 90000;
}

    #intro-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 90000;
    }

    .fade-out {
        opacity: 0;
        visibility: hidden;
    }

    body.no-scroll {
        overflow: hidden;
    }
}
.top-bar {
    display: flex;
    justify-content: start; /* This pushes items to the ends */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 0rem 0.5rem 0rem 0.5rem;
}

/* Online Status Styles */
.online-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: auto;
    
}

.dot-container {
    position: relative;
    width: 10px;
    height: 10px;
    margin-right: 12px;
}

.dot, .pulse {
    width: 10px;
    height: 10px;
    background-color: #22c55e;
    border-radius: 50%;
    position: absolute;
}

.pulse {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3); opacity: 0; }
}

.status-text {
    color: #475569;
    font-size: clamp(0.8rem, 1vw, 1rem);
    font-weight: bold; /*Starus ki words*/
}

#online-count {
    color: #16a34a;
    font-size: clamp(0.9rem, 1.2vw, 1.2rem); /*Count ki setting*/
}
.stats-container {
            display: flex;
            justify-content: center;
            gap: 0px;
            opacity: 0;
            text-align: center;
            width: 100%;
            margin: 0rem 0rem;
            padding: 2rem 0rem;
            margin-bottom: 3rem;
            animation: scroll linear forwards;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }
        @keyframes scroll{
            from{
                opacity: 0;
            }
            to{
                opacity: 1;
            }
        }

        .stat-group {
            display: flex;
            flex-direction: column;
            width: 30%;
        }
        .stat-group:nth-child(2) {
            border-right: 1px solid black;
            border-left: 1px solid black;
        }

        .counter {
            font-size: clamp(2rem, 3vw, 3rem);
            color: #fc03d2;
            font-weight: bold;
        }
        

        .label {
            font-size: clamp(1rem, 2vw, 2rem);
            color: #00050c;
            font-weight: 500;
        }

/* Top Bar Layout */
.top-bar {
    display: flex;
    justify-content: space-between; /* Pushes status to left, button to right */
    align-items: center;
    padding: 5px 10px;
    transition: background 0.3s ease;
}
.faq-card {
    background: var(--card-bg);
    width: 100%;
    max-width: 700px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.faq-card h2 {
    text-align: center;
    color: var(--text-dark);
    font-size: 2rem;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

.faq-item {
    border-bottom: 1px solid #160b16;
}

.faq-item:last-child {
    border-bottom: 1px solid black;
}
.faq-question div{
    color: purple;
    margin: 0px;
    padding: 0px;
}
.faq-question {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--accent-color);
}
.faq-question span {width: 80%;}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0, 1, 0, 1);
    color: var(--text-light);
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    transition: all 0.3s cubic-bezier(1, 0, 1, 0);
    padding: 0px;
}

.icon {
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
}
/* Ensures the heading breaks the grid flow and takes a full row */
.grid-section-heading {
    grid-column: 1 / -1; /* Spans from the first column to the last */
    width: 100%;
    margin: 30px 0 15px 0;
    font-size: 1.5rem;
    padding-left: 10px;
    border-left: 4px solid #007bff; /* Optional accent */
}

/* Ensure the grid doesn't try to align the heading like a card */
#collectionGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Modern Plus-to-Minus Icon */
.icon::before, .icon::after {
    content: '';
    position: absolute;
    /* CHANGE THIS: from var(--accent-color) to purple */
    background: green; 
    transition: transform 0.3s ease;
}

/* Horizontal line */
.icon::before {
    width: 100%; 
    height: 2px; 
    top: 50%; 
    transform: translateY(-50%);
}

/* Vertical line */
.icon::after {
    width: 2px; 
    height: 100%; 
    left: 50%; 
    transform: translateX(-50%);}
.faq-item {
    width: 100%;
}

.faq-item.active .icon {
    transform: rotate(180deg);
    color: purple;
}
.faq-item.active .icon::after {
    transform: scaleY(0);
    color: purple;/* Hides vertical line to make it a minus */
}

/* Theme Button Styling */
/* Container for the switch */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px;
}

.theme-switch input {
    display: none; /* Hide default checkbox */
}
/* 1. The Container: Hides the horizontal scrollbar */
        /* 1. The Container: Enable scrolling but hide scrollbar */
.rbox {
    overflow-x: auto; /* Changed from hidden to auto */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: smooth;
    width: 100%;
    cursor: grab; /* Visual cue that it can be dragged */

    scroll-snap-type: x mandatory;
}

.rbox:active {
    cursor: grabbing;
}

.rbox::-webkit-scrollbar { 
    display: none; 
} /* Chrome/Safari */

    .rwrap {
    display: flex;
    gap: 30px;
    width: max-content;
    padding: 20px 30px;
    pointer-events: auto;
    
    padding-top: 1rem; /* Ensures interaction is captured */
}

/* Pause the slider when the user hovers or touches it */


        .rcard {
            flex: 0 0 320px;
            padding: 25px 15px;
            border-radius: 24px;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            flex-direction: column;
            border: 1px solid green;
            transition: transform 0.3s ease;
            scroll-snap-align: center;/* Optional: helps with flick-scrolling */
            scroll-snap-stop: always;
        }

        

        .rcard img {
            height: 7rem;
            width: 7rem;
            border-radius: 25px;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .rcard h1 { font-size: 1.1rem; color: var(--primary-color); margin: 5px 0; }

        /* Stars Container */
        .stars-container { 
            color: #FFD700; 
            margin-bottom: 15px; 
            text-align: center;
        }
        
        /* The <p> inside the stars section */
        .stars-container p {
            margin: 0;
            font-size: 1rem;
            color: #777;
            font-weight: 400;
        }

        .review-text { text-align: center; font-size: 0.9rem; line-height: 1.6; color: black; margin-bottom: 20px; flex-grow: 1; }
        .from-text { font-size: 0.8rem; color: green; font-weight: 600; margin: 0; }
        .time-ago { font-size: 0.75rem; color: #a976fc; margin-top: 5px; font-weight: 400; font-weight: bold; }

.footerf{
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.testi{height: 5rem;
        padding-top: 3rem;}
.footerf h1{font-size: 0.5rem;}
.mwli{
    height: 1rem;
    width: 1rem;
    margin: 0.5rem;
    border-radius: 50px;
}
/* The track - Default (Light Mode / Left) */
.ourservice{width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.ourss h1{width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 40px 0px 5px 0px;}
.mainp{
    font-size: 1.2rem; 
    line-height: 1.2;        /* 1.2 is too tight; 1.5 gives the breathability you mentioned */
    text-align: center; 
    hyphens: auto;           /* This fixes the irregular spacing by splitting long words */
    text-wrap: pretty; 
    color: #333;
    padding: 0px 25px;
    
    /* Optional: Improves how the browser handles word spacing */
    word-break: break-word;
}
.scmain{display: flex; align-items: center; justify-content: center; flex-direction: column;}

.slider {
    background-color: #FFD700; /* Bright Yellow */
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
    
    border: 1px solid black; /* Optional: slightly darker yellow border */
}
.slider-container {
position: relative;
    width: 90%; 
    max-width: 800px; /* Optional: prevents the slider from being too giant on large monitors */
    aspect-ratio: 4 / 3; /* Keeps a consistent shape */
    margin: 0px auto 5px auto; /* Added 20px top/bottom margin for spacing */
    overflow: hidden;
    border-radius: 15px;
    background: #222;
    /* Added to ensure buttons and wrapper align correctly */
    display: flex;
    align-items: center;
}
.ss{
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.sss{
    position: relative;
    width: 90%; 
    max-width: 800px; /* Optional: prevents the slider from being too giant on large monitors */
    aspect-ratio: 4 / 3; /* Keeps a consistent shape */
    margin: 0px auto 5px auto; /* Added 20px top/bottom margin for spacing */
    overflow: hidden;
    border-radius: 15px;
    background: #222;
    /* Added to ensure buttons and wrapper align correctly */
    display: flex;
    align-items: center;
}
/* Ensure the link doesn't block the layout of the slider */
.sss > a {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}
pwa-install {
    display: block !important;
    visibility: visible !important;
    background: white; /* Make it contrast against your site */
    padding: 20px;
}

/* Ensure the wrapper fills the link container */
.ssw {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.ssw img{
            flex: 0 0 100%; /* Each image takes exactly 100% of the container width */
            width: 100%;    /* Ensures image stretches to the flex basis */
            height: 100%;   /* Fills the 4:3 height */
            object-fit: cover;/* Fills the 4:3 area perfectly */
}
.ssw:active {
            cursor: grabbing;
        }

        .slider-wrapper {
            display: flex;
            width: 100%;
            height: 100%; /* Inherits the 4:3 shape from the container */
            
            /* Interactive States */
            cursor: grab;
            user-select: none; /* Prevents text/image highlighting while dragging */
            
            /* Smooth movement */
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Important: Ensures images don't wrap to the next line */
            flex-direction: row;
            will-change: transform;
        }

        .slider-wrapper:active {
            cursor: grabbing;
        }

        .slider-wrapper img {
            flex: 0 0 100%; /* Each image takes exactly 100% of the container width */
            width: 100%;    /* Ensures image stretches to the flex basis */
            height: 100%;   /* Fills the 4:3 height */
            object-fit: cover;/* Fills the 4:3 area perfectly */
        }

        /* Navigation Buttons */
        

/* The sliding knob */
.slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 18px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 18px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background-image: url('sun.jpg'); /* Sun Icon */
    background-size: 100%; /* Adjust size of icon inside circle */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

/* When checked (Dark Mode / Right) */
input:checked + .slider {
    background-color: #C0C0C0; /* Silver */
    border: 1px solid #a9a9a9; /* Optional: slightly darker silver border */
}

/* Movement of the knob */
input:checked + .slider:before {
    transform: translateX(24px);
    background-image: url('moon.png'); /* Sun Icon */
    background-size: 100%; /* Adjust size of icon inside circle */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Keeping the knob off-white for contrast */
}
/* Center the container and align dots horizontally */
.dota-container {
    display: flex;            /* Key: Aligns children in a row */
    justify-content: center;   /* Centers them on the screen */
    align-items: center;
    gap: 10px;                /* Space between the 7 dots */
    padding: 5px 0;
    width: 100%;
}

/* Base style for all 7 dots */
.dota {
    width: 10px;
    height: 10px;
    background-color: #bbb;   /* Inactive gray */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;    /* Backup for older browsers */
}

/* The "Red Bot" - Active State */
.dota.active {
    background-color: #2c96f8 !important; /* Bright Red */
    transform: scale(1.3);                /* Slightly larger */
    box-shadow: 0 0 8px rgba(248, 124, 242, 0.4); 
}
body.dark-mode .dota {
    background-color: #bbb; 
}

/* --- Dark Mode Theme for the rest of the page --- */
body.dark-mode * {
    background: black;
    background-color: #000;
    color: #fff;
}
body.dark-mode  {
    background: black;
    background-color: #000;
    color: #fff;
}
body.dark-mode button {
    background: black;
    background-color: #000;
    border: 1px solid white;
}
body.dark-mode .image-preview-box {background:grey;}
body.dark-mode .collection-card { background: grey;}
/* Making sure your product slider follows the dark theme */
body.dark-mode .product-slider {
    background-color: #000 !important;
    border: 1px solid #333;
}
body.dark-mode span {
    background: none;
}
body.dark-mode .dot{
    background-color: green;
}
body.dark-mode .stat-group:nth-child(2) {
            border-right: 1px solid grey;
            border-left: 1px solid grey;
        }
/* Theme Popup Styles */
.theme-popup {
    position: fixed;
    top: 90px;
    right: 10px; /* Adjust based on your theme button position */
    background: var(--accent-color, #ff4757);
    color: white;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.5rem;
    font-weight: bold;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.theme-popup.show {
    opacity: 1;
    transform: translateY(0);
}
.lightbox {
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
}
.hidden { display: none !important; }
.lightbox-content {
    background: white; padding: 20px; border-radius: 8px;
    max-width: 500px; width: 90%; position: relative;
    text-align: center;
}
.slider-img { width: 100%; height: auto; border-radius: 5px; object-fit: cover;}
.close-lightbox { 
    position: absolute; right: 15px; top: 10px; 
    font-size: 30px; cursor: pointer; 
}
#lightbox-title {
    margin-top: 0;
    font-size: 1.5rem;
    color: #333;
}

.lightbox-controls {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

#lightbox-add-btn {
    background-color: #27ae60; /* Or your theme color */
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

#lightbox-add-btn:hover {
    background-color: #219150;
}
.slider-container { display: flex; align-items: center; justify-content: space-between; }


body.dark-mode .slider-container { background-color: white; }

body.dark-mode #lightbox-title {color: white}
body.dark-mode .lightbox-content {border: 1px solid white;}
body.dark-mode #orderSidebar { background: black;}
body.dark-mode .checkout-btn { background: #25D366;}
body.dark-mode .loc-btn { background: rgb(127, 127, 235);}
body.dark-mode .search-btn { background: none; border: none;}
body.dark-mode .cart-popup { background-color: rgb(12, 199, 12);}
body.dark-mode .cart-popup p{background:none; font-weight: bolder; padding: 0px; margin: 0px;}
body.dark-mode .order-trigger { background-color: rgb(12, 199, 12);}
body.dark-mode #cart-count { color: black;}
body.dark-mode .faq-question {border: none;}
body.dark-mode .faq-item {border-bottom: 1px solid white;}
body.dark-mode .logo{color: rgb(206, 72, 206);}
body.dark-mode .from-text { font-size: 0.8rem; color: green; font-weight: 600; margin: 0; }
body.dark-mode .time-ago { font-size: 0.75rem; color: #a976fc; margin-top: 5px; font-weight: 400; font-weight: bold; }
body.dark-mode .stars-container { color: #FFD700; margin-bottom: 15px; text-align: center;}
body.dark-mode #popup-images-container{background-color: none; background: none;}
body.dark-mode .scmain{background-color: black;}
body.dark-mode #product-grid {background-color: rgb(44, 44, 44);}
body.dark-mode .add-btn {background-color: green;}
body.dark-mode #pgroupslider {background-color: grey;}
body.dark-mode #product-slider.active {background-color: grey;}
body.dark-mode html{background-color: black;}
body.dark-mode .qty-btn { color:black;}