/* Xenora shared chrome: tokens, header, footer, buttons, auth dialog. Design System v1.3 */
:root{
  --color-brand-primary:#242326;--color-brand-hover:#171719;--color-on-primary:#fff;
  --color-text-primary:#242326;--color-text-secondary:#68656a;--color-text-muted:#858188;--color-text-placeholder:#918d94;--color-text-disabled:#aaa7ac;
  --color-bg-page:#faf9f7;--color-bg-surface:#fff;--color-bg-subtle:#f3f1ee;--color-bg-selected:#f0eeeb;--color-bg-disabled:#f5f4f2;
  --color-border-subtle:#eae7e3;--color-border-default:#d8d4cf;--color-border-hover:#a9a39d;--color-border-input-focus:#242326;
  --color-accent-warm:#b96a56;--color-status-error:#b54747;--color-status-success:#287a57;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --radius-2:8px;--radius-3:12px;--radius-4:16px;--radius-5:24px;--radius-full:999px;
  --font-heading:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-search:0 2px 8px rgba(36,35,38,.08),0 1px 2px rgba(36,35,38,.05);
  --shadow-popover:0 8px 24px rgba(36,35,38,.14);
  --shadow-dialog:0 16px 40px rgba(36,35,38,.18);
  --shadow-focus:0 0 0 3px rgba(36,35,38,.16);
  --gutter:40px;
  /* typography primitives + text styles (Design System v1.3 section 3 / 10) */
  --font-size-12:12px;--font-size-14:14px;--font-size-16:16px;--font-size-18:18px;--font-size-20:20px;--font-size-24:24px;--font-size-32:32px;--font-size-40:40px;
  --line-height-16:16px;--line-height-18:18px;--line-height-20:20px;--line-height-24:24px;--line-height-26:26px;--line-height-28:28px;--line-height-32:32px;--line-height-40:40px;--line-height-48:48px;
  --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;
  --text-heading-xl-size:var(--font-size-32);--text-heading-xl-line-height:var(--line-height-40);--text-heading-xl-weight:var(--font-weight-bold);
  --text-heading-lg-size:var(--font-size-24);--text-heading-lg-line-height:var(--line-height-32);--text-heading-lg-weight:var(--font-weight-semibold);
  --text-heading-md-size:var(--font-size-20);--text-heading-md-line-height:var(--line-height-28);--text-heading-md-weight:var(--font-weight-semibold);
  --text-heading-sm-size:var(--font-size-18);--text-heading-sm-line-height:var(--line-height-26);--text-heading-sm-weight:var(--font-weight-semibold);
  --text-body-lg-size:var(--font-size-16);--text-body-lg-line-height:var(--line-height-24);--text-body-lg-weight:var(--font-weight-regular);
  --text-body-md-size:var(--font-size-14);--text-body-md-line-height:var(--line-height-20);--text-body-md-weight:var(--font-weight-regular);
  --text-body-sm-size:var(--font-size-12);--text-body-sm-line-height:var(--line-height-18);--text-body-sm-weight:var(--font-weight-regular);
  --text-label-lg-size:var(--font-size-16);--text-label-lg-line-height:var(--line-height-20);--text-label-lg-weight:var(--font-weight-semibold);
  --text-label-md-size:var(--font-size-14);--text-label-md-line-height:var(--line-height-20);--text-label-md-weight:var(--font-weight-semibold);
  --text-label-sm-size:var(--font-size-12);--text-label-sm-line-height:var(--line-height-16);--text-label-sm-weight:var(--font-weight-semibold);
  --text-price-size:var(--font-size-16);--text-price-line-height:var(--line-height-24);--text-price-weight:var(--font-weight-semibold);
  --color-accent-warm-soft:#f7ece8;
  --color-status-warning:#9a6418;
  --color-brand-text-on-primary:#ffffff;
  --color-status-info:#426b86;
}
/* scope: every chrome block carries class "xh" so legacy page CSS is untouched */
.xh,.xh *,.xh *::before,.xh *::after{box-sizing:border-box}
.xh{font:400 16px/24px var(--font-body);color:var(--color-text-primary);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-align:left}
.xh img{max-width:100%;display:block}
.xh a:not(.xh-btn){color:inherit}
.xh a{text-decoration:none}
.xh h1,.xh h2,.xh h3{font-family:var(--font-heading);margin:0}
.xh :focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.xh-wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.xh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.xh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:48px;padding:0 var(--space-6);border-radius:var(--radius-3);border:1px solid transparent;font:600 16px/20px var(--font-body);cursor:pointer;transition:background .15s;text-decoration:none}
.xh-btn.xh-btn--primary{background:var(--color-brand-primary);color:var(--color-on-primary)}
.xh-btn.xh-btn--primary:hover{background:var(--color-brand-hover)}
.xh-btn.xh-btn--primary[disabled]{background:var(--color-bg-disabled);color:var(--color-text-disabled);cursor:not-allowed}
.xh-btn--compact{height:40px;padding:0 var(--space-5);font-size:14px;border-radius:var(--radius-2)}
.xh-btn.xh-btn--light{background:#fff;color:var(--color-text-primary)}
.xh-btn.xh-btn--light:hover{background:var(--color-bg-subtle)}
.xh-btn--block{width:100%}

/* header */
.xh-site-header{background:var(--color-bg-page);position:relative;z-index:20}
body:not(.xh) .xh-site-header{position:absolute;top:0;left:0;width:100%;border-bottom:1px solid var(--color-border-subtle)}
body:not(.xh) .mainouter{padding-top:72px}
.xh-header{display:flex;align-items:center;justify-content:space-between;height:72px}
.xh-logo{font:700 22px/28px var(--font-heading);letter-spacing:-.02em}
.xh-nav{display:flex;align-items:center;gap:var(--space-4);position:relative}
.xh-nav__link{font:500 14px/20px var(--font-body);padding:var(--space-3) var(--space-2);min-height:44px;display:inline-flex;align-items:center}
.xh-nav__link:hover{text-decoration:underline}
.xh-menu-btn{width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--color-border-subtle);background:var(--color-bg-subtle);display:grid;place-items:center;cursor:pointer;color:inherit;padding:0}
.xh-menu-btn--account{width:48px;height:48px;background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff}
.xh-menu-btn--account:hover{background:var(--color-brand-hover)}
.xh-menu{position:absolute;right:0;top:56px;z-index:30;min-width:200px;background:var(--color-bg-surface);border-radius:var(--radius-3);box-shadow:var(--shadow-popover);padding:var(--space-2);display:none}
.xh-menu.open{display:block}
.xh-menu a{display:block;padding:var(--space-3);border-radius:var(--radius-2);font:500 14px/20px var(--font-body)}
.xh-menu a:hover{background:var(--color-bg-subtle)}

/* footer */
.xh-footer{padding:var(--space-8) 0;background:var(--color-bg-subtle);font:400 14px/20px var(--font-body);clear:both}
.xh-footer__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap;padding-bottom:var(--space-12);border-bottom:1px solid var(--color-border-subtle)}
.xh-footer__links{display:flex;gap:var(--space-5);flex-wrap:wrap}
.xh-footer__links a{min-height:44px;display:inline-flex;align-items:center}
.xh-footer__links a:hover{text-decoration:underline}
.xh-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-6)}
.xh-locale{background:var(--color-bg-surface);border-radius:var(--radius-2);padding:var(--space-2) var(--space-3);font:600 12px/16px var(--font-body);display:inline-flex;gap:var(--space-2);align-items:center}

/* auth dialog */
.xh-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:var(--space-4);background:rgba(23,23,25,.5);overflow-y:auto}
.xh-modal.open{display:flex}
.xh-dialog{position:relative;width:100%;max-width:440px;background:var(--color-bg-surface);border-radius:var(--radius-4);box-shadow:var(--shadow-dialog);padding:var(--space-8);margin:auto}
.xh-dialog__close{position:absolute;top:var(--space-4);right:var(--space-4);width:44px;height:44px;border-radius:var(--radius-full);border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--color-text-secondary)}
.xh-dialog__close:hover{background:var(--color-bg-subtle)}
.xh-dialog__title{font:600 24px/32px var(--font-heading);padding-right:var(--space-8)}
.xh-dialog__sub{margin:var(--space-1) 0 var(--space-6);font:400 14px/20px var(--font-body);color:var(--color-text-secondary)}
.xh-form[hidden],.xh-alert[hidden]{display:none}
.xh-form .xh-group{margin-bottom:var(--space-4)}
.xh-form label{display:block;margin-bottom:var(--space-1);font:600 14px/20px var(--font-body)}
.xh-form input{display:block;width:100%;height:48px;padding:0 var(--space-4);background:#fff;border:1px solid var(--color-border-default);border-radius:var(--radius-3);font:400 16px/24px var(--font-body);color:var(--color-text-primary);transition:border-color .15s;box-shadow:none;margin:0}
.xh-form input::placeholder{color:var(--color-text-placeholder)}
.xh-form input:hover{border-color:var(--color-border-hover)}
.xh-form input:focus{outline:0;border-color:var(--color-border-input-focus);box-shadow:var(--shadow-focus)}
.xh-form input[aria-invalid="true"]{border-color:var(--color-status-error)}
.xh-field-error{display:none;margin:var(--space-1) 0 0;font:400 14px/20px var(--font-body);color:var(--color-status-error)}
.xh-field-error.show{display:block}
.xh-alert{margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-3);background:#f9eaea;color:var(--color-status-error);font:500 14px/20px var(--font-body)}
.xh-form__row{display:flex;justify-content:flex-end;margin:calc(-1 * var(--space-2)) 0 var(--space-4)}
.xh-form__terms{margin:0 0 var(--space-4);font:400 14px/20px var(--font-body);color:var(--color-text-secondary)}
.xh-form__terms a,.xh-textlink{text-decoration:underline;font-weight:600;color:var(--color-text-primary)}
.xh-textlink{background:none;border:0;padding:0;cursor:pointer;font:600 14px/20px var(--font-body)}
.xh-dialog__switch{margin:var(--space-6) 0 0;text-align:center;font:400 14px/20px var(--font-body);color:var(--color-text-secondary)}
body.xh-modal-open{overflow:hidden}

@media (max-width:1024px){:root{--gutter:24px}}
@media (max-width:720px){
  :root{--gutter:16px}
  .xh-nav__link{display:none}
  .xh-footer__row,.xh-footer__bottom{flex-direction:column;align-items:flex-start}
  .xh-dialog{padding:var(--space-6) var(--space-5)}
}
@media (prefers-reduced-motion:reduce){.xh *{transition:none!important}}
