:root{
    --black:#0b0b0c;
    --graphite:#202125;
    --text:#1a1a1c;
    --gray:#72757b;
    --silver:#c8c9cd;
    --border:#e5e5e7;
    --soft:#f6f6f7;
    --white:#fff;
    --serif:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",Arial,sans-serif
}
*{box-sizing:border-box}
body{
    margin:0;
    color:var(--text);
    background:#fff;
    font-family:var(--sans)
}
a{color:inherit}
.topbar{
    background:#09090a;
    color:#ddd;
    font-size:12px;
    text-align:center;
    padding:9px
}
.header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:30
}
.header-inner{
    max-width:1450px;
    margin:auto;
    min-height:78px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:0 34px
}
.logo{
    font-family:var(--serif);
    font-size:27px;
    letter-spacing:5px;
    text-decoration:none
}
.nav{
    display:flex;
    gap:28px;
    font-size:13px
}
.nav a{text-decoration:none}
.header-right{
    justify-self:end;
    display:flex;
    gap:17px;
    align-items:center
}
.cartlink{
    text-decoration:none;
    border:1px solid var(--border);
    padding:10px 14px
}
.hero-shop{
    background:#f2f2f3;
    text-align:center;
    padding:68px 20px
}
.hero-shop small{
    letter-spacing:3px;
    text-transform:uppercase;
    color:#74777b
}
.hero-shop h1{
    font-family:var(--serif);
    font-size:52px;
    font-weight:500;
    margin:14px 0 10px
}
.hero-shop p{
    max-width:620px;
    margin:auto;
    color:#74777b
}
.shop-layout{
    max-width:1450px;
    margin:0 auto;
    padding:42px 34px 80px;
    display:grid;
    grid-template-columns:250px 1fr;
    gap:45px
}
.filters{
    border-right:1px solid var(--border);
    padding-right:28px
}
.filters h3{
    font-family:var(--serif);
    font-size:22px;
    margin-top:0
}
.filter-group{
    border-top:1px solid var(--border);
    padding:22px 0
}
.filter-group label{
    display:block;
    font-size:12px;
    color:#666;
    margin-bottom:8px
}
.filter-group input,
.filter-group select{
    width:100%;
    padding:11px;
    border:1px solid var(--border);
    background:#fff
}
.btn-black{
    display:inline-block;
    border:0;
    padding:13px 20px;
    background:#111;
    color:#fff;
    text-decoration:none;
    cursor:pointer
}
.catalog-top{
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    margin-bottom:22px
}
.catalog-top .count{
    color:#777;
    font-size:13px
}
.products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px 22px
}
.product-card{
    text-decoration:none;
    display:block
}
.product-image{
    aspect-ratio:4/5;
    background:#f0f0f1;
    overflow:hidden;
    position:relative
}
.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .55s ease
}
.product-card:hover .product-image img{
    transform:scale(1.025)
}
.badge{
    position:absolute;
    top:12px;
    left:12px;
    background:#111;
    color:#fff;
    font-size:10px;
    letter-spacing:1px;
    padding:6px 9px
}
.product-info{
    padding:15px 2px
}
.product-brand{
    color:#86888d;
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase
}
.product-name{
    font-family:var(--serif);
    font-size:19px;
    margin:6px 0
}
.price{
    font-size:14px
}
.price-old{
    text-decoration:line-through;
    color:#aaa;
    margin-left:8px
}
.empty{
    grid-column:1/-1;
    padding:70px 20px;
    text-align:center;
    border:1px solid var(--border)
}
.product-page{
    max-width:1400px;
    margin:0 auto;
    padding:50px 35px 90px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px
}
.product-main-img{
    background:#f3f3f4;
    min-height:650px
}
.product-main-img img{
    width:100%;
    height:100%;
    max-height:760px;
    object-fit:cover
}
.product-details{
    padding-top:20px
}
.eyebrow{
    font-size:11px;
    letter-spacing:2px;
    color:#777;
    text-transform:uppercase
}
.product-details h1{
    font-family:var(--serif);
    font-weight:500;
    font-size:48px;
    margin:12px 0 16px
}
.product-price-large{
    font-size:21px;
    margin-bottom:25px
}
.description{
    color:#64666b;
    line-height:1.8
}
.meta{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:18px 0;
    margin:28px 0;
    font-size:13px;
    display:grid;
    gap:8px
}
.buy-row{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:10px
}
.buy-row input{
    border:1px solid var(--border);
    text-align:center;
    font-size:15px
}
.buy-row button{
    border:0;
    background:#111;
    color:#fff;
    font-size:13px;
    cursor:pointer
}
.cart-wrap,
.checkout-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:55px 30px 90px
}
.cart-wrap h1,
.checkout-wrap h1{
    font-family:var(--serif);
    font-size:44px;
    font-weight:500
}
.cart-grid{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:45px
}
.cart-item{
    display:grid;
    grid-template-columns:100px 1fr 120px 100px;
    gap:20px;
    align-items:center;
    border-bottom:1px solid var(--border);
    padding:18px 0
}
.cart-item img{
    width:100px;
    height:120px;
    object-fit:cover;
    background:#eee
}
.cart-name{
    font-family:var(--serif);
    font-size:18px
}
.cart-item input{
    width:75px;
    padding:9px;
    border:1px solid var(--border)
}
.summary{
    background:#f6f6f7;
    padding:25px;
    height:max-content
}
.summary-row{
    display:flex;
    justify-content:space-between;
    margin:10px 0
}
.summary-total{
    border-top:1px solid #ccc;
    margin-top:18px;
    padding-top:18px;
    font-size:19px
}
.summary .btn-black{
    width:100%;
    text-align:center;
    margin-top:20px
}
.checkout-grid{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:55px
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.form-grid .full{grid-column:1/-1}
.form-grid label{
    font-size:12px;
    display:block;
    margin-bottom:7px
}
.form-grid input,
.form-grid textarea,
.form-grid select{
    width:100%;
    padding:13px;
    border:1px solid var(--border);
    font:inherit
}
.form-grid textarea{min-height:100px}
.notice{
    padding:14px;
    border:1px solid #ddd;
    background:#fafafa;
    margin:15px 0
}
.footer{
    border-top:1px solid var(--border);
    padding:45px 30px;
    text-align:center;
    color:#777;
    font-size:12px
}
@media(max-width:1000px){
    .shop-layout{grid-template-columns:1fr}
    .filters{border-right:0;border-bottom:1px solid var(--border)}
    .products{grid-template-columns:repeat(2,1fr)}
    .product-page{grid-template-columns:1fr}
    .cart-grid,.checkout-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
    .header-inner{grid-template-columns:1fr auto;padding:0 17px}
    .nav{display:none}
    .logo{font-size:21px}
    .products{grid-template-columns:1fr}
    .hero-shop h1{font-size:38px}
    .shop-layout{padding-left:18px;padding-right:18px}
    .product-page{padding:25px 18px}
    .product-details h1{font-size:37px}
    .product-main-img{min-height:420px}
    .cart-item{grid-template-columns:70px 1fr}
    .cart-item img{width:70px;height:90px}
    .form-grid{grid-template-columns:1fr}
    .form-grid .full{grid-column:auto}
}