/* ===========================
   GOOGLE FONTS
   Playfair Display -> headings / logo (does the "luxury perfume brand" work)
   Poppins          -> body / UI (kept, it was already doing fine here)
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ===========================
   DESIGN TOKENS
=========================== */

:root{
    /* core palette */
    --ink:#12141c;
    --ink-soft:#1c2030;
    --gold:#c9a227;
    --gold-light:#e8cf83;
    --bg:#f6f4ef;
    --card:#ffffff;
    --border:#e9e5da;
    --text:#2b2b33;
    --muted:#8b8a92;

    /* status accents */
    --blue:#3b6ef6;
    --blue-soft:#e8edfd;
    --green:#1f9d55;
    --green-soft:#e3f8ea;
    --orange:#e08e0b;
    --orange-soft:#fdf1d9;
    --red:#d6455a;
    --red-soft:#fbe6e9;

    /* geometry */
    --r-lg:18px;
    --r-md:12px;
    --r-sm:8px;
    --shadow-sm:0 2px 10px rgba(18,20,28,.05);
    --shadow-md:0 10px 30px rgba(18,20,28,.08);
    --shadow-lg:0 24px 60px rgba(18,20,28,.22);
    --ease:cubic-bezier(.4,0,.2,1);
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

/* ===========================
   LAYOUT
=========================== */

.admin-layout{
    display:flex;
    width:100%;
    min-height:100vh;
    overflow:hidden;
}

/* ===========================
   SIDEBAR
=========================== */

.sidebar{
    width:220px;
    background:var(--ink);
    color:#fff;
    padding:20px 14px;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:999;
    border-right:1px solid rgba(255,255,255,.05);
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    padding:0 6px;
}

.logo i{
    color:var(--gold);
    font-size:22px;
}

.logo h2{
    font-family:'Playfair Display',serif;
    color:#fff;
    font-size:20px;
    font-weight:700;
    letter-spacing:2.5px;
}

.sidebar ul{
    list-style:none;
}

.sidebar ul li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    margin-bottom:4px;
    border-radius:var(--r-sm);
    cursor:pointer;
    color:rgba(255,255,255,.65);
    font-size:13.5px;
    font-weight:500;
    transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}

.sidebar ul li:hover{
    background:var(--ink-soft);
    color:#fff;
    padding-left:20px;
}

.sidebar ul li.active{
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    color:var(--ink);
    font-weight:600;
    box-shadow:0 6px 16px rgba(201,162,39,.35);
}

.sidebar ul li i{
    width:20px;
    text-align:center;
    font-size:15px;
}

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

.main-content{
    flex:1;
    margin-left:220px;
    width:calc(100% - 220px);
    padding:20px 28px;
    overflow-x:hidden;
}

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

.top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:18px;
}

.top-header h1{
    font-family:'Playfair Display',serif;
    font-size:22px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:3px;
}

.top-header p{
    color:var(--muted);
    font-size:13px;
}

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

.add-product-btn{
    border:none;
    background:var(--ink);
    color:#fff;
    padding:11px 20px;
    border-radius:var(--r-sm);
    cursor:pointer;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.2px;
    transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.add-product-btn i{
    margin-right:8px;
    color:var(--gold);
}

.add-product-btn:hover{
    background:var(--gold);
    color:var(--ink);
    transform:translateY(-2px);
}

.add-product-btn:hover i{
    color:var(--ink);
}

/* ===========================
   DASHBOARD CARDS
=========================== */

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:18px;
}

.card{
    background:var(--card);
    border-radius:var(--r-md);
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
    min-width:0;
}

.card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}

.card h3{
    font-size:19px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:.2px;
}

.card p{
    color:var(--muted);
    margin-top:2px;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.card-icon{
    width:38px;
    height:38px;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:15px;
    flex-shrink:0;
}

.blue{
    background:var(--blue);
}

.green{
    background:var(--green);
}

.orange{
    background:var(--orange);
}

.red{
    background:var(--red);
}

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

.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

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

.search-box{
    width:300px;
    max-width:100%;
    background:var(--card);
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border-radius:var(--r-md);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.search-box:focus-within{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(201,162,39,.12);
}

.search-box i{
    color:var(--muted);
    font-size:15px;
}

.search-box input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    font-size:14.5px;
    color:var(--text);
}

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

.category-filter{
    min-width:160px;
    padding:9px 14px;
    border-radius:var(--r-md);
    border:1px solid var(--border);
    background:var(--card);
    font-size:14.5px;
    color:var(--text);
    cursor:pointer;
    outline:none;
    transition:border-color .25s var(--ease);
}

.category-filter:focus{
    border-color:var(--gold);
}

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

.table-container{
    width:100%;
    background:var(--card);
    border-radius:var(--r-lg);
    padding:12px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    overflow-x:auto;
    overflow-y:hidden;
}

/* ==========================================
   PRODUCT TABLE
========================================== */

.product-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}

.product-table thead{
    background:var(--ink);
    color:#fff;
}

.product-table thead th{
    padding:10px 12px;
    font-size:11px;
    font-weight:600;
    text-align:left;
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.product-table thead th:first-child{
    border-top-left-radius:var(--r-sm);
}

.product-table thead th:last-child{
    border-top-right-radius:var(--r-sm);
}

.product-table tbody tr{
    border-bottom:1px solid var(--border);
    transition:background .2s var(--ease);
}

.product-table tbody tr:last-child{
    border-bottom:none;
}

.product-table tbody tr:hover{
    background:#faf8f3;
}

.product-table td{
    padding:9px 12px;
    font-size:12.5px;
    color:var(--text);
    vertical-align:middle;
    white-space:nowrap;
}

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

.product-image-cell{
    width:75px;
}

.product-image{
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:var(--r-sm);
    border:1px solid var(--border);
    transition:transform .3s var(--ease);
    display:block;
}

.product-image:hover{
    transform:scale(1.12);
}

/* ==========================================
   DESCRIPTION
========================================== */

.description{
    max-width:180px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--muted);
}

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

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    padding:6px 14px;
    border-radius:30px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.badge-primary{
    background:var(--blue-soft);
    color:var(--blue);
}

.badge-success{
    background:var(--green-soft);
    color:var(--green);
}

.badge-danger{
    background:var(--red-soft);
    color:var(--red);
}

.badge-warning{
    background:var(--orange-soft);
    color:var(--orange);
}

/* ==========================================
   STOCK
========================================== */

.stock-good{
    color:var(--green);
    font-weight:700;
}

.stock-low{
    color:var(--red);
    font-weight:700;
}

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

.action-buttons{
    display:flex;
    gap:8px;
}

.edit-btn,
.delete-btn{
    border:none;
    padding:8px 16px;
    border-radius:var(--r-sm);
    color:#fff;
    cursor:pointer;
    font-size:12.5px;
    font-weight:600;
    transition:background .25s var(--ease), transform .2s var(--ease);
}

.edit-btn{
    background:var(--blue);
}

.edit-btn:hover{
    background:#2d55d6;
    transform:translateY(-1px);
}

.delete-btn{
    background:var(--red);
}

.delete-btn:hover{
    background:#b8283f;
    transform:translateY(-1px);
}

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

.old-price{
    text-decoration:line-through;
    color:var(--muted);
    font-size:12.5px;
}

.new-price{
    color:var(--green);
    font-size:14.5px;
    font-weight:700;
}

/* ==========================================
   SCROLLBAR
========================================== */

.table-container::-webkit-scrollbar{
    height:7px;
}

.table-container::-webkit-scrollbar-track{
    background:#f3f1ec;
    border-radius:20px;
}

.table-container::-webkit-scrollbar-thumb{
    background:#d9d4c6;
    border-radius:20px;
}

.table-container::-webkit-scrollbar-thumb:hover{
    background:var(--gold);
}

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

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(18,20,28,.6);
    backdrop-filter:blur(6px);
    justify-content:center;
    align-items:flex-start;
    z-index:9999;
    padding:25px;
    overflow-y:auto;
}

.modal-content{
    background:var(--card);
    width:100%;
    max-width:880px;
    border-radius:var(--r-lg);
    overflow:hidden;
    animation:popup .3s var(--ease);
    box-shadow:var(--shadow-lg);
}

@keyframes popup{
    from{
        opacity:0;
        transform:translateY(24px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

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

.modal-header{
    background:var(--ink);
    color:#fff;
    padding:22px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.modal-header h2{
    font-family:'Playfair Display',serif;
    font-size:21px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:12px;
}

.modal-header h2 i{
    color:var(--gold);
}

.close-btn{
    font-size:28px;
    line-height:1;
    cursor:pointer;
    color:rgba(255,255,255,.7);
    transition:color .25s var(--ease), transform .25s var(--ease);
}

.close-btn:hover{
    color:var(--gold);
    transform:rotate(90deg);
}

/* ==========================================
   FORM
========================================== */

#productForm{
    padding:32px 30px;
}

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

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

.form-group label{
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--text);
    letter-spacing:.2px;
}

/* ==========================================
   INPUTS
========================================== */

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:12px 15px;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    font-size:14.5px;
    color:var(--text);
    outline:none;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
    background:#fdfcfa;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(201,162,39,.14);
    background:#fff;
}

.form-group textarea{
    resize:vertical;
    min-height:120px;
}

/* ==========================================
   CHECKBOX
========================================== */

.checkbox-row{
    display:flex;
    flex-wrap:wrap;
    gap:26px;
    margin:22px 0;
}

.check-item{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:500;
    font-size:14px;
    color:var(--text);
}

.check-item input{
    width:18px;
    height:18px;
    accent-color:var(--gold);
}

/* ==========================================
   FILE INPUT
========================================== */

input[type=file]{
    border:2px dashed var(--border);
    background:#fdfcfa;
    padding:12px;
    border-radius:var(--r-sm);
    cursor:pointer;
    font-size:13.5px;
    color:var(--muted);
    transition:border-color .25s var(--ease);
}

input[type=file]:hover{
    border-color:var(--gold);
}

/* ==========================================
   SIZES & PRICING BUILDER
========================================== */

.sizes-group{
    margin-top:6px;
}

.sizes-container{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
}

.size-row{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1fr auto;
    gap:10px;
    align-items:center;
    background:#fdfcfa;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    padding:10px;
}

.size-row select,
.size-row input{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    font-size:13.5px;
    color:var(--text);
    outline:none;
    background:#fff;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.size-row select:focus,
.size-row input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(201,162,39,.14);
}

.remove-size-btn{
    border:none;
    background:var(--red-soft);
    color:var(--red);
    width:36px;
    height:36px;
    border-radius:var(--r-sm);
    cursor:pointer;
    font-size:14px;
    transition:background .25s var(--ease), color .25s var(--ease);
}

.remove-size-btn:hover{
    background:var(--red);
    color:#fff;
}

.add-size-btn{
    border:1px dashed var(--gold);
    background:transparent;
    color:var(--gold);
    padding:10px 18px;
    border-radius:var(--r-sm);
    cursor:pointer;
    font-size:13.5px;
    font-weight:600;
    transition:background .25s var(--ease), color .25s var(--ease);
}

.add-size-btn i{
    margin-right:6px;
}

.add-size-btn:hover{
    background:var(--gold);
    color:var(--ink);
}

@media (max-width:640px){

    .size-row{
        grid-template-columns:1fr 1fr;
    }

    .remove-size-btn{
        grid-column:span 2;
        width:100%;
    }

}

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

.save-btn{
    width:100%;
    border:none;
    background:var(--ink);
    color:#fff;
    padding:15px;
    border-radius:var(--r-sm);
    font-size:15.5px;
    font-weight:600;
    letter-spacing:.2px;
    cursor:pointer;
    transition:background .25s var(--ease), transform .2s var(--ease);
    margin-top:12px;
}

.save-btn:hover{
    background:var(--gold);
    color:var(--ink);
    transform:translateY(-2px);
}

.save-btn i{
    margin-right:8px;
}

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

/* ---------- Large Laptop ---------- */

@media (max-width:1200px){

    .main-content{
        padding:18px;
    }

    .search-box{
        width:260px;
    }

    .table-container{
        padding:12px;
    }

    .product-table th,
    .product-table td{
        padding:8px 10px;
        font-size:12px;
    }

    .description{
        max-width:160px;
    }

}

/* ---------- Below this, 4 cards no longer fit one comfortable row ---------- */

@media (max-width:900px){

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

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

    .sidebar{
        width:85px;
        padding:25px 10px;
    }

    .sidebar span{
        display:none;
    }

    .logo h2{
        display:none;
    }

    .logo{
        justify-content:center;
    }

    .sidebar ul li{
        justify-content:center;
        padding:15px;
    }

    .sidebar ul li:hover{
        padding-left:15px;
    }

    .sidebar ul li i{
        margin:0;
    }

    .main-content{
        margin-left:85px;
        width:calc(100% - 85px);
        padding:20px;
    }

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

    .toolbar{
        gap:15px;
        flex-wrap:wrap;
    }

    .search-box{
        width:100%;
    }

    .category-filter{
        width:220px;
    }

    .modal-content{
        max-width:95%;
    }

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

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    .sidebar{
        position:fixed;
        width:70px;
    }

    .main-content{
        margin-left:70px;
        width:calc(100% - 70px);
        padding:15px;
    }

    .top-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .top-header h1{
        font-size:22px;
    }

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

    .card{
        padding:14px;
    }

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

    .search-box{
        width:100%;
    }

    .category-filter{
        width:100%;
    }

    .table-container{
        overflow-x:auto;
        padding:12px;
    }

    .product-table{
        min-width:900px;
    }

    .product-table th{
        font-size:12px;
    }

    .product-table td{
        font-size:13px;
    }

    .product-image{
        width:50px;
        height:50px;
    }

    .description{
        max-width:140px;
    }

    .action-buttons{
        gap:6px;
    }

    .edit-btn,
    .delete-btn{
        padding:7px 12px;
        font-size:12px;
    }

    .checkbox-row{
        flex-direction:column;
        gap:12px;
    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .main-content{
        padding:12px;
    }

    .top-header h1{
        font-size:20px;
    }

    .top-header p{
        font-size:13px;
    }

    .card{
        gap:12px;
    }

    .card-icon{
        width:46px;
        height:46px;
        font-size:17px;
    }

    .card h3{
        font-size:21px;
    }

    .add-product-btn{
        width:100%;
        justify-content:center;
    }

    .modal{
        padding:10px;
    }

    .modal-content{
        border-radius:14px;
    }

    .modal-header{
        padding:18px;
    }

    .modal-header h2{
        font-size:19px;
    }

    #productForm{
        padding:20px;
    }

    .save-btn{
        font-size:15px;
    }

}

/* ==========================================================
   FINAL MOBILE RESPONSIVE OVERRIDE
   This section is intentionally last so it overrides all
   earlier responsive rules without changing the HTML/JS.
========================================================== */

@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-layout {
        display: block;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Compact icon-only navigation */
    .sidebar {
        width: 68px !important;
        padding: 14px 8px !important;
        top: 0;
        bottom: 0;
        overflow-x: hidden;
    }

    .logo {
        justify-content: center;
        padding: 0 !important;
        margin: 0 0 22px !important;
    }

    .logo h2 {
        display: none !important;
    }

    .logo i {
        font-size: 20px !important;
        margin: 0;
    }

    .sidebar ul li {
        width: 100% !important;
        height: 48px;
        padding: 0 !important;
        margin: 0 0 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        border-radius: 10px;
    }

    .sidebar ul li span {
        display: none !important;
    }

    .sidebar ul li i {
        width: auto !important;
        margin: 0 !important;
        font-size: 17px;
    }

    .sidebar ul li:hover {
        padding-left: 0 !important;
    }

    /* Main content must start immediately beside sidebar */
    .main-content {
        margin-left: 68px !important;
        width: calc(100% - 68px) !important;
        min-width: 0 !important;
        padding: 16px 12px 28px !important;
        overflow-x: hidden !important;
    }

    .top-header {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .top-header h1 {
        font-size: 20px !important;
        line-height: 1.2;
    }

    .top-header p {
        font-size: 12px !important;
        line-height: 1.45;
    }

    .add-product-btn {
        width: 100% !important;
        min-height: 48px;
        padding: 12px 14px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 2 x 2 cards gives a much shorter, cleaner mobile dashboard */
    .cards {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .card {
        width: 100%;
        min-width: 0 !important;
        min-height: 92px;
        padding: 12px !important;
        gap: 9px !important;
        border-radius: 14px;
    }

    .card-icon {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 10px;
        font-size: 15px !important;
    }

    .card h3 {
        font-size: 18px !important;
        line-height: 1.1;
    }

    .card p {
        font-size: 10.5px !important;
        margin-top: 4px;
    }

    /* Search + category */
    .toolbar {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 9px !important;
        margin-bottom: 12px !important;
    }

    .search-box,
    .toolbar-right,
    .category-filter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .search-box {
        min-height: 46px;
        padding: 10px 13px !important;
    }

    .search-box input,
    .category-filter {
        font-size: 14px !important;
    }

    .category-filter {
        min-height: 46px;
    }

    /* Keep the table inside its own horizontal scroll area */
    .table-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        border-radius: 14px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .product-table {
        width: max-content !important;
        min-width: 940px !important;
        table-layout: auto !important;
    }

    .product-table thead th {
        padding: 10px 11px !important;
        font-size: 10px !important;
    }

    .product-table td {
        padding: 9px 11px !important;
        font-size: 12px !important;
    }

    .product-image {
        width: 44px !important;
        height: 44px !important;
    }

    /* Product form/modal */
    .modal {
        padding: 10px !important;
        align-items: flex-start !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .modal-header {
        padding: 16px !important;
    }

    .modal-header h2 {
        font-size: 18px !important;
    }

    #productForm {
        padding: 16px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 380px) {
    .sidebar {
        width: 60px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .main-content {
        margin-left: 60px !important;
        width: calc(100% - 60px) !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .cards {
        gap: 8px !important;
    }

    .card {
        min-height: 86px;
        padding: 10px !important;
        gap: 7px !important;
    }

    .card-icon {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .card h3 {
        font-size: 16px !important;
    }

    .card p {
        font-size: 9.5px !important;
    }
}

.login-form-group {
    position: relative;
    width: 100%;
}

.login-form-group input {
    width: 100%;
    height: 48px;
    padding: 0 65px 0 14px;
    box-sizing: border-box;

    border: 1px solid #e3ded5;
    border-radius: 8px;

    background: #ffffff;
    color: #11131b;

    font-size: 14px;
    outline: none;
}

.login-form-group input:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.12);
}

.login-form-group button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    border: none;
    background: transparent;

    color: #8d6f18;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    padding: 0;

    transition: color 0.2s ease;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-group button:hover {
    color: #11131b;
}

/* ==========================================
   ORDER TABLE
========================================== */

.order-table{
    width:100%;
    min-width:1120px;
    table-layout:auto;
}

.order-table th,
.order-table td{
    white-space:nowrap;
}

.order-table td:nth-child(2){
    min-width:190px;
}

.order-table td:nth-child(3){
    min-width:145px;
}

.order-table td:nth-child(4){
    min-width:170px;
    white-space:normal;
}

.view-address-btn{
    border:none;
    background:var(--blue);
    color:#fff;
    border-radius:8px;
    padding:10px 13px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .2s ease, opacity .2s ease;
}

.view-address-btn:hover{
    opacity:.92;
    transform:translateY(-1px);
}

/* ==========================================
   SHIPPING ADDRESS MODAL
========================================== */

.address-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(18,20,28,.62);
    backdrop-filter:blur(7px);
    justify-content:center;
    align-items:center;
    padding:20px;
}

.address-modal-content{
    width:min(560px,100%);
    background:var(--card);
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    animation:popup .25s var(--ease);
}

.address-modal-header{
    background:var(--ink);
    color:#fff;
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.address-modal-header h2{
    font-family:'Playfair Display',serif;
    font-size:21px;
    display:flex;
    align-items:center;
    gap:10px;
}

.address-modal-header h2 i{
    color:var(--gold);
}

.address-modal-close{
    border:0;
    background:transparent;
    color:rgba(255,255,255,.75);
    font-size:22px;
    cursor:pointer;
}

.address-modal-close:hover{
    color:#fff;
}

.address-modal-body{
    padding:28px 30px 32px;
}

.address-modal-body h3{
    font-family:'Playfair Display',serif;
    font-size:23px;
    margin-bottom:16px;
}

.address-box{
    padding:17px 18px;
    background:#f8f7f3;
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:17px;
}

.address-box p{
    margin:0 0 5px;
    line-height:1.55;
    font-size:14px;
}

.address-box p:last-child{
    margin-bottom:0;
}

.address-landmark{
    font-weight:600;
}

.address-contact-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.address-contact-card{
    min-width:0;
    border:1px solid var(--border);
    border-radius:10px;
    padding:13px 14px;
}

.address-contact-card span{
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    color:var(--muted);
    margin-bottom:6px;
}

.address-contact-card strong{
    display:block;
    font-size:13px;
    overflow-wrap:anywhere;
}

@media (max-width:600px){
    .address-modal{
        padding:10px;
        align-items:flex-start;
    }

    .address-modal-content{
        margin-top:20px;
    }

    .address-modal-body{
        padding:24px 18px;
    }

    .address-contact-grid{
        grid-template-columns:1fr;
    }
}