/*
 * Chic: the Theme Kit in Chic's own look. Linked after themes/_shared/assets/css/kit.css, so the variables
 * set here replace its defaults for every module section.
 *
 * Chic has square corners everywhere, hairline borders instead of shadows, small capitals for labels and
 * buttons, and fields that are only a line underneath. Page width and gutters match its own blocks
 * (max-w-7xl, px-4 sm:px-6 lg:px-8).
 */

.kit-root {
  --kit-radius: 0;
  --kit-radius-sm: 0;
  --kit-chip-radius: 0;
  --kit-media-radius: 0;
  --kit-shadow: none;
  --kit-shadow-hover: none;
  --kit-card-pad: 1.5rem;
  --kit-speed: 200ms;
  --kit-eyebrow-tracking: 0.2em;
  --kit-button-transform: uppercase;
  --kit-button-tracking: 0.08em;
  --kit-width-normal: 76rem;
  --kit-width-wide: 88rem;
  --kit-gutter: 1rem;
  --kit-pad-normal: clamp(3rem, 5vw, 5rem);
}

@media (min-width: 40rem) {
  .kit-root { --kit-gutter: 1.5rem; }
}

@media (min-width: 64rem) {
  .kit-root { --kit-gutter: 2rem; }
}

/* Buttons are small capitals. */
.kit-button { font-size: 0.8125rem; }
.kit-button--small { font-size: 0.75rem; }

/* Cards are a hairline box that picks up the accent when it can be clicked. */
.kit-card--linked:hover { border-color: var(--kit-accent); }
.kit-card--linked:hover .kit-card__link { color: var(--kit-accent-text); }
.kit-card__media img { transition-duration: 600ms; }
.kit-avatar { border-radius: 0; }
.kit-carousel__button { border-radius: 0; }
.kit-dialog__close { border-radius: 0; }
.kit-dialog { box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.45); }

/* Fields are a line underneath: no box, no side padding. */
.kit-input {
  padding-inline: 0;
  border-width: 0 0 1px;
  border-color: var(--kit-line);
  background-color: transparent;
}

.kit-select { padding-inline: 0 2.5rem; }
.kit-input:focus { border-color: var(--kit-accent); }
.kit-input:focus-visible {
  outline: 0;
  box-shadow: 0 2px 0 0 var(--kit-focus);
}

.kit-field__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tabs: a flat row of small capitals. */
.kit-tabs__tab {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The shop components: small capitals for labels, square controls, hairlines. */
.kit-option__face,
.kit-account-nav__link,
.kit-filter-group__title,
.kit-sort__label {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kit-badge { letter-spacing: 0.14em; }
.kit-gallery__button,
.kit-gallery__viewer-close,
.kit-drawer__close,
.kit-quantity__button { border-radius: 0; }
.kit-option--swatch .kit-option__face { border-radius: 0; }
.kit-option--swatch .kit-option__swatch { border-radius: 0; }
.kit-drawer.is-ready { box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.45); }
.kit-summary__row--total { border-top-color: var(--kit-text); }