/* ============================================================
   OSJ Sharp — reset, element defaults, focus
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header + announcement bar must not cover in-page anchor targets. */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

::selection { background: var(--brand-soft); color: var(--ink-950); }

/* ------------------------------------------------------------
   Focus. Never removed — HANDOFF.md "Accessibility".
   ------------------------------------------------------------ */
:focus-visible {
  outline: var(--focus-ring-width) solid transparent;
  box-shadow: var(--focus-glow);
  border-radius: var(--radius-sm);
}
/* Mouse users don't get the ring, keyboard users always do. */
:focus:not(:focus-visible) { outline: none; }

.osj-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-4);
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-sm) 0;
}
.osj-skip-link:focus { left: 0; text-decoration: none; }

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  z-index: var(--z-overlay);
}

/* ------------------------------------------------------------
   Type roles
   ------------------------------------------------------------ */
.osj-display {
  font-family: var(--font-display);
  font-weight: var(--weight-ultra);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.osj-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-link);
  margin: 0;
}
/* On ink the amber link colour is too dark to read; step up a stop. */
[data-theme="dark"] .osj-eyebrow { color: var(--text-eyebrow-dark); }

.osj-price {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--price);
}

.osj-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Section headings — the two-part eyebrow + display pattern used
   by New releases, Shop by category, the SWU band and About.
   ------------------------------------------------------------ */
.osj-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--grid-gap);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.osj-section-head__title {
  font-size: 2.4rem;
  font-weight: var(--weight-ultra);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.osj-section-head .osj-eyebrow { margin-bottom: 10px; }
.osj-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-7);
}

.osj-section-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-link) 40%, transparent);
}
.osj-section-link:hover { text-decoration: none; border-bottom-color: currentColor; }

/* ------------------------------------------------------------
   Touch sizing — MOBILE-VARIANT-HANDOFF §1.5.
   The brief's own rule is 44px minimum; these are the controls
   that fall under it at default sizing.
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .osj-qty__btn { width: 48px; height: 48px; }
  .osj-qty input { width: 48px; }
  .osj-qty--sm .osj-qty__btn { width: 44px; height: 44px; }
  .osj-cart-btn { min-height: 44px; }
  .osj-pagination .page-numbers { min-width: 44px; height: 44px; }
  .osj-chip { padding: 10px 14px; }
  .osj-drawer__remove { min-height: 44px; display: inline-flex; align-items: center; }
}

/*
 * iOS Safari zooms the viewport whenever a focused input is under 16px, and
 * the zoom does not reverse on blur. Every text-entry control therefore hits
 * 16px at phone widths, whatever the design scale says.
 */
@media (max-width: 760px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  select,
  textarea,
  .osj-field,
  .osj-field--sm {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------
   Reduced motion. Everything renders in its final position; the
   parallax listener is never attached (see osj-motion.js).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}