/* halftone-skin.css — the "Halftone" look over the lifted Hopscotch front-end.

   Dark #0A0A0C / paper #F4F4F2 with one acid accent (#D8FF3E), Anton display type in
   tight uppercase, Archivo for copy, navigation and buttons, Space Mono for the data
   voice (eyebrows, prices, tabs, tickers), square geometry (no pills, no rounded
   media, 1px hairlines).

   Styling only: every rule here re-declares a token reference-head.css sets on
   :root (fonts, radii, button metrics, badge colours) or flattens a corner the
   lifted sheets round by hand. No markup contract changes.

   Load order: after every stylesheet and BEFORE the theme-fonts / theme-colors /
   theme-layout includes, so a merchant's Typography or Colors pick still wins over
   this sheet on plain source order.
   ------------------------------------------------------------------------------- */


/* ============================================================================
   1. Tokens
   ============================================================================ */

:root {
  /* type ------------------------------------------------------------------ */
  --font-display: "Anton", "Archivo", Impact, "Arial Narrow", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-heading--family: var(--font-display);
  --font-heading--style: normal;
  --font-heading--weight: 400;
  --font-highlight--family: var(--font-display);
  --font-highlight--weight: 400;

  --font-body--family: var(--font-sans);
  --font-body--style: normal;
  --font-body--weight: 400;
  --font-paragraph--weight: 400;

  /* eyebrows: the mono data voice, small and widely tracked */
  --font-subheading--family: var(--font-mono);
  --font-subheading--weight: 700;
  --font-subheading--transform: uppercase;
  --font-subheading--letter-spacing: 0.18em;
  --font-subheading--size: 1.15rem;

  --font-pcard-title--family: var(--font-sans);
  --font-pcard-title--weight: 600;
  --font-pcard-title--size: 1.3rem;
  --font-pcard-price--family: var(--font-mono);
  --font-pcard-price--weight: 700;
  --font-pcard-badge--family: var(--font-sans);
  --font-pcard-badge--weight: 700;
  --font-pcard-badge--transform: uppercase;
  --font-pcard-badge--letter-spacing: 0.1em;

  --font-navigation--family: var(--font-sans);
  --font-navigation--weight: 600;
  --font-navigation--transform: uppercase;
  --font-navigation--letter-spacing: 0.12em;

  --font-button--family: var(--font-sans);
  --font-button--weight: 700;
  --font-button--transform: uppercase;
  --font-button--letter-spacing: 0.1em;

  /* scale: a condensed display face carries big sizes, so the headings grow and
     the line-heights close up */
  --font-size--mega-title: clamp(5.6rem, calc(9vw + 0.8rem), 14.4rem);
  --font-size--h1: clamp(4rem, calc(3.6vw + 1.6rem), 7.2rem);
  --font-size--h2: clamp(3.2rem, calc(2.6vw + 1.2rem), 5.2rem);
  --font-size--h3: clamp(2.2rem, calc(1.4vw + 1.1rem), 3rem);
  --font-size--h4: clamp(1.8rem, calc(0.8vw + 1.2rem), 2.2rem);
  --font-size--h5: 1.6rem;
  --font-size--h6: 1.4rem;
  --font-size--paragraph: 1.5rem;
  --font-size--paragraph-small: 1.3rem;

  --font-mega-title--line-height: 0.92;
  --font-h1--line-height: 0.95;
  --font-h2--line-height: 1;
  --font-h3--line-height: 1.05;
  --font-h4--line-height: 1.1;
  --font-h5--line-height: 1.2;
  --font-h6--line-height: 1.3;
  --font-paragraph--line-height: 1.55;
  --line-height--display-tight: 0.88;
  --line-height--display-normal: 0.92;
  --line-height--display-loose: 0.98;
  --line-height--heading-tight: 0.95;
  --line-height--heading-normal: 1;
  --line-height--heading-loose: 1.1;

  /* the acid accent (demo 3): main buttons on the night surfaces, hover ink */
  --color-accent: 216 255 62;
  --color-accent-ink: 11 11 11;

  /* geometry --------------------------------------------------------------- */
  --input-border-radius: 0px;
  --textareas-radius: 0px;
  --button-corner-radius: 0px;
  --badge-corner-radius: 0px;
  --product-card-media-radius: 0px;
  --dialog-radius: 0px;
  --media-radius: 0px;
  --gallery-radius: 0px;
  --card-variants-radius: 0px;
  --cart-thumbnail-border-radius: 0px;
  --quantity-selector-radius: 0px;
  --bottom-dialog-radius: 0px;
  --pagination-progress-radius: 0px;

  --button-height: 5.2rem;
  --input-height: 5.2rem;
  --button-border-thickness: 0.1rem;
  --input-border-width: 0.1rem;
  --button-outline-border-alpha: 1;

  /* badges: one sale red, the rest monochrome ------------------------------- */
  --color-sale-badge-background: 188 76 76;
  --color-sale-badge-text: 255 255 255;
  --color-new-badge-background: 11 11 13;
  --color-new-badge-text: 244 244 242;
  --color-hot-badge-background: 11 11 13;
  --color-hot-badge-text: 244 244 242;
  --color-popular-badge-background: 11 11 13;
  --color-popular-badge-text: 244 244 242;
  --color-sold-out-badge-background: 81 81 82;
  --color-sold-out-badge-text: 244 244 242;
  --color-focus-ring: 11 11 13;
  /* thinner icon strokes: every lifted icon reads var(--icon-stroke-width, 2) */
  --icon-stroke-width: 1.25;
}

/* A focused field keeps its surface. Declared on the scheme element itself so it
   resolves against THAT element's --color-background — including the pair a section
   writes inline (the dark header), where a root value would have been paper. */
:root,
[class*="color-scheme-"] {
  --color-input-focus-background: var(--color-background);
}


/* ============================================================================
   2. Colour schemes — the reference's three surfaces: paper, night, slate.
      A section with "Use theme colors" off writes its own pair inline and is
      untouched here; the page surface follows Theme settings > Colors.
   ============================================================================ */

:root,
.color-scheme-1,
.color-scheme-3,
.color-scheme-10 {
  --color-background: 244 244 242;
  --color-background-secondary: 232 232 229;
  --color-foreground: 11 11 13;
  --color-foreground-secondary: rgba(11 11 13 / 0.7);
  --color-border: 11 11 13;
  --color-border-alpha: 0.15;
  --color-sale-price: 170 70 70;
  --color-primary-button-background: 11 11 13;
  --color-primary-button-text: 244 244 242;
  --color-secondary-button-background: 232 232 229;
  --color-secondary-button-text: 11 11 13;
  --color-secondary-button-border: 232 232 229;
  --color-input-background: 244 244 242;
  --color-input-text: 11 11 13;
  --color-input-focus-text: 11 11 13;
  --input-border-color: rgb(11 11 13 / 0.3);
  --color-swatch-border: rgb(11 11 13 / 0.2);
}

.color-scheme-2,
.color-scheme-4,
.color-scheme-7,
.color-scheme-8 {
  --color-background: 232 232 229;
  --color-background-secondary: 244 244 242;
  --color-foreground: 11 11 13;
  --color-foreground-secondary: rgba(11 11 13 / 0.7);
  --color-border: 11 11 13;
  --color-border-alpha: 0.15;
  --color-sale-price: 170 70 70;
  --color-primary-button-background: 11 11 13;
  --color-primary-button-text: 244 244 242;
  --color-secondary-button-background: 244 244 242;
  --color-secondary-button-text: 11 11 13;
  --color-secondary-button-border: 244 244 242;
  --color-input-background: 244 244 242;
  --color-input-text: 11 11 13;
  --color-input-focus-text: 11 11 13;
  --input-border-color: rgb(11 11 13 / 0.3);
  --color-swatch-border: rgb(11 11 13 / 0.2);
}

.color-scheme-inverse,
.color-scheme-6 {
  --color-background: 10 10 12;
  --color-background-secondary: 24 24 27;
  --color-foreground: 244 244 242;
  --color-foreground-secondary: rgba(244 244 242 / 0.7);
  --color-border: 244 244 242;
  --color-border-alpha: 0.18;
  --color-sale-price: 214 110 110;
  --color-primary-button-background: var(--color-accent);
  --color-primary-button-text: var(--color-accent-ink);
  --color-secondary-button-background: 28 30 36;
  --color-secondary-button-text: 244 244 242;
  --color-secondary-button-border: 28 30 36;
  --color-input-background: 10 10 12;
  --color-input-text: 244 244 242;
  --color-input-focus-text: 244 244 242;
  --input-border-color: rgb(244 244 242 / 0.3);
  --color-swatch-border: rgb(244 244 242 / 0.25);
}

.color-scheme-5,
.color-scheme-9 {
  --color-background: 28 30 36;
  --color-background-secondary: 40 42 49;
  --color-foreground: 232 233 236;
  --color-foreground-secondary: rgba(232 233 236 / 0.7);
  --color-border: 232 233 236;
  --color-border-alpha: 0.18;
  --color-sale-price: 214 110 110;
  --color-primary-button-background: var(--color-accent);
  --color-primary-button-text: var(--color-accent-ink);
  --color-secondary-button-background: 40 42 49;
  --color-secondary-button-text: 232 233 236;
  --color-secondary-button-border: 40 42 49;
  --color-input-background: 28 30 36;
  --color-input-text: 232 233 236;
  --color-input-focus-text: 232 233 236;
  --input-border-color: rgb(232 233 236 / 0.3);
  --color-swatch-border: rgb(232 233 236 / 0.25);
}

.color-scheme-11 {
  --color-background: 244 244 242;
  --color-background-secondary: 232 232 229;
  --color-foreground: 188 76 76;
  --color-foreground-secondary: rgba(188 76 76 / 0.7);
  --color-border: 188 76 76;
  --color-border-alpha: 0.2;
  --color-primary-button-background: 11 11 13;
  --color-primary-button-text: 244 244 242;
  --color-secondary-button-background: 244 244 242;
  --color-secondary-button-text: 11 11 13;
  --color-secondary-button-border: 244 244 242;
  --color-input-background: 244 244 242;
  --color-input-text: 11 11 13;
  --color-input-focus-text: 188 76 76;
  --input-border-color: rgb(188 76 76 / 0.3);
}


/* ============================================================================
   3. Type
   ============================================================================ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* every heading role: condensed display caps, tight */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.mega-title,
.text-block.h1 > *, .text-block.h2 > *, .text-block.h3 > *,
.text-block.h4 > *, .text-block.h5 > *, .text-block.h6 > * {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* the slideshow / page titles use a custom size on the heading family */
.custom-typography,
.custom-typography > * {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* body copy: a touch wider set, the fashion-catalogue register */
body {
  font-stretch: 100%;
}
.rte p,
.text-block.paragraph > * {
  font-stretch: 102%;
}

/* labels, nav and buttons: semi-expanded caps */
.menu__item,
.mega-menu__link--top,
.btn,
.product-card__title,
.badge,
.footer__heading,
.footer .accordion__summary-text,
.accordion__summary-text {
  font-stretch: 108%;
}

/* eyebrow: small caps label with the reference's short rule after it */
.text-subheading {
  line-height: 1.5;
}
.text-subheading > :is(p, span, div, h1, h2, h3, h4, h5, h6):not(:empty)::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.4rem;
  height: 1px;
  margin-inline-start: 1.2rem;
  background: currentColor;
  opacity: 0.5;
}
.text-center .text-subheading > :not(:empty)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.4rem;
  height: 1px;
  margin-inline-end: 1.2rem;
  background: currentColor;
  opacity: 0.5;
}

/* product card copy */
.product-card__title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.price, .compare-at-price, .unit-price {
  font-size: 1.3rem;
  letter-spacing: 0;
}

/* badges: tiny tracked tags */
.badge {
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.3rem 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* tabs (product tabs, collection tabs, PDP tabs): mono caps, underline not pill */
.tabs__button {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tabs__button:before { border-radius: 0; }

/* the `rounded` utility (tab chips, sticker badges, article tags): square here */
.rounded {
  --focus-radius: 0;
  border-radius: 0 !important;
}
.socials--solid .btn,
.btn--icon-only {
  --button-corner-radius: 0;
}

/* accordion summaries (FAQ, footer columns, PDP details) */
.accordion__summary-text {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  font-weight: 600;
}

/* marquee band: the reference's big mono ticker */
.marquee .text-block.h3 > *,
.marquee .text-block.h2 > *,
.marquee .text-block.h4 > * {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, calc(2.4vw + 1rem), 4.4rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.marquee .text-block.paragraph > * {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.2rem, calc(0.6vw + 0.7rem), 1.6rem);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* rich-text links: thin underline, no colour shift */
.rte a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}


/* ============================================================================
   4. Header + navigation
   ============================================================================ */

.header {
  --header-icon-size: 3.6rem;
}

/* text logo: tracked mono wordmark */
.header__logo--text,
.menu-drawer__logo .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* nav: an underline that grows in on hover (demo 3), accent ink on the night header */
.menu__item {
  position: relative;
}
.menu__item::after {
  content: "";
  position: absolute;
  inset-inline: 1rem;
  bottom: 0.2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--animation-duration--fast) var(--animation-easing);
}
.menu__item:hover::after,
.menu__item[aria-current="page"]::after {
  transform: scaleX(1);
}
.menu__item:hover::before {
  background: transparent;
}

.menu__item {
  font-size: 1.2rem;
  padding: 0.6rem 1rem;
}
.menu__item:before { border-radius: 0; }

/* the mega menu panel and dropdowns: square */
.header__background-inner,
.dropdown,
.mega-menu__container,
body:has(.hopscotch-section:first-child [data-header-overlay]) .header-sticky:not(.header-scrolled) .header__background-inner,
body:has(.hopscotch-section:first-child [data-header-overlay]) .header-section .header__background-inner {
  border-radius: 0 !important;
}
.mega-menu__link--top {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  font-weight: 600;
}

/* cart count: a monochrome square, not a red bubble */
.cart-count:not(.cart-count--unstyled) {
  background: rgb(var(--color-accent));
  color: rgb(var(--color-accent-ink));
  border-radius: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
}

/* header search field */
.header__search .search__input {
  border-radius: 0;
}
.header__search .search__content {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* ============================================================================
   5. Buttons, inputs, controls
   ============================================================================ */

.btn {
  font-size: 1.25rem;
  --button-padding-inline: 2.8rem;
}
.btn--small, .btn--extra-small {
  font-size: 1.1rem;
}
/* the solid icon chip inside arrow buttons: a square, not a disc. The chip is the
   overlay layer clipped to a circle at rest and to a huge circle on hover (the sweep);
   the same two states as insets keep the sweep and square the chip. */
.btn__icon-icon {
  border-radius: 0;
}
/* more air between the label and the chip, and after the chip */
.btn--icon-solid,
.btn--icon-solid-desktop {
  --button-icon-gap: 1.6rem;
  --button-padding-inline-end: 1.2rem;
  padding-inline-end: calc(var(--button-padding-inline-end) + var(--icon-solid-size) * 2 + var(--button-icon-gap));
}
.btn--icon-solid .btn__icon,
.btn--icon-solid-desktop .btn__icon {
  clip-path: inset(
    calc(50% - var(--icon-solid-size)) var(--button-padding-inline-end)
    calc(50% - var(--icon-solid-size)) calc(100% - var(--button-padding-inline-end) - var(--icon-solid-size) * 2)
  );
}
.btn--icon-solid:hover .btn__icon,
.btn--icon-solid-desktop:hover .btn__icon {
  clip-path: inset(0);
}

/* inputs: hairline box on the surface colour, square */
.form-control,
.field__input,
.customer .field input,
.customer .select > select,
.product-properties-wrapper .selector-wrapper :is(input, select, textarea),
.vouchers-modal discount-input .field__input,
.vouchers-modal discount-input .button,
.quantity .quantity__input,
.quantity-selector .quantity-input,
.country-filter__input,
.ts-facets__sort select,
.ts-facets__select select {
  border-radius: 0 !important;
}

/* checkboxes square */
input:is([type=checkbox]),
.ts-facet__checkbox,
.product-card--bought-together .product-bought-together__checkbox {
  border-radius: 0 !important;
}

/* variant option pills → square tiles */
.variant-option__button-label:not(.variant-option__button-label--circle),
.product-form__input input[type='radio'] + label,
.product-form__input input[type='radio'] + .variant-img-label-wrapper {
  border-radius: 0 !important;
}

/* card quick-add / wishlist discs → square tiles */
.product-card .quick-add--combine .quick-add__button {
  --button-corner-radius: 0;
}
product-card .wishlist-icon-btn,
.product-card .wishlist-icon-btn,
.wishlist-icon-btn {
  border-radius: 0 !important;
}

/* pagination numbers, carousel arrows, accordion arrows */
.pagination__list .pagination__item,
.accordion--icon-solid .accordion__summary-arrow,
.btn--radius,
.button-circle {
  border-radius: 0 !important;
}
.pagination__list .pagination__item {
  font-family: var(--font-mono);
}

/* the solid arrow of the PDP / cart quantity stepper and promo labels */
.quickview_promo-promo-label,
.quickview_promo-promo-label:before,
.label-tag,
.order-tab .order-tab__slider .grid__item div .order-count,
.ts-facet__count,
.ts-facets__pill,
.ts-facet__price input,
.ts-facets--drawer .ts-facet__option,
.ts-facet__panel,
span.active-facets__button-inner,
.gallery__count {
  border-radius: 0 !important;
}


/* ============================================================================
   6. Media, cards, panels — square everything the lifted sheets round by hand
   ============================================================================ */

.product-card__media,
.product-card--horizontal .product-card__media,
.product-card--horizontal.product-card--mobile-box-style,
.product-card--style-card.product-card--horizontal,
.product-card--style-card.product-card--standard,
.product-card--mobile-solid,
.product-card--bundle .product-card__media,
.product-card--bought-together .product-card__wrapper,
.product-card--bought-together .product-card__media,
.menu-sidebar__products .product-card__media,
.menu-sidebar__collection-image,
.cart-drawer__recommendation-products .product-card--horizontal,
.cart-drawer__recommendation-product--placeholder,
.cart-drawer .cart-item__image,
.cart-items__table-row--gift-wrap,
.collection-card__link,
.collection-item__image,
.collection-highlight-pcard,
.testimonial__product-media,
.hotspot-icon__product-media,
.product-overlay-card__content,
.product-overlay-card__image,
.products-bundle-selection__bar-item-content,
.products-bundle-selection__bar-count,
.products-bundle-selection__bar-items:before,
.blog-posts--featured_grid .article-card--row .article-card__media,
.accordion--card .accordion__row,
.countdown-timer--card .countdown-timer__number,
.facets__inputs-list--images fieldset,
.localization-form__list-item:not([hidden]),
.scroll-progress-bar .progress-container,
.image-comparison--heading-style-badge .image-comparison__heading,
.card__media,
.gallery__main,
.gallery__slide--sized img,
.thumb,
.lazy-collection__skeleton-media,
.lazy-collection__skeleton-line,
.store-locator .store-selector-item,
.card-variants__sheet::before,
.product-card__wrapper:has(.card-variants__sheet)::before,
.product-card[data-card-frame] .product-card__wrapper::before {
  border-radius: 0 !important;
}

/* a quiet tile behind every product photo, like the reference's packshots */
.product-card__media {
  background: rgb(var(--color-background-secondary));
}

/* dialogs and drawers: square */
.dialog--modal,
.dialog--drawer-left,
.dialog--drawer-right,
.dialog--drawer-bottom--left,
.dialog--drawer-bottom--right,
.dialog--drawer-mobile-bottom,
.tooltip.tooltip--mobile-sheet,
.sticky-add-to-cart__wrapper,
.cart-drawer-summary__inner,
#product-quickview-modal[open],
vouchers-modal .vouchers-modal {
  border-radius: 0 !important;
}

/* the PDP's date picker */
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar,
body:has(.product-properties-wrapper .flatpickr-input) > .flatpickr-calendar .numInputWrapper {
  border-radius: 0 !important;
}


/* ============================================================================
   7. Footer
   ============================================================================ */

.footer {
  border-top: 1px solid rgb(var(--color-border) / var(--color-border-alpha));
}
.footer .text-block.h1 > * {
  font-size: clamp(3.2rem, 3vw, 4.4rem);
  letter-spacing: 0.02em;
}
.footer .accordion__summary-text,
.footer__heading {
  font-family: var(--font-body--family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__link,
.footer__details a {
  font-size: 1.4rem;
}
.footer__copyright,
.footer__bottom {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ============================================================================
   8. Menu drawer
   ============================================================================ */

/* the account button carries the `block` utility, which beat the button's own
   inline-flex and left its label at the start edge */
.menu-drawer .account-button.btn {
  display: flex;
}


/* ============================================================================
   9. Floating badges + highlight underlines — editorial, not playful
   ============================================================================
   The lifted floating badges (Our Story, Layered Scrolling Cards) were tilted
   circles and wavy stars that bobbed up and down, and the collection highlight
   and sales countdown drew a hand-drawn wave under the active word. Here a badge
   is a flat, square tag set in the eyebrow voice (the Typography panel's
   subheading font, small caps, wide tracking, a short hairline before the text),
   and an underline is a straight rule that draws in from the left. The badge
   colour, text colour and position pickers still apply. */

/* badge: flat square tag, no tilt, no shape, no bob. Two classes deep because
   `.badge-block__inner:not(.badge-block--shape-none)` squares it with aspect-ratio */
html .badge-block .badge-block__inner {
  transform: none;
  width: auto;
  aspect-ratio: auto;
}
/* two classes deep too: `.badge-block--shape-circle .badge-block__shape` clips to a
   circle, which on this wide tag cut both ends off up to the text */
html .badge-block .badge-block__shape {
  background-color: var(--background-color);
  clip-path: none;
  border-radius: 0;
}
html .badge-block__shape svg {
  display: none;
}
html .badge-block--mode-float .badge-block__float-layer[class*="badge-block--animation-float"] {
  animation: none;
}
html .badge-block__texts {
  padding: 1.1rem 1.6rem;
}
/* .text-block is a flex column, and the flex parent turns inline-flex into flex,
   so the row is set here or the hairline sits above the text */
html .badge-block .badge-text {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: auto;
  max-width: none;
  margin: 0;
  font-family: var(--font-subheading--family);
  font-weight: var(--font-subheading--weight);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
html .badge-block .badge-text::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.6;
}
html .badge-block .badge-text > * {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

/* collection highlight: the active title gets a straight 2px rule that grows in */
html .collection-highlight--title-wavy-underline .collection-highlight__title::after {
  -webkit-mask-image: none;
  mask-image: none;
  bottom: -0.6rem;
  width: 0;
  height: 2px;
  opacity: 1;
  background: rgb(var(--color-foreground));
  transition: width var(--animation-duration--medium, 0.4s) var(--animation-easing--smooth, ease);
}
html .collection-highlight--title-wavy-underline .collection-highlight__title[aria-current="true"]::after {
  width: 100%;
}

/* sales countdown: the highlighted word gets the same rule, drawn when it scrolls in */
html .highlight-text--wavy-underline svg {
  display: none;
}
html .highlight-text--wavy-underline {
  padding-bottom: 0.06em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 max(2px, 0.045em);
  transition: background-size 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
html .highlight-text--wavy-underline.animate {
  background-size: 100% max(2px, 0.045em);
}
@media (prefers-reduced-motion: reduce) {
  html .highlight-text--wavy-underline,
  html .collection-highlight--title-wavy-underline .collection-highlight__title::after {
    transition: none;
  }
}