/*
Theme Name: Swarna Editable Store
Author: Custom
Description: Editable WooCommerce theme matching supplied Swarna reference.
Version: 4.0.0
*/

:root{
    --red:#8e1110;
    --red2:#74100c;
    --cream:#fff8ef;
    --gold:#d3a34d;
    --text:#351c17
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:#fffaf5;
    color:var(--text);
    font-family:Arial,sans-serif
}

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

.wrap{
    width:min(92%,1440px);
    margin:auto
}


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

.site-head{
    background:#fff9f0
}

.head{
    height:93px;
    display:flex;
    align-items:center;
    gap:35px
}

.brand{
    margin-right:auto;
    color:#991817;
    line-height:1
}

.brand .name{
    font:700 31px Georgia
}

.brand .tag{
    font:italic 11px Georgia;
    display:block;
    text-align:center;
    margin-top:4px
}

.menu ul{
    display:flex;
    gap:30px;
    list-style:none;
    padding:0;
    margin:0
}

.menu a{
    font-size:14px;
    padding:38px 0 16px
}

.menu a:hover{
    color:#a01616;
    border-bottom:2px solid #a01616
}

.head-icons{
    font-size:22px;
    white-space:nowrap
}


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

.hero{
    min-height:460px;
    background:
        linear-gradient(
            90deg,
            #fff8eff8 0,
            #fff8efea 37%,
            #fff8ef10 65%
        ),
        url(assets/images/hero.jpg) center/cover no-repeat;
    display:flex;
    align-items:center
}

.hero-text{
    width:47%;
    padding:42px 0
}

.hero-text .small{
    font:23px Georgia
}

.hero h1{
    font:45px/1.08 Georgia;
    color:#8b1817;
    margin:5px 0 28px
}

.hero p{
    font:19px/1.4 Georgia;
    margin-bottom:18px
}

.btn{
    display:inline-block;
    background:#a71919;
    color:white;
    border-radius:24px;
    padding:13px 24px;
    font-size:12px;
    font-weight:700
}

.trust{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:40px;
    font-size:12px
}

.trust div{
    border-right:1px solid #cdb99e
}


/* =========================================
   BENEFIT BAR
========================================= */

.benefit{
    background:linear-gradient(90deg,#94130f,#70100d);
    color:#fff
}

.benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:24px 0
}

.benefit-grid div{
    text-align:center;
    border-right:1px solid #c8775d;
    font-size:16px;
    line-height:1.45
}

.benefit-grid div:last-child{
    border:0
}

.gold{
    color:#e0ad52;
    font-size:25px;
    margin-right:10px
}


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

.section{
    padding:22px 0 42px
}

.section-title{
    text-align:center;
    color:#7f1816;
    font:34px Georgia;
    margin:0 0 22px
}


/* =========================================
   CATEGORIES
========================================= */

.categories{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px
}

.category{
    background:#f5e4cd;
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 2px 6px #00000010
}

.category img{
    width:100%;
    height:177px;
    object-fit:cover;
    display:block
}

.category div{
    text-align:center;
    padding:11px;
    font-size:13px
}

.outline{
    display:block;
    width:max-content;
    margin:20px auto 0;
    border:1px solid #9e3932;
    color:#8c1917;
    border-radius:7px;
    padding:9px 30px;
    font-size:12px;
    font-weight:bold
}


/* =========================================
   FOOD BANNER
========================================= */

.food{
    min-height:300px;
    background:
        linear-gradient(90deg,#291207f4,#29120725),
        url(assets/images/food-banner.jpg) center/cover no-repeat;
    color:white;
    display:flex;
    align-items:center
}

.food-text{
    width:36%;
    padding:30px 0
}

.food h2{
    font:35px/1.1 Georgia;
    margin:0 0 5px
}

.food em{
    font:26px Georgia;
    color:#e6ba70
}

.food p{
    font-size:14px;
    line-height:1.6
}

.food .btn{
    background:#e0aa50;
    color:#58230d
}


/* =========================================
   QUALITY
========================================= */

.quality{
    background:#fff7e8
}

.quality-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:25px 0
}

.quality-grid>div{
    padding:0 22px;
    border-right:1px solid #d8c4a9
}

.quality-grid>div:last-child{
    border:0
}

.quality b{
    display:block;
    margin-bottom:7px
}

.quality small{
    line-height:1.4
}


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

.footer{
    background:linear-gradient(90deg,#95130f,#71100d);
    color:white
}

.footer-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr 1.55fr 1fr;
    gap:30px;
    padding:40px 0 28px
}

.footer h3{
    font:700 27px Georgia;
    margin:0
}

.footer h4{
    font-size:12px;
    color:#e2b05a
}

.footer ul{
    list-style:none;
    padding:0;
    margin:0
}

.footer li,
.footer p{
    font-size:12px;
    line-height:1.75
}

.copyright{
    text-align:center;
    padding:12px;
    border-top:1px solid #ffffff2b;
    font-size:11px
}


/* =========================================
   CONTENT
========================================= */

.content{
    min-height:500px;
    padding:45px 0
}

.content h1{
    font:40px Georgia;
    color:#841715
}

.woocommerce ul.products li.product{
    background:white;
    padding:13px;
    border-radius:8px
}

.edit-note{
    display:none
}


/* =========================================
   TABLET
========================================= */

@media(max-width:950px){

    .menu{
        display:none
    }

    .hero-text{
        width:68%
    }

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

    .benefit-grid,
    .quality-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px
    }

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


/* =========================================
   MOBILE BASIC
========================================= */

@media(max-width:600px){

    .head{
        height:72px
    }

    .brand .name{
        font-size:23px
    }

    .hero{
        min-height:480px;
        background-position:62% center
    }

    .hero-text{
        width:100%;
        background:#fff8efe0;
        padding:28px 18px
    }

    .hero h1{
        font-size:35px
    }

    .trust{
        grid-template-columns:1fr 1fr
    }

    .categories{
        grid-template-columns:1fr 1fr
    }

    .category img{
        height:145px
    }

    .benefit-grid,
    .quality-grid,
    .footer-grid{
        grid-template-columns:1fr
    }

    .benefit-grid div,
    .quality-grid>div{
        border-right:0;
        border-bottom:1px solid #ffffff30;
        padding:12px
    }

    .food-text{
        width:82%
    }
}


/* =========================================
   V3: FIXED / STICKY HEADER
========================================= */

body{
    padding-top:93px
}

.site-head{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:9999;
    box-shadow:0 2px 10px rgba(0,0,0,.08)
}

.admin-bar .site-head{
    top:32px
}

.mobile-toggle{
    display:none;
    background:transparent;
    border:0;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    color:#851714;
    padding:8px
}


/* =========================================
   ADMIN BAR MOBILE
========================================= */

@media(max-width:782px){

    .admin-bar .site-head{
        top:46px
    }
}


/* =========================================
   MOBILE NAVIGATION
========================================= */

@media(max-width:950px){

    body{
        padding-top:72px
    }

    .head{
        height:72px;
        gap:12px
    }

    .mobile-toggle{
        display:block
    }

    .head-icons{
        font-size:19px
    }

    .menu{
        display:none;
        position:absolute;
        top:72px;
        left:0;
        right:0;
        background:#fff9f0;
        box-shadow:0 8px 15px rgba(0,0,0,.12);
        max-height:calc(100vh - 72px);
        overflow-y:auto
    }

    .menu.open{
        display:block
    }

    .menu ul{
        display:block;
        padding:8px 5% 16px
    }

    .menu li{
        border-bottom:1px solid #eadbca
    }

    .menu a{
        display:block;
        padding:15px 4px;
        font-size:15px
    }

    .menu a:hover{
        border-bottom:0
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

    .wrap{
        width:min(94%,1440px)
    }

    .brand .tag{
        font-size:9px
    }

    .head-icons{
        font-size:17px
    }

    .hero h1{
        font-size:32px
    }

    .hero p{
        font-size:17px
    }

    .section-title{
        font-size:29px
    }

    .categories{
        gap:11px
    }
}


/* =========================================
   V4 EXACT SUPPLIED DESKTOP LOGO
   DESKTOP — KEEP UNCHANGED
========================================= */

.brand{
    display:flex;
    align-items:center
}

.swarna-logo{
    display:block;
    width:205px;
    height:70px;
    object-fit:contain;
    background:#fff
}

.custom-logo{
    max-width:205px;
    max-height:70px;
    width:auto;
    height:auto
}

.footer-logo{
    width:165px;
    max-height:120px;
    object-fit:contain;
    background:#fff;
    border-radius:3px
}


/* =========================================
   MOBILE SIZE FOR ORIGINAL LOGO
   Hidden when mobile-logo is active
========================================= */

@media(max-width:600px){

    .swarna-logo,
    .custom-logo{
        width:145px;
        max-width:145px;
        height:55px;
        max-height:55px
    }

    .footer-logo{
        width:145px
    }
}


/* =========================================
   MOBILE LOGO
   ONLY MOBILE USES:
   swarnamlogo-1.png
========================================= */

.mobile-logo{
    display:none !important
}

.desktop-logo{
    display:inline-flex;
    align-items:center
}


/* =========================================
   MOBILE HEADER LOGO & FLUSH LEFT ALIGNMENT
========================================= */

@media(max-width:768px){

    /* Remove horizontal wrap restriction in header */
    .site-head .wrap{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 14px 0 0 !important
    }

    .site-head .head{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        width:100% !important;
        height:72px !important;
        gap:0 !important;
        padding-left:0 !important;
        margin-left:0 !important
    }

    /* Hide the original desktop logo */
    .desktop-logo{
        display:none !important
    }

    /* Brand pinned hard left */
    .site-head .brand,
    .brand{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        margin-left:0 !important;
        margin-right:auto !important;
        padding-left:0 !important;
        text-align:left !important;
        flex-shrink:0 !important;
        min-width:0 !important
    }

    .site-head .brand a{
        display:flex !important;
        align-items:center !important;
        padding:0 !important;
        margin:0 !important
    }

    /* Show the mobile logo completely aligned to the left edge */
    .mobile-logo{
        display:block !important;
        width:165px !important;
        max-width:165px !important;
        height:auto !important;
        max-height:55px !important;
        object-fit:contain !important;
        object-position:left center !important;
        background:transparent !important;
        margin:0 !important;
        padding-left:12px !important
    }

    .site-head .brand .custom-logo,
    .site-head .brand .swarna-logo{
        object-position:left center !important;
        margin-left:0 !important;
        margin-right:0 !important;
        display:block !important
    }

    /* Group hamburger toggle and icons to the far right */
    .site-head .mobile-toggle{
        margin-left:auto !important;
        margin-right:6px !important
    }

    .site-head .head-icons{
        margin-left:0 !important;
        display:flex !important;
        align-items:center !important;
        gap:10px !important
    }
}


/* =========================================
   SMALL PHONES
========================================= */

@media(max-width:480px){

    .site-head .head{
        width:100% !important
    }

    .mobile-logo{
        width:145px !important;
        max-width:145px !important;
        padding-left:10px !important
    }

    .site-head .head-icons{
        gap:8px !important;
        font-size:16px !important
    }
}