:root{ --brand:#1C3D73; --brand-rgb:28,61,115;
--accent:#1C3D73;     /* warm gold accent */
  --white-80: rgba(255,255,255,.85);
--muted:#6b7280; }



/* Bigger logo + override Bootstrap's cap */
:root{
  --logo-h-desktop: 96px;   /* try 88–110px */
  --logo-h-mobile:  64px;   /* mobile size */
}

:root{
  --brand:#1C3D73;           /* your brand color */
  --brand-ink:#ffffff;       /* text on brand */
  --brand-hover:#174061;     /* darker hover */
  --radius:10px;
}

/* Primary CTA button */
.btn-brand{
  background:var(--brand);
  color:var(--brand-ink);
  border:0;
  border-radius:var(--radius);
  padding:.6rem 1rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.btn-brand:hover,
.btn-brand:focus{
  background:var(--brand-hover);
  color:#fff;
}
.btn-brand:active{ transform:translateY(1px); }

/* Make the navbar toggler visible on light backgrounds */
.navbar-toggler{ border:1px solid #e5e7eb; }
.navbar-toggler-icon{
  background-image:none; width:1.4rem; height:1.1rem; position:relative; display:inline-block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px;
}
.navbar-toggler-icon::before{ top:0 }
.navbar-toggler-icon::after{ bottom:0 }
.navbar-toggler-icon span{ top:50%; transform:translateY(-50%) }


/* Navbar Logo */
.site-logo{
  height: 70px;           /* adjust height as needed */
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px){
  .site-logo{
    height: 56px;         /* smaller logo on mobile */
  }
}
/* optional header link */
.see-all{ color:var(--brand); font-weight:700; text-decoration:none; }
.see-all:hover{ text-decoration:underline; }








:root{
  --brand:#1C3D73;     /* deep blue */
  --gold:#F2B441;      /* warm gold accent */
  --text:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f8fafc;
  --border:#e5e7eb;
  --radius:14px;
}


/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin:8px 0 14px}
.breadcrumb a{color:var(--brand);text-decoration:none}
.breadcrumb span.sep{opacity:.5}

/* Title */
.product-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.product-title{margin:0;font-weight:800;font-size:clamp(20px,2.6vw,30px)}

/* Layout */
.detail-wrap{
  display:grid; gap:22px;
  grid-template-columns: 1.05fr 1fr; /* left gallery, right info */
}
@media (max-width: 992px){
  .detail-wrap{ grid-template-columns: 1fr; }
}

/* Gallery */
.gallery{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px
}
.gallery-main{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  aspect-ratio: 4/3; display:flex;align-items:center;justify-content:center;
}
.gallery-main img{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:zoom-in}
.gallery-thumbs{
  margin-top:12px; display:grid; gap:10px; grid-template-columns:repeat(5,1fr);
}
@media (max-width:576px){ .gallery-thumbs{ grid-template-columns:repeat(4,1fr);} }
.thumb{
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff;
  aspect-ratio:1/1; display:flex;align-items:center;justify-content:center; cursor:pointer;
  transition:border-color .2s, transform .15s;
}
.thumb img{max-width:100%;max-height:100%;object-fit:contain}
.thumb:hover{ border-color:#cfd4dc; transform:translateY(-1px) }
.thumb.is-active{ outline:2px solid var(--brand); outline-offset:2px }

/* Info card */
.info{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px;
}
.kv{color:var(--muted);font-size:14px;margin:6px 0 14px}
.bullets{margin:10px 0 16px;padding-left:18px}
.bullets li{margin:6px 0}

/* CTA */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.btn{
  display:inline-block;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;
  transition:filter .15s, transform .15s; border:1px solid transparent;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn-ghost:hover{background:#f1f5ff}

/* Details/Specs accordions */
.accordion{
  margin-top:18px; display:grid; gap:10px;
}
.accordion details{
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px;
}
.accordion summary{
  list-style:none; cursor:pointer; font-weight:700; display:flex; align-items:center; gap:10px;
}
.accordion summary::marker{display:none}
.accordion summary span.chev{margin-left:auto; transition:transform .2s}
details[open] summary span.chev{ transform:rotate(90deg) }
.acc-body{ padding:8px 2px 4px; color:#1f2937; }

/* Simple spec table */
.spec{
  width:100%; border-collapse:collapse; font-size:14px;
}
.spec th,.spec td{ padding:10px 10px; border-bottom:1px solid var(--border); text-align:left }
.spec th{width:36%}

/* —— Lightbox (zoom) —— */
.lb{ position:fixed; inset:0; z-index:1090; background:rgba(0,0,0,.86);
     display:none; align-items:center; justify-content:center; padding:24px }
.lb.is-open{ display:flex; animation:lbFade .18s ease-out }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lb__img{ max-width:min(96vw,1400px); max-height:92vh; object-fit:contain; border-radius:8px;
          box-shadow:0 20px 40px rgba(0,0,0,.35); transform:scale(.96); opacity:0;
          transition:transform .18s ease-out, opacity .18s ease-out }
.lb.is-open .lb__img{ transform:scale(1); opacity:1 }
.lb__close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:999px;
            border:0; background:#fff; color:#111; font-size:26px; cursor:pointer; }
body.lb-locked{ overflow:hidden }













.related-wrap{ margin-top:40px }
.related-head{
  display:flex; text-align:center; justify-content:space-between; gap:12px; margin-bottom:12px; margin-right: 125px;
}
.related-title{ margin:0; text-align: center; font-size: clamp(18px, 2.2vw, 24px); font-weight:800; color:var(--text) }

/* arrows */
.related-arrows{ display:flex; gap:10px }
.related-arrows button{
  width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--brand); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.related-arrows button:hover{ background:#275786; }

/* card */
.rel-card{
  background:var(--card);  border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.rel-card:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.08); border-color:#d7dbe2; }

.rel-media{
  display:block; background:#fff; border-bottom:1px solid var(--border);
  aspect-ratio: 4 / 3; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.rel-media img{ max-width:100%; max-height:100%; object-fit:contain; display:block }

.rel-body{ padding:12px; display:flex; flex-direction:column; gap:10px; text-align:center }
.rel-name{
  margin:0; font-size:14px; line-height:1.35; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* button (uses your existing btn + btn-ghost from detail page) */
.btn{ display:inline-block; padding:8px 14px; border-radius:999px; font-weight:700; text-decoration:none; border:1px solid transparent; transition:.15s }
.btn-ghost{ background:#fff; color:var(--brand); border-color:var(--brand) }
.btn-ghost:hover{ background:#f1f5ff }

/* Swiper sizing */
.related-swiper .swiper-slide{ height:auto }        /* let cards size naturally */

/* Dots styling */
.rel-dots .swiper-pagination-bullet{ width:8px; height:8px; background:#cbd5e1; opacity:1 }
.rel-dots .swiper-pagination-bullet-active{ background:var(--brand) }










/* --- Round dark-blue nav buttons like your screenshot --- */
.related-arrows button{
  width:44px; height:44px;
  border:0; border-radius:999px;
  background:#1C3D73;                /* brand blue */
 
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:
    0 10px 22px rgba(28,61,115,.28), /* outer soft shadow */
    inset 0 0 0 1px rgba(255,255,255,.08); /* subtle inner ring */
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.related-arrows button:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 14px 28px rgba(28,61,115,.34),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.related-arrows button:active{ transform: translateY(0); filter: brightness(.98); }
.related-arrows button:focus-visible{
  outline: 2px solid #F2B441;        /* gold focus ring */
  outline-offset: 2px;
}

/* make the arrow glyph white & centered (works for <span>‹ › or <i class="fa-...">) */
.related-arrows button span,
.related-arrows button i{
  color:#fff; font-size:18px; line-height:1; pointer-events:none;
}

/* Disabled look (if you ever add disabled attr) */
.related-arrows button:disabled{
  opacity:.5; cursor:not-allowed; transform:none; filter:none;
}

/* Responsive sizing */
@media (max-width: 768px){
  .related-arrows button{ width:38px; height:38px; }
  .related-arrows button span,
  .related-arrows button i{ font-size:16px; }
}
@media (max-width: 576px){
  .related-arrows button{ width:34px; height:34px; }
  .related-arrows button span,
  .related-arrows button i{ font-size:15px; }
}







/* newsletter band */
.nl-band{
  background: var(--brand);
  color:#fff;
  padding: clamp(24px, 4vw, 48px) 0;
}
.nl-title{ font-weight:800; letter-spacing:.2px; }
.nl-text{ color:rgba(255,255,255,.9); max-width:48ch; }
.nl-form{ max-width:520px; margin-left:auto; }
.nl-input{
  background:#e8f0fe;
  border:0; border-radius:.55rem;
  padding:.7rem .9rem;
}
.nl-input:focus{ box-shadow:0 0 0 .2rem rgba(255,255,255,.25); }
.btn-nl{
  background:#fff; color:var(--brand);
  border:0; border-radius:.55rem;
  padding:.7rem 1rem; font-weight:700;
}
.btn-nl:hover{ filter:brightness(.96); }

/* footer */
.site-footer{ background:#fff; padding: clamp(28px, 4vw, 56px) 0; }
.footer-logo{ height:100px; width:auto; }

.ft-head{
  font-weight:800; color:#111827; margin-bottom:.5rem; font-size:1rem;
}
.ft-links{ list-style:none; padding:0; margin:0; }
.ft-links li{ margin:.35rem 0; }
.ft-links a{ color:#4b5563; text-decoration:none; }
.ft-links a:hover{ color:var(--brand); }

.soc{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#eef2ff; color:var(--brand);
}
.soc:hover{ filter:brightness(.95); }

.ft-sep{ border-color:#28292b; margin: clamp(16px, 3vw, 28px) 0; }

.ft-sub{ font-weight:700; color:#111827; margin-bottom:.25rem; }
.ft-muted{ color:#6b7280; }
.ft-link{ color:#374151; text-decoration:none; }
.ft-link:hover{ color:var(--brand); }
.ft-copy{ color:#9ca3af; }

/* responsive */
@media (max-width: 991.98px){
  .nl-form{ margin-left:0; }
}
@media (max-width: 575.98px){
  .nl-title{ font-size:1.4rem; }
  .soc{ width:32px; height:32px; }
}