/* =============================================
VARIABLES & RESET (identical to homepage)
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
–black: #000000;
–white: #FFFFFF;
–gold: #C9A84C;
–gold-lt: #D9BC6A;
–gold-dim: rgba(201,168,76,0.15);
–white-dim: rgba(255,255,255,0.55);
–white-mid: rgba(255,255,255,0.80);
–nav-h: 68px;
–max-w: 1100px;
–gutter: 48px;
}

html { scroll-behavior: smooth; }

body {
background: var(–black);
color: var(–white);
font-family: ‘Barlow’, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* =============================================
NAVIGATION (identical to homepage)
============================================= */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
height: var(–nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(–gutter);
background: rgba(0,0,0,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nav-brand {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 2rem;
letter-spacing: 0.14em;
color: var(–white);
}

.nav-links {
display: flex;
gap: 0;
list-style: none;
align-items: center;
}

.nav-links li { display: flex; align-items: center; }

.nav-links li:not(:last-child)::after {
content: ‘|’;
color: rgba(255,255,255,0.2);
margin: 0 16px;
font-size: 0.75rem;
}

.nav-links a, .nav-links button.nav-link {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–white-mid);
background: none;
border: none;
cursor: pointer;
transition: color 0.2s;
padding: 4px 0;
}
.nav-links a:hover, .nav-links button.nav-link:hover { color: var(–gold); }
.nav-links a.active { color: var(–gold); }

.nav-cart {
position: relative;
display: flex;
align-items: center;
gap: 6px;
}

.nav-cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(–gold);
color: var(–black);
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.68rem;
font-weight: 700;
border-radius: 50%;
transition: transform 0.2s ease;
}
.nav-cart-count.bump { transform: scale(1.3); }

.nav-toggle {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
padding: 6px;
}
.nav-toggle span {
display: block;
width: 26px;
height: 1.5px;
background: var(–white);
}

/* =============================================
PAGE HEADER
============================================= */
.shop-header {
padding: calc(var(–nav-h) + 70px) var(–gutter) 60px;
max-width: var(–max-w);
margin: 0 auto;
text-align: center;
}

.shop-eyebrow {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 18px;
}

.shop-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: clamp(2.6rem, 6vw, 5rem);
letter-spacing: 0.05em;
color: var(–white);
margin-bottom: 14px;
}

.shop-sub {
font-family: ‘Barlow’, sans-serif;
font-size: clamp(0.92rem, 1.5vw, 1.02rem);
color: var(–white-dim);
font-weight: 300;
max-width: 540px;
margin: 0 auto;
line-height: 1.8;
}

/* =============================================
CONTROL BAR (filter + sort)
============================================= */
.control-bar {
max-width: var(–max-w);
margin: 0 auto;
padding: 0 var(–gutter) 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-wrap: wrap;
}

.control-group {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}

.control-label {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(–white-dim);
white-space: nowrap;
}

/* Filter chips */
.filter-chip {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 10px 22px;
background: transparent;
color: var(–white-mid);
border: 1px solid rgba(255,255,255,0.18);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.filter-chip:hover {
border-color: rgba(255,255,255,0.5);
color: var(–white);
}
.filter-chip[aria-pressed=”true”] {
background: var(–gold);
color: var(–black);
border-color: var(–gold);
}

/* Sort select */
.sort-select-wrap {
position: relative;
}

.sort-select {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 10px 38px 10px 22px;
background: transparent;
color: var(–white);
border: 1px solid rgba(255,255,255,0.25);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.25s ease;
}
.sort-select:hover, .sort-select:focus {
border-color: var(–gold);
outline: none;
}
.sort-select option {
background: var(–black);
color: var(–white);
}
.sort-select-wrap::after {
content: ‘↓’;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(–gold);
font-size: 0.7rem;
pointer-events: none;
}

/* =============================================
PRODUCT GRID
============================================= */
.shop-grid-wrap {
max-width: var(–max-w);
margin: 0 auto;
padding: 50px var(–gutter) 120px;
}

.results-meta {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 28px;
}

.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}

.product-card {
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card.hide {
display: none;
}

.product-card:hover {
transform: translateY(-6px);
}

.product-card-img {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #080808;
border: 1px solid rgba(255,255,255,0.05);
position: relative;
cursor: pointer;
}

.product-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s ease;
}

.product-card-img .img-alt {
position: absolute;
inset: 0;
opacity: 0;
}

.product-card-img:hover .img-main { opacity: 0; }
.product-card-img:hover .img-alt { opacity: 1; }
.product-card-img:hover img { transform: scale(1.04); }

/* Badge */
.product-badge {
position: absolute;
top: 12px;
left: 12px;
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 6px 12px;
background: var(–gold);
color: var(–black);
z-index: 2;
}
.product-badge.outline {
background: transparent;
color: var(–white);
border: 1px solid rgba(255,255,255,0.4);
}

.product-info {
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}

.product-name {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–white);
}

.product-meta {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–white-dim);
}

.product-price {
font-family: ‘Barlow’, sans-serif;
font-size: 0.92rem;
font-weight: 400;
color: var(–gold);
margin-top: 2px;
}

.product-price .was {
color: rgba(255,255,255,0.3);
text-decoration: line-through;
margin-right: 8px;
font-size: 0.85rem;
}

/* Add to cart button — mirrors .btn-shop on homepage */
.btn-shop {
margin-top: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
padding: 11px 0;
width: 100%;
background: transparent;
color: var(–white);
border: 1px solid rgba(255,255,255,0.4);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-shop:hover {
background: var(–white);
color: var(–black);
border-color: var(–white);
}
.btn-shop.added {
background: var(–gold);
color: var(–black);
border-color: var(–gold);
}
.btn-shop:disabled {
opacity: 0.35;
cursor: not-allowed;
}

/* Empty state */
.empty-state {
text-align: center;
padding: 80px 0;
font-family: ‘Barlow Condensed’, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–white-dim);
font-size: 0.85rem;
grid-column: 1 / -1;
}

/* =============================================
CART DRAWER
============================================= */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease;
z-index: 300;
}
.cart-overlay.open {
opacity: 1;
visibility: visible;
}

.cart-drawer {
position: fixed;
top: 0; right: 0;
height: 100%;
width: 100%;
max-width: 420px;
background: var(–black);
border-left: 1px solid rgba(255,255,255,0.08);
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 301;
display: flex;
flex-direction: column;
}
.cart-drawer.open {
transform: translateX(0);
}

.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px var(–gutter);
border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cart-drawer-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.6rem;
letter-spacing: 0.1em;
}

.cart-close {
background: none;
border: none;
color: var(–white);
font-size: 1.4rem;
cursor: pointer;
line-height: 1;
transition: color 0.2s;
}
.cart-close:hover { color: var(–gold); }

.cart-items {
flex: 1;
overflow-y: auto;
padding: 24px var(–gutter);
display: flex;
flex-direction: column;
gap: 20px;
}

.cart-item {
display: flex;
gap: 16px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding-bottom: 18px;
}

.cart-item-img {
width: 64px;
height: 64px;
flex-shrink: 0;
background: #080808;
border: 1px solid rgba(255,255,255,0.05);
overflow: hidden;
}
.cart-item-img img {
width: 100%; height: 100%;
object-fit: contain;
}

.cart-item-info { flex: 1; }

.cart-item-name {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 4px;
}

.cart-item-price {
font-family: ‘Barlow’, sans-serif;
font-size: 0.82rem;
color: var(–gold);
}

.cart-item-remove {
background: none;
border: none;
color: var(–white-dim);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
font-family: ‘Barlow Condensed’, sans-serif;
transition: color 0.2s;
}
.cart-item-remove:hover { color: var(–gold); }

.cart-empty {
text-align: center;
padding: 60px 0;
color: var(–white-dim);
font-family: ‘Barlow Condensed’, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 0.8rem;
}

.cart-drawer-footer {
padding: 24px var(–gutter) 32px;
border-top: 1px solid rgba(255,255,255,0.07);
}

.cart-subtotal-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
font-family: ‘Barlow Condensed’, sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.8rem;
}
.cart-subtotal-amount {
font-family: ‘Barlow’, sans-serif;
font-size: 1.1rem;
letter-spacing: 0.02em;
color: var(–gold);
text-transform: none;
}

/* Buttons — match homepage .btn */
.btn {
display: inline-block;
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
padding: 17px 0;
width: 100%;
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
text-align: center;
border: none;
}
.btn-gold {
background: var(–gold);
color: var(–black);
border: 2px solid var(–gold);
}
.btn-gold:hover {
background: var(–gold-lt);
border-color: var(–gold-lt);
transform: translateY(-2px);
}
.btn-gold:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
}

/* =============================================
FOOTER (identical to homepage)
============================================= */
footer {
border-top: 1px solid rgba(255,255,255,0.07);
padding: 52px var(–gutter);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.footer-brand {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.6rem;
letter-spacing: 0.14em;
color: var(–white);
margin-bottom: 4px;
}
.footer-tagline {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.22em;
color: var(–gold);
text-transform: uppercase;
opacity: 0.7;
}
.footer-copy {
font-family: ‘Barlow’, sans-serif;
font-size: 0.72rem;
color: rgba(255,255,255,0.2);
font-weight: 300;
}

/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
:root { –gutter: 20px; –nav-h: 60px; }

nav { padding: 0 20px; }
.nav-links { display: none; }
.nav-links.open {
display: flex;
flex-direction: column;
position: fixed;
top: var(–nav-h);
left: 0; right: 0;
background: rgba(0,0,0,0.97);
padding: 28px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
gap: 0;
z-index: 200;
}
.nav-links li:not(:last-child)::after { display: none; }
.nav-links a, .nav-links button.nav-link {
display: block;
padding: 16px 28px;
font-size: 1rem;
width: 100%;
text-align: left;
}
.nav-toggle { display: flex; }

.shop-header { padding: calc(var(–nav-h) + 40px) 20px 40px; }
.control-bar {
padding: 0 20px 24px;
flex-direction: column;
align-items: stretch;
gap: 18px;
}
.control-group { gap: 10px; }

.shop-grid-wrap { padding: 40px 20px 90px; }

.product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.cart-drawer { max-width: 100%; }

footer {
flex-direction: column;
align-items: flex-start;
padding: 40px 20px;
}
}

@media (max-width: 420px) {
.product-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}

/* =============================================
LIMITED EDITION STYLES
============================================= */
.product-badge.limited {
background: transparent;
color: var(–gold);
border: 1px solid var(–gold);
letter-spacing: 0.22em;
}

.limit-notice {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–gold);
opacity: 0.8;
}

.limit-notice::before {
content: ”;
display: block;
width: 5px;
height: 5px;
background: var(–gold);
border-radius: 50%;
flex-shrink: 0;
}

/* Sold-out / limit-reached state */
.btn-shop.limit-reached {
opacity: 0.4;
cursor: not-allowed;
color: var(–white-dim);
border-color: rgba(255,255,255,0.15);
}

/* Featured limited-edition hero strip above the grid */
.limited-hero {
max-width: var(–max-w);
margin: 0 auto 0;
padding: 0 var(–gutter) 0;
}

.limited-hero-inner {
border: 1px solid rgba(201,168,76,0.3);
padding: 40px 48px;
display: grid;
grid-template-columns: auto 1fr;
gap: 48px;
align-items: center;
background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, transparent 60%);
}

.limited-hero-images {
display: flex;
gap: 12px;
}

.limited-hero-img {
width: 160px;
height: 160px;
background: #080808;
border: 1px solid rgba(255,255,255,0.05);
overflow: hidden;
flex-shrink: 0;
}

.limited-hero-img img {
width: 100%;
height: 100%;
object-fit: contain;
}

.limited-hero-text {}

.limited-hero-eyebrow {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}

.limited-hero-eyebrow::before {
content: ”;
display: block;
width: 24px;
height: 1px;
background: var(–gold);
opacity: 0.6;
}

.limited-hero-name {
font-family: ‘Bebas Neue’, sans-serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
letter-spacing: 0.04em;
color: var(–white);
line-height: 0.95;
margin-bottom: 14px;
}

.limited-hero-meta {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–white-dim);
margin-bottom: 8px;
}

.limited-hero-price {
font-family: ‘Barlow’, sans-serif;
font-size: 1.1rem;
color: var(–gold);
margin-bottom: 6px;
}

.limited-hero-rule {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 8px;
}
.limited-hero-rule::before {
content: ‘⚠’;
color: var(–gold);
font-size: 0.7rem;
}

@media (max-width: 760px) {
.limited-hero { padding: 0 20px; }
.limited-hero-inner {
grid-template-columns: 1fr;
padding: 28px 24px;
gap: 24px;
}
.limited-hero-images {
display: flex;
flex-direction: row;
gap: 12px;
justify-content: flex-start;
}
.limited-hero-img { width: 120px; height: 120px; flex-shrink: 0; }
}

The Collection

Shop The Drop

Apparel built for presence. Every piece is a statement of identity —
designed for those who move through the world with intention.

/* =============================================
MOBILE NAV TOGGLE
============================================= */
const navToggle = document.getElementById(‘navToggle’);
const navLinks = document.getElementById(‘navLinks’);
navToggle.addEventListener(‘click’, () => navLinks.classList.toggle(‘open’));

/* =============================================
STATE
– Single source of truth for the grid render.
– activeFilter: which collection chip is selected
– sortMode: current sort key
– cart: array of { name, price, qty }
============================================= */
const state = {
activeFilter: ‘all’,
sortMode: ‘newest’,
cart: []
};

const grid = document.getElementById(‘productGrid’);
const cards = Array.from(grid.querySelectorAll(‘.product-card’));
const resultsEl = document.getElementById(‘resultsMeta’);
const emptyState = document.getElementById(’emptyState’);

/* =============================================
FILTERING
– Reads data-category on each card.
– “all” always matches.
– Toggling a chip updates aria-pressed for a11y
and re-renders the grid.
============================================= */
const filterChips = document.querySelectorAll(‘.filter-chip’);

filterChips.forEach(chip => {
chip.addEventListener(‘click’, () => {
filterChips.forEach(c => c.setAttribute(‘aria-pressed’, ‘false’));
chip.setAttribute(‘aria-pressed’, ‘true’);
state.activeFilter = chip.dataset.filter;
render();
});
});

/* =============================================
SORTING
– Reorders the actual DOM nodes inside the grid
based on data-price / data-popularity / data-date.
============================================= */
const sortSelect = document.getElementById(‘sortSelect’);
sortSelect.addEventListener(‘change’, () => {
state.sortMode = sortSelect.value;
render();
});

function sortCards(list) {
const sorted = […list];
switch (state.sortMode) {
case ‘price-asc’:
sorted.sort((a, b) => parseFloat(a.dataset.price) – parseFloat(b.dataset.price));
break;
case ‘price-desc’:
sorted.sort((a, b) => parseFloat(b.dataset.price) – parseFloat(a.dataset.price));
break;
case ‘popularity’:
sorted.sort((a, b) => parseInt(b.dataset.popularity) – parseInt(a.dataset.popularity));
break;
case ‘newest’:
default:
sorted.sort((a, b) => new Date(b.dataset.date) – new Date(a.dataset.date));
break;
}
return sorted;
}

/* =============================================
RENDER
– Combines filter + sort.
– Hides non-matching cards via the .hide class
rather than removing them, preserving listeners.
– Re-appends in sorted order using a fragment
(single reflow).
– Updates the results count + empty state.
============================================= */
function render() {
const matching = cards.filter(card => {
if (state.activeFilter === ‘all’) return true;
return card.dataset.category.split(‘ ‘).includes(state.activeFilter);
});

const sortedMatching = sortCards(matching);

// Reorder DOM: append matching cards in sorted order
const fragment = document.createDocumentFragment();
sortedMatching.forEach(card => fragment.appendChild(card));
cards.forEach(card => { if (!matching.includes(card)) fragment.appendChild(card); });
grid.insertBefore(fragment, emptyState);

// Show/hide
cards.forEach(card => card.classList.toggle(‘hide’, !matching.includes(card)));

// Results meta + empty state
resultsEl.textContent = `Showing ${matching.length} product${matching.length === 1 ? ” : ‘s’}`;
emptyState.hidden = matching.length !== 0;
}

render();

/* =============================================
CART DRAWER — open/close
============================================= */
const cartTrigger = document.getElementById(‘cartTrigger’);
const cartDrawer = document.getElementById(‘cartDrawer’);
const cartOverlay = document.getElementById(‘cartOverlay’);
const cartCloseBtn = document.getElementById(‘cartCloseBtn’);

function openCart() {
cartDrawer.classList.add(‘open’);
cartOverlay.classList.add(‘open’);
cartDrawer.setAttribute(‘aria-hidden’, ‘false’);
}
function closeCart() {
cartDrawer.classList.remove(‘open’);
cartOverlay.classList.remove(‘open’);
cartDrawer.setAttribute(‘aria-hidden’, ‘true’);
}

cartTrigger.addEventListener(‘click’, openCart);
cartCloseBtn.addEventListener(‘click’, closeCart);
cartOverlay.addEventListener(‘click’, closeCart);
document.addEventListener(‘keydown’, e => {
if (e.key === ‘Escape’) closeCart();
});

/* =============================================
ADD TO CART
– Limited products: enforces max qty of 1.
Once added, button locks to “Limit Reached”
and all buttons for that product disable.
– Regular products: qty increments freely.
============================================= */
const cartCountEl = document.getElementById(‘cartCount’);
const cartItemsEl = document.getElementById(‘cartItems’);
const cartEmptyMsg = document.getElementById(‘cartEmptyMsg’);
const cartSubtotalEl = document.getElementById(‘cartSubtotal’);
const checkoutBtn = document.getElementById(‘checkoutBtn’);

document.querySelectorAll(‘.btn-shop[data-product]’).forEach(btn => {
btn.addEventListener(‘click’, () => {
const name = btn.dataset.product;
const price = parseFloat(btn.dataset.price);
const isLimited = btn.dataset.limited === ‘true’;

const existing = state.cart.find(item => item.name === name);

// Enforce purchase limit of 1 for limited editions
if (isLimited && existing) return;

if (existing) {
existing.qty += 1;
} else {
state.cart.push({ name, price, qty: 1, limited: isLimited });
}

// Button micro-interaction: morph to “Added ✓”
btn.textContent = ‘Added ✓’;
btn.classList.add(‘added’);
btn.disabled = true;
setTimeout(() => {
if (isLimited) {
// Lock all buttons for this limited product permanently
document.querySelectorAll(`.btn-shop[data-product=”${name}”]`).forEach(b => {
b.textContent = ‘Limit Reached’;
b.classList.remove(‘added’);
b.classList.add(‘limit-reached’);
b.disabled = true;
});
} else {
btn.textContent = ‘Add To Cart’;
btn.classList.remove(‘added’);
btn.disabled = false;
}
}, 1200);

// Bump the nav cart count badge
cartCountEl.classList.remove(‘bump’);
void cartCountEl.offsetWidth;
cartCountEl.classList.add(‘bump’);

renderCart();
openCart();
});
});

/* =============================================
RENDER CART
– Rebuilds the drawer list from state.cart
– Updates count badge + subtotal
– Wires up per-item remove buttons
============================================= */
function renderCart() {
const totalQty = state.cart.reduce((sum, item) => sum + item.qty, 0);
cartCountEl.textContent = totalQty;

if (state.cart.length === 0) {
cartItemsEl.innerHTML = ”;
cartItemsEl.appendChild(cartEmptyMsg);
cartSubtotalEl.textContent = ‘$0.00’;
checkoutBtn.disabled = true;
return;
}

cartItemsEl.innerHTML = ”;
let subtotal = 0;

state.cart.forEach((item, index) => {
subtotal += item.price * item.qty;

const row = document.createElement(‘div’);
row.className = ‘cart-item’;
row.innerHTML = `

Remove
`;
cartItemsEl.appendChild(row);
});

cartSubtotalEl.textContent = `$${subtotal.toFixed(2)}`;
checkoutBtn.disabled = false;

// Wire remove buttons
cartItemsEl.querySelectorAll(‘.cart-item-remove’).forEach(removeBtn => {
removeBtn.addEventListener(‘click’, () => {
const idx = parseInt(removeBtn.dataset.index);
state.cart.splice(idx, 1);
renderCart();
});
});
}

renderCart();

// Flip card hover — limited edition product card in the grid
document.querySelectorAll(‘.flip-inner-card’).forEach(inner => {
const parent = inner.closest(‘.product-card-img’);
parent.addEventListener(‘mouseenter’, () => {
inner.style.transform = ‘rotateY(180deg)’;
});
parent.addEventListener(‘mouseleave’, () => {
inner.style.transform = ‘rotateY(0deg)’;
});
});