:root{
  --bg:#ffffff;
  --ink:#0c0c0c;
  --muted:#6b7280;
  --accent:#111111;
  --accent-ink:#ffffff;

  --pad:24px;
  --radius:999px;
  --maxw:1100px;

  --menu-w:320px;
  --shadow:0 20px 60px rgba(0,0,0,.18);
}

html { scroll-behavior: smooth; }


*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

/* --- Top bar --- */
.topbar{
  position:fixed; inset:0 0 auto 0; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid #eee; z-index:40;
}
.brand-mini{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.brand-mini img{width:26px; height:26px; display:block}
.brand-mini span{letter-spacing:.18em; font-weight:600; font-size:14px}

.hamburger{display:grid; gap:5px; width:42px; height:34px; padding:6px 8px; border:0; background:transparent; cursor:pointer}
.hamburger span{display:block; height:2px; background:var(--ink); border-radius:2px}

/* --- Splash --- */
.splash{
  min-height:100dvh; display:grid; place-items:center;
  padding:calc(var(--pad) + 60px) var(--pad) var(--pad); position:relative;
}
.brand{display:grid; justify-items:center; gap:10px; text-decoration:none; color:inherit; user-select:none}
.symbol{width:min(120px,32vw); height:auto; display:block}
.wordmark{letter-spacing:.22em; font-weight:600; font-size:clamp(22px,4vw,34px); line-height:1}

.buy{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%);
  padding:14px 28px; border:0; border-radius:var(--radius);
  background:var(--accent); color:var(--accent-ink);
  font-weight:700; letter-spacing:.08em; cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.buy:hover{transform:translateX(-50%) translateY(-1px)}
.buy:active{transform:translateX(-50%)}

/* --- Sections --- */
.section{scroll-margin-top:76px; padding:72px var(--pad)}
.container{max-width:var(--maxw); margin:0 auto}

.section h2{
  font-size:clamp(24px,4vw,36px);
  letter-spacing:.06em;
  margin:0 0 14px 0;
}
.muted{color:var(--muted)}

.about-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:start;
}
.about-grid .portrait img{
  width:100%; height:auto; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.08); display:block;
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
}

/* --- Contact form --- */
.form{display:grid; gap:16px; max-width:720px}
.field{display:grid; gap:8px}
label{font-weight:600; letter-spacing:.03em}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; color:var(--ink);
  font:inherit; outline: none;
}
input:focus, textarea:focus{border-color:#c7cdd8; box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.submit{
  justify-self:start; padding:12px 22px; border:0; border-radius:14px; background:var(--accent); color:var(--accent-ink);
  font-weight:700; letter-spacing:.06em; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.status{min-height:1.2em; color:var(--muted); margin-top:4px}

/* --- Menu (slide-over) --- */
.menu{position:fixed; inset:0; pointer-events:none; z-index:50; pointer-events: none;}
.menu-nav{
  position:absolute; top:0; right:0; height:100%; width:var(--menu-w);
  background:#fff; box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; padding:20px;
}
.menu[aria-hidden="false"] .menu-nav{transform:translateX(0)}

.menu-scrim{position:absolute; inset:0; background:rgba(0,0,0,.28); opacity:0; transition:opacity .2s ease}
.menu[aria-hidden="false"] .menu-scrim{opacity:1; pointer-events:auto}
.menu-link{
  text-decoration:none; color:var(--ink); font-weight:600; letter-spacing:.06em;
  padding:14px 10px; border-radius:12px;
}
.menu-link:hover{background:#f5f5f5}
.close{
  align-self:flex-end; font-size:28px; line-height:1; width:38px; height:38px;
  border:0; border-radius:10px; background:#f3f4f6; cursor:pointer; margin-bottom:8px;
}
.close:hover{background:#e5e7eb}

/* --- Footer --- */
.footer{padding:48px var(--pad); text-align:center}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .buy{transition:none}
  .menu-nav{transition:none}
  .menu-scrim{transition:none}
}

/* Slide-over menu */
.menu{
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;              /* ensures it doesn't block clicks when closed */
}
.menu[aria-hidden="false"]{
  pointer-events: auto;              /* enable interactions when open */
}

.menu-nav{
  position:absolute; top:0; right:0; height:100%; width:var(--menu-w);
  background:#fff; box-shadow: var(--shadow);
  transform: translateX(100%); transition: transform .25s ease;
  display:flex; flex-direction:column; padding:20px;
  z-index: 2;                        /* sits above the scrim */
}
.menu[aria-hidden="false"] .menu-nav{ transform: translateX(0) }

.menu-scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.28);
  opacity:0; transition: opacity .2s ease;
  z-index: 1;                        /* sits below the panel */
}
.menu[aria-hidden="false"] .menu-scrim{ opacity:1 }

/* Cart icon styles */
.menu-link { display: flex; align-items: center; gap: 10px; }  /* enhances your existing rule */
.menu-link .icon { width: 18px; height: 18px; flex: 0 0 auto; }

.section h2 { display: flex; align-items: center; gap: 8px; }
.section h2 .icon { width: 22px; height: 22px; transform: translateY(1px); }

/* (Icons inherit text color via stroke=currentColor) */

/* Cart icon + badge */
.menu-link { display: flex; align-items: center; gap: 10px; }
.icon-wrap { position: relative; display: inline-block; line-height: 0; }
.menu-link .icon { width: 18px; height: 18px; flex: 0 0 auto; }

.badge{
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transform: scale(0);
  transform-origin: 100% 0%;
  transition: transform .15s ease;
}
.badge.show { transform: scale(1); }

/* Secondary (outline) button for utility actions */
.btn-secondary{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-secondary:hover{
  background: #f7f7f8;
  border-color: #dcdfe5;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.btn-secondary:active{
  background: #f1f3f5;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ---------- Product section ---------- */
.product .container { display: grid; gap: 18px; }

/* Gallery */
.gallery{
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
.slides{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* square stage; tweak if needed */
  overflow: hidden;
  border-radius: 14px;
  background: #fafafa;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.slide.is-active{ opacity: 1; pointer-events: auto; }

.gallery .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer; font-size: 22px; line-height: 40px; text-align: center;
}
.gallery .prev{ left: 10px; }
.gallery .next{ right: 10px; }
.gallery .nav:hover{ background: #fff; }

/* Price + Add to cart row */
.buy-row{
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.price{
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
  padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 12px;
}

/* Keep buttons consistent with your existing .btn-primary */
/* THEME BUTTONS (shared styles) */
.btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Primary (matches your hero button aesthetic) */
.btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.btn-primary:active{ transform: translateY(0); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* Secondary (outline) */
.btn-secondary{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-secondary:hover{
  background: #f7f7f8;
  border-color: #dcdfe5;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.btn-secondary:active{
  background: #f1f3f5;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Make the hero button only handle positioning — uses .btn + .btn-primary for style */
.buy{
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
}
/* keep your existing :hover/:active transforms on .btn-primary */

/* Form alert bar */
.alert{
  margin: 12px 0 18px;
  padding: 10px 14px;
  border-left: 4px solid transparent;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ink);
  font-weight: 600;
}
.alert--success{
  border-left-color: #16a34a;     /* green */
  background: #f0fdf4;            /* soft green bg */
  color: #166534;
}
.alert--error{
  border-left-color: #dc2626;     /* red */
  background: #fef2f2;            /* soft red bg */
  color: #7f1d1d;
}
.alert--info{
  border-left-color: #2563eb;     /* blue (sending...) */
  background: #eff6ff;
  color: #1e3a8a;
}