/* ==========================================
   PEPPY FASHION V6
   GLOBAL RESET
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
Arial,
Helvetica,
sans-serif;

background:#f8f9fb;

color:#222;

line-height:1.6;

overflow-x:hidden;
padding-bottom:70px;

}

/* ==========================================
CONTAINER
========================================== */

.container{

width:92%;

max-width:1300px;

margin:auto;

}

/* ==========================================
LINKS
========================================== */

a{

text-decoration:none;

color:inherit;

transition:.3s;

}

a:hover{

color:#e60023;

}

/* ==========================================
IMAGES
========================================== */

img{

display:block;

max-width:100%;

height:auto;

}

/* ==========================================
BUTTON
========================================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 24px;

background:#e60023;

color:#fff;

border:none;

border-radius:8px;

cursor:pointer;

font-size:15px;

font-weight:600;

transition:.3s;

}

.btn:hover{

background:#b7001c;

transform:translateY(-2px);

}

.btn-secondary{

background:#333;

}

.btn-secondary:hover{

background:#111;

}

/* ==========================================
SECTION
========================================== */

.section{

padding:70px 0;

}

.section-title{

font-size:42px;

font-weight:700;

text-align:center;

margin-bottom:12px;

color:#222;

}

.section-subtitle{

text-align:center;

color:#777;

margin-bottom:35px;

font-size:15px;

}

/* ==========================================
HEADER
========================================== */

header{

position:sticky;

top:0;

z-index:999;

background:#fff;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.header-container{

display:flex;

align-items:center;

justify-content:space-between;

padding:14px 0;

}

.logo img{

height:58px;

}

.navbar{

display:flex;

gap:30px;

align-items:center;

}

.navbar a{

font-weight:600;

font-size:15px;

}

.navbar a.active{

color:#e60023;

}

.menu-btn{

display:none;

background:none;

border:none;

font-size:30px;

cursor:pointer;

}

/* ==========================================
   PEPPY FASHION BANNER SLIDER
========================================== */

.banner-slider{

    width:100%;

    position:relative;

    overflow:hidden;

    background:#fff;

    line-height:0;

}

.banner-slides{

    width:100%;

    position:relative;

    overflow:hidden;

}

.banner-slide{

    display:none;

    width:100%;

    position:relative;

}

.banner-slide.active{

    display:block;

}

.banner-slide img{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

}


/* ==========================================
   PREVIOUS / NEXT BUTTONS
========================================== */

.banner-prev,
.banner-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-size:24px;

    line-height:42px;

    text-align:center;

    cursor:pointer;

    z-index:10;

    transition:.3s;

}

.banner-prev{

    left:15px;

}

.banner-next{

    right:15px;

}

.banner-prev:hover,
.banner-next:hover{

    background:rgba(0,0,0,.7);

}


/* ==========================================
   SLIDER DOTS
========================================== */

.banner-dots{

    position:absolute;

    left:50%;

    bottom:14px;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    z-index:10;

}

.banner-dot{

    width:9px;

    height:9px;

    padding:0;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.65);

    cursor:pointer;

    transition:.3s;

}

.banner-dot.active{

    width:24px;

    border-radius:10px;

    background:#fff;

}


/* ==========================================
   MOBILE BANNER
========================================== */

@media(max-width:600px){

    .banner-prev,
    .banner-next{

        width:34px;

        height:34px;

        font-size:19px;

        line-height:34px;

    }

    .banner-prev{

        left:8px;

    }

    .banner-next{

        right:8px;

    }

    .banner-dots{

        bottom:8px;

        gap:6px;

    }

    .banner-dot{

        width:7px;

        height:7px;

    }

    .banner-dot.active{

        width:18px;

    }

}

/* ==========================================
HERO
========================================== */

.hero{

padding:60px 0;

background:#fff;

}

.hero-content{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

}

.hero-text h1{

font-size:52px;

font-weight:700;

margin-bottom:20px;

color:#222;

}

.hero-text p{

font-size:18px;

color:#666;

margin-bottom:30px;

}

.hero-image img{

width:100%;

border-radius:15px;

}

/* ==========================================
CATEGORY GRID
========================================== */

.category-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:35px;

}

.category-card{

background:#fff;

padding:35px 20px;

border-radius:14px;

text-align:center;

box-shadow:0 5px 18px rgba(0,0,0,.08);

transition:.3s;

}

.category-card:hover{

transform:translateY(-8px);

}

.category-card h3{

font-size:24px;

margin-bottom:18px;

}

.category-card a{

color:#e60023;

font-weight:700;

}

/* ==========================================
SEARCH
========================================== */

.search-box{

max-width:600px;

margin:0 auto 35px;

}

.search-box .form-control{

width:100%;

padding:14px 18px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

outline:none;

transition:.3s;

}

.search-box .form-control:focus{

border-color:#e60023;

box-shadow:0 0 0 3px rgba(230,0,35,.12);

}

/* ==========================================
MAIN CATEGORY
========================================== */

.main-category{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:12px;

margin-bottom:20px;

}

.category-btn{

padding:11px 22px;

background:#fff;

border:1px solid #ddd;

border-radius:40px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.category-btn:hover{

background:#e60023;

color:#fff;

border-color:#e60023;

}

.category-btn.active{

background:#e60023;

color:#fff;

border-color:#e60023;

}

/* ==========================================
SUB CATEGORY
========================================== */

.sub-category{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

margin-bottom:30px;

}

.subcategory-btn{

padding:9px 18px;

background:#fff;

border:1px solid #ddd;

border-radius:30px;

cursor:pointer;

font-size:14px;

transition:.3s;

}

.subcategory-btn:hover{

background:#222;

color:#fff;

border-color:#222;

}

.subcategory-btn.active{

background:#222;

color:#fff;

border-color:#222;

}

/* ==========================================
SHOP TOOLBAR
========================================== */

.shop-toolbar{

display:flex;

justify-content:flex-end;

margin-bottom:30px;

}

.shop-toolbar .form-group{

width:250px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.form-control{

width:100%;

padding:12px 15px;

border:1px solid #ddd;

border-radius:8px;

font-size:15px;

outline:none;

background:#fff;

}

.form-control:focus{

border-color:#e60023;

}

/* ==========================================
PRODUCT GRID
========================================== */

.product-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(280px,1fr));

gap:30px;

align-items:stretch;

}

/* ==========================================
PRODUCT CARD
========================================== */

.product-card{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.08);

transition:.35s;

display:flex;

flex-direction:column;

height:100%;

}

.product-card:hover{

transform:translateY(-8px);

box-shadow:0 12px 35px rgba(0,0,0,.14);

}

/* ==========================================
PRODUCT IMAGE
========================================== */

.product-image{

height:360px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

overflow:hidden;

border-bottom:1px solid #f2f2f2;

}

.product-image img{

width:100%;

height:100%;

object-fit:contain;

transition:.35s;

}

.product-card:hover .product-image img{

transform:scale(1.05);

}

/* ==========================================
PRODUCT INFO
========================================== */

.product-info{

padding:18px;

display:flex;

flex-direction:column;

flex:1;

gap:12px;

}

.product-info h3{

font-size:20px;

font-weight:700;

color:#222;

line-height:1.4;

}

.category{

font-size:14px;

color:#777;

}

.badge{

display:inline-block;

padding:6px 12px;

background:#e60023;

color:#fff;

border-radius:30px;

font-size:12px;

font-weight:700;

width:max-content;

}

/* ==========================================
PRICE
========================================== */

.price{

font-size:24px;

font-weight:700;

color:#e60023;

}

.price-group{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:10px;

}

.new-price{

font-size:24px;

font-weight:700;

color:#e60023;

}

.old-price{

font-size:16px;

text-decoration:line-through;

color:#999;

}

.discount{

padding:4px 10px;

background:#28a745;

color:#fff;

border-radius:20px;

font-size:12px;

font-weight:700;

}

/* ==========================================
PRODUCT BUTTONS
========================================== */

.product-buttons{

display:flex;

gap:10px;

margin-top:auto;

}

.product-buttons .btn{

flex:1;

text-align:center;

}

/* ==========================================
PRODUCT DETAILS
========================================== */

.product-details{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:flex-start;

background:#fff;

padding:35px;

border-radius:16px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.product-gallery{

background:#fff;

border-radius:14px;

padding:20px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid #eee;

}

.product-gallery img{

width:100%;

max-height:600px;

object-fit:contain;

}

.product-content h1{

font-size:36px;

margin-bottom:15px;

color:#222;

}

.product-content .price{

font-size:34px;

font-weight:700;

color:#e60023;

margin-bottom:15px;

}

.product-content .old-price{

font-size:22px;

margin-left:12px;

}

.product-description{

margin:25px 0;

line-height:1.9;

color:#555;

}

.stock{

display:inline-block;

padding:8px 16px;

border-radius:30px;

background:#28a745;

color:#fff;

font-weight:600;

margin-bottom:20px;

}

.out-stock{

background:#dc3545;

}

.size-area{

margin:25px 0;

}

.size-area h3{

margin-bottom:12px;

font-size:18px;

}

.size-buttons{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.size-btn{

padding:10px 18px;

border:1px solid #ddd;

background:#fff;

border-radius:8px;

cursor:pointer;

transition:.3s;

font-weight:600;

}

.size-btn:hover{

border-color:#e60023;

color:#e60023;

}

.size-btn.active{

background:#e60023;

border-color:#e60023;

color:#fff;

}

.product-actions{

display:flex;

gap:15px;

margin-top:30px;

}

.product-actions .btn{

flex:1;

}

/* ==========================================
CART
========================================== */

.cart-container{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

align-items:start;

}

.cart-item{

display:flex;

align-items:center;

gap:20px;

background:#fff;

padding:20px;

margin-bottom:20px;

border-radius:14px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.cart-item img{

width:120px;

height:120px;

object-fit:contain;

background:#fff;

border-radius:10px;

padding:10px;

border:1px solid #eee;

}

.cart-details{

flex:1;

}

.cart-details h3{

font-size:22px;

margin-bottom:10px;

}

.cart-details p{

margin-bottom:8px;

color:#666;

}

.quantity-box{

display:flex;

align-items:center;

gap:12px;

margin-top:15px;

}

.quantity-box button{

width:38px;

height:38px;

border:none;

background:#e60023;

color:#fff;

border-radius:8px;

font-size:20px;

cursor:pointer;

}

.quantity-box span{

min-width:35px;

text-align:center;

font-size:18px;

font-weight:700;

}

.cart-summary{

background:#fff;

padding:25px;

border-radius:14px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

position:sticky;

top:100px;

}

.summary-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:1px solid #eee;

}

.summary-row:last-child{

border-bottom:none;

font-size:22px;

font-weight:700;

}

.empty-cart{

background:#fff;

padding:50px;

text-align:center;

border-radius:14px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.empty-cart h3{

font-size:30px;

margin-bottom:20px;

}

/* ==========================================
CHECKOUT
========================================== */

.checkout-container{

max-width:900px;

margin:auto;

background:#fff;

padding:35px;

border-radius:16px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.checkout-container h2{

margin:30px 0 20px;

font-size:28px;

}

.checkout-container textarea{

min-height:120px;

resize:vertical;

}

#checkoutItems{

margin:25px 0;

}

#checkoutItems .summary-row{

padding:15px 0;

border-bottom:1px solid #eee;

}

#checkoutItems strong{

color:#e60023;

}

/* ==========================================
CONTACT
========================================== */

.contact-box{

background:#fff;

padding:35px;

border-radius:16px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

margin-bottom:30px;

}

.contact-box h2{

font-size:30px;

margin-bottom:20px;

}

.contact-box p{

margin-bottom:12px;

color:#555;

}

.contact-box form{

margin-top:20px;

}

.contact-box textarea{

min-height:150px;

resize:vertical;

}

/* ==========================================
FOOTER
========================================== */

footer{

background:#111;

color:#fff;

margin-top:80px;

padding:60px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.footer-grid h3{

margin-bottom:18px;

font-size:22px;

}

.footer-grid p{

margin-bottom:10px;

color:#ddd;

}

.footer-grid a{

color:#ddd;

transition:.3s;

}

.footer-grid a:hover{

color:#fff;

}

.footer-bottom{

margin-top:40px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.12);

text-align:center;

color:#bbb;

font-size:14px;

}

/* ==========================================
LOADING / EMPTY STATE
========================================== */

.loading-products,
.no-products,
.empty-products{

background:#fff;

padding:60px 20px;

text-align:center;

border-radius:16px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

grid-column:1/-1;

}

.loading-products{

font-size:22px;

font-weight:600;

color:#666;

}

.no-products h3,
.empty-products h2{

font-size:30px;

margin-bottom:15px;

}

.no-products p,
.empty-products p{

color:#666;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:992px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.product-details{

grid-template-columns:1fr;

}

.cart-container{

grid-template-columns:1fr;

}

.cart-summary{

position:static;

}

.product-image{

height:300px;

}

}

@media(max-width:768px){

.header-container{

flex-wrap:wrap;

}

.menu-btn{

display:block;

}

.navbar{

display:none;

width:100%;

flex-direction:column;

padding-top:20px;

gap:18px;

}

.navbar.show{

display:flex;

}

.section{

padding:50px 0;

}

.section-title{

font-size:32px;

}

.hero-text h1{

font-size:36px;

}

.product-grid{

grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

gap:20px;

}

.product-image{

height:260px;

}

.product-info h3{

font-size:18px;

}

.product-actions{

flex-direction:column;

}

.shop-toolbar{

justify-content:center;

}

.shop-toolbar .form-group{

width:100%;

}

.cart-item{

flex-direction:column;

text-align:center;

}

.quantity-box{

justify-content:center;

}

.footer-grid{

text-align:center;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.section-title{

font-size:28px;

}

.hero-text h1{

font-size:30px;

}

.product-grid{

grid-template-columns:1fr;

}

.product-image{

height:240px;

}

.category-grid{

grid-template-columns:1fr;

}

.main-category,
.sub-category{

justify-content:flex-start;

overflow-x:auto;

padding-bottom:10px;

}

.category-btn,
.subcategory-btn{

white-space:nowrap;

}

.btn{

width:100%;

}

}
/* ====================================
PWA APP SUPPORT
==================================== */

@media (display-mode: standalone) {

  header{
    position:sticky;
    top:0;
    z-index:9999;
  }

  body{
    padding-top:0;
  }

}
/* =========================================================
   PWA INSTALL APP BUTTON
   ========================================================= */

.install-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    display: none;

    border: none;
    border-radius: 30px;

    padding: 12px 20px;

    background: #6C3BD0;
    color: #ffffff;

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

    cursor: pointer;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.install-btn:active {
    transform: scale(0.96);
}


/* =========================================================
   MOBILE INSTALL BUTTON
   ========================================================= */

@media (max-width: 600px) {

    .install-btn {
        right: 15px;
        bottom: 15px;

        padding: 11px 17px;

        font-size: 13px;

        border-radius: 28px;
    }

}

/* ====================================
BOTTOM NAVIGATION
==================================== */

.bottom-nav{

position:fixed;

left:0;

bottom:0;

width:100%;

height:65px;

background:#ffffff;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:0 -2px 10px rgba(0,0,0,.12);

z-index:9999;

}

.bottom-nav a{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-decoration:none;

color:#666;

font-size:13px;

font-weight:600;

flex:1;

height:100%;

transition:.3s;

}

.bottom-nav a.active{

color:#6C3BD0;

}

.bottom-nav a:hover{

color:#6C3BD0;

}

.bottom-nav a span{

margin-top:3px;

font-size:12px;

}

@media(min-width:769px){

.bottom-nav{

display:none;

}

}

/* ==========================================
END OF FILE
========================================== */