/* Phrase Method theme overrides.
   One stylesheet loaded from layout/theme.html, rather than edits scattered
   through the stock section CSS files. Keeping the overrides in a single place
   means the default theme's own files stay untouched and a theme update can be
   diffed without unpicking our changes from SHOPLINE's.
   Everything here is scoped to a stock class, and every value comes from the
   token layer. */

/* ---- Buttons -------------------------------------------------------------
   The theme's button_border_radius setting stops at 40px, which cannot make a
   pill of a 56px tall button. This is the one place the design needs a value
   the token cannot express. */
.button,
.button--fill {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ---- Header --------------------------------------------------------------
   The hero runs full bleed under the header, so the header sits transparent on
   top of it and only gains a background once it detaches. .header--sticky is
   the stock class the theme's own sticky-header.js toggles. */
body[data-page-type="index"] .header:not(.header--sticky) {
  background-color: transparent;
  border-block-end-color: transparent;
}

body[data-page-type="index"] .header {
  transition: background-color 220ms ease, border-color 220ms ease;
}

/* ---- Section rhythm ------------------------------------------------------ */
.announcement-bar {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Cards ---------------------------------------------------------------
   Softer corners across product, collection and article cards so the stock
   templates sit beside the landing page without looking like a different site. */
.product-card,
.collection-card,
.article-card {
  overflow: hidden;
}

/* ---- Forms --------------------------------------------------------------- */
.field__input,
.select__select {
  border-radius: var(--input-border-radius, 12px);
}

/* ---- Focus ---------------------------------------------------------------
   A visible focus ring on every interactive element, which the checkout funnel
   needs and the stock theme only partly provides. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgb(var(--color-button-background));
  outline-offset: 3px;
}

/* ---- Tap targets ---------------------------------------------------------
   44px minimum on the controls a buyer has to hit on a phone. */
@media screen and (max-width: 959px) {
  .header__icon,
  .header__menu,
  .pagination__item,
  .cart-item__remove {
    min-width: 44px;
    min-height: 44px;
  }
}