:root {
  --white: #fff;
  --bg: #fff;
  --soft: #f4f6fa;
  --soft-2: #eef1f7;
  --line: #e5e9f0;
  --line-2: #d5dbe6;
  --ink: #10131a;
  --dim: #5f6878;
  --dimmer: #98a1b3;
  --gold: #c58b23;
  --gold-btn: linear-gradient(180deg, #f0b950 0%, #dc9c2b 100%);
  --gold-soft: #fdf6e8;
  --red: #e0452f;
  --green: #17a565;
  --shadow-s: 0 1px 2px rgba(16, 19, 26, 0.04);
  --shadow: 0 12px 32px -14px rgba(16, 19, 26, 0.16);
  --shadow-lg: 0 28px 60px -26px rgba(16, 19, 26, 0.22);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }
body { overflow-x: hidden; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 40px; }
::selection { background: #ffe1a8; color: #3a2a05; }

.ph {
  position: relative; background: repeating-linear-gradient(45deg,#f7f9fc 0 10px,#f2f5f9 10px 20px);
  border:1px dashed var(--line-2); border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ph > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; z-index:2; }
.ph-in { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:8px; pointer-events:none; }
.ph-in svg { color:#c3cbd9; }
.ph-in b { font-size:11px; font-weight:600; color:#8d97a8; word-break:break-all; }
.ph-in span { font-size:10px; color:#aeb6c4; }

.topbar { background: var(--soft); border-bottom: 1px solid var(--line); }
.topbar .wrap { display:flex; align-items:center; height:44px; font-size:13px; color:var(--dim); }
.tb-city { display:flex; align-items:center; gap:7px; font-weight:500; color:var(--ink); }
.tb-nav { display:flex; gap:32px; margin-left:66px; font-weight:500; }
.tb-nav a:hover { color: var(--gold); }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:24px; }
.tb-phone { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; }
.tb-lang { display:flex; align-items:center; gap:5px; cursor:pointer; }

.header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:90; }
.header .wrap { display:flex; align-items:center; gap:24px; height:88px; }
.logo { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.logo-mark { width:44px; height:44px; border:1.8px solid var(--ink); border-radius:11px; display:flex; align-items:center; justify-content:center; }
.logo-txt b { display:block; font-size:22px; font-weight:800; letter-spacing:0.3px; line-height:1; }
.logo-txt b i { font-style:normal; font-weight:400; color:var(--dimmer); }
.logo-txt small { display:block; font-size:9.5px; letter-spacing:1.4px; color:var(--dimmer); margin-top:5px; font-weight:500; }
.btn-catalog { display:flex; align-items:center; gap:11px; background:var(--ink); border:none; border-radius:10px; padding:0 24px; height:50px; font-size:14.5px; font-weight:600; color:#fff; cursor:pointer; flex-shrink:0; }
.searchbar { flex:1; max-width:520px; height:50px; background:var(--soft); border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; padding:0 6px 0 20px; }
.searchbar:focus-within { background:#fff; border-color:var(--line-2); }
.searchbar input { flex:1; background:none; border:none; outline:none; font-size:14.5px; color:var(--ink); }
.searchbar input::placeholder { color:var(--dimmer); }
.search-go { width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--dim); cursor:pointer; }
.head-right { margin-left:auto; display:flex; align-items:center; gap:28px; }
.head-act { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; cursor:pointer; position:relative; }
.head-act:hover { color:var(--gold); }
.cart-badge { position:absolute; top:-6px; right:-12px; background:var(--red); color:#fff; font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

.hero { background:linear-gradient(120deg,#f7f9fc 0%,#eef2f8 55%,#f3efe7 100%); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; right:-140px; top:-160px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(220,156,43,0.13),transparent 68%); }
.hero .wrap { position:relative; z-index:2; display:flex; align-items:center; min-height:456px; padding-top:32px; padding-bottom:32px; }
.hero-copy { max-width:540px; flex-shrink:0; }
.hero-kicker { color:var(--gold); font-size:14.5px; font-weight:600; margin-bottom:16px; }
.hero h1 { font-size:44px; line-height:1.15; font-weight:800; letter-spacing:-1px; margin-bottom:20px; }
.hero h1 .thin { font-weight:400; color:#3d4757; }
.hero p { font-size:15px; line-height:1.65; color:var(--dim); max-width:420px; margin-bottom:30px; }
.btn-gold { display:inline-flex; align-items:center; gap:24px; background:var(--gold-btn); color:#2a1b03; border:none; border-radius:9px; padding:0 22px 0 26px; height:52px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; box-shadow:0 12px 26px -12px rgba(220,156,43,0.75); }
.btn-gold:hover { filter:brightness(1.05); transform:translateY(-2px); }
.hero-img { position:absolute; left:52%; top:50%; transform:translateY(-50%); width:520px; height:340px; z-index:1; }
.hero-badges { position:absolute; right:40px; top:50%; transform:translateY(-50%); z-index:4; width:252px; display:flex; flex-direction:column; gap:12px; }
.hb { background:#fff; border:1px solid var(--line); border-radius:12px; padding:17px; display:flex; gap:13px; align-items:flex-start; box-shadow:var(--shadow-s); }
.hb b { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
.hb span { display:block; font-size:12px; line-height:1.45; color:var(--dimmer); }

.catstrip { padding:26px 0 8px; }
.catstrip .wrap { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.catcard { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; gap:13px; align-items:center; transition:.22s; cursor:pointer; box-shadow:var(--shadow-s); }
.catcard:hover { border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow); }
.catcard .ph { width:76px; height:70px; flex-shrink:0; border-radius:9px; }
.catcard h4 { font-size:14.5px; font-weight:600; line-height:1.25; margin-bottom:5px; }
.catcard p { font-size:10.5px; line-height:1.4; color:var(--dimmer); margin-bottom:8px; }
.catcard .more { font-size:12px; color:var(--gold); display:flex; align-items:center; gap:5px; font-weight:600; }

.sec { padding:68px 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:20px; }
.sec-head h2 { font-size:30px; font-weight:800; letter-spacing:-0.6px; }
.sec-head p { color:var(--dimmer); font-size:14px; margin-top:9px; }
.sec-all { font-size:13.5px; color:var(--gold); display:flex; align-items:center; gap:8px; font-weight:600; flex-shrink:0; }

.tabs { display:flex; gap:9px; margin-bottom:26px; flex-wrap:wrap; }
.tab { padding:10px 20px; border-radius:8px; background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--dim); cursor:pointer; }
.tab.on { background:var(--ink); color:#fff; border-color:var(--ink); }

.pgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.pcard { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:.22s; box-shadow:var(--shadow-s); }
.pcard:hover { border-color:var(--line-2); transform:translateY(-5px); box-shadow:var(--shadow); }
.pthumb { position:relative; height:200px; padding:14px; background:#fff; }
.pthumb .ph { width:100%; height:100%; border-radius:9px; }
.ptag { position:absolute; top:14px; left:14px; z-index:3; font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:6px; background:var(--ink); color:#fff; letter-spacing:0.2px; }
.ptag.red { background:var(--red); } .ptag.gold { background:var(--gold-btn); color:#2a1b03; }
.pwish { position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--dim); cursor:pointer; }
.pbody { padding:0 15px 17px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pbrand { font-size:10px; letter-spacing:1px; color:var(--dimmer); text-transform:uppercase; font-weight:700; }
.pname { font-size:13.5px; font-weight:600; line-height:1.4; }
.prate { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dimmer); }
.stars { color:#e8a417; letter-spacing:1px; font-size:11px; }
.pprice { display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:8px; }
.pprice b { font-size:17.5px; font-weight:800; }
.pprice s { font-size:12px; color:var(--dimmer); }
.pmonth { font-size:11px; color:var(--gold); font-weight:500; }
.pbuy { margin-top:11px; height:42px; border-radius:9px; background:var(--soft); border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.pbuy:hover { background:var(--gold-btn); color:#2a1b03; border-color:transparent; }

.brands { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--soft); padding:30px 0; }
.brands .wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brands .lbl { font-size:11px; letter-spacing:1.3px; color:var(--dimmer); font-weight:700; margin-right:14px; }
.brands .ph { flex:1; min-width:112px; height:44px; border-radius:8px; background:#fff; border:1px dashed var(--line-2); }

.banner { border-radius:18px; overflow:hidden; background:linear-gradient(105deg,#fbf7ef 0%,#f6f0e3 48%,#f1f4f9 100%); border:1px solid var(--line); display:flex; align-items:center; gap:40px; padding:44px 48px; position:relative; }
.banner-l { max-width:500px; position:relative; z-index:2; }
.banner-l .kick { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--gold); background:#fff; border:1px solid #f0ddb6; padding:6px 12px; border-radius:6px; margin-bottom:16px; }
.banner-l h3 { font-size:27px; font-weight:800; line-height:1.28; margin-bottom:12px; letter-spacing:-0.5px; }
.banner-l p { color:var(--dim); font-size:14px; margin-bottom:24px; }
.cdrow { display:flex; gap:11px; margin-bottom:26px; }
.cd { background:#fff; border:1px solid var(--line); border-radius:11px; padding:14px 10px; text-align:center; min-width:74px; box-shadow:var(--shadow-s); }
.cd b { display:block; font-size:24px; font-weight:800; }
.cd span { font-size:10px; letter-spacing:0.7px; color:var(--dimmer); text-transform:uppercase; }
.banner .ph { margin-left:auto; width:400px; height:270px; flex-shrink:0; border-radius:14px; background:#fff; }

.usp { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.uspc { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow-s); }
.uspc .ic { width:44px; height:44px; border-radius:11px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.uspc b { display:block; font-size:15px; font-weight:700; margin-bottom:7px; }
.uspc p { font-size:12.5px; line-height:1.6; color:var(--dimmer); }

footer { border-top:1px solid var(--line); background:var(--soft); padding:54px 0 22px; margin-top:20px; }
.fgrid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:40px; }
.fbrand p { font-size:12.5px; line-height:1.7; color:var(--dimmer); margin:18px 0 20px; max-width:268px; }
.fsoc { display:flex; gap:9px; }
.fsoc a { width:34px; height:34px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--dim); }
.fcol h5 { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dimmer); margin-bottom:16px; font-weight:700; }
.fcol a { display:block; font-size:13px; color:var(--dim); margin-bottom:11px; }
.fcol a:hover { color:var(--gold); }
.fcont div { display:flex; gap:10px; font-size:13px; color:var(--dim); margin-bottom:14px; line-height:1.5; }
.fcont svg { flex-shrink:0; margin-top:2px; color:var(--gold); }
.fbot { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--dimmer); flex-wrap:wrap; gap:14px; }
.pays { display:flex; gap:8px; }
.pays span { border:1px solid var(--line); background:#fff; border-radius:5px; padding:5px 10px; font-size:10.5px; font-weight:600; color:var(--dim); }

.flag { position:fixed; bottom:20px; right:20px; z-index:200; background:#fff; border:1px solid var(--line); padding:9px 15px; border-radius:100px; font-size:11.5px; color:var(--dim); display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); }
.flag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }

@media (max-width:1200px){
  .wrap { padding: 0 28px; }
  .tb-nav { margin-left: 18px; gap: 18px; }
  .header .wrap { gap: 16px; }
  .catstrip .wrap { grid-template-columns: repeat(3, 1fr); }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .hero-img { display: none; }
  .hero .wrap { padding-right: 0; }
  .hero-copy { max-width: 100%; }
  .hero-badges { position: static; transform: none; width: 100%; margin-top: 18px; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width:980px){
  .wrap { padding: 0 18px; }
  .topbar .wrap { height: auto; min-height: 44px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 10px 18px; }
  .tb-nav { display: none; }
  .tb-right { margin-left: 0; }
  .header .wrap { height: auto; min-height: 72px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .searchbar { order: 4; flex-basis: 100%; max-width: none; }
  .head-right { margin-left: auto; }
  .hero .wrap { display: block; padding-top: 28px; padding-bottom: 28px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(32px, 6vw, 48px); }
  .hero p { max-width: 100%; }
  .hero-badges { flex-direction: column; width: min(100%, 360px); }
  .catstrip .wrap { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .usp { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .banner { padding: 28px 20px; }
  .banner .ph { width: 100%; margin-left: 0; height: 220px; }
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .page-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width:720px){
  .wrap { padding: 0 14px; }
  .topbar .wrap { justify-content: center; }
  .tb-city, .tb-right { width: 100%; justify-content: center; }
  .logo-txt small { display: none; }
  .header .wrap { justify-content: space-between; }
  .btn-catalog { display: none; }
  .head-right { gap: 12px; }
  .head-act { font-size: 12px; }
  .searchbar { height: 46px; }
  .searchbar input { font-size: 13px; }
  .hero h1 { font-size: clamp(28px, 8vw, 38px); }
  .btn-gold { width: 100%; justify-content: center; }
  .hero-badges { width: 100%; }
  .catstrip .wrap { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
  .usp { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .sec { padding: 48px 0; }
  .sec-head { align-items: flex-start; flex-direction: column; }
  .phead { flex-direction: column; align-items: flex-start; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .tr { width: 100%; }
  .sel { width: 100%; }
  .product-wrap { grid-template-columns: 1fr !important; }
  .order-layout, .account-shell { grid-template-columns: 1fr !important; }
  .order-history-item { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 1fr; }
  .cart-item { align-items: flex-start; }
  .summary-card { padding: 18px; }
  .detail-grid .row { flex-direction: column; align-items: flex-start; }
  .filter-list { gap: 8px; }
  .qcat { padding: 8px 12px; }
  .page-head h1 { font-size: 28px; }
  .logo-mark { width: 38px; height: 38px; }
  .logo-txt b { font-size: 18px; }
}

.form-shell { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow-s); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--dimmer); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; border:1px solid var(--line); border-radius:10px; background:var(--soft); padding:12px 14px; font-size:14px; color:var(--ink); outline:none;
}
.form-group textarea { min-height:120px; resize:vertical; }
.form-group input[type="file"] { padding: 12px; }
.checkbox-field { justify-content: center; }
.checkbox-field label { margin-bottom: 0; }
.checkbox-field input { width: 18px; height: 18px; accent-color: var(--gold); }
.primary-btn, .secondary-btn, .danger-btn { border:none; border-radius:10px; padding:12px 18px; font-weight:700; cursor:pointer; }
.primary-btn { background:var(--gold-btn); color:#2a1b03; }
.secondary-btn { background:var(--soft); border:1px solid var(--line); color:var(--ink); }
.danger-btn { background:#fdeae7; color:#a6322a; }

.admin-layout { display:grid; grid-template-columns:240px 1fr; gap:24px; }
.sidebar { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 16px; position:sticky; top:104px; box-shadow:var(--shadow-s); }
.sidebar a { display:block; padding:12px 14px; border-radius:12px; color:var(--dim); font-weight:600; margin-bottom:8px; transition:all .2s ease; }
.sidebar a.active, .sidebar a:hover { background:linear-gradient(180deg,#fffaf0,#f7f8fb); color:var(--ink); border:1px solid #f1e0b6; }
.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-s); }
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; vertical-align:top; }
th { background:linear-gradient(180deg,#f8f9fd,#f2f5fa); color:var(--dim); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.badge { display:inline-block; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.badge.new { background:#eaf7f1; color:#117d52; }
.badge.done { background:#ecf0ff; color:#2a4cb4; }
.badge.cancel { background:#fdeae7; color:#a6322a; }
.badge.processing { background:#fff4d9; color:#8a5a04; }

.notice { padding:12px 14px; border-radius:10px; margin-bottom:18px; font-size:14px; }
.notice.success { background:#ebfaf2; color:#117d52; border:1px solid #cfeee1; }
.notice.error { background:#fff0ee; color:#a6322a; border:1px solid #f2d1cb; }

.admin-shell { max-width:1480px; margin:0 auto; padding:28px 24px 80px; }
.admin-topbar { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; box-shadow:var(--shadow-s); }
.admin-topbar h1 { font-size:32px; font-weight:800; }
.admin-topbar p { color:var(--dim); }
.admin-actions { display:flex; gap:10px; align-items:center; }
.admin-btn { display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; }
.admin-btn.primary { background:var(--gold-btn); border:none; color:#2a1b03; }

.admin-hero { display:flex; justify-content:space-between; align-items:center; gap:20px; background:linear-gradient(135deg, #111827 0%, #1f2937 38%, #151b22 100%); color:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 26px; margin-bottom:26px; box-shadow:var(--shadow-lg); }
.admin-hero h2 { font-size:28px; font-weight:800; letter-spacing:-0.7px; }
.eyebrow { color:#f6d48d; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.eyebrow.dark { color:var(--gold); margin-bottom:0; }
.quick-actions { display:flex; gap:12px; flex-wrap:wrap; }
.quick-actions .admin-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; }
.quick-actions .admin-btn.primary { background:var(--gold-btn); color:#2a1b03; }

.stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-s); }
.stat-card .label { color:var(--dimmer); font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:700; }
.stat-card .value { font-size:32px; font-weight:800; margin-top:10px; }
.stat-card .delta { margin-top:8px; font-size:12px; color:var(--green); }

.panel-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:20px; }
.admin-panel { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow-s); }
.panel-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.panel-header h2 { font-size:20px; font-weight:700; }
.panel-header .muted { color:var(--dim); }

.mini-list { display:grid; gap:12px; }
.mini-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.mini-row span { color:var(--dim); font-weight:600; }
.mini-row strong { font-size:20px; color:var(--ink); }

.inventory-list { display:grid; gap:14px; }
.inventory-item { display:grid; gap:10px; }
.inventory-item span { font-weight:600; color:var(--ink); }
.progress { width:100%; height:10px; border-radius:999px; background:var(--soft); overflow:hidden; border:1px solid var(--line); }
.progress-bar { height:100%; background:linear-gradient(90deg, #f0b950 0%, #d89022 100%); border-radius:999px; }

.cart-page-wrap, .order-page-wrap, .account-page-wrap { padding-top:30px; padding-bottom:80px; }
.cart-shell { display:grid; grid-template-columns:1.2fr 0.8fr; gap:24px; margin-top:24px; }
.cart-list-card, .summary-card, .order-box, .profile-card, .info-card, .account-panel { background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-s); }
.cart-list-card { padding:18px; }
.cart-row { display:grid; grid-template-columns:1.6fr 0.8fr 0.7fr 0.5fr; align-items:center; gap:14px; padding:18px 12px; border-bottom:1px solid var(--line); }
.cart-row:last-child { border-bottom:none; }
.cart-item { display:flex; align-items:center; gap:14px; }
.cart-thumb { width:76px; height:76px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-meta h4 { font-size:15px; margin-bottom:5px; }
.cart-meta small { color:var(--dimmer); }
.qty-form { display:flex; align-items:center; gap:8px; }
.qty-form button { width:28px; height:28px; border:1px solid var(--line); background:var(--soft); border-radius:8px; cursor:pointer; }
.qty-form span { min-width:18px; text-align:center; font-weight:700; }
.cart-total { font-weight:800; font-size:15px; }
.remove-form { display:flex; justify-content:flex-end; }
.summary-card { padding:24px; }
.summary-head { margin-bottom:18px; }
.summary-head h3 { font-size:22px; font-weight:800; }
.summary-body { display:grid; gap:12px; margin-bottom:20px; }
.summary-row { display:flex; justify-content:space-between; color:var(--dim); }
.summary-row.total { padding-top:14px; border-top:1px solid var(--line); margin-top:10px; font-size:18px; color:var(--ink); }
.checkout-form { display:grid; gap:16px; }
.single-column { grid-template-columns:1fr; }
.checkout-btn { width:100%; margin-top:6px; }
.empty-state { text-align:center; padding:56px 20px; }
.empty-icon { font-size:46px; margin-bottom:14px; }

.order-layout { display:grid; grid-template-columns:320px 1fr; gap:24px; margin-top:24px; }
.order-summary-card { padding:22px; }
.status-block { margin:18px 0 20px; display:flex; flex-direction:column; gap:10px; }
.status-chip { display:inline-flex; align-items:center; justify-content:center; padding:9px 12px; border-radius:999px; font-weight:700; font-size:12px; }
.status-chip.new { background:#edf7ee; color:#147c4e; }
.status-chip.processing { background:#fff6dd; color:#9a6406; }
.status-chip.done { background:#edf1ff; color:#2e4ebd; }
.status-chip.cancel { background:#fdeae7; color:#a6322a; }
.order-content { display:grid; gap:20px; }
.order-product-box, .timeline-box { padding:22px; }
.order-item { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.order-item:last-child { border-bottom:none; }
.mini-detail { margin-top:6px; color:var(--dim); font-size:12px; }
.order-price { font-weight:800; }
.order-total-row { display:flex; align-items:center; justify-content:space-between; padding-top:18px; margin-top:16px; border-top:1px solid var(--line); font-size:18px; }
.status-timeline { display:grid; gap:18px; margin:8px 0 22px; }
.timeline-step { display:flex; align-items:flex-start; gap:12px; }
.timeline-step .point { width:12px; height:12px; border-radius:50%; background:var(--line-2); margin-top:5px; box-shadow:0 0 0 5px #f6f7fb; }
.timeline-step.active .point { background:var(--gold); }
.timeline-step strong { display:block; margin-bottom:4px; }
.timeline-step small { color:var(--dim); }
.detail-grid { display:grid; gap:12px; }
.detail-grid .row { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); }
.detail-grid .row:last-child { border-bottom:none; }
.detail-grid .row span { color:var(--dim); }

.account-shell { display:grid; grid-template-columns:320px 1fr; gap:24px; }
.account-panel { padding:22px; }
.account-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.mini-stat { background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:16px; }
.mini-stat span { display:block; color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:0.9px; }
.mini-stat strong { display:block; margin-top:8px; font-size:24px; }
.account-orders-card { padding:20px; }
.order-history-list { display:grid; gap:12px; }
.order-history-item { display:grid; grid-template-columns:1.3fr 0.7fr 0.7fr auto; align-items:center; gap:12px; padding:16px 14px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.order-id { font-weight:700; }
.order-date { font-size:12px; color:var(--dim); margin-top:4px; }
.order-amount { font-weight:800; }
.small-btn { height:36px; padding:0 14px; font-size:12px; }
.empty-orders { margin-bottom:0; }

.admin-order-wrap { padding-top:30px; padding-bottom:80px; }
.admin-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.compact-card { padding:18px; }
.compact-card .value { font-size:26px; }
.status-form { display:flex; align-items:center; gap:8px; }
.status-form .sel { min-width:140px; }
.admin-orders-table { margin-top:8px; }

@media (max-width:1100px) {
  .cart-shell, .order-layout, .account-shell { grid-template-columns:1fr; }
  .account-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .cart-row { grid-template-columns:1fr; }
  .order-history-item { grid-template-columns:1fr; }
  .account-stats { grid-template-columns:1fr; }
  .admin-kpis { grid-template-columns:1fr; }
}

.account-shell { display:grid; grid-template-columns:320px 1fr; gap:24px; }
.profile-card, .info-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow-s); }
.profile-avatar { width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg, #f1ca72, #d9902d); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800; margin-bottom:16px; }
.profile-meta { display:grid; gap:10px; }
.profile-meta .row { display:flex; justify-content:space-between; gap:12px; color:var(--dim); }
.profile-meta .row strong { color:var(--ink); }

.order-detail { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.order-box { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow-s); }
.order-item { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.order-item:last-child { border-bottom:none; }
.order-total { display:flex; justify-content:space-between; padding-top:16px; font-size:18px; font-weight:800; }

@media (max-width:1100px) {
  .admin-layout { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .account-shell { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px) {
  .admin-shell { padding:18px 14px 70px; }
  .admin-topbar { flex-direction:column; align-items:flex-start; }
  .admin-actions { width:100%; flex-wrap:wrap; }
  .stat-grid { grid-template-columns:1fr; }
  .order-detail { grid-template-columns:1fr; }
}

.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.page-head h1 { font-size:34px; font-weight:800; }
.page-head p { color:var(--dim); }

.filter-list { display:flex; gap:10px; flex-wrap:wrap; padding-bottom:20px; }
.qcat { background:#fff; border:1px solid var(--line); border-radius:9px; padding:9px 16px; font-size:13px; font-weight:500; color:var(--dim); cursor:pointer; }
.qcat.on { background:var(--ink); color:#fff; border-color:var(--ink); }

.catalog-pg { padding:40px 0 80px; }
.catalog-head { padding:18px 0 26px; }
.crumb { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--dimmer); padding:22px 0 0; }
.crumb a:hover { color:var(--gold); }
.crumb b { color:var(--ink); font-weight:600; }
.phead { padding:16px 0 30px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.phead h1 { font-size:34px; font-weight:800; letter-spacing:-0.8px; margin-bottom:10px; }
.phead p { color:var(--dim); font-size:14px; max-width:580px; line-height:1.65; }
.cnt { font-size:13px; color:var(--dimmer); }
.layout { display:grid; grid-template-columns:272px 1fr; gap:28px; padding-bottom:80px; }
.filters { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; height:fit-content; position:sticky; top:108px; max-height: calc(100vh - 140px); overflow-y: auto; }
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: #dfe4ee; border-radius: 999px; }
.fhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.fhead h3 { font-size:16px; font-weight:700; }
.fhead a { font-size:12px; color:var(--gold); font-weight:600; }
.fg { border-top:1px solid var(--line); padding:19px 0; }
.fg h4 { font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--dimmer); font-weight:700; margin-bottom:14px; }
.ck { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:13.5px; color:var(--dim); }
.ck-l { display:flex; align-items:center; gap:11px; }
.box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-2); background:#fff; }
.num { font-size:11.5px; color:#b9c1cf; }
.track { height:4px; border-radius:4px; background:var(--soft-2); position:relative; margin:18px 4px 20px; }
.fill { position:absolute; left:15%; right:25%; top:0; bottom:0; background:var(--ink); border-radius:4px; }
.knob { position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; border:2.5px solid var(--ink); transform:translate(-50%,-50%); }
.prow { display:flex; align-items:center; gap:9px; }
.prow input { width:100%; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--soft); padding:0 12px; font-size:13px; outline:none; color:var(--ink); }
.fbtn { width:100%; height:46px; border-radius:9px; border:none; background:var(--gold-btn); color:#2a1b03; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.chips { display:flex; gap:9px; flex-wrap:wrap; }
.chip { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 14px; font-size:12.5px; color:var(--dim); }
.chip.clear { color:var(--dimmer); border-style:dashed; background:none; }
.tr { display:flex; align-items:center; gap:10px; margin-left:auto; }
.sel { height:42px; border-radius:9px; border:1px solid var(--line); background:#fff; padding:0 14px; font-size:13px; font-weight:500; }
.vt { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.vt div { width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--dimmer); cursor:pointer; }
.vt div.on { background:var(--ink); color:#fff; }

.checkout-box { padding:24px 0 0; }
.checkout-form { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; }
.cart-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-row:last-child { border-bottom:none; }
.cart-item { display:flex; align-items:center; gap:16px; }
.cart-thumb { width:72px; height:72px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-meta h4 { font-size:15px; margin-bottom:4px; }
.cart-meta small { color:var(--dimmer); }
.qty-box { display:flex; align-items:center; gap:8px; }
.qty-box button { width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.qty-box span { min-width:20px; text-align:center; font-weight:700; }
.total-box { background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:20px; }
.summary-row { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--dim); }
.summary-row strong { color:var(--ink); }

.product-page { padding:36px 0 80px; }
.product-wrap { display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; }
.product-gallery { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; }
.product-gallery .ph { height:520px; border-radius:14px; }
.product-info { background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; }
.product-info h1 { font-size:34px; font-weight:800; margin-bottom:12px; }
.product-meta { display:flex; gap:18px; align-items:center; margin-bottom:18px; color:var(--dim); font-size:14px; }
.price-box { display:flex; align-items:baseline; gap:12px; margin:22px 0; }
.price-box .main { font-size:34px; font-weight:800; }
.price-box .old { font-size:18px; color:var(--dimmer); text-decoration:line-through; }
.promo { display:inline-flex; padding:7px 10px; border-radius:999px; background:var(--gold-soft); color:var(--gold); font-size:12px; font-weight:700; }
.cta-row { display:flex; gap:12px; margin-top:18px; }
.cta-row .primary-btn, .cta-row .secondary-btn { height:50px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; }
.product-desc { margin-top:28px; color:var(--dim); line-height:1.75; }
.feature-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:22px; }
.feature-item { background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--dim); }

@media (max-width:1100px) {
  .layout { grid-template-columns:1fr; }
  .filters { position:static; }
  .product-wrap { grid-template-columns:1fr; }
}