.root-fix{ }
:root{
    --accent: #0b5ed7; /* slightly deeper blue */
}
body { padding-bottom: 60px; background: #f6f7f9; }
.hero{background: linear-gradient(90deg,#081724 0%, #0b3558 60%, #08314f 100%);color:#fff;padding:48px 0;margin-bottom:24px}
.hero h1{font-weight:700}
.product-card .card-img-top{object-fit:cover;height:200px}
.price-badge{position:absolute;right:8px;top:8px;background:var(--accent);color:#fff;padding:6px 10px;border-radius:6px}
.card-body .btn{margin-right:6px}
.footer{background:#0b1a2b;color:#9fb0c9;padding:24px 0;margin-top:48px}

/* Navbar styling */
.navbar-nav .nav-link{
	text-transform:uppercase;
	font-weight:600;

/* Account link styling: smaller, visually distinct */
.nav-link-account {
	font-size: 0.92rem;
	text-transform: none;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85) !important;
	background: rgba(255, 255, 255, 0.03);
	padding: 0.28rem 0.6rem;
	border-radius: 6px;
	margin-left: 0.4rem;
}
.nav-link-account:hover,
.nav-link-account:focus {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}

@media (max-width: 991.98px) {
	.nav-link-account {
		margin-left: 0;
		padding: 0.4rem 0.5rem;
		display: inline-block;
	}
}
	letter-spacing:0.06em;
	font-size:0.95rem;
	color: #e6f0ff !important;
}
.navbar-brand{font-weight:700;letter-spacing:0.08em}
.navbar .border-start{border-left-color:rgba(255,255,255,0.08)!important}

/* Make section labels visually larger on desktop */
@media(min-width:992px){
	.navbar-nav .nav-link{font-size:1.0rem;padding-left:0.9rem;padding-right:0.9rem}
}

/* Tweak hero to avoid duplicate nav */
.hero .btn{margin-left:0.5rem}

/* Product card image sizing */
.product-card .card-img-top{height:220px}

/* Product detail gallery thumbnails */
.product-thumbs .thumb-item{border:2px solid transparent}
.product-thumbs .thumb-item:hover{border-color:var(--accent)}

/* Active thumbnail */
.product-thumbs .active-thumb{border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,110,253,0.08)}

/* Lightbox button tweaks */
#lightboxPrev, #lightboxNext{width:44px;height:44px;border-radius:50%;opacity:0.95}
#lightboxPrev:hover, #lightboxNext:hover{opacity:1}
#lightboxModal .modal-content{background:transparent}
#lightboxModal .btn-close-white{filter:invert(1);}

/* Product description table styling */
.product-description table{width:100%;border-collapse:collapse;margin:0.5rem 0}
.product-description table td,.product-description table th{border:1px solid #e9ecef;padding:8px}
.product-description table tr:nth-child(even){background:#f8f9fa}
.product-description figure.table{margin:0}
.product-description img{max-width:100%;height:auto}

/* Navbar: smaller, slightly more neutral color */
.navbar-brand{font-size:0.95rem;color:#d6dbe3 !important}
.navbar-nav .nav-link{font-size:0.84rem !important;color:rgba(214,219,227,0.95) !important}
.nav-link-account{font-size:0.84rem !important;color:#9fc5ff !important;padding:0.18rem 0.45rem}
/* More specific selector to override .navbar-nav .nav-link rules */
.navbar-nav .nav-link.nav-link-account{color:#9fc5ff !important;background:rgba(255,255,255,0.02);border-radius:6px}
@media(min-width:992px){
	.navbar-nav .nav-link{font-size:0.9rem}
}

/* Center account links vertically within navbar */
.navbar-nav .nav-item{display:flex;align-items:center}
.navbar-nav .nav-link, .nav-link-account{padding-top:0.35rem;padding-bottom:0.35rem}

/* Make regular nav links look like subtle buttons (exclude account link)
	 with a different hover highlight color */
.navbar-nav .nav-link:not(.nav-link-account){
	display:inline-block;
	padding:0.28rem 0.6rem;
	border-radius:8px;
	background:rgba(255,255,255,0.02);
	color:rgba(214,219,227,0.95) !important;
	transition:background .12s ease,color .12s ease,transform .08s ease;
}
.navbar-nav .nav-link:not(.nav-link-account):hover,
.navbar-nav .nav-link:not(.nav-link-account):focus{
	background:rgba(200,230,210,0.12); /* soft greenish highlight */
	color:#ffffff !important;
	transform:translateY(-1px);
}

/* Homepage / hero / carousel styles */
.container-fluid.px-0 #nnpoCarousel { position: relative; overflow: hidden; }
.container-fluid.px-0 #nnpoCarousel .carousel-item img { width: 100%; height: 520px; object-fit: cover; }
.container-fluid.px-0 #nnpoCarousel .carousel-caption { background: rgba(0,0,0,0.32); padding: 0.8rem 1rem; border-radius: 6px; }
.container-fluid.px-0 #nnpoCarousel .carousel-control-prev-icon,
.container-fluid.px-0 #nnpoCarousel .carousel-control-next-icon { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }

@media (max-width: 991.98px) {
    .container-fluid.px-0 #nnpoCarousel .carousel-item img { height: 420px; }
}
@media (max-width: 767.98px) {
    .container-fluid.px-0 #nnpoCarousel .carousel-item img { height: 320px; }
}

/* Category quick-links */
.category-btn { padding: .55rem .9rem; border-radius: .6rem; font-weight:600; border:1px solid rgba(13,110,253,0.12); }
.category-btn:hover, .category-btn:focus { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }

/* Featured product cards */
.product-card { transition: transform .12s ease, box-shadow .12s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(13,110,253,0.06); }
.product-card .card-img-top { height: 260px; object-fit: cover; }
.product-card .card-body { min-height: 120px; display:flex; flex-direction:column; }

/* CTA button sizing */
.btn-lg.btn-primary { padding: .7rem 1.2rem; font-size: 1.02rem; }

/* Small polish for benefits block */
.container .border.rounded i.bi { color: var(--accent); }

/* Ensure consistent spacing under full-bleed carousel */
.container + .container { margin-top: 18px; }

/* Intro block to stand out on page */
.intro-block{ background: rgba(255,255,255,0.98); border-radius:12px; padding:28px; box-shadow: 0 8px 30px rgba(11,78,135,0.06); margin-top: -36px; position: relative; z-index: 5; }
.intro-block h1{ color: #07314a; font-weight:800; letter-spacing:0.02em }
.intro-block .lead{ color: #486674; font-size:1.05rem }

/* Slightly stronger accent for buttons and highlights */
.btn-primary, .price-badge { background: var(--accent) !important; border-color: var(--accent) !important }
.category-btn { border-color: rgba(11,94,215,0.12); }

/* Category hero banner (placed directly under navbar for certain categories) */
.cat-hero{ display:block; width:100%; height:360px; object-fit:cover; object-position:center; }
@media (max-width: 991.98px){ .cat-hero{ height:260px } }
@media (max-width: 575.98px){ .cat-hero{ height:180px } }