:root {
    --bg-header: #131921;
    --text-white: #ffffff;
    --accent-orange: #febd69;
    --btn-primary: #f0c14b;
    --btn-primary-hover: #ddb347;
    --bg-body: #eaeded;
    --text-color: #111;
    --card-bg: #fff;
}

body {
    margin: 0;
    font-family: "Amazon Ember", Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-color);
}

body.dark-mode {
    --bg-header: #050a10;
    --bg-body: #020205; /* Deep void black */
    --card-bg: #0a0a12;
    --text-color: #e0faff; /* Cyan-tinted white */
    --btn-primary: #ff0055; /* Cyberpunk Neon Pink */
    --btn-primary-hover: #d40047;
    --accent-orange: #00f3ff; /* Z-Tech Blue/Cyan shift */
    --text-white: #00f3ff; /* Neon headers */
}

/* Cyberpunk Mode Overrides */
body.dark-mode header {
    border-bottom: 2px solid #00f3ff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

body.dark-mode .sub-header {
    background-color: #030303 !important;
    border-bottom: 1px solid #333;
    color: #ff0055;
}

body.dark-mode .product-card {
    border: 1px solid #333;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.1);
    transition: all 0.3s ease;
}

body.dark-mode .product-card:hover {
    border-color: #00f3ff;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
    transform: translateY(-5px);
}

body.dark-mode .product-card img {
    background-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
}

body.dark-mode .search-bar {
    background-color: #111;
    border: 1px solid #00f3ff;
}
body.dark-mode .search-bar input {
    background-color: #111;
    color: #00f3ff;
    border: none;
}
body.dark-mode .search-scope {
    background-color: #222;
    color: #00f3ff;
    border-right: 1px solid #333;
}
body.dark-mode .search-button {
    background-color: #00f3ff !important;
}

body.dark-mode .product-card h3 {
    color: #00f3ff;
    text-shadow: 0 0 2px rgba(0, 243, 255, 0.5);
}

body.dark-mode .product-card .price {
    color: #ff0055 !important;
    text-shadow: 0 0 5px rgba(255, 0, 85, 0.5);
    font-family: 'Courier New', monospace; /* Tech feel */
}

body.dark-mode .add-btn {
    border-color: #ff0055;
    background-color: rgba(255, 0, 85, 0.1);
    color: #ff0055;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
body.dark-mode .add-btn:hover {
    background-color: #ff0055;
    color: #000;
    box-shadow: 0 0 15px #ff0055;
}

header {
    background-color: var(--bg-header);
    color: var(--text-white);
    padding: 0 10px; /* Reduced padding */
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced gap */
    height: 60px;
    white-space: nowrap;
}

.nav-left {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo {
    display: flex;
    align-items: flex-end; /* Align logo text to baseline */
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid transparent;
    height: 100%;
    box-sizing: border-box;
}
.logo:hover { border-color: white; }


.logo-z { font-size: 1.8rem; font-weight: 800; color: white; }
.logo-tech { font-size: 1.5rem; font-weight: bold; color: white; }
.logo-supply { font-size: 0.9em; color: #ccc; margin-left: 2px; align-self: center; }

/* Location Box */
.nav-location {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    margin-right: 10px;
}
.nav-loc-icon { font-size: 1.2rem; margin-right: 2px; color: white; }
.nav-loc-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-loc-text small { font-size: 0.75rem; color: #ccc; margin-left: 2px; }
.nav-loc-text strong { font-size: 0.9rem; font-weight: 700; color: white; }

/* Flex fill for search */
.nav-fill {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Center search in available space? accessing Amazon does fill */
    margin: 0 10px;
}

.search-bar {
    display: flex;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background-color: white;
}
.search-bar:focus-within {
    box-shadow: 0 0 0 2px #f90, 0 0 0 3px rgba(255, 153, 0, 0.5); /* Amazon-like focus ring */
}

.search-scope {
    background-color: #f3f3f3;
    color: #555;
    padding: 0 5px 0 10px;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    cursor: pointer;
    border-right: 1px solid #cdcdcd;
    border-radius: 4px 0 0 4px;
    flex-shrink: 0; /* Prevent squashing */
}
.search-scope:hover { background-color: #dadada; color: black; }

.scope-arrow {
    font-size: 0.55rem;
    margin-left: 4px;
    margin-top: 2px; /* Visual balance */
    color: #555;
}

.search-bar input {
    flex-grow: 1;
    padding: 0 10px;
    border: none;
    outline: none;
    font-size: 1rem;
    line-height: normal; /* Fix alignment */
    border-radius: 0;
}

.search-button {
    background-color: var(--accent-orange);
    border: none;
    width: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 0 4px 4px 0;
}

/* Nav Right Items */
.nav-right {
    display: flex;
    align-items: center;
    gap: 5px; /* Tighter gap */
}

/* Base style for all right nav items */
.nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center; /* center vertically */
    padding: 8px 9px;
    cursor: pointer;
    color: white;
    line-height: 1.1;
    height: 44px; /* fixed height for hover box */
    box-sizing: border-box;
}

.nav-item small { font-size: 0.75rem; color: #ccc; }
.nav-item strong { font-size: 0.9rem; font-weight: 700; }

.hover-border {
    border: 1px solid transparent;
    border-radius: 2px;
}
.hover-border:hover {
    border-color: white;
}

/* Cart Specifics */
.nav-item.cart {
    flex-direction: row;
    align-items: flex-end;
    gap: 2px;
}
.cart-icon-container {
    position: relative;
    width: 38px;
    height: 30px;
}
.cart-icon {
    font-size: 2.2rem;
    position: absolute;
    bottom: -5px; /* Adjust to look like the cart sits on line */
    left: 0;
    color: white;
}
.cart-count {
    position: absolute;
    left: 17px; /* Center perfectly over cart body */
    top: 0;
    color: var(--accent-orange);
    font-weight: bold;
    font-size: 1rem;
    z-index: 2; /* Ensure visibility over icon */
    text-shadow: 1px 1px 0 #000; /* Contrast */
}

/* Sub Header */
.sub-header {
    background-color: #232f3e;
    color: white;
    padding: 0 0 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    height: 40px;
}

.sub-nav-left, .sub-nav-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.sub-header span {
    cursor: pointer;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    font-weight: 500;
}

/* Remove the old underline hover and use border */
/* .sub-header span:hover { text-decoration: underline; color: var(--accent-orange); } */
/* Replaced by hover-border class usage in HTML */

.theme-toggle {
    background: none;
    border: 1px solid #777;
    color: #ccc;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 0.8rem;
}
.theme-toggle:hover { border-color: white; color: white; }

.menu-trigger { font-weight: bold; }

/* Special offer styling */
#special-offer {
    font-weight: bold;
    color: #fff; /* or match the screenshot text color? Usually white */
    margin-right: 20px;
}


.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    justify-content: center;
}

.product-card {
    background-color: var(--card-bg);
    padding: 15px; /* Reduced padding to squish slightly */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Fill the grid cell height instead of fixed pixel height */
    min-height: 460px; /* Ensure enough height for square image + content */
    animation: fadeIn 0.5s ease-in;
    position: relative;
    z-index: 1; /* Ensure card is above background but below modal */
}

.product-card img {
    width: 100%;
    /* Keep it in the square format */
    aspect-ratio: 1 / 1;
    object-fit: cover; 
    margin-bottom: 10px;
    background-color: white; /* Ensure images have white bg if transparent */
    padding: 5px;
}

.product-card h3 {
    font-size: 1.1rem;
    margin: 5px 0;
    line-height: 1.3em;
    max-height: 2.6em;
    overflow: hidden;
}

.product-card .desc {
    font-size: 0.85rem;
    color: #565959;
    flex-grow: 1;
    overflow: hidden;
    margin-bottom: 10px;
}

.product-footer {
    margin-top: auto;
}

.product-card .price {
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.add-btn {
    background-color: var(--btn-primary);
    border: 1px solid;
    border-color: #a88734 #9c7e31 #846a29;
    width: 100%;
    padding: 8px;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 500;
}

.add-btn:hover {
    background-color: var(--btn-primary-hover);
}

/* Cart Modal */
#cart-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}

#cart-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    padding: 20px;
    width: 90%;
    max-width: 500px;
    z-index: 999;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    max-height: 80vh;
    overflow-y: auto;
}

#cart-modal h2 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}


/* --- Home Layout Overhaul --- */
.main-body {
    max-width: 100%;
    background-color: var(--bg-body);
    min-height: 100vh;
    padding-bottom: 50px;
}

.hero-banner {
    width: 100%;
    height: 600px;
    background: linear-gradient(to bottom, #232f3e, #eaeded); /* Dark blue to body gray */
    position: relative;
    z-index: 0;
    margin-bottom: -350px; /* Allow cards to overlap */
}

.home-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.home-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.home-card {
    background: var(--card-bg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 420px;
    box-sizing: border-box;
    cursor: pointer;
}

.home-card h3 {
    margin-top: 0;
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.card-img-single {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
}

.card-img-single img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

/* Specific styling for signin card */
.sign-in-card {
    justify-content: space-between;
}
.signin-ad {
    flex-grow: 1;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.card-link {
    text-decoration: none;
    color: #007185;
    font-size: 0.9rem;
}
.card-link:hover {
    text-decoration: underline;
    color: #c7511f;
}

.product-feed-header {
    background: var(--card-bg); /* Use card-bg (white/dark) */
    padding: 15px;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
    margin-top: 20px;
    color: var(--text-color);
}

.btn-signin {
    width: 100%;
    padding: 8px;
    background: var(--btn-primary);
    border: 1px solid #a88734;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
}
.btn-signin:hover { background: var(--btn-primary-hover); }

/* Ensure regular product grid plays nice */
#product-grid {
    /* clear old container margins if any */
    margin: 0;
}


/* Fix for Dark Mode Hero Banner */
body.dark-mode .hero-banner {
    background: linear-gradient(to bottom, #050a10, #020205);
}

/* Fix for Review Section Background */
.review-box {
    background: #f9f9f9;
    /* other styles from inline were: padding:15px; border-radius:4px; margin-bottom:20px; */
    /* kept the padding/margin inline in JS for now to verify layout, but background was the issue. */
}

body.dark-mode .review-box {
    background: #111 !important;
    border: 1px solid #333;
    color: var(--text-color);
}
body.dark-mode .review-box h4 {
    color: var(--text-white);
}
body.dark-mode .review-box textarea {
    background: #222;
    color: var(--text-color);
    border: 1px solid #333;
}