/* ========================================
   CLARIX WATER - COMPLETE BRANDED THEME
   Colors from logo: #6B8E23 (Olive), #90C23F (Lime), #A8B5A2 (Sage), #4A5D23 (Deep)
   ======================================== */

/* Import modern variable font - Inter (clean, screen-optimized, 2026 favorite) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* BASE TYPOGRAPHY - Updated to Inter + better sizes */
body {
    font-family: 'Archivo Narrow', 'Inter', 'Open Sans', 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
    color: #4A5D23; /* Deep Olive */
    font-size: 15px;          /* Modern base size - was 12px */
    line-height: 1.55;         /* Smoother, more readable */

    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    background-image: url('../image/bg1.png');
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo Narrow', 'Inter', sans-serif;
    color: #4A5D23;
    font-weight: 600;         /* Can bump to 700 for bolder headings if desired */
    line-height: 1.25;
}

/* LINKS - PERFECT CONTRAST */
a, a:link, a:visited {
    color: #6B8E23 !important;
    text-decoration: none;
}

a:hover, a:active, a:focus {
    color: #90C23F !important;
}

/* TOP BAR - Sage Gray */
#top {
    background-color: #A8B5A2;
    border-bottom: 1px solid #90C23F;
    padding: 4px 0 3px 0;
    margin: 0 0 20px 0;
    min-height: 40px;
}

#top-links a {
    color: #4A5D23 !important;
}

#top-links a:hover {
    color: #90C23F !important;
}

/* HEADER & LOGO */
#logo {
    margin: 0 0 10px 0;
}

/* SEARCH */
#search .input-lg {
    height: 40px;
    border-color: #6B8E23;
}

#search .btn-lg {
    background: linear-gradient(to bottom, #90C23F, #6B8E23);
    border-color: #6B8E23;
    color: #fff;
}

/* CART */
#cart > .btn {
    background: linear-gradient(to bottom, #90C23F, #6B8E23);
    border-color: #6B8E23;
    color: #fff;
}

#cart.open > .btn {
    background-color: #FFFFFF;
    border-color: #6B8E23;
    color: #4A5D23;
}

/* MAIN MENU - Olive Gradient + WHITE TEXT */
#menu {
    background: linear-gradient(to bottom, #6B8E23, #4A5D23);
    border-color: #4A5D23;
    min-height: 40px;
}

#menu .nav > li > a {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    padding: 10px 15px;
}

#menu .nav > li > a:hover,
#menu .nav > li.open > a {
    color: #FFFFFF !important;
    background-color: rgba(144,194,63,0.3) !important;
}

/* BREADCRUMB - Sage */
.breadcrumb {
    background: #A8B5A2;
    border: 1px solid #90C23F;
    margin: 0 0 20px 0;
    padding: 8px 0;
}

.breadcrumb a {
    color: #4A5D23 !important;
}

.breadcrumb a:hover {
    color: #90C23F !important;
}

/* PRODUCT TABS - Clean White/Olive */
.nav-tabs > li > a {
    background-color: #FFFFFF !important;
    color: #4A5D23 !important;
    border-color: #6B8E23;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #6B8E23 !important;
    color: #FFFFFF !important;
    border-color: #6B8E23;
}

/* CATEGORY SIDEBAR */
.list-group-item {
    color: #4A5D23 !important;
    border-color: #A8B5A2;
}

.list-group-item:hover {
    background-color: #A8B5A2 !important;
    color: #4A5D23 !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #90C23F !important;
    border-color: #6B8E23 !important;
    color: #FFFFFF !important;
}

.list-group-item.active a {
    color: #FFFFFF !important;
}

/* BUTTONS - Clarix Palette */
.btn-primary {
    background: linear-gradient(to bottom, #90C23F, #6B8E23);
    border-color: #6B8E23;
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(to bottom, #6B8E23, #4A5D23);
}

.btn-default {
    background: linear-gradient(to bottom, #A8B5A2, #90C23F);
    border-color: #90C23F;
    color: #4A5D23;
}

.btn-inverse {
    background: linear-gradient(to bottom, #4A5D23, #303030);
    border-color: #4A5D23;
    color: #fff;
}

/* PRICES */
.price-new {
    color: #90C23F !important;
    font-weight: 700;
}

.price-old {
    color: #A8B5A2 !important;
}

/* PRODUCT TITLES */
.product-thumb h4 a {
    color: #4A5D23 !important;
}

.product-thumb h4 a:hover {
    color: #90C23F !important;
}

/* FOOTER - High Contrast */
footer {
    background-color: #4A5D23;
    border-top: 3px solid #90C23F;
    color: #E8F0D2 !important;
}

footer a {
    color: #E8F0D2 !important;
}

footer a:hover {
    color: #FFFFFF !important;
}

footer h5 {
    color: #FFFFFF !important;
}

/* FORMS & INPUTS */
select.form-control,
input[type="text"].form-control,
input[type="email"].form-control {
    border-color: #6B8E23;
}

select.form-control:focus,
input[type="text"].form-control:focus {
    border-color: #90C23F;
    box-shadow: 0 0 5px rgba(144,194,63,0.5);
}

/* PRODUCT IMAGES */
.product-thumb .image img,
.thumbnail img {
    border: 2px solid #6B8E23;
    border-radius: 12px;
}

/* Override Bootstrap thumbnail defaults for product gallery */
.thumbnails .thumbnail {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* Product gallery thumbnails - no bullets, no padding issues, transparent bg */
.thumbnails {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;  /* optional: space before tabs */

    clear: both !important;          /* clears any left/right floats from li's or previous elements */
    overflow: hidden !important;     /* contains floats inside ul, prevents collapse */
    width: 100% !important;          /* full width to push next sibling down */
}

.thumbnails li {
    list-style: none !important;
    margin: 0 8px 8px 0 !important;  /* small spacing between thumbs */
    padding: 0 !important;
    float: left;                     /* keep horizontal */
    background: transparent !important;
}

.thumbnails .thumbnail,
.thumbnails .thumbnail img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}


/* CART BUTTON */
#button-cart {
    background: linear-gradient(to bottom, #90C23F, #6B8E23) !important;
    border-color: #6B8E23 !important;
}

/* SWIPER OVERRIDE */
.swiper-container a {
    color: #6B8E23 !important;
}

/* PAYPAL & EXTENSIONS */
a[href*="paypal"],
[class*="paypal"] a {
    color: #6B8E23 !important;
}

/* TMD TABS - Updated to Inter for consistency */
#tab-description, #tabcustom0, #tabcustom1, #tabcustom0 div, #tabcustom1 div, #tab-description div, .tab-pane, .prose, .prose * {
    font-family: 'Archivo Narrow', 'Inter', "Segoe UI", "Open Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #4A5D23 !important;  /* Match brand deep olive instead of #333 */
    font-weight: 400 !important;
}

#tab-description b, #tab-description strong, #tabcustom0 b, #tabcustom0 strong, #tabcustom1 b, #tabcustom1 strong, .prose strong, .prose-strong\\:font-medium, .prose b {
    font-weight: 600 !important;
    color: #4A5D23 !important;  /* Consistent brand color */
}

.MsoNormal, [class*="Mso"] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 1em 0 !important;
}

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
    #menu .nav > li > a {
        color: #FFFFFF !important;
        background-color: rgba(74,93,35,0.9) !important;
    }
}

/* TOP NAV - ALL ITEMS STABLE (NO HOVER CHANGE) */
#top-links a,
#top-links li a,
#wishlist-total a,
#top-links .dropdown-toggle {
    color: #4A5D23 !important;
    background-color: transparent !important;
}

#top-links a:hover,
#top-links li a:hover,
#wishlist-total a:hover,
#top-links .dropdown-toggle:hover {
    color: #4A5D23 !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

/* DROPDOWN MENU ONLY - Subtle improvement */
#top-links .dropdown-menu a {
    color: #4A5D23 !important;
}

#top-links .dropdown-menu a:hover {
    color: #FFFFFF !important;
    background-color: #90C23F !important;
}

/* PAGE TITLE / BREADCRUMB H2 - PERFECT READABILITY */
h2 {
    color: #4A5D23 !important;
    /* background-color: #FFFFFF !important; */
}

#content h2 {
    color: #4A5D23 !important;
    text-shadow: none !important;
}

#content h2:hover {
    color: #4A5D23 !important;
    /* background-color: #FFFFFF !important; */
}

/* BREADCRUMB LINKS - STABLE */
.breadcrumb > li > a:hover {
    color: #4A5D23 !important;
    background-color: transparent !important;
}

/* TOTAL WISHLIST & COMPARE EXTERMINATOR */
#wishlist-total, #compare-total { display: none !important; }

/* ALL Wishlist buttons - multiple selectors */
.wishlist,
.btn-wishlist,
[onclick*="wishlist.add"],
[title*="Wish List"],
.fa-heart { display: none !important; }

/* ALL Compare buttons - multiple selectors */
.compare,
.btn-compare,
[onclick*="compare.add"],
[title*="Compare this Product"],
.fa-exchange { display: none !important; }

/* Product button group - auto-adjust width */
.product-thumb .button-group button {
    width: 33.33% !important;
}

/* Fix button spacing after removal */
.product-thumb .button-group {
    display: flex !important;
    justify-content: space-between !important;
}





/* Your existing feature-box overrides - updated to use Inter */
html body #content .feature-content,
html body .panel-body .feature-content,
html body .html-content .feature-content,
html body .tb-content .feature-content {
  color: #4A5D23 !important;
/*  font-family: 'Inter', 'Open Sans', 'Segoe UI', Arial, sans-serif !important; */
}

.feature-content h3,
#content .feature-content h3,
.panel-body .feature-content h3 {
  color: #4A5D23 !important;
  font-size: 28px !important;  /* Slightly larger for promo impact */
  font-weight: 700 !important;
}

.feature-content h4,
#content .feature-content h4 {
  color: #6B8E23 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.feature-content p,
.feature-content li,
#content .feature-content p {
  color: #4A5D23 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.feature-content strong,
.feature-content h5 {
  color: #6B8E23 !important;
  font-weight: 600 !important;
}

.highlight {
  color: #4A5D23 !important;
  font-weight: 600 !important;
  font-size: 17px !important;
}

/* Button – force your branded gradient */
.discover-btn,
.feature-content .btn-primary {
  background: linear-gradient(to bottom, #90C23F, #6B8E23) !important;
  border-color: #6B8E23 !important;
  color: #fff !important;
}

/* Your transparency fixes */
.feature-image {
  flex: 0 0 38%;
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
}

.feature-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.feature-box img {
  background: transparent !important;
}









/* Top categories - left side, match right-side styling */
#top-categories {
  float: left;
  margin-top: 6px;  /* slight vertical align with right items */
}

#top-categories ul.list-inline {
  margin: 0;
  padding: 0;
}

#top-categories ul.list-inline > li {
  margin-right: 20px;  /* space between your two categories */
}

#top-categories a {
  color: #4A5D23 !important;  /* match your existing top links color */
  font-size: 14px;            /* same size as phone/cart/account text */
  font-weight: 500;           /* slightly bolder for visibility */
  text-decoration: none !important;
}

#top-categories a:hover {
  color: #90C23F !important;  /* your hover color */
  background: transparent !important;
}

/* Mobile: center or hide if needed */
@media (max-width: 767px) {
  #top-categories {
    float: none;
    text-align: center;
    margin: 8px 0;
  }
  #top-categories ul.list-inline > li {
    margin: 0 15px;
  }
}




/* Force-hide grid/list view buttons - higher specificity */
#content .btn-group.btn-group-sm,
#content .btn-group.btn-group-sm .btn-default,
#list-view, #grid-view {
  display: none !important;
}

/* Hide Sort By dropdown + its wrapper column */
#content .col-md-4 .input-group.input-group-sm:has(label[for="input-sort"]),
#content .col-md-4 .input-group.input-group-sm {
  display: none !important;
}

/* Hide Show/Limit dropdown + its wrapper column */
#content .col-md-3 .input-group.input-group-sm:has(label[for="input-limit"]),
#content .col-md-3 .input-group.input-group-sm {
  display: none !important;
}

/* Optional: Hide Product Compare link if it's still showing */
#content #compare-total {
  display: none !important;
}

/* Clean up spacing from removed elements */
#content .row:first-of-type {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Ensure products stay in grid view (prevent fallback to list/one-column) */
.product-layout {
  float: left !important;
  width: 33.333% !important;   /* 3 across on desktop - adjust to 25% for 4, 50% for 2 */
  clear: none !important;
  margin-bottom: 30px !important; /* space between rows */
  padding: 0 15px;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .product-layout {
    width: 50% !important;     /* 2 across on tablets */
  }
}

@media (max-width: 767px) {
  .product-layout {
    width: 100% !important;    /* 1 across on mobile */
  }
}




/* Hide PayPal card fields - if you want to show them, remove this block
 This shouldn't be needed if you have Credit or Debit cards disabled in your PayPal settings, but this ensures they won't show up on the front end if they do */
/* .paypal-card  {
    display: none !important; 
} */



.cart-summary-box {
    position: absolute;
    top: 100%;                        /* Directly below the <a> / icon */
    left: 50%;                        /* Center under the icon */
    transform: translateX(-50%);      /* Perfect centering */
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    min-width: 140px;
    text-align: center;
    display: none;
}

/* Small upward arrow pointing to the icon */
.cart-summary-box::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ddd;    /* Matches border color */
}

/* On mobile: keep centered and prevent overflow */
@media (max-width: 767px) {
    .cart-summary-box {
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: 90vw;
    }
}

/*
.breadcrumb {
    display: none !important;
} */