html { -webkit-text-size-adjust: 100%; }
:root{
  --bg:#ffffff; --border:#e5e7eb;
  --header-h: 68px;              /* keep this consistent across pages */
}

/* Fixed header that never scrolls away */
header.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top); /* iPhone notch */
}

/* Header content height */
.header-inner{ min-height: var(--header-h); }

/* Push page content below the fixed header (include notch space) */
body.has-fixed-header{
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}

/* Nice side padding that also respects safe areas */
.container{
  max-width: 1440px;
  margin: 0 auto;
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
}
@media (min-width:768px){
  .container{ padding-left:32px; padding-right:32px; }
}

/* --- Global header layout + buttons --- */
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height: var(--header-h);
}
.logo{ grid-column:2; justify-self:center; display:flex; justify-content:center; }
.logo img{ height:40px; }

.header-actions{ justify-self:end; display:flex; gap:14px; }

/* Optional legacy text link (kept harmless) */
.header-actions .account-link {
  margin-left: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* Reusable icon buttons (back/cart/menu/account) */
.icon-btn,
.back-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:10px; border:1px solid var(--border);
  background:#fff; color:inherit; text-decoration:none;
}
.icon-btn svg, .back-btn svg{ width:20px; height:20px; }

/* --- Prevent giant blue SVGs in header (iOS Safari defaults) --- */
.site-header .icon-btn,
.site-header .back-btn { color:#111; } /* controls SVG stroke via currentColor */
.site-header .icon-btn svg,
.site-header .back-btn svg { width:24px; height:24px; display:block; }

/* --- Auth pages (login/signup) --- */
/* Push auth screens below fixed header even if body class is missing */
.auth-wrap { 
  max-width: 420px; 
  margin: calc(var(--header-h) + 16px) auto 64px; 
  padding: 0 12px; 
}
.auth-card { background: #fff; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.06); padding: 20px; }
.auth-card h1 { font-size: 1.4rem; margin: 0 0 14px; }
.auth-note { font-size: .9rem; color: #666; margin-bottom: 16px; }

.form-field { margin-bottom: 12px; }
.form-field label { display: block; font-size: .9rem; margin: 0 0 6px; color: #333; }
.input-text { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font: inherit; }
.input-text:focus { outline: none; border-color: #888; }

/* Buttons */
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.btn-primary { appearance: none; border: 0; background: #111; color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-link { background: transparent; border: 0; color: #111; text-decoration: underline; padding: 0; font: inherit; cursor: pointer; }

/* Error block spacing + tidy list */
.form-error { 
  background: #fff3f3; border: 1px solid #ffd6d6; color: #a40000; 
  padding: 10px 12px; border-radius: 8px; margin: 12px 0 14px; 
}
.form-error ul { margin: 6px 0 0 18px; padding: 0; }
.form-error li + li { margin-top: 4px; }

/* Optional minor tweak if you wrap auth inside .container */
.container.auth-wrap { padding-top: 8px; }

/* Informational notice (success/info) */
.notice {
  background:#eef6ff; border:1px solid #cfe3ff; color:#0b3d91;
  padding:10px 12px; border-radius:8px; margin:12px 0 14px;
}

/* Ensure error block + list spacing on all screens (desktop too) */
.auth-card h1 + .form-error { margin-top: 12px; }            /* space under the heading */
.form-error { margin: 12px 0 16px; }                          /* vertical breathing room */
.form-error ul { margin: 6px 0 0 18px !important; padding: 0; }  /* list spacing inside */
.form-error li + li { margin-top: 4px; }                      /* space between items */
.form-error + form .form-field:first-child { margin-top: 10px; } /* space before first field */

/* Slightly more room on wider screens */
@media (min-width: 1024px) {
  .form-error { margin: 14px 0 20px; }
}

/* Desktop-safe spacing between heading/notice and error block */
.auth-card h1 { margin: 0 0 14px !important; }               /* lock in the heading gap */
.auth-card .notice { margin: 12px 0 14px !important; }       /* ensure banner has space */
.auth-card .form-error { margin: 14px 0 18px !important; }   /* ensure error has space */

/* Always add a little gap when .form-error follows anything */
.auth-card * + .form-error { margin-top: 12px !important; }

/* Tidy list inside the error block */
.form-error ul { margin: 6px 0 0 18px !important; padding: 0 !important; }
.form-error li { line-height: 1.35; }
.form-error li + li { margin-top: 4px; }

/* Slightly more room on wider screens */
@media (min-width: 1024px) {
  .auth-card .form-error { margin: 16px 0 22px !important; }
}

/* Compact header on small phones */
@media (max-width: 420px){
  .logo img { height: 36px; }
  .icon-btn, .back-btn { width: 36px; height: 36px; border-radius: 9px; }
  .site-header .icon-btn svg,
  .site-header .back-btn svg { width: 22px; height: 22px; }
  .header-actions { gap: 10px; }
}

/* === Deterministic spacing for auth cards (works the same on desktop & mobile) === */
.auth-card {
  display: grid;               /* make each direct child a row */
  grid-template-columns: 1fr;
  row-gap: 14px;               /* the space between h1, notice, error, form */
}

/* On wider screens you can open it up a bit */
@media (min-width: 1024px){
  .auth-card { row-gap: 18px; }
}

/* Zero out top/bottom margins so the grid gap is the only spacing */
.auth-card > h1,
.auth-card > .auth-note,
.auth-card > .form-error,
.auth-card > form {
  margin: 0 !important;
}

/* Keep the error box padding & list spacing tidy */
.form-error { padding: 12px !important; }
.form-error ul { margin: 0 0 0 18px !important; padding: 0 !important; }
.form-error li + li { margin-top: 4px; }

/* ---- Fix: some desktop styles collapse spaces between words ---- */
.auth-card,
.auth-card * {
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.auth-card h1,
.auth-card p,
.auth-card .auth-note,
.auth-card label,
.auth-card .form-error,
.auth-card .notice {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere; /* safe wrap for long words/emails */
}

/* Keep readable line-height on desktop */
.auth-card { line-height: 1.45; }

/* === Hard reset for text spacing inside auth cards (desktop-proof) === */
.auth-card,
.auth-card * {
  white-space: normal !important;
  word-spacing: 0.12em !important;   /* force a visible space */
  letter-spacing: 0 !important;
  font-kerning: normal !important;
  text-rendering: auto !important;
  /* disable ligatures/alt features that sometimes bug out with spaces */
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "clig" 0, "kern" 0 !important;
}

/* Use a safe system font just inside the card (avoids a bad webfont on desktop) */
.auth-card {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  line-height: 1.45; /* readable lines */
}


/* Fix huge gap under the fixed header on auth pages */
body.has-fixed-header .auth-wrap {
  /* use only a small local gap below the header */
  margin: 16px auto 64px !important;
}

/* Fallback for any page that forgot the body class */
body:not(.has-fixed-header) .auth-wrap {
  margin: calc(var(--header-h) + 16px) auto 64px !important;
}

/* make sure no accidental extra top padding sneaks in */
.container.auth-wrap { padding-top: 0 !important; }