:root {
  --color-page: #FFFFFF;
  --color-announcement-bg: #EDEBE7;
  --color-announcement-text: #2A3743;
  --color-section-alt: #E6EBEF;
  --color-ink: #2A3743;
  --color-on-ink: #FFFFFF;
  --color-border: #E0DFDF;
  --color-input-border: var(--color-border);
  --color-button-primary: #2A3743;
  --color-button-primary-text: #FFFFFF;
  --color-button-hover: #3E5162;
  --color-button-loading: #202A33;
  --color-savings: #526B81;
  --color-sale-bg: #FDDACA;
  --color-sale-text: #2A3743;
  --color-stock-in: #54C63A;
  --color-stock-low: #F4AF29;
  --color-footer-bg: #2A3743;
  --color-footer-text: #FFFFFF;
  --color-drawer-bg: #FFFFFF;
  --color-overlay: #444444;
  --color-overlay-scrim: color-mix(in srgb, var(--color-overlay) 36%, transparent);
  --color-error: #D02E2E;
  --color-error-bg: #FFF6F6;
}
@layer tokens {
  :root {
    --opacity-muted: 0.65;     
    --focus-ring-color: var(--color-ink);   
    --font-heading: "HS Heading", "HS Body", sans-serif;  
    --font-body: "HS Body", "HS Heading", sans-serif;     
    --fw-heading: 500;
    --fw-body: 400;
    --fw-body-strong: 600;
    --fw-button: 700;   
    --lh-heading: 1.1;
    --lh-body: 1.4;
    --lh-product-title: 1.3;
    --lh-button: 1.42;
    --ls-heading: 0;
    --ls-body: 0.025em;
    --ls-uppercase: 0.2em;
    --fs-body: 15px;             
    --fs-body-sm: 14px;
    --fs-body-xs: 12px;
    --fs-accent-sm: 13px;
    --fs-enlarge: 21px;          
    --fs-hero-subtitle: 18px;
    --fs-h1: 36px;               
    --fs-h1-hero: 36px;          
    --fs-h2: 31px;               
    --fs-h3: 26px;               
    --fs-nav: 14px;
    --fs-product-title: 12px;    
    --fs-price-card: 12px;       
    --fs-price-pdp: 18px;
    --fs-savings: 15px;          
    --fs-collection-title: 12px; 
    --fs-button: 11px;           
    --fs-announcement: 10.8px;
    --fs-badge: 10.4px;          
    --fs-footer-heading: 13px;
    --fs-footer-text: 14px;
    --measure: 38rem;          
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-section: clamp(4rem, 2.5rem + 6vw, 9rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);     
    --container-text: 44rem;
    --container-sm: 40rem;
    --container-md: 64rem;
    --container-lg: 80rem;
    --container-xl: 90rem;
    --header-height: 4.5rem;
    --radius-0: 0;
    --radius-1: 2px;
    --radius-pill: 999px;
    --hairline: 1px;
    --line: var(--hairline) solid var(--color-border);
    --line-strong: var(--hairline) solid var(--color-ink);
    --button-height: 3rem;                
    --button-height-sm: 2.5rem;
    --button-padding-inline: 1.75rem;
    --button-font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--font-body);
    --button-tracking: var(--ls-uppercase);
    --button-radius: var(--radius-0);
    --button-primary-bg: var(--color-button-primary);
    --button-primary-text: var(--color-button-primary-text);
    --button-primary-bg-hover: var(--color-button-hover);
    --button-loading-bg: var(--color-button-loading);
    --button-secondary-border: var(--color-border);
    --button-secondary-border-hover: var(--color-ink);
    --button-secondary-text: var(--color-ink);
    --card-bg: transparent;
    --card-media-bg: var(--color-page);
    --card-gap: var(--space-4);
    --card-title-font: var(--fw-body) var(--fs-product-title) / var(--lh-product-title) var(--font-body);
    --card-meta-font: var(--fw-body) var(--fs-body-xs) / var(--lh-body) var(--font-body);
    --card-border: none;
    --card-hover-shift: -2px;
    --input-height: 3rem;
    --input-padding-inline: 1rem;
    --input-bg: var(--color-page);
    --input-border: var(--hairline) solid var(--color-input-border);   
    --input-border-focus: var(--hairline) solid var(--color-ink);
    --input-radius: var(--radius-0);
    --label-font: var(--fw-body) var(--fs-body-sm) / var(--lh-body) var(--font-body);
    --label-tracking: var(--ls-body);
    --ratio-product: 4 / 5;
    --ratio-tile: 1 / 1;
    --ratio-swatch: 1 / 1;
    --ratio-editorial: 3 / 2;
    --ratio-hero: 16 / 9;
    --ratio-hero-mobile: 4 / 5;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-1: 150ms;
    --duration-2: 300ms;
    --duration-3: 700ms;
    --duration-4: 1600ms;
    --focus-ring: 2px solid var(--focus-ring-color);
    --focus-offset: 3px;
    --z-header: 100;
    --z-drawer: 200;
    --z-dialog: 300;
    --z-toast: 400;
  }
  @media (min-width: 769px) {
    :root {
      --fs-body: 16px;
      --fs-h1: 42px;
      --fs-h1-hero: 61px;
      --fs-h2: 36px;
      --fs-h3: 27px;
      --fs-product-title: 16px;
      --fs-price-card: 14px;
      --fs-savings: 16px;
      --fs-collection-title: 15px;
      --fs-button: 13px;
      --fs-badge: 13.6px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-1: 0ms;
      --duration-2: 0ms;
      --duration-3: 0ms;
      --duration-4: 0ms;
    }
  }
}
@font-face {
  font-family: "HS Heading";
  src: url("../fonts/hs-heading-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HS Body";
  src: url("../fonts/hs-body-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HS Body";
  src: url("../fonts/hs-body-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@layer reset, tokens, base, layout, components, utilities;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, ol, ul {
    margin: 0;
  }
  ol[role="list"],
  ul[role="list"] {
    list-style: none;
    padding: 0;
  }
  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }
  input,
  button,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
}
@layer base {
  html {
    color-scheme: light;
    background: var(--color-page);
    color: var(--color-ink);
    scroll-padding-top: var(--header-height);
  }
  body {
    min-height: 100svh;
    background: var(--color-page);
    color: var(--color-ink);
    font: var(--fw-body) var(--fs-body) / var(--lh-body) var(--font-body);
    letter-spacing: var(--ls-body);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-body); }
  p {
    max-width: var(--measure);
    text-wrap: pretty;
  }
  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.22em;
    text-decoration-color: var(--color-border);
    transition: text-decoration-color var(--duration-1) var(--ease-out);
  }
  a:hover {
    text-decoration-color: currentColor;
  }
  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  ::selection {
    background: var(--color-ink);
    color: var(--color-on-ink);
  }
  hr {
    border: 0;
    border-block-start: var(--line);
  }
  .hs-num,
  data,
  time {
    font-variant-numeric: lining-nums tabular-nums;
  }
  label {
    font: var(--label-font);
    letter-spacing: var(--label-tracking);
    color: var(--color-ink);
  }
  input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]),
  select,
  textarea {
    min-height: var(--input-height);
    padding-inline: var(--input-padding-inline);
    background: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    font-family: var(--font-body);
    font-size: var(--fs-body);
  }
  input:focus,
  input:active,
  select:focus,
  select:active,
  textarea:focus,
  textarea:active {
    border: var(--input-border-focus);
  }
  [aria-invalid="true"] {
    border-color: var(--color-error);
    background-color: var(--color-error-bg);
    color: var(--color-error);
  }
}
@layer utilities {
  .visually-hidden,
  .hs-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
  }
  .hs-muted {
    opacity: var(--opacity-muted);
  }
  .hs-caps {
    font-family: var(--font-body);
    font-weight: var(--fw-body);
    font-size: var(--fs-accent-sm);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
  }
}
@layer layout {
  .hs-container {
    width: 100%;
    max-width: calc(var(--container-lg) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .hs-container--xl { max-width: calc(var(--container-xl) + 2 * var(--gutter)); }
  .hs-container--md { max-width: calc(var(--container-md) + 2 * var(--gutter)); }
  .hs-container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }
  .hs-section {
    padding-block: var(--space-section);
  }
  .hs-stack > * + * {
    margin-block-start: var(--stack-space, var(--space-5));
  }
  .hs-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-space, var(--space-4));
  }
  .hs-grid {
    display: grid;
    gap: var(--space-6) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 48em) {
    .hs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  }
  @media (min-width: 64em) {
    .hs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}
@layer components {
  .hs-wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-ink);
    text-decoration: none;
  }
  .hs-wordmark--sm .hs-wordmark__name {
    text-transform: uppercase;
    font: var(--fw-heading) var(--fs-nav) / 1 var(--font-heading);
    letter-spacing: var(--ls-uppercase);
  }
  .hs-wordmark--display .hs-wordmark__name {
    font-family: var(--font-heading);
    font-size: var(--fs-h1-hero);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
  }
  .hs-wordmark__descriptor {
    font: var(--fw-body) var(--fs-accent-sm) / var(--lh-body) var(--font-body);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--color-ink);
  }
}
@layer components {
  .hs-lang__list {
    display: flex;
    gap: var(--space-1);
  }
  .hs-lang__link {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font: var(--fw-heading) var(--fs-nav) / var(--lh-heading) var(--font-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-ink);
    opacity: var(--opacity-muted);
    text-decoration: none;
    border-bottom: var(--hairline) solid transparent;
  }
  .hs-lang__link:hover { opacity: 1; }
  .hs-lang__link[aria-current="true"] {
    opacity: 1;
    border-bottom-color: var(--color-ink);
  }
}
@layer components {
  .hs-measure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: var(--measure-width, 3.25rem);
    height: 100%;
    color: var(--color-ink);
    opacity: var(--opacity-muted);
    font: var(--fw-body) var(--fs-announcement) / 1 var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }
  .hs-measure__side {
    position: relative;
    height: 100%;
  }
  .hs-measure__side--cm {
    border-inline-end: var(--hairline) solid currentColor;
    background:
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 7)) right top / 70% 100% no-repeat,
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 14)) right top / 45% 100% no-repeat,
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 70)) right top / 22% 100% no-repeat;
  }
  .hs-measure__side--in {
    background:
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 27.559 * 4)) left top / 60% 100% no-repeat,
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 27.559)) left top / 30% 100% no-repeat;
  }
  .hs-measure__unit,
  .hs-measure__n {
    position: absolute;
    color: inherit;
    translate: 0 -50%;
  }
  .hs-measure__side--cm .hs-measure__unit,
  .hs-measure__side--cm .hs-measure__n { inset-inline-start: 0; }
  .hs-measure__side--in .hs-measure__unit,
  .hs-measure__side--in .hs-measure__n { inset-inline-end: 0; text-align: end; }
  .hs-measure__unit { top: 0; translate: 0 0; padding-block-start: 0.35rem; text-transform: uppercase; letter-spacing: var(--ls-uppercase); }
  .hs-measure__side .hs-measure__n,
  .hs-measure__side .hs-measure__unit { background: var(--color-page); padding-block: 1px; padding-inline-end: 2px; }
  .hs-measure__side--cm .hs-measure__n:nth-child(2) { top: calc(100% / 7 * 1); }
  .hs-measure__side--cm .hs-measure__n:nth-child(3) { top: calc(100% / 7 * 2); }
  .hs-measure__side--cm .hs-measure__n:nth-child(4) { top: calc(100% / 7 * 3); }
  .hs-measure__side--cm .hs-measure__n:nth-child(5) { top: calc(100% / 7 * 4); }
  .hs-measure__side--cm .hs-measure__n:nth-child(6) { top: calc(100% / 7 * 5); }
  .hs-measure__side--cm .hs-measure__n:nth-child(7) { top: calc(100% / 7 * 6); }
  .hs-measure__side--in .hs-measure__n:nth-child(2) { top: calc(100% / 27.559 * 4); }
  .hs-measure__side--in .hs-measure__n:nth-child(3) { top: calc(100% / 27.559 * 8); }
  .hs-measure__side--in .hs-measure__n:nth-child(4) { top: calc(100% / 27.559 * 12); }
  .hs-measure__side--in .hs-measure__n:nth-child(5) { top: calc(100% / 27.559 * 16); }
  .hs-measure__side--in .hs-measure__n:nth-child(6) { top: calc(100% / 27.559 * 20); }
  .hs-measure__side--in .hs-measure__n:nth-child(7) { top: calc(100% / 27.559 * 24); }
}
@layer components {
  .hs-strand {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .hs-strand__hair {
    stroke: var(--color-ink);
    stroke-width: 0.75;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hs-strand-draw var(--duration-4) var(--ease-in-out) forwards;
    animation-delay: 200ms;
  }
  .hs-strand__hair:nth-child(3n + 1) { animation-delay: 320ms; }
  .hs-strand__hair:nth-child(3n + 2) { animation-delay: 440ms; }
  .hs-strand__hair--accent { stroke-width: 1; }
  .hs-strand__tie {
    fill: none;
    stroke: var(--color-ink);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .hs-strand--static .hs-strand__hair { animation: none; stroke-dashoffset: 0; }
  @keyframes hs-strand-draw {
    to { stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hs-strand__hair { animation: none; stroke-dashoffset: 0; }
  }
}
@layer components {
  .hs-index {
    list-style: none;
    padding: 0;
    border-block-start: var(--line);
  }
  .hs-index__item {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-block-end: var(--line);
  }
  .hs-index__no {
    font: var(--fw-body) var(--fs-body-xs) / 1 var(--font-body);
    letter-spacing: var(--ls-body);
    color: var(--color-ink);
    opacity: var(--opacity-muted);
  }
  .hs-index__title {
    font: var(--fw-body) var(--fs-enlarge) / var(--lh-heading) var(--font-body);
    text-decoration: none;
  }
  .hs-index__status {
    font: var(--fw-body) var(--fs-accent-sm) / 1 var(--font-body);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--color-ink);
    opacity: var(--opacity-muted);
  }
}
@layer components {
  .pl {
    --rule-w: 2.25rem;
    --strand-w: 2.75rem;
    position: relative;
    display: grid;
    grid-template-columns: var(--rule-w) var(--strand-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
  }
  .pl__skip {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--color-button-primary);
    color: var(--color-button-primary-text);
    font: var(--fw-body-strong) var(--fs-body-xs) / 1 var(--font-body);
    translate: 0 -200%;
  }
  .pl__skip:focus { translate: 0 0; }
  .pl__rule {
    grid-row: 1 / -1;
    grid-column: 1;
    padding-block: var(--space-5);
    padding-inline-start: var(--space-2);
    --measure-width: 100%;
  }
  .pl__rule .hs-measure__side--in { display: none; }
  .pl__strand {
    position: relative;
    grid-row: 1 / -1;
    grid-column: 2;
  }
  .pl__strand > svg {
    position: absolute;
    inset: var(--space-5) 0 var(--space-5) 0;
    width: 100%;
    height: calc(100% - 2 * var(--space-5));
  }
  .pl__header,
  .pl__main,
  .pl__footer {
    grid-column: 3;
    padding-inline: var(--gutter);
  }
  .pl__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height);
  }
  .pl__main {
    align-self: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding-block: var(--space-8) var(--space-7);
  }
  .pl__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink);
  }
  .pl__eyebrow::before {
    content: "";
    inline-size: 2.5rem;
    block-size: var(--hairline);
    background: var(--color-ink);
    opacity: var(--opacity-muted);
  }
  .pl__title {
    margin-block: var(--space-4) var(--space-3);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h1-hero);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
  }
  .pl__status {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-ink);
  }
  .pl__lead {
    margin-block-start: var(--space-6);
    font-size: var(--fs-enlarge);
    line-height: var(--lh-body);
    max-width: 30ch;
  }
  .pl__text {
    margin-block-start: var(--space-4);
    color: var(--color-ink);
    max-width: 44ch;
  }
  .pl__aside-label {
    display: block;
    margin-block-end: var(--space-3);
    color: var(--color-ink);
  }
  .pl__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-4) var(--space-5);
    border-block-start: var(--line);
    margin-inline: var(--gutter);
    padding-inline: 0;
    color: var(--color-ink);
  }
  .pl__reveal {
    opacity: 0;
    translate: 0 0.75rem;
    animation: pl-rise var(--duration-3) var(--ease-out) forwards;
  }
  .pl__reveal--1 { animation-delay: 120ms; }
  .pl__reveal--2 { animation-delay: 260ms; }
  .pl__reveal--3 { animation-delay: 520ms; }
  .pl__reveal--4 { animation-delay: 700ms; }
  .pl__reveal--5 { animation-delay: 900ms; }
  @keyframes pl-rise {
    to { opacity: 1; translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pl__reveal { opacity: 1; translate: none; animation: none; }
  }
  @media (min-width: 48em) {
    .pl {
      --rule-w: 3.5rem;
      --strand-w: 5.5rem;
    }
    .pl__rule .hs-measure__side--in { display: block; }
  }
  @media (min-width: 64em) {
    .pl {
      --rule-w: 4rem;
      --strand-w: 8rem;
    }
    .pl__main {
      grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
      align-items: end;
      column-gap: var(--space-9);
      padding-block-end: var(--space-8);
    }
    .pl { grid-template-rows: auto 2fr auto 3fr auto; }
    .pl__main { grid-row: 3; }
    .pl__footer { grid-row: 5; }
  }
}