:root{
    --ink:#171614;
    --cream:#f5f1e9;
    --paper:#fbfaf7;
    --line:#ddd6ca;
    --muted:#746f67;
    --accent:#a36b45;
    --white:#fff
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',Arial,sans-serif
}

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

.container{
    width:min(1240px,92%);
    margin:auto
}

.site-header{
    background:rgba(251,250,247,.96);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:50
}

.header-inner{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.brand{
    font-family:'Playfair Display',serif;
    font-size:23px;
    letter-spacing:1px
}

.brand span{
    font-weight:700
}

.brand em{
    font-style:normal;
    font-weight:500
}

.main-nav{
    display:flex;
    gap:26px;
    align-items:center;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em
}

.main-nav a{
    padding:8px 0
}

.main-nav a:hover{
    color:var(--accent)
}

.nav-admin{
    border-bottom:1px solid var(--ink)
}

.menu-btn{
    display:none;
    background:none;
    border:0;
    font-size:24px
}


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

.hero{
    margin-top:24px;
    min-height:600px;
    background:var(--cream);
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden
}

.hero-copy{
    padding:90px 8%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start
}

.eyebrow{
    font-size:11px;
    letter-spacing:.2em;
    font-weight:700;
    color:var(--accent);
    margin-bottom:18px
}

.hero h1{
    font:600 clamp(48px,6vw,82px)/.95 'Playfair Display',serif;
    margin:0 0 25px
}

.hero h1 i{
    font-weight:500
}

.hero p{
    max-width:500px;
    font-size:17px;
    line-height:1.7;
    color:var(--muted);
    margin:0 0 30px
}

.hero-art{
    min-height:600px;
    position:relative;
    overflow:hidden;
    background:#e8e1d7
}

.hero-art img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center
}

/* Transparent text directly over hero image */
.hero-tag{
    position:absolute;
    right:30px;
    top:30px;
    background:transparent;
    padding:16px 20px;
    font-size:10px;
    line-height:1.6;
    letter-spacing:.16em;
    z-index:5;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.45)
}

.hero-tag strong{
    font-size:13px;
    color:#fff
}


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

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:13px 21px;
    border:1px solid var(--ink);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.1em;
    cursor:pointer
}

.btn-dark{
    background:var(--ink);
    color:#fff
}

.btn-outline{
    background:transparent;
    color:var(--ink)
}


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

.shop-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    padding-top:85px;
    margin-bottom:25px
}

.shop-head h2,
.admin h1,
.form-box h1{
    font:600 42px/1.1 'Playfair Display',serif;
    margin:0
}

.search{
    display:flex;
    border-bottom:1px solid var(--ink)
}

.search input{
    width:260px;
    background:none;
    border:0;
    padding:12px 4px;
    outline:none
}

.search button{
    border:0;
    background:none;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.1em
}

.category-pills{
    display:flex;
    gap:25px;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
    margin-bottom:28px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em
}

.category-pills a{
    color:var(--muted)
}

.category-pills a.active,
.category-pills a:hover{
    color:var(--ink);
    border-bottom:1px solid var(--ink);
    padding-bottom:5px
}


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

.products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px 18px;
    padding-bottom:100px
}

.product-card{
    display:block
}

.product-photo{
    aspect-ratio:3/4;
    background:#e8e1d7;
    position:relative;
    overflow:hidden
}

.product-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s
}

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

.condition{
    position:absolute;
    top:12px;
    left:12px;
    background:var(--paper);
    padding:6px 9px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em
}

.no-photo{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8f877d;
    font-size:11px;
    letter-spacing:.2em
}

.product-info{
    padding:13px 2px
}

.product-meta{
    display:flex;
    justify-content:space-between;
    color:#8b847a;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em
}

.product-info h3{
    font:600 20px 'Playfair Display',serif;
    margin:8px 0 3px
}

.brandline{
    margin:0 0 9px;
    color:var(--muted);
    font-size:12px
}

.price{
    font-size:15px
}

.empty{
    grid-column:1/-1;
    padding:80px 20px;
    text-align:center
}


/* =========================
   DETAIL
   ========================= */

.detail{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
    gap:70px;
    padding-top:45px;
    padding-bottom:100px
}

.detail-main{
    background:#e8e1d7;
    aspect-ratio:4/5;
    max-height:780px
}

.detail-main img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block
}

.detail-info{
    padding:55px 25px 0 0
}

.detail-info h1{
    font:600 clamp(40px,5vw,66px)/1.02 'Playfair Display',serif;
    margin:0 0 8px
}

.detail-brand{
    font-size:14px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.1em
}

.detail-price{
    font-size:27px;
    margin:30px 0;
    border-bottom:1px solid var(--line);
    padding-bottom:28px
}

.facts{
    display:flex;
    gap:55px;
    border-bottom:1px solid var(--line);
    padding-bottom:25px
}

.facts div{
    display:flex;
    flex-direction:column;
    gap:7px
}

.facts small{
    font-size:9px;
    letter-spacing:.15em;
    color:var(--muted)
}

.facts b{
    font-size:13px
}

.description{
    font-size:15px;
    line-height:1.8;
    color:#514d47;
    padding:30px 0
}

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


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

.site-footer{
    background:var(--ink);
    color:#d9d2c8;
    padding:55px 0 20px
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px
}

.brand.light{
    color:#fff
}

.footer-grid p{
    color:#999187;
    font-size:13px
}

.footer-grid h4{
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#fff
}

.footer-grid a:not(.brand){
    display:block;
    color:#aaa198;
    font-size:12px;
    margin:10px 0
}

.copyright{
    border-top:1px solid #3a3733;
    margin-top:45px;
    padding-top:18px;
    color:#777067;
    font-size:11px
}


/* =========================
   FORMS
   ========================= */

.auth-page,
.form-page,
.admin{
    padding:65px 0 100px
}

.form-box{
    background:#fff;
    border:1px solid var(--line);
    padding:42px;
    max-width:540px;
    margin:auto
}

.form-box.wide{
    max-width:980px
}

.form-box h1{
    margin-bottom:30px
}

.form-group{
    margin-bottom:19px
}

.form-group label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:8px
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    padding:13px 12px;
    font:inherit;
    outline:none
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:var(--ink)
}

.form-group textarea{
    resize:vertical
}

.form-group small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:7px
}

.error{
    background:#f8e7e3;
    color:#8a3528;
    padding:12px;
    margin-bottom:18px;
    font-size:13px
}

.editor-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:35px
}

.form-actions{
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:10px
}

.edit-preview{
    display:block;
    margin-top:12px;
    width:140px;
    aspect-ratio:3/4;
    object-fit:cover
}


/* =========================
   ADMIN
   ========================= */

.admin-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:35px
}

.admin-head p{
    color:var(--muted);
    margin:10px 0 0
}

.admin-table{
    background:#fff;
    border:1px solid var(--line)
}

.admin-row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:15px;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    font-size:13px
}

.admin-row:last-child{
    border-bottom:0
}

.admin-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--muted);
    background:#f5f1e9
}

.admin-product{
    display:flex;
    align-items:center;
    gap:12px
}

.admin-product img{
    width:45px;
    height:55px;
    object-fit:cover
}

.actions{
    display:flex;
    gap:15px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em
}

.actions .danger{
    color:#9c3c30
}


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

@media(max-width:900px){

    .main-nav{
        gap:13px
    }

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

    .hero-art{
        min-height:350px
    }

    .hero-art img{
        width:100%;
        height:350px;
        object-fit:cover
    }

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

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

    .detail-info{
        padding:0
    }

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

    .form-actions{
        grid-column:auto
    }

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


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

@media(max-width:650px){

    .main-nav{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        padding:18px 5%;
        flex-direction:column;
        align-items:flex-start
    }

    .menu-btn{
        display:block
    }

    .menu-open .main-nav{
        display:flex
    }

    .hero-copy{
        padding:55px 8%
    }

    .hero{
        min-height:0
    }

    .hero-art{
        min-height:300px
    }

    .hero-art img{
        height:300px
    }

    .hero-tag{
        right:12px;
        top:12px;
        padding:10px 12px;
        font-size:9px
    }

    .hero-tag strong{
        font-size:12px
    }

    .shop-head{
        display:block;
        padding-top:55px
    }

    .search{
        margin-top:20px
    }

    .products{
        grid-template-columns:repeat(2,1fr);
        gap:25px 10px
    }

    .product-info h3{
        font-size:17px
    }

    .category-pills{
        overflow:auto;
        white-space:nowrap
    }

    .admin-head{
        display:block
    }

    .admin-head .btn{
        margin-top:20px
    }

    .admin-row{
        grid-template-columns:1.5fr .8fr .8fr
    }

    .admin-row>span:nth-child(2){
        display:none
    }

    .admin-label>span:nth-child(2){
        display:none
    }

    .actions{
        flex-direction:column;
        gap:7px
    }

    .detail{
        padding-top:20px
    }

    .detail-main{
        aspect-ratio:4/5
    }

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

    .form-box{
        padding:25px 20px
    }

    .shop-head h2,
    .admin h1,
    .form-box h1{
        font-size:34px
    }
}