:root{
  --ink:#22303f;--muted:#5c6b7a;--paper:#fbf8f3;--paper2:#f2ede2;
  --amber:#e0862c;--amber-dark:#b96b1e;--navy:#22303f;--sage:#e7efe4;
  --rule:rgba(34,48,63,.14);--danger:#a23b2e;--success:#2f7a4d;
  --serif:"Iowan Old Style","Georgia",serif;--sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber-dark);outline-offset:3px}

.skip-link{position:fixed;left:16px;top:16px;transform:translateY(-160%);z-index:1000;background:#fff;padding:10px 14px}
.skip-link:focus{transform:translateY(0)}

.eyebrow{margin:0;font-size:12px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:var(--amber-dark)}

/* Header */
.site-header{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 5%;background:var(--paper);border-bottom:1px solid var(--rule)}
.wordmark{display:flex;align-items:baseline;gap:6px;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--navy)}
.wordmark small{font-family:var(--sans);font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--amber-dark);text-transform:uppercase}
.main-nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600}
.main-nav a{padding:6px 0;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav a.active{border-color:var(--amber)}
.header-actions{display:flex;align-items:center;gap:14px}
.search-form{display:flex;align-items:center;border:1px solid var(--rule);background:#fff}
.search-form input{border:0;background:transparent;padding:9px 12px;font-size:13px;width:170px;color:var(--ink)}
.search-form button{border:0;background:transparent;padding:9px 12px;cursor:pointer}
.bag-button{position:relative;border:1px solid var(--navy);background:var(--navy);color:#fff;padding:10px 16px;cursor:pointer;font-size:13px;font-weight:700}
.bag-button span.count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-inline-start:8px;border-radius:50%;background:var(--amber);color:#fff;font-size:11px}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding:60px 5%;background:var(--sage)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,54px);line-height:1.05;margin:14px 0}
.hero p{font-size:16px;color:var(--muted);max-width:440px;line-height:1.6}
.hero-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--amber);color:#fff;padding:13px 24px;font-weight:700;font-size:14px}
.hero-image{aspect-ratio:4/3;background:#ded0b8;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}

/* Category tiles */
.category-tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:50px 5%;max-width:1280px;margin:0 auto}
.category-tile{position:relative;padding:34px;background:var(--navy);color:#fff;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end}
.category-tile:nth-child(2){background:var(--amber-dark)}
.category-tile h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 6px}
.category-tile span{font-size:13px;opacity:.85}

/* Brand strip */
.brand-strip{padding:30px 5%;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.brand-strip .eyebrow{margin-bottom:14px}
.brand-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;font-family:var(--serif);font-size:18px;color:var(--muted)}

/* Section heading */
.section-heading{max-width:1280px;margin:0 auto;padding:50px 5% 24px;display:flex;justify-content:space-between;align-items:end;gap:20px}
.section-heading h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:6px 0 0}

/* Filter chips */
.filter-bar{max-width:1280px;margin:0 auto;padding:0 5% 26px;display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{border:1px solid var(--rule);background:#fff;padding:8px 16px;font-size:13px;cursor:pointer;border-radius:20px}
.filter-chip.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* Product grid */
.product-grid{max-width:1280px;margin:0 auto;padding:0 5% 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.product-card{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column;position:relative}
.product-card .discount-badge{position:absolute;top:10px;insert-inline-start:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;padding:4px 8px}
.product-card .p-image{aspect-ratio:1/1;background:var(--paper2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card .p-image img{width:100%;height:100%;object-fit:contain}
.product-card .p-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card .p-brand{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-dark);font-weight:700}
.product-card .p-name{font-size:14px;font-weight:600;line-height:1.35;min-height:38px}
.product-card .p-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.product-card .p-price strong{font-size:16px}
.product-card .p-price s{font-size:13px;color:var(--muted)}
.product-card .p-actions{display:flex;gap:8px;padding:0 16px 16px}
.product-card .add-button{flex:1;border:0;background:var(--navy);color:#fff;padding:10px;font-size:13px;font-weight:700;cursor:pointer}
.product-card .add-button:disabled{opacity:.5;cursor:not-allowed}
.product-card .quick-view{border:1px solid var(--rule);background:#fff;padding:10px 12px;font-size:13px;cursor:pointer}
.empty-msg{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}

/* Quick view modal */
.qv-backdrop{position:fixed;inset:0;background:rgba(20,25,30,.5);z-index:150}
.qv-modal{position:fixed;inset:0;margin:auto;max-width:760px;max-height:86vh;width:92vw;background:#fff;z-index:151;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr}
.qv-modal .qv-image{background:var(--paper2);display:flex;align-items:center;justify-content:center;padding:20px}
.qv-modal .qv-body{padding:28px}
.qv-close{position:absolute;top:14px;insert-inline-end:14px;border:0;background:#fff;width:34px;height:34px;font-size:20px;cursor:pointer;border-radius:50%}
@media(max-width:640px){.qv-modal{grid-template-columns:1fr}}

/* Delivery band */
.delivery-band{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:20px 5%;background:var(--navy);color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em}

/* FAQ */
.faq-section{max-width:900px;margin:0 auto;padding:60px 5%}
.faq-section details{border-bottom:1px solid var(--rule)}
.faq-section summary{padding:18px 0;cursor:pointer;font-weight:600;font-size:16px}
.faq-section details p{margin:0 0 18px;color:var(--muted);line-height:1.6}

/* Footer */
.site-footer{padding:44px 5%;background:var(--paper2);display:grid;gap:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:16px;font-size:13px}
.site-footer .fine-print{font-size:12px;color:var(--muted)}

/* Bag panel (checkout) */
.bag-panel{position:fixed;z-index:100;top:0;insert-inline-end:0;width:min(460px,100vw);height:100dvh;padding:28px;background:#fff;transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;overflow-y:auto;box-shadow:-16px 0 40px rgba(0,0,0,.15)}
.bag-panel.open{transform:translateX(0)}
.bag-backdrop{position:fixed;inset:0;background:rgba(20,25,30,.4);z-index:99}
.bag-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.bag-head h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:0}
.close-button{border:0;background:transparent;font-size:26px;cursor:pointer}
.bag-items{display:grid;gap:12px;padding:10px 0;flex:0 0 auto;max-height:220px;overflow-y:auto}
.bag-item{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.bag-item .qty{display:flex;align-items:center;gap:8px;margin-top:4px}
.bag-item .qty button{border:1px solid var(--rule);background:#fff;width:26px;height:26px;cursor:pointer}
.empty-bag{color:var(--muted);padding:20px 0}
.customer-fields{display:grid;gap:12px;padding:16px 0;border-top:1px solid var(--rule)}
.customer-fields label{display:grid;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.customer-fields input,.customer-fields textarea,.customer-fields select{border:1px solid var(--rule);background:var(--paper);padding:11px 12px;font:14px/1.4 var(--sans);color:var(--ink)}
.optional{font-size:9px;text-transform:none;color:#8a938d}
.bag-totals{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--rule);font-size:14px}
.bag-totals div{display:flex;justify-content:space-between}
.grand-total{font-weight:700;font-size:16px}
.payment-note{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--rule);font-size:12px}
.order-button{min-height:50px;border:0;background:var(--amber);color:#fff;font-weight:700;cursor:pointer;font-size:14px}
.order-button:disabled{opacity:.55;cursor:not-allowed}
.order-status{min-height:20px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.order-status[data-type="success"]{color:var(--success);font-weight:700}
.order-status[data-type="error"]{color:var(--danger)}

@media(max-width:820px){
  .hero{grid-template-columns:1fr}
  .category-tiles{grid-template-columns:1fr}
  .main-nav{display:none}
}