/* =========================================================
   Ganna Rakha Bridal Boutique
   Main Stylesheet
   Luxury Handmade / Arabic RTL
   ========================================================= */

/* =========================
   ROOT
========================= */

:root{
    --primary:#9d876b;
    --primary-dark:#6f5b45;
    --secondary:#d9c8b0;
    --accent:#b69a77;

    --background:#fbf8f3;
    --surface:#fffdf9;
    --white:#ffffff;

    --text:#2f2923;
    --muted:#766d64;

    --border:#e9e0d4;

    --success:#25d366;
    --success-dark:#1f9f4f;

    --danger:#a65b5b;

    --shadow:0 20px 60px rgba(55,42,29,.09);
    --shadow-hover:0 25px 70px rgba(55,42,29,.14);

    --radius:20px;
    --radius-small:12px;

    --container:1180px;
}


/* =========================
   RESET
========================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--background);
    color:var(--text);

    font-family:"Cairo","Tahoma","Arial",sans-serif;

    line-height:1.8;
    font-weight:400;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.lock{
    overflow:hidden;
}

img{
    max-width:100%;
}

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

button{
    cursor:pointer;
}

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

ul,
ol{
    margin:0;
    padding:0;
    list-style:none;
}


/* IMPORTANT
   Prevent hidden modals/panels from appearing
*/

[hidden]{
    display:none !important;
}


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

.container{
    width:min(
        var(--container),
        calc(100% - 36px)
    );

    margin-left:auto;
    margin-right:auto;
}


/* =========================
   ACCESSIBILITY
========================= */

.skip-link{
    position:fixed;
    top:-100px;
    right:16px;

    z-index:1000;

    background:var(--text);
    color:#fff;

    padding:9px 16px;

    border-radius:10px;

    font-size:13px;
}

.skip-link:focus{
    top:10px;
}

:focus-visible{
    outline:3px solid rgba(157,135,107,.35);
    outline-offset:3px;
}


/* =========================
   TYPOGRAPHY
========================= */

.hero h1,
.section-head h2,
.contact-strip h2,
.drawer-head h2,
.modal-heading h2,
.product-modal-content h2,
.success-box h2,
.why-grid h3,
.panel-head h2{
    font-family:
        "Playfair Display",
        "Cairo",
        Georgia,
        serif;

    font-weight:500;
}

.eyebrow{
    display:inline-block;

    font-size:10px;
    line-height:1.4;

    letter-spacing:3px;

    color:var(--primary-dark);

    font-weight:700;
}


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

.site-header{
    position:sticky;
    top:0;

    z-index:50;

    background:rgba(251,248,243,.94);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:
        1px solid
        rgba(157,135,107,.14);
}

.nav-wrap{
    height:78px;

    display:flex;
    align-items:center;

    gap:24px;
}


/* =========================
   BRAND
========================= */

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

    gap:11px;

    min-width:220px;
}

.brand img{
    width:55px;
    height:55px;

    object-fit:contain;

    display:block;
}

.brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.15;
}

.brand-text strong{
    font-family:
        "Playfair Display",
        "Cairo",
        Georgia,
        serif;

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

    letter-spacing:.3px;
}

.brand-text small{
    font-size:9px;

    color:var(--muted);

    letter-spacing:2px;

    margin-top:5px;

    font-family:
        "Cairo",
        Arial,
        sans-serif;
}


/* =========================
   DESKTOP NAV
========================= */

.desktop-nav{
    flex:1;

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

    gap:28px;
}

.desktop-nav a{
    position:relative;

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

    color:#554c44;

    transition:
        color .25s ease;
}

.desktop-nav a::after{
    content:"";

    position:absolute;

    right:0;
    bottom:-7px;

    width:0;
    height:1px;

    background:var(--primary-dark);

    transition:width .25s ease;
}

.desktop-nav a:hover{
    color:var(--primary-dark);
}

.desktop-nav a:hover::after{
    width:100%;
}


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

.icon-btn,
.menu-btn,
.close-btn{
    border:0;
    background:transparent;
}

.icon-btn{
    position:relative;

    width:44px;
    height:44px;

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

    border-radius:50%;

    display:grid;
    place-items:center;

    color:var(--text);

    transition:
        background .25s ease,
        transform .25s ease;
}

.icon-btn:hover{
    background:#f4ece2;
    transform:translateY(-2px);
}

.icon-btn > span{
    font-size:20px;
    line-height:1;
}

.icon-btn b{
    position:absolute;

    top:-4px;
    left:-3px;

    min-width:19px;
    height:19px;

    padding:0 4px;

    display:grid;
    place-items:center;

    background:var(--text);
    color:#fff;

    border-radius:50%;

    font-size:10px;
    font-weight:700;
}

.menu-btn{
    display:none;

    width:42px;
    height:42px;

    border-radius:50%;

    font-size:24px;

    color:var(--text);

    transition:
        background .2s ease;
}

.menu-btn:hover{
    background:#f1e8dc;
}


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

.mobile-menu{
    display:none;
}

.mobile-menu.open{
    display:block;
}

.mobile-menu a{
    display:block;

    padding:11px 4px;

    border-bottom:
        1px solid
        #f0e9df;

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

.mobile-menu a:last-child{
    border-bottom:0;
}


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

.hero{
    position:relative;

    overflow:hidden;

    min-height:610px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            120deg,
            #f7f0e6 0%,
            #fbf8f3 55%,
            #efe4d5 100%
        );
}

.hero::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    right:-300px;
    top:-260px;

    border:
        1px solid
        rgba(157,135,107,.12);
}

.hero::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border:
        1px solid
        rgba(157,135,107,.18);

    border-radius:50%;

    left:-170px;
    bottom:-210px;
}

.hero-grid{
    position:relative;

    z-index:1;

    display:grid;

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

    align-items:center;

    gap:50px;
}

.hero-copy{
    padding:55px 0;
}

.hero h1{
    font-size:
        clamp(
            42px,
            5.4vw,
            72px
        );

    line-height:1.2;

    margin:18px 0;

    font-weight:500;

    color:var(--text);
}

.hero h1 em{
    color:var(--primary-dark);
    font-style:normal;
}

.hero p{
    max-width:650px;

    color:var(--muted);

    font-size:15px;

    line-height:2;

    margin:0;
}

.hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:28px;
}


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

.btn{
    display:inline-flex;

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

    gap:8px;

    border:
        1px solid
        transparent;

    border-radius:999px;

    padding:
        11px 24px;

    min-height:48px;

    font-weight:700;
    font-size:13px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:var(--text);
    color:#fff;

    box-shadow:
        0 10px 28px
        rgba(47,41,35,.15);
}

.btn-primary:hover{
    background:#1f1b18;

    box-shadow:
        0 15px 35px
        rgba(47,41,35,.2);
}

.btn-ghost{
    border-color:var(--primary);

    color:var(--primary-dark);

    background:transparent;
}

.btn-ghost:hover{
    background:#f1e7dc;
}

.btn-light{
    background:#fff;
    color:var(--text);
}

.btn-outline-light{
    border-color:#8f8274;
    color:#fff;
}

.btn-whatsapp{
    background:#25d366;
    color:#fff;
}

.full{
    width:100%;
}

.text-btn{
    width:100%;

    border:0;
    background:none;

    padding:12px;

    color:var(--muted);

    transition:color .2s ease;
}

.text-btn:hover{
    color:var(--text);
}

.hero-note{
    margin-top:22px;

    font-size:11px;

    color:var(--muted);
}

.hero-note span{
    color:var(--primary);

    margin-left:6px;
}


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

.hero-mark{
    display:grid;
    place-items:center;
}

.hero-mark img{
    width:min(360px,75%);
    height:auto;

    filter:
        drop-shadow(
            0 25px 40px
            rgba(61,44,28,.16)
        );
}


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

.section{
    padding:92px 0;
}

.section-head{
    display:flex;

    justify-content:space-between;
    align-items:end;

    gap:30px;

    margin-bottom:36px;
}

.section-head h2{
    font-size:42px;

    font-weight:500;

    margin:7px 0 0;

    line-height:1.25;
}

.section-head p{
    max-width:430px;

    color:var(--muted);

    margin:0;

    font-size:13px;
}


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

.categories-section{
    background:var(--background);
}

.category-grid{
    display:grid;

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

    gap:12px;
}

.category-card{
    position:relative;

    min-height:165px;

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

    background:var(--surface);

    border-radius:var(--radius);

    padding:22px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.category-card::before{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-30px;
    bottom:-55px;

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

    border-radius:50%;

    pointer-events:none;
}

.category-card::after{
    content:"";

    position:absolute;

    width:60px;
    height:60px;

    left:-30px;
    top:-30px;

    border:
        1px solid
        rgba(157,135,107,.12);

    border-radius:50%;
}

.category-card:hover{
    transform:translateY(-5px);

    box-shadow:var(--shadow);

    border-color:var(--secondary);
}


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

.category-icon{
    position:relative;

    z-index:1;

    width:52px;
    height:52px;

    border-radius:16px;

    background:#f6eee4;

    color:var(--primary-dark);

    display:grid;
    place-items:center;

    margin-bottom:18px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.category-icon svg{
    width:28px;
    height:28px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.category-card:hover .category-icon{
    background:var(--text);
    color:#fff;

    transform:
        translateY(-3px);
}

.category-card strong{
    position:relative;
    z-index:1;

    font-size:14px;

    font-weight:700;
}

.category-card small{
    position:relative;
    z-index:1;

    color:var(--muted);

    font-size:10px;

    margin-top:4px;
}


/* =========================
   PRODUCTS
========================= */

.products-section{
    background:#fffdf9;
}

.product-head{
    margin-bottom:22px;
}

.result-count{
    font-size:12px;
    color:var(--muted);
}


/* =========================
   FILTERS
========================= */

.filters{
    display:grid;

    grid-template-columns:
        1.7fr
        1fr
        1fr
        1fr
        auto;

    gap:10px;

    margin-bottom:30px;
}

.search-field{
    position:relative;
}

.search-field span{
    position:absolute;

    right:14px;
    top:6px;

    font-size:22px;

    color:var(--muted);

    pointer-events:none;
}

.search-field input{
    padding-right:44px !important;
}

.filters input,
.filters select,
.mobile-filter-panel input,
.mobile-filter-panel select{
    width:100%;

    height:48px;

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

    border-radius:12px;

    background:#fff;

    padding:
        0 14px;

    color:var(--text);

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.filters input:focus,
.filters select:focus,
.mobile-filter-panel input:focus,
.mobile-filter-panel select:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(157,135,107,.08);
}

.reset-btn{
    height:48px;

    padding:0 17px;

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

    background:transparent;

    border-radius:12px;

    color:var(--muted);

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease;
}

.reset-btn:hover{
    background:#f5eee6;
    color:var(--text);
}


/* =========================
   PRODUCTS GRID
========================= */

.products-grid{
    display:grid;

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

    gap:20px;
}

.product-card{
    border:
        1px solid
        var(--border);

    border-radius:18px;

    background:#fff;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    display:flex;
    flex-direction:column;
}

.product-card:hover{
    transform:translateY(-4px);

    box-shadow:var(--shadow-hover);

    border-color:#dfd2c2;
}

.product-image{
    position:relative;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#f3eee8;

    cursor:pointer;
}

.product-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .45s ease;
}

.product-card:hover
.product-image img{
    transform:scale(1.035);
}

.product-body{
    padding:15px;
}

.product-category{
    font-size:9px;

    color:var(--primary-dark);

    letter-spacing:.6px;

    font-weight:700;
}

.product-name{
    font-size:14px;

    font-weight:600;

    margin:
        5px 0 8px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.product-meta{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;
}

.price{
    font-weight:800;

    font-size:14px;
}

.add-btn{
    border:0;

    border-radius:10px;

    background:#f1e8dc;

    color:var(--primary-dark);

    padding:
        8px 12px;

    font-size:11px;

    font-weight:700;

    transition:
        background .2s ease,
        transform .2s ease;
}

.add-btn:hover{
    background:var(--secondary);

    transform:translateY(-1px);
}


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

.empty-state{
    text-align:center;

    padding:70px 20px;
}

.empty-state > div{
    font-size:40px;

    color:var(--primary);
}

.empty-state h3{
    margin:
        6px 0;

    font-size:22px;

    font-weight:700;
}

.empty-state p{
    color:var(--muted);

    font-size:13px;
}


/* =========================
   MOBILE FILTER
========================= */

.mobile-filter-row{
    display:none;
}

.filter-btn{
    width:100%;

    height:48px;

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

    border-radius:12px;

    background:#fff;

    color:var(--text);

    font-weight:700;
}


/* =========================
   WHY US
========================= */

.why-section{
    background:#f5eee5;
}

.why-grid{
    display:grid;

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

    gap:20px;
}

.why-grid article{
    background:
        rgba(255,255,255,.58);

    border:
        1px solid
        rgba(157,135,107,.18);

    padding:30px;

    border-radius:18px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.why-grid article:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(55,42,29,.07);
}

.why-grid article > span{
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color:var(--primary);

    font-size:13px;
}

.why-grid h3{
    font-size:24px;

    font-weight:500;

    margin:12px 0;
}

.why-grid p{
    color:var(--muted);

    margin:0;

    font-size:13px;
}


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

.contact-strip{
    background:var(--text);

    color:#fff;

    padding:65px 0;
}

.contact-inner{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}

.contact-strip .eyebrow{
    color:var(--secondary);
}

.contact-strip h2{
    font-size:38px;

    font-weight:500;

    margin:8px 0;
}

.contact-strip p{
    color:#cfc5ba;

    margin:0;

    font-size:13px;
}

.contact-actions{
    display:flex;

    gap:10px;
}


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

.footer{
    background:#211d19;

    color:#eee;

    padding:
        55px 0 18px;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr;

    gap:50px;

    padding-bottom:45px;
}

.footer img{
    width:72px;
    height:72px;

    object-fit:contain;
}

.footer p,
.footer a{
    color:#bdb4ab;

    font-size:12px;
}

.footer p{
    line-height:2;
}

.footer a{
    display:block;

    margin:6px 0;

    transition:
        color .2s ease;
}

.footer a:hover{
    color:#fff;
}

.footer h3{
    font-size:14px;

    margin:
        8px 0 14px;
}

.copyright{
    border-top:
        1px solid
        #3d3731;

    padding-top:17px;

    color:#8f867d;

    font-size:10px;
}


/* =========================
   FLOATING ACTIONS
========================= */

.floating-actions{
    position:fixed;

    left:18px;
    bottom:20px;

    z-index:40;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.floating-actions a{
    width:50px;
    height:50px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.16);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.floating-actions a:hover{
    transform:
        translateY(-4px)
        scale(1.04);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,.22);
}

.floating-actions a svg{
    width:22px;
    height:22px;

    fill:currentColor;

    display:block;
}

.float-whatsapp{
    background:#25d366;
}

.float-call{
    background:var(--text);
}


/* =========================
   OVERLAY
========================= */

.overlay{
    position:fixed;

    inset:0;

    background:
        rgba(25,20,16,.42);

    z-index:70;

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}


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

.cart-drawer{
    position:fixed;

    z-index:80;

    top:0;
    left:0;

    width:min(430px,92vw);

    height:100dvh;

    background:#fffdf9;

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

    transform:translateX(-105%);

    transition:
        transform .3s ease;

    display:flex;

    flex-direction:column;
}

.cart-drawer.open{
    transform:translateX(0);
}

.drawer-head{
    padding:25px 22px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.drawer-head h2{
    font-size:27px;

    font-weight:500;

    margin:5px 0 0;
}

.close-btn{
    font-size:28px;

    color:var(--muted);

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:50%;

    transition:
        background .2s ease;
}

.close-btn:hover{
    background:#f2e9de;
}

.cart-items{
    padding:18px;

    overflow:auto;

    flex:1;
}

.cart-item{
    display:grid;

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

    gap:12px;

    align-items:center;

    padding:12px 0;

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

.cart-item img{
    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:10px;
}

.cart-item h3{
    font-size:13px;

    margin:
        0 0 3px;
}

.cart-item small{
    color:var(--muted);

    font-size:10px;
}

.qty{
    display:flex;

    align-items:center;

    gap:7px;

    margin-top:7px;
}

.qty button{
    width:25px;
    height:25px;

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

    background:#fff;

    border-radius:7px;

    display:grid;
    place-items:center;
}

.remove-item{
    border:0;

    background:none;

    color:var(--danger);

    font-size:10px;
}

.cart-footer{
    padding:18px;

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

.total-line{
    display:flex;

    justify-content:space-between;

    margin-bottom:15px;

    font-size:14px;
}

.total-line strong{
    font-size:16px;
}

.qty-large{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;
}

.qty-large button{
    width:38px;
    height:38px;

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

    background:#fff;

    border-radius:9px;
}

.qty-large span{
    min-width:30px;

    text-align:center;

    font-weight:700;
}


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

.modal{
    position:fixed;

    inset:0;

    z-index:90;

    background:
        rgba(25,20,16,.48);

    display:grid;

    place-items:center;

    padding:18px;

    overflow:auto;

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

.modal-box{
    width:min(760px,100%);

    max-height:92dvh;

    overflow:auto;

    background:#fffdf9;

    border-radius:24px;

    position:relative;

    padding:30px;

    box-shadow:var(--shadow);
}

.product-modal-box{
    padding:18px;
}

.product-modal-content{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:28px;

    align-items:center;
}

.product-modal-content img{
    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:16px;
}

.product-modal-content h2{
    font-size:34px;

    font-weight:500;

    margin:8px 0;

    line-height:1.4;
}

.modal-price{
    font-size:22px;

    font-weight:800;

    margin:
        15px 0 22px;
}


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

.modal-heading{
    margin-bottom:20px;
}

.modal-heading h2{
    font-size:34px;

    font-weight:500;

    margin:5px 0;
}

.modal-heading p{
    color:var(--muted);

    margin:0;

    font-size:13px;
}

.checkout-box{
    width:min(620px,100%);
}

.checkout-box form{
    display:grid;

    gap:13px;
}

.checkout-box label,
.mobile-filter-panel label{
    font-size:11px;

    font-weight:700;
}

.checkout-box input,
.checkout-box textarea{
    width:100%;

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

    border-radius:12px;

    background:#fff;

    padding:12px;

    margin-top:5px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.checkout-box textarea{
    resize:vertical;

    min-height:100px;
}

.checkout-box input:focus,
.checkout-box textarea:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(157,135,107,.08);
}


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

.checkout-summary{
    border:
        1px solid
        var(--border);

    border-radius:14px;

    padding:13px;

    margin-top:3px;

    background:#fbf7f1;
}

.summary-line{
    display:flex;

    justify-content:space-between;

    gap:10px;

    font-size:11px;

    padding:5px 0;
}

.summary-total{
    border-top:
        1px solid
        var(--border);

    margin-top:6px;

    padding-top:10px;

    font-weight:800;
}

.form-error{
    min-height:0;

    color:#9a4f4f;

    font-size:11px;
}


/* =========================
   HONEYPOT
========================= */

.hp-field{
    position:absolute !important;

    left:-9999px !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;
}


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

.success-box{
    text-align:center;

    max-width:480px;
}

.success-icon{
    width:64px;
    height:64px;

    border-radius:50%;

    background:#edf4ee;

    color:#287b50;

    display:grid;
    place-items:center;

    font-size:32px;

    margin:
        0 auto 18px;
}

.success-box h2{
    font-size:32px;

    font-weight:500;

    margin:7px 0;
}

.success-box p{
    color:var(--muted);

    margin-bottom:25px;

    font-size:13px;
}


/* =========================
   MOBILE FILTER PANEL
========================= */

.mobile-filter-panel{
    position:fixed;

    z-index:85;

    bottom:0;
    right:0;
    left:0;

    background:#fffdf9;

    border-radius:
        24px 24px 0 0;

    padding:22px;

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

    display:grid;

    gap:12px;
}

.panel-head{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.panel-head h2{
    font-size:25px;

    font-weight:500;

    margin:0;
}

.panel-actions{
    display:grid;

    grid-template-columns:
        1fr
        1.5fr;

    gap:9px;

    margin-top:5px;
}


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

@media(max-width:1100px){

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

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

    .filters{
        grid-template-columns:
            1.6fr
            1fr
            1fr
            1fr;
    }

    .reset-btn{
        grid-column:auto;
    }

}


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

@media(max-width:800px){

    .container{
        width:min(
            calc(100% - 28px),
            620px
        );
    }

    .desktop-nav{
        display:none;
    }

    .menu-btn{
        display:grid;

        place-items:center;
    }

    .nav-wrap{
        height:68px;

        justify-content:space-between;
    }

    .brand{
        min-width:0;
    }

    .brand img{
        width:48px;
        height:48px;
    }

    .brand-text strong{
        font-size:16px;
    }

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


    /* HERO */

    .hero{
        min-height:650px;
    }

    .hero-grid{
        grid-template-columns:1fr;

        text-align:center;

        gap:0;
    }

    .hero-copy{
        padding:
            50px 0 15px;
    }

    .hero p{
        margin-left:auto;
        margin-right:auto;

        font-size:14px;
    }

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

    .hero-mark img{
        width:210px;
    }


    /* SECTIONS */

    .section{
        padding:70px 0;
    }

    .section-head{
        display:block;
    }

    .section-head p{
        margin-top:12px;
    }

    .section-head h2{
        font-size:34px;
    }


    /* CATEGORIES */

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


    /* PRODUCTS */

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

        gap:12px;
    }

    .desktop-filters{
        display:none;
    }

    .mobile-filter-row{
        display:block;

        margin-bottom:16px;
    }


    /* WHY */

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


    /* CONTACT */

    .contact-inner{
        display:block;
    }

    .contact-actions{
        margin-top:22px;
    }


    /* FOOTER */

    .footer-grid{
        grid-template-columns:
            1fr 1fr;

        gap:30px;
    }

    .footer-grid > div:first-child{
        grid-column:1/-1;
    }


    /* MODAL */

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

    .product-modal-content h2{
        font-size:27px;
    }

    .modal-box{
        padding:22px;
    }


    /* MOBILE MENU */

    .mobile-menu{
        position:absolute;

        top:68px;

        right:0;
        left:0;

        background:#fffdf9;

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

        padding:
            10px 18px;

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

}


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

@media(max-width:430px){

    .container{
        width:
            calc(100% - 24px);
    }

    .products-grid{
        gap:9px;
    }

    .product-body{
        padding:11px;
    }

    .product-name{
        font-size:12px;
    }

    .add-btn{
        font-size:9px;

        padding:
            7px 8px;
    }

    .price{
        font-size:12px;
    }

    .category-card{
        min-height:140px;

        padding:17px;
    }

    .category-icon{
        width:46px;
        height:46px;

        border-radius:14px;

        margin-bottom:13px;
    }

    .category-icon svg{
        width:24px;
        height:24px;
    }

    .hero h1{
        font-size:40px;
    }

    .hero p{
        font-size:13px;
    }

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

    .footer-grid > div:first-child{
        grid-column:auto;
    }

    .floating-actions{
        left:12px;
        bottom:12px;

        gap:8px;
    }

    .floating-actions a{
        width:44px;
        height:44px;
    }

    .floating-actions a svg{
        width:20px;
        height:20px;
    }

    .brand-text small{
        letter-spacing:1px;
    }

    .cart-drawer{
        width:94vw;
    }

    .contact-strip h2{
        font-size:31px;
    }

}


/* =========================
   EXTRA SMALL DEVICES
========================= */

@media(max-width:360px){

    .brand-text strong{
        font-size:14px;
    }

    .brand-text small{
        font-size:7px;
    }

    .icon-btn{
        width:40px;
        height:40px;
    }

    .hero h1{
        font-size:36px;
    }

    .section-head h2{
        font-size:30px;
    }

    .category-card{
        padding:14px;
    }

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

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

}


/* =========================
   REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }

}