@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --navy:#1B3A63; --navy-dark:#122844; --ice:#F5F7F9; --panel:#FFFFFF;
  --energy:#E8622C; --energy-dark:#C64F1E; --ok:#1B8A4A;
  --text:#1B222A; --muted:#5D6B76; --line:#DFE4E8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family:'Inter', sans-serif; background:var(--ice); color:var(--text); }
h1,h2,h3{font-family:'Space Grotesk', sans-serif;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}
img,svg{max-width:100%;}
:focus-visible{outline:3px solid var(--energy); outline-offset:2px;}

.skip-link{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:200;}
.skip-link:focus{left:8px; top:8px;}

.utility-bar{background:var(--navy-dark); color:#fff; font-size:13px; display:flex; justify-content:space-between; align-items:center; padding:9px 40px;}
.utility-bar .item{display:flex; align-items:center; gap:7px;}
.utility-bar .right{display:flex; gap:34px;}

header{background:#fff; padding:18px 40px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; border-bottom:1px solid var(--line);}
.logo-block{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo-icon{display:flex; gap:3px;}
.logo-icon span{width:6px; height:26px; border-radius:2px; display:block;}
.logo-text .name{font-family:'Space Grotesk'; font-size:23px; font-weight:700; color:var(--navy); line-height:1.1;}
.logo-text .tagline{font-family:'Inter'; font-size:11.5px; font-weight:600; color:var(--energy); letter-spacing:0.02em;}

.trade-links{display:flex; gap:18px; font-size:13px; color:var(--navy); font-weight:600;}
.trade-links a{color:var(--navy); text-decoration:none; display:flex; align-items:center; gap:5px;}
.trade-links a:hover{color:var(--energy);}

.search-bar{flex:1; min-width:180px; display:flex;}
.search-bar input{flex:1; border:1px solid var(--line); padding:11px 14px; font-size:14px; border-radius:5px 0 0 5px; font-family:'Inter';}
.search-bar button{background:var(--navy); border:none; color:#fff; padding:0 18px; border-radius:0 5px 5px 0; cursor:pointer;}

.header-cart{background:var(--energy); color:#fff; border:none; border-radius:6px; padding:9px 20px; cursor:pointer; text-align:center; line-height:1.3; font-family:'Inter';}
.header-cart:hover{background:var(--energy-dark);}
.header-cart .label{font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; justify-content:center;}
.header-cart .sub{font-family:'IBM Plex Mono'; font-size:13px; font-weight:700;}

.cat-nav{background:var(--navy); display:flex; padding:0 40px; flex-wrap:wrap;}
.cat-nav a{background:none; border:none; color:#D7E2E8; padding:13px 18px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:'Inter'; border-bottom:3px solid transparent; text-transform:uppercase; letter-spacing:0.02em; text-decoration:none;}
.cat-nav a.active, .cat-nav a:hover{color:#fff; border-bottom-color:var(--energy); background:rgba(255,255,255,0.05);}

.breadcrumb{max-width:1300px; margin:0 auto; padding:14px 40px 0; font-size:12.5px; color:var(--muted);}
.breadcrumb a{color:var(--muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--energy);}
.breadcrumb .sep{margin:0 6px;}
.breadcrumb .current{color:var(--navy); font-weight:600;}

.layout{display:flex; gap:24px; max-width:1300px; margin:0 auto; padding:20px 40px 28px; align-items:flex-start;}
.sidebar{width:230px; flex-shrink:0; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px 20px;}
.sidebar-group{margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.sidebar-group:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.sidebar-group h4{font-size:13px; color:var(--navy); margin-bottom:9px; font-family:'Space Grotesk';}
.sidebar-group ul{list-style:none;}
.sidebar-group li{margin-bottom:7px;}
.sidebar-group a{font-size:12.5px; color:var(--muted); text-decoration:none;}
.sidebar-group a:hover{color:var(--energy);}

.content{flex:1; min-width:0;}
.intro-line{font-size:14px; color:var(--muted); margin-bottom:22px; line-height:1.6;}
.intro-line strong{color:var(--navy);}

.tile-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px 18px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; transition:box-shadow 0.15s ease, border-color 0.15s ease;}
.tile:hover{box-shadow:0 10px 22px rgba(27,58,99,0.12); border-color:#c2ccd2;}
.tile-icon{margin-bottom:14px; width:52px; height:52px;}
.tile-title{font-family:'Space Grotesk'; font-size:14px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:0.02em;}

.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.section-head h1{font-size:22px; color:var(--navy);}
.result-count{font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono';}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow 0.15s ease, border-color 0.15s ease; text-decoration:none; color:inherit;}
.card:hover{box-shadow:0 8px 20px rgba(27,58,99,0.1); border-color:#c2ccd2;}
.card-visual{height:105px; background:var(--ice); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); position:relative;}
.card-visual svg{width:52px; height:52px;}
.stock-badge{position:absolute; top:8px; left:8px; background:var(--ok); color:#fff; font-size:10px; padding:3px 7px; border-radius:4px; font-family:'IBM Plex Mono'; font-weight:600;}
.class-badge{position:absolute; top:8px; right:8px; color:#fff; font-size:10px; padding:3px 7px; border-radius:4px; font-family:'IBM Plex Mono'; font-weight:600;}
.card-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:5px; flex:1;}
.model-code{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted);}
.card-name{font-family:'Space Grotesk'; font-size:14.5px; font-weight:700; color:var(--navy); line-height:1.3; min-height:36px;}
.spec-row{display:flex; flex-wrap:wrap; gap:5px; margin:2px 0;}
.spec-chip{font-family:'IBM Plex Mono'; font-size:10px; background:var(--ice); border:1px solid var(--line); padding:2px 6px; border-radius:4px; color:var(--muted);}
.price-block{margin-top:auto; padding-top:8px; border-top:1px solid var(--line);}
.price-inc{font-family:'IBM Plex Mono'; font-size:16px; font-weight:700; color:var(--navy);}
.price-exc{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted);}
.card-actions{display:flex; gap:6px; margin-top:9px;}
.btn-add{flex:1; background:var(--navy); color:#fff; border:none; padding:10px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter'; min-height:44px;}
.btn-add:hover{background:var(--energy);}
.btn-quote{background:#fff; border:1.5px solid var(--line); color:var(--navy); padding:10px; border-radius:5px; font-size:12px; cursor:pointer; font-family:'Inter'; min-height:44px;}
.btn-quote:hover{border-color:var(--navy);}

/* PRODUCT DETAIL PAGE */
.product-detail{display:grid; grid-template-columns:340px 1fr; gap:32px;}
.product-visual{background:var(--panel); border:1px solid var(--line); border-radius:10px; height:280px; display:flex; align-items:center; justify-content:center; position:relative;}
.product-visual svg{width:120px; height:120px;}
.product-info h1{font-size:24px; color:var(--navy); margin-bottom:8px;}
.product-info .model-code{font-size:12px; margin-bottom:10px; display:block;}
.product-desc{font-size:14.5px; line-height:1.7; color:var(--text); margin-bottom:18px;}
.spec-table{width:100%; border-collapse:collapse; margin-bottom:20px; font-size:13.5px;}
.spec-table th{text-align:left; color:var(--muted); font-weight:600; padding:8px 12px 8px 0; width:45%; font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase;}
.spec-table td{padding:8px 0; border-bottom:1px solid var(--line); color:var(--navy); font-weight:600;}
.spec-table tr:first-child th, .spec-table tr:first-child td{border-top:1px solid var(--line);}
.product-price-box{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin-bottom:18px;}
.product-actions{display:flex; gap:10px;}
.product-actions .btn-add{flex:2; padding:13px; font-size:14px;}
.product-actions .btn-quote{flex:1; padding:13px; font-size:14px;}

/* DRAWER */
.overlay{position:fixed; inset:0; background:rgba(27,58,99,0.45); opacity:0; pointer-events:none; transition:opacity 0.25s ease; z-index:90;}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; height:100%; width:410px; max-width:92vw; background:var(--ice); z-index:100; box-shadow:-10px 0 30px rgba(0,0,0,0.2); transform:translateX(100%); transition:transform 0.3s ease; display:flex; flex-direction:column;}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:18px 22px; background:var(--navy); display:flex; justify-content:space-between; align-items:center;}
.drawer-head h2{color:#fff; font-size:17px;}
.close-btn{background:none; border:none; font-size:20px; cursor:pointer; color:#fff; min-width:44px; min-height:44px;}
.drawer-items{flex:1; overflow-y:auto; padding:14px 22px;}
.drawer-empty{color:var(--muted); font-size:13.5px; margin-top:30px; text-align:center;}
.drawer-item{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);}
.drawer-item-visual{width:48px; height:48px; border-radius:6px; background:var(--navy); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.drawer-item-visual svg{width:28px; height:28px;}
.drawer-item-info{flex:1;}
.drawer-item-info .name{font-family:'Space Grotesk'; font-size:13.5px; font-weight:700; color:var(--navy);}
.qty-row{display:flex; align-items:center; gap:10px; margin-top:6px;}
.qty-btn{background:#fff; border:1px solid var(--line); width:28px; height:28px; border-radius:4px; cursor:pointer; font-size:14px;}
.remove-link{font-size:11.5px; color:var(--energy); background:none; border:none; cursor:pointer; text-decoration:underline; margin-top:5px;}
.drawer-foot{padding:18px 22px; border-top:1px solid var(--line); background:#fff;}
.total-row{display:flex; justify-content:space-between; font-family:'IBM Plex Mono'; font-size:16px; margin-bottom:4px; color:var(--navy); font-weight:700;}
.total-sub{font-size:11.5px; color:var(--muted); margin-bottom:12px; text-align:right; font-family:'IBM Plex Mono';}
.checkout-btn{width:100%; background:var(--energy); color:#fff; border:none; padding:13px; border-radius:6px; font-size:14.5px; font-weight:700; cursor:pointer; min-height:44px;}
.checkout-btn:disabled{background:#c7cdd1; cursor:not-allowed;}

.modal-overlay{position:fixed; inset:0; background:rgba(27,58,99,0.55); z-index:110; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:10px; max-width:440px; width:100%; padding:30px; max-height:90vh; overflow-y:auto;}
.modal h2{font-size:20px; color:var(--navy); margin-bottom:5px;}
.modal .sub{font-size:12.5px; color:var(--muted); margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--navy); margin-bottom:5px; font-family:'IBM Plex Mono'; font-weight:600;}
.field input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:5px; font-family:'Inter'; font-size:13.5px;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.confirmation{text-align:center;}
.confirmation .stamp{width:60px; height:60px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px;}
.confirmation .order-no{font-family:'IBM Plex Mono'; background:var(--ice); border:1px dashed var(--navy); display:inline-block; padding:7px 14px; border-radius:5px; margin:12px 0; color:var(--navy);}

footer{background:var(--navy-dark); color:#9CACB8; padding:36px 40px 22px; margin-top:10px; text-align:center; font-size:12.5px;}
footer a{color:#c8d4dc;}

@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{width:100%; order:2; margin-top:8px;}
  .content{order:1;}
  .tile-grid{grid-template-columns:repeat(2,1fr);}
  .product-detail{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .utility-bar{padding:8px 16px; font-size:11px; flex-direction:column; gap:5px;}
  .utility-bar .right{gap:14px;}
  header{padding:14px 16px;}
  .cat-nav{padding:0 10px; overflow-x:auto;}
  .layout{padding:16px 16px 20px;}
  .breadcrumb{padding:12px 16px 0;}
  .tile-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }