/* WHO IS SHE FRIENDS — gifting portal (friends.shngroup.no).
 *
 * Tokens below are EXTRACTED VERBATIM from the live storefront (Shopify theme
 * Horizon 4.1.1, whoisshe.no) — see the wis-storefront-design-tokens reference.
 * Nothing here is invented. This is deliberately NOT the Hub's Polaris system:
 * recipients know WHO IS SHE, not SHN Group, so the portal must read as the
 * storefront from first paint.
 */

/* Self-hosted so headings never silently fall back to a generic sans (the
   storefront gets this from Shopify's font CDN, which we can't rely on here).
   v23 IBM Plex Sans is a VARIABLE font — one file covers the 400–600 range. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin.d28498895ed7.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Type (storefront) --- */
  --font-heading: "IBM Plex Sans", sans-serif;
  --font-heading-weight: 600;
  /* CORRECTED: the storefront's `--font-heading--spacing: 0.25em` is consumed by
     `margin-block`, NOT letter-spacing (verified in the theme's base.css). Heading
     tracking comes from `--letter-spacing--heading-normal`, which is 0. */
  --heading-margin-bottom: 0.25em;
  --letter-spacing-heading: 0;
  --letter-spacing-label: 0.06em;      /* --letter-spacing-sm, for small caps labels */
  --font-body: Helvetica, Arial, sans-serif;
  --font-body-weight: 400;

  --font-size-h1: clamp(2.25rem, 4.8vw, 3rem);
  --font-size-h2: 2rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 0.875rem;
  --font-size-h6: 0.75rem;
  --font-size-paragraph: 0.75rem;      /* storefront body really is this small */
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;

  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --letter-spacing-body: 0;

  /* --- Colour (primary scheme: #262626 foreground on white) --- */
  --color-background: #ffffff;
  --color-foreground: #262626;
  --color-border: #262626;
  --color-foreground-subdued: rgb(38 38 38 / 0.8);
  --color-foreground-muted: rgb(38 38 38 / 0.6);
  --color-hairline: rgb(0 0 0 / 0.13);

  --color-primary-button-background: rgb(0 0 0);
  --color-primary-button-text: #ffffff;
  --color-primary-button-border: rgb(38 38 38);
  --color-primary-button-hover-background: #262626;
  --color-primary-button-hover-border: #4c4c4c;

  --color-secondary-button-background: rgb(0 0 0 / 0);
  --color-secondary-button-text: rgb(0 0 0);
  --color-secondary-button-border: rgb(0 0 0);
  --color-secondary-button-hover-background: rgba(0, 0, 0, 0.15);

  --color-input-background: rgb(255 255 255 / 0.78);
  --color-input-border: rgb(223 223 223);
  --color-input-text: rgb(51 51 51);

  --color-variant-background: #ffffff;
  --color-variant-border: rgb(0 0 0 / 0.13);
  --color-variant-hover-background: #f2f2f2;
  --color-variant-hover-border: rgba(0, 0, 0, 0.28);
  --color-selected-variant-background: #000000;
  --color-selected-variant-text: #ffffff;

  --color-instock: #3ED660;
  --color-lowstock: #EE9441;
  --color-outofstock: #C8C8C8;
  --color-error: #8B0000;
  --color-success: #006400;

  /* --- Spacing --- */
  --gap-3xs: 0.125rem; --gap-2xs: 0.3rem; --gap-xs: 0.5rem; --gap-sm: 0.7rem;
  --gap-md: 0.9rem;    --gap-lg: 1rem;    --gap-xl: 1.25rem; --gap-2xl: 2rem; --gap-3xl: 3rem;
  --padding-xs: 0.5rem; --padding-sm: 0.7rem; --padding-md: 0.8rem; --padding-lg: 1rem;
  --padding-xl: 1.25rem; --padding-2xl: 1.5rem; --padding-4xl: 2rem; --padding-6xl: 4rem;

  /* --- Radii: the brand is SQUARE --- */
  --radius-button-primary: 0px;
  --radius-button-secondary: 0px;       /* the brand never uses rounded buttons */
  --radius-input: 0px;
  --radius-pill: 40px;
  --radius-sm: 0.6rem;

  /* --- Buttons / inputs / focus --- */
  --button-padding-block: 16px;
  --button-padding-inline: 24px;
  --shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
  --input-padding: 0.8rem;
  --border-width: 1px;
  --focus-outline-width: 0.09375rem;
  --focus-outline-offset: 0.2em;
}

/* --- Base --- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--heading-margin-bottom);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a { color: inherit; }

/* --- Header: logo above the fold, brand-first --- */
.fr-header {
  display: flex; align-items: center; justify-content: center;
  gap: var(--gap-md);
  padding: var(--padding-xl) var(--padding-lg);
  border-bottom: var(--border-width) solid var(--color-hairline);
}
.fr-logo { width: 103px; height: 22px; display: block; }   /* the storefront's own size */
/* Small uppercase label beside the logo — tracking here is the brand's own
   --letter-spacing-sm (0.06em), not the heading margin token I misused before. */
.fr-wordmark { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--font-size-h6); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--color-foreground); }

/* --- Buttons --- */
.fr-btn {
  font-family: var(--font-body);          /* storefront buttons use the BODY font */
  font-size: var(--font-size-sm);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--radius-button-primary);
  border: var(--border-width) solid var(--color-primary-button-border);
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  cursor: pointer;
  box-shadow: var(--shadow-button);
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.fr-btn:hover {
  background: var(--color-primary-button-hover-background);
  border-color: var(--color-primary-button-hover-border);
}
.fr-btn[disabled] { opacity: 0.4; cursor: default; box-shadow: none; }

.fr-btn--secondary {
  background: var(--color-secondary-button-background);
  color: var(--color-secondary-button-text);
  border-color: var(--color-secondary-button-border);
  border-radius: var(--radius-button-secondary);   /* square, like every button */
  box-shadow: none;
}
.fr-btn--secondary:hover { background: var(--color-secondary-button-hover-background); }
.fr-btn--block { display: block; width: 100%; }

/* --- Inputs --- */
.fr-input, .fr-select, .fr-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-input-text);
  background: var(--color-input-background);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-input);
  padding: var(--input-padding);
}
.fr-textarea { min-height: 55px; resize: vertical; }
.fr-input:focus, .fr-select:focus, .fr-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 calc(var(--border-width) + 0.5px) var(--color-input-border);
}
.fr-label {
  display: block;
  font-size: var(--font-size-h6);
  color: var(--color-foreground-subdued);
  margin-bottom: var(--gap-2xs);
}
.fr-field { margin-bottom: var(--gap-lg); }

/* --- Variant chips (mirrors the storefront's variant picker) --- */
.fr-variant {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: var(--padding-sm) var(--padding-lg);
  background: var(--color-variant-background);
  border: var(--border-width) solid var(--color-variant-border);
  border-radius: 0;                        /* --variant-picker-button-radius: 0px */
  cursor: pointer;
}
.fr-variant:hover {
  background: var(--color-variant-hover-background);
  border-color: var(--color-variant-hover-border);
}
.fr-variant.is-selected {
  background: var(--color-selected-variant-background);
  color: var(--color-selected-variant-text);
  border-color: var(--color-selected-variant-background);
}
.fr-variant[disabled] { opacity: 0.35; cursor: default; }

/* --- Layout --- */
.fr-wrap { max-width: 1200px; margin: 0 auto; padding: var(--padding-lg); }
.fr-narrow { max-width: 420px; margin: 0 auto; padding: var(--padding-2xl) var(--padding-lg); }
.fr-muted { color: var(--color-foreground-muted); }

/* --- Product grid (mobile-first: creators are on phones) --- */
.fr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.fr-card { display: flex; flex-direction: column; gap: var(--gap-xs); }
.fr-card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f7f7f7; }
.fr-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-card-title { font-size: var(--font-size-sm); }
@media (min-width: 700px)  { .fr-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap-xl); } }
@media (min-width: 1000px) { .fr-grid { grid-template-columns: repeat(4, 1fr); } }