/* ============================================================
   bluebeier — custom storefront theme
   Palette: navy #0f376f + gold #F0A830 + cream #F5F7FB
   ============================================================ */
:root{
  --bb-navy:#0f376f;
  --bb-navy-dark:#0c2c59;
  --bb-navy-deep:#0a2547;
  --bb-gold:#F0A830;
  --bb-gold-dark:#d9921f;
  --bb-cream:#F5F7FB;
  --bb-gray:#5B7196;
  --bb-border:#E3E8F1;
  --bb-white:#ffffff;
  --bb-radius:16px;
  --bb-font:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
}
*{box-sizing:border-box}
body{
  font-family:var(--bb-font);
  color:#243b5e;
  background:var(--bb-white);
  line-height:1.6;
  margin:0;
}
a{color:var(--bb-navy);text-decoration:none}
a:hover{color:var(--bb-gold-dark)}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-family:var(--bb-font);color:var(--bb-navy);font-weight:700;line-height:1.2;margin:0 0 .5em}
.bb-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--bb-gold-dark)}

/* ---------- Buttons ---------- */
.btn{font-family:var(--bb-font);font-weight:600;border-radius:10px;border:none;padding:12px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.btn-primary{background:var(--bb-navy);color:#fff}
.btn-primary:hover{background:var(--bb-navy-dark);color:#fff}
.btn-gold{background:var(--bb-gold);color:var(--bb-navy)}
.btn-gold:hover{background:var(--bb-gold-dark);color:var(--bb-navy)}
.btn-outline{background:#fff;border:1px solid var(--bb-border);color:var(--bb-navy)}
.btn-outline:hover{border-color:var(--bb-navy)}

/* ---------- Top bar ---------- */
#top{background:var(--bb-navy);color:#cdd9ec;font-size:13px;border:none;padding:6px 0}
#top a{color:#cdd9ec}
#top a:hover{color:#fff}
#top .list-inline{margin:0}
#top .dropdown-menu{background:#fff}
#top .dropdown-menu a{color:var(--bb-navy)}

/* ---------- Header / nav ---------- */
header{background:#fff;border-bottom:1px solid var(--bb-border);padding:14px 0}
header .container{display:flex;align-items:center;gap:24px}
#logo a{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px;color:var(--bb-navy);font-family:var(--bb-font)}
#logo img{height:46px;width:auto;border-radius:10px}
#logo .bb-tag{font-size:9px;letter-spacing:2px;color:var(--bb-gray);font-weight:600;display:block;margin-top:-4px}
#bb-nav{display:flex;gap:30px;margin-left:auto;align-items:center}
#bb-nav a{font-weight:600;font-size:15px;color:var(--bb-navy);padding:6px 0;position:relative}
#bb-nav a.active{color:var(--bb-gold-dark)}
#bb-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--bb-gold)}
#bb-search{flex:1;max-width:340px}
#bb-search input{width:100%;border:1px solid var(--bb-border);border-radius:10px;padding:9px 14px;font-family:var(--bb-font)}
#bb-cart a{display:inline-flex;align-items:center;gap:8px;background:var(--bb-gold);color:var(--bb-navy);font-weight:700;padding:9px 16px;border-radius:10px}
#bb-cart a:hover{background:var(--bb-gold-dark);color:var(--bb-navy)}

/* ---------- Generic section ---------- */
.bb-section{padding:72px 0}
.bb-section.cream{background:var(--bb-cream)}
.bb-section h2{font-size:34px;text-align:center;margin-bottom:8px}
.bb-section .bb-sub{text-align:center;color:var(--bb-gray);max-width:680px;margin:0 auto 44px}
.bb-section.navy{background:var(--bb-navy);color:#fff}
.bb-section.navy h2{color:#fff}
.bb-section.navy .bb-sub{color:#cdd9ec}

/* ---------- Hero ---------- */
.bb-hero{position:relative;background:var(--bb-navy);color:#fff;overflow:hidden}
.bb-hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.bb-hero .bb-eyebrow{color:var(--bb-gold)}
.bb-hero h1{color:#fff;font-size:46px;margin:10px 0 14px}
.bb-hero p{color:#cdd9ec;font-size:17px;max-width:480px}
.bb-hero .bb-cta{margin-top:26px;display:flex;gap:14px}
.bb-hero-media{position:relative}
.bb-hero-media img{width:100%;border-radius:20px;display:block;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.bb-float-card{position:absolute;left:-26px;bottom:34px;background:#fff;color:var(--bb-navy);border-radius:14px;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.3);display:flex;align-items:center;gap:12px}
.bb-float-card .bb-dot{width:10px;height:10px;border-radius:50%;background:var(--bb-gold)}
.bb-float-card b{display:block;font-size:15px}
.bb-float-card span{font-size:12px;color:var(--bb-gray)}

/* ---------- Trust strip ---------- */
.bb-trust{background:var(--bb-navy-dark);color:#fff;padding:26px 0}
.bb-trust .container{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;text-align:center}
.bb-trust .num{font-size:34px;font-weight:800;color:var(--bb-gold)}
.bb-trust .lbl{font-size:13px;color:#cdd9ec;letter-spacing:1px}

/* ---------- Product / grade cards ---------- */
.bb-grid{display:grid;gap:26px}
.bb-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.bb-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.bb-card{background:#fff;border:1px solid var(--bb-border);border-radius:var(--bb-radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.bb-card:hover{box-shadow:0 18px 40px rgba(15,55,111,.12);transform:translateY(-3px)}
.bb-card .bb-thumb{height:200px;background:var(--bb-cream);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bb-card .bb-thumb img{width:100%;height:100%;object-fit:cover}
.bb-card.best{border:2px solid var(--bb-gold)}
.bb-badge{position:absolute;margin:14px 0 0 14px;background:var(--bb-gold);color:var(--bb-navy);font-size:10px;font-weight:800;letter-spacing:1px;padding:5px 12px;border-radius:13px}
.bb-card .bb-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.bb-card h3{font-size:22px;margin:0}
.bb-card .bb-spec{color:var(--bb-gray);font-size:13px}
.bb-card .bb-price{font-weight:800;color:var(--bb-navy);font-size:20px;margin-top:auto}
.bb-card .btn{margin-top:12px;justify-content:center}

/* ---------- Features ---------- */
.bb-feature{background:#fff;border:1px solid var(--bb-border);border-radius:14px;padding:26px}
.bb-feature .bb-ico{width:48px;height:48px;border-radius:12px;background:rgba(15,55,111,.08);display:flex;align-items:center;justify-content:center;color:var(--bb-navy);font-size:22px;margin-bottom:14px}
.bb-feature h3{font-size:18px;margin:0 0 8px}
.bb-feature p{color:var(--bb-gray);font-size:14px;margin:0}

/* ---------- Process steps ---------- */
.bb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bb-step{background:#fff;border-radius:14px;padding:26px;border:1px solid var(--bb-border);text-align:center}
.bb-step .bb-n{width:42px;height:42px;border-radius:50%;background:var(--bb-navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.bb-step h3{font-size:18px;margin:0 0 8px}

/* ---------- Clients / certs ---------- */
.bb-logos{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.bb-logos .bb-chip{background:#fff;border:1px solid var(--bb-border);border-radius:10px;padding:12px 20px;font-weight:700;color:var(--bb-navy);font-size:15px}
.bb-certs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.bb-certs .bb-cert{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px 18px;color:#fff;font-weight:700;font-size:14px}

/* ---------- CTA band ---------- */
.bb-cta-band{background:var(--bb-gold);color:var(--bb-navy);border-radius:20px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bb-cta-band h2{color:var(--bb-navy);margin:0;font-size:26px}
.bb-cta-band .btn{background:var(--bb-navy);color:#fff}
.bb-cta-band .btn:hover{background:var(--bb-navy-deep);color:#fff}

/* ---------- Footer ---------- */
footer{background:var(--bb-navy-deep);color:#cdd9ec;padding:54px 0 26px;margin-top:0}
footer h5{color:#fff;font-size:15px;margin:0 0 16px;letter-spacing:1px}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:9px}
footer ul a{color:#cdd9ec;font-size:14px}
footer ul a:hover{color:var(--bb-gold)}
footer hr{border-color:rgba(255,255,255,.12);margin:28px 0 18px}
footer .bb-foot-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px;color:#fff;margin-bottom:14px}
footer .bb-foot-brand img{height:40px;border-radius:8px}
footer .bb-copy{font-size:13px;color:#8aa0c4}

/* ---------- Category / listing page ---------- */
#product-category,#product-search,#product-manufacturer,#product-special{padding:40px 24px 72px}
#product-category h1,#product-search h1,#product-special h1{font-size:30px;margin-bottom:18px}
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 20px;font-size:13px;color:var(--bb-gray)}
.breadcrumb-item a{color:var(--bb-gray)}
.breadcrumb-item a:hover{color:var(--bb-gold-dark)}
.breadcrumb-item+.breadcrumb-item::before{content:"/";margin-right:8px;color:var(--bb-border)}
#column-left .list-group-item{border:1px solid var(--bb-border);border-radius:10px!important;margin-bottom:6px;color:var(--bb-navy);font-weight:600;font-size:14px;padding:10px 14px}
#column-left .list-group-item.active{background:var(--bb-navy);border-color:var(--bb-navy);color:#fff}
.img-thumbnail{border:1px solid var(--bb-border);border-radius:var(--bb-radius);padding:6px;background:#fff}

/* product-thumb (OpenCart 4 card) */
.product-thumb{background:#fff;border:1px solid var(--bb-border);border-radius:var(--bb-radius);overflow:hidden;transition:.18s;height:100%;display:flex;flex-direction:column}
.product-thumb:hover{box-shadow:0 18px 40px rgba(15,55,111,.12);transform:translateY(-3px)}
.product-thumb .image{background:var(--bb-cream);overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.product-thumb .image img{width:100%;height:100%;object-fit:cover}
.product-thumb .content{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-thumb .description h4{font-size:17px;margin:0 0 6px}
.product-thumb .description h4 a{color:var(--bb-navy)}
.product-thumb .description p{color:var(--bb-gray);font-size:13px;margin:0}
.product-thumb .price{color:var(--bb-navy);font-weight:800;font-size:19px;margin-top:8px}
.product-thumb .price-tax{display:block;font-weight:500;font-size:12px;color:var(--bb-gray)}
.product-thumb .button{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.product-thumb .button button{flex:1;background:var(--bb-navy);color:#fff;border:none;border-radius:10px;padding:11px;cursor:pointer;transition:.15s}
.product-thumb .button button:hover{background:var(--bb-gold);color:var(--bb-navy)}
.product-thumb .button button:first-child{flex:2}
#input-sort,#input-limit,.form-select{border:1px solid var(--bb-border);border-radius:10px;padding:8px 12px;font-family:var(--bb-font)}
.input-group{display:flex}
.input-group-text{border:1px solid var(--bb-border);border-radius:10px 0 0 10px;background:var(--bb-cream);padding:8px 12px;color:var(--bb-navy);font-weight:600;font-size:13px;white-space:nowrap;display:flex;align-items:center}
.input-group .form-select{border-radius:0 10px 10px 0;border-left:none;flex:1}
.bb-cat-intro{background:var(--bb-cream);border:1px solid var(--bb-border);border-radius:var(--bb-radius);padding:20px 24px;margin-bottom:26px;color:var(--bb-gray)}
.bb-toolbar{align-items:center;margin-bottom:8px}
#product-category .row.row-cols-1{--bs-gutter-x:26px}

/* ---------- Product detail ---------- */
#product-product .row{display:grid;grid-template-columns:1fr 1fr;gap:40px}
#product-product h1{font-size:32px}
#product-product .price{font-size:26px;font-weight:800;color:var(--bb-navy);margin:10px 0}
#product-product .btn{margin-top:14px}

/* ---------- Cart ---------- */
#checkout-cart .table{width:100%;border-collapse:collapse}
#checkout-cart .table td,#checkout-cart .table th{padding:14px;border-bottom:1px solid var(--bb-border)}
#checkout-cart .table img{height:64px;border-radius:8px}

/* ---------- Information / CMS page ---------- */
#information-information h1{font-size:36px}
.bb-info-wrap{max-width:860px;margin:0 auto}
.bb-info-wrap img{max-width:100%;border-radius:14px;margin:18px 0}

/* ---------- Page title band ---------- */
.bb-pagehead{background:var(--bb-navy);color:#fff;padding:54px 0}
.bb-pagehead h1{color:#fff;font-size:40px;margin:0}
.bb-pagehead p{color:#cdd9ec;margin:8px 0 0}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .bb-hero .container{grid-template-columns:1fr}
  .bb-grid.cols-3,.bb-grid.cols-4,.bb-steps,.product-grid{grid-template-columns:1fr 1fr}
  #product-product .row{grid-template-columns:1fr}
  #bb-nav{display:none}
}
@media (max-width:600px){
  .bb-grid.cols-3,.bb-grid.cols-4,.bb-steps,.product-grid{grid-template-columns:1fr}
  .bb-hero h1{font-size:34px}
}