@layer core, brand;

@layer core {
  /* ── document mechanics ─────────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; height: auto; display: block; }
  /* A11Y MECHANIC: the islands toggle visibility via [hidden]. Never re-enable in brand. */
  [hidden] { display: none !important; }
  /* A11Y MECHANIC: visible keyboard focus (WCAG 2.4.7). Brand may re-color via --color-accent;
     it must never remove the ring (no outline:none — the 16A contract lint flags this for authors;
     it is not a security guarantee — see validateBrandSheetCss / 16A "Security note / non-goal"). */
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* page frame (the document shell's #root) */
  #root { max-width: 68rem; margin: 0 auto; padding: var(--space-lg); }

  /* form controls inherit the brand's type; disabled affordance is behavioral */
  button, input, select, textarea { font: inherit; }
  button { cursor: pointer; }
  button[disabled] { cursor: not-allowed; }

  /* ── cart drawer (tui-cart-drawer) — dialog overlay mechanics ───────────────── */
  /* The focus trap (useFocusTrap) assumes the dialog visually overlays the page and the backdrop
     covers + receives the outside click. Positioning here is a11y-load-bearing (16A §5). */
  .tui-cart-drawer-root { position: fixed; inset: 0; z-index: 100; }
  .tui-cart-drawer__backdrop { position: absolute; inset: 0; background: var(--color-fg); opacity: 0.4; }
  .tui-cart-drawer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(24rem, 100vw);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: var(--space-sm);
    padding: var(--space-md);
    overflow-y: auto;
  }
  .tui-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
  .tui-cart-drawer__lines { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; }
  .tui-cart-drawer__line {
    display: grid; grid-template-columns: 1fr auto auto auto;
    gap: var(--space-sm); align-items: center;
    padding: var(--space-sm) 0;
  }
  .tui-cart-drawer__footer { margin-top: auto; display: grid; gap: var(--space-sm); }
  .tui-cart-drawer__subtotal { display: flex; justify-content: space-between; gap: var(--space-sm); margin: 0; }

  /* ── quantity stepper (tui-qty) ─────────────────────────────────────────────── */
  .tui-qty { display: inline-flex; align-items: center; gap: var(--space-xs); }
  .tui-qty__input { width: 3.5rem; text-align: center; }

  /* ── form field (tui-field) + checkout form layout ──────────────────────────── */
  .tui-field { display: grid; gap: var(--space-xs); }
  .tui-checkout-form { display: grid; gap: var(--space-sm); }

  /* ── cart page view (tui-cart__*) ───────────────────────────────────────────── */
  .tui-cart__lines { list-style: none; margin: 0; padding: 0; }
  .tui-cart__line {
    display: grid; grid-template-columns: 2fr 1fr auto 1fr auto;
    gap: var(--space-sm); align-items: center;
    padding: var(--space-sm) 0;
  }
  @media (max-width: 40rem) { .tui-cart__line { grid-template-columns: 1fr 1fr; } }
  .tui-cart__qty-input, .tsec-product-detail__qty-input { width: 4rem; }
  .tui-cart__totals { margin-top: var(--space-md); max-width: 20rem; margin-left: auto; }
  .tui-cart__row { display: flex; justify-content: space-between; margin: var(--space-xs) 0; }
  .tui-cart__actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); }

  /* ── checkout + confirmation views ──────────────────────────────────────────── */
  .tui-checkout { display: grid; gap: var(--space-lg); }
  .tui-checkout__fieldset { display: grid; gap: var(--space-sm); padding: var(--space-md); }
  .tui-checkout__pay-total { display: flex; justify-content: space-between; }
  .tui-confirmation__details { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); }

  /* ── account + auth pages (tui-account / tui-auth) — structural only (part 09) ─ */
  .tui-auth { max-width: 24rem; display: grid; gap: var(--space-lg); }
  .tui-auth__form, .tui-auth__alt { display: grid; gap: var(--space-sm); }
  .tui-auth__links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
  .tui-account { display: grid; gap: var(--space-lg); align-items: start; }
  @media (min-width: 48rem) { .tui-account { grid-template-columns: 12rem 1fr; } }
  .tui-account__nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  @media (min-width: 48rem) { .tui-account__nav { flex-direction: column; } }
  .tui-account__panel { display: grid; gap: var(--space-md); min-width: 0; }
  .tui-account__form { display: grid; gap: var(--space-sm); max-width: 28rem; }
  .tui-account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
  .tui-account-list__item {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-sm); flex-wrap: wrap;
    padding: var(--space-sm) 0;
  }
  .tui-account-list__actions { display: flex; gap: var(--space-xs); }

  /* ── sections (tsec-*) — structural grids ───────────────────────────────────── */
  .tsec-hero { padding: var(--space-lg) 0; }
  .tsec-product-grid__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-md);
  }
  .tui-product-card { display: block; }
  .tsec-product-detail {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-lg); align-items: start;
  }
  @media (max-width: 40rem) { .tsec-product-detail { grid-template-columns: 1fr; } }
  .tsec-product-detail__thumbs { list-style: none; display: flex; gap: var(--space-xs); padding: 0; margin: var(--space-sm) 0 0; }
  .tsec-product-detail__thumb img { width: 4rem; height: 4rem; object-fit: cover; }
  .tsec-product-detail__form { display: grid; gap: var(--space-sm); margin-top: var(--space-md); max-width: 22rem; }
  .tsec-product-detail__form label { display: grid; gap: var(--space-xs); }
}


@layer brand {
/* THROWAWAY neutral default skin — operator replaces this (DEC-0006/0007). Do not build brand on it. */
body {
  margin: 0;
  font-family: var(--type-body, system-ui, sans-serif);
  color: var(--color-fg, #1a1a1a);
  background: var(--color-bg, #ffffff);
  line-height: var(--type-leading, 1.5);
}
a { color: var(--color-accent, #333); }

/* ── buttons / links-as-buttons (neutral, grayscale) ───────────────────────────── */
button,
.tui-cart__checkout,
.tsec-product-detail__add,
.tui-checkout-form__submit,
.tui-cart__continue,
.tui-confirmation__continue {
  display: inline-block;
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  border: 1px solid var(--color-fg, #1a1a1a);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-fg, #1a1a1a);
  color: var(--color-bg, #fff);
  text-decoration: none;
}
button[disabled] { opacity: 0.5; }
.tui-cart__continue,
.tui-cart__remove,
.tui-confirmation__continue {
  background: transparent;
  color: var(--color-fg, #1a1a1a);
}

/* ── sections: hero / product-grid ─────────────────────────────────────────────── */
.tsec-hero__heading { margin: 0 0 var(--space-sm, 0.5rem); }
.tui-product-card { text-decoration: none; color: inherit; }
.tui-product-card__name { display: block; margin-top: var(--space-xs, 0.25rem); }
.tui-product-card__price-was { color: var(--color-muted, #888); margin-left: var(--space-xs, 0.25rem); }

/* ── PDP (product-detail) ──────────────────────────────────────────────────────── */
.tsec-product-detail__title { margin: 0 0 var(--space-sm, 0.5rem); }
.tsec-product-detail__price-now { font-weight: var(--type-weight-bold, 700); }
.tsec-product-detail__price-was { color: var(--color-muted, #888); margin-left: var(--space-xs, 0.25rem); }
.tsec-product-detail__form select,
.tsec-product-detail__form input,
.tui-field__input {
  padding: var(--space-xs, 0.4rem); border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm, 4px); background: var(--color-bg, #fff); color: var(--color-fg, #1a1a1a);
}
.tsec-product-detail__status { margin: var(--space-xs, 0.25rem) 0 0; }
.tsec-product-detail__empty { color: var(--color-muted, #888); }

/* ── cart ──────────────────────────────────────────────────────────────────────── */
.tui-cart__line { border-bottom: 1px solid var(--color-border, #eee); }
.tui-cart__line-name { color: inherit; }
.tui-cart__qty-caption { display: none; }
.tui-cart__remove { border: none; background: transparent; text-decoration: underline; padding: 0; }
.tui-cart__row--total { font-weight: var(--type-weight-bold, 700); border-top: 1px solid var(--color-border, #ccc); padding-top: var(--space-xs, 0.25rem); }
.tui-cart__empty { color: var(--color-muted, #888); }

/* ── checkout ──────────────────────────────────────────────────────────────────── */
.tui-checkout__fieldset { border: 1px solid var(--color-border, #ccc); border-radius: var(--radius-sm, 4px); }
.tui-checkout__fieldset--payment { border-style: dashed; }
.tui-checkout__fake-note { margin: 0; padding: var(--space-xs, 0.4rem); background: var(--color-muted, #f0f0f0); color: var(--color-fg, #1a1a1a); border-radius: var(--radius-sm, 4px); font-size: var(--type-scale-sm, 0.875rem); }
.tui-field__error { color: var(--color-danger, #b00020); margin: 0; font-size: var(--type-scale-sm, 0.875rem); }
.tui-checkout__pay-total { font-weight: var(--type-weight-bold, 700); }
.tui-checkout-form__status { margin: 0; padding: var(--space-sm, 0.5rem); border: 1px solid var(--color-danger, #b00020); border-radius: var(--radius-sm, 4px); color: var(--color-danger, #b00020); }

/* ── confirmation ──────────────────────────────────────────────────────────────── */
.tui-confirmation__label { font-weight: var(--type-weight-bold, 700); margin: 0; }
.tui-confirmation__value { margin: 0; }
}