/* HiGi Fashion House - Clean CSS */

:root {

    /* ===== Luxury African Fashion Colors ===== */

    --primary: #8C4B2D;
    /* Burnt Copper */
    --secondary: #D4AF37;
    /* Luxury Gold */
    --accent: #C96A1B;
    /* African Orange */

    --dark: #1A1614;
    /* Rich Black */
    --cream: #FAF5EF;
    /* Soft Ivory */
    --soft: #F3E8DA;
    /* Warm Beige */
    --white: #FFFFFF;

    --text: #2B211C;
    /* Deep Brown */
    --gray: #7D746D;

    /* Shadows */
    --shadow: rgba(0, 0, 0, .15);

    /* Luxury Gold */
    --gold-gradient: linear-gradient(135deg,
            #C79A2B,
            #F7DE88);

    /* Copper Gradient */
    --luxury-gradient: linear-gradient(135deg,
            #8C4B2D,
            #C96A1B);

    /* Elegant Neutral */
    --soft-gradient: linear-gradient(135deg,
            #FAF5EF,
            #F3E8DA);

}
/* =========================================================
   HIGI ACCOUNT INFORMATION
========================================================= */

.account-info-view{
    animation:accountFadeIn .35s ease;
}

@keyframes accountFadeIn{

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

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.account-profile-header{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:25px;
}

.profile-avatar{
    width:68px;
    height:68px;

    flex-shrink:0;

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

    border-radius:50%;

    background:var(--dark);
    color:var(--secondary);

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

    font-family:"Fraunces",serif;
    font-size:28px;
    font-weight:700;

    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

.profile-welcome{
    min-width:0;
}

.profile-welcome .account-badge{
    margin-bottom:6px;
}

.profile-welcome h2{
    margin:0 0 5px;

    font-family:"Fraunces",serif;

    font-size:27px;
    line-height:1.2;

    color:var(--dark);
}

.profile-welcome h2 span{
    color:var(--primary);
}

.profile-welcome p{
    margin:0;

    color:var(--gray);

    font-size:12px;
}


/* =========================================================
   ACCOUNT STATUS
========================================================= */

.account-status-card{
    display:flex;
    align-items:center;
    gap:13px;

    padding:15px;

    margin-bottom:25px;

    border:1px solid rgba(212,175,55,.25);
    border-radius:12px;

    background:rgba(212,175,55,.07);
}

.status-icon{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:50%;

    background:rgba(46,125,50,.10);
    color:#2e7d32;
}

.account-status-card strong{
    display:block;

    margin-bottom:3px;

    color:var(--dark);

    font-size:13px;
}

.account-status-card span{
    display:block;

    color:var(--gray);

    font-size:11px;
}


/* =========================================================
   ACCOUNT DETAILS
========================================================= */

/* =====================================================
   HiGi FASHION HOUSE
   ACCOUNT ICON
===================================================== */

.account-toggle-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    text-decoration:none;

    color:inherit;

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

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

    cursor:pointer;

    transition:
        color .3s ease,
        transform .3s ease;
}


/* ACCOUNT ICON */

.account-toggle-btn i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border:1px solid currentColor;

    border-radius:50%;

    font-size:15px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


/* ACCOUNT TEXT */

.account-name{
    white-space:nowrap;

    transition:
        color .3s ease;
}


/* HOVER */

.account-toggle-btn:hover{
    transform:translateY(-1px);
}

.account-toggle-btn:hover i{
    background:var(--primary,#8C4B2D);

    color:#fff;

    border-color:var(--primary,#8C4B2D);

    transform:scale(1.05);
}


/* =====================================================
   HEADER TRANSPARENT STATE
===================================================== */

.header:not(.light-header) .account-toggle-btn{
    color:#fff;
}


/* =====================================================
   HEADER LIGHT STATE
===================================================== */

.header.light-header .account-toggle-btn{
    color:var(--text,#2B211C);
}


/* =====================================================
   ACCOUNT NUMBER / BADGE
===================================================== */

.account-toggle-btn .account-name{
    display:inline-block;
}


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

@media(max-width:768px){

    .account-toggle-btn{
        gap:0;
    }

    .account-toggle-btn .account-name{
        display:none;
    }

    .account-toggle-btn i{
        width:36px;
        height:36px;

        font-size:14px;
    }

}
.account-details-section{
    padding:22px;

    margin-bottom:20px;

    border:1px solid rgba(140,75,45,.12);
    border-radius:15px;

    background:var(--white);
}

.account-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;
}

.account-section-heading h3{
    margin:3px 0 0;

    font-family:"Fraunces",serif;

    font-size:20px;

    color:var(--dark);
}

.account-section-heading > i{
    color:var(--secondary);
    font-size:20px;
}

.mini-label{
    color:var(--primary);

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

    letter-spacing:1.5px;
}


.account-detail-item{
    display:flex;
    align-items:center;

    gap:13px;

    padding:13px 0;

    border-bottom:1px solid rgba(140,75,45,.08);
}

.account-detail-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.detail-icon{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:9px;

    background:rgba(140,75,45,.07);
    color:var(--primary);
}

.detail-content{
    min-width:0;
}

.detail-content span{
    display:block;

    margin-bottom:3px;

    color:var(--gray);

    font-size:10px;
}

.detail-content strong{
    display:block;

    overflow:hidden;

    color:var(--text);

    font-size:13px;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.account-quick-actions{
    display:flex;
    flex-direction:column;

    gap:9px;

    margin-bottom:22px;
}

.account-action-card{
    width:100%;

    display:flex;
    align-items:center;

    gap:13px;

    padding:14px;

    border:1px solid rgba(140,75,45,.10);
    border-radius:11px;

    background:var(--white);

    color:var(--text);

    text-decoration:none;

    cursor:pointer;

    text-align:left;

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

.account-action-card > i:first-child{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:9px;

    background:rgba(212,175,55,.10);
    color:var(--secondary);
}

.account-action-card span{
    flex:1;
}

.account-action-card strong{
    display:block;

    margin-bottom:2px;

    font-size:13px;

    color:var(--dark);
}

.account-action-card small{
    display:block;

    color:var(--gray);

    font-size:10px;
}

.account-action-card .arrow{
    color:#aaa;
    font-size:12px;
}

.account-action-card:hover{
    transform:translateX(4px);

    border-color:rgba(212,175,55,.45);

    box-shadow:0 6px 20px rgba(0,0,0,.06);
}


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

.account-bottom-actions{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-bottom:20px;
}

.edit-account-btn,
.logout-account-btn{
    height:45px;

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

    gap:8px;

    border-radius:9px;

    font-family:"Work Sans",sans-serif;
    font-size:12px;
    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;
}

.edit-account-btn{
    border:1px solid rgba(140,75,45,.20);

    background:transparent;

    color:var(--primary);
}

.edit-account-btn:hover{
    background:rgba(140,75,45,.07);
    border-color:var(--primary);
}

.logout-account-btn{
    border:1px solid rgba(190,50,50,.18);

    background:rgba(190,50,50,.05);

    color:#b83b3b;
}

.logout-account-btn:hover{
    background:#b83b3b;
    color:var(--white);
}


/* =========================================================
   EDIT PROFILE
========================================================= */

.edit-profile-panel{
    padding:22px;

    margin-top:10px;

    border:1px solid rgba(212,175,55,.30);
    border-radius:15px;

    background:rgba(212,175,55,.05);

    animation:accountFadeIn .3s ease;
}

.edit-profile-actions{
    display:flex;
    gap:10px;

    margin-top:18px;
}

.edit-profile-actions .btn{
    flex:1;

    min-height:45px;

    border:none;

    cursor:pointer;
}

.edit-cancel-btn{
    flex:1;

    border:1px solid rgba(140,75,45,.18);
    border-radius:9px;

    background:transparent;

    color:var(--gray);

    cursor:pointer;

    font-family:"Work Sans",sans-serif;
    font-weight:600;
}

.edit-cancel-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}


/* =========================================================
   ACCOUNT MESSAGE
========================================================= */

.account-message{
    display:none;

    padding:11px 13px;

    margin-top:15px;

    border-radius:8px;

    text-align:center;

    font-size:11px;
}

.account-message.success{
    display:block;

    background:rgba(46,125,50,.08);
    color:#2e7d32;

    border:1px solid rgba(46,125,50,.15);
}

.account-message.error{
    display:block;

    background:rgba(190,50,50,.08);
    color:#b83b3b;

    border:1px solid rgba(190,50,50,.15);
}


/* =========================================================
   HEADER LOGGED-IN ACCOUNT
========================================================= */

.account-toggle-btn{
    position:relative;

    display:flex;
    align-items:center;
    gap:7px;
}

.account-name{
    max-width:90px;

    overflow:hidden;

    font-size:12px;
    font-weight:500;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-badge{
    padding:3px 6px;

    border-radius:4px;

    background:var(--secondary);

    color:var(--dark);

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

    letter-spacing:.5px;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle{
    position:absolute;

    right:7px;

    width:38px;
    height:38px;

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

    border:none;
    border-radius:7px;

    background:transparent;

    color:var(--gray);

    cursor:pointer;
}

.password-toggle:hover{
    color:var(--primary);
    background:rgba(140,75,45,.06);
}


/* =========================================================
   HIDDEN
========================================================= */

.hidden{
    display:none !important;
}


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

@media(max-width:600px){

    .account-profile-header{
        align-items:flex-start;
    }

    .profile-avatar{
        width:58px;
        height:58px;

        font-size:24px;
    }

    .profile-welcome h2{
        font-size:23px;
    }

    .account-details-section{
        padding:17px;
    }

    .account-section-heading h3{
        font-size:18px;
    }

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

    .account-name{
        display:none;
    }

    .edit-profile-panel{
        padding:17px;
    }

}

@media(max-width:380px){

    .profile-avatar{
        width:50px;
        height:50px;

        font-size:21px;
    }

    .profile-welcome h2{
        font-size:20px;
    }

    .account-status-card{
        padding:12px;
    }

}
/* =====================================================
   HiGi Fashion House
   FULL-SCREEN MODERN SEARCH
   GUARANTEED PAGE SCROLL
===================================================== */


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

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

.search-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 3000;
    overflow-y: auto;
    display: none;
}

.search-modal.active {
    display: block;
}

.search-box {
    width: 100%;
    min-height: 100vh;
    padding: 30px 7%;
    box-sizing: border-box;
}

.search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.search-header h2 {
    margin: 0;
    color: var(--primary);
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
}

.close-search {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--primary);
    cursor: pointer;
}

.search-input-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 25px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: #fff;
}

.search-input-box input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
}

#searchResults {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.search-product {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

.search-product img {
    width: 100px;
    height: 120px;
    flex: 0 0 100px;
    object-fit: cover;
    border-radius: 10px;
}

.search-info {
    min-width: 0;
    flex: 1;
}

.search-info h4 {
    margin: 0 0 8px;
}

.search-info p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.search-product button {
    cursor: pointer;
}

body.search-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .search-box {
        padding: 25px 5%;
    }

    #searchResults {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .search-product img {
        width: 80px;
        height: 100px;
        flex-basis: 80px;
    }
}


/* =====================================================
   IMPORTANT MOBILE FIX
===================================================== */

html,
body{
    max-width:100%;
}


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

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

    .search-modal,
    .search-product,
    .search-product button,
    .close-search,
    .trending-searches button,
    .search-input-box{

        transition:none;
    }

}

/* ================= ACCOUNT MODAL ================= */
.account-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 2500;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-modal.active {
    display: flex;
    opacity: 1;
}

.account-box {
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    padding: 40px 32px 32px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: accountSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes accountSlideUp {
    from {
        transform: translateY(25px) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.close-account-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f4f4f5;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #52525b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-account-btn:hover {
    background: #e4e4e7;
    color: #09090b;
}

.account-header {
    text-align: center;
    margin-bottom: 24px;
}

.account-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary, #b8860b);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184, 134, 11, 0.08);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.account-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 6px;
}

.account-header p {
    font-size: 0.88rem;
    color: #71717a;
    line-height: 1.4;
}

/* Tabs */
.account-tabs {
    display: flex;
    background: #f4f4f5;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #71717a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: #ffffff;
    color: #18181b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Form Styles */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field.hidden {
    display: none;
}

.field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #27272a;
}

.forgot-link {
    font-size: 0.8rem;
    color: var(--primary, #b8860b);
    text-decoration: none;
    font-weight: 500;
}

.forgot-link:hover {
    text-decoration: underline;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 14px;
    color: #a1a1aa;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.input-wrapper input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border-radius: 10px;
    border: 1.5px solid #e4e4e7;
    background: #fcfcfc;
    font-size: 0.92rem;
    color: #18181b;
    outline: none;
    transition: all 0.2s ease;
}

.input-wrapper input:focus {
    border-color: var(--primary, #b8860b);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.12);
}

.input-wrapper input:focus + i,
.input-wrapper input:focus ~ i {
    color: var(--primary, #b8860b);
}

.account-submit-btn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}

/* Divider & Socials */
.account-divider {
    text-align: center;
    position: relative;
    margin: 22px 0;
}

.account-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e4e4e7;
}

.account-divider span {
    position: relative;
    background: #ffffff;
    padding: 0 12px;
    font-size: 0.78rem;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.social-login-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.social-btn {
    padding: 10px;
    border-radius: 10px;
    border: 1.5px solid #e4e4e7;
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    color: #27272a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.social-btn:hover {
    background: #f4f4f5;
    border-color: #d4d4d8;
}

.social-btn.whatsapp-btn i {
    color: #25d366;
}

.account-footer-text {
    text-align: center;
    font-size: 0.85rem;
    color: #71717a;
}

.account-footer-text a {
    color: var(--primary, #b8860b);
    font-weight: 600;
    text-decoration: none;
}

.account-footer-text a:hover {
    text-decoration: underline;
}
/* =====================================================
   FEATURED DRAWER
===================================================== */
.wishlist-drawer {
    position: fixed;
    right: -450px;
    top: 0;
    width: 420px;
    height: 100vh;
    background: white;
    z-index: 3000;
    padding: 30px;
    transition: .5s ease;
    overflow-y: auto;
    box-shadow: -20px 0 50px rgba(0,0,0,.2);
}

.wishlist-drawer.active {
    right: 0;
}

.empty-featured {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.empty-featured i {
    font-size: 70px;
    color: #D4AF37;
    margin-bottom: 20px;
}

.empty-featured h3 {
    color: #241018;
}

/* Wishlist image */
.cart-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 20px;
}

/* Wishlist buttons */
.cart-buttons button {
    padding: 10px 15px;
    border-radius: 30px;
    background: #E75480;
    color: white;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

/* ================= LOGO ================= */
.logo {
    flex: 1;
    text-align: center;
}

.logo h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #D4AF37;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

.logo span {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #F7D774;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .9),
        0 0 15px rgba(0, 0, 0, .7);
}
/* =====================================================
   HEADER - HiGi Fashion House
===================================================== */

/* ================= HEADER ================= */
/* Navigation Auth Button */
.nav-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #18181b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-auth-btn:hover {
  background: #e4e4e7;
}

.nav-auth-btn.logged-in {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* Role Badges */
.role-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  margin-left: 6px;
}
.hidden {
  display: none !important;
}
/* Navigation Bar Styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e7;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.auth-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Helper class to toggle elements with JavaScript */
.hidden {
  display: none !important;
}

.auth-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.role-badge.admin {
  background: #fee2e2;
  color: #991b1b;
}

.role-badge.user {
  background: #dbeafe;
  color: #1e40af;
}

/* Visibility Utility */
.hidden {
  display: none !important;
}

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    background:transparent;

    z-index:1000;

    transition:.45s ease;

}

/* ================= SMART LIGHT BACKGROUND HEADER ================= */

.header.light-header{

    height:70px;

    background:
    rgba(255,247,242,.92);

    backdrop-filter:
    blur(15px);

    box-shadow:
    0 10px 35px rgba(36,16,24,.15);

}

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

.logo h1,
.logo span{

    color:white;

    transition:.4s ease;

}

.header.light-header .logo h1,
.header.light-header .logo span{

    color:#241018;

}

/* ================= NAVIGATION ================= */
.nav a {
    color: white;
    transition: .3s;
    font-weight: 600;
}

.header.light-header .nav a{

    color:#241018;

}

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

.header button{

    background:none;

    border:none;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.4s ease;

}

.header.light-header button{

    color:#241018;

}

.header.light-header i{

    color:#241018;

}

/* Hamburger */
#menuBtn i {
    transition: .3s ease;
}

.header.light-header #menuBtn i{

    color:#E75480;

}

/* Hover */

.header button:hover{

    color:#D4AF37;

    transform:translateY(-3px);

}

/* ================= ICON BADGES ================= */

.header-icons button{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Icon counters */
.header-icons span {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #C96A1B;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .65rem;
    font-weight: 700;
}

.cart-buttons button:hover{

    background:#D4AF37;

}

/* ================= LEFT ICONS ================= */
.left-icons,
.header-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.left-icons button,
.header-icons button {
    color: #ffffff;
    font-size: 1.5rem;
}

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

.nav {
    display: flex;
    gap: 35px;
}

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

/* ================= RIGHT ICONS ================= */

.header-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hero {
    min-height: 100vh;

    /* Push the hero content below the fixed header */
    padding: 140px 8% 80px;

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

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.35)),
         url("../images/fashion-model168.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: 650px;
    color: var(--white);
}

.hero .tag {
    color: var(--secondary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.hero h2 {
    font-size: 4.5rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--white);

    text-shadow:
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 8px 25px rgba(0, 0, 0, 0.5);
}

.hero p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.6);

    margin-bottom: 35px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* ================= PRODUCT CARDS ================= */

.card {
    background: var(--cream);
    border-radius: 20px;
    box-shadow: 0 20px 50px var(--shadow);
    transition: all 0.3s ease;
}

.card:hover {
    border-color: var(--secondary);
    transform: translateY(-8px);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        'Work Sans',
        sans-serif;
    background:
        var(--cream);
    color:
        var(--text);
    line-height: 1.6;
}

h1,
h2,
h3,
h4 {
    font-family:
        'Fraunces',
        serif;
}

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

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

button {
    cursor: pointer;
    border: none;
    background: none;
}

section {
    padding:
        90px 8%;
}

/* ================= BUTTONS ================= */
.btn {
    display: inline-block;
    padding:
        15px 35px;
    border-radius:
        50px;
    font-weight: 600;
    transition: .4s;
}

.primary {
    background:
        var(--luxury-gradient);
    color: white;
    box-shadow:
        0 10px 30px rgba(139, 30, 63, .35);
}

.primary:hover {
    transform:
        translateY(-5px);
    box-shadow:
        0 20px 40px rgba(139, 30, 63, .45);
}

.secondary {
    border:
        2px solid white;
    color: white;
}

.secondary:hover {
    background: white;
    color:
        var(--primary);
}

#menuBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    transition: .3s ease;
}

#menuBtn:hover {
    color: var(--secondary);
    transform: scale(1.1);
}
/* =====================================================
   MOBILE MENU CLOSE BUTTON
===================================================== */

.mobile-menu-close{
    position:absolute;

    top:20px;
    right:20px;

    width:44px;
    height:44px;

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

    padding:0;

    border:1px solid rgba(140,75,45,.15);

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    font-size:20px;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

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


.mobile-menu-close:hover{
    background:var(--primary);

    color:#fff;

    transform:rotate(90deg);
}


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

.mobile-menu{
    position:fixed;

    top:0;
    right:0;

    width:min(380px,88vw);

    height:100dvh;

    z-index:5001;

    box-sizing:border-box;

    padding:85px 30px 30px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf6 55%,
            #FAF5EF 100%
        );

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

    transform:translateX(105%);

    visibility:hidden;

    transition:
        transform .4s cubic-bezier(.4,0,.2,1),
        visibility .4s ease;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;
}


.mobile-menu.active{
    transform:translateX(0);

    visibility:visible;
}


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

.mobile-menu-header{
    margin-bottom:35px;

    padding-bottom:20px;

    border-bottom:
        1px solid
        rgba(140,75,45,.12);
}


.mobile-menu-header h2{
    margin:0;

    color:var(--primary);

    font-family:
        'Fraunces',
        Georgia,
        serif;

    font-size:2.2rem;

    font-weight:500;
}


.mobile-menu-header span{
    display:block;

    margin-top:3px;

    color:var(--secondary);

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;
}


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

.mobile-menu-links{
    display:flex;

    flex-direction:column;

    gap:8px;
}


.mobile-menu-links a{
    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 15px;

    border-radius:12px;

    color:var(--dark);

    text-decoration:none;

    font-size:1rem;

    font-weight:600;

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


.mobile-menu-links a i{
    width:22px;

    color:var(--primary);

    font-size:17px;

    text-align:center;
}


.mobile-menu-links a:hover{
    background:#f5e9dc;

    color:var(--primary);

    transform:translateX(5px);
}


.mobile-menu-links a:hover i{
    color:var(--secondary);
}


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

.mobile-menu-footer{
    margin-top:40px;

    padding-top:20px;

    border-top:
        1px solid
        rgba(140,75,45,.12);

    color:var(--primary);
}


.mobile-menu-footer span{
    display:block;

    font-size:.85rem;

    font-weight:600;
}


.mobile-menu-footer small{
    display:block;

    margin-top:6px;

    color:#888;

    font-size:.72rem;

    line-height:1.5;
}


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

.menu-overlay{
    position:fixed;

    inset:0;

    z-index:5000;

    background:
        rgba(26,22,20,.55);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.menu-overlay.active{
    opacity:1;

    visibility:visible;
}


/* =====================================================
   PREVENT BACKGROUND SCROLL
===================================================== */

body.menu-open{
    overflow:hidden;
}


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

@media(max-width:480px){

    .mobile-menu{
        width:92vw;

        padding:
            80px 22px 25px;
    }


    .mobile-menu-close{
        top:15px;
        right:15px;

        width:40px;
        height:40px;

        font-size:18px;
    }


    .mobile-menu-header h2{
        font-size:2rem;
    }


    .mobile-menu-links a{
        padding:14px 12px;

        font-size:.95rem;
    }

}
/* ================= STATS ================= */
.stats {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    background: white;
    text-align: center;
}

.stats h3 {
    font-size:
        3rem;
    color:
        var(--primary);
}

.stats p {
    color:
        var(--gray);
}

/* ================= SECTION TITLES ================= */
.section-title {
    text-align: center;
    max-width: 750px;
    margin:
        auto auto 60px;
}

.section-title span {
    text-transform: uppercase;
    letter-spacing: 4px;
    color:
        var(--primary);
    font-size: .8rem;
    font-weight: 600;
}

.section-title h2 {
    font-size: 3rem;
    margin: 15px 0;
    background: linear-gradient(90deg,
            var(--primary),
            var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ================= PRODUCTS ================= */
.products {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 35px;
}

.product-card {
    position: relative;
    overflow: hidden;
    background: white;
    border-radius: 25px;
    box-shadow:
        var(--shadow);
    transition: .5s;
    border:
        1px solid rgba(212, 175, 55, .2);
}

.product-card:hover {
    transform:
        translateY(-15px);
    box-shadow:
        0 30px 70px rgba(139, 30, 63, .25);
}

.product-card img {
    height: 380px;
    object-fit: cover;
    transition: .5s;
}

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

.product-info {
    padding: 30px;
}

.product-info h3 {
    font-size:
        1.4rem;
}

.product-info p {
    color:
        var(--gray);
    margin-top: 10px;
}

.rating {
    color:
        #D4AF37;
    margin-top: 15px;
}

.price-row {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-row h4 {
    color:
        var(--primary);
    font-size:
        1.2rem;
}

.price-row button {
    background:
        var(--luxury-gradient);
    color: white;
    padding:
        10px 20px;
    border-radius:
        30px;
}

.badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background:
        var(--gold-gradient);
    color:
        var(--dark);
    padding:
        7px 15px;
    border-radius:
        30px;
    font-weight: 700;
    z-index: 5;
}

.wishlist {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    z-index: 5;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, .1);
}

/* ================= CRAFT ================= */
.craft-container {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 60px;
    align-items: center;
}

.craft-image img {
    border-radius: 35px;
    box-shadow:
        var(--shadow);
}

.craft-card {
    display: flex;
    gap: 25px;
    margin-bottom: 35px;
}

.number {
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        var(--luxury-gradient);
    color: white;
    font-weight: bold;
}

/* =====================================================
   ABOUT SECTION - HiGi Fashion House Luxury Style
===================================================== */
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 120px 8%;
    background: #FFF7F2;
}

.about-image img {
    border-radius: 35px;
}

.about-content li {
    margin:
        15px 0;
    list-style: none;
}

/* ================= BANNER ================= */
.banner {
    color: white;
    text-align: center;
    background:
        linear-gradient(rgba(18, 13, 10, .6),
            rgba(18, 13, 10, .6)),
        url("../images/banner.jpg");
    background-size: cover;
    background-position: center;
}

.banner h2 {
    font-size:
        4rem;
}

/* ================= PHOTO VIEWER ================= */

.product-viewer {

    position: fixed;

    inset: 0;

    background: black;

    z-index: 99999;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.product-viewer.active {

    display: flex;

}

.product-viewer img {

    max-height: 70vh;

    max-width: 90%;

    object-fit: contain;

}

.viewer-info {
    background: white;
    width: 100%;
    padding: 20px;
    text-align: center;
    position: absolute;
    bottom: 0;
}

.viewer-info h2 {
    color: var(--primary);
    margin-bottom: 10px;
}

#closeViewer {

    position: absolute;

    top: 30px;

    right: 30px;

    color: white;

    font-size: 30px;

    z-index: 5;

}

#prevPhoto,
#nextPhoto {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: white;

    width: 50px;

    height: 50px;

    border-radius: 50%;

}

#prevPhoto {

    left: 20px;

}

#nextPhoto {

    right: 20px;

}

/* ================= WISHLIST ================= */

.wishlist i {
    color: inherit;
}

.wishlist.liked i {
    color: #e63946 !important;
}

/* ================= PHOTO VIEWER ================= */

.photo-viewer {

    position: fixed;

    inset: 0;

    background: #000;

    display: none;

    z-index: 9999;

}

.photo-viewer.active {

    display: flex;

    align-items: center;

    justify-content: center;

}

.viewer-content {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.viewer-content img {

    width: 100%;

    height: 75vh;

    object-fit: contain;

}

.viewer-info button {

    background: #e75480;

    color: white;

    border: none;

    padding: 12px 30px;

    border-radius: 30px;

}

.close-viewer {

    position: absolute;

    top: 20px;

    right: 20px;

    background: none;

    color: white;

    font-size: 30px;

    border: none;

    z-index: 10;

}

.viewer-prev,
.viewer-next {

    position: absolute;

    top: 45%;

    background: none;

    border: none;

    color: white;

    font-size: 35px;

}

.viewer-prev {

    left: 20px;

}

.viewer-next {

    right: 20px;

}

@keyframes heartBeat {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
    }

    100% {
        transform: scale(1.3);
    }

}

.product-actions {
    display: flex;
    gap: 10px;
}

.product-actions button {
    border: none;
    padding: 10px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
}

.cart-btn {
    background: var(--primary);
    color: white;
}

.product-actions button:hover {
    transform: translateY(-3px);
}

/* ================= TESTIMONIALS ================= */
.review-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 35px;
}

.review-card {
    background: white;
    padding: 40px;
    border-radius: 25px;
    box-shadow:
        var(--shadow);
    text-align: center;
    transition: .4s;
}

.review-card:hover {
    transform:
        translateY(-10px);
}

.review-card .stars {
    color:
        var(--secondary);
    font-size:
        1.4rem;
}

.review-card h3 {
    color:
        var(--primary);
    margin-top: 20px;
}

/* ================= CUSTOM ORDER ================= */
.custom-order-section {
    background: #fafafa;
    padding: 80px 20px;
}

.custom-container {
    max-width: 950px;
    margin: 0 auto;
}

.custom-header {
    text-align: center;
    margin-bottom: 45px;
}

.custom-header .section-tag {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary, #b8860b);
    display: inline-block;
    margin-bottom: 8px;
}

.custom-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.custom-header p {
    color: #666;
    max-width: 580px;
    margin: 0 auto;
    font-size: 0.98rem;
    line-height: 1.6;
}

.custom-form {
    max-width: 950px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background-color: #fcfcfc;
    font-family: inherit;
    font-size: 0.95rem;
    color: #2d3748;
    outline: none;
    transition: all 0.25s ease-in-out;
}
/* =====================================================
   SEARCH IMAGE
   CLICKABLE
===================================================== */

.search-product-image{
    cursor:pointer;

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

.search-product-image:hover{
    transform:scale(1.04);

    filter:brightness(.92);

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);
}


/* =====================================================
   GALLERY HIGHLIGHT
===================================================== */

.gallery-search-highlight{
    animation:
        gallerySearchHighlight 2s ease;
}


@keyframes gallerySearchHighlight{

    0%{
        transform:scale(1);
        box-shadow:
            0 0 0 rgba(212,175,55,0);
    }

    30%{
        transform:scale(1.03);
        box-shadow:
            0 0 0 5px rgba(212,175,55,.35),
            0 15px 40px rgba(0,0,0,.15);
    }

    70%{
        transform:scale(1.03);
        box-shadow:
            0 0 0 5px rgba(212,175,55,.25),
            0 15px 40px rgba(0,0,0,.15);
    }

    100%{
        transform:scale(1);
        box-shadow:
            0 0 0 rgba(212,175,55,0);
    }

}

/* Custom styling for standard select dropdown */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%20718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a0aec0;
    font-size: 0.9rem;
}

/* Hover and Focus States */
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #cbd5e0;
    background-color: #ffffff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary, #b8860b);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.12);
}

/* Full Width Fields */
.form-group:nth-child(3),
.form-group:nth-child(4),
.form-group.full {
    grid-column: 1 / -1;
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

/* Button Styling */
.custom-submit-btn {
    grid-column: 1 / -1;
    width: 100%;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    background-color: #25d366;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
    transition: all 0.3s ease;
    margin-top: 10px;
}

.custom-submit-btn:hover {
    background-color: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
}

.custom-submit-btn:active {
    transform: translateY(0);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .custom-form {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 18px;
    }

    .form-group:nth-child(3),
    .form-group:nth-child(4) {
        grid-column: 1;
    }
}
/* ================= NEWSLETTER ================= */
.newsletter {
    background:
        linear-gradient(135deg,
            #120D0A,
            #3A1724);
    color: white;
    text-align: center;
}

.newsletter-content {
    max-width: 700px;
    margin: auto;
}

.newsletter form {
    margin-top: 30px;
    display: flex;
}

.newsletter input {
    flex: 1;
    padding: 18px;
    border: none;
    border-radius:
        40px 0 0 40px;
}

.newsletter button {
    padding:
        0 35px;
    background:
        var(--secondary);
    color:
        var(--dark);
    border-radius:
        0 40px 40px 0;
}

/* ================= OVERLAY ================= */
.overlay {
    position: fixed;
    inset: 0;
    background:
        rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 1500;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ================= CART DRAWER ================= */
.cart-drawer {
    position: fixed;
    right: -450px;
    top: 0;
    width: 420px;
    height: 100vh;
    background: white;
    z-index: 2000;
    padding: 30px;
    transition: .5s;
    display: flex;
    flex-direction: column;
}

.cart-drawer.active {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    border-bottom:
        1px solid #ddd;
    padding-bottom: 20px;
}

#cartItems {
    flex: 1;
    overflow-y: auto;
}

.cart-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom:
        1px solid #eee;
}

.search-content {
    background: white;
    width: 600px;
    max-width: 90%;
    padding: 40px;
    border-radius: 30px;
}

.search-content input {
    width: 100%;
    padding: 18px;
    border-radius: 30px;
    border: 1px solid #ddd;
}

/* ================= FOOTER ================= */
.footer {
    background:
        linear-gradient(135deg,
            #120D0A,
            #3A1724);
    color: white;
    padding:
        70px 8% 20px;
}

.footer-container {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column h2,
.footer-column h3 {
    color:
        var(--secondary);
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top:
        1px solid rgba(255, 255, 255, .2);
    display: flex;
    justify-content: space-between;
}

/* ================= ANIMATIONS ================= */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform:
            translateY(40px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}

.product-card,
.review-card {
    animation:
        fadeUp .8s ease;
}

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background:
        var(--primary);
    border-radius: 20px;
}
.pay-btn {
    background:#E75480 !important;
    color:white !important;
    border:none !important;
}

.pay-btn:hover{
    background:#B76E79 !important;
}
/* ================= IMAGE ================= */
.about-image {
    position: relative;
}

.image-frame {
    overflow: hidden;
    border-radius: 40px;
    position: relative;
    height: 720px;
    box-shadow: 0 35px 80px rgba(36,16,24,.25);
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
    display: block;
}

.image-frame:hover img {
    transform: scale(1.08);
}

/* Luxury badge */

.about-badge{

    position:absolute;

    bottom:30px;

    left:30px;

    background:#D4AF37;

    color:white;

    padding:16px 30px;

    border-radius:50px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:700;

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

}

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

.about-content{

    max-width:620px;

}

.section-tag{

    color:#E75480;

    font-size:14px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

}

.about-content h2{

    font-family:'Fraunces',serif;

    color:#241018;

    font-size:52px;

    line-height:1.15;

    margin:20px 0;

}

.about-content p{

    color:#5c4a50;

    font-size:17px;

    line-height:1.9;

}

/* ================= FEATURES ================= */

.about-features{

    display:grid;

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

    gap:20px;

    margin:35px 0;

    padding:0;

}

.about-features li{

    list-style:none;

    background:white;

    padding:15px 18px;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:12px;

    color:#241018;

    font-weight:600;

    box-shadow:
    0 8px 25px rgba(36,16,24,.08);

}

.about-features i{

    color:#D4AF37;

    font-size:20px;

}

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

.about-actions{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* WhatsApp Custom Design Button */

.about-actions .primary{

    background:#E75480;

    color:white;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    border:none;

    transition:.35s ease;

}

.about-actions .primary:hover{

    background:#D4AF37;

    transform:translateY(-4px);

}

/* Secondary Button */

.about-actions .secondary{

    background:#241018;

    color:#FFF7F2;

    border:2px solid #D4AF37;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.35s ease;

}

.about-actions .secondary:hover{

    background:#D4AF37;

    color:#241018;

    transform:translateY(-4px);

}

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

@media(max-width:1000px){

.about{

    grid-template-columns:1fr;

    padding:80px 5%;

}

.image-frame{

    height:650px;

}

.about-content h2{

    font-size:40px;

}

}

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

@media(max-width:600px){

.about{

    padding:60px 20px;

}

.image-frame{

    height:500px;

    border-radius:30px;

}

.about-content h2{

    font-size:32px;

}

.about-features{

    grid-template-columns:1fr;

}

.about-actions{

    flex-direction:column;

}

.about-actions a{

    width:100%;

    text-align:center;

}

}
/* =====================================================
   HiGi Fashion House — UX / Responsive Enhancements
   NOTE: Existing color palette is intentionally unchanged.
===================================================== */
/* =====================================================
   HiGi Fashion House
   Final Luxury Gallery + Testimonials
===================================================== */

/* ================= GALLERY ================= */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.gallery-grid img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 25px;
    transition: transform .5s ease, box-shadow .5s ease;
}

.gallery-grid img:hover {
    transform: scale(1.04);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}

/* ================= GALLERY MODAL ================= */

.gallery-modal{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:flex-start;
justify-content:center;
padding:0;
background:#fff;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .35s ease,visibility .35s ease;
}

.gallery-modal.active{
opacity:1;
visibility:visible;
pointer-events:auto;
}


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

.gallery-modal-content{
width:100%;
height:100%;
max-height:100vh;
border-radius:0;
margin:0;
background:#fff;
}


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

.gallery-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:30px 35px;
border-bottom:1px solid rgba(0,0,0,.08);
background:#fff;
}

.gallery-modal-title span{
display:block;
margin-bottom:6px;
color:var(--secondary);
font-size:.78rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}

.gallery-modal-title h2{
margin:0;
color:var(--primary);
font-family:"Fraunces",serif;
font-size:clamp(1.7rem,3vw,2.6rem);
line-height:1.1;
}

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

.close-gallery {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;

    background: var(--cream);
    color: var(--text);

    font-size: 1.15rem;

    cursor: pointer;

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

.close-gallery:hover {
    background: var(--primary);
    color: var(--white);

    transform: rotate(90deg);
}


/* ================= MODAL BODY ================= */

.gallery-modal-body {
    max-height: calc(92vh - 110px);

    overflow-y: auto;

    padding: 30px 35px 40px;

    scrollbar-width: thin;
}

.gallery-subtitle {
    max-width: 760px;

    margin: 0 auto 30px;

    color: var(--gray);

    text-align: center;

    line-height: 1.7;
}


/* ================= GALLERY CONTROLS ================= */

.gallery-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;

    padding: 18px;

    border-radius: 18px;

    background: var(--white);

    box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
}


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

.gallery-search-wrapper {
    position: relative;

    width: min(420px, 100%);
}

.gallery-search-wrapper i {
    position: absolute;

    top: 50%;
    left: 16px;

    transform: translateY(-50%);

    color: var(--gray);

    pointer-events: none;
}

.gallery-search-wrapper input {
    width: 100%;

    height: 48px;

    padding: 0 18px 0 45px;

    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;

    outline: none;

    background: var(--cream);
    color: var(--text);

    font-family: inherit;
    font-size: .95rem;

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

.gallery-search-wrapper input:focus {
    border-color: var(--secondary);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, .15);
}

.gallery-search-wrapper input::placeholder {
    color: var(--gray);
}


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

.gallery-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;
}

.gallery-filter-btn {
    padding: 11px 17px;

    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;

    background: var(--cream);
    color: var(--text);

    font-family: inherit;
       transition: transform .3s ease;
}

.gallery-filter-btn:hover {
    border-color: var(--secondary);

    transform: translateY(-2px);
}

.gallery-filter-btn.active {
    border-color: var(--primary);

    background: var(--primary);
    color: var(--white);
}


/* ================= LUXURY GALLERY GRID ================= */

/*
   The updated HTML uses:

   <div class="products gallery-luxury-grid">

   Therefore we override the normal product-grid
   behavior specifically for the gallery.
*/

.gallery-luxury-grid {
    display: grid;

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

    gap: 22px;

    align-items: stretch;
}


/* ================= GALLERY CARD ================= */

.gallery-luxury-grid .gallery-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    min-height: 340px;

    border-radius: 20px;

    background: var(--dark);

    cursor: pointer;

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

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

.gallery-luxury-grid .gallery-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .22);
}


/* ================= GALLERY IMAGE ================= */

.gallery-luxury-grid .gallery-card img {
    width: 100%;
    height: 100%;
    min-height: 340px;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2, .7, .2, 1);
}

.gallery-luxury-grid .gallery-card:hover img {
    transform: scale(1.08);
}


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

.gallery-card-overlay {
    position: absolute;

    inset: auto 0 0 0;

    padding: 55px 20px 20px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .88),
            rgba(0, 0, 0, .45),
            transparent
        );

    color: var(--white);

    transform: translateY(0);

    transition: .4s ease;
}

.gallery-luxury-grid .gallery-card:hover
.gallery-card-overlay {
    padding-bottom: 24px;
}


/* ================= GALLERY TAG ================= */

.gallery-tag {
    display: inline-block;

    margin-bottom: 8px;
    padding: 5px 10px;

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;

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

    color: var(--white);

    font-size: .68rem;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ================= GALLERY TITLE ================= */

.gallery-card-overlay h3 {
    margin: 5px 0;

    color: var(--white);

    font-family: "Fraunces", serif;

    font-size: 1.25rem;
    line-height: 1.2;
}

.gallery-card-overlay p {
    margin: 5px 0 14px;

    color: rgba(255, 255, 255, .8);

    font-size: .88rem;
}


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

.gallery-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px;

    background: rgba(255, 255, 255, .12);
    color: var(--white);

    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.gallery-view-btn:hover {
    border-color: var(--secondary);

    background: var(--secondary);
    color: var(--dark);

    transform: translateY(-2px);
}


/* ================= NO RESULTS ================= */

.gallery-empty {
    grid-column: 1 / -1;

    padding: 70px 20px;

    text-align: center;

    border: 1px dashed rgba(0, 0, 0, .15);
    border-radius: 20px;

    background: var(--white);
}

.gallery-empty i {
    margin-bottom: 15px;

    color: var(--secondary);

    font-size: 2rem;
}

.gallery-empty h3 {
    margin: 0 0 8px;

    color: var(--primary);

    font-family: "Fraunces", serif;
}

.gallery-empty p {
    margin: 0;

    color: var(--gray);
}


/* ================= TESTIMONIALS ================= */

.review-grid {
    display: grid;

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

    gap: 35px;
}

.review-card {
    padding: 40px;

    border-radius: 25px;

    background: var(--white);

    box-shadow: var(--shadow);

    text-align: center;

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

.review-card:hover {
    transform: translateY(-10px);

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

.review-card .stars {
    color: var(--secondary);

    font-size: 1.4rem;

    letter-spacing: 2px;
}

.review-card h3 {
    margin-top: 20px;

    color: var(--primary);

    font-family: "Fraunces", serif;
}

.review-card p {
    color: var(--gray);

    line-height: 1.7;
}


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

@media (max-width: 1200px) {

    .gallery-luxury-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .gallery-modal {
        padding: 20px;
    }

    .gallery-modal-header {
        padding: 24px;
    }

    .gallery-modal-body {
        padding: 25px 24px 35px;
    }

    .gallery-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-search-wrapper {
        width: 100%;
    }

    .gallery-filters {
        justify-content: flex-start;
    }

    .gallery-luxury-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

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


@media (max-width: 600px) {

    .gallery-modal {
        padding: 0;
    }

    .gallery-modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;

        border-radius: 0;
    }

    .gallery-modal-header {
        padding: 20px;

        position: sticky;
        top: 0;

        z-index: 5;
    }

    .gallery-modal-title h2 {
        font-size: 1.55rem;
    }

    .gallery-modal-body {
        max-height: calc(100vh - 90px);

        padding: 20px 15px 30px;
    }

    .gallery-subtitle {
        font-size: .9rem;

        margin-bottom: 22px;
    }

    .gallery-controls {
        padding: 14px;

        border-radius: 14px;
    }

    .gallery-filters {
        display: grid;

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

        width: 100%;

        gap: 6px;
    }

    .gallery-filter-btn {
        width: 100%;

        padding: 9px 5px;

        font-size: .68rem;
    }

    .gallery-luxury-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .gallery-luxury-grid .gallery-card,
    .gallery-luxury-grid .gallery-card img {
        min-height: 390px;
    }

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

        gap: 20px;
    }

    .review-card {
        padding: 30px 22px;
    }
}


@media (max-width: 400px) {

    .gallery-modal-title span {
        font-size: .68rem;
    }

    .gallery-modal-title h2 {
        font-size: 1.35rem;
    }

    .close-gallery {
        width: 42px;
        height: 42px;
    }

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

    .gallery-filter-btn {
        padding: 10px;
    }

    .gallery-luxury-grid .gallery-card,
    .gallery-luxury-grid .gallery-card img {
        min-height: 350px;
    }
}


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

.gallery-filter-btn:focus-visible,
.close-gallery:focus-visible,
.gallery-view-btn:focus-visible,
.gallery-search-wrapper input:focus-visible {
    outline: 3px solid var(--secondary);

    outline-offset: 3px;
}


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

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

    .gallery-modal,
    .gallery-modal-content,
    .gallery-card,
    .gallery-card img,
    .gallery-view-btn,
    .gallery-filter-btn,
    .close-gallery,
    .review-card {
        transition: none;
    }

    .gallery-luxury-grid .gallery-card:hover,
    .gallery-grid img:hover,
    .review-card:hover,
    .gallery-luxury-grid .gallery-card:hover img {
        transform: none;
    }
}
/* ================= GLOBAL POLISH ================= */
html {
    scroll-padding-top: 90px;
}

body {
    overflow-x: hidden;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 4px;
}

img {
    max-width: 100%;
    height: auto;
}

section {
    scroll-margin-top: 80px;
}

/* ================= HEADER POLISH ================= */
.header {
    min-height: 75px;
    padding-inline: clamp(18px, 3vw, 40px);
}

.header.light-header {
    box-shadow: 0 10px 35px var(--shadow);
}

.left-icons,
.header-icons {
    flex: 0 0 auto;
}

.logo {
    min-width: 150px;
}

.logo h1 {
    line-height: 1;
    transition: transform .35s ease, letter-spacing .35s ease;
}

.logo span {
    line-height: 1.2;
}

.logo:hover h1 {
    transform: translateY(-2px);
    letter-spacing: .5px;
}

.nav {
    align-items: center;
}

.nav a {
    position: relative;
    padding: 8px 0;
    white-space: nowrap;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width .3s ease;
}

.nav a:hover::after,
.nav a:focus-visible::after {
    width: 100%;
}

.header button {
    min-width: 42px;
    min-height: 42px;
}

.header-icons button,
.left-icons button {
    border-radius: 50%;
    transition: transform .3s ease, background-color .3s ease;
}

.header-icons button:hover,
.left-icons button:hover {
    transform: translateY(-3px) scale(1.04);
}

/* ================= HERO POLISH ================= */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    padding-top: clamp(120px, 16vh, 150px);
    padding-bottom: clamp(70px, 10vh, 100px);
    background-position: center 35%;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(100%, 700px);
}

.hero .tag {
    display: inline-block;
}

.hero h2 {
    max-width: 760px;
    text-wrap: balance;
}

.hero p {
    max-width: 620px;
}

.hero-buttons .btn {
    min-width: 170px;
    text-align: center;
}

/* ================= BUTTON POLISH ================= */
.btn,
.product-actions button,
.price-row button,
.custom-submit-btn,
.gallery-view-btn {
    min-height: 46px;
}

.btn:hover,
.product-actions button:hover,
.price-row button:hover,
.custom-submit-btn:hover,
.gallery-view-btn:hover {
    transform: translateY(-3px);
}

/* ================= PRODUCT CARD UX ================= */
.products {
    align-items: stretch;
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    will-change: transform;
}

.product-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
}

.product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.product-info h3 {
    line-height: 1.3;
}

.product-info p {
    min-height: 2.8em;
}

.price-row {
    margin-top: auto;
}

.product-actions {
    align-items: center;
    flex-wrap: wrap;
}

.product-actions button,
.price-row button {
    transition: transform .3s ease, box-shadow .3s ease;
}

.product-actions button:hover,
.price-row button:hover {
    box-shadow: 0 10px 25px var(--shadow);
}


/* Optional quick-view support if the HTML contains .quick-view */
.product-card .quick-view {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 12px);
    opacity: 0;
    visibility: hidden;
    z-index: 6;
    padding: 11px 20px;
    border-radius: 30px;
    background: var(--dark);
    color: var(--white);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.product-card:hover .quick-view,
.product-card:focus-within .quick-view {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ================= PRODUCT DETAIL / SHOPPING SUPPORT ================= */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: clamp(35px, 6vw, 80px);
    align-items: start;
}

.size-selector,
.quantity-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.size-option,
.quantity-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: 10px;
    transition: transform .25s ease, background-color .25s ease;
}

.size-option:hover,
.quantity-btn:hover {
    transform: translateY(-2px);
}

.stock-status,
.delivery-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.buy-now,
.add-to-cart {
    min-height: 50px;
    padding: 13px 24px;
    border-radius: 30px;
    font-weight: 700;
    transition: transform .3s ease, box-shadow .3s ease;
}

.buy-now:hover,
.add-to-cart:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px var(--shadow);
}

/* ================= CRAFT / ABOUT ================= */
.craft-container,
.about {
    min-width: 0;
}

.craft-image,
.about-image,
.craft-content,
.about-content {
    min-width: 0;
}

.craft-image img,
.about-image img,
.image-frame img {
    will-change: transform;
}

.about-content p {
    max-width: 680px;
}

.about-features li {
    min-height: 56px;
}

.about-actions a,
.about-actions button {
    min-width: 180px;
    text-align: center;
}

/* ================= STATS ================= */
.stats > * {
    min-width: 0;
}

.stats h3 {
    line-height: 1;
}

/* ================= GALLERY ================= */
.gallery-section,
.gallery-grid,
.gallery-priority-grid,
.gallery-luxury-grid,
.gallery-full-grid {
    min-width: 0;
}

.gallery-card {
    will-change: transform;
}

.gallery-card img,
.gallery-photo-item img {
    display: block;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-view-btn {
    transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-view-btn:hover {
    box-shadow: 0 10px 25px var(--shadow);
}

/* ================= GALLERY MODAL ================= */
.gallery-modal-content {
    max-height: 92svh;
}

.gallery-modal-header {
    flex: 0 0 auto;
}

.gallery-modal-body {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.close-gallery,
.close-search {
    flex: 0 0 auto;
}

/* ================= DRAWERS ================= */
.cart-drawer,
.wishlist-drawer {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.cart-item {
    align-items: center;
}

.cart-item > * {
    min-width: 0;
}

#cartItems {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* ================= CUSTOM ORDER FORM ================= */
.custom-form,
.custom-container {
    min-width: 0;
}

.form-group input,
.form-group select,
.form-group textarea,
.custom-form input,
.custom-form select,
.custom-form textarea {
    min-width: 0;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.custom-form input:focus,
.custom-form select:focus,
.custom-form textarea:focus {
    box-shadow: 0 0 0 3px var(--soft);
}

.custom-submit-btn {
    cursor: pointer;
    border-radius: 30px;
}

/* ================= NEWSLETTER ================= */
.newsletter form {
    width: min(100%, 720px);
    margin-inline: auto;
}

.newsletter input {
    min-width: 0;
}

/* ================= ACCOUNT MODAL ================= */
.account-modal {
    padding: 20px;
}

.account-box {
    max-width: 100%;
    max-height: 90svh;
    overflow-y: auto;
}

/* ================= FOOTER ================= */
.footer-container {
    align-items: start;
}

.footer-column a {
    width: fit-content;
    transition: transform .25s ease;
}

.footer-column a:hover {
    transform: translateX(4px);
}

.footer-bottom {
    gap: 20px;
}

/* ================= ANIMATION PERFORMANCE ================= */
.product-card,
.review-card,
.gallery-card {
    backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================= TABLET ================= */
@media (max-width: 1100px) {
    .header {
        padding-inline: 20px;
    }

    .nav {
        gap: 22px;
    }

    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    .craft-container,
    .about,
    .product-detail {
        gap: 45px;
    }

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

/* ================= TABLET / SMALL LAPTOP ================= */
@media (max-width: 900px) {
    .nav {
        display: none;
    }

    #menuBtn {
        display: flex;
    }

    .hero h2 {
        font-size: clamp(3.2rem, 8vw, 4.5rem);
    }

    .craft-container,
    .about,
    .product-detail {
        grid-template-columns: 1fr;
    }

    .craft-image,
    .about-image {
        order: 0;
    }

    .about-content,
    .craft-content {
        max-width: 760px;
        margin-inline: auto;
    }

    .image-frame {
        height: min(650px, 75vw);
    }

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

    .custom-form {
        grid-template-columns: 1fr;
    }

    .form-group.full,
    .custom-form button {
        grid-column: auto;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
    section {
        padding: 70px 6%;
    }

    .header {
        height: 68px;
        min-height: 68px;
        padding-inline: 14px;
    }

    .logo h1 {
        font-size: 1.55rem;
    }

    .logo span {
        font-size: .7rem;
        letter-spacing: 2px;
    }

    .left-icons,
    .header-icons {
        gap: 6px;
    }

    .left-icons button,
    .header-icons button,
    .header button {
        min-width: 38px;
        min-height: 38px;
        font-size: 1.2rem;
    }

    .hero {
        min-height: 100svh;
        padding: 120px 7% 70px;
        background-position: 60% center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero .tag {
        font-size: .8rem;
        letter-spacing: 2px;
    }

    .hero h2 {
        font-size: clamp(2.5rem, 11vw, 3.6rem);
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .products {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-card img {
        aspect-ratio: 4 / 5;
    }

    .product-info {
        padding: 24px;
    }

    .price-row {
        gap: 15px;
    }

    .product-actions {
        width: 100%;
    }

    .product-actions button {
        flex: 1;
    }

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

    .stats h3 {
        font-size: 2.2rem;
    }

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

    .review-card {
        padding: 30px 24px;
    }

    .craft-container,
    .about {
        gap: 35px;
    }

    .image-frame {
        height: 500px;
        border-radius: 30px;
    }

    .about-content h2 {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-actions {
        flex-direction: column;
    }

    .about-actions a,
    .about-actions button {
        width: 100%;
    }

    .gallery-grid,
    .gallery-priority-grid,
    .gallery-luxury-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .gallery-card {
        height: 300px;
    }

    .gallery-overlay,
    .gallery-card-overlay {
        opacity: 1;
    }

    .gallery-modal-content {
        width: 96%;
        height: 92svh;
        border-radius: 12px;
    }

    .gallery-modal-header {
        padding: 18px 20px;
    }

    .gallery-modal-body {
        padding: 20px;
    }

    .gallery-full-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-photo-item img {
        height: 220px;
    }

    .custom-order-section,
    .gallery-section {
        padding: 60px 6%;
    }

    .custom-container {
        padding: 28px 22px;
    }

    .newsletter form {
        flex-direction: column;
        gap: 10px;
    }

    .newsletter input,
    .newsletter button {
        width: 100%;
        min-height: 52px;
        border-radius: 30px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .cart-drawer,
    .wishlist-drawer {
        width: min(420px, 100%);
        right: min(-420px, -100%);
        padding: 24px;
    }

    .cart-drawer.active,
    .wishlist-drawer.active {
        right: 0;
    }

    .account-box {
        width: min(400px, 100%);
        padding: 30px 24px;
    }
}

/* ================= SMALL PHONES ================= */
@media (max-width: 480px) {
    section {
        padding: 60px 5%;
    }

    .header {
        padding-inline: 10px;
    }

    .logo {
        min-width: 0;
    }

    .logo h1 {
        font-size: 1.3rem;
    }

    .logo span {
        font-size: .58rem;
        letter-spacing: 1.5px;
    }

    .hero {
        padding-inline: 6%;
        background-position: 62% center;
    }

    .hero h2 {
        font-size: clamp(2.2rem, 12vw, 3rem);
    }

    .hero-buttons .btn {
        min-width: 0;
    }

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

    .stats h3 {
        font-size: 2rem;
    }

    .gallery-grid,
    .gallery-priority-grid,
    .gallery-luxury-grid,
    .gallery-full-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card {
        height: 360px;
    }

    .gallery-photo-item img {
        height: 280px;
    }

    .custom-container {
        padding: 24px 18px;
    }

    .cart-drawer,
    .wishlist-drawer {
        padding: 20px;
    }

    .cart-item {
        gap: 12px;
    }

    .cart-item img {
        width: 78px;
        height: 78px;
        flex: 0 0 78px;
    }

    .gallery-modal-content {
        width: 100%;
        height: 100svh;
        border-radius: 0;
    }

    .gallery-modal-header {
        padding: 16px;
    }

    .gallery-modal-body {
        padding: 16px;
    }
}

/* ================= TOUCH DEVICES ================= */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover,
    .review-card:hover,
    .gallery-card:hover {
        transform: none;
    }

    .product-card:hover img,
    .gallery-card:hover img,
    .image-frame:hover img {
        transform: none;
    }

    .product-card .quick-view {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    /* ================= CUSTOMER CARE MODALS ================= */
.info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-modal.active {
    display: flex;
    opacity: 1;
}

.info-modal-content {
    background-color: #ffffff;
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.info-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fafafa;
}

.info-modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-modal-header h2 i {
    color: var(--primary, #b8860b);
}

.close-info-modal {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-info-modal:hover {
    color: #000;
}

.info-modal-body {
    padding: 24px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4a4a4a;
}

.info-modal-body h4 {
    font-size: 1rem;
    color: #1a1a1a;
    margin: 18px 0 6px 0;
}

.info-modal-body h4:first-child {
    margin-top: 0;
}

.info-modal-body p {
    margin-bottom: 12px;
}

/* Size Guide Table */
.table-responsive {
    overflow-x: auto;
    margin-top: 15px;
}

.size-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.size-table th, 
.size-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
}

.size-table th {
    background-color: #f7f7f7;
    font-weight: 600;
    color: #1a1a1a;
}

.size-table tr:hover {
    background-color: #fdfdfd;
}

/* FAQs */
.faq-item {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f2f2f2;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h4 {
    color: var(--primary, #b8860b);
}
}

/* =====================================================
   SIMPLE SHOP SCROLL
===================================================== */

.shop-carousel {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 30px;
}

.shop-scroll-container {
    display: flex;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.shop-scroll-container > * {
    flex: 0 0 auto;
}

.shop-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.shop-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(140, 75, 45, .25);
    border-radius: 20px;
}

@media (max-width: 768px) {
    .shop-scroll-container {
        gap: 14px;
    }
}