:root{
    --navy:#0B2E4E; --blue:#1868B7; --blue-bright:#2C86DE; --steel:#5C7A94;
    --paper:#F5F8FB; --white:#FFFFFF; --ink:#152531; --line:#D8E2EA; --amber:#D98C2B;
    --green:#1FA855; --red:#D64545;
    --shadow: 0 8px 24px rgba(11,46,78,0.10);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter', sans-serif; color:var(--ink); background:var(--paper); line-height:1.55;}
  h1,h2,h3,h4{font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.02em; color:var(--navy); line-height:1.15;}
  .mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; font-size:0.78rem;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  ul{list-style:none;}

  .topbar{background:var(--navy); color:#CBD9E5; font-size:0.82rem;}
  .topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:8px;}
  .topbar a{color:#CBD9E5;}
  .topbar-contact{display:flex; gap:22px; flex-wrap:wrap;}
  .topbar-social{display:flex; gap:14px;}

  header.site{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-mark{width:46px; height:46px; border-radius:6px; background:linear-gradient(135deg, var(--blue), var(--navy)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.2rem; flex-shrink:0;}
  .brand-name{font-family:'Oswald', sans-serif; font-weight:600; font-size:1.15rem; color:var(--navy); text-transform:uppercase; letter-spacing:0.03em;}
  .brand-sub{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--steel); letter-spacing:0.12em; text-transform:uppercase;}
  nav.primary ul{display:flex; gap:26px;}
  nav.primary a{font-size:0.92rem; font-weight:500; color:var(--ink); position:relative; padding:4px 0;}
  nav.primary a:hover{color:var(--blue);}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .btn{display:inline-block; padding:11px 20px; font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:3px; border:1.5px solid var(--blue); transition:all .2s ease; background:transparent;}
  .btn-solid{background:var(--blue); color:#fff;}
  .btn-solid:hover{background:var(--navy); border-color:var(--navy);}
  .btn-outline{color:var(--blue); background:transparent;}
  .btn-outline:hover{background:var(--blue); color:#fff;}
  .btn-sm{padding:7px 12px; font-size:0.68rem;}
  .btn-danger{border-color:var(--red); color:var(--red);}
  .btn-danger:hover{background:var(--red); color:#fff;}
  .btn:disabled{opacity:0.45; cursor:not-allowed;}
  .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px;}
  .menu-toggle span{width:24px; height:2px; background:var(--navy);}

  .cart-btn{position:relative; display:flex; align-items:center; gap:8px; background:none; border:1.5px solid var(--line); border-radius:3px; padding:9px 14px; color:var(--navy);}
  .cart-btn:hover{border-color:var(--blue); color:var(--blue);}
  .cart-count{position:absolute; top:-8px; right:-8px; background:var(--amber); color:#fff; font-size:0.66rem; font-family:'IBM Plex Mono',monospace; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

  .hero{position:relative; background:linear-gradient(180deg, rgba(11,46,78,0.94), rgba(11,46,78,0.90)), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 44px), var(--navy); color:#fff; overflow:hidden;}
  .hero .wrap{padding:96px 24px 84px; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
  .hero-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
  .hero-eyebrow::before{content:''; width:28px; height:1px; background:var(--blue-bright);}
  .hero h1{color:#fff; font-size:clamp(2.1rem, 4vw, 3.1rem); font-weight:600; margin-bottom:22px;}
  .hero h1 span{color:var(--blue-bright);}
  .hero p.lead{color:#C9D9E6; font-size:1.05rem; max-width:520px; margin-bottom:32px;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px;}
  .hero-badges{display:flex; gap:26px; flex-wrap:wrap;}
  .hero-badge{display:flex; align-items:center; gap:10px; font-size:0.82rem; color:#B9CBDB;}
  .hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-bright);}

  .spec-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.16); border-radius:6px; padding:28px; position:relative;}
  .spec-card::before, .spec-card::after{content:''; position:absolute; width:16px; height:16px; border:2px solid var(--blue-bright);}
  .spec-card::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
  .spec-card::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
  .spec-title{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.12em; color:var(--blue-bright); text-transform:uppercase; margin-bottom:16px;}
  .spec-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,0.15); font-size:0.88rem; color:#DCE7F0;}
  .spec-row:last-child{border-bottom:none;}
  .spec-row b{color:#fff; font-weight:600;}

  section{padding:76px 0;}
  .section-head{max-width:640px; margin-bottom:44px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; display:flex; align-items:center; gap:10px;}
  .section-head.center .eyebrow{justify-content:center;}
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--blue);}
  .section-head.center .eyebrow::before{display:none;}
  .section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:14px;}
  .section-head p{color:var(--steel); font-size:0.98rem;}

  .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .cat-card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:24px 22px; transition:all .2s ease; position:relative; overflow:hidden; cursor:pointer; text-align:left;}
  .cat-card:hover{box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--blue-bright);}
  .cat-icon{width:48px; height:48px; border-radius:8px; background:var(--paper); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--blue);}
  .cat-card h3{font-size:1rem; margin-bottom:6px; color:var(--navy);}
  .cat-card .cat-subs{font-size:0.78rem; color:var(--steel); margin-bottom:12px; min-height:2.4em;}
  .cat-link{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--blue); text-transform:uppercase; letter-spacing:0.06em;}

  .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
  .about-visual{aspect-ratio:4/3.1; border-radius:8px; background:linear-gradient(160deg, var(--navy), var(--blue)); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
  .about-visual svg{width:58%; opacity:0.9;}
  .about-visual .frame{position:absolute; inset:16px; border:1px solid rgba(255,255,255,0.3); border-radius:4px;}
  .about-text p{color:var(--steel); margin-bottom:16px; font-size:0.98rem;}
  .about-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:24px 0 30px;}
  .about-list li{display:flex; gap:10px; align-items:flex-start; font-size:0.9rem; color:var(--ink);}
  .about-list li svg{flex-shrink:0; margin-top:2px; color:var(--blue);}

  .filter-bar{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:32px; padding:18px 20px; background:var(--white); border:1px solid var(--line); border-radius:8px;}
  .filter-bar label{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--steel); margin-right:6px;}
  .filter-bar select{padding:9px 12px; border:1px solid var(--line); border-radius:4px; font-family:'Inter',sans-serif; font-size:0.86rem; color:var(--ink); background:var(--paper); min-width:180px;}
  .filter-count{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--steel);}

  .prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .prod-card{background:var(--white); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:all .2s ease; display:flex; flex-direction:column;}
  .prod-card:hover{box-shadow:var(--shadow); border-color:var(--blue-bright);}
  .prod-thumb{aspect-ratio:1/0.85; background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--steel); position:relative; border-bottom:1px solid var(--line);}
  .prod-thumb img{width:100%; height:100%; object-fit:cover;}
  .prod-tag{position:absolute; top:10px; left:10px; background:var(--amber); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:0.65rem; padding:3px 8px; border-radius:3px; letter-spacing:0.08em;}
  .prod-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
  .prod-sku{font-family:'IBM Plex Mono',monospace; font-size:0.66rem; color:var(--steel); margin-bottom:5px;}
  .prod-cat{font-family:'IBM Plex Mono',monospace; font-size:0.64rem; color:var(--blue); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em;}
  .prod-body h4{font-size:0.9rem; text-transform:none; letter-spacing:0; font-weight:600; color:var(--navy); margin-bottom:10px; min-height:2.6em;}
  .prod-price{display:flex; align-items:baseline; gap:8px; margin-bottom:12px;}
  .price-now{font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--navy); font-size:1rem;}
  .price-was{font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--steel); text-decoration:line-through;}
  .add-cart-btn{margin-top:auto; width:100%; padding:10px; background:var(--navy); color:#fff; border:none; border-radius:4px; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; transition:background .2s;}
  .add-cart-btn:hover{background:var(--blue);}
  .empty-note{grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--steel); font-size:0.92rem;}

  .stats{background:var(--navy); color:#fff;}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); text-align:center;}
  .stat-item{padding:0 20px; border-right:1px solid rgba(255,255,255,0.14);}
  .stat-item:last-child{border-right:none;}
  .stat-num{font-family:'Oswald',sans-serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:600; color:var(--blue-bright);}
  .stat-label{font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:#B9CBDB; margin-top:6px;}

  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .why-card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:26px;}
  .why-card .why-icon{width:44px; height:44px; border-radius:8px; background:var(--paper); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .why-card h3{font-size:0.98rem; margin-bottom:8px;}
  .why-card p{font-size:0.86rem; color:var(--steel);}

  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .testi-card{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:6px; padding:26px;}
  .testi-stars{color:var(--amber); font-size:0.85rem; margin-bottom:14px; letter-spacing:2px;}
  .testi-card p{font-size:0.92rem; color:var(--ink); margin-bottom:18px; font-style:italic;}
  .testi-name{font-family:'Oswald',sans-serif; font-size:0.85rem; text-transform:uppercase; color:var(--navy);}
  .testi-role{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--steel);}

  .cta{background:linear-gradient(120deg, var(--blue), var(--navy)); color:#fff; border-radius:10px; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
  .cta h2{color:#fff; font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:10px;}
  .cta p{color:#CBDCE9; max-width:480px;}
  .cta .btn-solid{background:#fff; color:var(--navy); border-color:#fff;}
  .cta .btn-solid:hover{background:transparent; color:#fff; border-color:#fff;}

  footer{background:var(--navy); color:#B9CBDB; padding-top:64px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 0.9fr 1.1fr 1.1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12);}
  .footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .footer-brand .brand-name{color:#fff;}
  footer p{font-size:0.88rem; line-height:1.7; margin-bottom:18px;}
  footer h4{color:#fff; font-size:0.85rem; margin-bottom:18px; letter-spacing:0.08em;}
  footer ul li{margin-bottom:11px; font-size:0.88rem;}
  footer ul li a:hover{color:#fff;}
  .foot-social{display:flex; gap:12px; margin-top:6px;}
  .foot-social a{width:34px; height:34px; border:1px solid rgba(255,255,255,0.25); border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .foot-social a:hover{background:var(--blue); border-color:var(--blue);}
  .foot-contact li{display:flex; gap:10px; align-items:flex-start;}
  .foot-bottom{display:flex; justify-content:space-between; padding:22px 0; font-size:0.8rem; color:#8CA3B7; flex-wrap:wrap; gap:10px;}
  .admin-link{font-size:0.72rem; color:#5c7a94;}
  .admin-link:hover{color:#fff;}

  .wa-float{position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.25); z-index:60;}

  /* ===== Cart Drawer ===== */
  .overlay-bg{position:fixed; inset:0; background:rgba(11,20,30,0.55); z-index:90; display:none;}
  .overlay-bg.open{display:block;}
  .cart-drawer{position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw; background:#fff; z-index:95; box-shadow:-10px 0 30px rgba(0,0,0,0.2); transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
  .cart-drawer.open{transform:translateX(0);}
  .drawer-head{display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line);}
  .drawer-head h3{font-size:1.05rem;}
  .close-x{background:none; border:none; font-size:1.4rem; color:var(--steel); line-height:1;}
  .cart-items{flex:1; overflow-y:auto; padding:16px 22px;}
  .cart-row{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
  .cart-thumb{width:56px; height:56px; border-radius:6px; background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0;}
  .cart-row-info{flex:1;}
  .cart-row-info h5{font-size:0.86rem; font-weight:600; color:var(--navy); margin-bottom:4px; text-transform:none;}
  .cart-row-info .sku{font-family:'IBM Plex Mono',monospace; font-size:0.66rem; color:var(--steel); margin-bottom:8px;}
  .qty-stepper{display:flex; align-items:center; gap:10px;}
  .qty-stepper button{width:26px; height:26px; border:1px solid var(--line); background:var(--paper); border-radius:4px; font-size:0.9rem; color:var(--navy);}
  .qty-stepper span{font-family:'IBM Plex Mono',monospace; font-size:0.86rem; min-width:18px; text-align:center;}
  .cart-row-price{text-align:right; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;}
  .cart-row-price b{font-family:'IBM Plex Mono',monospace; color:var(--navy); font-size:0.9rem;}
  .remove-link{font-size:0.7rem; color:var(--red); font-family:'IBM Plex Mono',monospace; background:none; border:none;}
  .drawer-foot{padding:20px 22px; border-top:1px solid var(--line);}
  .drawer-sub{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:1rem; color:var(--navy); margin-bottom:16px;}
  .cart-empty{text-align:center; padding:60px 20px; color:var(--steel);}

  /* ===== Modal (checkout) ===== */
  .modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; width:520px; max-width:92vw; max-height:88vh; overflow-y:auto; border-radius:10px; z-index:96; display:none; box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .modal.open{display:block;}
  .modal-head{display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:1px solid var(--line);}
  .modal-body{padding:22px 26px;}
  .modal-body label{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--steel); margin-bottom:6px; margin-top:16px;}
  .modal-body input, .modal-body select{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:5px; font-size:0.92rem; font-family:'Inter',sans-serif; background:var(--paper);}
  .modal-body input:focus, .modal-body select:focus{outline:2px solid var(--blue-bright); outline-offset:1px;}
  .order-summary{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin-top:6px;}
  .order-summary-row{display:flex; justify-content:space-between; font-size:0.84rem; padding:5px 0; color:var(--ink);}
  .order-summary-total{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--navy); border-top:1px dashed var(--line); margin-top:8px; padding-top:10px;}
  .modal-actions{margin-top:22px; display:flex; gap:12px;}
  .required-note{font-size:0.74rem; color:var(--steel); margin-top:18px;}

  /* ===== Toast ===== */
  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:14px 22px; border-radius:6px; font-size:0.86rem; z-index:99; opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:var(--shadow);}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* ===== Admin ===== */
  .admin-overlay{position:fixed; inset:0; background:var(--paper); z-index:110; overflow-y:auto; display:none;}
  .admin-overlay.open{display:block;}
  .admin-top{background:var(--navy); color:#fff; padding:18px 0;}
  .admin-top .wrap{display:flex; justify-content:space-between; align-items:center;}
  .admin-login-box{max-width:380px; margin:100px auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:34px; text-align:center;}
  .admin-login-box input{width:100%; padding:12px; border:1px solid var(--line); border-radius:5px; margin:16px 0; font-size:0.95rem;}
  .admin-tabs{display:flex; gap:6px; margin:28px 0 20px; border-bottom:1px solid var(--line);}
  .admin-tab-btn{padding:11px 18px; background:none; border:none; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--steel); border-bottom:2px solid transparent;}
  .admin-tab-btn.active{color:var(--navy); border-color:var(--blue);}
  .admin-panel{display:none;}
  .admin-panel.active{display:block;}
  .admin-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px; margin-bottom:20px;}
  .admin-card h4{font-size:0.92rem; margin-bottom:16px; color:var(--navy); text-transform:none; font-family:'Inter',sans-serif; font-weight:700;}
  .admin-form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
  .admin-form-row.full{grid-template-columns:1fr;}
  .admin-form-row label{display:block; font-size:0.72rem; font-family:'IBM Plex Mono',monospace; color:var(--steel); margin-bottom:5px; text-transform:uppercase;}
  .admin-form-row input, .admin-form-row select{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:5px; font-size:0.88rem; background:var(--paper);}
  .cat-admin-item{border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin-bottom:10px;}
  .cat-admin-item-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .cat-admin-item-head strong{color:var(--navy); font-size:0.92rem;}
  .sub-chip-row{display:flex; flex-wrap:wrap; gap:8px;}
  .sub-chip{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:5px 10px 5px 12px; font-size:0.76rem; display:flex; align-items:center; gap:8px; color:var(--ink);}
  .sub-chip button{background:none; border:none; color:var(--red); font-size:0.85rem; line-height:1;}
  .admin-table{width:100%; border-collapse:collapse; font-size:0.86rem;}
  .admin-table th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; color:var(--steel); padding:10px 8px; border-bottom:1px solid var(--line);}
  .admin-table td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
  .order-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin-bottom:14px;}
  .order-card-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; flex-wrap:wrap; gap:8px;}
  .order-id{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--steel);}
  .order-cust{font-weight:600; color:var(--navy); font-size:0.94rem;}
  .order-items-list{font-size:0.84rem; color:var(--ink); margin:8px 0;}
  .order-items-list div{padding:3px 0;}
  .order-total{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--navy);}

  /* ===== Dynamic additions: reveal animation, search/sort, quick view, wishlist, back-to-top ===== */
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }
  @keyframes modalCenterIn{ from{ opacity:0; transform:translate(-50%,-50%) translateY(14px) scale(0.97);} to{ opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1);} }
  @keyframes heroIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }
  @keyframes popIn{ 0%{ transform:scale(1);} 35%{ transform:scale(1.35);} 100%{ transform:scale(1);} }
  @keyframes shimmer{ 0%{ background-position:-300px 0;} 100%{ background-position:300px 0;} }
  @keyframes spin{ to{ transform:rotate(360deg);} }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); animation:fadeUp .6s ease both; }
  .reveal-stagger.in-view > *{ animation:fadeUp .55s ease both; }
  .reveal-stagger.in-view > *:nth-child(1){animation-delay:.02s;}
  .reveal-stagger.in-view > *:nth-child(2){animation-delay:.08s;}
  .reveal-stagger.in-view > *:nth-child(3){animation-delay:.14s;}
  .reveal-stagger.in-view > *:nth-child(4){animation-delay:.20s;}
  .reveal-stagger.in-view > *:nth-child(5){animation-delay:.26s;}
  .reveal-stagger.in-view > *:nth-child(6){animation-delay:.32s;}

  .hero-anim-item{opacity:0; animation:heroIn .7s ease both;}
  .hero-anim-item.d1{animation-delay:.05s;}
  .hero-anim-item.d2{animation-delay:.16s;}
  .hero-anim-item.d3{animation-delay:.27s;}
  .hero-anim-item.d4{animation-delay:.38s;}

  .cat-card, .why-card, .testi-card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .why-card:hover, .testi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--blue-bright); }
  .cat-icon{ transition:transform .25s ease, background .25s ease; }
  .cat-card:hover .cat-icon{ transform:scale(1.1) rotate(-4deg); background:var(--blue); color:#fff; }

  .prod-card{ position:relative; }
  .prod-thumb{ cursor:pointer; overflow:hidden; }
  .prod-thumb img{ transition:transform .4s ease; }
  .prod-card:hover .prod-thumb img{ transform:scale(1.08); }
  .prod-body h4{ cursor:pointer; transition:color .2s ease; }
  .prod-body h4:hover{ color:var(--blue); }
  .add-cart-btn{ position:relative; overflow:hidden; }
  .add-cart-btn.added{ background:var(--green); }

  .wish-btn{ position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.92); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--steel); transition:all .2s ease; }
  .wish-btn:hover{ border-color:var(--red); color:var(--red); transform:scale(1.08); }
  .wish-btn.active{ color:var(--red); border-color:var(--red); }
  .wish-btn.active svg{ fill:var(--red); }
  .wish-btn.pop svg{ animation:popIn .35s ease; }

  .wish-open-btn{position:relative; display:flex; align-items:center; gap:8px; background:none; border:1.5px solid var(--line); border-radius:3px; padding:9px 14px; color:var(--navy);}
  .wish-open-btn:hover{border-color:var(--red); color:var(--red);}
  .wish-count{position:absolute; top:-8px; right:-8px; background:var(--red); color:#fff; font-size:0.66rem; font-family:'IBM Plex Mono',monospace; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

  .cart-count.bump, .wish-count.bump{ animation:popIn .4s ease; }

  .search-sort-bar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; flex:1;}
  .search-wrap{position:relative; flex:1; min-width:200px;}
  .search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--steel); pointer-events:none;}
  .search-wrap input{width:100%; padding:9px 12px 9px 36px; border:1px solid var(--line); border-radius:4px; font-family:'Inter',sans-serif; font-size:0.86rem; background:var(--paper); color:var(--ink);}
  .search-wrap input:focus{outline:2px solid var(--blue-bright); outline-offset:1px;}
  .search-clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--steel); font-size:1rem; display:none; padding:4px;}
  .search-clear.show{display:block;}

  .skeleton{background:linear-gradient(90deg, var(--line) 25%, #eef3f7 37%, var(--line) 63%); background-size:400px 100%; animation:shimmer 1.4s ease infinite; border-radius:8px;}
  .skel-card{height:270px;}
  .skel-cat{height:150px;}

  .qv-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.96); background:#fff; width:760px; max-width:94vw; max-height:88vh; overflow-y:auto; border-radius:10px; z-index:97; display:none; box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .qv-modal.open{display:block; animation:fadeUp .25s ease both;}
  #editProdModal.open{display:block; animation:modalCenterIn .22s ease both;}
  .qv-body{display:grid; grid-template-columns:0.9fr 1.1fr; gap:0;}
  .qv-image{background:var(--paper); display:flex; align-items:center; justify-content:center; padding:34px; min-height:280px; color:var(--steel);}
  .qv-image img{max-width:100%; max-height:280px; object-fit:contain;}
  .qv-info{padding:26px 28px;}
  .qv-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--line); font-size:1.2rem; color:var(--steel); z-index:2;}
  .qv-cat{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--blue); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;}
  .qv-info h3{font-size:1.25rem; text-transform:none; letter-spacing:0; margin-bottom:10px; color:var(--navy);}
  .qv-sku{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--steel); margin-bottom:16px;}
  .qv-price{display:flex; align-items:baseline; gap:10px; margin-bottom:20px;}
  .qv-price .price-now{font-size:1.4rem;}
  .qv-actions{display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap;}
  .qv-qty{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:5px; padding:6px 12px;}
  .qv-qty button{width:24px; height:24px; border:none; background:var(--paper); border-radius:4px; color:var(--navy); font-size:0.95rem;}
  .qv-qty span{font-family:'IBM Plex Mono',monospace; min-width:20px; text-align:center;}

  .back-top{position:fixed; bottom:24px; right:92px; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.25); z-index:60; border:none; opacity:0; pointer-events:none; transform:translateY(10px); transition:all .25s ease;}
  .back-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
  .back-top:hover{background:var(--blue);}

  nav.primary a{ transition:color .2s ease; }
  nav.primary a::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--blue-bright); transform:scaleX(0); transition:transform .25s ease;}
  nav.primary a.active{color:var(--blue);}
  nav.primary a.active::after{transform:scaleX(1);}

  header.site{transition:box-shadow .2s ease;}
  header.site.scrolled{box-shadow:0 4px 16px rgba(11,46,78,0.08);}

  @media(max-width:680px){
    .qv-body{grid-template-columns:1fr;}
    .back-top{right:24px; bottom:88px;}
    .search-sort-bar{flex-direction:column; align-items:stretch; width:100%;}
  }

  @media(max-width:980px){
    .hero .wrap{grid-template-columns:1fr;}
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .prod-grid{grid-template-columns:repeat(2,1fr);}
    .about-grid{grid-template-columns:1fr;}
    .why-grid, .testi-grid{grid-template-columns:1fr 1fr;}
    .stats-grid{grid-template-columns:1fr 1fr; row-gap:28px;}
    .stat-item:nth-child(2){border-right:none;}
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
    .admin-form-row{grid-template-columns:1fr;}
  }
  @media(max-width:680px){
    nav.primary{display:none;}
    .menu-toggle{display:flex;}
    .topbar-contact{display:none;}
    .cat-grid, .prod-grid, .why-grid, .testi-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .cta{flex-direction:column; text-align:center;}
    .filter-bar{flex-direction:column; align-items:stretch;}
    .filter-count{margin-left:0;}
  }