:root {
  --bg: #eee8dc;
  --panel: #ffffff;
  --ink: #111111;
  --ink-soft: #5c554c;
  --gold: #b6945f;
  --line: rgba(17, 17, 17, 0.08);
  --shadow: 0 18px 44px rgba(17, 17, 17, 0.075);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, #f6f2ea 0%, #ebe4d7 100%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: radial-gradient(#000 0.5px, transparent 0.5px);
  background-size: 8px 8px;
}

.site-header {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: min(980px, calc(100% - 22px));
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  background: rgba(246,242,234,0.84);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 14px 38px rgba(17,17,17,0.10);
}
.site-header.scrolled { min-height: 50px; width: min(900px, calc(100% - 34px)); }
.brand { display: inline-flex; align-items: center; gap: 12px; letter-spacing: 0.28em; font-weight: 900; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; display:grid; place-items:center; background: var(--ink); color: #f6f2ea; font-family: var(--serif); letter-spacing: 0; font-size: 1.15rem; }
.site-header.scrolled .brand-mark { width: 34px; height: 34px; }
.brand-word { font-size: 0.78rem; }
.desktop-nav, .header-actions { display:flex; align-items:center; gap: 20px; }
.desktop-nav a { font-size: 0.9rem; color: var(--ink-soft); }
.cart-button {
  border: 0;
  border-radius: 999px;
  background: #101010;
  color: white;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 900;
}
.cart-button strong {
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.78rem;
}

.section-pad { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 112px 0 54px; }
.store-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.store-head h1 { margin: 0; font-family: var(--serif); font-size: clamp(3.4rem, 9vw, 7rem); line-height: .9; letter-spacing: -.065em; }
.eyebrow { margin: 0 0 12px; color: var(--gold); text-transform: uppercase; letter-spacing: .34em; font-size: .72rem; font-weight: 900; }
.toolbar { display:flex; align-items:end; justify-content:space-between; gap: 16px; margin-bottom: 26px; }
.search-box { display:grid; gap: 8px; width: min(360px, 100%); }
.search-box label { font-weight:900; font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .18em; }
input, select { width: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.72); outline: none; }
input:focus, select:focus { border-color: rgba(182,148,95,.55); box-shadow: 0 0 0 4px rgba(182,148,95,.12); }
.filters { display:flex; flex-wrap:wrap; gap: 10px; }
.filter { border: 1px solid var(--line); background: rgba(255,255,255,.64); color: var(--ink-soft); border-radius: 999px; padding: 11px 15px; font-weight: 800; }
.filter.active { background: var(--ink); border-color: var(--ink); color:white; }
.catalog-select { margin-top: 10px; color: var(--ink); font-weight: 750; }

.product-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
.product-card {
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 26px 64px rgba(17,17,17,.10); }
.product-media { position: relative; min-height: 350px; display:grid; place-items:center; background: linear-gradient(180deg, #fbfaf7, #eee6d8); }
.product-media img { width: 100%; height: 100%; max-height: 315px; object-fit: contain; padding: 28px; }
.product-badge { position:absolute; top: 20px; left: 20px; background: rgba(17,17,17,.84); color: white; border-radius: 999px; padding: 9px 13px; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.product-info { padding: 26px; display:grid; gap: 18px; }
.product-meta { display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:start; gap: 16px; }
.product-title { margin: 0; font-family: var(--serif); font-size: clamp(2.05rem, 4.1vw, 3.25rem); line-height: .94; letter-spacing: -.055em; }
.product-subtitle { margin: 10px 0 0; color: var(--ink-soft); font-size: .98rem; }
.price { font-size: 1.18rem; font-weight: 950; padding-top: 4px; }
.product-description, .spec-row, .swatches { display: none !important; }
.size-row { display:flex; flex-wrap:wrap; gap: 9px; }
.size { border: 1px solid var(--line); background: rgba(255,255,255,.78); color: #111; border-radius: 15px; min-width: 50px; min-height: 50px; font-weight: 900; }
.size.selected { background: #111; color:white; border-color:#111; box-shadow: 0 10px 26px rgba(17,17,17,.16); }
.product-actions { display:grid; gap: 12px; }
.button { position: relative; overflow: hidden; display:inline-flex; align-items:center; justify-content:center; min-height: 56px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background:#111; color:white; border-color:#111; box-shadow: 0 16px 32px rgba(17,17,17,.13); }
.full-width { width: 100%; }
.catalog-status { display:flex; align-items:center; justify-content:center; gap: 14px; padding: 24px 0 4px; color: var(--ink-soft); font-weight: 800; }
.catalog-status button { border: 0; border-radius: 999px; background: #111; color: #fff; padding: 12px 18px; font-weight: 900; }

.site-footer { width:min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 42px; display:flex; justify-content:space-between; gap: 24px; color: var(--ink-soft); }
.site-footer strong { letter-spacing: .3em; color: var(--ink); }
.footer-links { display:flex; gap: 18px; flex-wrap:wrap; align-items:center; }
.cart-drawer { position: fixed; inset:0; background: rgba(17,17,17,0); pointer-events:none; transition: background .25s ease; z-index: 100; }
.cart-drawer.open { background: rgba(17,17,17,.42); pointer-events:auto; }
.cart-panel { position:absolute; top:0; right:0; width:min(470px, 100%); height:100%; background:#fbf8f3; padding:max(24px, env(safe-area-inset-top)) 26px 26px; transform: translateX(100%); transition: transform .28s ease; overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.22); }
.cart-drawer.open .cart-panel { transform: translateX(0); }
.cart-head { display:flex; align-items:start; justify-content:space-between; gap: 20px; margin-bottom: 26px; }
.cart-head h2 { margin: 0; font-family: var(--serif); font-size: 2.15rem; line-height: .98; }
.icon-button, .text-link { border: 1px solid var(--line); background: rgba(255,255,255,.7); border-radius: 999px; min-width: 42px; min-height: 42px; color: var(--ink); }
.text-link { padding: 0 16px; }
.cart-empty { display:none; padding:30px; text-align:center; border:1px dashed var(--line); border-radius:24px; color:var(--ink-soft); }
.cart-empty.show { display:block; }
.cart-items { display:grid; gap: 14px; }
.cart-item { display:grid; grid-template-columns:78px 1fr auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.cart-item img { width:78px; height:94px; object-fit:contain; border-radius:14px; background:#fff; }
.cart-item h3 { margin:0 0 6px; font-family:var(--serif); font-size:1.1rem; }
.cart-item p { margin:0; color:var(--ink-soft); font-size:.86rem; }
.qty { display:flex; align-items:center; gap:8px; margin-top:10px; }
.qty button, .remove-btn { border:1px solid var(--line); background:rgba(255,255,255,.65); border-radius:999px; min-width:30px; min-height:30px; }
.remove-btn { padding:7px 10px; color:var(--ink-soft); }
.cart-summary { padding:22px 0; }
.cart-summary div { display:flex; justify-content:space-between; font-size:1.2rem; }
.cart-summary small, .checkout-note { color:var(--ink-soft); }
.checkout-note { text-align:center; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 140%); z-index:120; background:#111; color:white; padding:14px 18px; border-radius:999px; box-shadow:0 18px 50px rgba(0,0,0,.24); transition:transform .24s ease; }
.toast.show { transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(18px); animation:rise .55s ease forwards; }
.delay-1 { animation-delay:.08s; }
@keyframes rise { to { opacity:1; transform:translateY(0); } }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; gap: 22px; }
  .section-pad { width: calc(100% - 32px); padding-top: 90px; }
  .product-media { min-height: 300px; }
  .product-media img { max-height: 260px; padding: 24px; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 70px; }
  .site-header { width: calc(100% - 18px); min-height: 50px; padding: 7px 8px; }
  .site-header.scrolled { width: calc(100% - 30px); min-height: 46px; }
  .desktop-nav, .brand-word { display:none; }
  .brand-mark { width:35px; height:35px; }
  .cart-button { min-height:38px; padding:0 12px; }
  .section-pad { width: calc(100% - 26px); padding-top: 86px; }
  .store-head { margin-bottom: 16px; }
  .store-head h1 { font-size: clamp(2.65rem, 14vw, 4.25rem); letter-spacing: -.055em; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  input, select { padding: 13px 15px; border-radius: 16px; }
  .filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; gap: 9px; }
  .filter { padding: 10px 13px; font-size: .9rem; }
  .product-grid { gap: 20px; }
  .product-card { border-radius: 28px; }
  .product-media { min-height: 252px; }
  .product-media img { max-height: 218px; padding: 18px; }
  .product-badge { top:15px; left:15px; padding:8px 11px; font-size:.58rem; letter-spacing:.18em; }
  .product-info { padding: 20px 18px 18px; gap: 16px; }
  .product-meta { grid-template-columns: 1fr auto; gap: 10px; }
  .product-title { font-size: clamp(1.85rem, 9.5vw, 2.8rem); line-height: .96; letter-spacing: -.045em; }
  .price { font-size:1.05rem; padding-top:3px; }
  .product-subtitle { margin-top:8px; font-size:.92rem; }
  .size-row { gap: 8px; }
  .size { min-width: 44px; min-height: 44px; border-radius: 13px; font-size: .9rem; }
  .button { min-height: 52px; font-size: .95rem; }
  .catalog-status { padding-top: 20px; }
  .site-footer { width: calc(100% - 32px); flex-direction: column; padding-bottom: 34px; }
  .cart-panel { padding: 22px; }
  .cart-item { grid-template-columns:72px 1fr; }
  .cart-item .remove-btn { grid-column:2; width:max-content; }
}