/** Critical CSS for the theme. This file is included on every page. */

/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
  overflow: hidden;
}

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

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

select {
  background-color: var(--color-background);
  color: currentcolor;
}

dialog {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

p {
  text-wrap: pretty;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/** Theme styles below */
body {
  font-family: var(--font-primary--family);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/** Section layout utilities */

/**
 * Setup a grid that enables both full-width and constrained layouts
 * depending on the class of the child elements.
 *
 * By default, a minimum content margin is set on the left and right
 * sides of the section and the content is centered in the viewport to
 * not exceed the maximum page width.
 *
 * When a child element is given the `full-width` class, it will span
 * the entire viewport.
 */
.shopify-section {
  --content-width: min(
    calc(var(--page-width) - var(--page-margin) * 2),
    calc(100% - var(--page-margin) * 2)
  );
  --content-margin: minmax(var(--page-margin), 1fr);
  --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

  /* This is required to make <img> elements work as background images */
  position: relative;
  grid-template-columns: var(--content-grid);
  display: grid;
  width: 100%;
}

/* Child elements, by default, are constrained to the central column of the grid. */
.shopify-section > * {
  grid-column: 2;
}

/* Child elements that use the full-width utility class span the entire viewport. */
.shopify-section > .full-width {
  grid-column: 1 / -1;
}

/* ============================================================
   STREETWEAR THEME — base system
   Monochrome. Archivo throughout; Helvetica for numerals only.
   ============================================================ */

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* Numerals and prices get Chivo, tightened, always lined up */
.num,
.price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-num);
}

/* Page container. Poster moments break out of this. */
/* Scoped to div: WordPress core adds a literal "page" class to <body>
   itself on every Page post type, unrelated to this utility class. */
:not(body):not(main):not(article).page {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.bleed { width: 100%; }

/* Editorial section label — small, tracked, quiet */
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-fg-45);
}

/* The poster voice: huge, tight, unapologetic */
.poster {
  font-size: var(--t-poster);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  margin: 0;
}
.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--track-head);
  margin: 0;
  text-wrap: balance;
}
.title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  margin: 0;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--c-fg-70);
  text-wrap: pretty;
}

/* Section head: label left, count/meta right, hairline under */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--c-fg);
  margin-bottom: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 1px solid currentcolor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.btn--solid { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.btn--solid:hover { background: transparent; color: var(--c-fg); }
.btn--ghost:hover { background: var(--c-fg); color: var(--c-bg); }
.btn--on-dark { color: var(--c-inv-fg); border-color: var(--c-inv-fg); }
.btn--on-dark:hover { background: var(--c-inv-fg); color: var(--c-inv-bg); }

a { color: inherit; }

/* Keyboard focus must always be visible */
/* Neutralize the browser's own default focus ring (Safari shows it even
   on a mouse click, or when JS moves focus programmatically - e.g. the
   drawers' own close.focus() calls) and replace it with our own
   :focus-visible-only version below, so keyboard focus is still visible
   but a click never shows an unstyled black box around a button. */
:where(a, button, input, select, textarea, summary, [role="button"]) {
  outline: none;
}
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--c-fg);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Touch & mobile interaction ---------- */
a, button, input, select, textarea, summary, [role="button"] {
  /* Kills the ~300ms double-tap-to-zoom delay on tappable controls. */
  touch-action: manipulation;
}
a, button, summary, [role="button"] {
  /* We show our own hover/opacity feedback everywhere already, so the
     default grey/blue tap flash would look like a rendering glitch. */
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Product card (homepage grid + shop page) ---------- */

  .cards {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 1.25rem;
  }
  /* A nowrap+ellipsis name needs min-width:0 somewhere in its ancestor
     chain, or grid tracks default to content's natural (unbroken) width -
     the track holding the longest name grows wider than the others,
     which is what made the grid look uneven instead of the text truncating. */
  .card { min-width: 0; }
  .card__link { text-decoration: none; display: flex; flex-direction: column; gap: 0.85rem; }
  .card__media {
    position: relative;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: var(--radius-container); corner-shape: squircle;
    background: var(--c-tile);
  }
  .card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Delayed by default so that on mouse-out the back leaves first
       and the front only returns once it's gone. */
    transition: opacity 0.18s ease 0.18s, transform 0.7s ease;
  }
  .card__img--alt {
    opacity: 0;
    transition: opacity 0.18s ease 0s, transform 0.7s ease;
  }

  /* Cross-fade: the front image has to leave as the back arrives, or the
     transparent PNGs show through each other. :has() guards products with
     only one image - those would otherwise fade to an empty tile. */
  /* Sequenced, not crossed: the front leaves completely, then the back
     arrives. A simultaneous fade shows both at 50% halfway through, which
     with transparent PNGs looks like two ghosted garments. */
  .card__link:has(.card__img--alt):hover .card__img:not(.card__img--alt),
  .card__link:has(.card__img--alt):focus-visible .card__img:not(.card__img--alt) {
    opacity: 0;
    transition-delay: 0s;
  }
  .card__link:hover .card__img--alt,
  .card__link:focus-visible .card__img--alt {
    opacity: 1;
    transition-delay: 0.18s;
  }
  .card__link:hover .card__media .card__img { transform: scale(1.03); }
  .card__sale {
    position: absolute; right: 8px; top: 8px;
    background: var(--c-buy); color: var(--c-buy-fg);
    font-size: var(--t-label); font-weight: 500;
    letter-spacing: 0; text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    z-index: 2;
  }
  .card__flag {
    position: absolute; left: 0; bottom: 0;
    background: var(--c-inv-bg); color: var(--c-inv-fg);
    font-size: var(--t-label); font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.4rem 0.7rem;
  }
  .card__meta { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
  .card__name {
    width: 100%;
    font-size: 1rem; font-weight: 500;
    letter-spacing: var(--track-head);
    /* Never wraps to a second line - truncates with an ellipsis instead,
       most relevant on mobile where the card is narrowest. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .card__price { font-size: 0.875rem; color: var(--c-fg-70); display: flex; justify-content: center; gap: 0.5rem; }
  .card__was { color: var(--c-fg-45); }

  /* 3 columns only above tablet width - a tablet-portrait screen (~768-820px)
     forced into 3 narrow columns crowds the garment photography. */
  @media (max-width: 989px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0.75rem; } }
  /* 20% shorter than the original 3/4 ratio, desktop only. */
  @media (min-width: 990px) { .card__media { aspect-ratio: 15 / 16; } }