/* Hagoma base: fonts, colour tokens, and the Ecomus variables they feed. */

/* Archivo 800 for headings, Inter for text. Self-hosted, SIL OFL 1.1 (see assets/fonts). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallbacks: until the webfonts arrive, text sets in Arial scaled to their widths
   and line metrics, so lines wrap the same and boxes keep their size when the fonts swap.
   Values measured in Chromium against the files above on the site's own copy: size-adjust
   matches the average width per weight, the overrides are Inter's ascent 0.96875 and descent
   0.24121 (Archivo: 0.878 and 0.21) divided by it. One face per Inter weight; the unicode-range
   (both subsets above) leaves characters the webfonts lack, such as arrows, on the system fonts
   behind them. Without Arial (Android) the stacks fall through as before. */
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 105.61%;
  ascent-override: 91.73%;
  descent-override: 22.84%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 106.62%;
  ascent-override: 90.86%;
  descent-override: 22.62%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.72%;
  ascent-override: 96.18%;
  descent-override: 23.95%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.64%;
  ascent-override: 95.31%;
  descent-override: 23.73%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 103.83%;
  ascent-override: 84.56%;
  descent-override: 20.23%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

:root {
  --hg-font-heading: "Archivo", "Archivo Fallback", "Arial Black", Arial, sans-serif;
  --hg-font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --hg-bg: #f7f4ef;
  --hg-text: #1a1816;
  /* 5:1 on --hg-bg and 4.6:1 on the beige card frame (--hg-card-media-bg), for small text. */
  --hg-muted: #696969;
  /* The Shopify theme's accent (settings color_accent). */
  --hg-accent: #b42026;
  /* Accent for small text: #b42026 already reaches 6:1 on --hg-bg, so it needs no darker shade. */
  --hg-accent-text: var(--hg-accent);
  --hg-header-bg: #000;
  --hg-header-text: #fff;
  --hg-nav-color: #f2ede4;
  --hg-header-hover: #e0474d;
  --hg-footer-bg: #0b0b0b;
  --hg-footer-heading: #f2ede4;
  --hg-footer-text: #a39e95;
  --hg-footer-hover: #fff;
  --hg-footer-line: #181818;
  --hg-banner-bg: #434343;
  --hg-banner-text: #fff;
  --hg-card-media-bg: #efeae2;
  --hg-sold-out-bg: #5f5a53;
  --hg-line: rgb(26 24 22 / 0.15);
  --hg-line-strong: rgb(26 24 22 / 0.3);
  --hg-radius: 6px;
  --hg-pad-x: 20px;
}
@media (min-width: 992px) {
  :root { --hg-pad-x: 51px; }
}

/* Ecomus tokens. html:root outranks the parent's :root rules, including its inline Customizer output. */
html:root {
  --em-font__main: var(--hg-font-body);
  --em-color__base: var(--hg-text);
  --em-color__primary: var(--hg-accent);
  --em-link-color-hover: var(--hg-accent-text);
  --em-color-price-sale: var(--hg-accent-text);
  --em-heading-color: var(--hg-text);
  --em-heading-font-weight: 800;
  --em-heading-line-height: 1.1;
  --em-heading-text-transform: uppercase;
}

/* Kirki prints body { font-family; --em-heading-font } after this file, so these need html in front. */
html body {
  --em-heading-font: var(--hg-font-heading);
  background-color: var(--hg-bg);
  color: var(--hg-text);
  font-family: var(--hg-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -0.025em;
}

/* :is, not :where: Ecomus sets a:focus { outline: 0 } (0,1,1); this loads after it at the same
   weight, and one class in a component's own :focus-visible rule still overrides it. */
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Solid red button, as the guardrail .ig-btn renders on the reference store. On hover
   (wide screens) two black dots slide in from the sides and burst to fill it. */
.hg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 10px 20px;
  border: 1px solid var(--hg-accent);
  border-radius: 4px;
  background: var(--hg-accent);
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.hg-btn::before,
.hg-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  transition: 0.6s ease;
}
.hg-btn::before {
  left: -20px;
  transform: translate(-50%, -50%);
}
.hg-btn::after {
  right: -20px;
  transform: translate(50%, -50%);
}
@media (min-width: 1025px) {
  .hg-btn:hover { border-color: #000; color: #fff; }
  .hg-btn:hover::before { animation: hg-burst-left 0.8s both; }
  .hg-btn:hover::after { animation: hg-burst-right 0.8s both; }
}
@keyframes hg-burst-left {
  0% { left: -20px; width: 20px; height: 20px; }
  50% { left: 50%; width: 20px; height: 20px; }
  100% { left: 50%; width: 140%; height: 400%; }
}
@keyframes hg-burst-right {
  0% { right: -20px; width: 20px; height: 20px; }
  50% { right: 50%; width: 20px; height: 20px; }
  100% { right: 50%; width: 140%; height: 400%; }
}
/* Without motion the fill colour simply replaces the button colour. */
@media (prefers-reduced-motion: reduce) {
  .hg-btn::before,
  .hg-btn::after { content: none; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .hg-btn:hover { background: #000; }
  .hg-btn--secondary:hover { background: var(--hg-accent); }
  .hg-btn--ghost:hover { background: #fff; }
}
/* The ring sits on the surface around the button, so it takes the page text colour rather than the white label. */
.hg-btn:focus-visible {
  outline-color: var(--hg-btn-focus, var(--hg-text));
}
.hg-btn:disabled,
.hg-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.hg-btn:disabled::before,
.hg-btn:disabled::after {
  display: none;
}
.hg-btn--small {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
}
/* Outlined accent button (guardrail .ig-btn--secondary). */
.hg-btn--secondary {
  border-color: var(--hg-accent);
  background: #fff;
  color: var(--hg-accent);
}
.hg-btn--secondary::before,
.hg-btn--secondary::after {
  background: var(--hg-accent);
}
/* White outline on photos and dark bands (guardrail .ig-btn--ghost). */
.hg-btn--ghost {
  border-color: #fff;
  background: transparent;
  color: #fff;
}
.hg-btn--ghost:focus-visible {
  outline-color: currentColor;
}
.hg-btn--ghost::before,
.hg-btn--ghost::after {
  background: #fff;
}
@media (min-width: 1025px) {
  .hg-btn--ghost:hover { color: #000; }
}
@media (max-width: 749px) {
  .hg-btn {
    min-height: 39px;
    padding: 8px 15px;
  }
  .hg-btn--small {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 12px;
  }
}