/* =========================================================
   BHOLA COLD DRINKS — CUSTOMER STORE
   PREMIUM E-COMMERCE UI
========================================================= */

:root{

    --orange:#ff6b1a;
    --orange-dark:#e95005;
    --orange-light:#fff0e7;

    --cream:#fffaf5;
    --cream-2:#fff6ee;

    --white:#ffffff;

    --ink:#171717;
    --muted:#737373;

    --border:#ece7e2;

    --green:#168548;
    --green-light:#eaf8ef;

    --red:#e54848;

    --shadow:0 18px 60px rgba(30,20,10,.08);

    --radius:24px;

    --container:1240px;

}


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


html{
    scroll-behavior:smooth;
}


body{

    font-family:"DM Sans",sans-serif;

    color:var(--ink);

    background:var(--cream);

    overflow-x:hidden;

}


body.no-scroll{
    overflow:hidden;
}


button,
input,
textarea,
select{
    font:inherit;
}


button{
    border:0;
    cursor:pointer;
}


a{
    color:inherit;
    text-decoration:none;
}


img{
    max-width:100%;
    display:block;
}


.section-container{
    width:min(var(--container),calc(100% - 40px));
    margin:auto;
}


/* =========================================================
   LOADER
========================================================= */

.site-loader{

    position:fixed;
    inset:0;

    z-index:9999;

    background:#fffaf5;

    display:flex;
    flex-direction:column;

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

    transition:.6s ease;

}


.site-loader.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}


.loader-logo{

    width:76px;
    height:76px;

    border-radius:24px;

    background:var(--orange-light);

    display:grid;
    place-items:center;

    font-size:36px;

    margin-bottom:20px;

    animation:loaderFloat 1.5s ease-in-out infinite;

}


.site-loader strong{

    font-family:"Manrope",sans-serif;

    font-size:24px;

}


.site-loader small{

    color:var(--muted);

    margin-top:5px;

}


.loader-line{

    width:160px;
    height:4px;

    border-radius:100px;

    background:#eee5dd;

    overflow:hidden;

    margin-top:26px;

}


.loader-line span{

    display:block;

    width:50%;

    height:100%;

    background:var(--orange);

    border-radius:100px;

    animation:loaderLine 1.2s ease-in-out infinite;

}


@keyframes loaderFloat{

    50%{
        transform:translateY(-8px) rotate(2deg);
    }

}


@keyframes loaderLine{

    0%{
        transform:translateX(-100%);
    }

    100%{
        transform:translateX(220%);
    }

}


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

.store-header{

    position:sticky;

    top:0;

    z-index:1000;

    height:76px;

    background:rgba(255,250,245,.88);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.3s ease;

}


.store-header.scrolled{

    box-shadow:0 8px 30px rgba(0,0,0,.07);

}


.header-inner{

    width:min(var(--container),calc(100% - 40px));

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}


.brand{

    display:flex;

    align-items:center;

    gap:11px;

}


.brand-icon{

    width:43px;
    height:43px;

    border-radius:14px;

    background:var(--orange);

    display:grid;
    place-items:center;

    font-size:22px;

    box-shadow:0 8px 20px rgba(255,107,26,.25);

}


.brand-copy{

    display:flex;
    flex-direction:column;

    line-height:1.05;

}


.brand-copy strong{

    font-family:"Manrope",sans-serif;

    font-size:17px;

    font-weight:800;

}


.brand-copy small{

    color:var(--muted);

    font-size:10px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-top:4px;

}


.main-nav{

    display:flex;

    align-items:center;

    gap:30px;

}


.main-nav a{

    position:relative;

    font-size:14px;

    color:#555;

    font-weight:600;

    padding:28px 0;

    transition:.25s ease;

}


.main-nav a:hover,
.main-nav a.active{

    color:var(--orange);

}


.main-nav a::after{

    content:"";

    position:absolute;

    bottom:17px;

    left:0;

    width:0;

    height:2px;

    border-radius:10px;

    background:var(--orange);

    transition:.3s ease;

}


.main-nav a:hover::after,
.main-nav a.active::after{

    width:100%;

}


.header-actions{

    display:flex;

    align-items:center;

    gap:9px;

}


.header-search-btn,
.account-btn,
.cart-btn,
.mobile-menu-btn{

    height:42px;

    border-radius:13px;

    background:#fff;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s ease;

}


.header-search-btn{

    width:42px;

}


.account-btn{

    padding:0 14px;

    gap:8px;

    color:#444;

    font-size:13px;

    font-weight:700;

}


.cart-btn{

    width:46px;

    position:relative;

    color:var(--ink);

}


.header-search-btn:hover,
.account-btn:hover,
.cart-btn:hover{

    border-color:var(--orange);

    color:var(--orange);

    transform:translateY(-2px);

}


.cart-count{

    position:absolute;

    right:-5px;

    top:-7px;

    min-width:20px;

    height:20px;

    padding:0 5px;

    border-radius:100px;

    background:var(--orange);

    color:#fff;

    font-size:10px;

    display:grid;
    place-items:center;

    border:2px solid var(--cream);

}


.mobile-menu-btn{
    display:none;
    width:42px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:min(360px,90%);

    height:100vh;

    background:#fff;

    z-index:3000;

    padding:25px;

    display:flex;
    flex-direction:column;

    gap:7px;

    box-shadow:-20px 0 60px rgba(0,0,0,.12);

    transition:.4s cubic-bezier(.22,1,.36,1);

}


.mobile-menu.open{
    right:0;
}


.mobile-menu-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


.mobile-menu-head strong{

    font-family:"Manrope",sans-serif;

    font-size:18px;

}


.mobile-menu-head button{

    width:40px;
    height:40px;

    border-radius:12px;

    background:#f6f4f2;

}


.mobile-menu a,
.mobile-login{

    padding:15px;

    border-radius:13px;

    text-align:left;

    color:#444;

    background:transparent;

    font-weight:600;

}


.mobile-menu a:hover,
.mobile-login:hover{

    background:var(--orange-light);

    color:var(--orange);

}


.mobile-login{

    margin-top:10px;

}


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

.search-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,12,10,.62);

    backdrop-filter:blur(8px);

    z-index:4000;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}


.search-overlay.open{

    opacity:1;

    visibility:visible;

}


.search-box{

    width:min(700px,calc(100% - 30px));

    background:#fff;

    border-radius:24px;

    margin:100px auto 0;

    padding:30px;

    transform:translateY(-20px);

    transition:.4s ease;

}


.search-overlay.open .search-box{

    transform:translateY(0);

}


.search-box > span{

    display:block;

    color:var(--muted);

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-weight:800;

    margin-bottom:13px;

}


.close-search{

    float:right;

    width:38px;
    height:38px;

    border-radius:11px;

    background:#f6f3f0;

}


.search-input-wrap{

    height:58px;

    border:1px solid var(--border);

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

}


.search-input-wrap i{

    color:var(--orange);

}


.search-input-wrap input{

    width:100%;

    border:0;
    outline:0;

    font-size:16px;

}


.search-results{

    max-height:420px;

    overflow:auto;

    margin-top:15px;

}


.search-result{

    display:flex;

    align-items:center;

    gap:13px;

    padding:11px;

    border-radius:13px;

    transition:.2s ease;

}


.search-result:hover{

    background:#faf7f4;

}


.search-result img{

    width:48px;
    height:48px;

    object-fit:contain;

    background:#faf8f5;

    border-radius:10px;

}


.search-result strong{

    display:block;

    font-size:13px;

}


.search-result span{

    font-size:12px;

    color:var(--orange);

    font-weight:700;

}


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

.hero-section{

    position:relative;

    min-height:690px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 75% 30%,
            rgba(255,107,26,.16),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #fffaf5 0%,
            #fff5eb 100%
        );

}


.hero-container{

    width:min(var(--container),calc(100% - 40px));

    min-height:690px;

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:30px;

}


.hero-bg-orb{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}


.orb-one{

    width:350px;
    height:350px;

    background:rgba(255,107,26,.07);

    top:-180px;
    left:-130px;

}


.orb-two{

    width:500px;
    height:500px;

    border:1px solid rgba(255,107,26,.12);

    right:-220px;
    bottom:-260px;

}


.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 12px;

    background:#fff;

    border:1px solid #f0e5dc;

    border-radius:100px;

    color:#665e57;

    font-size:12px;

    font-weight:700;

    box-shadow:0 7px 25px rgba(30,20,10,.05);

}


.hero-badge span{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#29a65b;

    box-shadow:0 0 0 5px #e8f7ed;

}


.hero-content h1{

    font-family:"Manrope",sans-serif;

    font-size:clamp(46px,6vw,78px);

    line-height:.99;

    letter-spacing:-3px;

    max-width:690px;

    margin:22px 0;

}


.hero-content h1 em{

    color:var(--orange);

    font-style:normal;

}


.hero-content p{

    color:#68615c;

    font-size:17px;

    line-height:1.75;

    max-width:560px;

}


.hero-buttons{

    display:flex;

    gap:12px;

    margin-top:30px;

}


.primary-btn,
.secondary-btn{

    min-height:50px;

    padding:0 21px;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:14px;

    font-weight:800;

    transition:.3s ease;

}


.primary-btn{

    background:var(--orange);

    color:#fff;

    box-shadow:0 13px 30px rgba(255,107,26,.23);

}


.primary-btn:hover{

    background:var(--orange-dark);

    transform:translateY(-3px);

    box-shadow:0 17px 35px rgba(255,107,26,.3);

}


.secondary-btn{

    background:#fff;

    border:1px solid var(--border);

}


.secondary-btn:hover{

    border-color:var(--orange);

    color:var(--orange);

    transform:translateY(-3px);

}


.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:34px;

}


.hero-trust div{

    display:flex;

    align-items:center;

    gap:7px;

    color:#777;

    font-size:12px;

}


.hero-trust i{

    color:var(--green);

}


.hero-visual{

    min-height:570px;

    position:relative;

    display:grid;

    place-items:center;

}


.hero-ring{

    width:470px;
    height:470px;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 50% 45%,
            #fff 0,
            #fff7ef 48%,
            #ffe9d8 100%
        );

    box-shadow:

        0 40px 100px rgba(255,107,26,.14),

        inset 0 0 0 1px rgba(255,107,26,.08);

    position:absolute;

    animation:heroPulse 5s ease-in-out infinite;

}


.hero-bottle{

    position:relative;

    width:390px;
    height:470px;

    display:grid;
    place-items:center;

    z-index:2;

    animation:bottleFloat 5s ease-in-out infinite;

}


.hero-bottle img{

    width:300px;
    height:390px;

    object-fit:contain;

    mix-blend-mode:multiply;

    filter:drop-shadow(0 35px 30px rgba(0,0,0,.16));

}


.hero-bottle-glow{

    position:absolute;

    width:230px;
    height:230px;

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

    filter:blur(30px);

    border-radius:50%;

    z-index:-1;

}


.floating-card{

    position:absolute;

    z-index:4;

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

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

    box-shadow:0 20px 45px rgba(40,25,10,.1);

    backdrop-filter:blur(15px);

    border-radius:18px;

}


.float-card-one{

    left:0;
    top:150px;

    padding:13px;

    display:flex;
    align-items:center;

    gap:10px;

    animation:cardFloat 4s ease-in-out infinite;

}


.float-card-one i{

    width:38px;
    height:38px;

    border-radius:12px;

    background:#fff0e6;

    color:var(--orange);

    display:grid;
    place-items:center;

}


.float-card-one span{

    font-size:11px;

    font-weight:800;

}


.float-card-two{

    right:15px;
    bottom:130px;

    padding:14px 18px;

    display:flex;
    flex-direction:column;

    animation:cardFloat 4s ease-in-out infinite 1s;

}


.float-card-two strong{

    font-family:"Manrope",sans-serif;

    font-size:22px;

    color:var(--orange);

}


.float-card-two span{

    font-size:10px;
    color:#777;

}


@keyframes bottleFloat{

    50%{
        transform:translateY(-13px) rotate(1deg);
    }

}


@keyframes heroPulse{

    50%{
        transform:scale(1.03);
    }

}


@keyframes cardFloat{

    50%{
        transform:translateY(-10px);
    }

}


/* =========================================================
   SERVICE
========================================================= */

.service-strip{

    background:#fff;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}


.service-container{

    width:min(var(--container),calc(100% - 40px));

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

}


.service-item{

    min-height:100px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:20px;

    border-right:1px solid var(--border);

}


.service-item:first-child{
    padding-left:0;
}


.service-item:last-child{
    border:0;
}


.service-item > i{

    width:43px;
    height:43px;

    border-radius:13px;

    background:#fff1e8;

    color:var(--orange);

    display:grid;
    place-items:center;

}


.service-item strong{

    display:block;

    font-size:13px;

}


.service-item span{

    display:block;

    color:#8a8581;

    font-size:11px;

    margin-top:3px;

}


/* =========================================================
   SECTIONS
========================================================= */

.category-section,
.shop-section,
.about-section,
.contact-section{

    padding:110px 0;

}


.section-heading,
.shop-top{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:40px;

    margin-bottom:42px;

}


.eyebrow{

    display:block;

    color:var(--orange);

    font-size:10px;

    font-weight:900;

    letter-spacing:2px;

}


.section-heading h2,
.shop-top h2,
.about-content h2{

    font-family:"Manrope",sans-serif;

    font-size:clamp(32px,4vw,50px);

    letter-spacing:-2px;

    line-height:1.05;

    margin-top:10px;

}


.section-heading h2 em,
.shop-top h2 em,
.about-content h2 em{

    color:var(--orange);

    font-style:normal;

}


.section-heading > p,
.shop-top > div > p{

    max-width:390px;

    color:var(--muted);

    font-size:14px;

    line-height:1.7;

}


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

.category-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

}


.category-card{

    text-align:left;

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:25px;

    transition:.35s ease;

}


.category-card:hover{

    transform:translateY(-8px);

    border-color:#ffd5bd;

    box-shadow:var(--shadow);

}


.category-icon{

    width:54px;
    height:54px;

    border-radius:17px;

    display:grid;
    place-items:center;

    font-size:21px;

    margin-bottom:20px;

}


.category-icon.green{
    color:#179153;
    background:#e9f8ef;
}


.category-icon.red{
    color:#df3e3e;
    background:#fff0f0;
}


.category-icon.orange{
    color:#f17c1a;
    background:#fff0df;
}


.category-icon.cream{
    color:#a27526;
    background:#fff7dd;
}


.category-card strong{

    display:block;

    font-family:"Manrope",sans-serif;

    font-size:16px;

}


.category-card span{

    display:block;

    color:#888;

    font-size:11px;

    margin-top:6px;

}


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

.shop-section{

    background:#fff;

}


.shop-controls{

    display:flex;

    gap:10px;

}


.shop-search{

    width:250px;
    height:48px;

    border:1px solid var(--border);

    border-radius:13px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:0 14px;

}


.shop-search i{

    color:#aaa;

}


.shop-search input{

    width:100%;

    border:0;
    outline:0;

    font-size:13px;

}


.shop-controls select{

    height:48px;

    border:1px solid var(--border);

    border-radius:13px;

    padding:0 13px;

    background:#fff;

    outline:0;

    color:#555;

    font-size:12px;

}


.filter-row{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:30px;

}


.filter-btn{

    padding:10px 17px;

    border-radius:100px;

    border:1px solid var(--border);

    background:#fff;

    color:#777;

    font-size:12px;

    font-weight:700;

    transition:.25s ease;

}


.filter-btn:hover,
.filter-btn.active{

    background:var(--orange);

    border-color:var(--orange);

    color:#fff;

}


.product-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}


.product-card{

    position:relative;

    background:#fff;

    border:1px solid #eee8e3;

    border-radius:20px;

    overflow:hidden;

    transition:.35s cubic-bezier(.22,1,.36,1);

    animation:productReveal .5s ease both;

}


.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(25,18,10,.1);

    border-color:#f6d5c0;

}


@keyframes productReveal{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


.product-image{

    height:230px;

    background:#faf7f3;

    position:relative;

    display:grid;
    place-items:center;

    overflow:hidden;

}


.product-image::before{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

    background:#fff;

}


.product-image img{

    position:relative;

    z-index:1;

    width:80%;

    height:190px;

    object-fit:contain;

    mix-blend-mode:multiply;

    transition:.45s ease;

}


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

    transform:scale(1.08) rotate(1deg);

}


.product-badge{

    position:absolute;

    z-index:3;

    left:13px;
    top:13px;

    padding:6px 9px;

    border-radius:8px;

    background:var(--orange);

    color:#fff;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.8px;

    font-weight:900;

}


.product-heart{

    position:absolute;

    z-index:4;

    right:12px;
    top:12px;

    width:34px;
    height:34px;

    border-radius:10px;

    background:#fff;

    color:#888;

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

}


.product-heart.active{

    color:#ef3e3e;

}


.product-content{

    padding:18px;

}


.product-category{

    color:#a19a95;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1.2px;

    font-weight:800;

}


.product-name{

    font-family:"Manrope",sans-serif;

    font-size:14px;

    margin-top:7px;

    min-height:39px;

    line-height:1.35;

}


.product-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:15px;

}


.product-price{

    font-family:"Manrope",sans-serif;

    font-size:18px;

}


.add-product{

    width:38px;
    height:38px;

    border-radius:11px;

    background:var(--ink);

    color:#fff;

    display:grid;
    place-items:center;

    transition:.25s ease;

}


.add-product:hover{

    background:var(--orange);

    transform:scale(1.08);

}


.product-quantity{

    display:flex;

    align-items:center;

    gap:8px;

    background:#fff1e9;

    border-radius:11px;

    padding:4px;

}


.product-quantity button{

    width:30px;
    height:30px;

    border-radius:8px;

    background:#fff;

    color:var(--orange);

}


.product-quantity span{

    min-width:20px;

    text-align:center;

    font-size:12px;

    font-weight:800;

}


.empty-products{

    display:none;

    text-align:center;

    padding:70px 20px;

}


.empty-products.show{

    display:block;

}


.empty-products > div{

    width:65px;
    height:65px;

    margin:auto;

    border-radius:20px;

    background:#fff1e9;

    color:var(--orange);

    display:grid;
    place-items:center;

    font-size:22px;

}


.empty-products h3{

    margin-top:18px;

}


.empty-products p{

    color:#888;

    margin:7px 0 20px;

    font-size:13px;

}


.empty-products button{

    padding:11px 17px;

    border-radius:11px;

    background:var(--orange);

    color:#fff;

    font-size:12px;

    font-weight:800;

}


/* =========================================================
   OFFER
========================================================= */

.offer-section{

    padding:0 0 110px;

}


.offer-banner{

    min-height:390px;

    border-radius:30px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 75% 20%,
            rgba(255,255,255,.2),
            transparent 20%
        ),

        linear-gradient(
            120deg,
            #ed5a0b,
            #ff7a1f
        );

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:60px;

    position:relative;

}


.eyebrow.light{

    color:#ffe3d2;

}


.offer-copy h2{

    font-family:"Manrope",sans-serif;

    font-size:clamp(36px,5vw,58px);

    line-height:1;

    letter-spacing:-2px;

    margin:14px 0;

}


.offer-copy p{

    max-width:450px;

    color:#ffe9dc;

    line-height:1.7;

    font-size:14px;

}


.offer-btn{

    margin-top:25px;

    background:#fff;

    color:#e9570c;

    border-radius:13px;

    padding:14px 18px;

    font-weight:800;

    display:flex;

    align-items:center;

    gap:9px;

}


.offer-products{

    display:flex;

    align-items:center;

    gap:-10px;

    margin-right:40px;

}


.mini-product{

    width:145px;
    height:210px;

    border-radius:25px;

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

    display:grid;
    place-items:center;

    transform:rotate(-8deg);

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

}


.mini-product.big{

    width:170px;
    height:245px;

    transform:rotate(4deg);

    z-index:2;

}


.mini-product img{

    width:90%;

    height:90%;

    object-fit:contain;

    mix-blend-mode:multiply;

    filter:drop-shadow(0 20px 15px rgba(0,0,0,.18));

}


/* =========================================================
   ABOUT
========================================================= */

.about-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:100px;

    align-items:center;

}


.about-visual{

    position:relative;

    padding:20px;

}


.about-image-main{

    height:500px;

    border-radius:30px;

    overflow:hidden;

    background:#f3eee9;

}


.about-image-main img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.8s ease;

}


.about-visual:hover img{

    transform:scale(1.05);

}


.about-floating{

    position:absolute;

    right:-10px;

    bottom:55px;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

}


.about-floating strong{

    font-family:"Manrope",sans-serif;

    font-size:28px;

    color:var(--orange);

}


.about-floating span{

    color:#777;

    font-size:10px;

}


.about-content > p{

    max-width:580px;

    color:#777;

    line-height:1.8;

    font-size:14px;

    margin-top:18px;

}


.about-points{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:30px;

}


.about-points div{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:11px;

    font-weight:700;

}


.about-points i{

    color:var(--green);

}


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

.contact-section{

    padding-top:0;

}


.contact-card{

    padding:45px;

    border-radius:25px;

    background:#fff;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


.contact-card h2{

    font-family:"Manrope",sans-serif;

    font-size:38px;

    letter-spacing:-1.5px;

    margin:9px 0;

}


.contact-card h2 em{

    color:var(--orange);

    font-style:normal;

}


.contact-card p{

    color:#777;

    font-size:13px;

}


.contact-btn{

    background:var(--ink);

    color:#fff;

    border-radius:13px;

    padding:15px 20px;

    display:flex;

    align-items:center;

    gap:9px;

    font-size:12px;

    font-weight:800;

    transition:.25s ease;

}


.contact-btn:hover{

    background:var(--orange);

    transform:translateY(-3px);

}


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

.store-footer{

    background:#171514;

    color:#fff;

    padding:70px 0 20px;

}


.footer-grid{

    display:grid;

    grid-template-columns:1.6fr repeat(3,1fr);

    gap:50px;

    padding-bottom:60px;

}


.footer-brand p{

    max-width:330px;

    color:#aaa;

    font-size:12px;

    line-height:1.8;

    margin-top:18px;

}


.footer-column{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}


.footer-column > strong{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1.3px;

    margin-bottom:5px;

}


.footer-column a,
.footer-column button{

    color:#aaa;

    background:none;

    font-size:12px;

    transition:.2s ease;

}


.footer-column a:hover,
.footer-column button:hover{

    color:#fff;

    transform:translateX(3px);

}


.footer-bottom{

    width:min(var(--container),calc(100% - 40px));

    margin:auto;

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

    padding-top:20px;

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:10px;

}


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

.drawer-backdrop{

    position:fixed;

    inset:0;

    background:rgba(10,8,6,.55);

    backdrop-filter:blur(5px);

    z-index:2000;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}


.drawer-backdrop.show{

    opacity:1;
    visibility:visible;

}


.cart-drawer{

    position:fixed;

    z-index:2100;

    top:0;
    right:-500px;

    width:min(470px,100%);

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    transition:.45s cubic-bezier(.22,1,.36,1);

    box-shadow:-20px 0 70px rgba(0,0,0,.15);

}


.cart-drawer.open{

    right:0;

}


.drawer-head{

    min-height:86px;

    padding:20px 24px;

    border-bottom:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.drawer-head div{

    display:flex;

    flex-direction:column;

}


.drawer-head span{

    font-size:10px;

    color:var(--orange);

    font-weight:900;

    letter-spacing:1.5px;

}


.drawer-head strong{

    font-family:"Manrope",sans-serif;

    margin-top:3px;

}


.drawer-head button{

    width:40px;
    height:40px;

    border-radius:12px;

    background:#f6f4f2;

}


.cart-items{

    flex:1;

    overflow:auto;

    padding:20px 24px;

}


.cart-item{

    display:grid;

    grid-template-columns:72px 1fr auto;

    gap:13px;

    padding:14px 0;

    border-bottom:1px solid #f1eeeb;

}


.cart-item-image{

    width:72px;
    height:72px;

    border-radius:15px;

    background:#faf7f4;

    display:grid;
    place-items:center;

}


.cart-item-image img{

    width:90%;
    height:90%;

    object-fit:contain;

    mix-blend-mode:multiply;

}


.cart-item-info strong{

    font-size:12px;

    display:block;

    line-height:1.35;

}


.cart-item-info > span{

    display:block;

    color:#999;

    font-size:10px;

    margin-top:4px;

}


.cart-item-price{

    color:var(--orange);

    font-weight:800;

    font-size:13px;

    margin-top:8px;

}


.cart-qty{

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:10px;

}


.cart-qty button{

    width:26px;
    height:26px;

    border-radius:7px;

    background:#f6f3f0;

}


.cart-qty span{

    min-width:20px;

    text-align:center;

    font-size:11px;

    font-weight:800;

}


.cart-remove{

    width:27px;
    height:27px;

    border-radius:8px;

    background:#fff0f0;

    color:#df4444;

}


.empty-cart{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:30px;

    text-align:center;

}


.empty-cart-icon{

    width:75px;
    height:75px;

    border-radius:25px;

    background:#fff0e7;

    color:var(--orange);

    display:grid;
    place-items:center;

    font-size:25px;

}


.empty-cart h3{

    margin-top:20px;

    font-family:"Manrope",sans-serif;

}


.empty-cart p{

    color:#888;

    font-size:12px;

    margin:7px 0 20px;

}


.empty-cart button{

    padding:12px 18px;

    border-radius:12px;

    background:var(--orange);

    color:#fff;

    font-size:12px;

    font-weight:800;

}


.cart-summary{

    border-top:1px solid var(--border);

    padding:20px 24px 25px;

    background:#fff;

}


.summary-line,
.summary-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:12px;

    margin-bottom:10px;

}


.summary-line span{

    color:#888;

}


.summary-total{

    font-size:15px;

    border-top:1px solid #eee;

    padding-top:14px;

    margin-top:10px;

}


.summary-total strong{

    font-family:"Manrope",sans-serif;

    font-size:20px;

}


.checkout-btn{

    width:100%;

    min-height:52px;

    margin-top:12px;

    background:var(--orange);

    color:#fff;

    border-radius:14px;

    font-weight:800;

    font-size:13px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


.checkout-btn:hover{

    background:var(--orange-dark);

}


/* =========================================================
   MODALS
========================================================= */

.modal-layer{

    position:fixed;

    inset:0;

    z-index:5000;

    background:rgba(12,10,8,.63);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}


.modal-layer.open{

    opacity:1;
    visibility:visible;

}


.account-modal,
.checkout-modal,
.success-modal,
.orders-modal{

    width:min(460px,100%);

    max-height:92vh;

    overflow:auto;

    background:#fff;

    border-radius:28px;

    padding:34px;

    position:relative;

    transform:translateY(20px) scale(.97);

    transition:.35s ease;

    box-shadow:0 35px 100px rgba(0,0,0,.2);

}


.checkout-modal{

    width:min(960px,100%);

}


.success-modal{

    width:min(470px,100%);

    text-align:center;

}


.orders-modal{

    width:min(680px,100%);

}


.modal-layer.open > div{

    transform:none;

}


.modal-close{

    position:absolute;

    right:20px;
    top:20px;

    width:38px;
    height:38px;

    border-radius:11px;

    background:#f6f3f0;

    z-index:2;

}


.account-icon{

    width:58px;
    height:58px;

    border-radius:18px;

    background:#fff0e7;

    color:var(--orange);

    display:grid;
    place-items:center;

    font-size:22px;

}


.account-heading{

    margin:22px 0 25px;

}


.account-heading span,
.checkout-head > div > span,
.orders-head > span{

    font-size:9px;

    letter-spacing:1.6px;

    font-weight:900;

    color:var(--orange);

}


.account-heading h2,
.checkout-head h2,
.orders-head h2{

    font-family:"Manrope",sans-serif;

    font-size:27px;

    letter-spacing:-1px;

    margin-top:6px;

}


.account-heading p{

    color:#888;

    font-size:12px;

    margin-top:7px;

    line-height:1.6;

}


.account-form{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.account-form label,
.checkout-form label{

    color:#555;

    font-size:11px;

    font-weight:700;

}


.field-wrap{

    height:50px;

    margin-top:7px;

    border:1px solid var(--border);

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 13px;

    transition:.2s ease;

}


.field-wrap:focus-within{

    border-color:var(--orange);

    box-shadow:0 0 0 4px #fff1e8;

}


.field-wrap > i{

    color:#aaa;

    font-size:13px;

}


.field-wrap input{

    width:100%;

    height:100%;

    border:0;
    outline:0;

    font-size:12px;

}


.password-toggle{

    background:none;

    color:#999;

}


.form-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}


.remember-check{

    display:flex !important;

    align-items:center;

    gap:7px;

    color:#777 !important;

    font-weight:500 !important;

}


.remember-check input{

    accent-color:var(--orange);

}


.text-btn{

    background:none;

    color:var(--orange);

    font-size:10px;

    font-weight:800;

}


.account-submit{

    min-height:50px;

    border-radius:13px;

    background:var(--orange);

    color:#fff;

    font-size:13px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


.account-submit:hover{

    background:var(--orange-dark);

}


.account-switch{

    text-align:center;

    color:#888;

    font-size:11px;

    margin-top:4px;

}


.account-switch button{

    background:none;

    color:var(--orange);

    font-weight:800;

}


.hidden{

    display:none !important;

}


/* PROFILE */

.profile-panel{

    text-align:center;

}


.profile-avatar{

    width:80px;
    height:80px;

    margin:10px auto 15px;

    border-radius:50%;

    background:var(--orange);

    color:#fff;

    display:grid;
    place-items:center;

    font-family:"Manrope",sans-serif;

    font-size:28px;

    font-weight:800;

}


.profile-panel h3{

    font-family:"Manrope",sans-serif;

}


.profile-panel > p{

    color:#888;

    font-size:12px;

    margin-top:5px;

}


.profile-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:25px;

}


.profile-actions button{

    min-height:48px;

    border-radius:12px;

    background:#f7f4f1;

    font-size:11px;

    font-weight:800;

}


.profile-actions button:hover{

    background:#fff0e7;

    color:var(--orange);

}


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

.checkout-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding-right:45px;

    margin-bottom:30px;

}


.checkout-step{

    padding:8px 12px;

    border-radius:10px;

    background:#fff1e8;

    color:var(--orange);

    font-size:10px;

    font-weight:800;

}


.checkout-step span{

    margin-right:5px;

}


.checkout-layout{

    display:grid;

    grid-template-columns:1fr .85fr;

    gap:30px;

}


.checkout-form{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.checkout-form input,
.checkout-form textarea{

    width:100%;

    border:1px solid var(--border);

    outline:0;

    border-radius:12px;

    margin-top:7px;

    padding:13px;

    resize:none;

    font-size:12px;

    transition:.2s ease;

}


.checkout-form input:focus,
.checkout-form textarea:focus{

    border-color:var(--orange);

    box-shadow:0 0 0 4px #fff2e9;

}


.checkout-form label span{

    color:#aaa;

    font-size:9px;

    font-weight:500;

}


.checkout-section-title{

    display:flex;

    align-items:center;

    gap:9px;

    font-family:"Manrope",sans-serif;

    font-size:13px;

    font-weight:800;

    margin-bottom:2px;

}


.checkout-section-title > span{

    width:25px;
    height:25px;

    border-radius:8px;

    background:var(--orange);

    color:#fff;

    display:grid;
    place-items:center;

    font-size:9px;

}


.payment-title{

    margin-top:10px;

}


.payment-option{

    display:flex;

    align-items:center;

    gap:10px;

    min-height:65px;

    border:1px solid var(--border);

    border-radius:13px;

    padding:10px 12px;

    cursor:pointer;

    transition:.2s ease;

}


.payment-option.active,
.payment-option:has(input:checked){

    border-color:#ffc8a9;

    background:#fff9f5;

}


.payment-option input{

    display:none;

}


.payment-icon{

    width:38px;
    height:38px;

    border-radius:10px;

    background:#fff0e7;

    color:var(--orange);

    display:grid;
    place-items:center;

}


.payment-copy{

    flex:1;

}


.payment-copy strong{

    display:block;

    font-size:11px;

}


.payment-copy small{

    display:block;

    color:#999;

    font-size:9px;

    margin-top:3px;

}


.payment-check{

    color:#ddd;

}


.payment-option:has(input:checked) .payment-check{

    color:var(--orange);

}


.place-order-btn{

    min-height:52px;

    margin-top:7px;

    border-radius:13px;

    background:var(--orange);

    color:#fff;

    font-size:13px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


.summary-card{

    background:#faf8f5;

    border-radius:20px;

    padding:20px;

}


.summary-card-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:14px;

    border-bottom:1px solid #eae4de;

}


.summary-card-head strong{

    font-family:"Manrope",sans-serif;

    font-size:14px;

}


.summary-card-head span{

    color:#999;

    font-size:10px;

}


.checkout-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 0;

    border-bottom:1px solid #eae4de;

}


.checkout-item img{

    width:50px;
    height:50px;

    object-fit:contain;

    background:#fff;

    border-radius:10px;

    mix-blend-mode:multiply;

}


.checkout-item div{

    flex:1;

}


.checkout-item strong{

    display:block;

    font-size:10px;

    line-height:1.4;

}


.checkout-item span{

    display:block;

    color:#999;

    font-size:9px;

    margin-top:4px;

}


.checkout-item b{

    font-size:11px;

}


.checkout-total-lines{

    padding-top:12px;

}


.checkout-total-lines > div{

    display:flex;

    justify-content:space-between;

    margin-bottom:9px;

    font-size:11px;

}


.checkout-total-lines span{

    color:#888;

}


.checkout-total-lines .final-total{

    padding-top:12px;

    border-top:1px solid #e3ddd6;

    font-size:15px;

}


.final-total strong{

    font-family:"Manrope",sans-serif;

    font-size:20px;

}


/* =========================================================
   SUCCESS
========================================================= */

.success-animation{

    position:relative;

    width:100px;
    height:100px;

    margin:5px auto 20px;

    display:grid;
    place-items:center;

}


.success-circle{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#e8f8ee;

    color:var(--green);

    display:grid;
    place-items:center;

    font-size:28px;

    position:relative;

    z-index:2;

    animation:successPop .6s cubic-bezier(.22,1,.36,1);

}


@keyframes successPop{

    0%{
        transform:scale(0);
    }

    80%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}


.success-ring{

    position:absolute;

    inset:10px;

    border:1px solid #bfe9ce;

    border-radius:50%;

    animation:successRing 1.5s ease-out infinite;

}


.ring-b{

    animation-delay:.5s;

}


@keyframes successRing{

    0%{
        opacity:.8;
        transform:scale(.7);
    }

    100%{
        opacity:0;
        transform:scale(1.4);
    }

}


.success-label{

    color:var(--green);

    font-size:9px;

    font-weight:900;

    letter-spacing:2px;

}


.success-modal h2{

    font-family:"Manrope",sans-serif;

    font-size:28px;

    margin-top:9px;

}


.success-modal h2 span{

    color:var(--orange);

}


.success-modal > p{

    color:#888;

    font-size:12px;

    line-height:1.7;

    margin:8px auto 22px;

    max-width:330px;

}


.order-number{

    background:#faf7f4;

    border:1px dashed #dfd4ca;

    border-radius:14px;

    padding:13px;

    display:flex;

    align-items:center;

    gap:10px;

}


.order-number span{

    color:#999;

    font-size:8px;

    font-weight:900;

    letter-spacing:1px;

}


.order-number strong{

    flex:1;

    text-align:left;

    font-family:"Manrope",sans-serif;

    font-size:13px;

}


.order-number button{

    width:32px;
    height:32px;

    border-radius:9px;

    background:#fff;

    color:var(--orange);

}


.success-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:10px;

}


.success-info div{

    padding:13px;

    border:1px solid var(--border);

    border-radius:13px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.success-info span{

    color:#999;

    font-size:9px;

}


.success-info strong{

    font-size:11px;

    margin-top:5px;

}


.success-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:20px;

}


.success-actions .primary-btn,
.success-actions .secondary-btn{

    width:100%;

    border:0;

}


/* =========================================================
   ORDERS
========================================================= */

.orders-head{

    margin-bottom:25px;

}


.orders-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.order-card{

    border:1px solid var(--border);

    border-radius:15px;

    padding:15px;

}


.order-card-top{

    display:flex;

    justify-content:space-between;

    gap:15px;

}


.order-card-id{

    font-family:"Manrope",sans-serif;

    font-size:12px;

}


.order-status{

    padding:5px 8px;

    border-radius:7px;

    background:#eaf8ef;

    color:var(--green);

    font-size:8px;

    font-weight:900;

}


.order-card-date{

    color:#999;

    font-size:9px;

    margin-top:5px;

}


.order-card-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #eee;

    margin-top:12px;

    padding-top:12px;

}


.order-card-bottom span{

    color:#888;

    font-size:10px;

}


.order-card-bottom strong{

    font-family:"Manrope",sans-serif;

}


.no-orders{

    text-align:center;

    padding:50px 20px;

    color:#888;

    font-size:12px;

}


/* =========================================================
   TOAST
========================================================= */

.store-toast{

    position:fixed;

    z-index:7000;

    left:50%;

    bottom:25px;

    transform:translate(-50%,20px);

    opacity:0;

    visibility:hidden;

    background:#1b1917;

    color:#fff;

    border-radius:13px;

    padding:12px 17px;

    display:flex;

    align-items:center;

    gap:9px;

    font-size:11px;

    box-shadow:0 15px 40px rgba(0,0,0,.2);

    transition:.3s ease;

}


.store-toast.show{

    opacity:1;

    visibility:visible;

    transform:translate(-50%,0);

}


.store-toast i{

    color:#55d981;

}


/* =========================================================
   BACK TOP
========================================================= */

.back-top{

    position:fixed;

    z-index:900;

    right:25px;
    bottom:25px;

    width:43px;
    height:43px;

    border-radius:13px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:0 10px 30px rgba(0,0,0,.1);

    color:var(--orange);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s ease;

}


.back-top.show{

    opacity:1;
    visibility:visible;

    transform:none;

}


.back-top:hover{

    background:var(--orange);

    color:#fff;

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .7s ease,

        transform .7s cubic-bezier(.22,1,.36,1);

}


.reveal.visible{

    opacity:1;

    transform:none;

}


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

@media(max-width:1050px){

    .main-nav{
        gap:18px;
    }


    .product-grid{
        grid-template-columns:repeat(3,1fr);
    }


    .hero-content h1{
        font-size:58px;
    }


    .hero-ring{
        width:400px;
        height:400px;
    }


    .hero-bottle{
        transform:scale(.9);
    }


    .footer-grid{
        grid-template-columns:1.5fr repeat(3,1fr);
    }

}


@media(max-width:850px){

    .main-nav{
        display:none;
    }


    .mobile-menu-btn{
        display:flex;
    }


    .account-btn span{
        display:none;
    }


    .hero-container{
        grid-template-columns:1fr;
        padding:80px 0 60px;
        text-align:center;
    }


    .hero-content{
        display:flex;
        flex-direction:column;
        align-items:center;
    }


    .hero-content p{
        max-width:600px;
    }


    .hero-trust{
        justify-content:center;
    }


    .hero-visual{
        min-height:470px;
    }


    .hero-ring{
        width:380px;
        height:380px;
    }


    .service-container{
        grid-template-columns:repeat(2,1fr);
    }


    .service-item:nth-child(2){
        border-right:0;
    }


    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }


    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }


    .shop-top{
        align-items:flex-start;
        flex-direction:column;
    }


    .shop-controls{
        width:100%;
    }


    .shop-search{
        flex:1;
    }


    .offer-banner{
        padding:45px;
    }


    .offer-products{
        margin-right:0;
        transform:scale(.8);
    }


    .about-grid{
        grid-template-columns:1fr;
        gap:50px;
    }


    .about-image-main{
        height:450px;
    }


    .checkout-layout{
        grid-template-columns:1fr;
    }


    .checkout-summary{
        order:-1;
    }


    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:600px){

    .section-container,
    .header-inner,
    .hero-container,
    .service-container,
    .footer-bottom{
        width:min(100% - 26px, var(--container));
    }


    .store-header{
        height:68px;
    }


    .header-inner{
        gap:7px;
    }


    .brand-icon{
        width:39px;
        height:39px;
    }


    .brand-copy strong{
        font-size:15px;
    }


    .brand-copy small{
        font-size:8px;
    }


    .header-search-btn{
        display:none;
    }


    .account-btn{
        width:40px;
        padding:0;
    }


    .account-btn i{
        margin:0;
    }


    .cart-btn{
        width:42px;
    }


    .hero-section{
        min-height:auto;
    }


    .hero-container{
        min-height:auto;
        padding:65px 0 20px;
    }


    .hero-content h1{
        font-size:43px;
        letter-spacing:-2px;
        margin:18px 0;
    }


    .hero-content p{
        font-size:14px;
    }


    .hero-buttons{
        width:100%;
        flex-direction:column;
    }


    .hero-buttons a{
        width:100%;
    }


    .hero-trust{
        gap:10px 15px;
        margin-top:25px;
    }


    .hero-trust div{
        font-size:10px;
    }


    .hero-visual{
        min-height:370px;
    }


    .hero-ring{
        width:300px;
        height:300px;
    }


    .hero-bottle{
        width:300px;
        height:360px;
        transform:scale(.78);
    }


    .float-card-one{
        left:0;
        top:100px;
        transform:scale(.85);
    }


    .float-card-two{
        right:0;
        bottom:80px;
        transform:scale(.85);
    }


    .service-container{
        grid-template-columns:1fr 1fr;
    }


    .service-item{
        padding:17px 5px;
        border-right:0;
        border-bottom:1px solid var(--border);
    }


    .service-item > i{
        width:38px;
        height:38px;
        flex:none;
    }


    .service-item strong{
        font-size:10px;
    }


    .service-item span{
        font-size:8px;
    }


    .category-section,
    .shop-section,
    .about-section,
    .contact-section{
        padding:75px 0;
    }


    .section-heading h2,
    .shop-top h2,
    .about-content h2{
        font-size:35px;
    }


    .section-heading{
        display:block;
    }


    .section-heading > p{
        margin-top:15px;
    }


    .category-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }


    .category-card{
        padding:17px;
    }


    .category-icon{
        width:45px;
        height:45px;
        margin-bottom:14px;
    }


    .category-card strong{
        font-size:13px;
    }


    .category-card span{
        font-size:9px;
    }


    .shop-controls{
        flex-direction:column;
    }


    .shop-controls select{
        width:100%;
    }


    .product-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }


    .product-image{
        height:175px;
    }


    .product-image img{
        height:150px;
    }


    .product-content{
        padding:13px;
    }


    .product-name{
        font-size:11px;
        min-height:31px;
    }


    .product-price{
        font-size:15px;
    }


    .add-product{
        width:33px;
        height:33px;
    }


    .product-heart{
        width:30px;
        height:30px;
    }


    .offer-section{
        padding-bottom:75px;
    }


    .offer-banner{
        padding:35px 25px;
        min-height:500px;
        display:block;
    }


    .offer-products{
        margin-top:30px;
        justify-content:center;
        transform:scale(.7);
    }


    .mini-product{
        margin-left:-30px;
    }


    .about-image-main{
        height:360px;
    }


    .about-floating{
        right:-2px;
        bottom:30px;
    }


    .about-points{
        grid-template-columns:1fr;
        gap:12px;
    }


    .contact-card{
        padding:30px 23px;
        display:block;
    }


    .contact-card h2{
        font-size:30px;
    }


    .contact-btn{
        margin-top:25px;
        width:max-content;
    }


    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:35px 20px;
    }


    .footer-brand{
        grid-column:1/-1;
    }


    .footer-bottom{
        gap:10px;
        flex-direction:column;
    }


    .account-modal,
    .checkout-modal,
    .success-modal,
    .orders-modal{
        padding:25px 20px;
        border-radius:22px;
    }


    .checkout-head h2{
        font-size:23px;
    }


    .checkout-step{
        display:none;
    }


    .success-actions{
        grid-template-columns:1fr;
    }


    .cart-drawer{
        width:100%;
    }


    .search-box{
        margin-top:70px;
        padding:22px;
    }


    .back-top{
        right:15px;
        bottom:15px;
    }

}


@media(max-width:380px){

    .product-grid{
        grid-template-columns:1fr;
    }


    .product-image{
        height:220px;
    }


    .product-image img{
        height:190px;
    }


    .hero-content h1{
        font-size:39px;
    }

}