:root {
  --brand: #4667bf;
  --bg-white: #fff;
  --text-main: #333;
  --text-secondary: #444;
  --radius: 10px;
  --hover: #4667bf;
  --bg-hover: #f4f6fb;
}

/* Show it is fixed to the top */
html {font-size: 14px;}
body { background:#f3f4f6; /* background-color: rgb(234, 244, 255); */ margin: 0; font-size: 1rem; line-height: 1.6; font-family: "Nunito", system-ui, sans-serif; color: var(--text-main);}
h1 { font-size: 1.6rem; font-weight: 600; }     
h2 { font-size: 1.3rem; font-weight: 600; }    
h3 { font-size: 1.1rem; font-weight: 600; }   
h4 { font-size: 1rem; font-weight: 600; }    
h5 { font-size: .875rem; font-weight: 600; color:#3b3f4a; } 

/* NAVBAR */
.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  padding:.7rem 1rem;
  background: var(--white);
  border-bottom:1px solid #eee;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* LOGO */
.navbar-brand img{ height:48px; }

/* NAV LIST */
.navbar-nav{
  align-items:center;
}

/* NAV LINKS */
.navbar-nav .nav-link{
  position:relative;
  padding:10px 16px;
  font-weight:600;
  color: var(--main);
  transition:color .2s ease;
}

/* HOVER COLOR */
.navbar-nav .nav-link:hover{
  color: var(--hover);
}

/* UNDERLINE */
.navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:16px;
  bottom:4px;
  width:0;
  height:2px;
  background: var(--brand);
  transition:width .25s ease;
}

.navbar-nav .nav-link:hover::after{
  width:calc(100% - 32px);
}

/* DROPDOWN */
.dropdown-menu{
  border:none;
  border-radius: var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:8px 0;
}

/* DROPDOWN ITEMS */
.dropdown-item{
  padding:8px 20px;
  color: var(--main);
  transition:.15s ease;
}

.dropdown-item:hover{
  background: var(--bg-hover);
  color: var(--hover);
}

/* SEARCH */
.form-control{
  border-radius: var(--radius);
}

.btn-secondary{
  border-radius: var(--radius);
  background-color: #4667bf !important;
}

/* DESKTOP DROPDOWN HOVER */
@media (min-width:992px){
    .dropdown:hover>.dropdown-menu{ display:block; margin-top:0;}
}

@media (max-width:991px){

.dropdown-menu{
display:block;
position:static;
box-shadow:none;
border:none;
padding-left:15px;
}

.dropdown-toggle::after{
display:none;
}

}

/* GRID SPACING */
.product-grid > [class*="col"]{ margin-bottom:15px;}

/* PRODUCT CARD */
.product-card{
  background: var(--white);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:.25s;
  height:100%;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 35px rgba(0,0,0,.10);
}

/* ===== THUMBNAIL KEPP CONSISTENT EVEN IMAGE SIZE NOT SAME ===== */
.product-img { padding: 10px; width:100%; background:#f6f7f9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-img img{ border-radius: var(--radius); max-width:100%; max-height:100%; object-fit:contain; display:block; }

.product-info { padding:1rem; display:flex; flex-direction:column; flex-grow:1; }
.product-title { margin: 0; line-height:1.35;}
.product-title a { color:var(--text-main); text-decoration: none; }
.product-title a:hover { color:var(--brand); }
.product-meta { font-size:.75rem; color:var(--text-muted); margin-bottom:.5rem; }
.product-excerpt { line-height: 1.35; margin: 1rem 0;}
.product-price { font-size:1.2rem; font-weight:700; color:var(--brand); margin-bottom:.5rem; }

.product-meta-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.product-stock { font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.in-stock { background:#e8f7ef; color:#1f9d55; }
.low-stock { background:#fff4e5; color:#d97706; }
.sold-out { background:#fee2e2; color:#dc2626; }

/* Star Rating Style */
.product-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } 
.stars { color: #fbbf24; font-size: 1.2rem; letter-spacing: -2px; } 
.rating-count { font-size: 0.8rem; color: var(--text-muted); }

.product-actions { display:flex; gap:.6rem; margin-top:auto; }
.btn-primary, .btn-outline{ padding:.7rem 1rem; border:1px solid #4667bf; font-weight:600; border-radius:999px;
             transition:all .2s ease; }
.btn-primary { background:#4667bf; color:#fff; }
.btn-outline { color: var(--text-secondary);}
.btn-primary:hover{ background:transparent; color: var(--text-secondary); text-decoration: none;}
.btn-outline:hover{ background:#3552a3; color:#fff; text-decoration: none;}

/* END PRODUCTS GRID */


.productsidebar{
    border:none;
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    margin-bottom:20px;
}

.productsidebar .card-header{
    font-weight:600;
    font-size:1.2rem;
    background-color: var(--brand);
    color: var(--white);
    border-bottom:1px solid #eee;
    padding:.75rem 1rem;
}

.productsidebar .list-group-item{
    border:none;
    padding:.9rem 1rem;
    font-weight:600;
    color: var(--text-secondary);
    transition:all .2s ease;
    border-radius:6px;
}

.productsidebar .list-group-item:hover{
    background:#f4f6fb;
    color:#1f2933;
    padding-left:1.2rem;
}

.productsidebar .list-group-item:not(:last-child){
    border-bottom:1px solid #f2f2f2;
}
.list-group-item.active{
    background:#4667bf;
    border:none;
    color:#fff;
    font-weight:600;
}




/* MOBILE */
@media (max-width:480px){
  .relatedproductshidemobile { display:none; }
}
.hero-slider{}
.carousel{
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,.08);
}

/* SLIDE IMAGE */
.carousel-item img{
   width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* DARK OVERLAY */
.carousel-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.45),
    rgba(0,0,0,.05)
  );
}

/* CAPTION */
.carousel-caption{
  left:8%;
  right:auto;
  bottom:25%;
  text-align:left;
  z-index:2;
}

/* HERO BUTTON */
.btn-hero{
    background:#4667bf;
    color:#fff;
    padding:10px 25px;
    border-radius:999px;
    font-weight:600;
    transition:0.3s;
}

.btn-hero:hover{
    background:#2f4da3;
    color:#fff;
    transform:translateY(-2px);
}

/* INDICATORS */
.carousel-indicators li{
  width:8px;
  height:8px;
  border-radius:50%;
}

/* CONTROLS */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-size:60%;
  filter:invert(1);
}


.homepage p, .homepage h2 { font-size: 1rem !important; line-height: 1.5; color: var(--text-secondary); margin-bottom: 20px; } 
/***  SECTION  ***/
.feature-title { margin-bottom: 35px;}
feature-title h3{ font-weight:600; color:#0a1f44; letter-spacing:0.3px; border-bottom:2px solid rgba(255,255,255,.08);}
.feature-title a { font-weight:600; color: var(--text-secondary); text-decoration: none; }

/* Footer */
.footer{
    background:#111827;
    color:#d1d5db;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/* TOP INFO */
.footer-top{
  
  padding:1.5rem 0;
  margin-bottom:1.2rem;
  text-align:center;
}

.footer-top strong{
  display:block;
  font-size:1rem;
  color:#fff;
  margin-bottom:.4rem;
}

.footer-top p{
  margin:0;
  line-height:1.6;
}

/* BOTTOM AREA */
.footer-bottom{
  padding:.5rem 0;  
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  
}

/* LINKS */
.footer a{
  color:#9aa8ff;
  text-decoration:none;
  transition:.2s;
}

.footer a:hover{
  color:#fff;
}

/* BACK TO TOP */
.back-top{
  display:inline-block;
  opacity:.8;
}

.back-top:hover{
  opacity:1;
}

/* BACK TO TOP BUTTON */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;

  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  color:#fff;

  background:#4667bf;
  border-radius:50%;

  box-shadow:0 6px 18px rgba(0,0,0,.18);

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);
  transition:all .25s ease;

  text-decoration:none;
  z-index:999;
}

.back-to-top:hover{
  background:#3552a3;
  transform:translateY(-3px);
}

/* visible state */
.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media (min-width:992px){
.dropdown:hover .dropdown-menu{
display:block;
margin-top:0;
}
}



/* 404 ERROR */
.error-section{
    
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.error-code{
    font-size:120px;
    font-weight:700;
    color:#4667bf;
}

.error-title{
    font-size:28px;
    font-weight:600;
    margin-bottom:10px;
}

.error-text{
    color:#6c757d;
    margin-bottom:25px;
}

.btn-home{
    background:#4667bf;
    border:none;
    padding:.7rem 1.6rem;
    border-radius:999px;
    font-weight:600;
    transition:all .25s ease;
}

.btn-home:hover{
    background:#3854a3;
}

/*** PRODUCT SINGLE ***/
.product-title-single { font-weight:600; color:var(--main-text); margin-bottom:10px; }
.product-price-single { font-size: 1.5rem; font-weight:600; color:var(--brand); }
.product-excerpt-single { line-height:1.7; color:#555; }
.product-rating-single { display:flex; align-items:center; gap:10px; margin:10px 0; }
.product-rating-single .stars { color: #f5a623; letter-spacing:2px; }

.product-actions-single { display:flex; justify-content:flex-start; gap:15px; }
.product-rating-single .rating-text { color:var(--secondary-text); }
.product-price-rating-single { display:flex; align-items:center; gap:20px; margin:15px 0; }

.product-meta-inline-single { display:flex; align-items:center; gap:15px; margin:12px 0 18px 0;}
.meta-label-single { color:var(--secondary-text); margin-right:4px; }
.meta-value-single, .condition-badge-single { padding:3px 10px; border-radius:20px; background-color:#eef2f7; }
.meta-value-single a { text-decoration: none; color:var(--secondary-text);}
.meta-value-single a:hover { color:var(--hover);}
.meta-separator-single { width:1px; height:16px; background-color:var(--brand); }

/*** PRODUCT GALLERY ***/
.product-gallery { text-align:center; }
.thumbnail-row { display:flex; justify-content:center; gap:12px; padding-top:18px; margin-top:20px; border-top:1px solid #e6e9ef; }
.thumb-item { width:75px; height:75px; border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid #f0f2f6; background:#ffffff; transition:all 0.25s ease; }
.thumb-item img { width:100%; height:100%; object-fit:cover; }
.thumb-item:hover { border-color:#003885; transform:translateY(-2px); }
.thumb-item.active { border-color:#003885; box-shadow:0 6px 15px rgba(0,56,133,0.2); transform:translateY(-2px); }

/* ===== MAIN IMAGE KEPP CONSISTENT EVEN IMAGE SIZE NOT SAME ===== */
.main-product-image{ width:100%; aspect-ratio:1/1; background:#f6f7f9; border-radius:12px; padding:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.main-product-image img{ display:block; max-width:100%; max-height:100%; object-fit:contain; transition:transform .3s ease; }


/*** PRODUCT DESCRIPTION ***/
.product-description * { max-width:100%; }
.product-description { border-top:1px solid #eee; }
.content-title { padding:10px 0;; line-height:1.5; font-size: 1rem; font-weight: 600; color:var(--text-main); }
.content p { margin-bottom:16px; }
.content h2, .content h3, .content h4 { color:#0a1f44; font-weight:600; }
.content ul,.product-description-content ol { padding-left:20px; margin-bottom:20px; }
.content li { margin-bottom:8px; }
.content ul li { list-style:none; position:relative; padding-left:18px; }
.content ul li::before { content:"•"; position:absolute; left:0; color:#003885; font-weight:bold; }
.content table { width:100%; border-collapse:collapse; margin-bottom:25px;}
.content table th, .content table td { border:1px solid #e6e9ef; padding:10px 12px; text-align:left; }
.content table th { background-color:#f8f9fb; font-weight:600; color:#0a1f44; }
.content img { max-width:100%; height:auto; border-radius:10px; margin:15px 0; box-shadow:0 10px 25px rgba(0,0,0,0.05); }
.content a { text-decoration: none; color:#003885; font-weight:500; transition:0.25s ease; }
.content a:hover { color:#0a1f44; }
.content a[href$=".pdf"] { display:inline-block; padding:6px 12px; border:1px solid #003885; border-radius:6px; text-decoration:none; }

/* --- Related Products Section --- */
.related-product{ margin-top:1rem; border-top:1px solid #eee; padding-top:1rem; }
.related-product a{ display:flex; gap:3px; align-items:center; padding:2px; border-radius:10px; text-decoration:none; background:#f7f9fb; transition:.2s; }
.related-product a:hover{ background:#eef2f6; }
.related-product-thumb{ width:90px; height:90px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.related-product-thumb img{ width:100%; height:100%; object-fit:cover; }
.related-product-info{ padding: 10px; }
.related-product-name{ font-size: 1rem; margin-bottom:4px; color:var(--text-main); line-height:1.3; }
.related-product-price{ font-size:1rem; font-weight:600; color:var(--brand); }



/* Breadcrumb Container */
.breadcrumb {
    background: #f7f9fb;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

/* Breadcrumb Items */
.breadcrumb-item {
    font-weight: 500;
}

/* Links */
.breadcrumb-item a {
    color: #4667bf;
    text-decoration: none;
    transition: color .2s ease;
}

/* Hover */
.breadcrumb-item a:hover {
    color: #2f4ea3;
    text-decoration: underline;
}

/* Separator */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #999;
    padding: 0 .5rem;
}

/* Active Item */
.breadcrumb-item.active {
    color: #6c757d;
    font-weight: 600;
}

/* This hides the element visually but keeps it accessible to machines/crawlers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }