/** Shopify CDN: Minification failed

Line 30:0 All "@import" rules must come first

**/
/* ============================================================
   The Hardware Edit — brand layer over Dawn
   Ported from the static site (thehardwareedit.com).
   Loaded after Dawn's base.css so these win.
   ============================================================ */

/* ---- brand tokens (mirror the static site :root) ---- */
:root {
  --the-slate: #14181C;
  --the-slate-soft: #1C2127;
  --the-verdigris: #4FA8B8;
  --the-verdigris-deep: #3B8895;
  --the-chalk: #EDEEEC;
  --the-chalk-warm: #F4F4F1;
  --the-steel: #8A9196;
  --the-steel-soft: #A8AEB2;
  --the-line: rgba(237, 238, 236, 0.12);
  --the-serif: 'Fraunces', Georgia, serif;
  --the-sans: 'Archivo', 'Helvetica Neue', sans-serif;
}

/* ---- exact brand fonts: override Dawn's font-family vars ----
   Loaded via Google Fonts (@import) so we get the precise
   Fraunces/Archivo regardless of Shopify's font library. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Archivo:wght@400;500;600&display=swap');

:root {
  --font-body-family: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 600;
  --font-heading-family: 'Fraunces', Georgia, serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
}

body {
  font-family: var(--the-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.h0, .h1, .h2, .h3, .h4 {
  font-family: var(--the-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* italic serif accents the brand uses for emphasis */
em, .caption-with-letter-spacing {
  font-style: italic;
}

/* ---- verdigris text selection ---- */
::selection { background: var(--the-verdigris); color: var(--the-slate); }

/* ---- film-grain overlay (matches static site) ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- buttons: brand uppercase, tracked, verdigris primary ---- */
.button,
.shopify-challenge__button,
.customer button {
  font-family: var(--the-sans);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

/* ---- thin verdigris accent on links in rich text ---- */
.rich-text__text a,
.article-content a,
a.link {
  color: var(--the-verdigris);
  text-decoration-color: var(--the-line);
  text-underline-offset: 0.3rem;
  transition: text-decoration-color 0.3s ease;
}
.rich-text__text a:hover,
.article-content a:hover,
a.link:hover { text-decoration-color: var(--the-verdigris); }

/* ---- price styling: keep it quiet and chalk, not loud ---- */
.price { font-family: var(--the-sans); }
.price .price-item--regular { color: var(--the-chalk); }
.price .price-item--sale { color: var(--the-verdigris); }

/* ---- product/collection cards: subtle slate panels with verdigris hover ---- */
.card-wrapper .card,
.card--card { border: 1px solid var(--the-line); border-radius: 2px; transition: border-color .3s ease; }
.card-wrapper:hover .card,
.card--card:hover { border-color: rgba(79,168,184,0.4); }
.card__heading,
.card-information__text { font-family: var(--the-serif); letter-spacing: -0.01em; }
.collection-hero__title,
.collection .title-wrapper h1 { font-family: var(--the-serif); font-weight: 400; }

/* ---- product page: serif title, quiet meta ---- */
.product__title h1,
.product__title { font-family: var(--the-serif); font-weight: 400; letter-spacing: -0.015em; }
.product__text.caption-with-letter-spacing { color: var(--the-verdigris); }

/* ---- variant pickers: brand the selected state ---- */
.product-form__input input[type='radio']:checked + label,
.product-variant-id + label { border-color: var(--the-verdigris); }

/* ---- breadcrumb / pagination accents ---- */
.breadcrumb a { color: var(--the-steel-soft); }
.breadcrumb a:hover { color: var(--the-verdigris); }

/* --- Finish swatch chips: Dawn's default 2.8rem is too small to read wood grain/metallics --- */
.product-form__input--swatch .swatch-input__input + .swatch-input__label {
  --swatch-input--size: 4.8rem;
  margin: 0.8rem 1.2rem 0.3rem 0;
}
@media screen and (min-width: 750px) {
  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    --swatch-input--size: 4.4rem;
  }
}

/* --- Instant colour-name tooltip on swatch hover (label already carries title="") --- */
.product-form__input--swatch .swatch-input__label{ position:relative; }
.product-form__input--swatch .swatch-input__label:hover::after{
  content:attr(title);
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:rgba(20,24,28,.96); color:#F4F4F1;
  font-family:'Archivo',sans-serif; font-size:1.2rem; letter-spacing:.4px;
  padding:.4rem 1rem; border-radius:.6rem; border:1px solid rgba(79,168,184,.35);
  white-space:nowrap; z-index:12; pointer-events:none;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.product-form__input--swatch .swatch-input__label:hover::before{
  content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(20,24,28,.96); z-index:12; pointer-events:none;
}