Generated files
index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indure — Premium Footwear</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--dusty-rose:#dcae96;
--sage:#87ae73;
--denim:#6b7fa3;
--gold:#c9a84c;
--cream:#f5f0e8;
--charcoal:#2c2c2c;
--ink:#1a1a1a;
--muted:#7a7265;
--light-bg:#faf7f2;
--alt-bg:#f0ebe0;
--border:#e2dbd0;
--white:#ffffff;
--shadow-sm:0 2px 8px rgba(44,44,44,.08);
--shadow-md:0 4px 24px rgba(44,44,44,.12),0 1px 4px rgba(44,44,44,.06);
--shadow-lg:0 8px 40px rgba(44,44,44,.15),0 2px 8px rgba(44,44,44,.08);
--shadow-xl:0 20px 60px rgba(44,44,44,.2),0 4px 16px rgba(44,44,44,.1);
--transition:cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'DM Sans',sans-serif;background:var(--light-bg);color:var(--ink);overflow-x:hidden;line-height:1.6}
h1,h2,h3,h4{font-family:'Playfair Display',serif;letter-spacing:-.02em;line-height:1.15}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:'DM Sans',sans-serif}
a{text-decoration:none;color:inherit}
.page{display:none}
.page.active{display:block}
/* ── NAV ── */
#main-nav{
position:fixed;top:18px;left:50%;transform:translateX(-50%);
width:calc(100% - 32px);max-width:1100px;z-index:9999;
background:rgba(250,247,242,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(226,219,208,.6);border-radius:50px;
padding:12px 24px;
box-shadow:0 4px 32px rgba(44,44,44,.1),0 1px 4px rgba(44,44,44,.06);
transition:all .3s var(--transition);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:900;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 14px;border-radius:50px;transition:all .25s var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:rgba(201,168,76,.15)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-cart-btn{position:relative;display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:8px 18px;background:var(--ink);color:var(--cream);border-radius:50px;transition:all .25s var(--transition)}
.nav-cart-btn:hover{background:var(--gold);color:var(--ink)}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--dusty-rose);color:var(--white);font-size:.62rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--white)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;background:none;border:none;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s var(--transition)}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(250,247,242,.97);backdrop-filter:blur(30px);z-index:9998;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;padding:8px 0;border-bottom:1px solid var(--border);width:200px;text-align:center;transition:color .2s}
.mobile-menu a:hover{color:var(--gold)}
.mobile-close{position:absolute;top:24px;right:24px;font-size:1.5rem;padding:8px;color:var(--muted)}
/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(145deg,#2c2420 0%,#1a1a1a 40%,#2c2c38 100%)}
.hero-bg-layer{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(201,168,76,.18) 0%,transparent 60%),radial-gradient(ellipse 40% 80% at 20% 80%,rgba(220,174,150,.12) 0%,transparent 50%);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero-panels{position:absolute;right:-40px;top:50%;transform:translateY(-50%);display:flex;gap:16px;align-items:center;pointer-events:none}
.hero-panel{border-radius:12px;opacity:.12;backdrop-filter:blur(2px)}
.hero-panel:nth-child(1){width:180px;height:420px;background:linear-gradient(160deg,var(--dusty-rose),var(--gold));transform:rotate(8deg)}
.hero-panel:nth-child(2){width:140px;height:320px;background:linear-gradient(160deg,var(--sage),var(--denim));transform:rotate(-5deg) translateY(-30px)}
.hero-panel:nth-child(3){width:100px;height:240px;background:linear-gradient(160deg,var(--gold),var(--dusty-rose));transform:rotate(12deg) translateY(20px)}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 32px;padding-top:90px}
.hero-label{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;padding:6px 16px;border:1px solid rgba(201,168,76,.35);border-radius:50px;background:rgba(201,168,76,.08)}
.hero-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.hero-heading{font-size:clamp(2.8rem,7vw,6rem);font-weight:900;color:var(--white);line-height:1.04;margin-bottom:20px;max-width:700px}
.hero-heading .grad{background:linear-gradient(135deg,var(--gold) 0%,var(--dusty-rose) 50%,#e8c87a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(.95rem,2vw,1.15rem);color:rgba(255,255,255,.6);max-width:480px;line-height:1.7;margin-bottom:36px;font-weight:300}
.hero-cta-row{display:flex;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:var(--gold);color:var(--ink);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--gold);border-radius:0;transition:all .3s var(--transition);box-shadow:0 4px 20px rgba(201,168,76,.35)}
.btn-primary:hover{background:transparent;color:var(--gold);box-shadow:0 0 30px rgba(201,168,76,.4),0 4px 20px rgba(201,168,76,.2)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:transparent;color:var(--white);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;border:2px solid rgba(255,255,255,.3);border-radius:0;transition:all .3s var(--transition)}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.hero-stats{display:flex;flex-direction:row;gap:32px;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;gap:2px}
.hero-stat strong{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:900;color:var(--white)}
.hero-stat span{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.35);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;animation:bounce 2.5s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
.hero-scroll::after{content:'';width:1px;height:36px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent)}
/* ── SECTIONS ── */
.section{padding:80px 32px}
.section-alt{background:var(--alt-bg)}
.section-dark{background:var(--charcoal);color:var(--cream)}
.container{max-width:1200px;margin:0 auto}
.section-label{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-title{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;color:inherit;margin-bottom:8px}
.section-sub{font-size:1rem;color:var(--muted);max-width:520px;line-height:1.7;margin-bottom:48px}
.divider{width:40px;height:3px;background:linear-gradient(90deg,var(--gold),var(--dusty-rose));margin:16px 0 32px}
/* ── PRODUCT GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.product-card{background:var(--white);border:1px solid var(--border);overflow:hidden;transition:all .4s var(--transition);cursor:pointer;position:relative}
.product-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:var(--shadow-xl);border-color:transparent}
.card-img{height:260px;position:relative;overflow:hidden}
.card-img-inner{width:100%;height:100%;transition:transform .6s var(--transition)}
.product-card:hover .card-img-inner{transform:scale(1.05)}
.card-badge{position:absolute;top:14px;left:14px;z-index:2;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;background:var(--ink);color:var(--white)}
.card-badge.sale{background:var(--dusty-rose);color:var(--white)}
.card-badge.new{background:var(--sage);color:var(--white)}
.card-body{padding:20px}
.card-cat{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.card-name{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.3}
.card-stars{color:var(--gold);font-size:.8rem;margin-bottom:10px;display:flex;align-items:center;gap:4px}
.card-stars span{color:var(--muted);font-size:.75rem;font-family:'DM Sans',sans-serif}
.card-price{display:flex;align-items:center;gap:8px}
.price-current{font-weight:700;font-size:1.05rem;color:var(--ink)}
.price-was{font-size:.88rem;color:var(--muted);text-decoration:line-through}
.price-save{font-size:.68rem;font-weight:700;color:var(--dusty-rose);background:rgba(220,174,150,.15);padding:2px 6px}
/* ── GRADIENT IMAGES ── */
.gi-1{background:linear-gradient(135deg,#8b6f47 0%,#c4a882 40%,#e8d5b0 70%,#d4b896 100%)}
.gi-2{background:linear-gradient(145deg,#4f5d75 0%,#7b8fa8 50%,#b8c8d8 80%,#8fa0b5 100%)}
.gi-3{background:linear-gradient(120deg,#2c2c2c 0%,#4a4a4a 40%,#6b6b6b 70%,#3d3d3d 100%)}
.gi-4{background:linear-gradient(160deg,#36454f 0%,#6b8a7a 50%,#c2b280 80%,#87ae73 100%)}
.gi-5{background:linear-gradient(135deg,#f0ead6 0%,#e8d5b5 40%,#d4b896 70%,#c9a884 100%)}
.gi-6{background:linear-gradient(145deg,#228b22 0%,#5a9e3a 50%,#8ec87a 80%,#b7d4a0 100%)}
.gi-7{background:linear-gradient(120deg,#3c1414 0%,#7a3030 40%,#c04a3a 70%,#dcae96 100%)}
.gi-8{background:linear-gradient(160deg,#4a0e4e 0%,#7a2880 50%,#a84caa 80%,#d87cda 100%)}
.shoe-icon{position:absolute;bottom:20px;right:20px;font-size:3rem;opacity:.15;transform:rotate(-20deg)}
/* ── FEATURED SECTION ── */
.featured-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:500px;overflow:hidden}
.featured-img{background:linear-gradient(135deg,#2c2420 0%,#8b6f47 50%,#c4a882 100%);position:relative;min-height:400px}
.featured-img-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 70%,rgba(201,168,76,.25),transparent 60%)}
.featured-text{background:var(--alt-bg);padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.featured-text .price-row{display:flex;align-items:center;gap:12px;margin:24px 0}
.featured-price{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:900;color:var(--ink)}
.featured-was{font-size:1rem;color:var(--muted);text-decoration:line-through}
.featured-save{background:var(--dusty-rose);color:var(--white);font-size:.7rem;font-weight:700;padding:4px 10px;letter-spacing:.06em}
/* ── MARQUEE ── */
.marquee-section{background:var(--ink);padding:20px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.marquee-track{display:flex;gap:0;animation:marquee 28s linear infinite;width:max-content}
.marquee-item{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:rgba(255,255,255,.5);padding:0 40px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.marquee-dot{color:var(--gold);font-size:1.2rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ── PRODUCT PAGE ── */
.product-page-wrap{max-width:1200px;margin:0 auto;padding:120px 32px 80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.product-main-img{aspect-ratio:1;border:1px solid var(--border);position:relative;overflow:hidden}
.product-main-img .shoe-icon{font-size:6rem;opacity:.1}
.product-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.thumb{aspect-ratio:1;border:2px solid transparent;cursor:pointer;opacity:.6;transition:all .25s var(--transition)}
.thumb:hover,.thumb.active{opacity:1;border-color:var(--gold)}
.product-info{padding-top:16px}
.product-cat{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.product-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--ink);margin-bottom:12px;line-height:1.2}
.product-stars{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.stars-display{color:var(--gold);font-size:1rem}
.review-count{font-size:.82rem;color:var(--muted)}
.stock-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2d7a44;background:rgba(45,122,68,.1);padding:4px 12px;margin-bottom:20px}
.stock-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#2d7a44}
.price-display{margin-bottom:28px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.price-current-lg{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:900;color:var(--ink)}
.price-was-lg{font-size:1rem;color:var(--muted);text-decoration:line-through;margin-left:10px}
.price-save-lg{display:inline-block;background:var(--dusty-rose);color:var(--white);font-size:.72rem;font-weight:700;padding:3px 10px;letter-spacing:.06em;margin-left:10px;vertical-align:middle}
.selector-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.size-selector{width:100%;padding:12px 16px;border:2px solid var(--border);background:var(--white);font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232c2c2c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;transition:border-color .2s;margin-bottom:20px}
.size-selector:focus{outline:none;border-color:var(--gold)}
.color-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;position:relative;transition:all .25s var(--transition);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.swatch:hover{transform:scale(1.12)}
.swatch.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gold),0 4px 12px rgba(0,0,0,.2)}
.color-name-text{font-size:.82rem;color:var(--muted);margin-bottom:20px;min-height:20px;font-weight:500}
.qty-row{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.qty-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qty-control{display:flex;align-items:center;border:2px solid var(--border)}
.qty-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:500;color:var(--ink);background:transparent;border:none;cursor:pointer;transition:background .2s}
.qty-btn:hover{background:var(--alt-bg)}
.qty-val{width:48px;height:40px;text-align:center;border:none;border-left:2px solid var(--border);border-right:2px solid var(--border);font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;background:transparent;color:var(--ink)}
.add-to-cart-btn{width:100%;padding:18px;background:var(--ink);color:var(--white);font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);border-radius:0;transition:all .35s var(--transition);margin-bottom:12px}
.add-to-cart-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 8px 30px rgba(201,168,76,.4)}
.wishlist-btn{width:100%;padding:14px;background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--border);border-radius:0;transition:all .25s var(--transition)}
.wishlist-btn:hover{border-color:var(--ink);color:var(--ink)}
.product-meta{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.meta-row{display:flex;gap:8px;font-size:.8rem;color:var(--muted)}
.meta-row strong{color:var(--ink);font-weight:600}
/* ── CART PAGE ── */
.cart-wrap{max-width:1100px;margin:0 auto;padding:120px 32px 80px}
.cart-header{margin-bottom:48px}
.cart-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:6px}
.cart-empty{text-align:center;padding:80px 32px;display:flex;flex-direction:column;align-items:center;gap:20px}
.cart-empty-icon{font-size:60px;line-height:1}
.cart-empty h2{font-size:1.8rem;font-weight:700;color:var(--ink)}
.cart-empty p{color:var(--muted);font-size:.95rem}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.cart-item{display:grid;grid-template-columns:100px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);align-items:start}
.cart-item-img{height:100px;border:1px solid var(--border)}
.cart-item-name{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;margin-bottom:4px}
.cart-item-variant{font-size:.78rem;color:var(--muted);margin-bottom:10px;line-height:1.5}
.cart-item-price{font-weight:700;font-size:1rem;color:var(--ink)}
.cart-item-qty{display:flex;align-items:center;border:1.5px solid var(--border);margin-top:8px;width:fit-content}
.cart-item-qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:1rem;color:var(--ink)}
.cart-item-qty span{width:36px;text-align:center;font-size:.88rem;font-weight:600}
.cart-remove{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:underline;cursor:pointer;background:transparent;border:none;padding:0;margin-top:8px;display:block}
.cart-summary{background:var(--alt-bg);border:1px solid var(--border);padding:32px;position:sticky;top:100px}
.summary-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:800;margin-bottom:24px}
.summary-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);margin-bottom:12px}
.summary-row.total{font-size:1.1rem;font-weight:700;color:var(--ink);padding-top:16px;border-top:2px solid var(--border);margin-top:4px}
.checkout-btn{display:block;width:100%;padding:18px;background:var(--ink);color:var(--white);font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);text-align:center;margin-top:24px;transition:all .3s var(--transition)}
.checkout-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* ── CHECKOUT PAGE ── */
.checkout-wrap{max-width:1000px;margin:0 auto;padding:120px 32px 80px}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.form-section{margin-bottom:36px}
.form-section-title{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form-group input,.form-group select{padding:13px 16px;border:2px solid var(--border);background:var(--white);font-family:'DM Sans',sans-serif;font-size:.92rem;color:var(--ink);border-radius:0;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--gold)}
.order-summary-side{background:var(--alt-bg);border:1px solid var(--border);padding:28px;position:sticky;top:100px}
.order-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.order-item-img{width:56px;height:56px;flex-shrink:0;border:1px solid var(--border)}
.order-item-info{flex:1;font-size:.82rem}
.order-item-info strong{display:block;font-weight:700;margin-bottom:2px}
.order-item-price{font-weight:700;font-size:.9rem;align-self:center}
.place-order-btn{display:block;width:100%;padding:18px;background:var(--gold);color:var(--ink);font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--gold);text-align:center;margin-top:24px;cursor:pointer;transition:all .3s var(--transition)}
.place-order-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
/* ── ABOUT / CONTACT ── */
.about-hero{min-height:60vh;background:linear-gradient(145deg,#2c2420,#1a1a1a);display:flex;align-items:center;padding:120px 32px 80px}
.about-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-img-block{height:480px;background:linear-gradient(135deg,#4a3728,#8b6f47,#c4a882,#e8d5b0);position:relative}
.about-img-block::after{content:'👟';position:absolute;bottom:32px;right:32px;font-size:5rem;opacity:.12}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.value-card{padding:28px;background:var(--white);border:1px solid var(--border);transition:all .3s var(--transition)}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.value-icon{font-size:2rem;margin-bottom:12px}
.value-title{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;margin-bottom:8px}
.value-text{font-size:.85rem;color:var(--muted);line-height:1.65}
.contact-wrap{max-width:800px;margin:0 auto;padding:120px 32px 80px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:48px}
.contact-info-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:24px}
.contact-icon{font-size:1.4rem;color:var(--gold)}
.contact-form-wrap .form-group input,.contact-form-wrap .form-group textarea{padding:14px 16px;border:2px solid var(--border);width:100%;background:var(--white);font-family:'DM Sans',sans-serif;font-size:.92rem;color:var(--ink);transition:border-color .2s}
.contact-form-wrap .form-group input:focus,.contact-form-wrap .form-group textarea:focus{outline:none;border-color:var(--gold)}
.contact-form-wrap .form-group textarea{min-height:140px;resize:vertical}
/* ── FOOTER ── */
footer{background:var(--ink);color:rgba(255,255,255,.65);padding:64px 32px 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand p{font-size:.85rem;line-height:1.7;margin-top:12px;max-width:260px}
.footer-col h4{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:16px;letter-spacing:.04em}
.footer-col a{display:block;font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.78rem;color:rgba(255,255,255,.3)}
.footer-socials{display:flex;gap:12px}
.social-link{width:36px;height:36px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:rgba(255,255,255,.5);transition:all .2s;border-radius:0}
.social-link:hover{border-color:var(--gold);color:var(--gold)}
/* ── SHOP PAGE ── */
.shop-header{padding:120px 32px 48px;background:var(--ink);color:var(--white)}
.shop-header-inner{max-width:1200px;margin:0 auto}
.shop-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.filter-chip{padding:8px 20px;border:1.5px solid rgba(255,255,255,.2);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;background:transparent;border-radius:0}
.filter-chip.active,.filter-chip:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.shop-body{max-width:1200px;margin:0 auto;padding:48px 32px}
/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:var(--white);padding:16px 24px;font-size:.85rem;font-weight:500;z-index:99999;border-left:4px solid var(--gold);opacity:0;transform:translateY(16px);transition:all .35s var(--transition);pointer-events:none;max-width:320px}
.toast.show{opacity:1;transform:translateY(0)}
/* ── UTILS ── */
.back-btn{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .2s;background:none;border:none;padding:0;margin-bottom:24px}
.back-btn:hover{color:var(--ink)}
.no-items-msg{padding:32px;text-align:center;color:var(--muted);font-style:italic}
/* ── RESPONSIVE ── */
@media(max-width:1024px){
.product-page-wrap{grid-template-columns:1fr;gap:40px;padding:100px 24px 60px}
.featured-wrap{grid-template-columns:1fr}
.featured-text{padding:48px 36px}
.about-hero-inner{grid-template-columns:1fr}
.cart-layout{grid-template-columns:1fr}
.checkout-grid{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr 1fr}
.values-grid{grid-template-columns:1fr 1fr}
.contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
#main-nav{top:12px;width:calc(100% - 24px);padding:10px 18px}
.nav-links{display:none}
.hamburger{display:flex}
.hero-content{padding:0 20px;padding-top:80px}
.hero-panels{display:none}
.section{padding:56px 20px}
.product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.footer-top{grid-template-columns:1fr 1fr;gap:32px}
.footer-col:first-child{grid-column:span 2}
.cart-item{grid-template-columns:80px 1fr auto}
.values-grid{grid-template-columns:1fr}
.about-hero{padding:100px 20px 60px}
.form-row{grid-template-columns:1fr}
}
@media(max-width:480px){
.hero-heading{font-size:clamp(2rem,9vw,2.8rem)}
.product-grid{grid-template-columns:1fr}
.hero-cta-row{flex-direction:column;align-items:flex-start}
.btn-primary,.btn-outline{width:100%;justify-content:center;min-height:44px}
.hero-stats{gap:20px}
.cart-layout{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr}
.footer-col:first-child{grid-column:auto}
.nav-cart-btn span:not(:last-child){display:none}
.cart-item{grid-template-columns:72px 1fr auto}
.product-thumbs{grid-template-columns:repeat(4,1fr)}
.color-swatches{gap:8px}
.swatch{width:30px;height:30px}
.shop-filters{gap:8px}
.filter-chip{padding:7px 14px;font-size:.72rem}
}
</style>
</head>
<body>
<!-- NAV -->
<nav id="main-nav">
<div class="nav-inner">
<div class="nav-logo" onclick="navigate('home')" style="cursor:pointer">IN<span>DURE</span></div>
<div class="nav-links">
<a href="#" onclick="navigate('home');return false" class="nav-link">Home</a>
<a href="#" onclick="navigate('shop');return false" class="nav-link">Shop</a>
<a href="#" onclick="navigate('about');return false" class="nav-link">About</a>
<a href="#" onclick="navigate('contact');return false" class="nav-link">Contact</a>
</div>
<div class="nav-right">
<button class="nav-cart-btn" onclick="navigate('cart')">
<span>🛍</span> <span>Cart</span>
<span class="cart-badge" id="cart-badge">0</span>
</button>
<button class="hamburger" onclick="toggleMobileMenu()" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</nav>
<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobile-menu">
<button class="mobile-close" onclick="toggleMobileMenu()">✕</button>
<a href="#" onclick="navigate('home');toggleMobileMenu();return false">Home</a>
<a href="#" onclick="navigate('shop');toggleMobileMenu();return false">Shop</a>
<a href="#" onclick="navigate('about');toggleMobileMenu();return false">About</a>
<a href="#" onclick="navigate('contact');toggleMobileMenu();return false">Contact</a>
<a href="#" onclick="navigate('cart');toggleMobileMenu();return false">Cart</a>
</div>
<!-- TOAST -->
<div class="toast" id="toast"></div>
<!-- ════════════════ HOME PAGE ════════════════ -->
<div id="page-home" class="page active">
<!-- HERO -->
<section class="hero">
<div class="hero-bg-layer"></div>
<div class="hero-grid"></div>
<div class="hero-panels">
<div class="hero-panel"></div>
<div class="hero-panel"></div>
<div class="hero-panel"></div>
</div>
<div class="hero-content">
<div class="hero-label">✦ New Collection 2025</div>
<h1 class="hero-heading">Step into<br><span class="grad">Refined</span><br>Presence</h1>
<p class="hero-sub">Footwear that bridges heritage craft and contemporary form. Each pair is a statement of intent, meticulously shaped for those who move with purpose.</p>
<div class="hero-cta-row">
<button class="btn-primary" onclick="navigate('shop')">Explore Collection →</button>
<button class="btn-outline" onclick="navigate('about')">Our Story</button>
</div>
<div class="hero-stats">
<div class="hero-stat"><strong>8+</strong><span>Collections</span></div>
<div class="hero-stat"><strong>4.9★</strong><span>Avg Rating</span></div>
<div class="hero-stat"><strong>12K+</strong><span>Happy Feet</span></div>
<div class="hero-stat"><strong>Free</strong><span>Shipping</span></div>
</div>
</div>
<div class="hero-scroll">Scroll</div>
</section>
<!-- MARQUEE -->
<div class="marquee-section">
<div class="marquee-track" id="marquee-track"></div>
</div>
<!-- FEATURED PRODUCT -->
<section class="section section-alt">
<div class="container">
<div class="featured-wrap">
<div class="featured-img gi-1">
<div class="featured-img-overlay"></div>
<div style="position:absolute;bottom:32px;left:32px;color:rgba(255,255,255,.12);font-size:8rem;line-height:1">👟</div>
<div style="position:absolute;top:24px;left:24px;background:var(--gold);color:var(--ink);font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px">Editor's Pick</div>
</div>
<div class="featured-text">
<div class="section-label">Featured Drop</div>
<h2 class="section-title">Signature<br>Sandals Edition</h2>
<div class="divider"></div>
<p style="color:var(--muted);font-size:.92rem;line-height:1.75;margin-bottom:0">Architecturally crafted for the modern individual — the Signature Sandals blend raw material integrity with minimal design language. Premium leather straps, cushioned footbed, and a silhouette that ages beautifully.</p>
<div class="price-row">
<span class="featured-price">$88.99</span>
<span class="featured-was">$124.59</span>
<span class="featured-save">Save 29%</span>
</div>
<div style="color:var(--gold);font-size:.95rem;margin-bottom:24px">★★★★☆ <span style="color:var(--muted);font-size:.8rem">(142 reviews)</span></div>
<button class="btn-primary" onclick="openProduct(0)">View Details →</button>
</div>
</div>
</div>
</section>
<!-- PRODUCTS CAROUSEL -->
<section class="section">
<div class="container">
<div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:48px">
<div>
<div class="section-label">The Collection</div>
<h2 class="section-title">Crafted for Every Step</h2>
<div class="divider" style="margin-bottom:0"></div>
</div>
<button class="btn-outline" style="border-color:var(--border);color:var(--ink)" onclick="navigate('shop')">View All →</button>
</div>
<div class="product-grid" id="home-product-grid"></div>
</div>
</section>
<!-- VALUES STRIP -->
<section class="section section-dark">
<div class="container">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px">
<div style="text-align:center;padding:16px">
<div style="font-size:2rem;margin-bottom:12px">🧵</div>
<div style="font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--cream);margin-bottom:6px">Artisan Craft</div>
<div style="font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.6">Hand-finished details on every pair</div>
</div>
<div style="text-align:center;padding:16px">
<div style="font-size:2rem;margin-bottom:12px">🌿</div>
<div style="font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--cream);margin-bottom:6px">Sustainable Sourcing</div>
<div style="font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.6">Materials ethically sourced globally</div>
</div>
<div style="text-align:center;padding:16px">
<div style="font-size:2rem;margin-bottom:12px">🚚</div>
<div style="font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--cream);margin-bottom:6px">Free Delivery</div>
<div style="font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.6">On all orders, worldwide</div>
</div>
<div style="text-align:center;padding:16px">
<div style="font-size:2rem;margin-bottom:12px">↩️</div>
<div style="font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--cream);margin-bottom:6px">30-Day Returns</div>
<div style="font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.6">Hassle-free, no questions asked</div>
</div>
</div>
</div>
</section>
<!-- SECOND PRODUCT ROW -->
<section class="section section-alt">
<div class="container">
<div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:48px">
<div>
<div class="section-label">More Favorites</div>
<h2 class="section-title">Bestsellers</h2>
<div class="divider" style="margin-bottom:0"></div>
</div>
</div>
<div class="product-grid" id="home-product-grid-2"></div>
</div>
</section>
<!-- NEWSLETTER -->
<section class="section" style="background:linear-gradient(135deg,#2c2420 0%,#1a1a1a 60%,#2c2c38 100%);padding:80px 32px">
<div class="container" style="text-align:center;max-width:560px">
<div class="section-label" style="color:var(--gold);justify-content:center;display:flex">Join the Circle</div>
<h2 style="font-family:'Playfair Display',serif;font-size:clamp(1.6rem,4vw,2.8rem);font-weight:800;color:var(--white);margin:12px 0 16px">First to Know. First to Step.</h2>
<p style="color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:36px;line-height:1.7">Early access to new drops, exclusive offers, and stories behind the craft — delivered thoughtfully.</p>
<div style="display:flex;gap:0;flex-wrap:wrap;justify-content:center">
<input type="email" placeholder="Your email address" style="flex:1;min-width:220px;padding:16px 20px;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:var(--white);font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none">
<button class="btn-primary" style="min-width:140px;white-space:nowrap">Subscribe</button>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brand">
<div style="font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:900;color:var(--white);letter-spacing:.06em">IN<span style="color:var(--gold)">DURE</span></div>
<p>Footwear designed with mathematical precision and soulful intent. Worn by those who choose quality over compromise.</p>
<div class="footer-socials" style="margin-top:20px">
<a class="social-link" href="#">𝕏</a>
<a class="social-link" href="#">📷</a>
<a class="social-link" href="#">📘</a>
<a class="social-link" href="#">▶</a>
</div>
</div>
<div class="footer-col">
<h4>Collections</h4>
<a href="#" onclick="navigate('shop');return false">Sandals</a>
<a href="#" onclick="navigate('shop');return false">Peshawri Chapal</a>
<a href="#" onclick="navigate('shop');return false">Chelsea Boots</a>
<a href="#" onclick="navigate('shop');return false">Formal Shoes</a>
<a href="#" onclick="navigate('shop');return false">Casual Shoes</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="#" onclick="navigate('about');return false">Our Story</a>
<a href="#" onclick="navigate('contact');return false">Contact</a>
<a href="#">Careers</a>
<a href="#">Press</a>
</div>
<div class="footer-col">
<h4>Support</h4>
<a href="#">Sizing Guide</a>
<a href="#">Returns</a>
<a href="#">Shipping Info</a>
<a href="#">FAQ</a>
<a href="#">Privacy Policy</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 Indure. All rights reserved.</span>
<span>Crafted with intention.</span>
</div>
</div>
</footer>
</div>
<!-- ════════════════ SHOP PAGE ════════════════ -->
<div id="page-shop" class="page">
<div class="shop-header">
<div class="shop-header-inner">
<div style="font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px">The Collection</div>
<h1 style="font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:var(--white);margin-bottom:6px">Every Step, Elevated</h1>
<p style="color:rgba(255,255,255,.5);font-size:.92rem;max-width:400px;line-height:1.65">From morning ritual to evening presence — eight carefully designed silhouettes for the modern individual.</p>
<div class="shop-filters" id="shop-filters">
<button class="filter-chip active" data-filter="all">All</button>
<button class="filter-chip" data-filter="Sandals">Sandals</button>
<button class="filter-chip" data-filter="Peshawri Chapal">Peshawri</button>
<button class="filter-chip" data-filter="Chelsea">Chelsea</button>
<button class="filter-chip" data-filter="Boots">Boots</button>
<button class="filter-chip" data-filter="Formal Shoes">Formal</button>
<button class="filter-chip" data-filter="Casual Shoes">Casual</button>
</div>
</div>
</div>
<div class="shop-body">
<div class="product-grid" id="shop-product-grid"></div>
</div>
<footer>
<div class="footer-inner">
<div class="footer-bottom">
<span>© 2025 Indure. All rights reserved.</span>
<button class="btn-primary" style="font-size:.78rem;padding:10px 24px" onclick="navigate('home')">← Back Home</button>
</div>
</div>
</footer>
</div>
<!-- ════════════════ PRODUCT PAGE ════════════════ -->
<div id="page-product" class="page">
<div class="product-page-wrap">
<div>
<button class="back-btn" onclick="navigate('shop')">← Back to Shop</button>
<div class="product-main-img gi-1" id="product-main-img" style="position:relative;min-height:460px">
<div class="shoe-icon" style="font-size:6rem;position:absolute;bottom:32px;right:32px;opacity:.15">👟</div>
</div>
<div class="product-thumbs" id="product-thumbs"></div>
</div>
<div class="product-info">
<div class="product-cat" id="product-cat">Sandals</div>
<h1 class="product-title" id="product-title">Signature Sandals Edition</h1>
<div class="product-stars">
<span class="stars-display" id="product-stars">★★★★☆</span>
<span class="review-count" id="product-reviews">(142 reviews)</span>
</div>
<div class="stock-badge">In Stock — Ready to Ship</div>
<div class="price-display">
<div style="display:flex;align-items:baseline;flex-wrap:wrap;gap:4px">
<span class="price-current-lg" id="product-price-display">$88.99</span>
<span class="price-was-lg" id="product-was-display" style="display:none"></span>
<span class="price-save-lg" id="product-save-display" style="display:none"></span>
</div>
</div>
<div style="margin-bottom:20px">
<div class="selector-label">Size</div>
<select class="size-selector" id="size-select" onchange="updatePrice()"></select>
</div>
<div style="margin-bottom:4px">
<div class="selector-label">Color — <span class="color-name-text" id="color-name-text" style="display:inline;font-size:.82rem;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0"></span></div>
<div class="color-swatches" id="color-swatches"></div>
</div>
<div class="qty-row">
<span class="qty-label">Qty</span>
<div class="qty-control">
<button class="qty-btn" onclick="changeQty(-1)">−</button>
<input type="number" class="qty-val" id="qty-input" value="1" min="1" max="99" onchange="clampQty()">
<button class="qty-btn" onclick="changeQty(1)">+</button>
</div>
</div>
<button class="add-to-cart-btn" id="add-to-cart-btn" onclick="addCurrentToCart()">Add to Cart — $88.99</button>
<button class="wishlist-btn">♡ Add to Wishlist</button>
<div class="product-meta">
<div class="meta-row"><strong>SKU:</strong> <span id="meta-sku">IND-001</span></div>
<div class="meta-row"><strong>Category:</strong> <span id="meta-cat">Sandals</span></div>
<div class="meta-row"><strong>Delivery:</strong> <span>Free — 3-5 business days</span></div>
<div class="meta-row"><strong>Returns:</strong> <span>Free 30-day returns</span></div>
</div>
</div>
</div>
</div>
<!-- ════════════════ CART PAGE ════════════════ -->
<div id="page-cart" class="page">
<div class="cart-wrap">
<div class="cart-header">
<button class="back-btn" onclick="navigate('shop')">← Continue Shopping</button>
<h1 class="cart-title">Your Cart</h1>
</div>
<div id="cart-content"></div>
</div>
</div>
<!-- ════════════════ CHECKOUT PAGE ════════════════ -->
<div id="page-checkout" class="page">
<div class="checkout-wrap">
<button class="back-btn" onclick="navigate('cart')">← Back to Cart</button>
<h1 style="font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:40px">Checkout</h1>
<div class="checkout-grid">
<div>
<form onsubmit="placeOrder(event)">
<div class="form-section">
<div class="form-section-title">Contact Information</div>
<div class="form-row">
<div class="form-group"><label>First Name</label><input type="text" required placeholder="James"></div>
<div class="form-group"><label>Last Name</label><input type="text" required placeholder="Okafor"></div>
</div>
<div class="form-group"><label>Email</label><input type="email" required placeholder="james@email.com"></div>
<div class="form-group"><label>Phone</label><input type="tel" placeholder="+1 (555) 000-0000"></div>
</div>
<div class="form-section">
<div class="form-section-title">Shipping Address</div>
<div class="form-group"><label>Address</label><input type="text" required placeholder="123 Meridian Ave"></div>
<div class="form-row">
<div class="form-group"><label>City</label><input type="text" required placeholder="New York"></div>
<div class="form-group"><label>State</label><input type="text" required placeholder="NY"></div>
</div>
<div class="form-row">
<div class="form-group"><label>ZIP Code</label><input type="text" required placeholder="10001"></div>
<div class="form-group"><label>Country</label><input type="text" required placeholder="United States"></div>
</div>
</div>
<div class="form-section">
<div class="form-section-title">Payment Details</div>
<div class="form-group"><label>Card Number</label><input type="text" required placeholder="4242 4242 4242 4242" maxlength="19"></div>
<div class="form-row">
<div class="form-group"><label>Expiry</label><input type="text" required placeholder="MM/YY" maxlength="5"></div>
<div class="form-group"><label>CVV</label><input type="text" required placeholder="123" maxlength="4"></div>
</div>
<div class="form-group"><label>Name on Card</label><input type="text" required placeholder="James Okafor"></div>
</div>
<button type="submit" class="place-order-btn">Place Order — Secure Checkout 🔒</button>
</form>
</div>
<div class="order-summary-side">
<div class="summary-title">Order Summary</div>
<div id="checkout-order-items"></div>
<div id="checkout-totals" style="margin-top:16px"></div>
</div>
</div>
</div>
</div>
<!-- ════════════════ ABOUT PAGE ════════════════ -->
<div id="page-about" class="page">
<section class="about-hero">
<div class="about-hero-inner">
<div>
<div style="font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px">Our Philosophy</div>
<h1 style="font-family:'Playfair Display',serif;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:900;color:var(--white);line-height:1.08;margin-bottom:20px">Shoes that <span style="background:linear-gradient(135deg,var(--gold),var(--dusty-rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">tell</span><br>your story</h1>
<p style="color:rgba(255,255,255,.6);font-size:1rem;line-height:1.75;max-width:420px;margin-bottom:32px">Indure was born from a simple conviction: that the shoes you wear each day should be worthy of the life you're building. We design footwear at the intersection of heritage tradition and forward-looking modernism.</p>
<button class="btn-primary" onclick="navigate('shop')">Explore Collection →</button>
</div>
<div class="about-img-block"></div>
</div>
</section>
<section class="section section-alt">
<div class="container">
<div style="max-width:720px;margin:0 auto;text-align:center">
<div class="section-label" style="justify-content:center;display:flex">The Indure Standard</div>
<h2 class="section-title">Precision. Integrity. Form.</h2>
<div class="divider" style="margin:16px auto 24px"></div>
<p style="color:var(--muted);font-size:.95rem;line-height:1.8">Every collection begins with weeks of material research. We source leathers from tanneries with traceable processes, partner with skilled artisans across three continents, and obsess over the details that most will never notice — but will always feel. Indure isn't a shoe brand. It's a commitment to how you show up.</p>
</div>
<div class="values-grid" style="margin-top:64px">
<div class="value-card">
<div class="value-icon">🏺</div>
<div class="value-title">Heritage Craft</div>
<div class="value-text">Drawing on centuries-old techniques from Peshawar to Milan, each silhouette honors the lineage of footwear mastery while embracing contemporary proportions.</div>
</div>
<div class="value-card">
<div class="value-icon">📐</div>
<div class="value-title">Mathematical Design</div>
<div class="value-text">Clean grid systems, precise proportions, and balanced silhouettes define every Indure product. Beauty through systematic thinking — nothing superfluous.</div>
</div>
<div class="value-card">
<div class="value-icon">🌍</div>
<div class="value-title">Global Perspective</div>
<div class="value-text">From the Peshawri Chapal of the northwest frontier to the Chelsea boot of swinging London — we celebrate footwear as cultural dialogue.</div>
</div>
</div>
</div>
</section>
<section class="section section-dark">
<div class="container">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:48px;text-align:center">
<div><div style="font-family:'Playfair Display',serif;font-size:3rem;font-weight:900;color:var(--gold)">2019</div><div style="font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px">Year Founded</div></div>
<div><div style="font-family:'Playfair Display',serif;font-size:3rem;font-weight:900;color:var(--gold)">12K+</div><div style="font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px">Pairs Sold</div></div>
<div><div style="font-family:'Playfair Display',serif;font-size:3rem;font-weight:900;color:var(--gold)">3</div><div style="font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px">Continents</div></div>
<div><div style="font-family:'Playfair Display',serif;font-size:3rem;font-weight:900;color:var(--gold)">4.9</div><div style="font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px">Avg Rating</div></div>
</div>
</div>
</section>
<footer>
<div class="footer-inner">
<div class="footer-bottom">
<span>© 2025 Indure. All rights reserved.</span>
<button class="btn-primary" style="font-size:.78rem;padding:10px 24px" onclick="navigate('home')">← Back Home</button>
</div>
</div>
</footer>
</div>
<!-- ════════════════ CONTACT PAGE ════════════════ -->
<div id="page-contact" class="page">
<div class="contact-wrap">
<button class="back-btn" onclick="navigate('home')">← Back Home</button>
<div class="section-label">Get in Touch</div>
<h1 style="font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin-bottom:8px">We'd love to<br>hear from you</h1>
<div class="divider"></div>
<p style="color:var(--muted);font-size:.95rem;line-height:1.75;max-width:480px">Questions about sizing, orders, or just want to talk shoes? Our team responds within 24 hours, always with care.</p>
<div class="contact-grid">
<div>
<div class="contact-info-item"><span class="contact-icon">📍</span><div><strong style="display:block;font-weight:700;margin-bottom:4px">Studio</strong><span style="color:var(--muted);font-size:.88rem">12 Meridian Lane, Design Quarter<br>New York, NY 10001</span></div></div>
<div class="contact-info-item"><span class="contact-icon">✉️</span><div><strong style="display:block;font-weight:700;margin-bottom:4px">Email</strong><span style="color:var(--muted);font-size:.88rem">hello@indure.co<br>orders@indure.co</span></div></div>
<div class="contact-info-item"><span class="contact-icon">📞</span><div><strong style="display:block;font-weight:700;margin-bottom:4px">Phone</strong><span style="color:var(--muted);font-size:.88rem">+1 (212) 555-0192<br>Mon–Fri, 9am–6pm EST</span></div></div>
<div class="contact-info-item"><span class="contact-icon">⏰</span><div><strong style="display:block;font-weight:700;margin-bottom:4px">Response Time</strong><span style="color:var(--muted);font-size:.88rem">Within 24 hours guaranteed<br>Usually much faster</span></div></div>
</div>
<div class="contact-form-wrap">
<form onsubmit="submitContact(event)">
<div class="form-group" style="margin-bottom:16px"><label style="font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px">Full Name</label><input type="text" required placeholder="Your name" style="width:100%"></div>
<div class="form-group" style="margin-bottom:16px"><label style="font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px">Email</label><input type="email" required placeholder="your@email.com" style="width:100%"></div>
<div class="form-group" style="margin-bottom:16px"><label style="font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px">Subject</label><input type="text" placeholder="Order inquiry, sizing help..." style="width:100%"></div>
<div class="form-group" style="margin-bottom:24px"><label style="font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px">Message</label><textarea required placeholder="Tell us how we can help..." style="width:100%"></textarea></div>
<button type="submit" class="btn-primary" style="width:100%;justify-content:center">Send Message →</button>
</form>
</div>
</div>
</div>
<footer>
<div class="footer-inner">
<div class="footer-bottom">
<span>© 2025 Indure. All rights reserved.</span>
<span>Crafted with intention.</span>
</div>
</div>
</footer>
</div>
<script>
// ══════════════════════════════════════════════
// PRODUCTS DATA
// ══════════════════════════════════════════════
const PRODUCTS = [
{
id:0, name:'Signature Sandals Edition', category:'Sandals',
basePrice:88.99, compareAtPrice:124.59,
description:'Architecturally crafted for the modern individual — the Signature Sandals blend raw material integrity with minimal design language. Premium leather straps, cushioned footbed, and a silhouette that ages beautifully with every wear.',
gradClass:'gi-1', rating:4, reviewCount:142, sku:'IND-001',
sizes:[{label:'One Size',priceDelta:0}],
colors:[{name:'Espresso',hex:'#3c1414',priceDelta:0},{name:'Ivory',hex:'#fffff0',priceDelta:0},{name:'Dusty Rose',hex:'#dcae96',priceDelta:12}],
badge:'sale'
},
{
id:1, name:'Studio Peshawri Chapal Set', category:'Peshawri Chapal',
basePrice:101.99, compareAtPrice:null,
description:'Rooted in centuries of northwest frontier artisanship, the Studio Peshawri Chapal reinterprets a classic form through a contemporary material lens. Handwoven leather upper, broad footbed, and quiet authority.',
gradClass:'gi-2', rating:5, reviewCount:89, sku:'IND-002',
sizes:[{label:'6',priceDelta:0},{label:'8',priceDelta:0},{label:'10',priceDelta:0},{label:'12',priceDelta:3},{label:'14',priceDelta:5}],
colors:[{name:'Storm Grey',hex:'#4f5d75',priceDelta:0},{name:'Sunrise',hex:'#ffcf48',priceDelta:5},{name:'Deep Plum',hex:'#4a0e4e',priceDelta:8},{name:'Mint',hex:'#98fb98',priceDelta:0}],
badge:'new'
},
{
id:2, name:'Classic Chelsea Drop', category:'Chelsea',
basePrice:114.99, compareAtPrice:null,
description:'The Chelsea silhouette refined for daily wear. Elastic gore panels for slip-on ease, a sleek pull tab, and a low stacked heel — this is the boot that goes with everything, effortlessly.',
gradClass:'gi-3', rating:4, reviewCount:207, sku:'IND-003',
sizes:[{label:'S',priceDelta:0},{label:'M',priceDelta:0},{label:'L',priceDelta:0},{label:'XL',priceDelta:5},{label:'XXL',priceDelta:8}],
colors:[{name:'Midnight Black',hex:'#1a1a2e',priceDelta:0},{name:'Cloud White',hex:'#f5f5f0',priceDelta:0},{name:'Ocean Blue',hex:'#0077b6',priceDelta:5}],
badge:'new'
},
{
id:3, name:'Modern Boots Favorite', category:'Boots',
basePrice:112.99, compareAtPrice:158.19,
description:'Built for the terrain of modern life. The Modern Boots Favorite features a water-resistant upper, Vibram-inspired outsole, and a thoughtful silhouette that transitions from pavement to trail without compromise.',
gradClass:'gi-4', rating:4, reviewCount:174, sku:'IND-004',
sizes:[{label:'XS',priceDelta:0},{label:'S',priceDelta:0},{label:'M',priceDelta:0},{label:'L',priceDelta:0},{label:'XL',priceDelta:5}],
colors:[{name:'Charcoal',hex:'#36454f',priceDelta:0},{name:'Sand',hex:'#c2b280',priceDelta:0},{name:'Terracotta',hex:'#c04000',priceDelta:0},{name:'Sage',hex:'#87ae73',priceDelta:8}],
badge:'sale'
},
{
id:4, name:'Limited Formal Shoes Edition', category:'Formal Shoes',
basePrice:125.99, compareAtPrice:null,
description:'Reserved for moments that matter. The Limited Formal Shoes Edition channels classic Oxford sensibility through a modern last — slim profile, fine grain leather, and a mirror-finish finish that speaks before you do.',
gradClass:'gi-5', rating:5, reviewCount:63, sku:'IND-005',
sizes:[{label:'Small',priceDelta:0},{label:'Medium',priceDelta:8},{label:'Large',priceDelta:15}],
colors:[{name:'Pearl',hex:'#f0ead6',priceDelta:0},{name:'Blush',hex:'#de6fa1',priceDelta:5},{name:'Navy',hex:'#1b2a4a',priceDelta:0}],
badge:'new'
},
{
id:5, name:'Premium Casual Shoes Set', category:'Casual Shoes',
basePrice:138.99, compareAtPrice:null,
description:'When off-duty means no compromise. The Premium Casual Shoes Set delivers comfort without surrendering style — a vulcanised sole, organic cotton lining, and a clean low-top silhouette for everyday expression.',
gradClass:'gi-6', rating:4, reviewCount:118, sku:'IND-006',
sizes:[{label:'One Size',priceDelta:0}],
colors:[{name:'Forest',hex:'#228b22',priceDelta:0},{name:'Rust',hex:'#b7410e',priceDelta:0},{name:'Cream',hex:'#fffdd0',priceDelta:0},{name:'Slate',hex:'#708090',priceDelta:10}],
badge:null
},
{
id:6, name:'Everyday Sandals Drop', category:'Sandals',
basePrice:136.99, compareAtPrice:191.79,
description:'A sandal built for the long days and warm evenings. Full-grain leather strap, anatomically contoured footbed, and adjustable buckle closure make the Everyday Sandals Drop your most-reached-for pair.',
gradClass:'gi-7', rating:4, reviewCount:93, sku:'IND-007',
sizes:[{label:'6',priceDelta:0},{label:'8',priceDelta:0},{label:'10',priceDelta:0},{label:'12',priceDelta:3},{label:'14',priceDelta:5}],
colors:[{name:'Espresso',hex:'#3c1414',priceDelta:0},{name:'Ivory',hex:'#fffff0',priceDelta:0},{name:'Dusty Rose',hex:'#dcae96',priceDelta:12}],
badge:'sale'
},
{
id:7, name:'Refined Peshawri Chapal Favorite', category:'Peshawri Chapal',
basePrice:149.99, compareAtPrice:null,
description:'The apex of the Peshawri tradition. Premium hand-tanned cowhide, intricate woven detailing, and a broader stance for supreme all-day comfort. A statement of cultural pride and modern sensibility in one silhouette.',
gradClass:'gi-8', rating:5, reviewCount:56, sku:'IND-008',
sizes:[{label:'S',priceDelta:0},{label:'M',priceDelta:0},{label:'L',priceDelta:0},{label:'XL',priceDelta:5},{label:'XXL',priceDelta:8}],
colors:[{name:'Storm Grey',hex:'#4f5d75',priceDelta:0},{name:'Sunrise',hex:'#ffcf48',priceDelta:5},{name:'Deep Plum',hex:'#4a0e4e',priceDelta:8},{name:'Mint',hex:'#98fb98',priceDelta:0}],
badge:'new'
}
];
// ══════════════════════════════════════════════
// STATE
// ══════════════════════════════════════════════
let cart = JSON.parse(localStorage.getItem('indure_cart') || '[]');
let currentProductId = 0;
let selectedSizeIdx = 0;
let selectedColorIdx = 0;
let currentQty = 1;
let currentPage = 'home';
let shopFilter = 'all';
// ══════════════════════════════════════════════
// NAVIGATION
// ══════════════════════════════════════════════
function navigate(page, productId) {
if(productId !== undefined) { currentProductId = productId; }
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById('page-' + page).classList.add('active');
currentPage = page;
window.scrollTo({top:0,behavior:'smooth'});
updateNavLinks(page);
if(page === 'product') renderProductPage(currentProductId);
if(page === 'cart') renderCart();
if(page === 'shop') renderShop();
if(page === 'checkout') renderCheckoutSummary();
}
function updateNavLinks(page) {
document.querySelectorAll('.nav-link').forEach(a => a.classList.remove('active'));
}
function openProduct(id) {
navigate('product', id);
}
// ══════════════════════════════════════════════
// MOBILE MENU
// ══════════════════════════════════════════════
function toggleMobileMenu() {
document.getElementById('mobile-menu').classList.toggle('open');
}
// ══════════════════════════════════════════════
// CART BADGE
// ══════════════════════════════════════════════
function updateCartBadge() {
const total = cart.reduce((s,i) => s + i.qty, 0);
document.getElementById('cart-badge').textContent = total;
}
function saveCart() {
localStorage.setItem('indure_cart', JSON.stringify(cart));
updateCartBadge();
}
// ══════════════════════════════════════════════
// TOAST
// ══════════════════════════════════════════════
function showToast(msg) {
const t = document.getElementById('toast');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 3000);
}
// ══════════════════════════════════════════════
// RENDER PRODUCT CARD
// ══════════════════════════════════════════════
function renderStars(rating) {
let s = '';
for(let i=1;i<=5;i++) s += i<=rating ? '★' : '☆';
return s;
}
function calcSavePercent(base, comp) {
return Math.round((1 - base/comp)*100);
}
function renderProductCard(p) {
const hasSale = p.compareAtPrice && p.compareAtPrice > p.basePrice;
const badge = p.badge === 'sale' ? '<div class="card-badge sale">Sale</div>' : p.badge === 'new' ? '<div class="card-badge new">New</div>' : '';
const saveTag = hasSale ? `<span class="price-save">Save ${calcSavePercent(p.basePrice,p.compareAtPrice)}%</span>` : '';
const wasTag = hasSale ? `<span class="price-was">$${p.compareAtPrice.toFixed(2)}</span>` : '';
return `
<div class="product-card" onclick="openProduct(${p.id})">
<div class="card-img ${p.gradClass}">
${badge}
<div class="shoe-icon">👟</div>
</div>
<div class="card-body">
<div class="card-cat">${p.category}</div>
<div class="card-name">${p.name}</div>
<div class="card-stars">${renderStars(p.rating)} <span>(${p.reviewCount})</span></div>
<div class="card-price">
<span class="price-current">$${p.basePrice.toFixed(2)}</span>
${wasTag}${saveTag}
</div>
</div>
</div>`;
}
// ══════════════════════════════════════════════
// HOME GRIDS
// ══════════════════════════════════════════════
function renderHomeGrids() {
const g1 = document.getElementById('home-product-grid');
const g2 = document.getElementById('home-product-grid-2');
if(g1) g1.innerHTML = PRODUCTS.slice(0,4).map(renderProductCard).join('');
if(g2) g2.innerHTML = PRODUCTS.slice(4,8).map(renderProductCard).join('');
}
// ══════════════════════════════════════════════
// SHOP PAGE
// ══════════════════════════════════════════════
function renderShop() {
const grid = document.getElementById('shop-product-grid');
if(!grid) return;
const filtered = shopFilter === 'all' ? PRODUCTS : PRODUCTS.filter(p => p.category === shopFilter);
grid.innerHTML = filtered.length ? filtered.map(renderProductCard).join('') : '<div class="no-items-msg">No products in this category yet.</div>';
}
function initShopFilters() {
const container = document.getElementById('shop-filters');
if(!container) return;
container.addEventListener('click', e => {
const chip = e.target.closest('.filter-chip');
if(!chip) return;
container.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
chip.classList.add('active');
shopFilter = chip.dataset.filter;
renderShop();
});
}
// ══════════════════════════════════════════════
// PRODUCT PAGE
// ══════════════════════════════════════════════
function renderProductPage(id) {
const p = PRODUCTS[id];
selectedSizeIdx = 0;
selectedColorIdx = 0;
currentQty = 1;
document.getElementById('product-cat').textContent = p.category;
document.getElementById('product-title').textContent = p.name;
document.getElementById('meta-sku').textContent = p.sku;
document.getElementById('meta-cat').textContent = p.category;
document.getElementById('product-reviews').textContent = `(${p.reviewCount} reviews)`;
document.getElementById('product-stars').textContent = renderStars(p.rating);
const mainImg = document.getElementById('product-main-img');
mainImg.className = 'product-main-img ' + p.gradClass;
mainImg.style.minHeight = '460px';
mainImg.style.position = 'relative';
mainImg.innerHTML = '<div style="position:absolute;bottom:32px;right:32px;font-size:6rem;opacity:.1;transform:rotate(-15deg)">👟</div>';
const thumbs = document.getElementById('product-thumbs');
thumbs.innerHTML = [p.gradClass,'gi-2','gi-5','gi-7'].map((g,i) =>
`<div class="thumb ${g} ${i===0?'active':''}" onclick="selectThumb(this,'${g}')"></div>`
).join('');
const sizeSelect = document.getElementById('size-select');
sizeSelect.innerHTML = p.sizes.map((s,i) =>
`<option value="${i}">${s.label}${s.priceDelta>0?' (+$'+s.priceDelta+')':''}</option>`
).join('');
const swatches = document.getElementById('color-swatches');
swatches.innerHTML = p.colors.map((c,i) =>
`<div class="swatch ${i===0?'active':''}" style="background-color:${c.hex}" title="${c.name}${c.priceDelta>0?' (+$'+c.priceDelta+')':''}" onclick="selectColor(${i},this)"></div>`
).join('');
document.getElementById('color-name-text').textContent = p.colors[0].name + (p.colors[0].priceDelta > 0 ? ` (+$${p.colors[0].priceDelta})` : '');
document.getElementById('qty-input').value = 1;
updatePrice();
}
function selectThumb(el, gradClass) {
document.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));
el.classList.add('active');
const mainImg = document.getElementById('product-main-img');
mainImg.className = 'product-main-img ' + gradClass;
mainImg.style.minHeight = '460px';
mainImg.style.position = 'relative';
mainImg.innerHTML = '<div style="position:absolute;bottom:32px;right:32px;font-size:6rem;opacity:.1;transform:rotate(-15deg)">👟</div>';
}
function selectColor(idx, el) {
selectedColorIdx = idx;
document.querySelectorAll('.swatch').forEach(s => s.classList.remove('active'));
el.classList.add('active');
const p = PRODUCTS[currentProductId];
const c = p.colors[idx];
document.getElementById('color-name-text').textContent = c.name + (c.priceDelta > 0 ? ` (+$${c.priceDelta})` : '');
updatePrice();
}
function updatePrice() {
const p = PRODUCTS[currentProductId];
const sizeIdx = parseInt(document.getElementById('size-select').value) || 0;
selectedSizeIdx = sizeIdx;
const sizeDelta = p.sizes[sizeIdx].priceDelta || 0;
const colorDelta = p.colors[selectedColorIdx].priceDelta || 0;
const finalPrice = p.basePrice + sizeDelta + colorDelta;
document.getElementById('product-price-display').textContent = '$' + finalPrice.toFixed(2);
document.getElementById('add-to-cart-btn').textContent = 'Add to Cart — $' + finalPrice.toFixed(2);
const wasEl = document.getElementById('product-was-display');
const saveEl = document.getElementById('product-save-display');
if(p.compareAtPrice && p.compareAtPrice > p.basePrice) {
wasEl.textContent = '$' + p.compareAtPrice.toFixed(2);
wasEl.style.display = 'inline';
saveEl.textContent = 'Save ' + calcSavePercent(finalPrice, p.compareAtPrice) + '%';
saveEl.style.display = 'inline-block';
} else {
wasEl.style.display = 'none';
saveEl.style.display = 'none';
}
}
function changeQty(delta) {
const input = document.getElementById('qty-input');
let v = parseInt(input.value) + delta;
if(v < 1) v = 1;
if(v > 99) v = 99;
input.value = v;
currentQty = v;
}
function clampQty() {
const input = document.getElementById('qty-input');
let v = parseInt(input.value);
if(isNaN(v) || v < 1) v = 1;
if(v > 99) v = 99;
input.value = v;
currentQty = v;
}
function addCurrentToCart() {
const p = PRODUCTS[currentProductId];
const qty = parseInt(document.getElementById('qty-input').value) || 1;
const sizeIdx = parseInt(document.getElementById('size-select').value) || 0;
const size = p.sizes[sizeIdx];
const color = p.colors[selectedColorIdx];
const finalPrice = p.basePrice + size.priceDelta + color.priceDelta;
const key = `${p.id}__${sizeIdx}__${selectedColorIdx}`;
const existing = cart.find(i => i.key === key);
if(existing) {
existing.qty += qty;
} else {
cart.push({
key, productId: p.id, name: p.name, category: p.category,
gradClass: p.gradClass, size: size.label, sizeDelta: size.priceDelta,
color: color.name, colorHex: color.hex, colorDelta: color.priceDelta,
unitPrice: finalPrice, qty
});
}
saveCart();
showToast('✓ Added to cart — ' + p.name);
}
// ══════════════════════════════════════════════
// CART PAGE
// ══════════════════════════════════════════════
function renderCart() {
const container = document.getElementById('cart-content');
if(!container) return;
if(cart.length === 0) {
container.innerHTML = `
<div class="cart-empty">
<div class="cart-empty-icon">🛒</div>
<h2>Your cart is empty</h2>
<p>Looks like you haven't added anything yet. Explore our collection and find your perfect pair.</p>
<button class="btn-primary" onclick="navigate('shop')">Continue Shopping →</button>
</div>`;
return;
}
const subtotal = cart.reduce((s,i) => s + i.unitPrice * i.qty, 0);
const shipping = 0;
const total = subtotal + shipping;
const itemsHTML = cart.map((item,idx) => `
<div class="cart-item">
<div class="cart-item-img ${item.gradClass}" style="position:relative;overflow:hidden">
<div style="position:absolute;bottom:4px;right:4px;font-size:2rem;opacity:.2">👟</div>
</div>
<div>
<div class="cart-item-name">${item.name}</div>
<div class="cart-item-variant">Size: ${item.size}${item.sizeDelta>0?' (+$'+item.sizeDelta+')':''} · Color: <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.colorHex};vertical-align:middle;margin:0 3px;border:1px solid rgba(0,0,0,.15)"></span>${item.color}${item.colorDelta>0?' (+$'+item.colorDelta+')':''}</div>
<div class="cart-item-price">$${item.unitPrice.toFixed(2)} each</div>
<div class="cart-item-qty">
<button onclick="cartChangeQty(${idx},-1)">−</button>
<span>${item.qty}</span>
<button onclick="cartChangeQty(${idx},1)">+</button>
</div>
<button class="cart-remove" onclick="cartRemove(${idx})">Remove</button>
</div>
<div style="font-weight:700;font-size:1.05rem;color:var(--ink);white-space:nowrap">$${(item.unitPrice*item.qty).toFixed(2)}</div>
</div>`).join('');
container.innerHTML = `
<div class="cart-layout">
<div>${itemsHTML}</div>
<div class="cart-summary">
<div class="summary-title">Order Summary</div>
<div class="summary-row"><span>Subtotal (${cart.reduce((s,i)=>s+i.qty,0)} items)</span><span>$${subtotal.toFixed(2)}</span></div>
<div class="summary-row"><span>Shipping</span><span style="color:#2d7a44;font-weight:600">Free</span></div>
<div class="summary-row"><span>Tax (estimated)</span><span>$${(subtotal*0.08).toFixed(2)}</span></div>
<div class="summary-row total"><span>Total</span><span>$${(total+subtotal*0.08).toFixed(2)}</span></div>
<a href="#" class="checkout-btn" onclick="navigate('checkout');return false">Proceed to Checkout →</a>
<button onclick="navigate('shop')" style="display:block;width:100%;padding:12px;background:transparent;border:none;color:var(--muted);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;margin-top:12px">← Continue Shopping</button>
</div>
</div>`;
}
function cartChangeQty(idx, delta) {
cart[idx].qty += delta;
if(cart[idx].qty <= 0) cart.splice(idx, 1);
saveCart();
renderCart();
}
function cartRemove(idx) {
cart.splice(idx, 1);
saveCart();
renderCart();
showToast('Item removed from cart');
}
// ══════════════════════════════════════════════
// CHECKOUT SUMMARY
// ══════════════════════════════════════════════
function renderCheckoutSummary() {
const itemsEl = document.getElementById('checkout-order-items');
const totalsEl = document.getElementById('checkout-totals');
if(!itemsEl || !totalsEl) return;
const subtotal = cart.reduce((s,i) => s+i.unitPrice*i.qty, 0);
const tax = subtotal*0.08;
const total = subtotal + tax;
itemsEl.innerHTML = cart.map(item => `
<div class="order-item">
<div class="order-item-img ${item.gradClass}" style="position:relative;overflow:hidden">
<div style="position:absolute;bottom:2px;right:2px;font-size:1.2rem;opacity:.2">👟</div>
</div>
<div class="order-item-info">
<strong>${item.name}</strong>
<span style="color:var(--muted)">${item.size} · ${item.color} × ${item.qty}</span>
</div>
<div class="order-item-price">$${(item.unitPrice*item.qty).toFixed(2)}</div>
</div>`).join('');
totalsEl.innerHTML = `
<div style="font-size:.85rem;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between"><span>Subtotal</span><span>$${subtotal.toFixed(2)}</span></div>
<div style="font-size:.85rem;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between"><span>Shipping</span><span style="color:#2d7a44">Free</span></div>
<div style="font-size:.85rem;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between"><span>Tax (8%)</span><span>$${tax.toFixed(2)}</span></div>
<div style="font-size:1.1rem;font-weight:800;color:var(--ink);display:flex;justify-content:space-between;padding-top:12px;border-top:2px solid var(--border)"><span>Total</span><span>$${total.toFixed(2)}</span></div>`;
}
function placeOrder(e) {
e.preventDefault();
cart = [];
saveCart();
showToast('🎉 Order placed successfully! Thank you.');
setTimeout(() => navigate('home'), 2000);
}
// ══════════════════════════════════════════════
// CONTACT FORM
// ══════════════════════════════════════════════
function submitContact(e) {
e.preventDefault();
showToast('✓ Message sent! We\'ll respond within 24 hours.');
e.target.reset();
}
// ══════════════════════════════════════════════
// MARQUEE
// ══════════════════════════════════════════════
function initMarquee() {
const items = ['Signature Sandals','Studio Peshawri Chapal','Classic Chelsea','Modern Boots','Limited Formal','Premium Casual','Everyday Sandals','Refined Peshawri'];
const track = document.getElementById('marquee-track');
if(!track) return;
const content = items.map(i => `<span class="marquee-item">${i} <span class="marquee-dot">✦</span></span>`).join('');
track.innerHTML = content + content;
}
// ══════════════════════════════════════════════
// SCROLL NAV EFFECT
// ══════════════════════════════════════════════
window.addEventListener('scroll', () => {
const nav = document.getElementById('main-nav');
if(window.scrollY > 60) {
nav.style.background = 'rgba(250,247,242,.96)';
nav.style.boxShadow = '0 4px 32px rgba(44,44,44,.14),0 1px 4px rgba(44,44,44,.08)';
} else {
nav.style.background = 'rgba(250,247,242,.82)';
nav.style.boxShadow = '0 4px 32px rgba(44,44,44,.1),0 1px 4px rgba(44,44,44,.06)';
}
}, {passive:true});
// ══════════════════════════════════════════════
// INIT
// ══════════════════════════════════════════════
document.addEventListener('DOMContentLoaded', () => {
updateCartBadge();
renderHomeGrids();
initMarquee();
initShopFilters();
});
</script>
</body>
</html>Generated on 5/14/2026, 4:17:07 PM • This site was built by Claude — unique HTML, CSS & JS generated by AI.