@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --blue:   #1a6fc4;
  --blue2:  #155fa0;
  --blue3:  #e8f2ff;
  --dark:   #0d1b2a;
  --dark2:  #12263a;
  --light:  #eef5ff;
  --accent: #00b4d8;
  --border: #dce8f5;
  --green:  #22c55e;
  --orange: #f59e0b;
  --red:    #ef4444;
  --shadow: 0 4px 20px rgba(26,111,196,.12);
  --shadow2:0 8px 32px rgba(26,111,196,.18);
  --radius: 12px;
  --nav-h:  62px;
  --bg:     #f7faff;
  --card:   #ffffff;
  --text:   #0d1b2a;
  --text2:  #6b7a8d;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { font-family:'Inter',sans-serif; color:var(--text); background:var(--bg); font-size:15px; line-height:1.6; min-width:320px; }
a     { text-decoration:none; color:inherit; }
img   { max-width:100%; display:block; }
button, input, select, textarea { font-family:inherit; }
.hidden { display:none !important; }
.w100   { width:100%; }
.btn { padding:.52rem 1.2rem; border-radius:9px; cursor:pointer; font-size:.88rem; font-weight:600; border:none; transition:all .2s ease; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.btn-p  { background:var(--blue); color:#fff; }
.btn-p:hover { background:var(--blue2); transform:translateY(-2px); box-shadow:var(--shadow2); }
.btn-o  { border:1.5px solid var(--blue); color:var(--blue); background:transparent; }
.btn-o:hover { background:var(--blue); color:#fff; }
.btn-g  { background:var(--light); color:var(--text); }
.btn-g:hover { background:var(--border); }
.btn-red { background:#fde8e8; color:var(--red); }
.btn-red:hover { background:var(--red); color:#fff; }
.btn-white { background:#fff; color:var(--blue); font-weight:700; }
.btn-white:hover { background:var(--light); }
.btn-sm { padding:.28rem .72rem; font-size:.77rem; }
.btn-lg { padding:.78rem 2rem; font-size:1rem; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.badge { padding:.2rem .7rem; border-radius:20px; font-size:.71rem; font-weight:700; display:inline-flex; align-items:center; }
.b-green  { background:#dcfce7; color:#16a34a; }
.b-orange { background:#fef3c7; color:#d97706; }
.b-red    { background:#fee2e2; color:#dc2626; }
.b-blue   { background:#dbeafe; color:#2563eb; }
.b-gray   { background:#f1f5f9; color:#64748b; }
.fg { margin-bottom:.9rem; }
.fg label { display:block; font-size:.8rem; font-weight:600; color:var(--text2); margin-bottom:.32rem; }
.fg input, .fg select, .fg textarea { width:100%; padding:.62rem .92rem; border:1.5px solid var(--border); border-radius:9px; font-size:.88rem; color:var(--text); background:var(--card); transition:border .2s, box-shadow .2s; }
.fg input:focus, .fg select:focus, .fg textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,111,196,.1); }
.fg textarea { resize:vertical; min-height:95px; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.field-error { border-color:var(--red) !important; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--blue); }
nav { background:var(--card); box-shadow:0 2px 16px rgba(0,0,0,.07); position:sticky; top:0; z-index:900; display:flex; align-items:center; justify-content:space-between; padding:0 5%; min-height:var(--nav-h); transition:box-shadow .3s; flex-wrap:wrap; gap:.5rem; overflow:visible; }
nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.12); }
.nav-logo { display:flex; align-items:center; gap:.5rem; }
.nav-mark { width:32px; height:32px; border-radius:9px; background:var(--blue3); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:900; letter-spacing:.02em; }
.nav-logo-text { font-size:1.38rem; font-weight:900; color:var(--blue); }
.nav-logo-text span { color:var(--text); }
nav ul { display:flex; gap:1.6rem; list-style:none; }
nav ul a { color:var(--text2); font-size:.9rem; font-weight:500; padding:.3rem 0; border-bottom:2.5px solid transparent; transition:color .2s, border-color .2s; display:flex; align-items:center; gap:.35rem; }
nav ul a:hover, .nav-act { color:var(--blue) !important; border-bottom-color:var(--blue) !important; }
.nav-right { display:flex; gap:.6rem; align-items:center; }
.admin-top-link { color:var(--text2); font-size:.78rem; font-weight:700; text-decoration:none; padding:.45rem .25rem; display:inline-flex; align-items:center; gap:.32rem; }
.admin-top-link:hover { color:var(--blue); }
.nav-ico { display:inline-flex; align-items:center; justify-content:center; width:1.15em; min-width:1.15em; line-height:1; font-size:.95em; }

.cart-btn { position:relative; cursor:pointer; font-size:.9rem; padding:.28rem .4rem; border-radius:8px; transition:.2s; display:inline-flex; align-items:center; gap:.32rem; font-weight:700; color:var(--text2); }
.cart-btn:hover { background:var(--light); }
.cart-dot { position:absolute; top:-5px; right:-7px; background:var(--accent); color:#fff; border-radius:50%; font-size:.58rem; width:17px; height:17px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.user-pill { background:var(--blue3); border-radius:20px; padding:.32rem .9rem; font-size:.82rem; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:.4rem; cursor:pointer; position:relative; user-select:none; overflow:visible; }
.user-pill:hover { background:#d4e8ff; }
.user-pill:focus-visible { outline:3px solid rgba(26,111,196,.22); outline-offset:3px; }
.user-caret { font-size:.7rem; line-height:1; }
.user-dropdown { display:none; position:absolute; top:calc(100% + .5rem); right:0; background:var(--card); border:1.5px solid var(--border); border-radius:12px; min-width:180px; box-shadow:var(--shadow2); z-index:1000; overflow:hidden; }
.user-dropdown.open { display:block; }
.user-dropdown a { display:flex; align-items:center; gap:.55rem; padding:.7rem 1rem; font-size:.86rem; color:var(--text); border-bottom:1px solid var(--border); transition:background .15s; }
.user-dropdown a:last-child { border-bottom:none; }
.user-dropdown a:hover { background:var(--light); }
.logout-link { color:var(--red) !important; }
.logout-link:hover { background:#fee2e2 !important; }

.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.3rem; }
.ham span { width:22px; height:2.5px; background:var(--text); border-radius:3px; transition:.3s; }
.ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.mob-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; }
.mob-overlay.open { display:flex; }
.mob-panel { background:var(--card); width:75%; max-width:300px; height:100%; padding:1.5rem; display:flex; flex-direction:column; gap:.35rem; overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,.15); }
.mob-close { align-self:flex-end; font-size:1.5rem; cursor:pointer; color:var(--text2); margin-bottom:.8rem; background:none; border:none; }
.mob-panel a { padding:.65rem 0; font-size:.97rem; font-weight:500; border-bottom:1px solid var(--border); color:var(--text); display:flex; align-items:center; gap:.7rem; }
.mob-panel a:hover { color:var(--blue); }
.hero { background:linear-gradient(135deg, var(--dark2) 0%, #0a2540 55%, #1a4a7a 100%); color:#fff; padding:5rem 5% 4rem; display:flex; align-items:center; justify-content:center; min-height:clamp(400px, 70vh, 860px); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(0,180,216,.1), transparent 65%); right:-150px; top:-150px; pointer-events:none; }
.hero-text { max-width:680px; width:100%; position:relative; z-index:1; text-align:center; min-width:0; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,180,216,.12); border:1px solid rgba(0,180,216,.25); padding:.35rem .9rem; border-radius:20px; margin-bottom:.9rem; }
.hero-text h1 { font-size:clamp(1.6rem,5vw,3rem); font-weight:900; line-height:1.15; margin-bottom:1rem; }
.hero-text h1 span { color:var(--accent); }
.hero-text p { color:#aac8e8; max-width:520px; margin:0 auto 2rem; line-height:1.75; font-size:.95rem; overflow-wrap:break-word; }
.hero-ctas { display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }
.hero-img { display:none; }
.trust-row { display:flex; gap:.75rem; margin-top:2.5rem; flex-wrap:wrap; justify-content:center; }
.trust-chip { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:.4rem .9rem; border-radius:20px; font-size:.78rem; color:#d0e8ff; display:flex; align-items:center; gap:.4rem; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes pop   { from{transform:scale(0)} to{transform:scale(1)} }
.page-hero { background:linear-gradient(135deg, var(--dark2), #0a2540); color:#fff; padding:3rem 5%; text-align:center; }
.page-hero h1 { font-size:clamp(1.4rem,4vw,2rem); font-weight:900; margin-bottom:.4rem; }
.page-hero p  { color:#aac8e8; font-size:.95rem; }
section { padding:4rem 5%; }
.sec-head { text-align:center; margin-bottom:2.5rem; }
.sec-head h2 { font-size:clamp(1.4rem,3.5vw,1.9rem); font-weight:900; margin-bottom:.4rem; }
.sec-head p  { color:var(--text2); font-size:.93rem; }
.sec-tag { display:inline-block; background:var(--blue3); color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .8rem; border-radius:20px; margin-bottom:.6rem; }
.banner { background:linear-gradient(135deg, var(--blue), var(--accent)); color:#fff; padding:2rem 5%; display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; text-align:center; }
.banner h3 { font-size:1.2rem; font-weight:800; }
.banner p  { opacity:.88; font-size:.9rem; }
.cat-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.cat-btn { padding:.4rem 1rem; border-radius:20px; border:1.5px solid var(--border); cursor:pointer; font-size:.82rem; font-weight:600; background:var(--card); color:var(--text2); transition:.2s; }
.cat-btn.on, .cat-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.products-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.sort-select { padding:.4rem .8rem; border:1.5px solid var(--border); border-radius:8px; font-size:.82rem; background:var(--card); color:var(--text); }

.p-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:1.5rem; }
.p-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:1.3rem; transition:.25s; background:var(--card); position:relative; overflow:hidden; }
.p-card:hover { box-shadow:var(--shadow2); transform:translateY(-4px); border-color:var(--blue); }
.p-card > a { cursor:pointer; }
.p-card-img { width:100%; height:clamp(120px,18vw,160px); border-radius:10px; background:var(--light); margin-bottom:.9rem; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .3s; }
.p-card:hover .p-card-img { transform:scale(1.03); }
.p-card-img img { width:100%; height:100%; object-fit:contain; padding:.8rem; }
.p-card h3  { font-size:1rem; font-weight:700; margin-bottom:.25rem; }
.p-card p   { color:var(--text2); font-size:.8rem; line-height:1.55; margin-bottom:.6rem; }
.p-card .price { font-size:1.2rem; font-weight:900; color:var(--blue); margin-bottom:.4rem; }
.out-of-stock { position:absolute; top:.8rem; right:.8rem; background:var(--red); color:#fff; font-size:.68rem; font-weight:700; padding:.2rem .6rem; border-radius:10px; z-index:1; }
.feat-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:1.3rem; }
.steps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:1.3rem; }
.feat, .step { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; transition:.2s; }
.feat:hover, .step:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-3px); }
.feat .ico { font-size:2.2rem; margin-bottom:.5rem; }
.feat h4, .step h4 { font-size:.93rem; font-weight:700; margin-bottom:.3rem; }
.feat p,  .step p  { font-size:.8rem; color:var(--text2); line-height:1.5; }
.step-num { width:40px; height:40px; background:var(--blue); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.95rem; margin:0 auto .7rem; box-shadow:0 4px 12px rgba(26,111,196,.3); }
.testimonials { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.4rem; }
.testi-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.4rem; transition:.2s; }
.testi-card:hover { box-shadow:var(--shadow); }
.testi-stars { color:#f59e0b; font-size:1rem; margin-bottom:.5rem; }
.testi-text  { font-size:.87rem; color:var(--text2); line-height:1.6; margin-bottom:.85rem; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:.7rem; }
.testi-avatar { width:36px; height:36px; border-radius:50%; background:var(--blue3); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.testi-name { font-weight:700; font-size:.84rem; }
.testi-loc  { font-size:.74rem; color:var(--text2); }
.home-connect { background:var(--light); }
.home-connect-grid { max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr minmax(260px,320px); gap:1.5rem; align-items:start; }
.activity-panel { min-width:0; }
.activity-list { display:grid; gap:.9rem; }
.activity-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:.2s; }
.activity-card:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-2px); }
.activity-main { display:flex; align-items:flex-start; gap:.85rem; min-width:0; }
.activity-file-type { width:48px; height:48px; border-radius:10px; background:var(--blue3); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:900; flex-shrink:0; }
.activity-card h3 { font-size:.95rem; font-weight:800; margin-bottom:.15rem; }
.activity-card p { color:var(--text2); font-size:.8rem; line-height:1.45; margin-bottom:.25rem; }
.activity-card span { color:var(--text2); font-size:.74rem; overflow-wrap:anywhere; }
.activity-actions { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }
.empty-activity { background:var(--card); border:1.5px dashed var(--border); border-radius:var(--radius); padding:2rem; text-align:center; color:var(--text2); display:grid; gap:.25rem; }
.empty-activity strong { color:var(--text); }
.home-contact-card { background:linear-gradient(135deg, var(--blue), var(--accent)); color:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow2); position:sticky; top:calc(var(--nav-h) + 1rem); }
.home-contact-card .sec-tag { background:rgba(255,255,255,.18); color:#fff; }
.home-contact-card h3 { font-size:1.15rem; font-weight:900; margin:.5rem 0 .45rem; }
.home-contact-card p { color:rgba(255,255,255,.85); font-size:.86rem; line-height:1.6; margin-bottom:1rem; }
.home-contact-lines { display:grid; gap:.4rem; margin-bottom:1.1rem; }
.home-contact-lines span { font-size:.8rem; color:rgba(255,255,255,.9); overflow-wrap:anywhere; }
.breadcrumb { padding:.85rem 5%; color:var(--text2); font-size:.82rem; display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.breadcrumb a { color:var(--text2); transition:color .2s; }
.breadcrumb a:hover { color:var(--blue); }
.det-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; padding:2rem 5% 3rem; }
.det-main-img { width:100%; height:clamp(220px,35vw,380px); border-radius:16px; background:var(--light); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid var(--border); }
.det-main-img img { width:100%; height:100%; object-fit:contain; padding:1.5rem; }
.det-tag   { font-size:.73rem; color:var(--accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.det-price { font-size:2rem; font-weight:900; color:var(--blue); margin:.4rem 0; }
.det-desc  { color:var(--text2); line-height:1.75; margin:.75rem 0; font-size:.9rem; }
.det-stock { font-size:.82rem; margin-bottom:.7rem; padding:.35rem .8rem; border-radius:20px; display:inline-block; }
.det-stock.in  { background:#dcfce7; color:#16a34a; }
.det-stock.low { background:#fef3c7; color:#d97706; }
.det-stock.out { background:#fee2e2; color:#dc2626; }
.qty-row { display:flex; align-items:center; gap:.8rem; margin:.7rem 0; }
.q-btn { width:36px; height:36px; border-radius:9px; border:1.5px solid var(--blue); background:var(--card); color:var(--blue); font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; transition:.2s; line-height:1; }
.q-btn:hover { background:var(--blue); color:#fff; }
.q-val { font-size:1.1rem; font-weight:800; min-width:28px; text-align:center; }
.det-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.9rem; }
.det-chips { display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
.det-chip { font-size:.79rem; color:var(--text2); display:flex; align-items:center; gap:.3rem; }
.cart-wrap { max-width:940px; margin:0 auto; padding:0 5%; overflow-x:hidden; }
.cart-hdr  { font-size:1.4rem; font-weight:900; margin-bottom:1.4rem; }
.cart-table-hdr { display:grid; grid-template-columns:3fr 1fr 1.3fr 1fr .3fr; gap:.75rem; padding:.5rem 0; border-bottom:2px solid var(--light); color:var(--text2); font-size:.75rem; font-weight:700; text-transform:uppercase; min-width:0; }
.c-row { display:grid; grid-template-columns:3fr 1fr 1.3fr 1fr .3fr; gap:.75rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--border); min-width:0; }
.c-row:hover { background:var(--light); border-radius:8px; padding-left:.4rem; padding-right:.4rem; }
.c-prod { display:flex; align-items:center; gap:.8rem; }
.c-prod-img { width:54px; height:54px; border-radius:10px; background:var(--light); display:flex; align-items:center; justify-content:center; font-size:1.7rem; overflow:hidden; flex-shrink:0; border:1.5px solid var(--border); }
.c-prod-img img { width:100%; height:100%; object-fit:contain; padding:.25rem; }
.c-name { font-weight:700; font-size:.88rem; }
.c-sub  { color:var(--text2); font-size:.76rem; }
.c-qty  { display:flex; align-items:center; gap:.4rem; }
.cq-btn { width:26px; height:26px; border-radius:6px; border:1.5px solid var(--blue); background:var(--card); color:var(--blue); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; transition:.15s; }
.cq-btn:hover { background:var(--blue); color:#fff; }
.c-qty-val { font-size:.88rem; font-weight:700; min-width:18px; text-align:center; }
.rm-btn { background:none; border:none; color:var(--text2); cursor:pointer; font-size:1rem; padding:.2rem; border-radius:6px; transition:.2s; }
.rm-btn:hover { color:var(--red); background:#fee2e2; }
.cart-total-val { font-size:1.3rem; font-weight:900; color:var(--blue); }
.cart-empty { text-align:center; padding:5rem 0; color:var(--text2); }
.cart-empty-ico { font-size:4rem; margin-bottom:1rem; }
.cart-summary-box { background:var(--light); border-radius:var(--radius); padding:1.2rem; margin-top:1.4rem; border:1.5px solid var(--border); }
.chk-layout { display:grid; grid-template-columns:1fr minmax(280px,360px); gap:2.5rem; max-width:940px; margin:2rem auto; padding:0 5%; }
.chk-sec { margin-bottom:1.8rem; }
.chk-sec h2 { font-size:1.1rem; font-weight:800; padding-bottom:.55rem; border-bottom:2px solid var(--border); margin-bottom:1rem; }
.pay-opts { display:flex; gap:.8rem; flex-wrap:wrap; margin:.6rem 0; }
.pay-opt { padding:.5rem 1.1rem; border:1.5px solid var(--border); border-radius:9px; cursor:pointer; font-size:.85rem; font-weight:600; transition:.2s; background:var(--card); display:inline-flex; align-items:center; gap:.4rem; }
.pay-opt.on { border-color:var(--blue); background:var(--blue3); color:var(--blue); }
.ord-box { background:var(--card); border-radius:var(--radius); padding:1.5rem; border:1.5px solid var(--border); box-shadow:var(--shadow); }
.ord-box h3 { font-size:1rem; font-weight:800; margin-bottom:1rem; }
.ord-row { display:flex; justify-content:space-between; padding:.38rem 0; font-size:.86rem; }
.ord-divider { border:none; border-top:1.5px solid var(--border); margin:.5rem 0; }
.ord-total { display:flex; justify-content:space-between; padding:.75rem 0; font-size:1.05rem; font-weight:900; color:var(--blue); }
.secure-note { font-size:.74rem; color:var(--text2); margin-top:.8rem; }
.confirm-wrap { max-width:520px; margin:clamp(2rem,5vw,5rem) auto; text-align:center; padding:0 5%; }
.confirm-wrap h2 { font-size:clamp(1.3rem,4vw,1.7rem); font-weight:900; margin-bottom:.5rem; }
.confirm-ico { margin-bottom:1rem; animation:pop .4s cubic-bezier(.34,1.56,.64,1); }
.conf-box { background:var(--light); border-radius:var(--radius); padding:1.3rem; text-align:left; margin-bottom:1.4rem; border:1.5px solid var(--border); }
.payment-wrap { max-width:920px; margin:2rem auto 4rem; padding:0 5%; }
.payment-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); }
.payment-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1rem; margin-bottom:1.2rem; border-bottom:2px solid var(--border); }
.payment-head h2 { font-size:1.35rem; font-weight:900; margin-top:.15rem; }
.pay-grid { display:grid; grid-template-columns:1fr minmax(260px,330px); gap:1.6rem; align-items:start; }
.pay-grid h3 { font-size:1rem; font-weight:800; margin-bottom:.9rem; }
.pay-ref { background:var(--light); border:1.5px solid var(--border); border-radius:var(--radius); padding:1rem; margin-top:1rem; display:grid; gap:.7rem; }
.pay-ref div { display:flex; justify-content:space-between; gap:1rem; font-size:.84rem; }
.pay-ref strong { color:var(--text2); }
.pay-ref span { font-weight:700; text-align:right; }
.pay-form { background:var(--light); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.2rem; }
.orders-wrap { max-width:860px; margin:0 auto; padding:0 5%; }
.order-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; background:var(--card); transition:.2s; }
.order-card:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.order-id   { font-size:.76rem; color:var(--text2); margin-bottom:.25rem; font-weight:700; }
.order-name { font-weight:700; font-size:.95rem; margin-bottom:.22rem; }
.order-meta { font-size:.79rem; color:var(--text2); }
.order-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.confirm-wrap p { color:var(--text2); margin-bottom:1.4rem; }
.auth-wrap { max-width:440px; margin:clamp(1.5rem,5vw,4rem) auto; padding:0 5%; }
.auth-card { background:var(--card); border:1.5px solid var(--border); border-radius:18px; padding:2.2rem; box-shadow:0 8px 40px rgba(0,0,0,.08); }
.auth-logo { text-align:center; margin-bottom:.4rem; }
.auth-logo-text { font-size:1.4rem; font-weight:900; color:var(--blue); }
.auth-sub { text-align:center; color:var(--text2); font-size:.83rem; margin-bottom:1.5rem; }
.auth-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:1.5rem; }
.auth-tab { padding:.72rem 1.4rem; cursor:pointer; font-weight:700; color:var(--text2); border-bottom:3px solid transparent; transition:.2s; font-size:.9rem; }
.auth-tab.on { color:var(--blue); border-bottom-color:var(--blue); }
.auth-panel { display:none; }
.auth-panel.on { display:block; }
.forgot { text-align:right; font-size:.78rem; margin-bottom:.8rem; }
.forgot a { color:var(--blue); }
.divider { display:flex; align-items:center; gap:.8rem; margin:1rem 0; color:var(--text2); font-size:.8rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.about-hero { background:linear-gradient(135deg, var(--dark2), #0a2540); color:#fff; padding:3.5rem 5%; text-align:center; }
.about-hero h1 { font-size:2.2rem; font-weight:900; margin-bottom:.6rem; }
.about-hero p  { color:#aac8e8; max-width:600px; margin:0 auto; line-height:1.7; }
.contact-layout { display:grid; grid-template-columns:1fr minmax(260px,320px); gap:2.5rem; max-width:860px; margin:0 auto; }
.info-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.6rem; }
.info-card h3 { font-size:1.05rem; font-weight:800; margin-bottom:1.1rem; }
.info-row { display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; }
.ico2 { font-size:1.35rem; flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--blue3); border-radius:9px; }
.info-row b { display:block; font-size:.82rem; color:var(--text2); margin-bottom:.1rem; }
.info-row div { font-size:.88rem; line-height:1.5; }

.adm-menu-btn { display:none; position:fixed; top:.8rem; left:.8rem; z-index:300; padding:.55rem .85rem; border:0; border-radius:8px; background:var(--blue); color:#fff; font-weight:800; cursor:pointer; box-shadow:var(--shadow2); }
.adm-menu-btn.open { background:var(--dark); }

.adm-sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:250; }
.adm-sidebar-overlay.open { display:block; }

.adm-full-layout { display:flex; min-height:100vh; overflow-x:hidden; }
.adm-full-side { width:220px; flex-shrink:0; background:var(--dark); color:#fff; padding:1.2rem; display:flex; flex-direction:column; gap:.2rem; min-height:100vh; position:sticky; top:0; height:100vh; overflow-y:auto; }
.adm-brand { font-size:1.1rem; font-weight:900; color:#fff; padding:.8rem .5rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:.5rem; }
.adm-lbl { font-size:.68rem; font-weight:700; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.1em; padding:.6rem .5rem .2rem; }
.adm-item { display:block; padding:.55rem .85rem; border-radius:8px; color:rgba(255,255,255,.7); font-size:.85rem; font-weight:500; cursor:pointer; transition:.2s; text-decoration:none; }
.adm-item:hover, .adm-item.on { background:rgba(255,255,255,.1); color:#fff; }
.adm-full-body { flex:1; padding:1.8rem; background:var(--bg); overflow-x:hidden; min-width:0; max-width:100%; }
.adm-ttl { font-size:1.4rem; font-weight:900; margin-bottom:1.5rem; }
.sg { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.sc { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.2rem; text-align:center; }
.sc-icon { font-size:1.8rem; margin-bottom:.4rem; }
.sc-val  { font-size:1.8rem; font-weight:900; color:var(--blue); }
.sc-lbl  { font-size:.78rem; color:var(--text2); margin-top:.2rem; }
.adm-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.4rem; margin-bottom:1.4rem; }
.adm-card h3 { font-size:1rem; font-weight:800; margin-bottom:1rem; }
.adm-card-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
thead th { text-align:left; padding:.6rem .8rem; background:var(--light); color:var(--text2); font-size:.75rem; font-weight:700; text-transform:uppercase; border-bottom:2px solid var(--border); white-space:nowrap; }
tbody td { padding:.65rem .8rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover { background:var(--light); }
.tbl-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.flash-msg { padding:.7rem 1rem; border-radius:9px; margin-bottom:1rem; font-weight:600; font-size:.88rem; }
.flash-success { background:#dcfce7; color:#16a34a; }
.flash-error   { background:#fee2e2; color:#dc2626; }
.adm-login-wrap { max-width:380px; margin:6rem auto; padding:0 5%; }
#toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--dark); color:#fff; padding:.75rem 1.4rem; border-radius:10px; font-size:.87rem; font-weight:600; border-left:4px solid var(--accent); z-index:999; opacity:0; transition:opacity .3s; pointer-events:none; max-width:calc(100vw - 2rem); text-align:center; word-break:break-word; }
#toast.on { opacity:1; }
.success-popup {
  position:fixed; top:5rem; left:50%; transform:translate(-50%, -16px);
  background:#dcfce7; color:#166534;
  padding:1rem 1.6rem; border:1px solid #86efac; border-left:5px solid #22c55e;
  border-radius:12px; box-shadow:0 16px 40px rgba(15,23,42,.18);
  z-index:1001; font-weight:700; font-size:.95rem;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  max-width:min(90vw,520px); width:max-content; text-align:center;
  display:flex; align-items:center; gap:.55rem; word-break:break-word;
}
.success-popup.show { opacity:1; transform:translate(-50%, 0); }
.success-popup.error { background:#fee2e2; color:#991b1b; border-color:#fecaca; border-left-color:#ef4444; }
#btt-btn { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--blue); color:#fff; border:none; border-radius:50%; width:40px; height:40px; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; z-index:500; box-shadow:var(--shadow2); }
#btt-btn.show { opacity:1; }
#side-scroll-btn { position:fixed; right:.9rem; top:50%; transform:translateY(-50%); width:42px; height:42px; border:none; border-radius:50%; background:var(--blue); color:#fff; font-size:1.1rem; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease, background .2s ease, transform .2s ease; z-index:700; box-shadow:var(--shadow2); }
#side-scroll-btn.show { opacity:1; pointer-events:auto; }
#side-scroll-btn:hover { background:var(--blue2); transform:translateY(-50%) scale(1.06); }
footer { background:var(--dark); color:#fff; padding:3rem 5% 1rem; }
.ft-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2rem; margin-bottom:2rem; }
.ft-brand h3 { font-size:1.2rem; font-weight:900; margin-bottom:.6rem; }
.ft-brand p  { color:rgba(255,255,255,.5); font-size:.85rem; line-height:1.6; }
footer h4 { font-size:.85rem; font-weight:700; margin-bottom:.8rem; color:rgba(255,255,255,.8); }
footer ul { list-style:none; }
footer ul li, footer ul li a { font-size:.82rem; color:rgba(255,255,255,.45); margin-bottom:.45rem; transition:.2s; }
footer ul li a { display:flex; align-items:center; gap:.4rem; }
footer ul li a:hover { color:#fff; }
.ft-contact p { font-size:.83rem; color:rgba(255,255,255,.55); margin-bottom:.4rem; }
.ft-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:1.2rem; text-align:center; font-size:.78rem; color:rgba(255,255,255,.3); }
.socials { display:flex; gap:.6rem; margin-top:.9rem; }
.soc { width:32px; height:32px; background:rgba(255,255,255,.1); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.75rem; cursor:pointer; transition:.2s; color:rgba(255,255,255,.6); }
.soc:hover { background:var(--blue); color:#fff; }
@media (max-width: 900px) {
  .hero { padding:4rem 5% 3rem; min-height:auto; }
  .trust-row { justify-content:center; }

  .det-layout { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem 5% 2.5rem; }
  .chk-layout { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .pay-grid { grid-template-columns:1fr; }
  .home-connect-grid { grid-template-columns:1fr; }
  .home-contact-card { position:static; }

  .ft-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }

  .c-row, .cart-table-hdr { grid-template-columns:2fr 1fr .3fr; gap:.5rem; }
  .c-row > *:nth-child(2), .c-row > *:nth-child(4),
  .cart-table-hdr > *:nth-child(2), .cart-table-hdr > *:nth-child(4) { display:none; }

  .p-grid { grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); }
  .feat-grid { grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); }
  .steps-grid { grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); }
  .testimonials { grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); }
  .sg { grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr)); }

  section { padding:3rem 5%; }
  .orders-wrap { padding:0 4%; }
  .cart-wrap { padding:0 4%; }
}

@media (max-width: 700px) {
  .adm-full-side { display:none; position:fixed; top:0; left:0; height:100vh; z-index:260; transform:translateX(-100%); transition:transform .28s ease; }
  .adm-full-side.open { display:flex; transform:translateX(0); }
  .adm-menu-btn { display:block !important; }
  .adm-full-body { padding:1.2rem; padding-top:4.2rem; }
}

@media (max-width: 768px) {
  nav ul { display:none; }
  .ham { display:flex; }
  .hero { padding:3.5rem 5% 3rem; }
  .hero-ctas { justify-content:center; }

  .p-grid { grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:1.1rem; }

  .banner { padding:1.8rem 5%; gap:1rem; flex-direction:column; text-align:center; }
  .banner h3 { font-size:1.1rem; }

  .chk-layout { gap:1.5rem; }
  .ord-box { padding:1.2rem; }

  .auth-card { padding:1.6rem; }

  .order-card { grid-template-columns:1fr; gap:.75rem; }

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

  table { font-size:.8rem; }
  thead th { padding:.5rem .6rem; }
  tbody td { padding:.55rem .6rem; }

  .sg { grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr)); }
  .adm-card-hdr { flex-direction:column; align-items:flex-start; }
  .adm-full-body { padding:1rem; padding-top:4rem; }
}

@media (max-width: 600px) {
  :root { --nav-h: 56px; }

  nav { padding:0 4%; min-height:var(--nav-h); }
  nav ul { display:none; }
  .ham { display:flex; }
  .nav-logo-text { font-size:1.1rem; }
  .admin-top-link { display:none; }
  .nav-right { gap:.4rem; }

  .hero { padding:3rem 5% 2.5rem; min-height:auto; }
  .hero-text p { font-size:.85rem; }
  .hero-ctas { flex-direction:column; align-items:center; gap:.7rem; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .trust-row { gap:.5rem; }
  .trust-chip { font-size:.7rem; padding:.3rem .65rem; }

  section { padding:2.5rem 4%; }
  .sec-head p { font-size:.85rem; }

  .p-grid { grid-template-columns:1fr 1fr; gap:.85rem; }
  .p-card { padding:1rem; }
  .p-card h3 { font-size:.88rem; }
  .p-card .price { font-size:1rem; }

  .feat-grid { grid-template-columns:1fr 1fr; gap:.9rem; }
  .steps-grid { grid-template-columns:1fr 1fr; gap:.9rem; }
  .testimonials { grid-template-columns:1fr; }

  .banner { padding:1.5rem 4%; flex-direction:column; gap:.9rem; }
  .banner .btn { width:100%; justify-content:center; }

  .page-hero { padding:2.5rem 5%; }
  .about-hero { padding:2.5rem 5%; }

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

  .auth-wrap { padding:0 4%; }
  .auth-card { padding:1.3rem; }
  .auth-tab { padding:.6rem 1rem; font-size:.85rem; }

  .chk-layout { padding:0 4%; }
  .cart-wrap { padding:0 4%; }
  .cart-hdr { font-size:1.1rem; }
  .cart-summary-box { padding:.9rem; }
  .cart-summary-box > div { flex-direction:column; align-items:flex-start; gap:.8rem; }

  .conf-box { padding:1rem; }
  .conf-box .ord-row { font-size:.82rem; }

  .orders-wrap { padding:0 4%; }
  .order-card { grid-template-columns:1fr; gap:.7rem; padding:1rem; }
  .order-actions { justify-content:flex-start; }
  .order-meta { font-size:.76rem; }

  .activity-card { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .activity-actions { width:100%; justify-content:flex-start; }
  .activity-file-type { width:40px; height:40px; font-size:.65rem; }

  .ft-grid { grid-template-columns:1fr; gap:1.2rem; }
  footer { padding:2rem 4% 1rem; }

  #side-scroll-btn { right:.6rem; top:auto; bottom:4.5rem; transform:none; }
  #side-scroll-btn:hover { transform:scale(1.06); }
  #btt-btn { bottom:1rem; right:1rem; width:36px; height:36px; font-size:1rem; }

  .breadcrumb { padding:.7rem 4%; font-size:.78rem; }
  .det-layout { padding:1rem 4% 2rem; }
  .det-price { font-size:1.5rem; }

  .contact-layout { gap:1.5rem; }
  .info-card { padding:1.2rem; }

  .sg { grid-template-columns:1fr 1fr; }
  .sc-val { font-size:1.4rem; }
  .sc-icon { font-size:1.5rem; }
  .adm-full-body { padding:.85rem; padding-top:3.8rem; }
  .adm-ttl { font-size:1.15rem; margin-bottom:1rem; }
  .adm-card { padding:.9rem; }
  .adm-card-hdr { flex-direction:column; align-items:flex-start; }
  .tbl-actions { flex-wrap:wrap; }
  table { font-size:.76rem; }
  thead th { padding:.4rem .45rem; font-size:.68rem; }
  tbody td { padding:.45rem .45rem; }
}

@media (max-width: 480px) {
  .p-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
  .p-card-img { height:110px; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .auth-tabs { flex-wrap:wrap; }
  .pay-opts { flex-direction:column; }
  .pay-opt { width:100%; justify-content:center; }
  .hero-ctas .btn-lg { padding:.7rem 1.4rem; font-size:.9rem; }
  .sg { grid-template-columns:1fr 1fr; }
}

@media (max-width: 380px) {
  .p-grid { grid-template-columns:1fr; }
  .feat-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .sg { grid-template-columns:1fr; }
  .nav-right .btn-o { display:none; }
  .cart-summary-box > div > div:last-child { flex-direction:column; gap:.6rem; }
  .cart-summary-box .btn { width:100%; justify-content:center; }
  .tbl-actions .btn { font-size:.68rem; padding:.22rem .5rem; }
}