/**
 * Base layer: element defaults and shared primitives.
 *
 * WooCommerce's own stylesheets are dequeued (see inc/assets.php), so form
 * controls, tables and buttons are styled here from scratch rather than being
 * overridden after the fact.
 */

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

  html {
    scroll-behavior: smooth;
    /* Keeps in-page anchor targets clear of the sticky top bar. */
    scroll-padding-top: 120px;
  }

  body {
    margin: 0;
    background: var(--porcelain);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
  }

  /* Set by the menu and size-guide scripts to lock background scroll. */
  body.is-scroll-locked {
    overflow: hidden;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    display: block;
    max-width: 100%;
    /*
     * Required alongside max-width because WordPress emits width/height
     * attributes. WooCommerce's stylesheet used to supply this; it is dequeued,
     * so the theme owns it.
     */
    height: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 400;
    letter-spacing: var(--tracking-tighter);
  }

  p {
    margin: 0;
  }

  :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  /* Forms
     ---------------------------------------------------------------------- */

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

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    width: 100%;
    min-height: var(--field-height);
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--porcelain);
    box-shadow: none;
  }

  textarea {
    min-height: 120px;
    padding-top: 14px;
  }

  select {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
      linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
  }

  label {
    display: block;
  }

  /* Tables
     ---------------------------------------------------------------------- */

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th {
    text-align: left;
  }

  /* Utilities
     ---------------------------------------------------------------------- */

  .screen-reader-text,
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}