/* E-87: opt-in primitives from v5. A .sh-ui island owns its reset; Woo
   Blocks, the incumbent Kadence shell and the admin retain their layout. */
.sh-frontend {
  -webkit-font-smoothing: antialiased;
  accent-color: var(--sh-focus);
  caret-color: var(--sh-focus);
}
.sh-frontend ::selection { background: var(--sh-focus); color: var(--sh-bg); }
.sh-frontend :is(strong, b) { font-weight: 600; }
.sh-frontend :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: 800; }
.sh-frontend .sh-ui { color-scheme: dark; color: var(--sh-text); background: var(--sh-bg); }
.sh-frontend :is(.sh-ui, .sh-ui *, .sh-ui *::before, .sh-ui *::after) { box-sizing: border-box; }
.sh-frontend .sh-ui :is(h1, h2, h3, p, ul, ol) { margin: 0; }
.sh-frontend .sh-ui :is(ul, ol)[role="list"] { padding: 0; list-style: none; }
.sh-frontend .sh-ui :is(button, input, textarea, select) { font: inherit; color: inherit; }
.sh-frontend .sh-ui img { display: block; max-width: 100%; height: auto; }
.sh-frontend .sh-ui :is(h1, h2, h3, p, label, a) { overflow-wrap: anywhere; }
.sh-frontend .sh-wrap { width: 100%; max-width: var(--sh-container); margin-inline: auto; padding-inline: var(--gutter); }
.sh-frontend .sh-ui :is(h1, h2, h3) { text-wrap: balance; }
.sh-frontend .sh-ui h1 { font: 800 var(--t-h1)/.88 var(--font-display); letter-spacing: -.03em; }
.sh-frontend .sh-ui h2 { font: 800 var(--t-h2)/1.05 var(--font-display); letter-spacing: -.02em; }

/* Universal visible focus includes summary, links, custom tabindex and
   Woo controls, without changing their dimensions or floating labels. */
.sh-frontend :focus-visible {
  outline: 3px solid var(--sh-focus);
  outline-offset: 3px;
}
.sh-frontend [hidden] { display: none !important; }
.sh-frontend :is(.sh-sr-only, .sh-ui .sr-only) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
html:not(.sh-js) .sh-frontend :is(.sh-js-only, .sh-ui .js-only) { display: none !important; }
/* No selector hides content, GET forms or native details in no-JS mode. */

.sh-frontend :is(.sh-btn, .sh-ui .btn) {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sh-space-1); min-height: var(--sh-button-height);
  max-width: 100%; padding: .75rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--sh-radius);
  font: 600 var(--t-sm)/1.2 var(--font-body); text-align: center;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere;
  cursor: pointer; box-shadow: none;
  transition: background-color .2s var(--sh-ease), border-color .2s, transform .2s var(--sh-ease);
}
.sh-frontend :is(.sh-btn-primary, .sh-ui .btn-primary) { background: var(--sh-gold); color: var(--sh-onyx); }
.sh-frontend :is(.sh-btn-primary, .sh-ui .btn-primary):hover { background: var(--sh-gold-hi); color: var(--sh-onyx); }
.sh-frontend :is(.sh-btn-primary, .sh-ui .btn-primary):active { transform: scale(.98); }
.sh-frontend :is(.sh-btn-primary, .sh-ui .btn-primary).is-done { background: var(--sh-white); }
.sh-frontend :is(.sh-btn-ghost, .sh-ui .btn-ghost) { background: transparent; border-color: var(--sh-control); color: var(--sh-text); }
.sh-frontend :is(.sh-btn-ghost, .sh-ui .btn-ghost):hover { border-color: var(--sh-text); }
.sh-frontend :is(.sh-btn, .sh-ui .btn):disabled { opacity: .45; cursor: not-allowed; }
.sh-frontend :is(.sh-btn, .sh-ui .btn)[aria-busy="true"] { cursor: progress; }
.sh-frontend :is(.sh-icon-btn, .sh-ui .icon-btn) {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: var(--sh-radius); background: transparent;
  color: var(--sh-text); text-decoration: none; cursor: pointer; box-shadow: none;
}
.sh-frontend :is(.sh-icon-btn, .sh-ui .icon-btn):hover { background: var(--sh-surface-2); }
.sh-frontend :is(svg.sh-icon, .sh-ui svg.i) {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.sh-frontend :is(svg.sh-icon, .sh-ui svg.i).tick { stroke-width: 2.5; }

.sh-frontend :is(.sh-field, .sh-ui .field) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sh-space-1); min-width: 0;
}
.sh-frontend :is(.sh-field, .sh-ui .field) > label { font-size: var(--t-sm); font-weight: 600; }
.sh-frontend :is(.sh-field, .sh-ui .field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  width: 100%; min-width: 0; max-width: 100%; min-height: var(--sh-field-height);
  padding: .75rem 1rem; background: var(--sh-bg); color: var(--sh-text);
  border: 1px solid var(--sh-control); border-radius: var(--sh-radius);
  font: 400 var(--t-base)/1.5 var(--font-body); box-shadow: none;
}
.sh-frontend :is(.sh-field, .sh-ui .field) textarea { min-height: 7rem; resize: vertical; }
.sh-frontend :is(.sh-field, .sh-ui .field) :is(input, textarea)::placeholder { color: var(--sh-text-muted); opacity: 1; }
.sh-frontend :is(.sh-field, .sh-ui .field) :is(input, select, textarea):hover { border-color: var(--sh-text); }
.sh-frontend :is(.sh-field, .sh-ui .field) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--sh-error); }
.sh-frontend :is(.sh-field-error, .sh-ui .err) { color: var(--sh-error); font-size: var(--t-sm); }
.sh-frontend :is(.sh-check, .sh-ui .consent) {
  display: flex; align-items: flex-start; gap: var(--sh-space-1);
  min-height: var(--tap); padding-block: .625rem;
  font: 400 var(--t-sm)/1.5 var(--font-body); cursor: pointer;
}
.sh-frontend :is(.sh-check, .sh-ui .consent) input[type="checkbox"] {
  flex: none; width: 24px; height: 24px; margin: 0;
  accent-color: var(--sh-gold); border-radius: var(--sh-radius-check);
}

.sh-frontend :is(.sh-chip, .sh-ui .chip) { position: relative; display: inline-flex; max-width: 100%; }
.sh-frontend :is(.sh-chip, .sh-ui .chip) > input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.sh-frontend :is(.sh-chip-label, .sh-ui .chip-label) {
  display: inline-flex; align-items: center; gap: var(--sh-space-1);
  min-height: var(--tap); max-width: 100%; padding: .625rem 1rem;
  border: 1px solid var(--sh-control); border-radius: var(--sh-radius);
  background: var(--sh-surface); color: var(--sh-text);
  font: 500 var(--t-sm)/1.3 var(--font-body); overflow-wrap: anywhere;
}
.sh-frontend label:is(.sh-chip, .sh-ui .chip) > :is(.sh-chip-label, .chip-label) { pointer-events: none; }
.sh-frontend :is(.sh-chip, .sh-ui .chip) .tick { display: none; }
.sh-frontend :is(.sh-chip, .sh-ui .chip) > input:checked + :is(.sh-chip-label, .chip-label),
.sh-frontend a.sh-chip-label[aria-current="page"] {
  background: var(--sh-gold); border-color: var(--sh-gold); color: var(--sh-onyx); font-weight: 600;
}
.sh-frontend :is(.sh-chip, .sh-ui .chip) > input:checked + :is(.sh-chip-label, .chip-label) .tick { display: block; }
.sh-frontend :is(.sh-chip, .sh-ui .chip) > input:focus-visible + :is(.sh-chip-label, .chip-label) {
  outline: 3px solid var(--sh-focus); outline-offset: 3px;
}

/* Existing frontend forms share field height/boundaries, without targeting
   .wc-block-components-* or resetting a native checkout control. */
.sh-frontend :is(.sh-newsletter-form, .sh-contact-form, .sh-withdrawal-form) :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea),
.sh-frontend.woocommerce-account .woocommerce form .form-row :is(input.input-text, textarea, select) {
  min-height: var(--sh-field-height); border-color: var(--sh-control); max-width: 100%; min-width: 0;
  padding-inline: min(1rem, 4vw);
}
.sh-frontend :is(.sh-newsletter-form, .sh-contact-form, .sh-withdrawal-form) button[type="submit"] {
  min-height: var(--sh-button-height); max-width: 100%; min-width: 0; white-space: normal;
  overflow-wrap: anywhere; padding-inline: min(1.25rem, 5vw);
}
.sh-frontend :is(.sh-newsletter-consent, .sh-contact-consent, .sh-withdrawal-consent) label { min-height: var(--tap); overflow-wrap: anywhere; }
.sh-frontend :is(.sh-newsletter-consent, .sh-contact-consent, .sh-withdrawal-consent) input[type="checkbox"] { width: 24px; height: 24px; }
.sh-frontend :is(.sh-newsletter-form, .sh-contact-form, .sh-withdrawal-form) :is(input, select, textarea):focus-visible,
.sh-frontend.woocommerce-account .woocommerce form .form-row :is(input.input-text, textarea, select):focus-visible {
  outline: 3px solid var(--sh-focus); outline-offset: 3px;
}

.sh-frontend :is(.sh-newsletter-consent, .sh-contact-consent, .sh-withdrawal-consent) label > span { min-width: 0; }

.sh-frontend.woocommerce-account .woocommerce button.button {
  min-height: var(--sh-button-height); min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}

/* Light bands use the same primitives; gold buttons keep onyx text. */
.sh-frontend .sh-ui :is(.sh-light, .band-light),
.sh-frontend .sh-ui:is(.sh-light, .band-light) { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  .sh-frontend :is(.sh-btn, .sh-ui .btn) { transition: background-color .2s linear, border-color .2s linear; }
  .sh-frontend :is(.sh-btn-primary, .sh-ui .btn-primary):active { transform: none; }
}
@media (forced-colors: active) {
  .sh-frontend :focus-visible,
  .sh-frontend :is(.sh-chip, .sh-ui .chip) > input:focus-visible + :is(.sh-chip-label, .chip-label) { outline-color: Highlight; }
  .sh-frontend :is(.sh-btn, .sh-ui .btn, .sh-icon-btn, .sh-ui .icon-btn) { border: 1px solid ButtonText; }
  .sh-frontend :is(.sh-chip, .sh-ui .chip) > input:checked + :is(.sh-chip-label, .chip-label),
  .sh-frontend a.sh-chip-label[aria-current="page"] {
    forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText;
  }
  .sh-frontend :is(.sh-check, .sh-ui .consent) input[type="checkbox"] { accent-color: auto; }
}

/* E106: keep Woo notices in the document, clear of consent and sticky CTAs. */
body.sh-frontend .woocommerce-notices-wrapper {
  position: static;
  z-index: auto;
  max-width: 100%;
}
body.sh-frontend .woocommerce-notices-wrapper:not(:empty) { margin-block: 1rem; }