/* Variables */
:root {
    --main-color: #333;
    --hover-color: #fbbb65;
    --background-color: #f5f5f5;
    --white: #ffffff;
    --padding: 15px;
}

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s; 
    max-width: 1920px;
    margin: 0 auto;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212;
    color: white;
    max-width: 1920px;
}

/* Global Link Styling */
body.dark-mode a {
    color: white; /* Default for all links */
}

body.dark-mode a:hover {
    color: #fbbb65; /* Hover color for all links */
}

/* Exclude Header Links */
body.dark-mode .top-bar-row a,
body.dark-mode nav a {
    color: black; /* Keep header links their normal color */
}

body.dark-mode .top-bar-row a:hover,
body.dark-mode nav a:hover {
    color: black; /* Keep header links hover behavior unchanged */
}

/* Footer Styling */
body.dark-mode #footer-placeholder,
body.dark-mode .footer {
    background-color: #222 !important; /* Footer background */
    color: #ccc; /* Footer text color */
}

body.dark-mode .footer a {
    color: white; /* Links in footer turn white */
}

body.dark-mode .footer a:hover {
    color: #fbbb65; /* Footer link hover color */
}

/* Footer Legal Section */
body.dark-mode .footer-legal {
    background-color: black; /* Black background */
    color: white; /* White text */
}

body.dark-mode .footer-legal a {
    color: white; /* Links in footer-legal turn white */
}

body.dark-mode .footer-legal a:hover {
    color: #fbbb65; /* Footer-legal link hover color */
}

/* Footer Column 1 */
body.dark-mode .footer-column1 {
    color: white; /* All text inside becomes white */
}

body.dark-mode .footer-column1 a {
    color: white; /* Links inside footer-column1 turn white */
}

body.dark-mode .footer-column1 a:hover {
    color: #fbbb65; /* Footer-column1 link hover color */
}
/* Ensure modal content retains black text color in dark mode */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-content label,
body.dark-mode .modal-content p {
    color: black; /* Keep text color black */
}

body.dark-mode .modal-content a {
    color: black; /* Links default to black */
}

body.dark-mode .modal-content a:hover {
    color: #fbbb65; /* Change color on hover */
}
/* Dark Mode: Product Recommendations Section - Fixed */
body.dark-mode .product-recommendations {
    background-color: #222;
}

/* Product Recommendations: Override conflicting dark mode styles with high specificity */
.product-recommendations .product-card .product-info .product-title,
.product-recommendations .product-card h3.product-title {
    color: black !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    margin: 10px 0 !important;
    height: auto !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    white-space: normal !important;
    max-width: none !important;
}

.product-recommendations .product-card .product-info .product-description,
.product-recommendations .product-card div.product-description {
    color: #555 !important;
    font-size: 0.9rem !important;
    margin: 10px 0 !important;
    text-align: center !important;
    height: auto !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    white-space: normal !important;
    max-width: none !important;
}

/* Product Info Container - Ensure proper layout */
.product-recommendations .product-card .product-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
    overflow: visible !important;
}

/* Dark Mode: Product Prices */
body.dark-mode .product-recommendations .product-card .product-price {
    color: red; /* Highlight prices in a contrasting color */
}
/* Dark Mode: Main Content */
body.dark-mode .main-content {
    background-color: #1d1c1c;
    color: white; /* Ensure text is readable */
}
/* Dark Mode: Slideshow Section */
body.dark-mode .slideshow-section {
    background-color: #222
}
/* Dark Mode: Product Recommendations */
body.dark-mode .product-recommendations {
    background-color: #222;
}
/* Dark Mode Adjustments */
body.dark-mode #sidebarPrice,
body.dark-mode label[for="quantity"],
body.dark-mode p#selectedVariantText,
body.dark-mode span#selectedVariant {
    color: black !important; /* Ensure ALL text inside this element is black */
}

body.dark-mode .product-title {
    color: white !important; /* Ensure product title remains white in dark mode */
}
/* Dark Mode: Ensure customer dashboard text is black */
.dark-mode #customerDashboardModal {
    color: black !important;
}

/* Ensure input fields and text areas have black text */
.dark-mode #customerDashboardModal input,
.dark-mode #customerDashboardModal textarea,
.dark-mode #customerDashboardModal button,
.dark-mode #customerDashboardModal h2,
.dark-mode #customerDashboardModal h3,
.dark-mode #customerDashboardModal label {
    color: black !important;
}
body.dark-mode .product-card .product-title {
    color: black !important;
}
body.dark-mode.policy-page {
    background-color: #121212 !important;
    color: white !important;
}
body.dark-mode .social-media img[alt="Twitter"] {
    content: url("./images/XLogoWhite.png");
}

body:not(.dark-mode) .social-media img[alt="Twitter"] {
    content: url("./images/XLogoBlack.png");
}


.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.order-table th, .order-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.order-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}



#theme-toggle {
    position: absolute;
    right: 10px; /* Adjust the distance from the right edge */
    top: 50%; /* Vertically center relative to the nav */
    transform: translateY(-50%); /* Adjust for perfect centering */
    padding: 10px 20px; /* Add padding for better appearance */
    font-size: 14px; /* Adjust font size */
    background-color: #333; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease;
}

#theme-toggle:hover {
    background-color: #fbbb65; /* Change background color on hover */
}
.main-nav {
    position: relative; /* Ensure the nav is the positioning context */
    display: flex;
    justify-content: center; /* Keep the nav links centered */
    align-items: center;
    padding: 10px;
}

/* Flex layout for top-bar to align left and right columns */
.top-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background-color: rgba(128, 128, 128, 0.2);
    background: linear-gradient(to top, #ffffff, #c2c2c2); /* More contrast between colors */

}
/* Ensure all scrollbar components are hidden */
.search-results::-webkit-scrollbar {
    width: 0; /* Completely hide the scrollbar */
    height: 0; /* For horizontal scrollbars */
}

.search-results::-webkit-scrollbar-button,
.search-results::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-track {
    display: none;
}

.search-results {
    display: none; /* Default state: hidden */
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    color: black;
    border-top: 1px solid #ccc;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    box-sizing: border-box;
}




.search-input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
    position: relative; /* Ensure the search-results aligns properly */
    z-index: 1; /* Make sure the input is above other elements */
}

/* Ensure the search bar has adequate width */
.search-form {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Adjust to make the search bar wider */
    border: 1px solid #ddd;
    border-radius: 25px;
    overflow: hidden;
    background-color: #f3f3f3;
}

.search-results.active {
    display: block; /* Show when input is focused or active */
    position: absolute; /* Position relative to the page or parent */
    max-width: 1100px; /* Limit the width to match the search bar */
    width: 100%; /* Ensure responsiveness */
    text-align: center; /* Center the text */
    margin: 0 auto; /* Center within the page */
    background: white; /* Optional: Background color for dropdown */
    border: 1px solid #ccc; /* Optional: Border styling */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Shadow for aesthetics */
    z-index: 1000; /* Ensure it stays above other elements */
    border-radius: 10px; /* Optional: Add rounded corners */
    padding: 10px; /* Add some padding for spacing */
    color: black;
}

.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent black background */
}

.result-left {
    display: flex;
    align-items: center;
}

.result-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
}

.result-info {
    flex: 1;
}

.result-price {
    font-weight: bold;
    color: green;
}

.result-name {
    font-size: 16px;
    margin: 0;
}

.result-description {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.no-results {
    padding: 10px;
    text-align: center;
    color: #999;
}


.purchase-history {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
}

.purchase-history h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}


/* Center content within the container */
.container {
    max-width: 1990px;
    margin: 0 auto;    
}
.container a {
    padding: 0px 10px;
}

/* Flex layout for the header main section */
.header-row {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Logo section with 10% space */
.col-logo {
    flex: 0 0 10%;
    display: flex;
    justify-content: flex-start;
}

.logo-image {
    max-height: 100px;
    height: auto;
    margin: 0 auto;
}
.category-dropdown {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
/* Search section to take up remaining space */
.col-search {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Form inside search section should also be flex */
.col-search form,
.col-search .search-form {
    display: flex;
    width: 100%;
    max-width: 600px;
}

/* Input field styling */
.search-input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

/* Search button styling */
.search-button {
    background-color: #fbbb65;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* Cart section with 10% space */
.col-cart {
    flex: 0 0 10%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Styling for cart info */
.cart-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    padding: 25px 25px;
    font-size: x-large;
}

.cart-icon {
    width: 50px;
    height: auto;
}

.cart-count {
    background-color: #fbbb65;
    color: #fff;
    border-radius: 50%;
    padding: 5px 10px;
    font-size: large;
}

/* Service and Account Links Styling */
.service-links, .account-links {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0 10px;;
    padding: 0;
    font-size: 12px;
}

.service-links a, .account-links a {
    color: black;
    text-decoration: none;
}

.service-links a:hover, .account-links a:hover {
    color: maroon;
}
/* Main navigation styling */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 60px; /* Add horizontal padding to account for hamburger and theme toggle */
    position: relative;
    background: linear-gradient(to bottom, #ffffff, #c2c2c2); /* More contrast between colors */
    border: 1px solid #c0c0c0; /* Light gray border for the "edge" */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), /* Stronger top inset shadow */
                0 4px 8px rgba(0, 0, 0, 0.4); /* Larger shadow below */
}


/* Hamburger: mobile-only; sits above the full-width menu-list hit target */
.hamburger-menu {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* shown in @media max-width: 800px */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    z-index: 30;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
}

.hamburger-menu span {
    display: block;
    height: 3px;
    width: 26px;
    background-color: #111;
    border-radius: 1px;
    transition: 0.3s;
}

body.dark-mode .hamburger-menu span {
    background-color: #f0f0f0;
}

/* Dropdown menu styling (initially hidden) */
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu ul li a {
    color: black; /* Black text for dropdown links */
    text-decoration: none;
    display: block;
    padding: 8px 0;
}

/* Display dropdown when active */
.dropdown-menu.show {
    display: block;
}

/* Styling the menu list to align items in a single row and center */
.menu-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    gap: 20px; /* Space between the links */
    width: 100%;
    position: relative;
    z-index: 1;
}
a:hover {
    color: #fbbb65 !important;
}
/* Styling for each link */
.menu-list li a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 12px;
    transition: color 0.3s ease;
}

.menu-list li a:hover {
    color: var(--hover-color); /* Changes color on hover */
}
/* Sidebar overlay styling */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: var(--white);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    transform: translateX(-100%); /* Move it off-screen by default */
}
#sidebar-greeting {
    padding: 20px;
}

/* Sidebar visible when active */
.sidebar.active {
    transform: translateX(0); /* Slide in when active */
}

/* Sidebar header styling */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    margin-bottom: 20px;
}

.sidebar-header .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Sidebar menu styling */
.sidebar-menu {
    flex: 1; /* Allows menu content to take up remaining space */
    overflow-y: auto; /* Enables scrolling only when content exceeds height */
    padding-bottom: 10px; /* Prevents overlap with sticky footer */
    list-style: none;

}

.sidebar-menu li {
    padding: 10px 0;
    font-size: 16px;
}

.sidebar-menu li strong {
    font-size: 18px;
    color: var(--main-color);
    display: block;
    margin-top: 15px;
}

.sidebar-menu li a {
    color: var(--main-color);
    text-decoration: none;
    display: block;
    padding: 0 0;
    transition: color 0.3s;
}

.sidebar-menu li a:hover {
    color: var(--hover-color);
}
.sidebar-social {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding-top: 10px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Adjustments for sticky login */
.sidebar-social .stickyLogin {
    margin-top: 10px; /* Space between the social icons and login link */
    background-color: #121212;
}

.sidebar-social .social-icons img {
    width: 24px;
    height: 24px;
    margin: 0 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.sidebar-social .social-icons img:hover {
    transform: scale(1.1);
}
.stickyLogin {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    padding: 10px; /* Ensures enough spacing */
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    transition: transform 0.2s, background-color 0.3s;
    color: var(--white);
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.stickyLogin a {
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center; /* Ensures text is vertically centered */
    justify-content: center; /* Ensures text is horizontally centered */
    width: 100%; /* Makes the link take full width */
    height: 100%; /* Ensures it fills the `.stickyLogin` container */
}

.stickyLogin:hover {
    transform: scale(1.025);
    color: #fbbb65; /* Lighter shade on hover */
}

/* Main content area styling */
.main-content {
    padding: 20px;
    background-color: var(--background-color);
}
.slideshow-section {
    position: relative;
    width: 100%;
    height: 50vh; /* Adjusts based on viewport height */
    margin: auto;
    overflow: hidden;
}

.slideshow img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Ensures images fully cover the container */
    position: absolute; /* Keeps images positioned properly */
    top: 0;
    left: 0;
    display: none;
    transition: opacity 1s ease-in-out;
}
.slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}
.slideshow img.visible {
    display: block;
    opacity: 1;
}
/* Footer — normal document flow (not sticky/fixed); appears after page content */
#footer-placeholder {
    position: static;
    display: block;
    width: 100%;
    clear: both;
    margin-top: 0;
}

.footer {
    position: static;
    background-color: #232f3e;
    color: #ffffff;
    padding-top: 20px;
    font-family: Arial, sans-serif;
    width: 100%;
}
.footer a {
    color: #dddddd;
    text-decoration: none;
    transition: color 0.3s;
}

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

/* Footer top section with link groups */
.footer-top {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    width: 95%;
    max-width: 1200px;
}

.footer-column {
    flex: 1;
    padding: 0 15px;
    width: 100%;
    line-height: 1.75;
}

.footer-column h4 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: bold;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column1 ul li {
    margin-bottom: 8px;
}
.footer-column1 {
    flex: 1;
    padding: 0 15px;
    font-size: 14px;
    line-height: 1;
}

.footer-column1 h4 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: bold;
}

.footer-column1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column1 ul li {
    margin-bottom: 8px;
}

/* Footer bottom with logo and settings */
.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid #3a4553;
}

.footer-logo img {
    width: 100px;
    margin-right: 20px;
}

.footer-settings a {
    color: #dddddd;
    margin: 0 10px;
}

/* Footer legal section */
.footer-legal {
    background-color: #131a22;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    border-top: 1px solid #3a4553;
}

.footer-legal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-legal ul li {
    display: inline;
}
/* Basic styles for the modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.modal3 {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    margin-top: 10%;
    width: 100%;
    height: 40%;
    
}
.modal-header {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.modal-content button {
    margin-top: 15px;;
}
/* Center the modal on the screen */
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin: auto auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: linear-gradient(to top, #ffffff, #d0d0d0); /* More contrast between colors */

}

.modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
}


/* Form styling */
#loginForm, #registerForm {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#loginForm label, #registerForm label {
    font-weight: bold;
    margin-bottom: 5px;
}

#loginForm input, #registerForm input {
    padding: 5px;
    margin-bottom: 10px;
    width: calc(100% - 10px);
}

.password-field {
    position: relative;
    width: 100%;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 7px;
    cursor: pointer;
}

/* Center Sign In and Register buttons */
#loginForm button, #registerForm button {
    width: 100%;
    padding: 8px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

#loginForm p, #registerForm p {
    text-align: center;
    margin-top: 15px;
}
.validation-field {
    position: relative;
    width: 100%;
}

.validation-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.validation-icon.success {
    color: green;
    content: "✔️";
}

.validation-icon.error {
    color: red;
    content: "❌";
}

#successModal .modal-content {
    text-align: center;
    font-size: 1.5rem;
}
.feedback {
    color: red;
    font-size: 0.8em;
    display: none;
}

#password-strength {
    height: 5px;
    background: lightgray;
    margin-top: 5px;
}

#password-strength[data-strength="weak"] {
    background: red;
    width: 33%;
}

#password-strength[data-strength="medium"] {
    background: orange;
    width: 66%;
}

#password-strength[data-strength="strong"] {
    background: green;
    width: 100%;
}

.terms {
    margin-top: 15px;
}

button:disabled {
    background-color: grey;
    cursor: not-allowed;
}
.forgot-password {
    font-size: 0.9em; /* Smaller font size */
    text-align: center;
    margin-top: 10px;
}

.forgot-password a {
    color: blue;
    text-decoration: underline;
}
#signedInStatus {
    text-align: center;
    margin-top: 0px;
}

.sign-out-link {
    color: red;
    text-decoration: underline;
    display: block;
    margin-top: 5px;
    cursor: pointer;
}
/* Styling for the checkout sidebar */
.snipcart-checkout {
    cursor: pointer;
}

/* Styling for the checkout sidebar */
.checkout-sidebar {
    max-width: 30%;
}
/* Ensure the main container is flexible */
.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* Ensure Image Gallery & Product Details Take Up Space */
.image-gallery, .product-details {
    flex: 1;
    max-width: 600px; /* Prevents images from getting too large */
    left: 0;
}

/* Responsive Images */
.main-image {
    width: 100%;
    max-width: 500px; /* Set a limit for large screens */
    height: auto;
    object-fit: cover;
}

.thumbnail {
    width: 80px; /* Adjusted size for smaller screens */
    height: auto;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
}

/* Ensure Thumbnail Row is Responsive */
.thumbnail-row {
    display: flex;
    gap: 5px;
    overflow-x: auto;
}

/* Sidebar default width */
.checkout-sidebar {
    width: 300px;
    min-width: 250px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 1024px) {
    .container2 {
        flex-wrap: wrap; /* Allow stacking on smaller screens */
        justify-content: center;
    }

    .image-gallery {
        width: 100%; /* Full width for better mobile experience */
        text-align: center;
    }

    .product-details {
        width: 100%;
        left: 0;
    }

    /* Sidebar moves below product details on smaller screens */
    .checkout-sidebar {
        width: 100%;
        max-width: 100px;
        margin-top: 20px;
        position: relative;
    }
}

/* Adjustments for very small screens */
@media (max-width: 800px) {
    .checkout-sidebar {
        width: 100%;
        max-width: 300px;
        padding: 10px 15px;
    }
    .hamburger-menu {
        display: flex;
    }
    .menu-list {
        display: none;
    }
    .main-nav {
        padding: 10px 56px;
        min-height: 48px;
    }
    #theme-toggle {
        font-size: 12px;
        padding: 8px 10px;
        right: 8px;
    }
    .slideshow-section{
        height: 20vh;
        padding: 15px;
    }
    .slideshow img {
        object-fit: fill;
        left: -3vw;
    }
}
/* Responsive Adjustments */
@media (max-width: 670px) {
    .header-row {
        justify-content: center;
        text-align: center;
    }
    @media (max-width: 768px) {
        .footer-links {
            width: 100vw;
            align-items: center;
            text-align: center;
        }
    
        .footer-column, .footer-column1 {
            width: 100%; /* Make columns take full width */
            max-width: 400px;
        }
    }
    
    @media (max-width: 480px) {
        .footer-links {
            flex-direction: column;
            flex-shrink: calc(90% - 1); /* Allow wrapping */
            justify-content: center;
            padding: 10px;
            gap: 10px;
        }
    
        .footer-column h4, .footer-column1 h4 {
            font-size: 12px;
        }
    
        .footer-column ul li, .footer-column1 ul li {
            font-size: 12px;
        }
    }
    /* Logo Moves Above */
    .col-logo {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        flex-wrap: nowrap;
    }
    .col-search {
        display: none;
    }
    /* Search Bar & Cart Stay in One Row */
    .col-search, .col-cart {
        flex: 1;
        max-width: 100%;
    }

    .search-input {
        max-width: 100%; /* Ensures full width on mobile */
    }

    .cart-summary {
        justify-content: center;
    }
}
.snipcart-modal__container {
    max-width: 80% !important;
    left: 10% !important; /* Center horizontally */
    right: auto !important;
}

/* Center the cart on larger screens */
@media (min-width: 1024px) {
    .snipcart-modal__container {
        max-width: 80%;
        left: 10% !important; /* Centered */
        right: auto !important;
    }
}
.snipcart-item-line__media img {
    width: 50px; /* Adjust as needed */
    height: auto;
    margin-right: 10px;
}
.snipcart-summary-fees__amount, 
.snipcart-summary-fees__title, 
.snipcart-summary__total, 
.snipcart-summary__title {
    color: #333 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.snipcart-cart-header__title, 
.snipcart-checkout__title {
    color: #222 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}
.snipcart-item-line__container {
    border-bottom: 1px solid #ddd !important;
}

.snipcart-summary__content {
    border-top: 2px solid #ddd !important;
    padding-top: 10px !important;
}
.snipcart-button-primary {
    background-color: #007bff !important;
    color: #fff !important;
    border: 1px solid #007bff !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.3s ease-in-out !important;
    width: 90%;
}

.snipcart-button-primary:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #f5c43c !important;

}
.snipcart-base-button__wrapper {
    display: flex;
    align-items: center;   /* Aligns items vertically */
    justify-content: center; /* Centers the text */
    position: relative;
    width: 100%;
}

.snipcart-base-button__label {
    flex: 1;               /* Ensures text occupies available space */
    text-align: center;    /* Keeps text centered */
}

.snipcart-base-button__icon {
    position: absolute;
    right: 15px;  /* Adjust spacing if needed */
    top: 50%;
    transform: translateY(-50%); /* Centers the icon vertically */
    display: flex;
    align-items: center;
}
.snipcart-button-secondary {
    background-color: #f8f9fa !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}
.snipcart-summary-fees__total {
    text-align: center; /* Centers text */
    display: flex;
    flex-direction: column; /* Stacks title and amount */
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    padding-bottom: 15px !important; /* Adds spacing below */
    width: 90%; /* Ensures it spans the full width */
    max-width: var(--snipcart-button-width, 100%); /* Matches Checkout button width */
}

.snipcart-form__input, 
.snipcart-input {
    border: 1px solid #ccc !important;
    background-color: #fff !important;
    color: #333 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
}

.snipcart-form__input:focus, 
.snipcart-input:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important;
}
.snipcart-featured-payment-methods__link {
    color: black !important;
    text-decoration: none !important;
}
/* Ensure input fields have visible borders */
.snipcart-form__input, 
.snipcart-form__select, 
.snipcart-form__select:focus, 
.snipcart-form__input:focus {
    border: 1px solid #ccc !important; /* Light gray border */
    border-radius: 4px; /* Keeps consistency with other fields */
    background-color: #fff; /* Ensures background is white */
}

/* Ensure dropdown (select fields) have a border */
.snipcart-form__select {
    appearance: none; /* Removes default browser styles */
    padding: 8px;
}

/* Fix dropdown alignment issues */
.snipcart-form__select-wrapper {
    border: 1px solid #ccc !important;
    border-radius: 4px;
    background-color: #fff;
}

/* Ensure the Province/State and Country dropdowns look consistent */
.snipcart-form__select-wrapper select {
    width: 100%;
    padding: 8px;
}
/* Ensure the total and secured payment section align properly */
.snipcart-summary-fees__total, 
.snipcart-payment {
    display: flex;
    justify-content: space-between; /* Aligns elements to edges */
    align-items: center; /* Centers vertically */
    width: 100%;
}

/* Adjusts the Secured by Snipcart section */
.snipcart-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

/* Aligns the text and payment icons in a row */
.snipcart-featured-payment-methods__link {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust space between icon and text */
}

/* Ensure the Total price stays aligned */
.snipcart-summary-fees__amount {
    font-weight: bold;
    font-size: 1.2em; /* Adjust for better visibility */
}

/* Ensures payment icons (Visa, Mastercard) are properly sized */
.snipcart-featured-payment-methods img {
    width: 40px; /* Adjust icon size */
    height: auto;
}

.modal2 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 0; /* Remove extra padding */
    width: 100%;
    max-width: 900px;
    height: 80%;
    overflow: hidden; /* Prevent scroll overlap */
}

.modal2.active {
    display: block; /* Show modal when active */
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 48px;
    cursor: pointer;
    font-weight: bolder;
}
.modal-content2 {
    padding: 20px;
    overflow-y: auto; /* Allow scroll for content overflow */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Modal2 content box */
.modal2 .modal-content2 {
    position: relative;
    margin: auto;
    background-color: white;
    padding: 20px;
    width: 95%; /* Adjust width to fit your layout */
    height: 95%; /* Adjust height for screen */
    top: 50%;
    transform: translateY(-50%);
    border-radius: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dashboard-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.dashboard-sidebar {
    width: 100%;
    max-width: 300px;
    background-color: #f9f9f9;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

.dashboard-main {
    width: 100%;
    text-align: center;
}

.order-entry {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.order-entry h4 {
    margin: 5px 0;
}

.order-entry p {
    margin: 2px 0;
    color: #555;
}

.order-entry .action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.order-entry .action-buttons button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.track-button {
    background-color: #007bff;
    color: white;
}

.return-button {
    background-color: #dc3545;
    color: white;
}

.breadcrumb-item {
    display: none;
}
#signInLink a {
    color: black;
    text-decoration: none;
}

#signInLink a:hover {
    color: maroon;
    cursor: pointer;
}

/* Nav Links */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.menu-list li {
    position: relative;
}

.menu-list a {
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
}

.dropdown-menu {
    top: 100%; /* Aligns the dropdown directly below the nav link */
    left: 0; /* Aligns the dropdown with the left edge of the parent */
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Ensure the dropdown appears above other content */
}

.dropdown-menu li {
    width: 150px;
    text-align: left;
}

.dropdown-menu a {
    display: block;
    padding: 5px 15px;
    color: black;
    text-decoration: none; 
}

.dropdown-menu a:hover {
    background-color: #f0f0f0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}
h1 {
    text-align: center;
    margin-top: 30px;
}
.filter-container {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}
.filter-select {
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    height: 100%;
}
.policy-page {
    margin: 0 auto;
}
.policy-page main {
    width: 90%;
    margin: 0 auto;
}


.carousel-container {
    position: relative;
    width: 100%; /* Full width of the section */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align navigation arrows */
    overflow: hidden; /* Hide items outside the visible area */
}
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: black;
    border: none;
    border-radius: 10%;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-button.left {
    left: 0px;
    height: 100px;
    color: #fbbb65;
}

.carousel-button.right {
    right: 0px;
    height: 100px;
    color: #fbbb65;
}

.carousel-button:hover {
    background-color:#fbbb65 ;
    color: black;
}

.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out child elements */
    align-items: center; /* Center align all elements */
    text-align: center; /* Center-align the text */
    width: 300px; /* Set a consistent width */
    height: 90%;
    padding: 15px; /* Add internal padding */
    background-color: #fff; /* Ensure a uniform background */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    gap: 10px; /* Space between internal elements */

}
.product-card:hover {
    border: 1px solid black;
    cursor: pointer;
    transform: translateY(-7px); /* Lift slightly on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.product-image {
    width: auto;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    overflow-y: hidden;
}

.product-title {
    font-size: 1rem;
    font-weight: bold;
    margin: -5px 0 10px 0;
    height: auto;
    overflow: hidden;
    color: black;
    line-height: 1.3;
    word-wrap: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}
.product-price {
    color: #b12704;
    font-weight: bold;
    margin: 5px 0;
}
.product-description {
    font-size: 0.9rem;
    color: #555;
    margin: 10px 0;
    text-align: center;
    height: auto;
    overflow: hidden;
    line-height: 1.4;
    word-wrap: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding: 0 10px;
    box-sizing: border-box;
}


.product-section {
    flex: 1;
    min-width: 300px;
    background-color: var(--white);
    padding: var(--padding);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto; /* Allow the section to adjust height */
}

.product-section h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.product-item {
    border: 1px solid #ddd;
    padding: 10px;
    width: 200px; /* Consistent width for product cards */
    text-align: center;
    display: none; /* Hide initially until image is loaded */
    box-sizing: border-box;
    background-color: #fff;
}

.product-item img {
    width: 100%;
    max-width: 90%;
    padding-bottom: 15px;
    border-radius: 5px;
    transition: transform 0.3s;
}

.product-item img:hover {
    transform: scale(1.1);
}

.product-item p {
    font-size: 14px;
    color: #555;
    margin-top: 8px;
}



.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    justify-content: start;
    align-items: start;
    gap: 16px;
    overflow: visible;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 5px;
    height: auto;
    max-height: none;
    position: relative;
    min-width: 0;
}
.carousel-container {
    height: auto;
    width: 100%;
}
.no-products, .no-history {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(145deg, #e6e6e6, #b3b3b3);
    border-radius: 10px;
    color: #333;
    font-size: 1.4rem;
    font-weight: bold;
    position: absolute; /* Allow the fallback message to take over the grid */
    top: 0;
    left: 20px;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1; /* Ensure it appears above other content */
    padding: 15px;
}
.product-recommendations {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 28px;
    margin: 24px auto 48px;
    width: 100%;
    max-width: 1200px;
    align-items: stretch;
}


.product-grid-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    justify-content: start;
    gap: 16px;
    overflow: visible;
    padding: 10px;
    white-space: normal;
}
.product-grid-recommendations p {
    display: block;
    white-space: normal;
}
.product-grid-recommendations h3 {
    display: block;
    white-space: normal;
    height: auto;
}
#top-products, #recently-viewed, #customer-interest {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 20px;
    background: #f9f9f9;
    gap: 16px;
    height: auto;
    min-height: 0;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}
#sidebar-greeting {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.main-nav {
    position: relative; /* Ensure the nav is the positioning context */
    display: flex;
    justify-content: center; /* Keep the nav links centered */
    align-items: center;
    padding: 10px;
}
/* Container for both buttons */
.button-group {
    display: flex;
    flex-direction: column; /* Align buttons vertically */
    align-items: center;
    gap: 10px; /* Space between buttons */
    width: 100%; /* Make sure both buttons take full width */
}

/* Common button styling */
.product-button {
    width: 100%; /* Make both buttons take up the full width */
    height: 45px; /* Ensure same height */
    font-size: 16px; /* Ensure consistent font size */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* Add to Cart Button */
#addToCartButton {
    background-color: #e60023;
    color: white;
    width: 100%;
    height: 5vh;
    margin-top: 1vh;
}

/* Buy Now Button */
#buyNowButton {
    background-color: #ffcc00;
    color: rgb(37, 36, 36);
    height: 5vh;
}

/* Hover Effects - Slight Enlargement */
#addToCartButton:hover, #buyNowButton:hover {
    transform: scale(1.05); /* Slightly enlarges the button */
    transition: transform 0.2s ease-in-out; /* Smooth animation */
}

/* Optional: Change text color on hover */
#addToCartButton:hover {
    color: #e6b800;
}

#buyNowButton:hover {
    color: white;
}
/* Contact Us Page */
/* Center the contact section */
.contact {
    max-width: 800px;
    margin: 0 auto;

}

/* Improve Contact Info Alignment */
.contact-options ul {
    list-style: none;
    padding: 0;
}

.contact-options ul li {
    font-size: 1.1em;
    margin: 10px 0;
}

/* Styling for input fields */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

/* Contact Form Button */
.contact-form button {
    width: 100%;
    background-color: #fbbb65;
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: #e69a50;
}

/* Center and Style Social Media Icons */
.social-media ul {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0;
}

.social-media ul li {
    list-style: none;
}

.social-media ul li a img {
    width: 40px;
    height: auto;
    transition: transform 0.3s;
}

.social-media ul li a img:hover {
    transform: scale(1.1);
}

/* ===== FORM VALIDATION STYLES ===== */

/* Error messages */
.error-message {
    color: #e74c3c;
    font-size: 0.9em;
    margin-top: 5px;
    display: none;
    font-weight: 500;
}

/* Form status messages */
.form-status {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    border-radius: 8px;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 8px;
}

/* Input validation states */
input:invalid, textarea:invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

input:valid, textarea:valid {
    border-color: #27ae60;
    box-shadow: 0 0 5px rgba(39, 174, 96, 0.3);
}

/* Improve form field styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #fbbb65;
    box-shadow: 0 0 8px rgba(251, 187, 101, 0.4);
}

.form-group button {
    background-color: #fbbb65;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.form-group button:hover {
    background-color: #f9a842;
    transform: translateY(-2px);
}

.form-group button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Character counter (future enhancement) */
.char-counter {
    font-size: 0.8em;
    color: #666;
    text-align: right;
    margin-top: 5px;
}

/* Review Links */
.review-link {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.review-link:hover {
    color: #fbbb65;
    text-decoration: underline;
}

.product-recommendations .review-link {
    color: #666 !important;
}

.product-recommendations .review-link:hover {
    color: #fbbb65 !important;
    text-decoration: underline;
}

/* Trust Badges - Legal Replacement for Reviews */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 15px;
    border: 1px solid #e9ecef;
    font-size: 0.8rem;
    color: #555;
    text-decoration: none;
}

.trust-badge:hover {
    background: #e9ecef;
    color: #333;
}

.trust-badge-icon {
    font-size: 0.9rem;
}

.product-quality-indicator {
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin: 5px auto;
    text-align: center;
    width: fit-content;
}

.product-guarantee {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #666;
    justify-content: center;
}