/* Global Font & Reset */
body { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #666; font-size: 12px; line-height: 20px; width: 100%; }
h1, h2, h3, h4, h5, h6 { color: #444; }
.fa { font-size: 14px; }

/* Headers */
h1 { font-size: 33px; }
h2 { font-size: 27px; }
h3 { font-size: 21px; }
h4 { font-size: 15px; }
h5 { font-size: 12px; }
h6 { font-size: 10.2px; }

/* Links */
a { color: #23a1d1; }
a:hover { text-decoration: none; }

/* Forms */
legend { font-size: 18px; padding: 7px 0; }
label { font-size: 12px; font-weight: normal; }

/* Form controls */
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="datetime"].form-control,
input[type="datetime-local"].form-control,
input[type="date"].form-control,
input[type="month"].form-control,
input[type="time"].form-control,
input[type="week"].form-control,
input[type="number"].form-control,
input[type="email"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="color"].form-control { font-size: 12px; }

.input-group input,
.input-group select,
.input-group .dropdown-menu,
.input-group .popover { font-size: 12px; }
.input-group .input-group-addon { font-size: 12px; height: 30px; }

/* Fix display */
span.hidden-xs,
span.hidden-sm,
span.hidden-md,
span.hidden-lg { display: inline; }

/* Tabs & form required */
.nav-tabs { margin-bottom: 15px; }
div.required .control-label:before { content: '* '; color: #F00; font-weight: bold; }

/* Dropdown hover style */
.dropdown-menu li>a:hover { text-decoration: none; color: #ffffff; background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; }

/* Top bar styling */
#top { background-color: #EEEEEE; border-bottom: 1px solid #e2e2e2; padding: 4px 0 3px; margin: 0 0 20px; min-height: 40px; }
#top .container { padding: 0 20px; }
#top .btn-link, #top-links li, #top-links a { color: #888; text-shadow: 0 1px 0 #FFF; text-decoration: none; }
#top .btn-link:hover, #top-links a:hover { color: #444; }
#top #form-currency .currency-select,
#top #form-language .language-select { text-align: left; }
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover { text-shadow: none; color: #ffffff; background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); }
#top .btn-link strong { font-size: 14px; line-height: 14px; }
#top-links { padding-top: 6px; }
#top-links a + a { margin-left: 15px; }

/* Logo & search */
#logo { margin: 0 0 10px 0; }
#search { margin-bottom: 10px; }
#search input { border: 2px solid #003366; height: 40px; padding: 0 10px; font-size: 14px; }
#search button, #search .btn, #search .btn-default { background-color: #f7941d !important; border-color: #f7941d !important; color: #fff !important; height: 40px; padding: 0 15px; font-size: 14px; line-height: 1.5; box-shadow: none; }

/* Main menu */
#menu { background-color: #003366 !important; background-repeat: repeat-x; border-color: #003366 !important; min-height: 40px; }
#menu .nav > li > a, #menu .nav > li > a:focus, #menu .nav > li > a:hover, #menu .nav > .open > a, #menu .nav > .open > a:focus, #menu .nav > .open > a:hover { background-color: #003366 !important; color: #fff !important; }
#menu .dropdown-menu { background-color: #003366 !important; border: none !important; padding-bottom: 0; }
#menu .dropdown-inner { display: block; }
#menu .dropdown-inner ul { display: table-cell; }
#menu .dropdown-inner a, #menu .dropdown-inner a:focus, #menu .dropdown-inner a:hover { min-width: 160px; padding: 3px 20px; color: #fff !important; font-size: 12px; width: 100%; background-color: #003366 !important; }
#menu .see-all, #menu .see-all:focus, #menu .see-all:hover { margin-top: 0; border-top: 1px solid #003366 !important; padding: 3px 20px; font-size: 12px; color: #fff !important; background-color: #003366 !important; text-decoration: none; }

/* Content area */
#content { min-height: 600px; }
#product-category #content,
#product-product #tab-description,
#information-information #content { font-size: 13px; }

/* Footer styling */
footer { margin-top: 30px; padding-top: 30px; background-color: #003366; border-top: 1px solid #003366; color: #003366; }
footer hr { border-bottom: 1px solid #003366; }
footer a { color: #ccc; }
footer a:hover { color: #fff; }
footer h5 { font-size: 13px; font-weight: bold; }

/* Alerts, Breadcrumbs, Pagination, Buttons */
.alert { padding: 8px 14px; }
.alert>.close { top: -2px; color: inherit; }
.breadcrumb { margin: 0 0 20px; padding: 8px 0; border: 1px solid #ddd; }
.breadcrumb li { padding: 0 20px; }
.pagination { margin: 0; }
.buttons { margin: 1em 0; }

/* Button sizes */
.btn { padding: 7.5px 12px; font-size: 12px; border-radius: 4px; }
.btn-xs { font-size: 9px; }
.btn-sm { font-size: 10.2px; }
.btn-lg { padding: 10px 16px; font-size: 15px; }
.btn-group > .btn { font-size: 12px; }
.btn-default { color: #777; }
.btn-primary { color: #fff; background-color: #229ac8; }
.btn-primary:hover, .btn-primary:active { background-color: #1f90bb; }
.btn-warning { background-color: #faa732; }
.btn-warning:hover { background-color: #e68a00; }
.btn-danger { background-color: #da4f49; }
.btn-success { background-color: #5bb75b; }
.btn-info { background-color: #df5c39; }
.btn-link { color: #23A1D1; border: none; }

/* Product Grid & Cards */
.product-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-bottom: 30px; }
.product-thumb { position: relative; flex: 1 1 calc(16.66% - 20px); max-width: calc(16.66% - 20px); display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 10px; box-sizing: border-box; }
.product-thumb:hover { box-shadow: 0 0 8px rgba(0,0,0,0.1); }

/* Badge styling */
.extrasavings-overlay {
    position: absolute;
    top: 8px;               /* Slightly lower from the top */
    left: 8px;             /* Move to the right corner */
    background-color: #003366; /* Dark blue to match your site */
    color: #fff;            /* White text for contrast */
    font-size: 0.875rem;     /* Slightly smaller text */
    font-weight: bold;
    padding: 3px 7px;       /* Compact padding */
    border-radius: 4px;     /* Soft rounded corners */
    z-index: 10;
    opacity: 0.95;          /* Slight transparency */
}

/* Image Container */
.product-thumb .image { height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.product-thumb .image img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

/* Title & Spacing */
.product-thumb .caption h4 { margin: 4px 0 2px; font-size: 14px; line-height: 1.3em; }

/* Price & Button */
.product-thumb .price { font-size: 14px; margin: 2px 0; }
.product-thumb .price-old { font-size: 13px; color: #000000; text-decoration: line-through; margin-left: 6px; }
.product-thumb .btn { font-size: 12px; padding: 4px 8px; background-color: #faa732; color: #000 !important; border: none; border-radius: 4px; margin-top: 4px; transition: background 0.2s; }
.product-thumb .btn:hover { background-color: #e68a00; color: #fff !important; }

/* Deal Info */
.product-thumb .deal-info { font-size: 11px; margin-bottom: 4px; }
.product-thumb .deal-info span { margin: 0 3px; font-weight: 600; }

/* Responsive Layout */
@media (max-width: 1200px) { .product-thumb { flex: 1 1 calc(25% - 20px); max-width: calc(25% - 20px); } }
@media (max-width: 768px) { .product-thumb { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); margin-bottom: 15px; } }
@media (max-width: 480px) { .product-thumb { flex: 1 1 100%; max-width: 100%; } }

/* Caption Layout */
.caption { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }

/* Footer background and text color */
footer, .footer {
    background-color: #003366 !important;
    color: #ffffff !important;
}

/* Footer links */
footer a, .footer a {
    color: #ffffff !important;
    text-decoration: none;
}

/* Footer links hover effect */
footer a:hover, .footer a:hover {
    color: #ffcc00 !important; /* optional gold/yellow hover color */
}
/* Footer headings */
footer h5, .footer h5 {
    color: #ffffff !important;
}