:root {
    --ink    : #17202a;
    --muted  : #687583;
    --brand  : #ff6a00;
    --soft   : #f5f7fa;
    --line   : #e3e8ee;
    --ok     : #147a42;
    --danger : #b42318
}

* {
    box-sizing : border-box
}

body {
    margin     : 0;
    background : var(--soft);
    color      : var(--ink);
    font       : 16px/1.5 Arial, sans-serif
}

.wrap {
    width  : min(1180px, 92%);
    margin : auto
}

.top {
    background : #17202a;
    color      : #fff;
    padding    : 10px 0;
    font-size  : 14px
}

.header {
    background    : #fff;
    border-bottom : 1px solid var(--line);
    padding       : 18px 0
}

.bar, .nav {
    display     : flex;
    gap         : 18px;
    align-items : center
}

.logo {
    color           : var(--ink);
    font-size       : 28px;
    font-weight     : 800;
    text-decoration : none
}

.logo b, .price, .admin-nav a {
    color : var(--brand)
}

.search {
    flex    : 1;
    display : flex
}

.search input, .field input, .field textarea, .field select {
    width         : 100%;
    border        : 1px solid #cbd5df;
    border-radius : 6px;
    padding       : 10px;
    font          : inherit
}

.search input {
    border-radius : 7px 0 0 7px
}

.btn {
    border          : 0;
    border-radius   : 6px;
    background      : var(--brand);
    color           : #fff;
    padding         : 10px 15px;
    font-weight     : 700;
    cursor          : pointer;
    text-decoration : none;
    display         : inline-block
}

.search .btn {
    border-radius : 0 7px 7px 0
}

.nav a {
    color           : var(--ink);
    text-decoration : none;
    font-weight     : 600
}

.nav form {
    margin : 0
}

.hero {
    background : linear-gradient(115deg, #17202a, #34465e);
    color      : #fff;
    padding    : 70px 0
}

.hero h1 {
    font-size : 44px;
    margin    : 0 0 12px
}

.hero p {
    color     : #d9e2eb;
    max-width : 580px
}

.section, .page {
    padding : 38px 0
}

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

.card, .panel, .form-card {
    background    : #fff;
    border        : 1px solid var(--line);
    border-radius : 10px;
    padding       : 15px
}

.card img, .product-image {
    width         : 100%;
    height        : 180px;
    object-fit    : cover;
    background    : #eef2f5;
    border-radius : 7px
}

.card h3 {
    font-size : 16px;
    margin    : 12px 0 5px
}

.card a {
    color           : var(--ink);
    text-decoration : none
}

.price {
    font-weight : 800
}

.old {
    color           : var(--muted);
    text-decoration : line-through;
    font-weight     : 400;
    margin-left     : 7px
}

.badge {
    background    : #fff0e7;
    color         : #b84000;
    border-radius : 4px;
    padding       : 3px 6px;
    font-size     : 12px;
    font-weight   : 700
}

.layout {
    display               : grid;
    grid-template-columns :260px 1fr;
    gap                   : 24px
}

.field {
    margin : 0 0 14px
}

.field label {
    display       : block;
    font-weight   : 700;
    margin-bottom : 5px
}

.field textarea {
    min-height : 100px
}

.flash {
    padding       : 12px 15px;
    margin        : 18px 0;
    border-radius : 6px;
    background    : #fff
}

.success {
    border-left : 4px solid var(--ok)
}

.error {
    border-left : 4px solid var(--danger)
}

table {
    width           : 100%;
    border-collapse : collapse;
    background      : #fff
}

th, td {
    text-align     : left;
    padding        : 12px;
    border-bottom  : 1px solid var(--line);
    vertical-align : top
}

.cart-img {
    width         : 70px;
    height        : 60px;
    object-fit    : cover;
    border-radius : 5px
}

.cart-row {
    display               : grid;
    grid-template-columns :80px 1fr 100px 85px;
    gap                   : 14px;
    align-items           : center
}

.two-col, .product-detail {
    display               : grid;
    grid-template-columns :1fr 360px;
    gap                   : 24px
}

.product-detail {
    grid-template-columns :1fr 1fr;
    gap                   : 36px
}

.product-detail .product-image {
    height : 410px
}

.stock {
    color       : var(--ok);
    font-weight : bold
}

.footer {
    background : #17202a;
    color      : #cbd5df;
    padding    : 28px 0;
    margin-top : 35px
}

.muted {
    color : var(--muted)
}

.admin-nav {
    display       : flex;
    gap           : 12px;
    margin-bottom : 20px
}

.admin-nav a {
    font-weight : bold
}

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

.stat {
    padding       : 18px;
    background    : #fff;
    border-radius : 8px;
    border        : 1px solid var(--line)
}

@media (max-width : 800px) {
    .bar {
        flex-wrap : wrap
    }

    .search {
        order      : 3;
        flex-basis : 100%
    }

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

    .layout, .two-col, .product-detail {
        grid-template-columns :1fr
    }

    .hero h1 {
        font-size : 32px
    }

    .cart-row {
        grid-template-columns :60px 1fr
    }

    .product-detail .product-image {
        height : 280px
    }
}

/* Modern storefront refresh */
:root{--brand:#635bff;--brand-dark:#4038d3;--soft:#f7f8fc;--line:#e8eaf3;--shadow:0 18px 45px rgba(27,36,70,.09);--radius:16px}body{background:var(--soft);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.01em}.top{background:linear-gradient(90deg,#17213c,#293c72);padding:9px 0;color:#dfe7ff}.header{position:sticky;top:0;z-index:20;padding:14px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(15px);border-color:rgba(226,232,240,.8)}.bar{gap:22px}.logo{font-size:30px;letter-spacing:-1.8px}.logo b,.price,.admin-nav a{color:var(--brand)}.search input{border:1px solid transparent;background:#f2f4f9;padding:12px 15px;transition:.2s}.search input:focus{outline:0;background:#fff;border-color:#aaa6ff;box-shadow:0 0 0 4px rgba(99,91,255,.12)}.btn{background:linear-gradient(135deg,var(--brand),#8b5cf6);box-shadow:0 8px 18px rgba(99,91,255,.22);transition:transform .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(99,91,255,.3)}.nav{gap:14px}.nav a{font-size:14px}.nav form{margin:0}.hero{position:relative;overflow:hidden;padding:104px 0;background:radial-gradient(circle at 78% 30%,rgba(139,92,246,.85),transparent 24%),linear-gradient(125deg,#111a37,#26396c 57%,#16213d)}.hero:after{content:"";position:absolute;right:9%;top:17%;width:255px;height:255px;border:30px solid rgba(255,255,255,.11);border-radius:48px;transform:rotate(27deg);box-shadow:0 0 0 35px rgba(255,255,255,.035)}.hero .wrap{position:relative;z-index:1}.hero h1{max-width:650px;font-size:clamp(42px,6vw,68px);line-height:1.02;letter-spacing:-3px}.hero p{font-size:18px;line-height:1.65}.hero .btn{margin-top:8px;padding:13px 20px}.section,.page{padding:54px 0}.section h2{font-size:28px;letter-spacing:-1px}.grid{gap:22px}.card,.panel,.form-card{border:1px solid rgba(226,232,240,.9);border-radius:var(--radius);box-shadow:0 3px 10px rgba(40,53,90,.025);transition:transform .22s,box-shadow .22s,border-color .22s}.card{padding:12px;background:#fff}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d9d7ff}.card img{height:205px;border-radius:12px;transition:transform .35s}.card:hover img{transform:scale(1.015)}.card h3{font-size:16px;margin:13px 0 3px;line-height:1.35}.card .muted{font-size:13px;margin:3px 0 10px}.price{font-size:18px}.badge{background:#eeedff;color:#5148dc;border-radius:999px;padding:4px 9px;text-transform:uppercase;letter-spacing:.04em}.layout{grid-template-columns:250px 1fr}.panel,.form-card{padding:24px;background:rgba(255,255,255,.96)}.form-card{max-width:560px;margin:0 auto}.form-card h1{letter-spacing:-1.2px;margin-top:0}.field label{font-size:14px;color:#34415e}.field input,.field textarea,.field select{border-color:#dde2ed;background:#fbfcfe;transition:.2s}.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:#918bff;box-shadow:0 0 0 4px rgba(99,91,255,.11);background:#fff}.product-detail{align-items:start}.product-detail .product-image{border-radius:20px;box-shadow:var(--shadow)}.product-detail h1{font-size:38px;letter-spacing:-1.6px;margin:13px 0}.two-col{grid-template-columns:minmax(0,1fr) 370px}.two-col aside{height:max-content;position:sticky;top:100px}.cart-row{margin-bottom:12px;box-shadow:none}.flash{border-radius:12px;box-shadow:0 5px 15px rgba(40,53,90,.06)}table{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(40,53,90,.03)}th{background:#f6f7fc;color:#526078;font-size:12px;letter-spacing:.06em;text-transform:uppercase}td{background:#fff}.stats{gap:18px}.stat{border:0;border-radius:var(--radius);box-shadow:var(--shadow);font-size:14px;color:#64748b}.stat strong{display:block;font-size:30px;color:#16213d;letter-spacing:-1.5px}.admin-nav{padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;width:max-content}.footer{margin-top:65px;background:linear-gradient(100deg,#131d36,#263868)}@media(max-width:800px){.header{position:static}.nav{margin-left:auto}.nav a{font-size:13px}.hero{padding:70px 0}.hero:after{width:160px;height:160px;right:-35px}.card img{height:160px}.section,.page{padding:35px 0}.two-col aside{position:static}.admin-nav{width:100%;justify-content:space-between}.product-detail h1{font-size:31px}}@media(max-width:480px){.grid{gap:12px}.card{padding:9px}.card h3{font-size:14px}.nav{gap:9px}.nav form .btn{padding:7px 9px}.logo{font-size:27px}.top{font-size:12px}}